@tribepad/themis 1.0.0 → 1.0.2

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 = {

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 = {

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,

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';

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';

package/dist/Carousel-NTZX5TOW.js

@@ -1,16 +0,0 @@
-'use strict';
-
-var chunkZVKXFELU_js = require('./chunk-ZVKXFELU.js');
-require('./chunk-3YOY2VJ6.js');
-require('./chunk-Y3GT7ETK.js');
-require('./chunk-B5Q4UPL6.js');
-require('./chunk-VIREG536.js');
-
-
-
-Object.defineProperty(exports, "Carousel", {
-  enumerable: true,
-  get: function () { return chunkZVKXFELU_js.Carousel; }
-});
-//# sourceMappingURL=Carousel-NTZX5TOW.js.map
-//# sourceMappingURL=Carousel-NTZX5TOW.js.map

package/dist/Carousel-NTZX5TOW.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"Carousel-NTZX5TOW.js"}

package/dist/Carousel-YH3DOQJU.mjs

@@ -1,7 +0,0 @@
-export { Carousel } from './chunk-X25TNRSD.mjs';
-import './chunk-BDXKKMBZ.mjs';
-import './chunk-FPKEAJRZ.mjs';
-import './chunk-HK46BT5U.mjs';
-import './chunk-E2KQFV3O.mjs';
-//# sourceMappingURL=Carousel-YH3DOQJU.mjs.map
-//# sourceMappingURL=Carousel-YH3DOQJU.mjs.map

package/dist/Carousel-YH3DOQJU.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"Carousel-YH3DOQJU.mjs"}