@fragments-sdk/ui 0.8.1 → 0.8.2

package/src/recipes/AppShell.recipe.ts

@@ -1,175 +0,0 @@
-import { defineRecipe } from '@fragments/core';
-
-export default defineRecipe({
-  name: 'App Shell',
-  description: 'Full application layout with sidebar, header, and main content. Supports two layout modes: stacked (header full-width) and sidebar-inset (sidebar full-height).',
-  category: 'layout',
-  components: ['AppShell', 'Header', 'Sidebar', 'Theme'],
-  tags: ['layout', 'app-shell', 'sidebar', 'navigation', 'dashboard'],
-  code: `
-// App Shell - Stacked Layout (header spans full width)
-// Best for apps where the brand should be prominent in the header
-
-import { AppShell, Header, Input, Sidebar, ThemeToggle } from '@fragments-sdk/ui';
-
-function StackedLayout({ children }) {
-  return (
-    <AppShell layout="stacked">
-      <AppShell.Header>
-        <Header>
-          <Header.SkipLink />
-          <Header.Trigger />
-          <Header.Brand href="/">MyApp</Header.Brand>
-          <Header.Nav>
-            <Header.NavItem href="/" active>Dashboard</Header.NavItem>
-            <Header.NavItem href="/settings">Settings</Header.NavItem>
-          </Header.Nav>
-          <Header.Spacer />
-          <Header.Actions>
-            <ThemeToggle />
-          </Header.Actions>
-        </Header>
-      </AppShell.Header>
-
-      <AppShell.Sidebar width="240px" collapsible="offcanvas">
-        <Sidebar.Nav>
-          <Sidebar.Section label="Menu">
-            <Sidebar.Item icon={<HomeIcon />} href="/" active>
-              Home
-            </Sidebar.Item>
-            <Sidebar.Item icon={<ChartIcon />} href="/analytics">
-              Analytics
-            </Sidebar.Item>
-            <Sidebar.Item icon={<GearIcon />} href="/settings">
-              Settings
-            </Sidebar.Item>
-          </Sidebar.Section>
-        </Sidebar.Nav>
-      </AppShell.Sidebar>
-
-      <AppShell.Main padding="lg">
-        {children}
-      </AppShell.Main>
-    </AppShell>
-  );
-}
-
-// App Shell - Sidebar Inset Layout (sidebar is full height)
-// Best for documentation sites or when sidebar branding is preferred
-
-function SidebarInsetLayout({ children }) {
-  return (
-    <AppShell layout="sidebar-inset">
-      <AppShell.Header>
-        <Header>
-          <Header.SkipLink />
-          <Header.Trigger />
-          <Header.Search>
-            <Input placeholder="Search..." />
-          </Header.Search>
-          <Header.Spacer />
-          <Header.Actions>
-            <ThemeToggle />
-          </Header.Actions>
-        </Header>
-      </AppShell.Header>
-
-      <AppShell.Sidebar width="260px" collapsible="offcanvas">
-        <Sidebar.Header>
-          <a href="/">MyApp</a>
-        </Sidebar.Header>
-        <Sidebar.Nav>
-          <Sidebar.Section label="Getting Started">
-            <Sidebar.Item href="/docs" active>Introduction</Sidebar.Item>
-            <Sidebar.Item href="/docs/install">Installation</Sidebar.Item>
-          </Sidebar.Section>
-          <Sidebar.Section label="Components">
-            <Sidebar.Item href="/components">Overview</Sidebar.Item>
-            <Sidebar.Item href="/components/button">Button</Sidebar.Item>
-          </Sidebar.Section>
-        </Sidebar.Nav>
-        <Sidebar.Footer>v1.0.0</Sidebar.Footer>
-      </AppShell.Sidebar>
-
-      <AppShell.Main padding="lg">
-        {children}
-      </AppShell.Main>
-    </AppShell>
-  );
-}
-
-// App Shell with Collapsible Icon Sidebar
-// Sidebar collapses to icons only - great for dashboards
-
-function CollapsibleLayout({ children }) {
-  return (
-    <AppShell layout="sidebar-inset">
-      <AppShell.Header>
-        <Header>
-          <Header.Trigger />
-          <Header.Spacer />
-          <Header.Actions>
-            <ThemeToggle />
-          </Header.Actions>
-        </Header>
-      </AppShell.Header>
-
-      <AppShell.Sidebar collapsible="icon" width="240px" collapsedWidth="64px">
-        <Sidebar.Header collapsedContent={<Logo />}>
-          <Logo /> <span>MyApp</span>
-        </Sidebar.Header>
-        <Sidebar.Nav>
-          <Sidebar.Section>
-            <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
-            <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
-            <Sidebar.Item icon={<GearIcon />}>Settings</Sidebar.Item>
-          </Sidebar.Section>
-        </Sidebar.Nav>
-        <Sidebar.Footer>
-          <Sidebar.CollapseToggle />
-        </Sidebar.Footer>
-      </AppShell.Sidebar>
-
-      <AppShell.Main padding="lg">
-        {children}
-      </AppShell.Main>
-    </AppShell>
-  );
-}
-
-// App Shell with Aside Panel
-// Optional right panel for additional context
-
-function LayoutWithAside({ children, aside }) {
-  return (
-    <AppShell layout="stacked">
-      <AppShell.Header>
-        <Header>
-          <Header.Brand>MyApp</Header.Brand>
-          <Header.Spacer />
-          <Header.Actions>
-            <ThemeToggle />
-          </Header.Actions>
-        </Header>
-      </AppShell.Header>
-
-      <AppShell.Sidebar width="200px" collapsible="offcanvas">
-        <Sidebar.Nav>
-          <Sidebar.Section>
-            <Sidebar.Item icon={<HomeIcon />} active>Home</Sidebar.Item>
-          </Sidebar.Section>
-        </Sidebar.Nav>
-      </AppShell.Sidebar>
-
-      <AppShell.Main padding="lg">
-        {children}
-      </AppShell.Main>
-
-      <AppShell.Aside width="280px">
-        {aside}
-      </AppShell.Aside>
-    </AppShell>
-  );
-}
-`.trim(),
-});

