@fragments-sdk/ui 0.6.4 → 0.7.0

package/src/blocks/SearchResults.block.ts

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,58 @@
+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/SettingsPanel.block.ts

@@ -0,0 +1,35 @@
+import { defineBlock } from '@fragments/core';
+
+export default defineBlock({
+  name: 'Settings Panel',
+  description: 'Settings panel with toggles and descriptions',
+  category: 'settings',
+  components: ['Card', 'Stack', 'Text', 'Toggle'],
+  tags: ['settings', 'toggles', '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>
+          <Toggle defaultChecked={setting.defaultChecked} />
+        </Stack>
+      ))}
+    </Stack>
+  </Card.Body>
+</Card>
+`.trim(),
+});

package/src/blocks/ShoppingCart.block.ts

@@ -0,0 +1,46 @@
+import { defineBlock } from '@fragments/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, index) => (
+        <Stack key={index} 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

@@ -0,0 +1,26 @@
+import { defineBlock } from '@fragments/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/StreamingMessage.block.ts

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,27 @@
+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/ThinkingStates.block.ts

@@ -0,0 +1,48 @@
+import { defineBlock } from '@fragments/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/UserProfileCard.block.ts

@@ -0,0 +1,29 @@
+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(),
+});

package/src/components/AppShell/AppShell.module.scss

@@ -205,9 +205,10 @@
   height: calc(100vh - var(--appshell-header-height, 56px));
   height: calc(100dvh - var(--appshell-header-height, 56px));
   width: var(--aside-width, 280px);
+  min-height: 0; // Allow shrinking in grid
   z-index: 30;
   background-color: var(--fui-bg-primary, $fui-bg-primary);
-  overflow-y: auto;
+  overflow: hidden;
 
   // Stack below main on mobile
   @include below-md {

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

@@ -96,11 +96,75 @@ export default defineSegment({
       description: 'Show border',
       default: 'false',
     },
+    borderTop: {
+      type: 'boolean',
+      description: 'Show top border only',
+      default: 'false',
+    },
+    borderBottom: {
+      type: 'boolean',
+      description: 'Show bottom border only',
+      default: 'false',
+    },
+    borderLeft: {
+      type: 'boolean',
+      description: 'Show left border only',
+      default: 'false',
+    },
+    borderRight: {
+      type: 'boolean',
+      description: 'Show right border only',
+      default: 'false',
+    },
+    borderColor: {
+      type: 'enum',
+      description: 'Border color variant (requires border or directional border)',
+      values: ['default', 'strong', 'accent', 'danger'],
+    },
+    shadow: {
+      type: 'enum',
+      description: 'Box shadow',
+      values: ['sm', 'md', 'lg', 'none'],
+    },
+    overflow: {
+      type: 'enum',
+      description: 'Overflow behavior',
+      values: ['hidden', 'auto', 'scroll', 'visible'],
+    },
+    color: {
+      type: 'enum',
+      description: 'Text color',
+      values: ['primary', 'secondary', 'tertiary', 'accent', 'inverse'],
+    },
     display: {
       type: 'enum',
       description: 'Display type',
       values: ['block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'none'],
     },
+    width: {
+      type: 'custom',
+      description: 'Width (CSS value, e.g. "100%", "300px", or number for px)',
+    },
+    minWidth: {
+      type: 'custom',
+      description: 'Min width',
+    },
+    maxWidth: {
+      type: 'custom',
+      description: 'Max width',
+    },
+    height: {
+      type: 'custom',
+      description: 'Height (CSS value)',
+    },
+    minHeight: {
+      type: 'custom',
+      description: 'Min height',
+    },
+    maxHeight: {
+      type: 'custom',
+      description: 'Max height',
+    },
   },
 
   relations: [
@@ -118,6 +182,13 @@ export default defineSegment({
       'background: none|primary|secondary|tertiary|elevated',
       'rounded: none|sm|md|lg|full - border radius',
       'border: boolean - show border',
+      'borderTop/borderBottom/borderLeft/borderRight: boolean - directional borders',
+      'borderColor: default|strong|accent|danger - border color variant',
+      'shadow: sm|md|lg|none - box shadow',
+      'overflow: hidden|auto|scroll|visible - overflow behavior',
+      'color: primary|secondary|tertiary|accent|inverse - text color',
+      'width/minWidth/maxWidth: string|number - sizing',
+      'height/minHeight/maxHeight: string|number - sizing',
     ],
     scenarioTags: [
       'layout.container',
@@ -164,5 +235,44 @@ export default defineSegment({
         </Box>
       ),
     },
+    {
+      name: 'Directional Borders',
+      description: 'Individual border sides',
+      render: () => (
+        <Box padding="md" borderTop borderBottom>
+          Top and bottom borders only
+        </Box>
+      ),
+    },
+    {
+      name: 'With Shadow',
+      description: 'Box with shadow elevation',
+      render: () => (
+        <Box padding="lg" rounded="md" shadow="md" background="primary">
+          Elevated content with shadow
+        </Box>
+      ),
+    },
+    {
+      name: 'Overflow Hidden',
+      description: 'Content overflow clipped',
+      render: () => (
+        <Box padding="md" overflow="hidden" border rounded="md" style={{ maxHeight: '60px' }}>
+          This box clips overflowing content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Box>
+      ),
+    },
+    {
+      name: 'Text Colors',
+      description: 'Text color variants',
+      render: () => (
+        <Box padding="md" display="flex" style={{ gap: '16px' }}>
+          <Box color="primary">Primary</Box>
+          <Box color="secondary">Secondary</Box>
+          <Box color="tertiary">Tertiary</Box>
+          <Box color="accent">Accent</Box>
+        </Box>
+      ),
+    },
   ],
 });

package/src/components/Box/Box.module.scss

@@ -74,6 +74,45 @@
   border: 1px solid var(--fui-border, $fui-border);
 }
 
+// Directional borders
+.borderTop {
+  border-top: 1px solid var(--fui-border, $fui-border);
+}
+.borderBottom {
+  border-bottom: 1px solid var(--fui-border, $fui-border);
+}
+.borderLeft {
+  border-left: 1px solid var(--fui-border, $fui-border);
+}
+.borderRight {
+  border-right: 1px solid var(--fui-border, $fui-border);
+}
+
+// Border color
+.borderColor-default { border-color: var(--fui-border-default, $fui-border-default); }
+.borderColor-strong { border-color: var(--fui-border-strong, $fui-border-strong); }
+.borderColor-accent { border-color: var(--fui-color-accent, $fui-color-accent); }
+.borderColor-danger { border-color: var(--fui-color-danger, $fui-color-danger); }
+
+// Shadow
+.shadow-sm { box-shadow: var(--fui-shadow-sm, $fui-shadow-sm); }
+.shadow-md { box-shadow: var(--fui-shadow-md, $fui-shadow-md); }
+.shadow-lg { box-shadow: var(--fui-shadow-lg, $fui-shadow-lg); }
+.shadow-none { box-shadow: none; }
+
+// Overflow
+.overflow-hidden { overflow: hidden; }
+.overflow-auto { overflow: auto; }
+.overflow-scroll { overflow: scroll; }
+.overflow-visible { overflow: visible; }
+
+// Text color
+.color-primary { color: var(--fui-text-primary, $fui-text-primary); }
+.color-secondary { color: var(--fui-text-secondary, $fui-text-secondary); }
+.color-tertiary { color: var(--fui-text-tertiary, $fui-text-tertiary); }
+.color-accent { color: var(--fui-color-accent, $fui-color-accent); }
+.color-inverse { color: var(--fui-text-inverse, $fui-text-inverse); }
+
 // Display
 .display-block { display: block; }
 .display-inline { display: inline; }

package/src/components/Box/index.tsx

@@ -24,14 +24,47 @@ export interface BoxProps {
   rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
   /** Border */
   border?: boolean;
+  /** Top border */
+  borderTop?: boolean;
+  /** Bottom border */
+  borderBottom?: boolean;
+  /** Left border */
+  borderLeft?: boolean;
+  /** Right border */
+  borderRight?: boolean;
+  /** Border color variant */
+  borderColor?: 'default' | 'strong' | 'accent' | 'danger';
+  /** Box shadow */
+  shadow?: 'sm' | 'md' | 'lg' | 'none';
+  /** Overflow behavior */
+  overflow?: 'hidden' | 'auto' | 'scroll' | 'visible';
+  /** Text color */
+  color?: 'primary' | 'secondary' | 'tertiary' | 'accent' | 'inverse';
   /** Display type */
   display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';
+  /** Width (CSS value, e.g. "100%", "300px", 200) */
+  width?: string | number;
+  /** Min width */
+  minWidth?: string | number;
+  /** Max width */
+  maxWidth?: string | number;
+  /** Height (CSS value, e.g. "100%", "300px", 200) */
+  height?: string | number;
+  /** Min height */
+  minHeight?: string | number;
+  /** Max height */
+  maxHeight?: string | number;
   /** Additional class name */
   className?: string;
   /** Inline styles */
   style?: React.CSSProperties;
 }
 
+/** Convert string | number to CSS value */
+function toCss(value: string | number): string {
+  return typeof value === 'number' ? `${value}px` : value;
+}
+
 export const Box = React.forwardRef<HTMLElement, BoxProps>(
   function Box(
     {
@@ -46,7 +79,21 @@ export const Box = React.forwardRef<HTMLElement, BoxProps>(
       background,
       rounded,
       border,
+      borderTop,
+      borderBottom,
+      borderLeft,
+      borderRight,
+      borderColor,
+      shadow,
+      overflow,
+      color,
       display,
+      width,
+      minWidth,
+      maxWidth,
+      height,
+      minHeight,
+      maxHeight,
       className,
       style,
     },
@@ -63,14 +110,34 @@ export const Box = React.forwardRef<HTMLElement, BoxProps>(
       background && styles[`bg-${background}`],
       rounded && styles[`rounded-${rounded}`],
       border && styles.border,
+      borderTop && styles.borderTop,
+      borderBottom && styles.borderBottom,
+      borderLeft && styles.borderLeft,
+      borderRight && styles.borderRight,
+      borderColor && styles[`borderColor-${borderColor}`],
+      shadow && styles[`shadow-${shadow}`],
+      overflow && styles[`overflow-${overflow}`],
+      color && styles[`color-${color}`],
       display && styles[`display-${display}`],
       className,
     ]
       .filter(Boolean)
       .join(' ');
 
+    // Build sizing styles only when props are provided
+    const sizingStyle: React.CSSProperties = {};
+    if (width != null) sizingStyle.width = toCss(width);
+    if (minWidth != null) sizingStyle.minWidth = toCss(minWidth);
+    if (maxWidth != null) sizingStyle.maxWidth = toCss(maxWidth);
+    if (height != null) sizingStyle.height = toCss(height);
+    if (minHeight != null) sizingStyle.minHeight = toCss(minHeight);
+    if (maxHeight != null) sizingStyle.maxHeight = toCss(maxHeight);
+
+    const hasSizing = Object.keys(sizingStyle).length > 0;
+    const mergedStyle = hasSizing ? { ...sizingStyle, ...style } : style;
+
     return (
-      <Component ref={ref as React.Ref<never>} className={classes} style={style}>
+      <Component ref={ref as React.Ref<never>} className={classes} style={mergedStyle}>
         {children}
       </Component>
     );