@tribepad/themis 1.0.7 → 1.0.9

package/src/elements/NumberField/NumberField.stories.tsx

@@ -676,3 +676,103 @@ export const Playground: Story = {
     },
   },
 };
+
+// =============================================================================
+// Animation Stories (ADR 020)
+// =============================================================================
+
+/**
+ * Spring animation on stepper press (default behavior when motion.dev is installed).
+ * Click increment/decrement to see the value spring to its target.
+ */
+export const AnimatedStepper: Story = {
+  args: {
+    label: 'Quantity',
+    defaultValue: 5,
+    step: 1,
+    minValue: 0,
+    maxValue: 99,
+    animated: true,
+    description: 'Click stepper buttons to see the spring animation',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Default animated NumberField with spring physics on stepper press. The displayed value springs from the old value to the new one. Direct keyboard input updates instantly.',
+      },
+    },
+  },
+};
+
+/**
+ * Animation disabled — value updates instantly on stepper press.
+ */
+export const NoStepperAnimation: Story = {
+  args: {
+    label: 'Quantity',
+    defaultValue: 5,
+    step: 1,
+    minValue: 0,
+    maxValue: 99,
+    animated: false,
+    description: 'Stepper updates value instantly (no spring)',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'NumberField with `animated={false}`. Stepper press updates the value instantly without spring animation.',
+      },
+    },
+  },
+};
+
+/**
+ * Currency formatting with spring animation.
+ * The animated overlay displays locale-formatted intermediate values.
+ */
+export const AnimatedCurrency: Story = {
+  args: {
+    label: 'Price',
+    defaultValue: 9.99,
+    step: 0.5,
+    minValue: 0,
+    maxValue: 999.99,
+    animated: true,
+    formatOptions: { style: 'currency', currency: 'USD' },
+    description: 'Spring animation with currency formatting',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Currency-formatted NumberField with spring animation. The overlay formats intermediate values with the same Intl.NumberFormat options as the input.',
+      },
+    },
+  },
+};
+
+/**
+ * Custom spring configuration — softer, bouncier animation.
+ */
+export const CustomSpringConfig: Story = {
+  args: {
+    label: 'Score',
+    defaultValue: 50,
+    step: 10,
+    minValue: 0,
+    maxValue: 100,
+    animated: true,
+    springConfig: { stiffness: 150, damping: 10 },
+    description: 'Low stiffness, low damping = more bounce',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Custom `springConfig` with lower stiffness and damping for a more pronounced bounce effect on stepper press.',
+      },
+    },
+  },
+};

package/src/elements/Switch/Switch.stories.tsx

@@ -437,5 +437,65 @@ export const WithAriaLabel: Story = {
   },
 };
 
+// =============================================================================
+// Animation Stories (ADR 020)
+// =============================================================================
+
+/**
+ * Spring bounce animation on toggle (default behavior when motion.dev is installed).
+ * The thumb overshoots slightly before settling, giving a natural feel.
+ */
+export const Animated: Story = {
+  args: {
+    label: 'Spring animation',
+    description: 'Toggle to see the bounce effect',
+    animated: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default animated switch with spring physics via motion.dev. The thumb bounces when toggled.',
+      },
+    },
+  },
+};
+
+/**
+ * Animation explicitly disabled — thumb slides instantly via CSS.
+ */
+export const NoAnimation: Story = {
+  args: {
+    label: 'No animation',
+    description: 'Instant toggle with no spring',
+    animated: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Switch with `animated={false}`. The thumb translates instantly using CSS, with no spring bounce.',
+      },
+    },
+  },
+};
+
+/**
+ * Custom spring configuration for a slower, bouncier feel.
+ */
+export const CustomSpring: Story = {
+  args: {
+    label: 'Custom spring',
+    description: 'Low stiffness, low damping = more bounce',
+    animated: true,
+    springConfig: { stiffness: 200, damping: 12 },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Custom `springConfig` with lower stiffness and damping for a softer, bouncier toggle.',
+      },
+    },
+  },
+};
+
 // Import React for controlled example
 import { useState } from 'react';

package/src/elements/Tabs/Tabs.stories.tsx

@@ -932,3 +932,104 @@ export const Controlled: Story = {
     );
   },
 };
+
+// =============================================================================
+// Animation Stories (ADR 020)
+// =============================================================================
+
+/**
+ * Animated sliding indicator (default behavior when motion.dev is installed).
+ * Click between tabs to see the underline smoothly slide to the selected tab.
+ */
+export const AnimatedIndicator: Story = {
+  render: () => (
+    <Tabs defaultSelectedKey="tab1" animated>
+      <TabList aria-label="Animated indicator demo">
+        <Tab id="tab1">Account</Tab>
+        <Tab id="tab2">Notifications</Tab>
+        <Tab id="tab3">Security</Tab>
+      </TabList>
+      <TabPanel id="tab1">
+        <div className="p-4">Click other tabs to see the indicator slide.</div>
+      </TabPanel>
+      <TabPanel id="tab2">
+        <div className="p-4">Notification preferences.</div>
+      </TabPanel>
+      <TabPanel id="tab3">
+        <div className="p-4">Security settings.</div>
+      </TabPanel>
+    </Tabs>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Default animated tabs with a sliding underline indicator via motion.dev `layoutId`. The indicator smoothly transitions between tabs on selection.',
+      },
+    },
+  },
+};
+
+/**
+ * Animation disabled — indicator jumps instantly between tabs.
+ */
+export const NoIndicatorAnimation: Story = {
+  render: () => (
+    <Tabs defaultSelectedKey="tab1" animated={false}>
+      <TabList aria-label="No animation demo">
+        <Tab id="tab1">Account</Tab>
+        <Tab id="tab2">Notifications</Tab>
+        <Tab id="tab3">Security</Tab>
+      </TabList>
+      <TabPanel id="tab1">
+        <div className="p-4">Indicator jumps instantly (no slide).</div>
+      </TabPanel>
+      <TabPanel id="tab2">
+        <div className="p-4">Notification preferences.</div>
+      </TabPanel>
+      <TabPanel id="tab3">
+        <div className="p-4">Security settings.</div>
+      </TabPanel>
+    </Tabs>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Tabs with `animated={false}`. The indicator appears instantly on the selected tab without sliding.',
+      },
+    },
+  },
+};
+
+/**
+ * Vertical orientation with animated indicator sliding up and down.
+ */
+export const VerticalAnimated: Story = {
+  render: () => (
+    <Tabs defaultSelectedKey="tab1" orientation="vertical" animated>
+      <TabList aria-label="Vertical animated demo">
+        <Tab id="tab1">Profile</Tab>
+        <Tab id="tab2">Settings</Tab>
+        <Tab id="tab3">Billing</Tab>
+      </TabList>
+      <TabPanel id="tab1">
+        <div className="p-4">Vertical tabs with sliding indicator.</div>
+      </TabPanel>
+      <TabPanel id="tab2">
+        <div className="p-4">Settings panel.</div>
+      </TabPanel>
+      <TabPanel id="tab3">
+        <div className="p-4">Billing information.</div>
+      </TabPanel>
+    </Tabs>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Vertical orientation with animated indicator. The indicator slides vertically between tabs using the same `layoutId` approach.',
+      },
+    },
+  },
+};