@usefragments/ui 1.0.0

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

@@ -0,0 +1,126 @@
+@use '../../tokens/variables' as *;
+
+.box {
+  box-sizing: border-box;
+}
+
+// Spacing scale (canonical, shared with Stack/Grid/BentoGrid/Card/List):
+// xs=space-1(7px) sm=space-2(14) md=space-3(21) lg=space-4(28) xl=space-6(42)
+
+// Padding
+.p-none { padding: 0; }
+.p-xs { padding: var(--fui-space-1, $fui-space-1); }
+.p-sm { padding: var(--fui-space-2, $fui-space-2); }
+.p-md { padding: var(--fui-space-3, $fui-space-3); }
+.p-lg { padding: var(--fui-space-4, $fui-space-4); }
+.p-xl { padding: var(--fui-space-6, $fui-space-6); }
+
+// Padding X
+.px-none { padding-left: 0; padding-right: 0; }
+.px-xs { padding-left: var(--fui-space-1, $fui-space-1); padding-right: var(--fui-space-1, $fui-space-1); }
+.px-sm { padding-left: var(--fui-space-2, $fui-space-2); padding-right: var(--fui-space-2, $fui-space-2); }
+.px-md { padding-left: var(--fui-space-3, $fui-space-3); padding-right: var(--fui-space-3, $fui-space-3); }
+.px-lg { padding-left: var(--fui-space-4, $fui-space-4); padding-right: var(--fui-space-4, $fui-space-4); }
+.px-xl { padding-left: var(--fui-space-6, $fui-space-6); padding-right: var(--fui-space-6, $fui-space-6); }
+
+// Padding Y
+.py-none { padding-top: 0; padding-bottom: 0; }
+.py-xs { padding-top: var(--fui-space-1, $fui-space-1); padding-bottom: var(--fui-space-1, $fui-space-1); }
+.py-sm { padding-top: var(--fui-space-2, $fui-space-2); padding-bottom: var(--fui-space-2, $fui-space-2); }
+.py-md { padding-top: var(--fui-space-3, $fui-space-3); padding-bottom: var(--fui-space-3, $fui-space-3); }
+.py-lg { padding-top: var(--fui-space-4, $fui-space-4); padding-bottom: var(--fui-space-4, $fui-space-4); }
+.py-xl { padding-top: var(--fui-space-6, $fui-space-6); padding-bottom: var(--fui-space-6, $fui-space-6); }
+
+// Margin
+.m-none { margin: 0; }
+.m-xs { margin: var(--fui-space-1, $fui-space-1); }
+.m-sm { margin: var(--fui-space-2, $fui-space-2); }
+.m-md { margin: var(--fui-space-3, $fui-space-3); }
+.m-lg { margin: var(--fui-space-4, $fui-space-4); }
+.m-xl { margin: var(--fui-space-6, $fui-space-6); }
+.m-auto { margin: auto; }
+
+// Margin X
+.mx-none { margin-left: 0; margin-right: 0; }
+.mx-xs { margin-left: var(--fui-space-1, $fui-space-1); margin-right: var(--fui-space-1, $fui-space-1); }
+.mx-sm { margin-left: var(--fui-space-2, $fui-space-2); margin-right: var(--fui-space-2, $fui-space-2); }
+.mx-md { margin-left: var(--fui-space-3, $fui-space-3); margin-right: var(--fui-space-3, $fui-space-3); }
+.mx-lg { margin-left: var(--fui-space-4, $fui-space-4); margin-right: var(--fui-space-4, $fui-space-4); }
+.mx-xl { margin-left: var(--fui-space-6, $fui-space-6); margin-right: var(--fui-space-6, $fui-space-6); }
+.mx-auto { margin-left: auto; margin-right: auto; }
+
+// Margin Y
+.my-none { margin-top: 0; margin-bottom: 0; }
+.my-xs { margin-top: var(--fui-space-1, $fui-space-1); margin-bottom: var(--fui-space-1, $fui-space-1); }
+.my-sm { margin-top: var(--fui-space-2, $fui-space-2); margin-bottom: var(--fui-space-2, $fui-space-2); }
+.my-md { margin-top: var(--fui-space-3, $fui-space-3); margin-bottom: var(--fui-space-3, $fui-space-3); }
+.my-lg { margin-top: var(--fui-space-4, $fui-space-4); margin-bottom: var(--fui-space-4, $fui-space-4); }
+.my-xl { margin-top: var(--fui-space-6, $fui-space-6); margin-bottom: var(--fui-space-6, $fui-space-6); }
+.my-auto { margin-top: auto; margin-bottom: auto; }
+
+// Background
+.bg-none { background-color: transparent; }
+.bg-primary { background-color: var(--fui-bg-primary, $fui-bg-primary); }
+.bg-secondary { background-color: var(--fui-bg-secondary, $fui-bg-secondary); }
+.bg-tertiary { background-color: var(--fui-bg-tertiary, $fui-bg-tertiary); }
+.bg-elevated { background-color: var(--fui-bg-elevated, $fui-bg-elevated); }
+
+// Border radius
+.rounded-none { border-radius: 0; }
+.rounded-sm { border-radius: var(--fui-radius-sm, $fui-radius-sm); }
+.rounded-md { border-radius: var(--fui-radius-md, $fui-radius-md); }
+.rounded-lg { border-radius: var(--fui-radius-lg, $fui-radius-lg); }
+.rounded-full { border-radius: var(--fui-radius-full, $fui-radius-full); }
+
+// Border
+.border {
+  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-border, $fui-color-danger-border); }
+
+// 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; }
+.display-inline-block { display: inline-block; }
+.display-flex { display: flex; }
+.display-inline-flex { display: inline-flex; }
+.display-grid { display: grid; }
+.display-none { display: none; }

