@fragments-sdk/ui 0.13.0 → 0.15.1

package/src/blocks/CommandPalette.block.ts

@@ -1,34 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Command Palette',
-  description: 'Modal command palette for quick actions, composed with Dialog and Command',
-  category: 'navigation',
-  components: ['Dialog', 'Command'],
-  tags: ['command', 'palette', 'search', 'spotlight', 'quick-actions'],
-  code: `
-<Dialog>
-  <Dialog.Trigger asChild>
-    <Button variant="secondary">Open Command Palette</Button>
-  </Dialog.Trigger>
-  <Dialog.Content size="sm">
-    <Command>
-      <Command.Input placeholder="Search commands..." />
-      <Command.List>
-        <Command.Group heading="Actions">
-          <Command.Item onItemSelect={() => console.log('new')}>New File</Command.Item>
-          <Command.Item onItemSelect={() => console.log('open')}>Open Recent</Command.Item>
-          <Command.Item onItemSelect={() => console.log('save')}>Save All</Command.Item>
-        </Command.Group>
-        <Command.Separator />
-        <Command.Group heading="Settings">
-          <Command.Item onItemSelect={() => console.log('prefs')}>Preferences</Command.Item>
-          <Command.Item onItemSelect={() => console.log('keys')}>Keyboard Shortcuts</Command.Item>
-        </Command.Group>
-        <Command.Empty>No results found.</Command.Empty>
-      </Command.List>
-    </Command>
-  </Dialog.Content>
-</Dialog>
-`.trim(),
-});

package/src/blocks/ContactForm.block.ts

@@ -1,28 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Contact Form',
-  description: 'Contact form with name, email, subject and message fields',
-  category: 'marketing',
-  components: ['Card', 'Stack', 'Input', 'Textarea', 'Button'],
-  tags: ['contact', 'form', 'marketing', 'message'],
-  code: `
-<Card variant="elevated">
-  <Card.Header>
-    <Card.Title>Contact Us</Card.Title>
-    <Card.Description>Send us a message and we'll get back to you soon.</Card.Description>
-  </Card.Header>
-  <Card.Body>
-    <Stack gap="md">
-      <Stack direction={{ base: 'column', sm: 'row' }} gap="md">
-        <Input label="Name" placeholder="Your name" style={{ flex: 1 }} />
-        <Input label="Email" type="email" placeholder="your@email.com" style={{ flex: 1 }} />
-      </Stack>
-      <Input label="Subject" placeholder="How can we help?" />
-      <Textarea label="Message" placeholder="Tell us more about your inquiry..." rows={5} />
-      <Button variant="primary" fullWidth>Send Message</Button>
-    </Stack>
-  </Card.Body>
-</Card>
-`.trim(),
-});

package/src/blocks/DashboardLayout.block.ts

@@ -1,92 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Dashboard Layout',
-  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: `
-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>
-  <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

@@ -1,298 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/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',
-    'Box',
-    '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>
-  <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>
-              <Box 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>
-              </Box>
-            </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/DashboardSkeleton.block.ts

@@ -1,28 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Dashboard Skeleton',
-  description: 'Grid of card shells with skeleton text and headings for dashboard loading states',
-  category: 'loading',
-  components: ['Card', 'Grid', 'Skeleton'],
-  tags: ['dashboard', 'skeleton', 'loading', 'placeholder'],
-  code: `
-<Grid columns={{ base: 1, md: 2, lg: 3 }} gap="md">
-  {Array.from({ length: 6 }).map((_, i) => (
-    <Card key={i}>
-      <Card.Body>
-        <Stack gap="md">
-          <Skeleton variant="heading" width="60%" />
-          <Skeleton.Text lines={2} />
-          <Skeleton variant="rect" height={120} radius="md" />
-          <Stack direction="row" gap="sm" align="center">
-            <Skeleton variant="button" width={80} />
-            <Skeleton variant="text" width={60} />
-          </Stack>
-        </Stack>
-      </Card.Body>
-    </Card>
-  ))}
-</Grid>
-`.trim(),
-});

package/src/blocks/DataTable.block.ts

@@ -1,29 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Data Table',
-  description: 'Table displaying structured data with columns',
-  category: 'dashboard',
-  components: ['Card', 'Table'],
-  tags: ['table', 'data', 'grid', '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>
-`.trim(),
-});

package/src/blocks/EmptyState.block.ts

