@tribepad/themis 1.0.1 → 1.0.3

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

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from 'storybook/test';
+import { Combobox, ComboboxItem, ComboboxSection } from './Combobox';
+
+const meta = {
+  title: 'Elements/Combobox',
+  component: Combobox,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A filterable select/autocomplete input. Type to filter options, navigate with keyboard, or enter custom values. Built on React Aria ComboBox.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'default', 'lg'],
+    },
+  },
+  args: {
+    onSelectionChange: fn(),
+    onInputChange: fn(),
+  },
+} satisfies Meta<typeof Combobox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Combobox label="Framework" placeholder="Select a framework..." {...args}>
+      <ComboboxItem id="react">React</ComboboxItem>
+      <ComboboxItem id="vue">Vue</ComboboxItem>
+      <ComboboxItem id="angular">Angular</ComboboxItem>
+      <ComboboxItem id="svelte">Svelte</ComboboxItem>
+      <ComboboxItem id="solid">SolidJS</ComboboxItem>
+    </Combobox>
+  ),
+};
+
+export const WithSections: Story = {
+  render: (args) => (
+    <Combobox label="Technology" placeholder="Choose..." {...args}>
+      <ComboboxSection header="Frontend">
+        <ComboboxItem id="react">React</ComboboxItem>
+        <ComboboxItem id="vue">Vue</ComboboxItem>
+        <ComboboxItem id="angular">Angular</ComboboxItem>
+      </ComboboxSection>
+      <ComboboxSection header="Backend">
+        <ComboboxItem id="express">Express</ComboboxItem>
+        <ComboboxItem id="fastify">Fastify</ComboboxItem>
+        <ComboboxItem id="nest">NestJS</ComboboxItem>
+      </ComboboxSection>
+    </Combobox>
+  ),
+};
+
+export const AllowsCustomValue: Story = {
+  render: (args) => (
+    <Combobox label="Color" placeholder="Type a color..." allowsCustomValue {...args}>
+      <ComboboxItem id="red">Red</ComboboxItem>
+      <ComboboxItem id="blue">Blue</ComboboxItem>
+      <ComboboxItem id="green">Green</ComboboxItem>
+    </Combobox>
+  ),
+};
+
+export const WithDescription: Story = {
+  render: (args) => (
+    <Combobox label="Language" description="Choose your preferred language" placeholder="Select..." {...args}>
+      <ComboboxItem id="en">English</ComboboxItem>
+      <ComboboxItem id="fr">French</ComboboxItem>
+      <ComboboxItem id="de">German</ComboboxItem>
+    </Combobox>
+  ),
+};
+
+export const WithError: Story = {
+  render: (args) => (
+    <Combobox label="Country" errorMessage="Selection is required" placeholder="Select..." {...args}>
+      <ComboboxItem id="us">United States</ComboboxItem>
+      <ComboboxItem id="uk">United Kingdom</ComboboxItem>
+    </Combobox>
+  ),
+};
+
+export const Disabled: Story = {
+  render: (args) => (
+    <Combobox label="Disabled" placeholder="Cannot interact" isDisabled {...args}>
+      <ComboboxItem id="a">Option A</ComboboxItem>
+    </Combobox>
+  ),
+};
+
+export const Small: Story = {
+  render: (args) => (
+    <Combobox label="Small" size="sm" placeholder="Small size..." {...args}>
+      <ComboboxItem id="a">Option A</ComboboxItem>
+      <ComboboxItem id="b">Option B</ComboboxItem>
+    </Combobox>
+  ),
+};
+
+export const Large: Story = {
+  render: (args) => (
+    <Combobox label="Large" size="lg" placeholder="Large size..." {...args}>
+      <ComboboxItem id="a">Option A</ComboboxItem>
+      <ComboboxItem id="b">Option B</ComboboxItem>
+    </Combobox>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[400px]">
+      <Combobox label="Small" size="sm" placeholder="Small...">
+        <ComboboxItem id="a">Option A</ComboboxItem>
+        <ComboboxItem id="b">Option B</ComboboxItem>
+      </Combobox>
+      <Combobox label="Default" placeholder="Default...">
+        <ComboboxItem id="a">Option A</ComboboxItem>
+        <ComboboxItem id="b">Option B</ComboboxItem>
+      </Combobox>
+      <Combobox label="Large" size="lg" placeholder="Large...">
+        <ComboboxItem id="a">Option A</ComboboxItem>
+        <ComboboxItem id="b">Option B</ComboboxItem>
+      </Combobox>
+    </div>
+  ),
+};

