@fragments-sdk/ui 0.13.0 → 0.15.1

package/src/blocks/NavigationHeader.block.ts

@@ -1,89 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Navigation Header',
-  description:
-    'Site header with rich dropdown navigation panels, structured links with descriptions, and automatic mobile drawer. Uses NavigationMenu inside Header.',
-  category: 'marketing',
-  components: [
-    'Header',
-    'NavigationMenu',
-    'ThemeToggle',
-    'Button',
-  ],
-  tags: ['header', 'navigation', 'dropdown', 'mobile', 'responsive', 'navbar'],
-  code: `
-<Header>
-  <Header.Brand href="/">Acme</Header.Brand>
-  <NavigationMenu aria-label="Main navigation">
-    <NavigationMenu.List>
-      <NavigationMenu.Item value="products">
-        <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
-        <NavigationMenu.Content>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px', padding: '8px', minWidth: '400px' }}>
-            <NavigationMenu.Link
-              href="/analytics"
-              title="Analytics"
-              description="Track your metrics and KPIs in real time."
-            />
-            <NavigationMenu.Link
-              href="/automation"
-              title="Automation"
-              description="Automate repetitive workflows with ease."
-            />
-            <NavigationMenu.Link
-              href="/integrations"
-              title="Integrations"
-              description="Connect with your favorite tools."
-            />
-            <NavigationMenu.Link
-              href="/security"
-              title="Security"
-              description="Enterprise-grade protection for your data."
-            />
-          </div>
-        </NavigationMenu.Content>
-      </NavigationMenu.Item>
-      <NavigationMenu.Item value="resources">
-        <NavigationMenu.Trigger>Resources</NavigationMenu.Trigger>
-        <NavigationMenu.Content>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', padding: '8px', minWidth: '220px' }}>
-            <NavigationMenu.Link
-              href="/docs"
-              title="Documentation"
-              description="Comprehensive API reference and guides."
-            />
-            <NavigationMenu.Link
-              href="/blog"
-              title="Blog"
-              description="Latest news, updates, and tutorials."
-            />
-            <NavigationMenu.Link
-              href="/changelog"
-              title="Changelog"
-              description="See what's new in every release."
-            />
-          </div>
-        </NavigationMenu.Content>
-      </NavigationMenu.Item>
-      <NavigationMenu.Item>
-        <NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>
-      </NavigationMenu.Item>
-    </NavigationMenu.List>
-    <NavigationMenu.Viewport />
-    <NavigationMenu.MobileContent>
-      <NavigationMenu.MobileSection label="Company">
-        <NavigationMenu.Link href="/about">About</NavigationMenu.Link>
-        <NavigationMenu.Link href="/careers">Careers</NavigationMenu.Link>
-        <NavigationMenu.Link href="/contact">Contact</NavigationMenu.Link>
-      </NavigationMenu.MobileSection>
-    </NavigationMenu.MobileContent>
-  </NavigationMenu>
-  <Header.Spacer />
-  <Header.Actions>
-    <ThemeToggle size="md" />
-    <Button variant="primary" size="sm">Get Started</Button>
-  </Header.Actions>
-</Header>
-`.trim(),
-});

package/src/blocks/PaginatedTable.block.ts

@@ -1,36 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Paginated Table',
-  description: 'Data table with pagination controls at the bottom',
-  category: 'dashboard',
-  components: ['Card', 'Table', 'Pagination'],
-  tags: ['table', 'pagination', 'data', 'dashboard', 'list'],
-  code: `
-const columns = [
-  { accessorKey: 'name', header: 'Name' },
-  { accessorKey: 'email', header: 'Email' },
-  { accessorKey: 'status', header: 'Status' },
-];
-
-const data = [
-  { name: 'John Doe', email: 'john@example.com', status: 'Active' },
-  { name: 'Jane Smith', email: 'jane@example.com', status: 'Pending' },
-  { name: 'Bob Wilson', email: 'bob@example.com', status: 'Active' },
-];
-
-<Card>
-  <Card.Header>
-    <Card.Title>Users</Card.Title>
-  </Card.Header>
-  <Table data={data} columns={columns} />
-  <Card.Footer>
-    <Pagination totalPages={10} defaultPage={1}>
-      <Pagination.Previous />
-      <Pagination.Items />
-      <Pagination.Next />
-    </Pagination>
-  </Card.Footer>
-</Card>
-`.trim(),
-});

package/src/blocks/PricingComparison.block.ts

