@fragments-sdk/ui 0.8.1 → 0.8.3

package/src/blocks/MetricDashboard.block.ts

@@ -1,38 +0,0 @@
-import { defineBlock } from '@fragments/core';
-
-export default defineBlock({
-  name: 'Metric Dashboard',
-  description: 'Grid of metrics with progress bars and change indicators',
-  category: 'dashboard',
-  components: ['Grid', 'Card', 'Stack', 'Text', 'Badge', 'Progress'],
-  tags: ['metrics', 'dashboard', 'kpi', 'progress', 'grid'],
-  code: `
-const metrics = [
-  { label: 'Active Users', value: '2,847', change: '+12%', progress: 75 },
-  { label: 'Revenue', value: '$48,352', change: '+8%', progress: 68 },
-  { label: 'Orders', value: '1,423', change: '+23%', progress: 82 },
-  { label: 'Conversion', value: '3.24%', change: '-2%', progress: 45 },
-];
-
-<Grid columns={{ base: 1, md: 2 }} gap="lg">
-  {metrics.map((metric) => (
-    <Card key={metric.label}>
-      <Card.Body>
-        <Stack gap="md">
-          <Stack direction="row" justify="between" align="start">
-            <Stack gap="xs">
-              <Text size="sm" color="tertiary">{metric.label}</Text>
-              <Text size="xl" weight="semibold">{metric.value}</Text>
-            </Stack>
-            <Badge variant={metric.change.startsWith('+') ? 'success' : 'error'}>
-              {metric.change}
-            </Badge>
-          </Stack>
-          <Progress value={metric.progress} />
-        </Stack>
-      </Card.Body>
-    </Card>
-  ))}
-</Grid>
-`.trim(),
-});

package/src/blocks/NewsletterSignup.block.ts

@@ -1,26 +0,0 @@
-import { defineBlock } from '@fragments/core';
-
-export default defineBlock({
-  name: 'Newsletter Signup',
-  description: 'Compact email signup with inline button',
-  category: 'marketing',
-  components: ['Card', 'Stack', 'Text', 'Input', 'Button'],
-  tags: ['newsletter', 'signup', 'email', 'marketing'],
-  code: `
-<Card variant="outlined">
-  <Card.Body>
-    <Stack gap="md">
-      <Stack gap="xs">
-        <Text size="lg" weight="semibold">Stay Updated</Text>
-        <Text color="tertiary">Get the latest news and updates delivered to your inbox.</Text>
-      </Stack>
-      <Stack direction={{ base: 'column', sm: 'row' }} gap="sm">
-        <Input type="email" placeholder="Enter your email" style={{ flex: 1 }} />
-        <Button variant="primary">Subscribe</Button>
-      </Stack>
-      <Text size="sm" color="tertiary">No spam, unsubscribe anytime.</Text>
-    </Stack>
-  </Card.Body>
-</Card>
-`.trim(),
-});

package/src/blocks/NotificationList.block.ts

@@ -1,39 +0,0 @@
-import { defineBlock } from '@fragments/core';
-
-export default defineBlock({
-  name: 'Notification List',
-  description: 'Notification feed with avatars and timestamps',
-  category: 'dashboard',
-  components: ['Card', 'Stack', 'Text', 'Avatar', 'Badge'],
-  tags: ['notifications', 'feed', 'list', 'dashboard'],
-  code: `
-const notifications = [
-  { message: 'John commented on your post', time: '2 minutes ago', initials: 'JD' },
-  { message: 'Sarah liked your photo', time: '1 hour ago', initials: 'SL' },
-  { message: 'New follower: Mike Smith', time: '3 hours ago', initials: 'MS' },
-  { message: 'Your order has shipped', time: 'Yesterday', initials: '📦' },
-];
-
-<Card>
-  <Card.Header>
-    <Stack direction="row" justify="between" align="center">
-      <Card.Title>Notifications</Card.Title>
-      <Badge>3 new</Badge>
-    </Stack>
-  </Card.Header>
-  <Card.Body>
-    <Stack gap="md">
-      {notifications.map((notif, index) => (
-        <Stack key={index} direction="row" gap="md" align="start">
-          <Avatar size="sm" initials={notif.initials} />
-          <Stack gap="xs">
-            <Text>{notif.message}</Text>
-            <Text size="sm" color="tertiary">{notif.time}</Text>
-          </Stack>
-        </Stack>
-      ))}
-    </Stack>
-  </Card.Body>
-</Card>
-`.trim(),
-});