package/src/recipes/CardGrid.recipe.ts

@@ -1,22 +0,0 @@
-import { defineRecipe } from '@fragments/core';
-
-export default defineRecipe({
-  name: 'Card Grid',
-  description: 'Responsive grid of cards that reflows based on available space',
-  category: 'layout',
-  components: ['Grid', 'Card'],
-  tags: ['grid', 'cards', 'responsive', 'dashboard', 'tiles'],
-  code: `
-<Grid columns="auto" minChildWidth="16rem" gap="md">
-  {items.map(item => (
-    <Card key={item.id}>
-      <Card.Header>
-        <Card.Title>{item.title}</Card.Title>
-        <Card.Description>{item.description}</Card.Description>
-      </Card.Header>
-      <Card.Body>{item.content}</Card.Body>
-    </Card>
-  ))}
-</Grid>
-`.trim(),
-});

package/src/recipes/ChatInterface.recipe.ts

@@ -1,87 +0,0 @@
-import { defineRecipe } from '@fragments/core';
-
-export default defineRecipe({
-  name: 'Chat Interface',
-  description: 'AI chat interface with message history and prompt input',
-  category: 'layout',
-  components: ['Prompt', 'Card', 'Avatar', 'Stack'],
-  tags: ['chat', 'ai', 'assistant', 'conversation'],
-  code: `
-import { useState } from 'react';
-import { Prompt, Card, Avatar, Stack } from '@fragments-sdk/ui';
-
-interface Message {
-  id: string;
-  role: 'user' | 'assistant';
-  content: string;
-}
-
-function ChatInterface() {
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleSubmit = async (value: string) => {
-    // Add user message
-    const userMessage: Message = {
-      id: crypto.randomUUID(),
-      role: 'user',
-      content: value,
-    };
-    setMessages((prev) => [...prev, userMessage]);
-    setIsLoading(true);
-
-    try {
-      // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-
-      // Add assistant response
-      const assistantMessage: Message = {
-        id: crypto.randomUUID(),
-        role: 'assistant',
-        content: 'This is a simulated response. Replace with your AI API call.',
-      };
-      setMessages((prev) => [...prev, assistantMessage]);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <Stack gap="4" style={{ height: '100vh', padding: '1rem' }}>
-      {/* Messages */}
-      <Stack gap="3" style={{ flex: 1, overflow: 'auto' }}>
-        {messages.map((msg) => (
-          <Card key={msg.id} padding="md">
-            <Card.Body>
-              <Stack direction="row" gap="3" align="start">
-                <Avatar size="sm">
-                  {msg.role === 'user' ? 'U' : 'AI'}
-                </Avatar>
-                <div style={{ flex: 1 }}>{msg.content}</div>
-              </Stack>
-            </Card.Body>
-          </Card>
-        ))}
-      </Stack>
-
-      {/* Prompt */}
-      <Prompt onSubmit={handleSubmit} loading={isLoading}>
-        <Prompt.Textarea placeholder="Ask anything..." />
-        <Prompt.Toolbar>
-          <Prompt.Actions>
-            <Prompt.ActionButton aria-label="Attach file">
-              +
-            </Prompt.ActionButton>
-            <Prompt.ModeButton>Auto</Prompt.ModeButton>
-          </Prompt.Actions>
-          <Prompt.Info>
-            <Prompt.Usage>52% used</Prompt.Usage>
-            <Prompt.Submit />
-          </Prompt.Info>
-        </Prompt.Toolbar>
-      </Prompt>
-    </Stack>
-  );
-}
-`.trim(),
-});

