@fragments-sdk/ui 0.8.0 → 0.8.2

package/src/blocks/DashboardLayout.block.ts

@@ -2,72 +2,91 @@ import { defineBlock } from '@fragments/core';
 
 export default defineBlock({
   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'],
+  description:
+    'Full application shell with sidebar navigation, header, and metrics grid',
+  category: 'dashboard',
+  components: [
+    'AppShell',
+    'Header',
+    'Sidebar',
+    'Stack',
+    'Grid',
+    'Card',
+    'Text',
+    'Badge',
+    'Input',
+    'ThemeToggle',
+    'Avatar',
+  ],
+  tags: ['dashboard', 'layout', 'sidebar', 'app-shell', 'navigation'],
   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>
+const navItems = [
+  { label: 'Dashboard', active: true },
+  { label: 'Analytics', active: false },
+  { label: 'Projects', active: false },
+  { label: 'Settings', active: false },
+];
+
+const metrics = [
+  { label: 'Total Users', value: '12,847', change: '+12%' },
+  { label: 'Revenue', value: '$48,352', change: '+8%' },
+  { label: 'Active Projects', value: '23', change: '+3' },
+];
+
+<AppShell layout="inset">
+  <AppShell.Header>
+    <Header>
+      <Header.Trigger />
+      <Header.Search>
+        <Input placeholder="Search..." style={{ width: '240px' }} />
+      </Header.Search>
+      <Header.Spacer />
+      <Header.Actions>
+        <ThemeToggle size="sm" />
+        <Avatar size="sm" initials="JD" />
+      </Header.Actions>
+    </Header>
+  </AppShell.Header>
+  <AppShell.Sidebar width="220px" collapsible="offcanvas">
+    <Sidebar.Header>
+      <Text weight="semibold" size="lg">Acme Inc</Text>
+    </Sidebar.Header>
+    <Sidebar.Nav>
+      <Sidebar.Section label="Main">
+        {navItems.map((item) => (
+          <Sidebar.Item key={item.label} active={item.active}>
+            {item.label}
+          </Sidebar.Item>
+        ))}
+      </Sidebar.Section>
+    </Sidebar.Nav>
+    <Sidebar.Footer>
+      <Text size="sm" color="tertiary">v2.0.0</Text>
+    </Sidebar.Footer>
+  </AppShell.Sidebar>
+  <AppShell.Main padding="lg">
+    <Stack gap="lg">
+      <Stack gap="xs">
+        <Text size="xl" weight="semibold">Dashboard</Text>
+        <Text color="tertiary">Welcome back! Here's an overview of your metrics.</Text>
+      </Stack>
+      <Grid columns={{ base: 1, md: 3 }} gap="md">
+        {metrics.map((metric) => (
+          <Card key={metric.label}>
+            <Card.Body>
+              <Stack gap="sm">
+                <Text size="sm" color="tertiary">{metric.label}</Text>
+                <Stack direction="row" justify="between" align="baseline">
+                  <Text size="2xl" weight="semibold">{metric.value}</Text>
+                  <Badge variant="success">{metric.change}</Badge>
+                </Stack>
+              </Stack>
+            </Card.Body>
+          </Card>
+        ))}
+      </Grid>
+    </Stack>
+  </AppShell.Main>
+</AppShell>
 `.trim(),
 });

package/src/blocks/DashboardPage.block.ts

@@ -0,0 +1,297 @@
+import { defineBlock } from '@fragments/core';
+
+export default defineBlock({
+  name: 'Dashboard Page',
+  description:
+    'Full dashboard page with sidebar navigation, stats cards, revenue chart, transactions table, and activity feed',
+  category: 'kitchen-sink',
+  components: [
+    'AppShell',
+    'Header',
+    'Sidebar',
+    'Grid',
+    'Card',
+    'Stack',
+    'Text',
+    'Badge',
+    'Icon',
+    'Avatar',
+    'Input',
+    'Button',
+    'Separator',
+    'Table',
+    'ChartContainer',
+    'ChartTooltip',
+    'Breadcrumbs',
+    'ThemeToggle',
+    'Progress',
+    'Tabs',
+  ],
+  tags: [
+    'dashboard',
+    'full-page',
+    'kitchen-sink',
+    'chart',
+    'table',
+    'sidebar',
+    'stats',
+    'metrics',
+    'analytics',
+  ],
+  code: `
+import { AreaChart, Area, XAxis } from 'recharts';
+import {
+  TrendUp, TrendDown, Bell, SquaresFour, ChartBar,
+  FileText, GearSix, Users, UserCircle, CreditCard,
+  Bank, Lightning, Wallet, CheckCircle, Clock, XCircle,
+  ArrowClockwise, DownloadSimple,
+} from '@phosphor-icons/react';
+
+// ── Stats data ──────────────────────────────────────────────
+const stats = [
+  { label: 'Total Revenue', value: '$45,231', change: '+20.1%', up: true },
+  { label: 'Active Users', value: '2,350', change: '+12.5%', up: true },
+  { label: 'Sessions', value: '12,543', change: '-3.2%', up: false },
+  { label: 'Growth Rate', value: '4.5%', change: '+0.8%', up: true },
+];
+
+// ── Chart data ──────────────────────────────────────────────
+const revenueData = [
+  { month: 'Sep', revenue: 3200 },
+  { month: 'Oct', revenue: 4100 },
+  { month: 'Nov', revenue: 3800 },
+  { month: 'Dec', revenue: 5200 },
+  { month: 'Jan', revenue: 4800 },
+  { month: 'Feb', revenue: 6100 },
+];
+
+const chartConfig = {
+  revenue: { label: 'Revenue', color: 'var(--fui-color-accent)' },
+};
+
+// ── Table data ──────────────────────────────────────────────
+const methodIcons = { card: CreditCard, bank: Bank, crypto: Lightning, wallet: Wallet };
+const methodLabels = { card: 'Card', bank: 'Bank', crypto: 'Crypto', wallet: 'Wallet' };
+const statusConfig = {
+  completed: { variant: 'success', icon: CheckCircle, label: 'Completed' },
+  pending: { variant: 'warning', icon: Clock, label: 'Pending' },
+  failed: { variant: 'error', icon: XCircle, label: 'Failed' },
+  refunded: { variant: 'info', icon: ArrowClockwise, label: 'Refunded' },
+};
+
+const transactions = [
+  { id: '1', customer: 'Alice Chen', method: 'card', amount: '$1,250.00', status: 'completed', date: 'Feb 3' },
+  { id: '2', customer: 'Bob Park', method: 'bank', amount: '$890.00', status: 'pending', date: 'Feb 2' },
+  { id: '3', customer: 'Clara Liu', method: 'crypto', amount: '$2,100.00', status: 'completed', date: 'Feb 1' },
+  { id: '4', customer: 'David Kim', method: 'wallet', amount: '$450.00', status: 'failed', date: 'Jan 31' },
+  { id: '5', customer: 'Eva Santos', method: 'card', amount: '$3,200.00', status: 'completed', date: 'Jan 30' },
+];
+
+const columns = createColumns([
+  {
+    key: 'customer',
+    header: 'Customer',
+    cell: (row) => (
+      <Stack direction="row" gap="sm" align="center">
+        <Icon icon={UserCircle} size="sm" />
+        <Text size="sm" weight="medium">{row.customer}</Text>
+      </Stack>
+    ),
+  },
+  {
+    key: 'method',
+    header: 'Method',
+    cell: (row) => (
+      <Stack direction="row" gap="xs" align="center">
+        <Icon icon={methodIcons[row.method]} size="xs" />
+        <Text size="sm" color="secondary">{methodLabels[row.method]}</Text>
+      </Stack>
+    ),
+  },
+  {
+    key: 'amount',
+    header: 'Amount',
+    cell: (row) => <Text size="sm" weight="medium" font="mono">{row.amount}</Text>,
+  },
+  {
+    key: 'status',
+    header: 'Status',
+    cell: (row) => {
+      const cfg = statusConfig[row.status];
+      return (
+        <Badge variant={cfg.variant} size="sm" icon={<Icon icon={cfg.icon} size="xs" />}>
+          {cfg.label}
+        </Badge>
+      );
+    },
+  },
+  { key: 'date', header: 'Date' },
+]);
+
+// ── Activity data ───────────────────────────────────────────
+const activities = [
+  { id: 1, user: 'Alice Chen', action: 'completed a purchase', time: '2 min ago', initials: 'AC' },
+  { id: 2, user: 'Bob Park', action: 'submitted a support ticket', time: '15 min ago', initials: 'BP' },
+  { id: 3, user: 'Clara Liu', action: 'upgraded to Pro plan', time: '1 hour ago', initials: 'CL' },
+  { id: 4, user: 'David Kim', action: 'left a review', time: '3 hours ago', initials: 'DK' },
+];
+
+// ── Layout ──────────────────────────────────────────────────
+
+<AppShell layout="sidebar-inset">
+  <AppShell.Header>
+    <Header>
+      <Header.Trigger />
+      <Header.Nav>
+        <Breadcrumbs>
+          <Breadcrumbs.Item>Dashboard</Breadcrumbs.Item>
+          <Breadcrumbs.Item>Overview</Breadcrumbs.Item>
+        </Breadcrumbs>
+      </Header.Nav>
+      <Header.Spacer />
+      <Header.Search>
+        <Input placeholder="Search..." size="sm" style={{ width: 200 }} />
+      </Header.Search>
+      <Header.Actions>
+        <Button variant="ghost" size="sm" icon aria-label="Notifications">
+          <Icon icon={Bell} />
+        </Button>
+        <ThemeToggle size="sm" />
+        <Avatar size="sm" initials="JD" />
+      </Header.Actions>
+    </Header>
+  </AppShell.Header>
+
+  <AppShell.Sidebar width="220px" collapsible="icon">
+    <Sidebar.Header>
+      <Text weight="semibold" size="lg">Acme Inc</Text>
+    </Sidebar.Header>
+    <Sidebar.Nav>
+      <Sidebar.Section label="Main">
+        <Sidebar.Item icon={<Icon icon={SquaresFour} />} active>Dashboard</Sidebar.Item>
+        <Sidebar.Item icon={<Icon icon={ChartBar} />}>Analytics</Sidebar.Item>
+        <Sidebar.Item icon={<Icon icon={Users} />}>Customers</Sidebar.Item>
+        <Sidebar.Item icon={<Icon icon={FileText} />}>Reports</Sidebar.Item>
+      </Sidebar.Section>
+      <Sidebar.Section label="System">
+        <Sidebar.Item icon={<Icon icon={GearSix} />}>Settings</Sidebar.Item>
+      </Sidebar.Section>
+    </Sidebar.Nav>
+    <Sidebar.Footer>
+      <Sidebar.CollapseToggle />
+    </Sidebar.Footer>
+  </AppShell.Sidebar>
+
+  <AppShell.Main padding="lg">
+    <Stack gap="lg">
+      {/* Page header */}
+      <Stack direction="row" justify="between" align="end">
+        <Stack gap="xs">
+          <Text size="xl" weight="semibold">Dashboard</Text>
+          <Text color="secondary">Welcome back! Here's an overview of your metrics.</Text>
+        </Stack>
+        <Button variant="primary" size="sm">
+          <Icon icon={DownloadSimple} size="sm" /> Export
+        </Button>
+      </Stack>
+
+      {/* Stats cards */}
+      <Grid columns={{ base: 1, sm: 2, lg: 4 }} gap="md">
+        {stats.map((stat) => (
+          <Card key={stat.label}>
+            <Card.Body>
+              <Stack gap="xs">
+                <Text size="sm" color="secondary">{stat.label}</Text>
+                <Text size="2xl" weight="semibold">{stat.value}</Text>
+                <Badge
+                  variant={stat.up ? 'success' : 'warning'}
+                  size="sm"
+                  icon={<Icon icon={stat.up ? TrendUp : TrendDown} size="xs" />}
+                >
+                  {stat.change}
+                </Badge>
+              </Stack>
+            </Card.Body>
+          </Card>
+        ))}
+      </Grid>
+
+      {/* Chart + Activity feed row */}
+      <Grid columns={{ base: 1, lg: 3 }} gap="md">
+        <Grid.Item colSpan={2}>
+          <Card style={{ height: '100%' }}>
+            <Card.Header>
+              <Stack direction="row" justify="between" align="center">
+                <Card.Title>Revenue</Card.Title>
+                <Text size="sm" color="secondary">Last 6 months</Text>
+              </Stack>
+            </Card.Header>
+            <Card.Body>
+              <div style={{ height: 220 }}>
+                <ChartContainer config={chartConfig}>
+                  <AreaChart data={revenueData} margin={{ top: 5, right: 5, bottom: 0, left: -20 }}>
+                    <XAxis dataKey="month" tickLine={false} axisLine={false} />
+                    <Area
+                      type="monotone"
+                      dataKey="revenue"
+                      stroke="var(--fui-color-accent)"
+                      fill="var(--fui-color-accent)"
+                      fillOpacity={0.15}
+                      strokeWidth={2}
+                    />
+                    <ChartTooltip />
+                  </AreaChart>
+                </ChartContainer>
+              </div>
+            </Card.Body>
+          </Card>
+        </Grid.Item>
+
+        <Card>
+          <Card.Header>
+            <Card.Title>Recent Activity</Card.Title>
+          </Card.Header>
+          <Card.Body>
+            <Stack gap="md">
+              {activities.map((a) => (
+                <Stack key={a.id} direction="row" gap="sm" align="center">
+                  <Avatar size="sm" initials={a.initials} />
+                  <Stack gap="xs" style={{ flex: 1 }}>
+                    <Text size="sm">
+                      <Text size="sm" weight="semibold">{a.user}</Text> {a.action}
+                    </Text>
+                    <Text size="xs" color="tertiary">{a.time}</Text>
+                  </Stack>
+                </Stack>
+              ))}
+            </Stack>
+          </Card.Body>
+        </Card>
+      </Grid>
+
+      {/* Transactions table */}
+      <Card>
+        <Card.Header>
+          <Stack direction="row" justify="between" align="center">
+            <Stack direction="row" gap="sm" align="center">
+              <Card.Title>Recent Transactions</Card.Title>
+              <Badge variant="outline" size="sm">5 total</Badge>
+            </Stack>
+            <Button variant="ghost" size="sm" icon aria-label="Download">
+              <Icon icon={DownloadSimple} size="sm" />
+            </Button>
+          </Stack>
+        </Card.Header>
+        <Table
+          columns={columns}
+          data={transactions}
+          size="sm"
+          caption="Recent transactions"
+          captionHidden
+        />
+      </Card>
+    </Stack>
+  </AppShell.Main>
+</AppShell>
+`.trim(),
+});

package/src/blocks/EmptyState.block.ts

@@ -2,14 +2,16 @@ import { defineBlock } from '@fragments/core';
 
 export default defineBlock({
   name: 'Empty State',
-  description: 'Placeholder when no content or data exists',
+  description: 'Placeholder with icon, message, and action when no content exists',
   category: 'dashboard',
   components: ['EmptyState', 'Button'],
-  tags: ['empty', 'placeholder', 'zero-state', 'dashboard'],
+  tags: ['empty', 'placeholder', 'zero-state', 'no-data'],
   code: `
 <EmptyState>
   <EmptyState.Icon>
-    <InboxIcon />
+    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M21 8v13H3V8M1 3h22v5H1zM10 12h4" />
+    </svg>
   </EmptyState.Icon>
   <EmptyState.Title>No items yet</EmptyState.Title>
   <EmptyState.Description>Get started by creating your first item.</EmptyState.Description>

package/src/blocks/FeatureGrid.block.ts

@@ -19,7 +19,7 @@ const features = [
     <Card key={feature.title}>
       <Card.Body>
         <Stack gap="md">
-          <Icon icon={feature.icon} size="lg" color="accent" />
+          <Icon icon={feature.icon} size="lg" variant="accent" />
           <Stack gap="xs">
             <Text weight="semibold">{feature.title}</Text>
             <Text size="sm" color="tertiary">{feature.description}</Text>

package/src/blocks/LoginForm.block.ts

@@ -2,32 +2,27 @@ import { defineBlock } from '@fragments/core';
 
 export default defineBlock({
   name: 'Login Form',
-  description: 'Email/password authentication form with validation states',
-  category: 'forms',
-  components: ['Input', 'Button', 'Alert'],
-  tags: ['auth', 'login', 'form'],
+  description: 'Email/password authentication form with card layout and footer links',
+  category: 'authentication',
+  components: ['Card', 'Stack', 'Input', 'Button', 'Text', 'Link'],
+  tags: ['auth', 'login', 'signin', 'form'],
   code: `
-<Input
-  label="Email"
-  type="email"
-  placeholder="you@example.com"
-  error={Boolean(errors.email)}
-  helperText={errors.email}
-/>
-<Input
-  label="Password"
-  type="password"
-  error={Boolean(errors.password)}
-  helperText={errors.password}
-/>
-<Button type="submit" variant="primary">Sign in</Button>
-{error && (
-  <Alert severity="error">
-    <Alert.Icon />
-    <Alert.Body>
-      <Alert.Content>{error}</Alert.Content>
-    </Alert.Body>
-  </Alert>
-)}
+<Card variant="elevated">
+  <Card.Header>
+    <Card.Title>Sign In</Card.Title>
+    <Card.Description>Welcome back! Please enter your details.</Card.Description>
+  </Card.Header>
+  <Card.Body>
+    <Stack gap="md">
+      <Input label="Email" type="email" placeholder="Enter your email" />
+      <Input label="Password" type="password" placeholder="Enter your password" />
+      <Link href="#" variant="subtle"><Text size="sm">Forgot password?</Text></Link>
+      <Button variant="primary" fullWidth>Sign In</Button>
+    </Stack>
+  </Card.Body>
+  <Card.Footer>
+    <Text size="sm" color="tertiary">Don't have an account? <Link href="#">Sign up</Link></Text>
+  </Card.Footer>
+</Card>
 `.trim(),
 });

package/src/blocks/PricingComparison.block.ts

@@ -13,7 +13,7 @@ const tiers = [
   { name: 'Enterprise', price: '$99', period: '/month', description: 'For large organizations', features: ['Everything in Pro', 'Custom integrations', 'Dedicated support', 'SLA guarantee'], ctaText: 'Contact Sales' },
 ];
 
-<Grid columns={3} gap="lg">
+<Grid columns={{ base: 1, lg: 3 }} gap="lg">
   {tiers.map((tier) => (
     <Card key={tier.name}>
       <Card.Header>

package/src/blocks/ShoppingCart.block.ts

@@ -21,8 +21,8 @@ const items = [
   </Card.Header>
   <Card.Body>
     <Stack gap="md">
-      {items.map((item, index) => (
-        <Stack key={index} direction="row" gap="md" align="center">
+      {items.map((item) => (
+        <Stack key={item.name} direction="row" gap="md" align="center">
           <Image src={item.image} alt={item.name} width={64} height={64} rounded="md" />
           <Stack gap="xs" style={{ flex: 1 }}>
             <Text weight="semibold">{item.name}</Text>

package/src/components/Accordion/Accordion.fragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Accordion } from '.';
 
-export default defineSegment({
+export default defineFragment({
   component: Accordion,
 
   meta: {

package/src/components/Alert/Alert.fragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Alert } from '.';
 
-export default defineSegment({
+export default defineFragment({
   component: Alert,
 
   meta: {

package/src/components/AppShell/AppShell.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { AppShell } from '.';
 import { Header } from '../Header';
 import { Sidebar } from '../Sidebar';
@@ -38,7 +38,7 @@ function SearchIcon() {
   );
 }
 
-export default defineSegment({
+export default defineFragment({
   component: AppShell,
 
   meta: {

package/src/components/Avatar/Avatar.fragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Avatar } from '.';
 
-export default defineSegment({
+export default defineFragment({
   component: Avatar,
 
   meta: {

package/src/components/Badge/Badge.fragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Badge } from '.';
 
-export default defineSegment({
+export default defineFragment({
   component: Badge,
 
   meta: {

package/src/components/Box/Box.fragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Box } from '.';
 
-export default defineSegment({
+export default defineFragment({
   component: Box,
 
   meta: {

package/src/components/Breadcrumbs/Breadcrumbs.fragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Breadcrumbs } from '.';
 
-export default defineSegment({
+export default defineFragment({
   component: Breadcrumbs,
 
   meta: {