package/src/blocks/NotificationPreferences.block.ts

@@ -1,40 +0,0 @@
-import { defineBlock } from '@fragments/core';
-
-export default defineBlock({
-  name: 'Notification Preferences',
-  description: 'Checkbox list for notification settings with descriptions',
-  category: 'settings',
-  components: ['Card', 'Stack', 'Text', 'Checkbox', 'Button'],
-  tags: ['notifications', 'preferences', 'settings', 'checkboxes'],
-  code: `
-const preferences = [
-  { label: 'New messages', description: 'When someone sends you a direct message' },
-  { label: 'Project updates', description: 'When there are updates to projects you follow' },
-  { label: 'Mentions', description: 'When someone mentions you in a comment' },
-  { label: 'Weekly digest', description: 'A summary of activity from the past week' },
-];
-
-<Card>
-  <Card.Header>
-    <Card.Title>Notification Preferences</Card.Title>
-    <Card.Description>Choose what you want to be notified about</Card.Description>
-  </Card.Header>
-  <Card.Body>
-    <Stack gap="md">
-      {preferences.map((pref) => (
-        <Stack key={pref.label} direction="row" gap="md" align="start">
-          <Checkbox id={pref.label} defaultChecked />
-          <Stack gap="xs">
-            <Text as="label" htmlFor={pref.label} weight="medium">{pref.label}</Text>
-            <Text size="sm" color="tertiary">{pref.description}</Text>
-          </Stack>
-        </Stack>
-      ))}
-    </Stack>
-  </Card.Body>
-  <Card.Footer>
-    <Button variant="primary">Save Preferences</Button>
-  </Card.Footer>
-</Card>
-`.trim(),
-});

package/src/blocks/OrderSummary.block.ts

@@ -1,52 +0,0 @@
-import { defineBlock } from '@fragments/core';
-
-export default defineBlock({
-  name: 'Order Summary',
-  description: 'Order details with subtotal, shipping, tax, total and shipping address',
-  category: 'ecommerce',
-  components: ['Card', 'Stack', 'Text', 'Separator', 'Button'],
-  tags: ['order', 'summary', 'ecommerce', 'receipt'],
-  code: `
-<Card>
-  <Card.Header>
-    <Card.Title>Order Summary</Card.Title>
-    <Card.Description>Order #12345</Card.Description>
-  </Card.Header>
-  <Card.Body>
-    <Stack gap="md">
-      <Stack gap="sm">
-        <Stack direction="row" justify="between">
-          <Text color="tertiary">Subtotal</Text>
-          <Text>$498.00</Text>
-        </Stack>
-        <Stack direction="row" justify="between">
-          <Text color="tertiary">Shipping</Text>
-          <Text>$9.99</Text>
-        </Stack>
-        <Stack direction="row" justify="between">
-          <Text color="tertiary">Tax</Text>
-          <Text>$44.82</Text>
-        </Stack>
-      </Stack>
-      <Separator />
-      <Stack direction="row" justify="between">
-        <Text weight="semibold">Total</Text>
-        <Text size="lg" weight="semibold">$552.81</Text>
-      </Stack>
-      <Separator />
-      <Stack gap="xs">
-        <Text size="sm" weight="semibold">Shipping Address</Text>
-        <Text size="sm" color="tertiary">John Doe</Text>
-        <Text size="sm" color="tertiary">123 Main St, San Francisco, CA 94102</Text>
-      </Stack>
-    </Stack>
-  </Card.Body>
-  <Card.Footer>
-    <Stack gap="sm" style={{ width: '100%' }}>
-      <Button variant="primary" fullWidth>Confirm Order</Button>
-      <Button variant="ghost" fullWidth>Continue Shopping</Button>
-    </Stack>
-  </Card.Footer>
-</Card>
-`.trim(),
-});

package/src/blocks/ProfileEditForm.block.ts