package/src/recipes/CodeExamples.recipe.ts

@@ -1,66 +0,0 @@
-import { defineRecipe } from '@fragments/core';
-
-export default defineRecipe({
-  name: 'Code Examples',
-  description: 'Patterns for displaying code in documentation with syntax highlighting',
-  category: 'documentation',
-  components: ['CodeBlock', 'Tabs', 'Card'],
-  tags: ['code', 'documentation', 'syntax', 'examples'],
-  code: `
-// Installation commands with package manager tabs
-<Tabs defaultValue="npm">
-  <Tabs.List>
-    <Tabs.Tab value="npm">npm</Tabs.Tab>
-    <Tabs.Tab value="pnpm">pnpm</Tabs.Tab>
-    <Tabs.Tab value="yarn">yarn</Tabs.Tab>
-  </Tabs.List>
-  <Tabs.Panel value="npm">
-    <CodeBlock code="npm install @fragments-sdk/ui" language="bash" />
-  </Tabs.Panel>
-  <Tabs.Panel value="pnpm">
-    <CodeBlock code="pnpm add @fragments-sdk/ui" language="bash" />
-  </Tabs.Panel>
-  <Tabs.Panel value="yarn">
-    <CodeBlock code="yarn add @fragments-sdk/ui" language="bash" />
-  </Tabs.Panel>
-</Tabs>
-
-// Usage example with preview
-<Card>
-  <Card.Header>
-    <Card.Title>Button Example</Card.Title>
-  </Card.Header>
-  <Card.Body>
-    <div className="preview">
-      <Button variant="primary">Click me</Button>
-    </div>
-    <CodeBlock
-      code={\`<Button variant="primary">Click me</Button>\`}
-      language="tsx"
-    />
-  </Card.Body>
-</Card>
-
-// Multi-file example with titles
-<CodeBlock
-  title="Button.tsx"
-  code={buttonCode}
-  language="tsx"
-  showLineNumbers
-/>
-<CodeBlock
-  title="Button.module.scss"
-  code={stylesCode}
-  language="scss"
-  showLineNumbers
-/>
-
-// Highlighted important lines
-<CodeBlock
-  code={exampleCode}
-  language="tsx"
-  showLineNumbers
-  highlightLines={[3, "7-10"]}
-/>
-`.trim(),
-});

package/src/recipes/ConfirmDialog.recipe.ts

@@ -1,19 +0,0 @@
-import { defineRecipe } from '@fragments/core';
-
-export default defineRecipe({
-  name: 'Confirm Dialog',
-  description: 'Confirmation dialog with destructive action warning',
-  category: 'overlays',
-  components: ['Dialog', 'Button'],
-  tags: ['confirm', 'dialog', 'modal', 'destructive'],
-  code: `
-<Dialog open={isOpen} onClose={onClose}>
-  <Dialog.Title>{title}</Dialog.Title>
-  <Dialog.Description>{description}</Dialog.Description>
-  <Dialog.Actions>
-    <Button variant="secondary" onClick={onClose}>Cancel</Button>
-    <Button variant="danger" onClick={onConfirm}>Confirm</Button>
-  </Dialog.Actions>
-</Dialog>
-`.trim(),
-});

package/src/recipes/DashboardLayout.recipe.ts

