ai-design-system 0.1.0

package/components/composites/FileQueue/index.ts

@@ -0,0 +1,24 @@
+/**
+ * FileQueue Block
+ *
+ * Central export point for the FileQueue block component and its related types.
+ */
+export { FileQueue } from "./FileQueue";
+export type { FileQueueProps, FileGroup, FileItem } from "./FileQueue";
+
+// Legacy exports for backward compatibility (used by RefinementPanel)
+export { FileStatusBadge } from "./FileStatusBadge";
+export type { FileStatusBadgeProps, FileStatus } from "./FileStatusBadge";
+
+import type { FileStatus } from "./FileStatusBadge";
+
+/**
+ * Legacy FileChangeData type for backward compatibility
+ * @deprecated Use FileGroup and FileItem instead
+ */
+export interface FileChangeData {
+  id: string;
+  filename: string;
+  status: FileStatus;
+  path: string;
+}

package/components/composites/InteractiveChart/InteractiveChart.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { InteractiveChart } from './InteractiveChart'
+import { AreaChart, Area, XAxis, CartesianGrid } from 'recharts'
+import type { ChartConfig } from '@/components/primitives/Chart'
+
+const meta = {
+  title: 'Composites/InteractiveChart',
+  component: InteractiveChart,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof InteractiveChart>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const chartData = [
+  { month: 'Jan', desktop: 186 },
+  { month: 'Feb', desktop: 305 },
+  { month: 'Mar', desktop: 237 },
+  { month: 'Apr', desktop: 73 },
+  { month: 'May', desktop: 209 },
+  { month: 'Jun', desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: { label: 'Desktop', color: 'hsl(var(--chart-1))' },
+} satisfies ChartConfig
+
+export const Default: Story = {
+  args: {
+    title: 'Area Chart',
+    description: 'Showing total visitors for the last 6 months',
+    data: chartData,
+    config: chartConfig,
+    timeRanges: [
+      { label: '7D', value: '7d' },
+      { label: '30D', value: '30d' },
+      { label: '90D', value: '90d' },
+    ],
+    defaultTimeRange: '30d',
+    children: (
+      <AreaChart data={chartData}>
+        <CartesianGrid vertical={false} />
+        <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+        <Area dataKey="desktop" type="monotone" fill="var(--color-desktop)" fillOpacity={0.4} stroke="var(--color-desktop)" />
+      </AreaChart>
+    ),
+  },
+}

package/components/composites/InteractiveChart/InteractiveChart.tsx

@@ -0,0 +1,69 @@
+import * as React from "react"
+import { ChartContainer, ChartConfig } from "@/components/primitives/Chart"
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/primitives/Card"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/primitives/Select"
+import { ToggleGroup, ToggleGroupItem } from "@/components/primitives/ToggleGroup"
+
+export interface InteractiveChartProps {
+  title: string
+  description?: string
+  data: any[]
+  config: ChartConfig
+  timeRanges?: { label: string; value: string }[]
+  defaultTimeRange?: string
+  children: React.ReactNode
+  className?: string
+}
+
+export const InteractiveChart = React.memo<InteractiveChartProps>(
+  ({ title, description, data, config, timeRanges, defaultTimeRange, children, className }) => {
+    const [timeRange, setTimeRange] = React.useState(defaultTimeRange || timeRanges?.[0]?.value)
+
+    return (
+      <Card className={className}>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>{title}</CardTitle>
+              {description && <CardDescription>{description}</CardDescription>}
+            </div>
+            {timeRanges && timeRanges.length > 0 && (
+              <div className="flex items-center gap-2">
+                <div className="hidden sm:block">
+                  <ToggleGroup type="single" value={timeRange} onValueChange={setTimeRange}>
+                    {timeRanges.map((range) => (
+                      <ToggleGroupItem key={range.value} value={range.value} size="sm">
+                        {range.label}
+                      </ToggleGroupItem>
+                    ))}
+                  </ToggleGroup>
+                </div>
+                <div className="sm:hidden">
+                  <Select value={timeRange} onValueChange={setTimeRange}>
+                    <SelectTrigger className="w-[120px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {timeRanges.map((range) => (
+                        <SelectItem key={range.value} value={range.value}>
+                          {range.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={config} className="h-[300px] w-full">
+            {children}
+          </ChartContainer>
+        </CardContent>
+      </Card>
+    )
+  }
+)
+
+InteractiveChart.displayName = "InteractiveChart"

package/components/composites/InteractiveChart/index.ts

@@ -0,0 +1,2 @@
+export { InteractiveChart } from './InteractiveChart'
+export type { InteractiveChartProps } from './InteractiveChart'

package/components/composites/ModeToggle/ModeToggle.stories.tsx

@@ -0,0 +1,212 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ModeToggle } from './ModeToggle'
+
+/**
+ * ModeToggle Composite Stories
+ *
+ * The ModeToggle component is a composite that allows users to switch between light, dark, and system themes.
+ * It composes Button and DropdownMenu primitives.
+ *
+ * ## Features
+ * - Light, dark, and system theme modes
+ * - Persistent theme preference via localStorage
+ * - Automatic system theme detection
+ * - Accessible dropdown menu
+ * - Icon-based toggle button
+ *
+ * ## Accessibility
+ * - Keyboard navigation support
+ * - Screen reader labels
+ * - Focus management
+ * - ARIA attributes
+ *
+ * ## Usage Guidelines
+ *
+ * ### Do's
+ * - Place in application header or settings
+ * - Use consistent placement across pages
+ * - Provide visual feedback for current theme
+ *
+ * ### Don'ts
+ * - Don't place multiple theme toggles
+ * - Don't override user's system preference without consent
+ * - Don't hide the toggle in nested menus
+ */
+const meta = {
+  title: 'Composites/ModeToggle',
+  component: ModeToggle,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A theme mode switcher component that composes Button and DropdownMenu primitives.',
+      },
+    },
+  },
+} satisfies Meta<typeof ModeToggle>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Default mode toggle
+ *
+ * Basic theme switcher with light, dark, and system options.
+ */
+export const Default: Story = {
+  render: () => <ModeToggle />,
+}
+
+/**
+ * In Header
+ *
+ * Mode toggle as it would appear in an application header.
+ */
+export const InHeader: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '16px',
+        borderBottom: '1px solid hsl(var(--border))',
+        width: '600px',
+      }}
+    >
+      <div style={{ fontWeight: 600, fontSize: '18px' }}>My Application</div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <span style={{ fontSize: '14px', color: 'hsl(var(--muted-foreground))' }}>Settings</span>
+        <ModeToggle />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Common placement of the mode toggle in an application header.',
+      },
+    },
+  },
+}
+
+/**
+ * With Navigation
+ *
+ * Mode toggle alongside other navigation items.
+ */
+export const WithNavigation: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '16px',
+        padding: '16px',
+        borderBottom: '1px solid hsl(var(--border))',
+      }}
+    >
+      <div style={{ fontWeight: 600, fontSize: '18px', marginRight: 'auto' }}>Logo</div>
+      <a href="#" style={{ fontSize: '14px', textDecoration: 'none', color: 'hsl(var(--foreground))' }}>
+        Home
+      </a>
+      <a href="#" style={{ fontSize: '14px', textDecoration: 'none', color: 'hsl(var(--foreground))' }}>
+        About
+      </a>
+      <a href="#" style={{ fontSize: '14px', textDecoration: 'none', color: 'hsl(var(--foreground))' }}>
+        Contact
+      </a>
+      <ModeToggle />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Mode toggle integrated with navigation menu.',
+      },
+    },
+  },
+}
+
+/**
+ * Light Theme Preview
+ *
+ * Mode toggle in light theme context.
+ */
+export const LightTheme: Story = {
+  render: () => (
+    <div className="light" style={{ padding: '24px', background: 'hsl(0 0% 100%)', borderRadius: '8px' }}>
+      <div style={{ marginBottom: '16px', color: 'hsl(222.2 47.4% 11.2%)' }}>
+        <p style={{ marginBottom: '8px' }}>Current theme: Light</p>
+        <ModeToggle />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Mode toggle appearance in light theme.',
+      },
+    },
+    backgrounds: { disable: true },
+  },
+}
+
+/**
+ * Dark Theme Preview
+ *
+ * Mode toggle in dark theme context.
+ */
+export const DarkTheme: Story = {
+  render: () => (
+    <div className="dark" style={{ padding: '24px', background: 'hsl(222.2 84% 4.9%)', borderRadius: '8px' }}>
+      <div style={{ marginBottom: '16px', color: 'hsl(210 40% 98%)' }}>
+        <p style={{ marginBottom: '8px' }}>Current theme: Dark</p>
+        <ModeToggle />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Mode toggle appearance in dark theme.',
+      },
+    },
+    backgrounds: { disable: true },
+  },
+}
+
+/**
+ * Interactive Demo
+ *
+ * Try switching themes to see the effect.
+ */
+export const InteractiveDemo: Story = {
+  render: () => (
+    <div style={{ padding: '24px', border: '1px solid hsl(var(--border))', borderRadius: '8px', minWidth: '400px' }}>
+      <div style={{ marginBottom: '16px' }}>
+        <h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '8px' }}>Theme Switcher Demo</h3>
+        <p style={{ fontSize: '14px', color: 'hsl(var(--muted-foreground))', marginBottom: '16px' }}>
+          Click the button below to switch between light, dark, and system themes.
+        </p>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+        <span style={{ fontSize: '14px' }}>Theme:</span>
+        <ModeToggle />
+      </div>
+      <div style={{ marginTop: '24px', padding: '16px', background: 'hsl(var(--muted))', borderRadius: '6px' }}>
+        <p style={{ fontSize: '14px' }}>
+          This content will adapt to the selected theme. The theme preference is saved to localStorage.
+        </p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive demo showing theme switching in action.',
+      },
+    },
+  },
+}