@@ -1,44 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Pricing Comparison',
-  description: 'Multiple pricing tiers displayed side by side with features and CTAs',
-  category: 'marketing',
-  components: ['Grid', 'Card', 'Stack', 'Text', 'Separator', 'Button'],
-  tags: ['pricing', 'plans', 'tiers', 'marketing', 'comparison'],
-  code: `
-const tiers = [
-  { name: 'Basic', price: '$9', period: '/month', description: 'For individuals', features: ['5 projects', 'Basic analytics', 'Email support'], ctaText: 'Get Started' },
-  { name: 'Pro', price: '$29', period: '/month', description: 'For small teams', features: ['Unlimited projects', 'Advanced analytics', 'Priority support', 'API access'], ctaText: 'Start Free Trial' },
-  { 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={{ base: 1, lg: 3 }} gap="lg">
-  {tiers.map((tier) => (
-    <Card key={tier.name}>
-      <Card.Header>
-        <Card.Title>{tier.name}</Card.Title>
-        <Card.Description>{tier.description}</Card.Description>
-      </Card.Header>
-      <Card.Body>
-        <Stack gap="md">
-          <Stack direction="row" align="baseline" gap="xs">
-            <Text size="2xl" weight="semibold">{tier.price}</Text>
-            <Text color="tertiary">{tier.period}</Text>
-          </Stack>
-          <Separator />
-          <Stack gap="sm">
-            {tier.features.map((feature) => (
-              <Text key={feature}>✓ {feature}</Text>
-            ))}
-          </Stack>
-        </Stack>
-      </Card.Body>
-      <Card.Footer>
-        <Button variant="primary" fullWidth>{tier.ctaText}</Button>
-      </Card.Footer>
-    </Card>
-  ))}
-</Grid>
-`.trim(),
-});

package/src/blocks/ProductCard.block.ts

@@ -1,33 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Product Card',
-  description: 'Product display with image, price, stock badge and add to cart button',
-  category: 'ecommerce',
-  components: ['Card', 'Image', 'Stack', 'Text', 'Badge', 'Button'],
-  tags: ['product', 'card', 'ecommerce', 'shopping'],
-  code: `
-<Card style={{ maxWidth: '320px' }}>
-  <Image
-    src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=300&fit=crop"
-    alt="Product"
-    aspectRatio="4:3"
-  />
-  <Card.Body>
-    <Stack gap="sm">
-      <Stack direction="row" justify="between" align="start">
-        <Stack gap="xs">
-          <Text weight="semibold">Minimalist Watch</Text>
-          <Text size="sm" color="tertiary">Premium Collection</Text>
-        </Stack>
-        <Badge variant="success">In Stock</Badge>
-      </Stack>
-      <Stack direction="row" justify="between" align="center">
-        <Text size="lg" weight="semibold">$299</Text>
-        <Button variant="primary" size="sm">Add to Cart</Button>
-      </Stack>
-    </Stack>
-  </Card.Body>
-</Card>
-`.trim(),
-});

package/src/blocks/RegistrationForm.block.ts

@@ -1,38 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Registration Form',
-  description: 'Signup form with name, email, password fields and terms checkbox',
-  category: 'authentication',
-  components: ['Card', 'Stack', 'Input', 'Checkbox', 'Button', 'Text', 'Link'],
-  tags: ['auth', 'signup', 'registration', 'form'],
-  code: `
-<Card variant="elevated">
-  <Card.Header>
-    <Card.Title>Create Account</Card.Title>
-    <Card.Description>Sign up to get started with your free account.</Card.Description>
-  </Card.Header>
-  <Card.Body>
-    <Stack gap="md">
-      <Stack direction={{ base: 'column', sm: 'row' }} gap="md">
-        <Input label="First Name" placeholder="John" style={{ flex: 1 }} />
-        <Input label="Last Name" placeholder="Doe" style={{ flex: 1 }} />
-      </Stack>
-      <Input label="Email" type="email" placeholder="john@example.com" />
-      <Input label="Password" type="password" placeholder="Create a password" />
-      <Input label="Confirm Password" type="password" placeholder="Confirm your password" />
-      <Stack direction="row" gap="sm" align="center">
-        <Checkbox id="terms" />
-        <Text as="label" htmlFor="terms" size="sm">
-          I agree to the Terms of Service and Privacy Policy
-        </Text>
-      </Stack>
-      <Button variant="primary" fullWidth>Create Account</Button>
-    </Stack>
-  </Card.Body>
-  <Card.Footer>
-    <Text size="sm" color="tertiary">Already have an account? <Link href="#">Sign in</Link></Text>
-  </Card.Footer>
-</Card>
-`.trim(),
-});