package/src/elements/DatePicker/DatePicker.stories.tsx

@@ -5,7 +5,7 @@
  * DateField, and Calendar variants and use cases.
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { DatePicker, DateRangePicker, DateField, Calendar } from './index';
 import { parseDate, today, getLocalTimeZone, isWeekend } from '@internationalized/date';

package/src/elements/Dropdown/Dropdown.stories.tsx

@@ -5,7 +5,7 @@
  * @see tasks.md T027 (Storybook stories with 7+ examples)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Dropdown } from './Dropdown';
 import { Button } from '../Button';
 import {

package/src/elements/FileField/FileField.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useState, type FormEvent } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { FileField } from './FileField';
 import { formatFileSize, formatAcceptedTypes } from './utils';
 
@@ -610,7 +610,7 @@ export const FormWithFileField: Story = {
               <label className="block text-sm font-medium mb-1">Name</label>
               <input
                 type="text"
-                className="w-full rounded-md border border-[var(--input)] px-3 py-2"
+                className="w-full rounded-md border border-[var(--input-border)] px-3 py-2"
                 placeholder="Your name"
               />
             </div>

package/src/elements/FileField/FileProgress.stories.tsx

@@ -5,7 +5,7 @@
  * @see future-plan.md Section 2: Upload Progress Indication
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { FileProgress } from './FileProgress';
 
 // Create mock file helper

package/src/elements/FormLayout/FormLayout.stories.tsx

@@ -6,7 +6,7 @@
  * @see FormLayout-design-decisions.md (Visual specifications)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { FormLayout } from './FormLayout';
 import { Button } from '../Button/Button';
 import { TextField } from '../TextField/TextField';

package/src/elements/Modal/Modal.stories.tsx

@@ -8,7 +8,7 @@
  */
 
 import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Modal } from './Modal';
 import { Button } from '../Button';
 

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