@@ -1,73 +0,0 @@
-import { defineRecipe } from '@fragments/core';
-
-export default defineRecipe({
-  name: 'Dashboard Layout',
-  description: 'Dashboard grid with a featured full-width card and smaller metric cards below',
-  category: 'layout',
-  components: ['Grid', 'Card', 'Badge', 'Separator'],
-  tags: ['dashboard', 'layout', 'metrics', 'widgets', 'overview'],
-  code: `
-<Grid columns={4} gap="lg">
-  <Grid.Item colSpan="full">
-    <Card>
-      <Card.Header>
-        <Card.Title>Overview</Card.Title>
-        <Card.Description>Key metrics for this period</Card.Description>
-      </Card.Header>
-      <Card.Body>{summaryContent}</Card.Body>
-    </Card>
-  </Grid.Item>
-  <Card variant="outlined">
-    <Card.Header>
-      <Card.Title>Users</Card.Title>
-    </Card.Header>
-    <Card.Body>
-      <Badge variant="success">{stats.users}</Badge>
-    </Card.Body>
-  </Card>
-  <Card variant="outlined">
-    <Card.Header>
-      <Card.Title>Revenue</Card.Title>
-    </Card.Header>
-    <Card.Body>
-      <Badge variant="info">{stats.revenue}</Badge>
-    </Card.Body>
-  </Card>
-  <Card variant="outlined">
-    <Card.Header>
-      <Card.Title>Orders</Card.Title>
-    </Card.Header>
-    <Card.Body>
-      <Badge variant="warning">{stats.orders}</Badge>
-    </Card.Body>
-  </Card>
-  <Card variant="outlined">
-    <Card.Header>
-      <Card.Title>Errors</Card.Title>
-    </Card.Header>
-    <Card.Body>
-      <Badge variant="danger">{stats.errors}</Badge>
-    </Card.Body>
-  </Card>
-  <Grid.Item colSpan="full">
-    <Separator spacing="md" />
-  </Grid.Item>
-  <Grid.Item colSpan={2}>
-    <Card>
-      <Card.Header>
-        <Card.Title>Recent Activity</Card.Title>
-      </Card.Header>
-      <Card.Body>{activityList}</Card.Body>
-    </Card>
-  </Grid.Item>
-  <Grid.Item colSpan={2}>
-    <Card>
-      <Card.Header>
-        <Card.Title>Notifications</Card.Title>
-      </Card.Header>
-      <Card.Body>{notificationList}</Card.Body>
-    </Card>
-  </Grid.Item>
-</Grid>
-`.trim(),
-});

package/src/recipes/DashboardNav.recipe.ts