@@ -1,51 +0,0 @@
-import { defineBlock } from '@fragments/core';
-
-export default defineBlock({
-  name: 'Profile Edit Form',
-  description: 'User profile editor with avatar, name, email and bio fields',
-  category: 'settings',
-  components: ['Card', 'Stack', 'Avatar', 'Button', 'Text', 'Input', 'Textarea', 'Separator'],
-  tags: ['profile', 'edit', 'form', 'settings', 'avatar'],
-  code: `
-<Card variant="elevated">
-  <Card.Header>
-    <Card.Title>Edit Profile</Card.Title>
-    <Card.Description>Update your personal information</Card.Description>
-  </Card.Header>
-  <Card.Body>
-    <Stack gap="lg">
-      <Stack direction="row" gap="md" align="center">
-        <Avatar size="xl" initials="JD" />
-        <Stack gap="xs">
-          <Button variant="secondary" size="sm">Change Photo</Button>
-          <Text size="sm" color="tertiary">JPG, PNG or GIF. Max 2MB.</Text>
-        </Stack>
-      </Stack>
-
-      <Separator />
-
-      <Stack gap="md">
-        <Stack direction={{ base: 'column', sm: 'row' }} gap="md">
-          <Input label="First Name" defaultValue="Jane" style={{ flex: 1 }} />
-          <Input label="Last Name" defaultValue="Doe" style={{ flex: 1 }} />
-        </Stack>
-        <Input label="Email" type="email" defaultValue="jane@example.com" />
-        <Textarea
-          label="Bio"
-          placeholder="Tell us about yourself..."
-          defaultValue="Product designer passionate about creating intuitive user experiences."
-          rows={3}
-        />
-      </Stack>
-
-      <Separator />
-
-      <Stack direction="row" gap="sm" justify="end">
-        <Button variant="secondary">Cancel</Button>
-        <Button variant="primary">Save Changes</Button>
-      </Stack>
-    </Stack>
-  </Card.Body>
-</Card>
-`.trim(),
-});

package/src/blocks/SearchResults.block.ts

@@ -1,39 +0,0 @@
-import { defineBlock } from '@fragments/core';
-
-export default defineBlock({
-  name: 'Search Results',
-  description: 'List of search results with categories and badges',
-  category: 'dashboard',
-  components: ['Card', 'Stack', 'Text', 'Badge', 'Button'],
-  tags: ['search', 'results', 'list', 'dashboard'],
-  code: `
-const results = [
-  { title: 'Getting Started Guide', category: 'Documentation', description: 'Learn how to set up and configure your project...' },
-  { title: 'Button Component', category: 'Components', description: 'A versatile button component with multiple variants...' },
-  { title: 'Theming System', category: 'Guides', description: 'Customize colors, typography, and spacing...' },
-];
-
-<Card>
-  <Card.Header>
-    <Stack direction="row" justify="between" align="center">
-      <Card.Title>Search Results</Card.Title>
-      <Badge>3 results</Badge>
-    </Stack>
-  </Card.Header>
-  <Card.Body>
-    <Stack gap="md">
-      {results.map((result, index) => (
-        <Stack key={index} gap="sm" style={{ paddingBottom: index < results.length - 1 ? 'var(--fui-space-4)' : 0, borderBottom: index < results.length - 1 ? '1px solid var(--fui-border-default)' : 'none' }}>
-          <Stack direction="row" gap="sm" align="center">
-            <Text weight="semibold">{result.title}</Text>
-            <Badge variant="outline">{result.category}</Badge>
-          </Stack>
-          <Text size="sm" color="tertiary">{result.description}</Text>
-          <Button variant="ghost" size="sm">View details</Button>
-        </Stack>
-      ))}
-    </Stack>
-  </Card.Body>
-</Card>
-`.trim(),
-});

package/src/blocks/SettingsPage.block.ts