package/src/blocks/SettingsDrawer.block.ts

@@ -1,47 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Settings Drawer',
-  description: 'Side panel for editing settings with form fields and save/cancel actions',
-  category: 'settings',
-  components: ['Drawer', 'Form', 'Field', 'Button', 'Switch'],
-  tags: ['drawer', 'settings', 'form', 'panel', 'editor'],
-  code: `
-<Drawer>
-  <Drawer.Trigger asChild>
-    <Button variant="secondary">Settings</Button>
-  </Drawer.Trigger>
-  <Drawer.Content size="md">
-    <Drawer.Close />
-    <Drawer.Header>
-      <Drawer.Title>Settings</Drawer.Title>
-      <Drawer.Description>Manage your preferences.</Drawer.Description>
-    </Drawer.Header>
-    <Drawer.Body>
-      <Form>
-        <Stack gap="md">
-          <Field>
-            <Field.Label>Display Name</Field.Label>
-            <Field.Control>
-              <Input placeholder="Enter name" />
-            </Field.Control>
-          </Field>
-          <Field>
-            <Field.Label>Email Notifications</Field.Label>
-            <Field.Control>
-              <Switch defaultChecked />
-            </Field.Control>
-          </Field>
-        </Stack>
-      </Form>
-    </Drawer.Body>
-    <Drawer.Footer>
-      <Drawer.Close asChild>
-        <Button variant="secondary">Cancel</Button>
-      </Drawer.Close>
-      <Button variant="primary">Save Changes</Button>
-    </Drawer.Footer>
-  </Drawer.Content>
-</Drawer>
-`.trim(),
-});

package/src/blocks/SettingsPanel.block.ts

@@ -1,35 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Settings Panel',
-  description: 'Settings panel with switches and descriptions',
-  category: 'settings',
-  components: ['Card', 'Stack', 'Text', 'Switch'],
-  tags: ['settings', 'switches', 'preferences', 'panel'],
-  code: `
-const settings = [
-  { label: 'Email Notifications', description: 'Receive updates via email', defaultChecked: true },
-  { label: 'Push Notifications', description: 'Receive push notifications on your device', defaultChecked: false },
-  { label: 'Marketing Emails', description: 'Receive product updates and tips', defaultChecked: false },
-];
-
-<Card>
-  <Card.Header>
-    <Card.Title>Settings</Card.Title>
-  </Card.Header>
-  <Card.Body>
-    <Stack gap="lg">
-      {settings.map((setting) => (
-        <Stack key={setting.label} direction="row" justify="between" align="center">
-          <Stack gap="xs">
-            <Text weight="medium">{setting.label}</Text>
-            <Text size="sm" color="tertiary">{setting.description}</Text>
-          </Stack>
-          <Switch defaultChecked={setting.defaultChecked} />
-        </Stack>
-      ))}
-    </Stack>
-  </Card.Body>
-</Card>
-`.trim(),
-});

package/src/blocks/ShoppingCart.block.ts

@@ -1,46 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Shopping Cart',
-  description: 'Cart with item images, quantities, totals and checkout button',
-  category: 'ecommerce',
-  components: ['Card', 'Stack', 'Text', 'Image', 'Badge', 'Separator', 'Button'],
-  tags: ['cart', 'shopping', 'ecommerce', 'checkout'],
-  code: `
-const items = [
-  { name: 'Wireless Headphones', price: 199, quantity: 1, image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=100&h=100&fit=crop' },
-  { name: 'Smart Watch', price: 299, quantity: 1, image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=100&h=100&fit=crop' },
-];
-
-<Card>
-  <Card.Header>
-    <Stack direction="row" justify="between" align="center">
-      <Card.Title>Shopping Cart</Card.Title>
-      <Badge>2 items</Badge>
-    </Stack>
-  </Card.Header>
-  <Card.Body>
-    <Stack gap="md">
-      {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>
-            <Text size="sm" color="tertiary">Qty: {item.quantity}</Text>
-          </Stack>
-          <Text weight="semibold">\${item.price}</Text>
-        </Stack>
-      ))}
-      <Separator />
-      <Stack direction="row" justify="between">
-        <Text weight="semibold">Total</Text>
-        <Text weight="semibold">$498</Text>
-      </Stack>
-    </Stack>
-  </Card.Body>
-  <Card.Footer>
-    <Button variant="primary" fullWidth>Checkout</Button>
-  </Card.Footer>
-</Card>
-`.trim(),
-});

