ai-design-system 0.1.0

package/components/primitives/Tabs/Tabs.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../Card"
+
+/**
+ * Tabs Primitive Stories
+ *
+ * The Tabs component organizes content into switchable panels with accessible keyboard navigation.
+ *
+ * ## Accessibility Features
+ * - Arrow keys navigate between tabs
+ * - Home/End keys jump to first/last tab
+ * - Tab key moves focus in/out of tab list
+ * - Proper ARIA roles and attributes
+ *
+ * ## Usage Guidelines
+ * - Use for content that naturally divides into categories
+ * - Keep tab labels short and descriptive
+ * - Ensure content in each tab is independent
+ * - Don't nest tabs within tabs
+ */
+const meta = {
+  title: "Primitives/Tabs",
+  component: Tabs,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tabs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        <p className="text-sm">Make changes to your account here.</p>
+      </TabsContent>
+      <TabsContent value="password">
+        <p className="text-sm">Change your password here.</p>
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+export const WithCards: Story = {
+  render: () => (
+    <Tabs defaultValue="overview" className="w-[600px]">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        <TabsTrigger value="reports">Reports</TabsTrigger>
+        <TabsTrigger value="notifications">Notifications</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">
+        <Card>
+          <CardHeader>
+            <CardTitle>Overview</CardTitle>
+            <CardDescription>Your account overview</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm">View your account summary and recent activity.</p>
+          </CardContent>
+        </Card>
+      </TabsContent>
+      <TabsContent value="analytics">
+        <Card>
+          <CardHeader>
+            <CardTitle>Analytics</CardTitle>
+            <CardDescription>Performance metrics</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm">Track your performance and engagement.</p>
+          </CardContent>
+        </Card>
+      </TabsContent>
+      <TabsContent value="reports">
+        <Card>
+          <CardHeader>
+            <CardTitle>Reports</CardTitle>
+            <CardDescription>Generated reports</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm">Access your generated reports.</p>
+          </CardContent>
+        </Card>
+      </TabsContent>
+      <TabsContent value="notifications">
+        <Card>
+          <CardHeader>
+            <CardTitle>Notifications</CardTitle>
+            <CardDescription>Manage notifications</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm">Configure your notification preferences.</p>
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+export const DarkMode: Story = {
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+  render: () => (
+    <div className="dark">
+      <Tabs defaultValue="account" className="w-[400px]">
+        <TabsList>
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password">Password</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">
+          <p className="text-sm">Make changes to your account here.</p>
+        </TabsContent>
+        <TabsContent value="password">
+          <p className="text-sm">Change your password here.</p>
+        </TabsContent>
+      </Tabs>
+    </div>
+  ),
+}

package/components/primitives/Tabs/Tabs.tsx

@@ -0,0 +1,70 @@
+import * as React from "react"
+import {
+  Tabs as ShadcnTabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../ui/tabs"
+
+/**
+ * Tabs Primitive
+ *
+ * A foundational tabs component for organizing content into switchable panels.
+ * Built on Radix UI Tabs primitive with WCAG 2.1 Level AA compliance.
+ *
+ * ## Accessibility Features
+ * - Arrow key navigation between tabs
+ * - Home/End keys for first/last tab
+ * - Automatic ARIA attributes (role="tablist", "tab", "tabpanel")
+ * - Focus management and keyboard support
+ * - Screen reader announcements
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">Content 1</TabsContent>
+ *   <TabsContent value="tab2">Content 2</TabsContent>
+ * </Tabs>
+ * ```
+ *
+ * @see https://ui.shadcn.com/docs/components/tabs
+ * @see https://www.radix-ui.com/primitives/docs/components/tabs
+ */
+
+export type TabsProps = React.ComponentProps<typeof ShadcnTabs>
+export type TabsListProps = React.ComponentProps<typeof TabsList>
+export type TabsTriggerProps = React.ComponentProps<typeof TabsTrigger>
+export type TabsContentProps = React.ComponentProps<typeof TabsContent>
+
+/**
+ * Tabs component
+ *
+ * A tabs component for organizing content into switchable panels.
+ * Built on Radix UI Tabs primitive with full accessibility support.
+ *
+ * Features:
+ * - Arrow key navigation between tabs
+ * - Home/End keys for first/last tab
+ * - Automatic ARIA attributes
+ * - Focus management
+ * - Screen reader support
+ * - Horizontal and vertical orientation
+ * - Dark mode support
+ */
+export const Tabs = React.forwardRef<
+  React.ElementRef<typeof ShadcnTabs>,
+  TabsProps
+>((props, ref) => {
+  return <ShadcnTabs {...props} />
+})
+
+Tabs.displayName = "Tabs"
+
+/**
+ * Re-export Tabs sub-components for composition
+ */
+export { TabsContent, TabsList, TabsTrigger }

package/components/primitives/Tabs/index.ts

@@ -0,0 +1,13 @@
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "./Tabs"
+
+export type {
+  TabsProps,
+  TabsListProps,
+  TabsTriggerProps,
+  TabsContentProps,
+} from "./Tabs"

package/components/primitives/Textarea/Textarea.stories.tsx

@@ -0,0 +1,358 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Textarea } from "./Textarea"
+
+/**
+ * Textarea Primitive Stories
+ *
+ * The Textarea primitive provides a consistent multi-line text input experience across the application.
+ * It supports validation states, accessibility features, and automatic content-based resizing.
+ */
+
+const meta = {
+  title: "Primitives/Textarea",
+  component: Textarea,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A foundational textarea component built on shadcn/ui Textarea. Supports multi-line text input, validation states, and accessibility features including ARIA attributes for error states. Features field-sizing-content for automatic height adjustment.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "default", "lg"],
+      description: "Size variant of the textarea",
+      table: {
+        defaultValue: { summary: "default" },
+      },
+    },
+    state: {
+      control: "select",
+      options: ["default", "error", "success", "warning"],
+      description: "Visual state of the textarea",
+      table: {
+        defaultValue: { summary: "default" },
+      },
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text displayed when textarea is empty",
+    },
+    rows: {
+      control: "number",
+      description: "Number of visible text lines",
+      table: {
+        defaultValue: { summary: "undefined (auto-size)" },
+      },
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the textarea is disabled",
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    "aria-invalid": {
+      control: "boolean",
+      description: "Indicates whether the textarea value is invalid",
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+} satisfies Meta<typeof Textarea>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Default textarea with automatic height adjustment
+ */
+export const Default: Story = {
+  args: {
+    placeholder: "Enter your message...",
+  },
+}
+
+/**
+ * Textarea with fixed number of rows
+ */
+export const WithRows: Story = {
+  args: {
+    placeholder: "Enter description...",
+    rows: 5,
+  },
+}
+
+/**
+ * Small textarea for brief comments
+ */
+export const Small: Story = {
+  args: {
+    placeholder: "Brief comment...",
+    rows: 3,
+  },
+}
+
+/**
+ * Large textarea for longer content
+ */
+export const Large: Story = {
+  args: {
+    placeholder: "Enter detailed description...",
+    rows: 10,
+  },
+}
+
+/**
+ * Disabled textarea that cannot be interacted with
+ */
+export const Disabled: Story = {
+  args: {
+    placeholder: "Disabled textarea",
+    disabled: true,
+  },
+}
+
+/**
+ * Textarea with pre-filled value
+ */
+export const WithValue: Story = {
+  args: {
+    defaultValue:
+      "This is some pre-filled text content.\nIt spans multiple lines.\nYou can edit this text.",
+    rows: 5,
+  },
+}
+
+/**
+ * Invalid textarea showing error state
+ */
+export const Invalid: Story = {
+  args: {
+    placeholder: "Enter valid text...",
+    defaultValue: "This text contains errors",
+    "aria-invalid": true,
+    rows: 4,
+  },
+}
+
+/**
+ * Textarea with maximum length constraint
+ */
+export const WithMaxLength: Story = {
+  args: {
+    placeholder: "Maximum 200 characters...",
+    maxLength: 200,
+    rows: 4,
+  },
+}
+
+/**
+ * Read-only textarea for displaying content
+ */
+export const ReadOnly: Story = {
+  args: {
+    defaultValue:
+      "This is read-only content.\nIt cannot be edited but can be selected and copied.",
+    readOnly: true,
+    rows: 4,
+  },
+}
+
+/**
+ * Small textarea size
+ */
+export const SmallSize: Story = {
+  args: {
+    placeholder: "Small textarea",
+    size: "sm",
+    rows: 4,
+  },
+}
+
+/**
+ * Large textarea size
+ */
+export const LargeSize: Story = {
+  args: {
+    placeholder: "Large textarea",
+    size: "lg",
+    rows: 4,
+  },
+}
+
+/**
+ * Error state textarea
+ */
+export const ErrorState: Story = {
+  args: {
+    placeholder: "Enter valid text...",
+    defaultValue: "This text contains errors",
+    state: "error",
+    rows: 4,
+  },
+}
+
+/**
+ * Success state textarea
+ */
+export const SuccessState: Story = {
+  args: {
+    placeholder: "Enter text...",
+    defaultValue: "This text is valid",
+    state: "success",
+    rows: 4,
+  },
+}
+
+/**
+ * Warning state textarea
+ */
+export const WarningState: Story = {
+  args: {
+    placeholder: "Enter text...",
+    defaultValue: "This text might need attention",
+    state: "warning",
+    rows: 4,
+  },
+}
+
+/**
+ * Size variants showcase
+ */
+export const SizeVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <div>
+        <label className="text-sm font-medium mb-1 block">Small</label>
+        <Textarea placeholder="Small textarea..." size="sm" rows={3} />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Default</label>
+        <Textarea placeholder="Default textarea..." size="default" rows={3} />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Large</label>
+        <Textarea placeholder="Large textarea..." size="lg" rows={3} />
+      </div>
+    </div>
+  ),
+}
+
+/**
+ * State variants showcase
+ */
+export const StateVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <div>
+        <label className="text-sm font-medium mb-1 block">Default State</label>
+        <Textarea placeholder="Default state..." state="default" rows={3} />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Error State</label>
+        <Textarea placeholder="Error state..." state="error" defaultValue="Invalid content" rows={3} />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Success State</label>
+        <Textarea placeholder="Success state..." state="success" defaultValue="Valid content" rows={3} />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Warning State</label>
+        <Textarea placeholder="Warning state..." state="warning" defaultValue="Needs attention" rows={3} />
+      </div>
+    </div>
+  ),
+}
+
+/**
+ * Combined variants showcase
+ */
+export const CombinedVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <div>
+        <label className="text-sm font-medium mb-1 block">Small Error</label>
+        <Textarea placeholder="Small error..." size="sm" state="error" rows={3} />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Default Success</label>
+        <Textarea placeholder="Default success..." size="default" state="success" rows={3} />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Large Warning</label>
+        <Textarea placeholder="Large warning..." size="lg" state="warning" rows={3} />
+      </div>
+    </div>
+  ),
+}
+
+/**
+ * All textarea variants and states showcased together
+ */
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <div>
+        <label className="text-sm font-medium mb-1 block">Default (Auto-size)</label>
+        <Textarea placeholder="Enter your message..." />
+      </div>
+
+      <div>
+        <label className="text-sm font-medium mb-1 block">Small (3 rows)</label>
+        <Textarea placeholder="Brief comment..." rows={3} />
+      </div>
+
+      <div>
+        <label className="text-sm font-medium mb-1 block">Medium (5 rows)</label>
+        <Textarea placeholder="Enter description..." rows={5} />
+      </div>
+
+      <div>
+        <label className="text-sm font-medium mb-1 block">With Value</label>
+        <Textarea
+          defaultValue="This is some pre-filled text content.&#10;It spans multiple lines.&#10;You can edit this text."
+          rows={4}
+        />
+      </div>
+
+      <div>
+        <label className="text-sm font-medium mb-1 block">Disabled</label>
+        <Textarea placeholder="Disabled textarea" disabled rows={3} />
+      </div>
+
+      <div>
+        <label className="text-sm font-medium mb-1 block">Invalid</label>
+        <Textarea
+          placeholder="Enter valid text..."
+          defaultValue="This text contains errors"
+          aria-invalid
+          rows={3}
+        />
+      </div>
+
+      <div>
+        <label className="text-sm font-medium mb-1 block">With Max Length (200)</label>
+        <Textarea
+          placeholder="Maximum 200 characters..."
+          maxLength={200}
+          rows={3}
+        />
+      </div>
+
+      <div>
+        <label className="text-sm font-medium mb-1 block">Read Only</label>
+        <Textarea
+          defaultValue="This is read-only content.&#10;It cannot be edited but can be selected and copied."
+          readOnly
+          rows={3}
+        />
+      </div>
+    </div>
+  ),
+}