@@ -1,58 +0,0 @@
-import { defineBlock } from '@fragments/core';
-
-export default defineBlock({
-  name: 'Settings Page',
-  description: 'Settings page with labeled sections using cards, toggles, and a save action',
-  category: 'forms',
-  components: ['Grid', 'Card', 'Toggle', 'Input', 'Select', 'Separator', 'Button'],
-  tags: ['settings', 'preferences', 'form', 'toggle', 'layout'],
-  code: `
-<Grid columns={1} gap="lg">
-  <Card>
-    <Card.Header>
-      <Card.Title>Profile</Card.Title>
-      <Card.Description>Your public profile information</Card.Description>
-    </Card.Header>
-    <Card.Body>
-      <Grid columns={2} gap="md">
-        <Input label="Display Name" defaultValue={user.name} />
-        <Input label="Email" type="email" defaultValue={user.email} />
-        <Grid.Item colSpan="full">
-          <Input label="Website" type="url" defaultValue={user.website} />
-        </Grid.Item>
-      </Grid>
-    </Card.Body>
-  </Card>
-
-  <Card>
-    <Card.Header>
-      <Card.Title>Notifications</Card.Title>
-      <Card.Description>Choose what you get notified about</Card.Description>
-    </Card.Header>
-    <Card.Body>
-      <Grid columns={1} gap="sm">
-        <Toggle label="Email notifications" checked={prefs.emailNotifs} onChange={onToggle('emailNotifs')} />
-        <Toggle label="Push notifications" checked={prefs.pushNotifs} onChange={onToggle('pushNotifs')} />
-        <Toggle label="Weekly digest" checked={prefs.digest} onChange={onToggle('digest')} />
-      </Grid>
-    </Card.Body>
-  </Card>
-
-  <Card>
-    <Card.Header>
-      <Card.Title>Appearance</Card.Title>
-    </Card.Header>
-    <Card.Body>
-      <Select label="Theme" value={prefs.theme} onChange={onThemeChange}>
-        <Select.Item value="light">Light</Select.Item>
-        <Select.Item value="dark">Dark</Select.Item>
-        <Select.Item value="system">System</Select.Item>
-      </Select>
-    </Card.Body>
-  </Card>
-
-  <Separator />
-  <Button variant="primary" type="submit">Save Changes</Button>
-</Grid>
-`.trim(),
-});

package/src/blocks/StreamingMessage.block.ts

@@ -1,24 +0,0 @@
-import { defineBlock } from '@fragments/core';
-
-export default defineBlock({
-  name: 'Streaming Message',
-  description: 'AI message with streaming cursor animation showing real-time response',
-  category: 'ai',
-  components: ['Stack', 'Message'],
-  tags: ['streaming', 'message', 'ai', 'cursor', 'real-time'],
-  code: `
-<Stack gap="md" style={{ maxWidth: '600px' }}>
-  <Message role="user">
-    <Message.Content>
-      Write a haiku about programming
-    </Message.Content>
-  </Message>
-  <Message role="assistant" status="streaming">
-    <Message.Content>
-      Lines of code compile,
-      Bugs emerge from the shadows
-    </Message.Content>
-  </Message>
-</Stack>
-`.trim(),
-});

package/src/blocks/TestimonialCard.block.ts

@@ -1,27 +0,0 @@
-import { defineBlock } from '@fragments/core';
-
-export default defineBlock({
-  name: 'Testimonial Card',
-  description: 'Customer quote with avatar and attribution',
-  category: 'marketing',
-  components: ['Card', 'Stack', 'Text', 'Avatar'],
-  tags: ['testimonial', 'quote', 'review', 'marketing'],
-  code: `
-<Card>
-  <Card.Body>
-    <Stack gap="md">
-      <Text color="secondary" style={{ fontStyle: 'italic' }}>
-        "This component library has completely transformed how we build UIs. The design is clean, the API is intuitive, and the documentation is excellent."
-      </Text>
-      <Stack direction="row" gap="md" align="center">
-        <Avatar initials="SK" />
-        <Stack gap="xs">
-          <Text weight="semibold">Sarah Kim</Text>
-          <Text size="sm" color="tertiary">Engineering Lead at TechCorp</Text>
-        </Stack>
-      </Stack>
-    </Stack>
-  </Card.Body>
-</Card>
-`.trim(),
-});

package/src/blocks/UserProfileCard.block.ts

@@ -1,29 +0,0 @@
-import { defineBlock } from '@fragments/core';
-
-export default defineBlock({
-  name: 'User Profile Card',
-  description: 'Card displaying user info with avatar, role and actions',
-  category: 'dashboard',
-  components: ['Card', 'Stack', 'Text', 'Avatar', 'Badge', 'Button'],
-  tags: ['profile', 'user', 'card', 'avatar', 'dashboard'],
-  code: `
-<Card>
-  <Card.Body>
-    <Stack align="center" gap="md">
-      <Avatar size="xl" initials="JD" />
-      <Stack align="center" gap="xs">
-        <Text size="lg" weight="semibold">Jane Doe</Text>
-        <Text color="tertiary">Product Designer</Text>
-        <Badge variant="success">Pro Member</Badge>
-      </Stack>
-    </Stack>
-  </Card.Body>
-  <Card.Footer>
-    <Stack direction="row" gap="sm" justify="center">
-      <Button variant="secondary" size="sm">Message</Button>
-      <Button variant="primary" size="sm">Follow</Button>
-    </Stack>
-  </Card.Footer>
-</Card>
-`.trim(),
-});