feat(toaster): add Toaster organism with ToasterApi controller

.claude/CLAUDE.md

@@ -2,3 +2,4 @@
 @rules/aiworkers/skills-format.md
 @rules/aiworkers/jsx-style.md
 @rules/aiworkers/conventional-commits.md
+@rules/component-patterns.md

.claude/rules/component-patterns.md

@@ -0,0 +1,38 @@
+# Component patterns
+
+## Before implementing a new component
+
+Always read an existing component of the same category before writing any code. Do not guess the structure — read the actual code.
+
+- New Atom → read another existing Atom
+- New Molecule → read another existing Molecule
+- Component uses Reanimated → read the `useReanimatedStyles` hook of a component that already uses it (e.g. `CheckBox`)
+
+This ensures hooks, file structure, test patterns, and import style are consistent with the rest of the library.
+
+## Fixed values
+
+No hardcoded numeric values in code. Always use design system tokens:
+
+- Spacing and sizes: `Tokens.spacer({ key: '...' })`
+- Border radii: `Tokens.radii({ key: '...' })`
+
+Component-specific layout values (e.g. a Switch track width) belong in the component's `constants/` folder — one file per constant, all exported via `index.ts`:
+
+```
+constants/
+├── NAME_OF_CONSTANT.ts    ← one constant per file
+└── index.ts               ← export * from each file
+```
+
+Never define layout constants directly in `styles.ts` or in the component file.
+
+## Storybook
+
+Every new component needs a story at `example/.rnstorybook/stories/<Category>/<Component>/`.
+
+Minimum variants to cover:
+- Default state (off / false / empty)
+- Active state (on / true / filled)
+- Disabled (when applicable)
+- `Interactive` — with `useState` to test the real animation in Storybook

__mocks__/react-native-reanimated.ts

@@ -5,6 +5,8 @@ const useSharedValue = (init: unknown) => ({ value: init });
 const useAnimatedStyle = (fn: () => object) => fn();
 const withTiming = (value: unknown) => value;
 const withSpring = (value: unknown) => value;
+const interpolate = (_value: unknown, _input: unknown, output: number[]) =>
+  output[0];
 const interpolateColor = (_value: unknown, _range: unknown, colors: string[]) =>
   colors[0];
 const runOnJS = (fn: (...args: unknown[]) => unknown) => fn;
