@tribepad/themis 1.0.1 → 1.0.3

package/src/elements/SearchField/SearchField.stories.tsx

@@ -0,0 +1,146 @@
+/**
+ * SearchField Component Stories
+ * Storybook stories for SearchField component demonstrating all variants, sizes, and states
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SearchField } from './SearchField';
+
+const meta = {
+  title: 'Elements/SearchField',
+  component: SearchField,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A specialized search input with clear button and search icon. Built on React Aria SearchField for WCAG 2.2 AAA compliance.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'default', 'lg'],
+      description: 'The size variant of the search field',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the search field is disabled',
+    },
+    isReadOnly: {
+      control: 'boolean',
+      description: 'Whether the search field is read-only',
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Whether the search field is required',
+    },
+    isIconHidden: {
+      control: 'boolean',
+      description: 'Whether to hide the search icon',
+    },
+  },
+} satisfies Meta<typeof SearchField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search items...',
+  },
+};
+
+export const WithDefaultValue: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search items...',
+    defaultValue: 'React components',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search...',
+    size: 'sm',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search items...',
+    size: 'lg',
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search items...',
+    description: 'Press Enter to search, Escape to clear',
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search items...',
+    errorMessage: 'Search query is too short',
+    defaultValue: 'a',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search items...',
+    isDisabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search items...',
+    isReadOnly: true,
+    defaultValue: 'Read-only value',
+  },
+};
+
+export const Required: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Required search...',
+    isRequired: true,
+  },
+};
+
+export const NoIcon: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search without icon...',
+    isIconHidden: true,
+  },
+};
+
+export const AriaLabelOnly: Story = {
+  args: {
+    'aria-label': 'Search items',
+    placeholder: 'Search items...',
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[400px]">
+      <SearchField label="Small" size="sm" placeholder="Small search..." />
+      <SearchField label="Default" size="default" placeholder="Default search..." />
+      <SearchField label="Large" size="lg" placeholder="Large search..." />
+    </div>
+  ),
+};

package/src/elements/Select/Select.stories.tsx

@@ -5,7 +5,7 @@
  * @see plan.md (Implementation Plan)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { Select, MultiSelect } from './Select';
 

package/src/elements/Skeleton/Skeleton.stories.tsx

@@ -6,7 +6,7 @@
  * @see spec.md FR-009 (WCAG 2.2 AAA - 7:1 contrast ratio)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Skeleton } from './Skeleton';
 
 const meta = {

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

@@ -6,7 +6,7 @@
  * @see ShadCN Switch: https://ui.shadcn.com/docs/components/switch
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Switch } from './Switch';
 
 const meta = {

package/src/elements/Table/Table.stories.tsx

@@ -10,7 +10,7 @@
  */
 
 import { useState, type ReactElement } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   Table,
   TableHeader,

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

@@ -5,7 +5,7 @@
  * @see plan.md (Implementation Plan)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState, type Key } from 'react';
 import { Tabs, TabList, Tab, TabPanel } from './Tabs';
 import { Settings, User, Bell, Mail, CreditCard, Lock } from 'lucide-react';
@@ -24,6 +24,11 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'block'],
+      description: 'Visual variant: underline (default) or block/pill',
+    },
     orientation: {
       control: 'select',
       options: ['horizontal', 'vertical'],
@@ -87,6 +92,45 @@ export const Default: Story = {
   ),
 };
 
+/**
+ * Block: Pill/card-style variant with accent background
+ */
+export const Block: Story = {
+  render: () => (
+    <Tabs variant="block" defaultSelectedKey="account" className="w-[400px]">
+      <TabList aria-label="Account settings">
+        <Tab id="account">Account</Tab>
+        <Tab id="password">Password</Tab>
+        <Tab id="settings">Settings</Tab>
+      </TabList>
+      <TabPanel id="account">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Account Information</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Manage your account details and preferences.
+          </p>
+        </div>
+      </TabPanel>
+      <TabPanel id="password">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Password Settings</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Update your password and security settings.
+          </p>
+        </div>
+      </TabPanel>
+      <TabPanel id="settings">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">General Settings</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Configure application preferences.
+          </p>
+        </div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
 // ============================================================================
 // Orientation Stories
 // ============================================================================
@@ -305,7 +349,7 @@ export const IconsAndBadges: Story = {
           <Mail className="h-4 w-4" aria-hidden="true" />
           Messages
           <span
-            className="inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium rounded-full bg-[var(--destructive)] text-[var(--destructive-foreground)]"
+            className="inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium rounded-full bg-[var(--destructive-background)] text-[var(--destructive-foreground)]"
             aria-label="5 unread"
           >
             5

package/src/elements/TextField/TextField.stories.tsx

@@ -5,7 +5,7 @@
  * @see spec.md FR-009 to FR-014 (Accessibility Requirements - WCAG 2.2 AAA)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { TextField } from './TextField';
 
 const meta = {

package/src/elements/TimeField/TimeField.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 { TimeField, Time } from './index';
 
 const meta = {

package/src/elements/Toast/Toast.stories.tsx

@@ -7,7 +7,7 @@
  * @see constitution.md Principle IV (Accessibility First - WCAG 2.2 AAA)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useEffect, useState, type ReactElement } from 'react';
 import { Bell, CheckCircle2, AlertTriangle, Info, Download, Trash2 } from 'lucide-react';
 import { ToastProvider } from './ToastProvider';

package/src/elements/Tooltip/Tooltip.stories.tsx

@@ -6,7 +6,7 @@
  * @see plan.md Phase 4 (Documentation)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipArrow } from './Tooltip';
 import { Button } from '../Button';
 import { Info, HelpCircle, Settings, AlertCircle } from 'lucide-react';