package/src/blocks/StatsCard.block.ts

@@ -1,26 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Stats Card',
-  description: 'Metric card with value, change indicator and icon',
-  category: 'dashboard',
-  components: ['Card', 'Stack', 'Text', 'Badge', 'Icon'],
-  tags: ['stats', 'metrics', 'kpi', 'dashboard', 'card'],
-  code: `
-<Card>
-  <Card.Body>
-    <Stack direction="row" justify="between" align="start">
-      <Stack gap="xs">
-        <Text size="sm" color="tertiary">Total Revenue</Text>
-        <Text size="2xl" weight="semibold">$45,231</Text>
-        <Stack direction="row" gap="xs" align="center">
-          <Badge variant="success">+12.5%</Badge>
-          <Text size="sm" color="tertiary">from last month</Text>
-        </Stack>
-      </Stack>
-      <Icon icon={TrendUp} size="lg" color="success" />
-    </Stack>
-  </Card.Body>
-</Card>
-`.trim(),
-});

package/src/blocks/StatsCardSkeleton.block.ts

@@ -1,26 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Stats Card Skeleton',
-  description: 'Card with skeleton metric value, label, and badge for loading stat displays',
-  category: 'loading',
-  components: ['Card', 'Stack', 'Skeleton'],
-  tags: ['stats', 'skeleton', 'loading', 'placeholder'],
-  code: `
-<Card>
-  <Card.Body>
-    <Stack direction="row" justify="between" align="start">
-      <Stack gap="sm">
-        <Skeleton variant="text" width={100} />
-        <Skeleton variant="heading" width={140} />
-        <Stack direction="row" gap="xs" align="center">
-          <Skeleton variant="button" width={60} height={22} />
-          <Skeleton variant="text" width={90} />
-        </Stack>
-      </Stack>
-      <Skeleton.Circle size="lg" />
-    </Stack>
-  </Card.Body>
-</Card>
-`.trim(),
-});

package/src/blocks/TableSkeleton.block.ts

@@ -1,39 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Table Skeleton',
-  description: 'Table-shaped skeleton rows for loading data tables',
-  category: 'loading',
-  components: ['Card', 'Stack', 'Skeleton'],
-  tags: ['table', 'skeleton', 'loading', 'placeholder'],
-  code: `
-<Card>
-  <Card.Header>
-    <Stack direction="row" justify="between" align="center">
-      <Skeleton variant="heading" width={120} />
-      <Skeleton variant="input" width={200} />
-    </Stack>
-  </Card.Header>
-  <Card.Body>
-    <Stack gap="none">
-      {/* Table header row */}
-      <Stack direction="row" gap="lg" style={{ padding: 'var(--fui-space-2) 0', borderBottom: '1px solid var(--fui-border)' }}>
-        <Skeleton variant="text" width="25%" />
-        <Skeleton variant="text" width="30%" />
-        <Skeleton variant="text" width="20%" />
-        <Skeleton variant="text" width="15%" />
-      </Stack>
-      {/* Table body rows */}
-      {Array.from({ length: 5 }).map((_, i) => (
-        <Stack key={i} direction="row" gap="lg" align="center" style={{ padding: 'var(--fui-space-2) 0', borderBottom: '1px solid var(--fui-border)' }}>
-          <Skeleton variant="text" width="25%" />
-          <Skeleton variant="text" width="30%" />
-          <Skeleton variant="button" width="20%" />
-          <Skeleton variant="text" width="15%" />
-        </Stack>
-      ))}
-    </Stack>
-  </Card.Body>
-</Card>
-`.trim(),
-});

package/src/blocks/ThinkingStates.block.ts

@@ -1,48 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Thinking States',
-  description: 'Various AI thinking indicator states: dots, pulse, spinner with steps',
-  category: 'ai',
-  components: ['Stack', 'Card', 'ThinkingIndicator'],
-  tags: ['thinking', 'loading', 'ai', 'indicator', 'spinner'],
-  code: `
-<Stack gap="lg">
-  <Card>
-    <Card.Header>
-      <Card.Title>Dots Animation</Card.Title>
-    </Card.Header>
-    <Card.Body>
-      <ThinkingIndicator variant="dots" label="Thinking..." />
-    </Card.Body>
-  </Card>
-
-  <Card>
-    <Card.Header>
-      <Card.Title>Pulse Animation</Card.Title>
-    </Card.Header>
-    <Card.Body>
-      <ThinkingIndicator variant="pulse" label="Processing request..." />
-    </Card.Body>
-  </Card>
-
-  <Card>
-    <Card.Header>
-      <Card.Title>Spinner with Steps</Card.Title>
-    </Card.Header>
-    <Card.Body>
-      <ThinkingIndicator
-        variant="spinner"
-        label="Working on your request..."
-        showElapsed
-        steps={[
-          { id: '1', label: 'Understanding your question', status: 'complete' },
-          { id: '2', label: 'Searching knowledge base', status: 'active' },
-          { id: '3', label: 'Generating response', status: 'pending' },
-        ]}
-      />
-    </Card.Body>
-  </Card>
-</Stack>
-`.trim(),
-});