package/components/primitives/Textarea/Textarea.tsx

@@ -0,0 +1,91 @@
+import * as React from "react"
+import {
+  Textarea as ShadcnTextarea,
+  textareaVariants,
+} from "../../ui/textarea"
+import type { VariantProps } from "class-variance-authority"
+
+/**
+ * Textarea Primitive
+ *
+ * A foundational textarea component that wraps shadcn/ui Textarea with design system
+ * enhancements. This primitive serves as the single source of truth for all multi-line
+ * text input interactions across the application.
+ *
+ * @example
+ * ```tsx
+ * <Textarea placeholder="Enter your message..." />
+ *
+ * <Textarea
+ *   placeholder="Description"
+ *   rows={5}
+ *   size="sm"
+ * />
+ *
+ * <Textarea
+ *   placeholder="Enter comment"
+ *   state="error"
+ * />
+ *
+ * <Textarea
+ *   placeholder="Success state"
+ *   state="success"
+ *   size="lg"
+ * />
+ * ```
+ *
+ * @see https://ui.shadcn.com/docs/components/textarea - shadcn/ui Textarea documentation
+ */
+
+/**
+ * Textarea component props
+ * Extends the native textarea element props with variant options
+ */
+export type TextareaProps = React.ComponentProps<"textarea"> &
+  VariantProps<typeof textareaVariants>
+
+/**
+ * Textarea component
+ *
+ * A versatile multi-line text input component built on shadcn/ui foundation.
+ * Optimized with React.memo for performance in high-frequency rendering scenarios.
+ *
+ * Features:
+ * - Full WCAG 2.1 Level AA compliance
+ * - Size variants (sm, default, lg) for different contexts
+ * - State variants (default, error, success, warning) for visual feedback
+ * - Customizable row height
+ * - Validation state styling via aria-invalid
+ * - Dark mode support
+ * - Placeholder and disabled states
+ * - Auto-resize capabilities
+ */
+export const Textarea = React.memo(
+  React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    (props, ref) => {
+      return <ShadcnTextarea ref={ref} {...props} />
+    }
+  )
+)
+
+Textarea.displayName = "Textarea"
+
+/**
+ * Re-export textareaVariants for consumers who need direct access to the variant generator.
+ * This is useful for creating custom textarea-like components that need consistent styling.
+ *
+ * @example
+ * ```tsx
+ * import { textareaVariants } from './Textarea'
+ *
+ * <div className={textareaVariants({ size: "sm", state: "error" })}>
+ *   Custom textarea-like div
+ * </div>
+ * ```
+ */
+export { textareaVariants }
+
+/**
+ * Re-export VariantProps for type inference in consuming components
+ */
+export type { VariantProps }

package/components/primitives/Textarea/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Textarea Primitive
+ *
+ * Central export point for the Textarea primitive component and its related types.
+ */
+export { Textarea, textareaVariants } from "./Textarea"
+export type { TextareaProps, VariantProps } from "./Textarea"