@@ -42,6 +44,7 @@ module.exports = {
   useAnimatedGestureHandler,
   withTiming,
   withSpring,
+  interpolate,
   interpolateColor,
   runOnJS,
   runOnUI,

example/.rnstorybook/stories/Atoms/Switch/Switch.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react-native';
+import React, { useState } from 'react';
+import { Switch } from 'rubber-duck-ui';
+
+const meta = {
+  title: 'Atoms/Switch',
+  component: Switch,
+  args: {
+    isOn: false,
+    onPress: () => {},
+  },
+  argTypes: {
+    isOn: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const On: Story = {
+  args: {
+    isOn: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const DisabledOn: Story = {
+  args: {
+    isOn: true,
+    disabled: true,
+  },
+};
+
+const InteractiveSwitch = (args: React.ComponentProps<typeof Switch>) => {
+  const [isOn, setIsOn] = useState(false);
+
+  return (
+    <Switch
+      {...args}
+      isOn={isOn}
+      onPress={() => setIsOn((prev) => !prev)}
+    />
+  );
+};
+
+export const Interactive: Story = {
+  render: (args) => <InteractiveSwitch {...args} />,
+};

example/.rnstorybook/stories/Atoms/Text/Text.stories.tsx

@@ -139,3 +139,20 @@ export const Truncated: Story = {
       'This is a very long text that should be truncated after one line because numberOfLines is set to 1',
   },
 };
+
+export const InlineBold: Story = {
+  args: {
+    children: 'I agree to the **Terms & Privacy Policy**',
+  },
+};
+
+export const InlineBoldVariants: Story = {
+  render: () => (
+    <View style={styles.container}>
+      <Text>{'I agree to the **Terms & Privacy Policy**'}</Text>
+      <Text size="lg">{'**Bold** at the start of the sentence'}</Text>
+      <Text size="sm" color="textSecondary">{'Mix of **bold** and regular text here'}</Text>
+      <Text>{'**Multiple** bold **segments** in one text'}</Text>
+    </View>
+  ),
+};

example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react-native';
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { Button } from 'rubber-duck-ui';
+import { styles } from './Button.styles';
+
+const meta = {
+  title: 'Molecules/Button',
+  component: Button,
+  args: {
+    label: 'Button',
+    variant: 'primary',
+    size: 'md',
+    disabled: false,
+    isLoading: false,
+    onPress: () => {},
+  },
+  argTypes: {
+    label: { control: 'text' },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'outline', 'ghost', 'destructive'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    disabled: { control: 'boolean' },
+    isLoading: { control: 'boolean' },
+    leftIcon: {
+      control: 'select',
+      options: [undefined, 'ArrowLeft', 'Plus', 'Check', 'Trash2'],
+    },
+    rightIcon: {
+      control: 'select',
+      options: [undefined, 'ArrowRight', 'Plus', 'Check', 'Trash2'],
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: (args) => (
+    <View style={styles.container}>
+      <Button {...args} variant="primary" label="Primary" />
+      <Button {...args} variant="secondary" label="Secondary" />
+      <Button {...args} variant="outline" label="Outline" />
+      <Button {...args} variant="ghost" label="Ghost" />
+      <Button {...args} variant="destructive" label="Destructive" />
+    </View>
+  ),
+};
+
+export const Sizes: Story = {
+  render: (args) => (
+    <View style={styles.container}>
+      <Button {...args} size="sm" label="Small" />
+      <Button {...args} size="md" label="Medium" />
+      <Button {...args} size="lg" label="Large" />
+    </View>
+  ),
+};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const WithIcons: Story = {
+  render: (args) => (
+    <View style={styles.container}>
+      <Button {...args} leftIcon="ArrowLeft" label="Back" />
+      <Button {...args} rightIcon="ArrowRight" label="Next" />
+      <Button {...args} leftIcon="Plus" rightIcon="ArrowRight" label="Add item" />
+    </View>
+  ),
+};
+
+export const Inline: Story = {
+  render: (args) => (
+    <View style={styles.inline}>
+      <Button {...args} />
+    </View>
+  ),
+};
+
+const InteractiveButton = (args: React.ComponentProps<typeof Button>) => {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <Button
+      {...args}
+      isLoading={loading}
+      onPress={() => {
+        setLoading(true);
+        setTimeout(() => setLoading(false), 2000);
+      }}
+    />
+  );
+};
+
+export const Interactive: Story = {
+  render: (args) => <InteractiveButton {...args} />,
+};

example/.rnstorybook/stories/Molecules/Button/Button.styles.ts

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    gap: 16,
+  },
+
+  inline: {
+    alignSelf: 'flex-start',
+  },
+});

example/.rnstorybook/stories/Organisms/Toaster/Toaster.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react-native';
+import React, { useState } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { Toaster, ToasterApi } from 'rubber-duck-ui';
+import { styles } from './Toaster.styles';
+
+const Trigger = ({ label, onPress }: { label: string; onPress: () => void }) => (
+  <TouchableOpacity style={styles.trigger} onPress={onPress}>
+    <Text style={styles.triggerText}>{label}</Text>
+  </TouchableOpacity>
+);
+
+const DefaultDemo = () => (
+  <View style={styles.container}>
+    <Trigger
+      label="Show Success"
+      onPress={() =>
+        ToasterApi.show({
+          type: 'success',
+          title: 'Success!',
+          description: 'Your action was completed.',
+        })
+      }
+    />
+    <Trigger
+      label="Show Error"
+      onPress={() =>
+        ToasterApi.show({
+          type: 'error',
+          title: 'Error!',
+          description: 'Something went wrong.',
+        })
+      }
+    />
+    <Trigger
+      label="Show Warning"
+      onPress={() =>
+        ToasterApi.show({
+          type: 'warning',
+          title: 'Warning!',
+          description: 'Please check your input.',
+        })
+      }
+    />
+    <Trigger
+      label="Show Info"
+      onPress={() =>
+        ToasterApi.show({
+          type: 'info',
+          title: 'Info',
+          description: 'Here is some information.',
+        })
+      }
+    />
+    <Toaster />
+  </View>
+);
+
+type ToasterType = 'success' | 'error' | 'warning' | 'info';
+
+const TYPES: ToasterType[] = ['success', 'error', 'warning', 'info'];
+
+const InteractiveDemo = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const showNext = () => {
+    const type = TYPES[currentIndex % TYPES.length];
+    ToasterApi.show({
+      type,
+      title: `${type.charAt(0).toUpperCase()}${type.slice(1)} toast`,
+      description: `This is a ${type} notification.`,
+    });
+    setCurrentIndex((prev) => (prev + 1) % TYPES.length);
+  };
+
+  return (
+    <View style={styles.container}>
+      <Trigger label="Cycle through types" onPress={showNext} />
+      <Toaster />
+    </View>
+  );
+};
+
+const meta = {
+  title: 'Organisms/Toaster',
+  component: View,
+} satisfies Meta<typeof View>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <DefaultDemo />,
+};
+
+export const Interactive: Story = {
+  render: () => <InteractiveDemo />,
+};

example/.rnstorybook/stories/Organisms/Toaster/Toaster.styles.ts

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 12,
+    padding: 24,
+  },
+  trigger: {
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    borderRadius: 8,
+    backgroundColor: '#FFD600',
+    alignItems: 'center',
+    width: '100%',
+  },
+  triggerText: {
+    color: '#000',
+    fontWeight: '600',
+    fontSize: 14,
+  },
+});