@@ -6,7 +6,7 @@
  */
 
 import { useState, type FormEventHandler } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { NumberField } from './index';
 
 const meta = {

package/src/elements/OTPInput/OTPInput.stories.tsx

@@ -6,7 +6,7 @@
  * @see ACCESSIBILITY.md (WCAG 2.2 AAA Compliance Documentation)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { OTPInput } from './OTPInput';
 import { useState } from 'react';
 

package/src/elements/Pagination/Pagination.stories.tsx

@@ -0,0 +1,203 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Pagination } from './Pagination';
+
+const meta = {
+  title: 'Elements/Pagination',
+  component: Pagination,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Navigation component for paginated content. Supports page numbers, prev/next, first/last buttons, and multiple visual variants.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'default', 'lg'],
+    },
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'outline', 'ghost'],
+    },
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    page: 1,
+    totalPages: 10,
+    onPageChange: () => {},
+  },
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    return (
+      <div className="flex flex-col items-center gap-4">
+        <Pagination page={page} totalPages={20} onPageChange={setPage} />
+        <p className="text-sm text-[var(--muted-foreground)]">
+          Page {page} of 20
+        </p>
+      </div>
+    );
+  },
+};
+
+export const MiddlePage: Story = {
+  args: {
+    page: 5,
+    totalPages: 10,
+    onPageChange: () => {},
+  },
+};
+
+export const LastPage: Story = {
+  args: {
+    page: 10,
+    totalPages: 10,
+    onPageChange: () => {},
+  },
+};
+
+export const FewPages: Story = {
+  args: {
+    page: 2,
+    totalPages: 3,
+    onPageChange: () => {},
+  },
+};
+
+export const SinglePage: Story = {
+  args: {
+    page: 1,
+    totalPages: 1,
+    onPageChange: () => {},
+  },
+};
+
+export const ManyPages: Story = {
+  args: {
+    page: 50,
+    totalPages: 100,
+    onPageChange: () => {},
+  },
+};
+
+export const OutlineVariant: Story = {
+  args: {
+    page: 3,
+    totalPages: 10,
+    variant: 'outline',
+    onPageChange: () => {},
+  },
+};
+
+export const GhostVariant: Story = {
+  args: {
+    page: 3,
+    totalPages: 10,
+    variant: 'ghost',
+    onPageChange: () => {},
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    page: 3,
+    totalPages: 10,
+    size: 'sm',
+    onPageChange: () => {},
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    page: 3,
+    totalPages: 10,
+    size: 'lg',
+    onPageChange: () => {},
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    page: 5,
+    totalPages: 10,
+    isDisabled: true,
+    onPageChange: () => {},
+  },
+};
+
+export const NoFirstLast: Story = {
+  args: {
+    page: 5,
+    totalPages: 10,
+    showFirstLast: false,
+    onPageChange: () => {},
+  },
+};
+
+export const NoPrevNext: Story = {
+  args: {
+    page: 5,
+    totalPages: 10,
+    showPrevNext: false,
+    onPageChange: () => {},
+  },
+};
+
+export const PageNumbersOnly: Story = {
+  args: {
+    page: 5,
+    totalPages: 10,
+    showFirstLast: false,
+    showPrevNext: false,
+    onPageChange: () => {},
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div>
+        <p className="text-sm text-[var(--muted-foreground)] mb-2">Default</p>
+        <Pagination page={5} totalPages={10} variant="default" onPageChange={() => {}} />
+      </div>
+      <div>
+        <p className="text-sm text-[var(--muted-foreground)] mb-2">Outline</p>
+        <Pagination page={5} totalPages={10} variant="outline" onPageChange={() => {}} />
+      </div>
+      <div>
+        <p className="text-sm text-[var(--muted-foreground)] mb-2">Ghost</p>
+        <Pagination page={5} totalPages={10} variant="ghost" onPageChange={() => {}} />
+      </div>
+    </div>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div>
+        <p className="text-sm text-[var(--muted-foreground)] mb-2">Small</p>
+        <Pagination page={5} totalPages={10} size="sm" onPageChange={() => {}} />
+      </div>
+      <div>
+        <p className="text-sm text-[var(--muted-foreground)] mb-2">Default</p>
+        <Pagination page={5} totalPages={10} size="default" onPageChange={() => {}} />
+      </div>
+      <div>
+        <p className="text-sm text-[var(--muted-foreground)] mb-2">Large</p>
+        <Pagination page={5} totalPages={10} size="lg" onPageChange={() => {}} />
+      </div>
+    </div>
+  ),
+};

package/src/elements/Panel/Panel.stories.tsx

@@ -13,7 +13,7 @@
  */
 
 import { useState, type ReactElement } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Panel } from './Panel';
 import { Button } from '../Button';
 

package/src/elements/PasswordField/PasswordField.stories.tsx