package/src/blocks/components/ActivityFeed.tsx

@@ -1,98 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Card } from '../../components/Card';
-import { Stack } from '../../components/Stack';
-import { Text } from '../../components/Text';
-import { Avatar } from '../../components/Avatar';
-
-// ============================================
-// Types
-// ============================================
-
-export interface ActivityFeedItem {
-  /** Unique identifier for the activity */
-  id: string;
-  /** User who performed the action */
-  user: string;
-  /** Description of the action */
-  action: string;
-  /** Formatted timestamp string */
-  time: string;
-  /** Avatar image URL */
-  avatar?: string;
-  /** Fallback initials for the avatar */
-  initials?: string;
-}
-
-export interface ActivityFeedProps {
-  /** List of activity items to display */
-  items: ActivityFeedItem[];
-  /** Optional title for the card header */
-  title?: string;
-  /** Additional CSS class name */
-  className?: string;
-}
-
-// ============================================
-// Component
-// ============================================
-
-export const ActivityFeed = React.forwardRef<HTMLDivElement, ActivityFeedProps>(
-  function ActivityFeed({ items, title = 'Recent Activity', className }, ref) {
-    return (
-      <Card className={className}>
-        <Card.Header>
-          <Card.Title>{title}</Card.Title>
-        </Card.Header>
-        <Card.Body>
-          <div ref={ref}>
-            <Stack gap="sm">
-              {items.map((item, index) => (
-                <div
-                  key={item.id}
-                  style={{
-                    display: 'flex',
-                    gap: 'var(--fui-space-3)',
-                    alignItems: 'flex-start',
-                    paddingBottom:
-                      index < items.length - 1
-                        ? 'var(--fui-space-3)'
-                        : undefined,
-                    borderBottom:
-                      index < items.length - 1
-                        ? '1px solid var(--fui-border)'
-                        : undefined,
-                  }}
-                >
-                  <Avatar
-                    src={item.avatar}
-                    name={item.user}
-                    initials={item.initials}
-                    size="sm"
-                  />
-                  <Stack gap="xs" style={{ flex: 1, minWidth: 0 }}>
-                    <Text size="sm">
-                      <Text as="span" weight="medium">
-                        {item.user}
-                      </Text>{' '}
-                      {item.action}
-                    </Text>
-                    <Text size="xs" color="tertiary">
-                      {item.time}
-                    </Text>
-                  </Stack>
-                </div>
-              ))}
-              {items.length === 0 && (
-                <Text size="sm" color="tertiary">
-                  No recent activity.
-                </Text>
-              )}
-            </Stack>
-          </div>
-        </Card.Body>
-      </Card>
-    );
-  }
-);

package/src/blocks/components/DashboardLayout.tsx

@@ -1,55 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-// ============================================
-// Types
-// ============================================
-
-export interface DashboardLayoutProps {
-  /** Dashboard content (typically Card or StatsCard components) */
-  children: React.ReactNode;
-  /** Number of grid columns */
-  columns?: 1 | 2 | 3 | 4;
-  /** Gap size between grid items */
-  gap?: 'sm' | 'md' | 'lg';
-  /** Additional CSS class name */
-  className?: string;
-}
-
-// ============================================
-// Gap map
-// ============================================
-
-const gapMap = {
-  sm: 'var(--fui-space-2)',
-  md: 'var(--fui-space-4)',
-  lg: 'var(--fui-space-6)',
-} as const;
-
-// ============================================
-// Component
-// ============================================
-
-export const DashboardLayout = React.forwardRef<
-  HTMLDivElement,
-  DashboardLayoutProps
->(function DashboardLayout(
-  { children, columns = 3, gap = 'md', className },
-  ref
-) {
-  return (
-    <div
-      ref={ref}
-      className={className}
-      style={{
-        display: 'grid',
-        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-        gap: gapMap[gap],
-        width: '100%',
-      }}
-    >
-      {children}
-    </div>
-  );
-});