@tribepad/themis 1.0.15 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "Accessible React component library built on React Aria primitives",
   "author": "Tribepad <mbasford@tribepad.com>",
   "license": "MIT",
@@ -128,11 +128,11 @@
   },
   "peerDependencies": {
     "lucide-react": ">=0.400.0",
+    "motion": ">=11.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "tailwindcss": "^3.4.0 || ^4.0.0",
-    "zod": "^3.0.0 || ^4.0.0",
-    "motion": ">=11.0.0"
+    "zod": "^3.0.0 || ^4.0.0"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {
@@ -160,8 +160,9 @@
   "devDependencies": {
     "@eslint/js": "^9.39.3",
     "@size-limit/preset-small-lib": "^11.0.0",
-    "@storybook/addon-a11y": "^10.2.10",
-    "@storybook/react-vite": "^10.2.10",
+    "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-mcp": "^0.4.2",
+    "@storybook/react-vite": "^10.3.3",
     "@tailwindcss/vite": "^4.2.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
@@ -175,19 +176,20 @@
     "@vitest/coverage-v8": "^4.0.0",
     "eslint": "^9.0.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-storybook": "10.3.3",
     "globals": "^17.3.0",
     "happy-dom": "^20.7.0",
     "jest-axe": "^10.0.0",
     "jsdom": "^28.1.0",
     "lucide-react": ">=0.400.0",
+    "motion": "^12.35.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "size-limit": "^11.0.0",
-    "storybook": "^10.2.10",
+    "storybook": "^10.3.3",
     "tsup": "^8.0.0",
     "tsx": "^4.0.0",
     "typescript": "^5.9.3",
-    "motion": "^12.35.0",
     "vitest": "^4.0.18",
     "zod": "^4.3.6"
   },

package/src/elements/ColorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,289 @@
+/**
+ * ColorPicker Component Stories
+ *
+ * Storybook stories demonstrating all modes, variants, sizes, and states.
+ */
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ColorPicker } from './ColorPicker';
+import type { Color } from 'react-aria-components';
+
+const meta = {
+  title: 'Elements/ColorPicker',
+  component: ColorPicker,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Accessible color picker with swatch presets, advanced picker, or both. Built on React Aria ColorPicker and ColorSwatchPicker primitives for WCAG 2.2 AAA compliance.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    mode: {
+      control: 'select',
+      options: ['swatch', 'advanced', 'both'],
+      description: 'Which picker UI to display',
+      table: { defaultValue: { summary: 'both' } },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Size variant',
+      table: { defaultValue: { summary: 'default' } },
+    },
+    label: {
+      control: 'text',
+      description: 'Label text',
+    },
+    description: {
+      control: 'text',
+      description: 'Helper text below the label',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Error message when isInvalid is true',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the picker is disabled',
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Whether a value is required',
+    },
+    isInvalid: {
+      control: 'boolean',
+      description: 'Whether the field is in an invalid state',
+    },
+    isReadOnly: {
+      control: 'boolean',
+      description: 'Whether the field is read-only',
+    },
+  },
+} satisfies Meta<typeof ColorPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// =============================================================================
+// Default (Both Mode)
+// =============================================================================
+
+export const Default: Story = {
+  args: {
+    label: 'Brand Color',
+    defaultValue: '#7c3aed',
+  },
+};
+
+// =============================================================================
+// Swatch Only
+// =============================================================================
+
+export const SwatchOnly: Story = {
+  args: {
+    label: 'Pick a color',
+    mode: 'swatch',
+    defaultValue: '#ff0000',
+  },
+};
+
+// =============================================================================
+// Advanced Only
+// =============================================================================
+
+export const AdvancedOnly: Story = {
+  args: {
+    label: 'Custom Color',
+    mode: 'advanced',
+    defaultValue: '#4a86e8',
+  },
+};
+
+// =============================================================================
+// Custom Swatch Colors
+// =============================================================================
+
+export const CustomColors: Story = {
+  args: {
+    label: 'Theme Color',
+    mode: 'swatch',
+    colors: [
+      '#ef4444', '#f97316', '#eab308', '#22c55e',
+      '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899',
+    ],
+    defaultValue: '#3b82f6',
+  },
+};
+
+// =============================================================================
+// With Description
+// =============================================================================
+
+export const WithDescription: Story = {
+  args: {
+    label: 'Brand Color',
+    description: 'Choose the primary color for your brand. This will be used across all marketing materials.',
+    defaultValue: '#7c3aed',
+  },
+};
+
+// =============================================================================
+// Required
+// =============================================================================
+
+export const Required: Story = {
+  args: {
+    label: 'Primary Color',
+    isRequired: true,
+    defaultValue: '#000000',
+  },
+};
+
+// =============================================================================
+// Invalid State
+// =============================================================================
+
+export const Invalid: Story = {
+  args: {
+    label: 'Color',
+    isInvalid: true,
+    errorMessage: 'Please select a valid brand color',
+    defaultValue: '#000000',
+  },
+};
+
+// =============================================================================
+// Disabled
+// =============================================================================
+
+export const Disabled: Story = {
+  args: {
+    label: 'Color',
+    isDisabled: true,
+    defaultValue: '#7c3aed',
+  },
+};
+
+// =============================================================================
+// Read Only
+// =============================================================================
+
+export const ReadOnly: Story = {
+  args: {
+    label: 'Assigned Color',
+    isReadOnly: true,
+    defaultValue: '#22c55e',
+  },
+};
+
+// =============================================================================
+// Size: Small
+// =============================================================================
+
+export const SizeSmall: Story = {
+  args: {
+    label: 'Color',
+    size: 'sm',
+    defaultValue: '#ff0000',
+  },
+};
+
+// =============================================================================
+// Size: Large
+// =============================================================================
+
+export const SizeLarge: Story = {
+  args: {
+    label: 'Color',
+    size: 'lg',
+    defaultValue: '#0000ff',
+  },
+};
+
+// =============================================================================
+// Controlled
+// =============================================================================
+
+function ControlledExample() {
+  const [hex, setHex] = useState('#7c3aed');
+
+  return (
+    <div className="flex flex-col gap-4">
+      <ColorPicker
+        label="Controlled Color"
+        value={hex}
+        onChange={(color: Color) => setHex(color.toString('hex'))}
+      />
+      <p className="text-sm text-[var(--muted-foreground)]">
+        Selected: <code className="font-mono">{hex}</code>
+      </p>
+    </div>
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledExample />,
+};
+
+// =============================================================================
+// With Form Name
+// =============================================================================
+
+export const WithFormName: Story = {
+  args: {
+    label: 'Brand Color',
+    name: 'brand_color',
+    defaultValue: '#7c3aed',
+    description: 'This color will be submitted as a hidden form field named "brand_color".',
+  },
+};
+
+// =============================================================================
+// All Sizes Comparison
+// =============================================================================
+
+function AllSizesExample() {
+  return (
+    <div className="flex flex-col gap-6">
+      <ColorPicker label="Small" size="sm" mode="advanced" defaultValue="#ef4444" />
+      <ColorPicker label="Default" size="default" mode="advanced" defaultValue="#3b82f6" />
+      <ColorPicker label="Large" size="lg" mode="advanced" defaultValue="#22c55e" />
+    </div>
+  );
+}
+
+export const AllSizes: Story = {
+  render: () => <AllSizesExample />,
+};
+
+// =============================================================================
+// All Modes Comparison
+// =============================================================================
+
+function AllModesExample() {
+  return (
+    <div className="flex flex-col gap-8">
+      <div>
+        <h3 className="text-sm font-medium mb-2 text-[var(--content-foreground)]">Swatch Only</h3>
+        <ColorPicker mode="swatch" defaultValue="#ff0000" />
+      </div>
+      <div>
+        <h3 className="text-sm font-medium mb-2 text-[var(--content-foreground)]">Advanced Only</h3>
+        <ColorPicker mode="advanced" defaultValue="#3b82f6" />
+      </div>
+      <div>
+        <h3 className="text-sm font-medium mb-2 text-[var(--content-foreground)]">Both (Default)</h3>
+        <ColorPicker mode="both" defaultValue="#7c3aed" />
+      </div>
+    </div>
+  );
+}
+
+export const AllModes: Story = {
+  render: () => <AllModesExample />,
+};

package/src/elements/Combobox/Combobox.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 import { Combobox, ComboboxItem, ComboboxSection } from './Combobox';
 

package/src/elements/MatrixGrid/MatrixGrid.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { MatrixGrid } from './MatrixGrid';
 
 const LIKERT_COLUMNS = [

package/src/elements/RatingScale/RatingScale.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { RatingScale } from './RatingScale';
 
 const meta = {

package/src/elements/SituationalJudgement/SituationalJudgement.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { SituationalJudgement } from './SituationalJudgement';
 
 const SAMPLE_RESPONSES = [