package/src/components/Box/Box.stories.tsx

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Box } from '.';
+
+/**
+ * Box is the primitive layout container for applying spacing, backgrounds, and
+ * borders. It renders any semantic element via the `as` prop and is the
+ * building block for custom layouts not covered by Stack or Grid.
+ */
+const meta = {
+  title: 'Layout/Box',
+  component: Box,
+  tags: ['autodocs', 'canonical'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Primitive layout container for applying spacing, backgrounds, and borders.',
+      },
+    },
+  },
+  argTypes: {
+    as: {
+      control: 'select',
+      options: ['div', 'section', 'article', 'aside', 'main', 'header', 'footer', 'nav', 'span'],
+      description: 'HTML element to render',
+    },
+    padding: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Padding on all sides',
+    },
+    paddingX: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Horizontal padding',
+    },
+    paddingY: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Vertical padding',
+    },
+    margin: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'auto'],
+      description: 'Margin on all sides',
+    },
+    marginX: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'auto'],
+      description: 'Horizontal margin',
+    },
+    marginY: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'auto'],
+      description: 'Vertical margin',
+    },
+    background: {
+      control: 'select',
+      options: ['none', 'primary', 'secondary', 'tertiary', 'elevated'],
+      description: 'Background color',
+    },
+    rounded: {
+      control: 'select',
+      options: ['none', 'sm', 'md', 'lg', 'full'],
+      description: 'Border radius',
+    },
+    borderColor: {
+      control: 'select',
+      options: ['default', 'strong', 'accent', 'danger'],
+      description: 'Border color variant',
+    },
+    shadow: {
+      control: 'select',
+      options: ['none', 'sm', 'md', 'lg'],
+      description: 'Box shadow',
+    },
+    overflow: {
+      control: 'select',
+      options: ['hidden', 'auto', 'scroll', 'visible'],
+      description: 'Overflow behavior',
+    },
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary', 'accent', 'inverse'],
+      description: 'Text color',
+    },
+    display: {
+      control: 'select',
+      options: ['none', 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid'],
+      description: 'Display type',
+    },
+    border: { control: 'boolean', description: 'Show border' },
+    borderTop: { control: 'boolean', description: 'Show top border only' },
+    borderBottom: { control: 'boolean', description: 'Show bottom border only' },
+    borderLeft: { control: 'boolean', description: 'Show left border only' },
+    borderRight: { control: 'boolean', description: 'Show right border only' },
+  },
+  args: {
+    padding: 'md',
+    background: 'secondary',
+    rounded: 'md',
+    children: 'Content with padding and background',
+  },
+} satisfies Meta<typeof Box>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    padding: 'md',
+    background: 'secondary',
+    rounded: 'md',
+    children: 'Content with padding and background',
+  },
+};
+
+export const Bordered: Story = {
+  args: { padding: 'lg', border: true, rounded: 'md', children: 'Bordered content area' },
+};
+
+export const Elevated: Story = {
+  args: {
+    padding: 'lg',
+    rounded: 'md',
+    shadow: 'md',
+    background: 'primary',
+    children: 'Elevated content with shadow',
+  },
+};
+
+export const DirectionalPadding: Story = {
+  args: {
+    paddingX: 'xl',
+    paddingY: 'sm',
+    background: 'tertiary',
+    rounded: 'sm',
+    children: 'Wide horizontal padding, short vertical',
+  },
+};
+
+export const DirectionalBorders: Story = {
+  args: {
+    padding: 'md',
+    borderTop: true,
+    borderBottom: true,
+    children: 'Top and bottom borders only',
+  },
+};