@@ -1,23 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Empty State',
-  description: 'Placeholder with icon, message, and action when no content exists',
-  category: 'dashboard',
-  components: ['EmptyState', 'Icon', 'Button'],
-  tags: ['empty', 'placeholder', 'zero-state', 'no-data'],
-  code: `
-import { ArchiveBox } from '@phosphor-icons/react';
-
-<EmptyState>
-  <EmptyState.Icon>
-    <Icon icon={ArchiveBox} size="xl" />
-  </EmptyState.Icon>
-  <EmptyState.Title>No items yet</EmptyState.Title>
-  <EmptyState.Description>Get started by creating your first item.</EmptyState.Description>
-  <EmptyState.Actions>
-    <Button variant="primary">Create Item</Button>
-  </EmptyState.Actions>
-</EmptyState>
-`.trim(),
-});

package/src/blocks/FAQSection.block.ts

@@ -1,35 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'FAQ Section',
-  description: 'Frequently asked questions with accordion component',
-  category: 'marketing',
-  components: ['Card', 'Accordion', 'Text'],
-  tags: ['faq', 'questions', 'accordion', 'marketing', 'help'],
-  code: `
-const faqs = [
-  { question: 'How do I get started?', answer: 'Simply install the package via npm and import the components you need. Check our documentation for detailed setup instructions.' },
-  { question: 'Is it compatible with my framework?', answer: 'Yes! Our components work with React, Next.js, Remix, and any other React-based framework.' },
-  { question: 'Can I customize the styling?', answer: 'Absolutely. All components support custom CSS, CSS variables, and our built-in theming system.' },
-  { question: 'Do you offer support?', answer: 'We offer community support through GitHub discussions and premium support for enterprise customers.' },
-];
-
-<Card>
-  <Card.Header>
-    <Card.Title>Frequently Asked Questions</Card.Title>
-  </Card.Header>
-  <Card.Body>
-    <Accordion type="single" collapsible>
-      {faqs.map((faq, index) => (
-        <Accordion.Item key={index} value={\`item-\${index}\`}>
-          <Accordion.Trigger>{faq.question}</Accordion.Trigger>
-          <Accordion.Content>
-            <Text color="secondary">{faq.answer}</Text>
-          </Accordion.Content>
-        </Accordion.Item>
-      ))}
-    </Accordion>
-  </Card.Body>
-</Card>
-`.trim(),
-});

package/src/blocks/FeatureGrid.block.ts

@@ -1,33 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Feature Grid',
-  description: 'Grid of features with icons and descriptions',
-  category: 'marketing',
-  components: ['Grid', 'Card', 'Stack', 'Icon', 'Text'],
-  tags: ['features', 'grid', 'marketing', 'icons'],
-  code: `
-const features = [
-  { icon: Rocket, title: 'Fast Performance', description: 'Optimized for speed with minimal bundle size' },
-  { icon: Shield, title: 'Secure by Default', description: 'Built-in security best practices' },
-  { icon: Puzzle, title: 'Modular Design', description: 'Pick only what you need' },
-  { icon: Sparkle, title: 'Modern Stack', description: 'Built with the latest technologies' },
-];
-
-<Grid columns={{ base: 1, md: 2, lg: 4 }} gap="lg">
-  {features.map((feature) => (
-    <Card key={feature.title}>
-      <Card.Body>
-        <Stack gap="md">
-          <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>
-          </Stack>
-        </Stack>
-      </Card.Body>
-    </Card>
-  ))}
-</Grid>
-`.trim(),
-});

package/src/blocks/HeroSection.block.ts

@@ -1,31 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: 'Hero Section',
-  description: 'Landing page hero with headline, description and CTA buttons',
-  category: 'marketing',
-  components: ['Stack', 'Text', 'Button', 'Image'],
-  tags: ['hero', 'landing', 'marketing', 'cta'],
-  code: `
-<Stack gap="xl" align="center" style={{ textAlign: 'center', padding: '64px 24px' }}>
-  <Stack gap="md" align="center" style={{ maxWidth: '600px' }}>
-    <Text as="h1" size="2xl" weight="semibold">Build beautiful products faster</Text>
-    <Text size="lg" color="secondary">
-      A modern component library designed for developers who want to ship quality interfaces without the complexity.
-    </Text>
-  </Stack>
-  <Stack direction={{ base: 'column', sm: 'row' }} gap="md">
-    <Button variant="primary">Get Started</Button>
-    <Button variant="secondary">Learn More</Button>
-  </Stack>
-  <Image
-    src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&h=400&fit=crop"
-    alt="Code on screen"
-    aspectRatio="16:9"
-    rounded="lg"
-    width="100%"
-    style={{ maxWidth: '800px' }}
-  />
-</Stack>
-`.trim(),
-});

package/src/blocks/LoginForm.block.ts

@@ -1,28 +0,0 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
-
-export default defineBlock({
-  name: '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: `
-<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(),
-});