@@ -0,0 +1,167 @@
+/**
+ * PasswordField Component Stories
+ * Storybook stories for PasswordField component demonstrating all variants, sizes, and states
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PasswordField } from './PasswordField';
+
+const meta = {
+  title: 'Elements/PasswordField',
+  component: PasswordField,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A specialized password input with show/hide toggle. Built on Themis TextField for WCAG 2.2 AAA compliance.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'default', 'lg'],
+      description: 'The size variant of the password field',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the password field is disabled',
+    },
+    isReadOnly: {
+      control: 'boolean',
+      description: 'Whether the password field is read-only',
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Whether the password field is required',
+    },
+    hasToggle: {
+      control: 'boolean',
+      description: 'Whether to show the password visibility toggle',
+    },
+  },
+} satisfies Meta<typeof PasswordField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Password',
+    placeholder: 'Enter your password',
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    label: 'Password',
+    placeholder: 'Enter your password',
+    description: 'Must be at least 8 characters',
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Password',
+    placeholder: 'Enter your password',
+    errorMessage: 'Password must be at least 8 characters',
+  },
+};
+
+export const WithSuccess: Story = {
+  args: {
+    label: 'Password',
+    placeholder: 'Enter your password',
+    successMessage: 'Strong password!',
+    defaultValue: 'SecureP@ss123',
+  },
+};
+
+export const NoToggle: Story = {
+  args: {
+    label: 'Password',
+    placeholder: 'Enter your password',
+    hasToggle: false,
+  },
+};
+
+export const NewPassword: Story = {
+  args: {
+    label: 'New Password',
+    placeholder: 'Create a password',
+    autoComplete: 'new-password',
+    description: 'Use at least 8 characters with a mix of letters, numbers, and symbols',
+  },
+};
+
+export const Required: Story = {
+  args: {
+    label: 'Password',
+    placeholder: 'Required',
+    isRequired: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Password',
+    placeholder: 'Disabled',
+    isDisabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    label: 'Password',
+    defaultValue: 'readonly-value',
+    isReadOnly: true,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    label: 'Password',
+    placeholder: 'Small',
+    size: 'sm',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    label: 'Password',
+    placeholder: 'Large',
+    size: 'lg',
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[400px]">
+      <PasswordField label="Small" size="sm" placeholder="Small password..." />
+      <PasswordField label="Default" size="default" placeholder="Default password..." />
+      <PasswordField label="Large" size="lg" placeholder="Large password..." />
+    </div>
+  ),
+};
+
+export const LoginForm: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[400px]">
+      <PasswordField
+        label="Current Password"
+        placeholder="Enter current password"
+        autoComplete="current-password"
+        isRequired
+      />
+      <PasswordField
+        label="New Password"
+        placeholder="Create new password"
+        autoComplete="new-password"
+        description="Must be at least 8 characters"
+        isRequired
+      />
+    </div>
+  ),
+};

package/src/elements/Progress/Progress.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useState, useEffect } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Progress } from './Progress';
 
 const meta = {
@@ -612,6 +612,10 @@ export const StorageUsage: Story = {
 };
 
 export const MultipleProgress: Story = {
+  args: {
+    size: "lg"
+  },
+
   render: () => (
     <div className="w-[400px] space-y-4">
       <Progress
@@ -637,13 +641,14 @@ export const MultipleProgress: Story = {
       />
     </div>
   ),
+
   parameters: {
     docs: {
       description: {
         story: 'Multiple progress bars showing task list with different states.',
       },
     },
-  },
+  }
 };
 
 export const LoadingData: Story = {

package/src/elements/RadioGroup/RadioGroup.stories.tsx

@@ -8,7 +8,7 @@
  */
 
 import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { RadioGroup, Radio } from './RadioGroup';
 
 const meta = {
@@ -654,8 +654,8 @@ export const SurveyQuestion: Story = {
 
 export const DangerZone: Story = {
   render: () => (
-    <div className="w-96 rounded-lg border border-[var(--destructive)] bg-[var(--background)] p-6">
-      <h3 className="mb-4 text-lg font-semibold text-[var(--destructive)]">Danger Zone</h3>
+    <div className="w-96 rounded-lg border border-[var(--destructive-background)] bg-[var(--background)] p-6">
+      <h3 className="mb-4 text-lg font-semibold text-[var(--destructive-background)]">Danger Zone</h3>
       <RadioGroup
         variant="destructive"
         label="Delete your account?"

package/src/elements/Resizable/Resizable.stories.tsx

@@ -8,7 +8,7 @@
  */
 
 import { useState, type ReactElement } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   ResizablePanelGroup,
   ResizablePanel,