package/src/components/Box/index.tsx

@@ -0,0 +1,154 @@
+import * as React from 'react';
+import styles from './Box.module.scss';
+
+export interface BoxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'> {
+  children?: React.ReactNode;
+  /** HTML element to render */
+  as?: 'div' | 'section' | 'article' | 'aside' | 'main' | 'header' | 'footer' | 'nav' | 'span';
+  /** Padding on all sides */
+  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Horizontal padding (overrides padding) */
+  paddingX?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Vertical padding (overrides padding) */
+  paddingY?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Margin on all sides */
+  margin?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
+  /** Horizontal margin (overrides margin) */
+  marginX?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
+  /** Vertical margin (overrides margin) */
+  marginY?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
+  /** Background color */
+  background?: 'none' | 'primary' | 'secondary' | 'tertiary' | 'elevated';
+  /** Border radius */
+  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;
+}
+
+const BoxRoot = React.forwardRef<HTMLElement, BoxProps>(
+  function Box(
+    {
+      children,
+      as: Component = 'div',
+      padding,
+      paddingX,
+      paddingY,
+      margin,
+      marginX,
+      marginY,
+      background,
+      rounded,
+      border,
+      borderTop,
+      borderBottom,
+      borderLeft,
+      borderRight,
+      borderColor,
+      shadow,
+      overflow,
+      color,
+      display,
+      width,
+      minWidth,
+      maxWidth,
+      height,
+      minHeight,
+      maxHeight,
+      className,
+      style,
+      ...htmlProps
+    },
+    ref
+  ) {
+    const classes = [
+      styles.box,
+      padding && styles[`p-${padding}`],
+      paddingX && styles[`px-${paddingX}`],
+      paddingY && styles[`py-${paddingY}`],
+      margin && styles[`m-${margin}`],
+      marginX && styles[`mx-${marginX}`],
+      marginY && styles[`my-${marginY}`],
+      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>}
+        {...htmlProps}
+        className={classes}
+        style={mergedStyle}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+export const Box = Object.assign(BoxRoot, {
+  Root: BoxRoot,
+});

package/src/components/Breadcrumbs/Breadcrumbs.contract.json

@@ -0,0 +1,143 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "Breadcrumbs",
+  "description": "Breadcrumb navigation showing the current page location within a hierarchy. Helps users navigate back through parent pages.",
+  "category": "navigation",
+  "tags": [
+    "breadcrumbs",
+    "navigation",
+    "hierarchy",
+    "wayfinding"
+  ],
+  "status": "stable",
+  "sourcePath": "src/components/Breadcrumbs/index.tsx",
+  "exportName": "Breadcrumbs",
+  "propsSummary": [
+    "children: node (required)",
+    "separator: node (default: /)",
+    "maxItems: number",
+    "label: string (default: Breadcrumb)"
+  ],
+  "props": {
+    "children": {
+      "type": "node",
+      "description": "Breadcrumb items (use Breadcrumbs.Item)",
+      "required": true
+    },
+    "separator": {
+      "type": "node",
+      "description": "Custom separator between items",
+      "default": "/",
+      "required": false
+    },
+    "maxItems": {
+      "type": "number",
+      "description": "Maximum visible items before collapsing middle items with ellipsis",
+      "required": false
+    },
+    "label": {
+      "type": "string",
+      "description": "Custom aria-label for the breadcrumb nav landmark",
+      "default": "Breadcrumb",
+      "required": false
+    }
+  },
+  "usage": {
+    "when": [
+      "Showing hierarchical page location (e.g., Home > Category > Product)",
+      "Allowing quick navigation to parent pages",
+      "Multi-level content structures like documentation or e-commerce"
+    ],
+    "whenNot": [
+      "Flat navigation with no hierarchy (use Tabs or Header nav)",
+      "Step-by-step wizards (use Stepper)",
+      "Primary navigation (use Sidebar or Header)"
+    ],
+    "guidelines": [
+      "Always include the current page as the last, non-linked item",
+      "Keep labels short and descriptive",
+      "Use maxItems to collapse long paths, keeping first and last visible",
+      "The separator defaults to \"/\" but can be customized",
+      "Use the label prop to customize the nav landmark name (defaults to \"Breadcrumb\")"
+    ],
+    "accessibility": [
+      "Uses <nav aria-label=\"Breadcrumb\"> for landmark navigation",
+      "Current page is marked with aria-current=\"page\"",
+      "Separators are hidden from screen readers with aria-hidden",
+      "Ellipsis button has aria-label for collapsed items"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Default",
+      "description": "Basic breadcrumb navigation",
+      "code": "<Breadcrumbs>\n  <Breadcrumbs.Item href=\"#\">Home</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Products</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Category</Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Current Page</Breadcrumbs.Item>\n</Breadcrumbs>"
+    },
+    {
+      "name": "With Icons",
+      "description": "Breadcrumbs with icons on items",
+      "code": "<Breadcrumbs>\n  <Breadcrumbs.Item\n    href=\"#\"\n    icon={\n      <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\n        <path d=\"M8 1.25l-7 6v7.5c0 .138.112.25.25.25H5.5V10h5v5h4.25a.25.25 0 0 0 .25-.25v-7.5l-7-6z\" />\n      </svg>\n    }\n  >\n    Home\n  </Breadcrumbs.Item>\n  <Breadcrumbs.Item\n    href=\"#\"\n    icon={\n      <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\n        <path d=\"M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75z\" />\n      </svg>\n    }\n  >\n    Documents\n  </Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Report.pdf</Breadcrumbs.Item>\n</Breadcrumbs>"
+    },
+    {
+      "name": "Collapsed",
+      "description": "Long breadcrumb trail collapsed with ellipsis",
+      "code": "<Breadcrumbs maxItems={3}>\n  <Breadcrumbs.Item href=\"#\">Home</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Category</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Subcategory</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Section</Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Current Page</Breadcrumbs.Item>\n</Breadcrumbs>"
+    },
+    {
+      "name": "Custom Separator",
+      "description": "Breadcrumbs with a custom chevron separator",
+      "code": "<Breadcrumbs\n  separator={\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n      <path fillRule=\"evenodd\" d=\"M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06z\" />\n    </svg>\n  }\n>\n  <Breadcrumbs.Item href=\"#\">Home</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Settings</Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Profile</Breadcrumbs.Item>\n</Breadcrumbs>"
+    },
+    {
+      "name": "Custom Landmark Label",
+      "description": "Override the nav landmark label for screen readers",
+      "code": "<Breadcrumbs label=\"Documentation breadcrumbs\">\n  <Breadcrumbs.Item href=\"#\">Docs</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Components</Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Breadcrumbs</Breadcrumbs.Item>\n</Breadcrumbs>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "Tabs",
+      "relationship": "alternative",
+      "note": "Use Tabs for flat, non-hierarchical navigation"
+    },
+    {
+      "component": "Sidebar",
+      "relationship": "complementary",
+      "note": "Breadcrumbs complement sidebar navigation for deep hierarchies"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "separator: ReactNode - custom separator (default \"/\")",
+      "maxItems: number - collapse middle items with ellipsis",
+      "label: string - nav landmark label (default \"Breadcrumb\")",
+      "Breadcrumbs.Item href: string - makes item a link",
+      "Breadcrumbs.Item current: boolean - marks current page",
+      "Breadcrumbs.Item icon: ReactNode - icon before label"
+    ],
+    "a11yRules": [
+      "A11Y_NAV_LANDMARK",
+      "A11Y_ARIA_CURRENT",
+      "A11Y_TARGET_SIZE_MIN"
+    ]
+  },
+  "ai": {
+    "compositionPattern": "compound",
+    "subComponents": [
+      "Item",
+      "Separator"
+    ],
+    "requiredChildren": [
+      "Item"
+    ],
+    "commonPatterns": [
+      "<Breadcrumbs><Breadcrumbs.Item href=\"/\">Home</Breadcrumbs.Item><Breadcrumbs.Item href=\"/products\">Products</Breadcrumbs.Item><Breadcrumbs.Item current>Widget</Breadcrumbs.Item></Breadcrumbs>"
+    ]
+  },
+  "provenance": {
+    "source": "migrated",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-03-13T23:18:51.312Z"
+  }
+}