@@ -1,183 +0,0 @@
-import { defineRecipe } from '@fragments/core';
-
-export default defineRecipe({
-  name: 'Dashboard Navigation',
-  description: 'Sidebar navigation pattern for dashboard applications with user profile, sections, and nested menus',
-  category: 'navigation',
-  components: ['Sidebar', 'Avatar'],
-  tags: ['navigation', 'sidebar', 'dashboard', 'admin', 'menu'],
-  code: `
-// Dashboard Navigation with User Profile
-// A complete sidebar navigation for admin/dashboard interfaces
-
-function DashboardNav({ user, currentPath }) {
-  const [collapsed, setCollapsed] = React.useState(false);
-  const [projectsExpanded, setProjectsExpanded] = React.useState(false);
-
-  return (
-    <Sidebar
-      collapsed={collapsed}
-      onCollapsedChange={setCollapsed}
-    >
-      {/* Brand header */}
-      <Sidebar.Header>
-        <svg width="32" height="32" viewBox="0 0 256 256" fill="var(--fui-color-accent)">
-          <path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,176H48V48H208V208Z" />
-        </svg>
-        {!collapsed && (
-          <span style={{ fontWeight: 600, fontSize: '16px' }}>Dashboard</span>
-        )}
-        <Sidebar.CollapseToggle />
-      </Sidebar.Header>
-
-      {/* Main navigation */}
-      <Sidebar.Nav aria-label="Dashboard navigation">
-        {/* Primary section */}
-        <Sidebar.Section>
-          <Sidebar.Item
-            icon={<HomeIcon />}
-            href="/dashboard"
-            active={currentPath === '/dashboard'}
-          >
-            Overview
-          </Sidebar.Item>
-          <Sidebar.Item
-            icon={<ChartIcon />}
-            href="/analytics"
-            active={currentPath === '/analytics'}
-            badge="New"
-          >
-            Analytics
-          </Sidebar.Item>
-          <Sidebar.Item
-            icon={<InboxIcon />}
-            href="/inbox"
-            active={currentPath === '/inbox'}
-            badge="5"
-          >
-            Inbox
-          </Sidebar.Item>
-        </Sidebar.Section>
-
-        {/* Projects section with nested items */}
-        <Sidebar.Section label="Workspace">
-          <Sidebar.Item
-            icon={<FolderIcon />}
-            hasSubmenu
-            expanded={projectsExpanded}
-            onExpandedChange={setProjectsExpanded}
-          >
-            Projects
-          </Sidebar.Item>
-          <Sidebar.Submenu>
-            <Sidebar.SubItem
-              href="/projects/website"
-              active={currentPath === '/projects/website'}
-            >
-              Website Redesign
-            </Sidebar.SubItem>
-            <Sidebar.SubItem
-              href="/projects/mobile"
-              active={currentPath === '/projects/mobile'}
-            >
-              Mobile App
-            </Sidebar.SubItem>
-            <Sidebar.SubItem
-              href="/projects/api"
-              active={currentPath === '/projects/api'}
-            >
-              API Integration
-            </Sidebar.SubItem>
-          </Sidebar.Submenu>
-          <Sidebar.Item
-            icon={<UsersIcon />}
-            href="/team"
-            active={currentPath === '/team'}
-          >
-            Team Members
-          </Sidebar.Item>
-          <Sidebar.Item
-            icon={<CalendarIcon />}
-            href="/calendar"
-            active={currentPath === '/calendar'}
-          >
-            Calendar
-          </Sidebar.Item>
-        </Sidebar.Section>
-
-        {/* Settings section */}
-        <Sidebar.Section label="Account">
-          <Sidebar.Item
-            icon={<GearIcon />}
-            href="/settings"
-            active={currentPath === '/settings'}
-          >
-            Settings
-          </Sidebar.Item>
-          <Sidebar.Item
-            icon={<HelpIcon />}
-            href="/help"
-            active={currentPath === '/help'}
-          >
-            Help & Support
-          </Sidebar.Item>
-        </Sidebar.Section>
-      </Sidebar.Nav>
-
-      {/* Footer with user profile */}
-      <Sidebar.Footer>
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '12px',
-          padding: collapsed ? '0' : '8px',
-          borderRadius: '8px',
-          cursor: 'pointer',
-        }}>
-          <Avatar
-            src={user.avatar}
-            name={user.name}
-            size="sm"
-          />
-          {!collapsed && (
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <div style={{
-                fontWeight: 500,
-                fontSize: '14px',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-              }}>
-                {user.name}
-              </div>
-              <div style={{
-                fontSize: '12px',
-                color: 'var(--fui-text-secondary)',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-              }}>
-                {user.email}
-              </div>
-            </div>
-          )}
-        </div>
-      </Sidebar.Footer>
-    </Sidebar>
-  );
-}
-
-// Usage example:
-// <DashboardNav
-//   user={{ name: 'Jane Doe', email: 'jane@example.com', avatar: '/avatar.jpg' }}
-//   currentPath="/dashboard"
-// />
-
-// Icon components (use your preferred icon library)
-const HomeIcon = () => (
-  <svg width="20" height="20" viewBox="0 0 256 256" fill="currentColor">
-    <path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8H96a8,8,0,0,0,8-8V160h48v56a8,8,0,0,0,8,8h56a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68Z" />
-  </svg>
-);
-`.trim(),
-});

package/src/recipes/FormLayout.recipe.ts

@@ -1,31 +0,0 @@
-import { defineRecipe } from '@fragments/core';
-
-export default defineRecipe({
-  name: 'Form Layout',
-  description: 'Two-column form with full-width fields where needed, using Grid for alignment',
-  category: 'forms',
-  components: ['Grid', 'Input', 'Textarea', 'Select', 'Button'],
-  tags: ['form', 'layout', 'grid', 'inputs', 'settings'],
-  code: `
-<Grid columns={2} gap="md">
-  <Input label="First Name" placeholder="Jane" />
-  <Input label="Last Name" placeholder="Doe" />
-  <Grid.Item colSpan="full">
-    <Input label="Email" type="email" placeholder="jane@example.com" />
-  </Grid.Item>
-  <Grid.Item colSpan="full">
-    <Select label="Role">
-      <Select.Item value="admin">Admin</Select.Item>
-      <Select.Item value="editor">Editor</Select.Item>
-      <Select.Item value="viewer">Viewer</Select.Item>
-    </Select>
-  </Grid.Item>
-  <Grid.Item colSpan="full">
-    <Textarea label="Bio" placeholder="Tell us about yourself" />
-  </Grid.Item>
-  <Grid.Item colSpan="full">
-    <Button type="submit" variant="primary">Save</Button>
-  </Grid.Item>
-</Grid>
-`.trim(),
-});