package/components/composites/ModeToggle/ModeToggle.tsx

@@ -0,0 +1,100 @@
+import * as React from "react"
+import { Button } from "@/components/primitives/Button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/primitives/DropdownMenu"
+import { Icon } from "@/components/primitives/Icon"
+
+/**
+ * ModeToggle Composite
+ *
+ * A theme mode switcher component that allows users to toggle between light, dark, and system themes.
+ * Composes Button and DropdownMenu primitives.
+ *
+ * @example
+ * ```tsx
+ * <ModeToggle />
+ * ```
+ */
+
+export interface ModeToggleProps {
+  /**
+   * Additional CSS classes
+   */
+  className?: string
+}
+
+/**
+ * ModeToggle component
+ *
+ * Provides a dropdown menu to switch between light, dark, and system theme modes.
+ * Uses local storage to persist the user's theme preference.
+ */
+export const ModeToggle = React.memo<ModeToggleProps>(({ className }) => {
+  const [theme, setThemeState] = React.useState<"light" | "dark" | "system">("system")
+
+  React.useEffect(() => {
+    // Load theme from localStorage on mount
+    const stored = localStorage.getItem("theme") as "light" | "dark" | "system" | null
+    if (stored) {
+      setThemeState(stored)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    // Apply theme to document
+    const root = window.document.documentElement
+    root.classList.remove("light", "dark")
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light"
+      root.classList.add(systemTheme)
+    } else {
+      root.classList.add(theme)
+    }
+  }, [theme])
+
+  const setTheme = (newTheme: "light" | "dark" | "system") => {
+    localStorage.setItem("theme", newTheme)
+    setThemeState(newTheme)
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className={className}>
+          <Icon
+            name="sun"
+            className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+          />
+          <Icon
+            name="moon"
+            className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+          />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          <Icon name="sun" className="mr-2 h-4 w-4" />
+          <span>Light</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          <Icon name="moon" className="mr-2 h-4 w-4" />
+          <span>Dark</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          <Icon name="laptop" className="mr-2 h-4 w-4" />
+          <span>System</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+})
+
+ModeToggle.displayName = "ModeToggle"

package/components/composites/ModeToggle/index.ts

@@ -0,0 +1,7 @@
+/**
+ * ModeToggle Composite
+ *
+ * Central export point for the ModeToggle composite component.
+ */
+export { ModeToggle } from './ModeToggle'
+export type { ModeToggleProps } from './ModeToggle'

package/components/composites/NavUser/NavUser.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { NavUser } from './NavUser'
+import { SidebarProvider, Sidebar, SidebarFooter } from '@/components/primitives/Sidebar'
+
+const meta = {
+  title: 'Composites/NavUser',
+  component: NavUser,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof NavUser>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const user = {
+  name: 'John Doe',
+  email: 'john@example.com',
+  avatar: 'https://github.com/shadcn.png',
+}
+
+export const Default: Story = {
+  render: () => (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarFooter>
+          <NavUser user={user} />
+        </SidebarFooter>
+      </Sidebar>
+    </SidebarProvider>
+  ),
+}
+
+export const WithActions: Story = {
+  render: () => (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarFooter>
+          <NavUser
+            user={user}
+            actions={[
+              { label: 'Profile', onClick: () => console.log('Profile') },
+              { label: 'Settings', onClick: () => console.log('Settings') },
+              { label: 'Logout', onClick: () => console.log('Logout') },
+            ]}
+          />
+        </SidebarFooter>
+      </Sidebar>
+    </SidebarProvider>
+  ),
+}

package/components/composites/NavUser/NavUser.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import {
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+} from "@/components/primitives/Sidebar"
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/primitives/Avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/primitives/DropdownMenu"
+
+export interface NavUserProps {
+  user: {
+    name: string
+    email: string
+    avatar?: string
+  }
+  actions?: { label: string; onClick: () => void }[]
+  className?: string
+}
+
+export const NavUser = React.memo<NavUserProps>(({ user, actions, className }) => {
+  return (
+    <SidebarMenu className={className}>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">{user.name[0]}</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">{user.email}</span>
+              </div>
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          {actions && actions.length > 0 && (
+            <DropdownMenuContent align="end" className="w-56">
+              {actions.map((action) => (
+                <DropdownMenuItem key={action.label} onClick={action.onClick}>
+                  {action.label}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          )}
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+})
+
+NavUser.displayName = "NavUser"

package/components/composites/NavUser/index.ts

@@ -0,0 +1,2 @@
+export { NavUser } from './NavUser'
+export type { NavUserProps } from './NavUser'

package/components/composites/NavigationList/NavigationList.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { NavigationList } from './NavigationList'
+import { SidebarProvider, Sidebar, SidebarContent } from '@/components/primitives/Sidebar'
+
+const meta = {
+  title: 'Composites/NavigationList',
+  component: NavigationList,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof NavigationList>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const items = [
+  { title: 'Dashboard', url: '#', icon: 'layout-dashboard' },
+  { title: 'Projects', url: '#', icon: 'folder' },
+  { title: 'Tasks', url: '#', icon: 'check-square' },
+  { title: 'Settings', url: '#', icon: 'settings' },
+]
+
+export const Default: Story = {
+  render: () => (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <NavigationList items={items} />
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  ),
+}
+
+export const WithActiveState: Story = {
+  render: () => (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <NavigationList
+            items={items.map((item, i) => ({ ...item, isActive: i === 0 }))}
+          />
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  ),
+}

package/components/composites/NavigationList/NavigationList.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import {
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+} from "@/components/primitives/Sidebar"
+import { Icon } from "@/components/primitives/Icon"
+
+export interface NavigationItem {
+  title: string
+  url: string
+  icon?: string
+  isActive?: boolean
+}
+
+export interface NavigationListProps {
+  items: NavigationItem[]
+  onItemClick?: (item: NavigationItem) => void
+  className?: string
+}
+
+export const NavigationList = React.memo<NavigationListProps>(
+  ({ items, onItemClick, className }) => {
+    return (
+      <SidebarMenu className={className}>
+        {items.map((item) => (
+          <SidebarMenuItem key={item.title}>
+            <SidebarMenuButton
+              tooltip={item.title}
+              isActive={item.isActive}
+              onClick={() => onItemClick?.(item)}
+              asChild
+            >
+              <a href={item.url}>
+                {item.icon && <Icon name={item.icon} />}
+                <span>{item.title}</span>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        ))}
+      </SidebarMenu>
+    )
+  }
+)
+
+NavigationList.displayName = "NavigationList"

package/components/composites/NavigationList/index.ts

@@ -0,0 +1,2 @@
+export { NavigationList } from './NavigationList'
+export type { NavigationListProps, NavigationItem } from './NavigationList'