ui-lab-registry 0.3.1 → 0.3.2

package/dist/patterns/data/data-table-row/metadata.json

@@ -15,19 +15,19 @@
     ],
     "complexity": "simple",
     "notes": "hover:bg-background-900 for interactive rows. group class on the row enables child opacity transitions for action buttons that appear on hover.",
-    "code": "import { Badge } from 'ui-lab-components'\n\nconst statusVariant = {\n  active: 'success',\n  pending: 'warning',\n  failed: 'danger',\n  inactive: 'default',\n} as const\n\nfunction DataTableRow({ primary, secondary, status, timestamp }) {\n  return (\n    <div className=\"flex items-center gap-4 px-4 py-3 border-b border-background-800 hover:bg-background-900 transition-colors\">\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{primary}</p>\n        <p className=\"text-xs text-foreground-400 truncate\">{secondary}</p>\n      </div>\n      <div className=\"flex items-center gap-2 flex-shrink-0\">\n        <span className=\"text-xs text-foreground-400\">{timestamp}</span>\n        <Badge size=\"sm\" variant={statusVariant[status] ?? 'default'}>{status}</Badge>\n      </div>\n    </div>\n  )\n}",
+    "code": "import { Badge } from 'ui-lab-components'\n\nconst statusVariant = {\n  active: 'success',\n  pending: 'warning',\n  failed: 'danger',\n  inactive: 'default',\n} as const\n\nfunction DataTableRow({ primary, secondary, status, timestamp }) {\n  return (\n    <div className=\"flex items-center gap-4 px-4 py-3 border-b border-background-800 hover:bg-background-900 transition-colors\">\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{primary}</p>\n        <p className=\"text-sm text-foreground-400 truncate\">{secondary}</p>\n      </div>\n      <div className=\"flex items-center gap-2 flex-shrink-0\">\n        <span className=\"text-sm text-foreground-400\">{timestamp}</span>\n        <Badge size=\"sm\" variant={statusVariant[status] ?? 'default'}>{status}</Badge>\n      </div>\n    </div>\n  )\n}",
     "variations": [
         {
             "id": "data-table-row-selectable",
             "name": "Selectable",
             "description": "Leading Checkbox for multi-select operations.",
-            "code": "import { Badge, Checkbox } from 'ui-lab-components'\n\nconst statusVariant = {\n  active: 'success',\n  pending: 'warning',\n  failed: 'danger',\n  inactive: 'default',\n} as const\n\nfunction DataTableRowSelectable({ primary, secondary, status, timestamp, isSelected, onChange }) {\n  return (\n    <div className={`flex items-center gap-4 px-4 py-3 border-b border-background-800 transition-colors ${isSelected ? 'bg-background-900' : 'hover:bg-background-900'}`}>\n      <Checkbox isSelected={isSelected} onChange={onChange} aria-label={`Select ${primary}`} />\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{primary}</p>\n        <p className=\"text-xs text-foreground-400 truncate\">{secondary}</p>\n      </div>\n      <div className=\"flex items-center gap-2 flex-shrink-0\">\n        <span className=\"text-xs text-foreground-400\">{timestamp}</span>\n        <Badge size=\"sm\" variant={statusVariant[status] ?? 'default'}>{status}</Badge>\n      </div>\n    </div>\n  )\n}"
+            "code": "import { Badge, Checkbox } from 'ui-lab-components'\n\nconst statusVariant = {\n  active: 'success',\n  pending: 'warning',\n  failed: 'danger',\n  inactive: 'default',\n} as const\n\nfunction DataTableRowSelectable({ primary, secondary, status, timestamp, isSelected, onChange }) {\n  return (\n    <div className={`flex items-center gap-4 px-4 py-3 border-b border-background-800 transition-colors ${isSelected ? 'bg-background-900' : 'hover:bg-background-900'}`}>\n      <Checkbox isSelected={isSelected} onChange={onChange} aria-label={`Select ${primary}`} />\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{primary}</p>\n        <p className=\"text-sm text-foreground-400 truncate\">{secondary}</p>\n      </div>\n      <div className=\"flex items-center gap-2 flex-shrink-0\">\n        <span className=\"text-sm text-foreground-400\">{timestamp}</span>\n        <Badge size=\"sm\" variant={statusVariant[status] ?? 'default'}>{status}</Badge>\n      </div>\n    </div>\n  )\n}"
         },
         {
             "id": "data-table-row-expandable",
             "name": "Expandable",
             "description": "Trailing chevron button that toggles an expanded detail area below the row.",
-            "code": "import { Badge, Button } from 'ui-lab-components'\nimport { useState } from 'react'\n\nconst statusVariant = {\n  active: 'success',\n  pending: 'warning',\n  failed: 'danger',\n  inactive: 'default',\n} as const\n\nfunction DataTableRowExpandable({ primary, secondary, status, timestamp, details }) {\n  const [expanded, setExpanded] = useState(false)\n  return (\n    <div className=\"border-b border-background-800\">\n      <div className=\"flex items-center gap-4 px-4 py-3 hover:bg-background-900 transition-colors\">\n        <div className=\"flex-1 min-w-0\">\n          <p className=\"text-sm font-medium text-foreground-200 truncate\">{primary}</p>\n          <p className=\"text-xs text-foreground-400 truncate\">{secondary}</p>\n        </div>\n        <div className=\"flex items-center gap-2 flex-shrink-0\">\n          <span className=\"text-xs text-foreground-400\">{timestamp}</span>\n          <Badge size=\"sm\" variant={statusVariant[status] ?? 'default'}>{status}</Badge>\n          <Button variant=\"ghost\" size=\"sm\" onPress={() => setExpanded(!expanded)} aria-label=\"Toggle details\">\n            <svg width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" className={`transition-transform ${expanded ? 'rotate-180' : ''}`}>\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n            </svg>\n          </Button>\n        </div>\n      </div>\n      {expanded && (\n        <div className=\"px-4 pb-3 text-xs text-foreground-400\">{details}</div>\n      )}\n    </div>\n  )\n}"
+            "code": "import { Badge, Button } from 'ui-lab-components'\nimport { useState } from 'react'\n\nconst statusVariant = {\n  active: 'success',\n  pending: 'warning',\n  failed: 'danger',\n  inactive: 'default',\n} as const\n\nfunction DataTableRowExpandable({ primary, secondary, status, timestamp, details }) {\n  const [expanded, setExpanded] = useState(false)\n  return (\n    <div className=\"border-b border-background-800\">\n      <div className=\"flex items-center gap-4 px-4 py-3 hover:bg-background-900 transition-colors\">\n        <div className=\"flex-1 min-w-0\">\n          <p className=\"text-sm font-medium text-foreground-200 truncate\">{primary}</p>\n          <p className=\"text-sm text-foreground-400 truncate\">{secondary}</p>\n        </div>\n        <div className=\"flex items-center gap-2 flex-shrink-0\">\n          <span className=\"text-sm text-foreground-400\">{timestamp}</span>\n          <Badge size=\"sm\" variant={statusVariant[status] ?? 'default'}>{status}</Badge>\n          <Button variant=\"ghost\" size=\"sm\" onPress={() => setExpanded(!expanded)} aria-label=\"Toggle details\">\n            <svg width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" className={`transition-transform ${expanded ? 'rotate-180' : ''}`}>\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n            </svg>\n          </Button>\n        </div>\n      </div>\n      {expanded && (\n        <div className=\"px-4 pb-3 text-sm text-foreground-400\">{details}</div>\n      )}\n    </div>\n  )\n}"
         }
     ]
 }

package/dist/patterns/data/data-table-row/variations/expandable/index.js

@@ -5,7 +5,7 @@ import { Badge, Button } from 'ui-lab-components';
 const statusVariant = { active: 'success', pending: 'warning', failed: 'danger', inactive: 'default' };
 function DataTableRowExpandable({ primary, secondary, status, timestamp, details }) {
     const [expanded, setExpanded] = useState(false);
-    return (_jsxs("div", { className: "border-b border-background-800", children: [_jsxs("div", { className: "flex items-center gap-4 px-4 py-3 hover:bg-background-900 transition-colors", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground-200 truncate", children: primary }), _jsx("p", { className: "text-xs text-foreground-400 truncate", children: secondary })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("span", { className: "text-xs text-foreground-400", children: timestamp }), _jsx(Badge, { size: "sm", variant: statusVariant[status] ?? 'default', children: status }), _jsx(Button, { variant: "ghost", size: "sm", onPress: () => setExpanded(!expanded), "aria-label": "Toggle details", children: _jsx("svg", { width: "14", height: "14", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", className: `transition-transform ${expanded ? 'rotate-180' : ''}`, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })] })] }), expanded && _jsx("div", { className: "px-4 pb-3 text-xs text-foreground-400", children: details })] }));
+    return (_jsxs("div", { className: "border-b border-background-800", children: [_jsxs("div", { className: "flex items-center gap-4 px-4 py-3 hover:bg-background-900 transition-colors", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground-200 truncate", children: primary }), _jsx("p", { className: "text-sm text-foreground-400 truncate", children: secondary })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("span", { className: "text-sm text-foreground-400", children: timestamp }), _jsx(Badge, { size: "sm", variant: statusVariant[status] ?? 'default', children: status }), _jsx(Button, { variant: "ghost", size: "sm", onPress: () => setExpanded(!expanded), "aria-label": "Toggle details", children: _jsx("svg", { width: "14", height: "14", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", className: `transition-transform ${expanded ? 'rotate-180' : ''}`, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })] })] }), expanded && _jsx("div", { className: "px-4 pb-3 text-sm text-foreground-400", children: details })] }));
 }
 export function DataTableRowExpandableDemo() {
     return (_jsxs("div", { className: "w-full max-w-lg", children: [_jsx(DataTableRowExpandable, { primary: "api-deploy-prod", secondary: "github-actions \u00B7 main", status: "active", timestamp: "2m ago", details: "Deployed to us-east-1. 3 instances updated. Build time: 42s." }), _jsx(DataTableRowExpandable, { primary: "run-integration-tests", secondary: "github-actions \u00B7 staging", status: "pending", timestamp: "14m ago", details: "Waiting for runner. Queue position: 3." })] }));

package/dist/patterns/data/data-table-row/variations/main/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge } from 'ui-lab-components';
 const statusVariant = { active: 'success', pending: 'warning', failed: 'danger', inactive: 'default' };
 function DataTableRow({ primary, secondary, status, timestamp }) {
-    return (_jsxs("div", { className: "flex items-center gap-4 px-4 py-3 border-b border-background-800 hover:bg-background-900 transition-colors", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground-200 truncate", children: primary }), _jsx("p", { className: "text-xs text-foreground-400 truncate", children: secondary })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("span", { className: "text-xs text-foreground-400", children: timestamp }), _jsx(Badge, { size: "sm", variant: statusVariant[status] ?? 'default', children: status })] })] }));
+    return (_jsxs("div", { className: "flex items-center gap-4 px-4 py-3 border-b border-background-800 hover:bg-background-900 transition-colors", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground-200 truncate", children: primary }), _jsx("p", { className: "text-sm text-foreground-400 truncate", children: secondary })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("span", { className: "text-sm text-foreground-400", children: timestamp }), _jsx(Badge, { size: "sm", variant: statusVariant[status] ?? 'default', children: status })] })] }));
 }
 export function DataTableRowDemo() {
     return (_jsxs("div", { className: "w-full max-w-lg", children: [_jsx(DataTableRow, { primary: "api-deploy-prod", secondary: "github-actions \u00B7 main", status: "active", timestamp: "2m ago" }), _jsx(DataTableRow, { primary: "run-integration-tests", secondary: "github-actions \u00B7 staging", status: "pending", timestamp: "14m ago" }), _jsx(DataTableRow, { primary: "seed-db-migration", secondary: "cli \u00B7 development", status: "failed", timestamp: "1h ago" }), _jsx(DataTableRow, { primary: "build-docker-image", secondary: "docker \u00B7 registry", status: "inactive", timestamp: "3h ago" })] }));

package/dist/patterns/data/data-table-row/variations/selectable/index.js

@@ -9,7 +9,7 @@ const ROWS = [
     { primary: 'seed-db-migration', secondary: 'cli · development', status: 'failed', timestamp: '1h ago' },
 ];
 function DataTableRowSelectable({ primary, secondary, status, timestamp, isSelected, onChange }) {
-    return (_jsxs("div", { className: `flex items-center gap-4 px-4 py-3 border-b border-background-800 transition-colors ${isSelected ? 'bg-background-900' : 'hover:bg-background-900'}`, children: [_jsx(Checkbox, { checked: isSelected, onChange: onChange, "aria-label": `Select ${primary}` }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground-200 truncate", children: primary }), _jsx("p", { className: "text-xs text-foreground-400 truncate", children: secondary })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("span", { className: "text-xs text-foreground-400", children: timestamp }), _jsx(Badge, { size: "sm", variant: statusVariant[status] ?? 'default', children: status })] })] }));
+    return (_jsxs("div", { className: `flex items-center gap-4 px-4 py-3 border-b border-background-800 transition-colors ${isSelected ? 'bg-background-900' : 'hover:bg-background-900'}`, children: [_jsx(Checkbox, { checked: isSelected, onChange: onChange, "aria-label": `Select ${primary}` }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground-200 truncate", children: primary }), _jsx("p", { className: "text-sm text-foreground-400 truncate", children: secondary })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("span", { className: "text-sm text-foreground-400", children: timestamp }), _jsx(Badge, { size: "sm", variant: statusVariant[status] ?? 'default', children: status })] })] }));
 }
 export function DataTableRowSelectableDemo() {
     const [selected, setSelected] = useState(new Set(['api-deploy-prod']));

package/dist/patterns/data/progress-metric/metadata.json

@@ -15,19 +15,19 @@
     ],
     "complexity": "simple",
     "notes": "Fixed-width label with flex-1 on the bar prevents layout shift when label text varies. Trailing value is right-aligned with a fixed width.",
-    "code": "import { Progress } from 'ui-lab-components'\n\nfunction ProgressMetric({ label, value, max = 100 }) {\n  const pct = Math.round((value / max) * 100)\n  return (\n    <div className=\"flex items-center gap-3\">\n      <span className=\"text-xs text-foreground-400 w-32 flex-shrink-0 truncate\">{label}</span>\n      <Progress value={value} maxValue={max} className=\"flex-1\" />\n      <span className=\"text-xs text-foreground-400 w-8 text-right flex-shrink-0 tabular-nums\">{pct}%</span>\n    </div>\n  )\n}",
+    "code": "import { Progress } from 'ui-lab-components'\n\nfunction ProgressMetric({ label, value, max = 100 }) {\n  const pct = Math.round((value / max) * 100)\n  return (\n    <div className=\"flex items-center gap-3\">\n      <span className=\"text-sm text-foreground-400 w-32 flex-shrink-0 truncate\">{label}</span>\n      <Progress value={value} maxValue={max} className=\"flex-1\" />\n      <span className=\"text-sm text-foreground-400 w-8 text-right flex-shrink-0 tabular-nums\">{pct}%</span>\n    </div>\n  )\n}",
     "variations": [
         {
             "id": "progress-metric-stacked",
             "name": "Stacked",
             "description": "Label above the bar, value below \u2014 for wider display areas where horizontal space is not constrained.",
-            "code": "import { Progress } from 'ui-lab-components'\n\nfunction ProgressMetricStacked({ label, value, max = 100 }) {\n  const pct = Math.round((value / max) * 100)\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-xs font-medium text-foreground-300\">{label}</span>\n        <span className=\"text-xs text-foreground-400 tabular-nums\">{pct}%</span>\n      </div>\n      <Progress value={value} maxValue={max} />\n    </div>\n  )\n}"
+            "code": "import { Progress } from 'ui-lab-components'\n\nfunction ProgressMetricStacked({ label, value, max = 100 }) {\n  const pct = Math.round((value / max) * 100)\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-sm font-medium text-foreground-300\">{label}</span>\n        <span className=\"text-sm text-foreground-400 tabular-nums\">{pct}%</span>\n      </div>\n      <Progress value={value} maxValue={max} />\n    </div>\n  )\n}"
         },
         {
             "id": "progress-metric-colored",
             "name": "Semantic Color",
             "description": "Bar color shifts to reflect semantic state \u2014 accent for normal, muted warning for high usage.",
-            "code": "import { Progress } from 'ui-lab-components'\n\nfunction ProgressMetricColored({ label, value, max = 100 }) {\n  const pct = Math.round((value / max) * 100)\n  const isHigh = pct >= 80\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-xs font-medium text-foreground-300\">{label}</span>\n        <span className={`text-xs tabular-nums ${isHigh ? 'text-foreground-200' : 'text-foreground-400'}`}>\n          {pct}%\n        </span>\n      </div>\n      <Progress\n        value={value}\n        maxValue={max}\n        className={isHigh ? 'text-foreground-300' : undefined}\n      />\n    </div>\n  )\n}"
+            "code": "import { Progress } from 'ui-lab-components'\n\nfunction ProgressMetricColored({ label, value, max = 100 }) {\n  const pct = Math.round((value / max) * 100)\n  const isHigh = pct >= 80\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-sm font-medium text-foreground-300\">{label}</span>\n        <span className={`text-sm tabular-nums ${isHigh ? 'text-foreground-200' : 'text-foreground-400'}`}>\n          {pct}%\n        </span>\n      </div>\n      <Progress\n        value={value}\n        maxValue={max}\n        className={isHigh ? 'text-foreground-300' : undefined}\n      />\n    </div>\n  )\n}"
         }
     ]
 }

package/dist/patterns/data/progress-metric/variations/colored/index.js

@@ -4,7 +4,7 @@ import { Progress } from 'ui-lab-components';
 function ProgressMetricColored({ label, value, max = 100 }) {
     const pct = Math.round((value / max) * 100);
     const isHigh = pct >= 80;
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-medium text-foreground-300", children: label }), _jsxs("span", { className: `text-xs tabular-nums ${isHigh ? 'text-foreground-200' : 'text-foreground-400'}`, children: [pct, "%"] })] }), _jsx(Progress, { value: value, max: max, className: isHigh ? 'text-foreground-300' : undefined })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm font-medium text-foreground-300", children: label }), _jsxs("span", { className: `text-sm tabular-nums ${isHigh ? 'text-foreground-200' : 'text-foreground-400'}`, children: [pct, "%"] })] }), _jsx(Progress, { value: value, max: max, className: isHigh ? 'text-foreground-300' : undefined })] }));
 }
 export function ProgressMetricColoredDemo() {
     return (_jsxs("div", { className: "p-6 flex flex-col gap-5 max-w-md w-full", children: [_jsx(ProgressMetricColored, { label: "Storage used", value: 86 }), _jsx(ProgressMetricColored, { label: "API calls", value: 340, max: 1000 }), _jsx(ProgressMetricColored, { label: "Team seats", value: 9, max: 10 })] }));

package/dist/patterns/data/progress-metric/variations/main/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Progress } from 'ui-lab-components';
 function ProgressMetric({ label, value, max = 100 }) {
     const pct = Math.round((value / max) * 100);
-    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-xs text-foreground-400 w-32 flex-shrink-0 truncate", children: label }), _jsx(Progress, { value: value, max: max, className: "flex-1" }), _jsxs("span", { className: "text-xs text-foreground-400 w-8 text-right flex-shrink-0 tabular-nums", children: [pct, "%"] })] }));
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-sm text-foreground-400 w-32 flex-shrink-0 truncate", children: label }), _jsx(Progress, { value: value, max: max, className: "flex-1" }), _jsxs("span", { className: "text-sm text-foreground-400 w-8 text-right flex-shrink-0 tabular-nums", children: [pct, "%"] })] }));
 }
 export function ProgressMetricDemo() {
     return (_jsxs("div", { className: "p-6 flex flex-col gap-4 max-w-md w-full", children: [_jsx(ProgressMetric, { label: "TypeScript", value: 87 }), _jsx(ProgressMetric, { label: "React", value: 92 }), _jsx(ProgressMetric, { label: "Node.js", value: 74 }), _jsx(ProgressMetric, { label: "Rust", value: 41 })] }));

package/dist/patterns/data/progress-metric/variations/stacked/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Progress } from 'ui-lab-components';
 function ProgressMetricStacked({ label, value, max = 100 }) {
     const pct = Math.round((value / max) * 100);
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-medium text-foreground-300", children: label }), _jsxs("span", { className: "text-xs text-foreground-400 tabular-nums", children: [pct, "%"] })] }), _jsx(Progress, { value: value, max: max })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm font-medium text-foreground-300", children: label }), _jsxs("span", { className: "text-sm text-foreground-400 tabular-nums", children: [pct, "%"] })] }), _jsx(Progress, { value: value, max: max })] }));
 }
 export function ProgressMetricStackedDemo() {
     return (_jsxs("div", { className: "p-6 flex flex-col gap-5 max-w-md w-full", children: [_jsx(ProgressMetricStacked, { label: "Storage used", value: 68 }), _jsx(ProgressMetricStacked, { label: "API calls", value: 34, max: 1000 }), _jsx(ProgressMetricStacked, { label: "Team seats", value: 7, max: 10 })] }));

package/dist/patterns/form/labeled-field/metadata.json

@@ -12,20 +12,20 @@
         "helper"
     ],
     "complexity": "simple",
-    "notes": "gap-1.5 between label and input is the standard spacing. Helper text uses text-foreground-400 at text-xs. Error state replaces helper text with an error message.",
-    "code": "import { Label, Input } from 'ui-lab-components'\n\nfunction LabeledField({ id, label, placeholder, hint }) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <Label htmlFor={id}>{label}</Label>\n      <Input id={id} placeholder={placeholder} />\n      {hint && <p className=\"text-xs text-foreground-400\">{hint}</p>}\n    </div>\n  )\n}",
+    "notes": "gap-1.5 between label and input is the standard spacing. Helper text uses text-foreground-400 at text-sm. Error state replaces helper text with an error message.",
+    "code": "import { Label, Input } from 'ui-lab-components'\n\nfunction LabeledField({ id, label, placeholder, hint }) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <Label htmlFor={id}>{label}</Label>\n      <Input id={id} placeholder={placeholder} />\n      {hint && <p className=\"text-sm text-foreground-400\">{hint}</p>}\n    </div>\n  )\n}",
     "variations": [
         {
             "id": "labeled-field-with-hint",
             "name": "With Hint",
             "description": "Gray helper text below the input providing format or context guidance.",
-            "code": "import { Label, Input } from 'ui-lab-components'\n\nfunction LabeledFieldWithHint({ id, label, placeholder }) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <Label htmlFor={id}>{label}</Label>\n      <Input id={id} placeholder={placeholder} />\n      <p className=\"text-xs text-foreground-400\">Shown publicly on your profile.</p>\n    </div>\n  )\n}"
+            "code": "import { Label, Input } from 'ui-lab-components'\n\nfunction LabeledFieldWithHint({ id, label, placeholder }) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <Label htmlFor={id}>{label}</Label>\n      <Input id={id} placeholder={placeholder} />\n      <p className=\"text-sm text-foreground-400\">Shown publicly on your profile.</p>\n    </div>\n  )\n}"
         },
         {
             "id": "labeled-field-with-error",
             "name": "With Error",
             "description": "Error message below the input with input in invalid state.",
-            "code": "import { Label, Input } from 'ui-lab-components'\n\nfunction LabeledFieldWithError({ id, label, placeholder, error }) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <Label htmlFor={id}>{label}</Label>\n      <Input\n        id={id}\n        placeholder={placeholder}\n        aria-invalid={Boolean(error)}\n        aria-describedby={error ? `${id}-error` : undefined}\n      />\n      {error && (\n        <p id={`${id}-error`} className=\"text-xs text-foreground-300 flex items-center gap-1\">\n          <span className=\"text-foreground-100\">&#9679;</span> {error}\n        </p>\n      )}\n    </div>\n  )\n}"
+            "code": "import { Label, Input } from 'ui-lab-components'\n\nfunction LabeledFieldWithError({ id, label, placeholder, error }) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <Label htmlFor={id}>{label}</Label>\n      <Input\n        id={id}\n        placeholder={placeholder}\n        aria-invalid={Boolean(error)}\n        aria-describedby={error ? `${id}-error` : undefined}\n      />\n      {error && (\n        <p id={`${id}-error`} className=\"text-sm text-foreground-300 flex items-center gap-1\">\n          <span className=\"text-foreground-100\">&#9679;</span> {error}\n        </p>\n      )}\n    </div>\n  )\n}"
         }
     ]
 }

package/dist/patterns/form/labeled-field/variations/main/index.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Label, Input } from 'ui-lab-components';
 function LabeledField({ id, label, placeholder, hint }) {
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Input, { id: id, placeholder: placeholder }), hint && _jsx("p", { className: "text-xs text-foreground-400", children: hint })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Input, { id: id, placeholder: placeholder }), hint && _jsx("p", { className: "text-sm text-foreground-400", children: hint })] }));
 }
 export function LabeledFieldDemo() {
     return (_jsxs("div", { className: "p-6 flex flex-col gap-5 max-w-sm w-full", children: [_jsx(LabeledField, { id: "name", label: "Full name", placeholder: "Jane Smith" }), _jsx(LabeledField, { id: "email", label: "Email address", placeholder: "jane@example.com" }), _jsx(LabeledField, { id: "username", label: "Username", placeholder: "janesmith", hint: "Only letters, numbers, and underscores." })] }));

package/dist/patterns/form/labeled-field/variations/with-error/index.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Label, Input } from 'ui-lab-components';
 function LabeledFieldWithError({ id, label, placeholder, error }) {
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Input, { id: id, placeholder: placeholder, "aria-invalid": Boolean(error), "aria-describedby": error ? `${id}-error` : undefined }), error && (_jsxs("p", { id: `${id}-error`, className: "text-xs text-foreground-300 flex items-center gap-1", children: [_jsx("span", { className: "text-foreground-100", children: "\u25CF" }), " ", error] }))] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Input, { id: id, placeholder: placeholder, "aria-invalid": Boolean(error), "aria-describedby": error ? `${id}-error` : undefined }), error && (_jsxs("p", { id: `${id}-error`, className: "text-sm text-foreground-300 flex items-center gap-1", children: [_jsx("span", { className: "text-foreground-100", children: "\u25CF" }), " ", error] }))] }));
 }
 export function LabeledFieldWithErrorDemo() {
     return (_jsxs("div", { className: "p-6 flex flex-col gap-5 max-w-sm w-full", children: [_jsx(LabeledFieldWithError, { id: "email-err", label: "Email address", placeholder: "jane@example.com", error: "Please enter a valid email address." }), _jsx(LabeledFieldWithError, { id: "username-err", label: "Username", placeholder: "janesmith", error: "Username is already taken." })] }));

package/dist/patterns/form/labeled-field/variations/with-hint/index.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Label, Input } from 'ui-lab-components';
 function LabeledFieldWithHint({ id, label, placeholder }) {
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Input, { id: id, placeholder: placeholder }), _jsx("p", { className: "text-xs text-foreground-400", children: "Shown publicly on your profile." })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Input, { id: id, placeholder: placeholder }), _jsx("p", { className: "text-sm text-foreground-400", children: "Shown publicly on your profile." })] }));
 }
 export function LabeledFieldWithHintDemo() {
     return (_jsxs("div", { className: "p-6 flex flex-col gap-5 max-w-sm w-full", children: [_jsx(LabeledFieldWithHint, { id: "display-name", label: "Display name", placeholder: "Jane Smith" }), _jsx(LabeledFieldWithHint, { id: "website", label: "Website", placeholder: "https://example.com" })] }));

package/dist/patterns/form/select-row/metadata.json

@@ -14,7 +14,7 @@
     ],
     "complexity": "simple",
     "notes": "items-center (not items-start) here because Select is a single-line control that should align with the label's baseline, not float to the top.",
-    "code": "import { Select, Label } from 'ui-lab-components'\n\nconst options = [\n  { id: 'system', label: 'System' },\n  { id: 'light', label: 'Light' },\n  { id: 'dark', label: 'Dark' },\n]\n\nfunction SelectRow({ id, label, description, defaultValue }) {\n  return (\n    <div className=\"flex items-center justify-between gap-4 py-3 border-b border-background-800\">\n      <div className=\"flex-1 min-w-0\">\n        <Label htmlFor={id} className=\"text-sm font-medium text-foreground-200\">\n          {label}\n        </Label>\n        {description && (\n          <p className=\"text-xs text-foreground-400 mt-0.5\">{description}</p>\n        )}\n      </div>\n      <Select defaultSelectedKey={defaultValue}>\n        {options.map((opt) => (\n          <Select.Option key={opt.id} id={opt.id}>{opt.label}</Select.Option>\n        ))}\n      </Select>\n    </div>\n  )\n}",
+    "code": "import { Select, Label } from 'ui-lab-components'\n\nconst options = [\n  { id: 'system', label: 'System' },\n  { id: 'light', label: 'Light' },\n  { id: 'dark', label: 'Dark' },\n]\n\nfunction SelectRow({ id, label, description, defaultValue }) {\n  return (\n    <div className=\"flex items-center justify-between gap-4 py-3 border-b border-background-800\">\n      <div className=\"flex-1 min-w-0\">\n        <Label htmlFor={id} className=\"text-sm font-medium text-foreground-200\">\n          {label}\n        </Label>\n        {description && (\n          <p className=\"text-sm text-foreground-400 mt-0.5\">{description}</p>\n        )}\n      </div>\n      <Select defaultSelectedKey={defaultValue}>\n        {options.map((opt) => (\n          <Select.Option key={opt.id} id={opt.id}>{opt.label}</Select.Option>\n        ))}\n      </Select>\n    </div>\n  )\n}",
     "variations": [
         {
             "id": "select-row-inline",
@@ -26,7 +26,7 @@
             "id": "select-row-with-icon",
             "name": "With Icon",
             "description": "Leading icon before the label for visual scanning in longer settings lists.",
-            "code": "import { Select, Label } from 'ui-lab-components'\n\nconst languages = [\n  { id: 'en', label: 'English' },\n  { id: 'fr', label: 'French' },\n  { id: 'de', label: 'German' },\n]\n\nfunction SelectRowWithIcon({ id, label, description, icon, defaultValue }) {\n  return (\n    <div className=\"flex items-center gap-4 py-3 border-b border-background-800\">\n      <div className=\"w-8 h-8 flex items-center justify-center rounded-md bg-background-800 text-foreground-400 flex-shrink-0\">\n        {icon}\n      </div>\n      <div className=\"flex-1 min-w-0\">\n        <Label htmlFor={id} className=\"text-sm font-medium text-foreground-200\">\n          {label}\n        </Label>\n        {description && (\n          <p className=\"text-xs text-foreground-400 mt-0.5\">{description}</p>\n        )}\n      </div>\n      <Select defaultSelectedKey={defaultValue}>\n        {languages.map((lang) => (\n          <Select.Option key={lang.id} id={lang.id}>{lang.label}</Select.Option>\n        ))}\n      </Select>\n    </div>\n  )\n}"
+            "code": "import { Select, Label } from 'ui-lab-components'\n\nconst languages = [\n  { id: 'en', label: 'English' },\n  { id: 'fr', label: 'French' },\n  { id: 'de', label: 'German' },\n]\n\nfunction SelectRowWithIcon({ id, label, description, icon, defaultValue }) {\n  return (\n    <div className=\"flex items-center gap-4 py-3 border-b border-background-800\">\n      <div className=\"w-8 h-8 flex items-center justify-center rounded-md bg-background-800 text-foreground-400 flex-shrink-0\">\n        {icon}\n      </div>\n      <div className=\"flex-1 min-w-0\">\n        <Label htmlFor={id} className=\"text-sm font-medium text-foreground-200\">\n          {label}\n        </Label>\n        {description && (\n          <p className=\"text-sm text-foreground-400 mt-0.5\">{description}</p>\n        )}\n      </div>\n      <Select defaultSelectedKey={defaultValue}>\n        {languages.map((lang) => (\n          <Select.Option key={lang.id} id={lang.id}>{lang.label}</Select.Option>\n        ))}\n      </Select>\n    </div>\n  )\n}"
         }
     ]
 }

package/dist/patterns/form/select-row/variations/main/index.js

@@ -7,7 +7,7 @@ const options = [
     { id: 'dark', label: 'Dark' },
 ];
 function SelectRow({ id, label, description, defaultValue }) {
-    return (_jsxs("div", { className: "flex items-center justify-between gap-4 py-3 border-b border-background-800", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Label, { htmlFor: id, className: "text-sm font-medium text-foreground-200", children: label }), description && _jsx("p", { className: "text-xs text-foreground-400 mt-0.5", children: description })] }), _jsxs(Select, { defaultSelectedKey: defaultValue, children: [_jsx(Select.Trigger, { children: _jsx(Select.Value, {}) }), _jsx(Select.Content, { children: options.map((opt) => _jsx(Select.Item, { value: opt.id, children: opt.label }, opt.id)) })] })] }));
+    return (_jsxs("div", { className: "flex items-center justify-between gap-4 py-3 border-b border-background-800", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Label, { htmlFor: id, className: "text-sm font-medium text-foreground-200", children: label }), description && _jsx("p", { className: "text-sm text-foreground-400 mt-0.5", children: description })] }), _jsxs(Select, { defaultSelectedKey: defaultValue, children: [_jsx(Select.Trigger, { children: _jsx(Select.Value, {}) }), _jsx(Select.Content, { children: options.map((opt) => _jsx(Select.Item, { value: opt.id, children: opt.label }, opt.id)) })] })] }));
 }
 export function SelectRowDemo() {
     return (_jsxs("div", { className: "p-6 flex flex-col max-w-md w-full", children: [_jsx(SelectRow, { id: "theme", label: "Appearance", description: "Choose your preferred color scheme.", defaultValue: "system" }), _jsx(SelectRow, { id: "density", label: "Density", description: "Controls the spacing of the UI.", defaultValue: "light" })] }));

package/dist/patterns/form/select-row/variations/with-icon/index.js

@@ -8,7 +8,7 @@ const languages = [
 ];
 const GlobeIcon = () => (_jsx("svg", { width: "14", height: "14", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }));
 function SelectRowWithIcon({ id, label, description, icon, defaultValue }) {
-    return (_jsxs("div", { className: "flex items-center gap-4 py-3 border-b border-background-800", children: [_jsx("div", { className: "w-8 h-8 flex items-center justify-center rounded-md bg-background-800 text-foreground-400 flex-shrink-0", children: icon }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Label, { htmlFor: id, className: "text-sm font-medium text-foreground-200", children: label }), description && _jsx("p", { className: "text-xs text-foreground-400 mt-0.5", children: description })] }), _jsxs(Select, { defaultSelectedKey: defaultValue, children: [_jsx(Select.Trigger, { children: _jsx(Select.Value, {}) }), _jsx(Select.Content, { children: languages.map((lang) => _jsx(Select.Item, { value: lang.id, children: lang.label }, lang.id)) })] })] }));
+    return (_jsxs("div", { className: "flex items-center gap-4 py-3 border-b border-background-800", children: [_jsx("div", { className: "w-8 h-8 flex items-center justify-center rounded-md bg-background-800 text-foreground-400 flex-shrink-0", children: icon }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Label, { htmlFor: id, className: "text-sm font-medium text-foreground-200", children: label }), description && _jsx("p", { className: "text-sm text-foreground-400 mt-0.5", children: description })] }), _jsxs(Select, { defaultSelectedKey: defaultValue, children: [_jsx(Select.Trigger, { children: _jsx(Select.Value, {}) }), _jsx(Select.Content, { children: languages.map((lang) => _jsx(Select.Item, { value: lang.id, children: lang.label }, lang.id)) })] })] }));
 }
 export function SelectRowWithIconDemo() {
     return (_jsxs("div", { className: "p-6 flex flex-col max-w-md w-full", children: [_jsx(SelectRowWithIcon, { id: "lang", label: "Language", description: "Sets the display language.", icon: _jsx(GlobeIcon, {}), defaultValue: "en" }), _jsx(SelectRowWithIcon, { id: "lang2", label: "Secondary language", icon: _jsx(GlobeIcon, {}), defaultValue: "fr" })] }));

package/dist/patterns/form/toggle-setting-row/metadata.json

@@ -13,7 +13,7 @@
     ],
     "complexity": "simple",
     "notes": "items-start on the outer flex so the switch aligns to the first line of the label text, not centered to the full description block.",
-    "code": "import { Switch, Label } from 'ui-lab-components'\n\nfunction ToggleSettingRow({ id, label, description, defaultSelected = false }) {\n  return (\n    <div className=\"flex items-start justify-between gap-4 py-3 border-b border-background-800\">\n      <div className=\"flex-1 min-w-0\">\n        <Label htmlFor={id} className=\"text-sm font-medium text-foreground-200 cursor-pointer\">\n          {label}\n        </Label>\n        {description && (\n          <p className=\"text-xs text-foreground-400 mt-0.5\">{description}</p>\n        )}\n      </div>\n      <Switch id={id} defaultSelected={defaultSelected} />\n    </div>\n  )\n}",
+    "code": "import { Switch, Label } from 'ui-lab-components'\n\nfunction ToggleSettingRow({ id, label, description, defaultSelected = false }) {\n  return (\n    <div className=\"flex items-start justify-between gap-4 py-3 border-b border-background-800\">\n      <div className=\"flex-1 min-w-0\">\n        <Label htmlFor={id} className=\"text-sm font-medium text-foreground-200 cursor-pointer\">\n          {label}\n        </Label>\n        {description && (\n          <p className=\"text-sm text-foreground-400 mt-0.5\">{description}</p>\n        )}\n      </div>\n      <Switch id={id} defaultSelected={defaultSelected} />\n    </div>\n  )\n}",
     "variations": [
         {
             "id": "toggle-setting-row-compact",
@@ -25,7 +25,7 @@
             "id": "toggle-setting-row-destructive",
             "name": "Destructive",
             "description": "Label styled to signal a dangerous or irreversible toggle.",
-            "code": "import { Switch, Label } from 'ui-lab-components'\n\nfunction ToggleSettingRowDestructive({ id, label, description, defaultSelected = false }) {\n  return (\n    <div className=\"flex items-start justify-between gap-4 py-3 border-b border-background-800\">\n      <div className=\"flex-1 min-w-0\">\n        <Label htmlFor={id} className=\"text-sm font-medium text-foreground-100 cursor-pointer\">\n          {label}\n        </Label>\n        {description && (\n          <p className=\"text-xs text-foreground-400 mt-0.5\">{description}</p>\n        )}\n      </div>\n      <Switch id={id} defaultSelected={defaultSelected} />\n    </div>\n  )\n}"
+            "code": "import { Switch, Label } from 'ui-lab-components'\n\nfunction ToggleSettingRowDestructive({ id, label, description, defaultSelected = false }) {\n  return (\n    <div className=\"flex items-start justify-between gap-4 py-3 border-b border-background-800\">\n      <div className=\"flex-1 min-w-0\">\n        <Label htmlFor={id} className=\"text-sm font-medium text-foreground-100 cursor-pointer\">\n          {label}\n        </Label>\n        {description && (\n          <p className=\"text-sm text-foreground-400 mt-0.5\">{description}</p>\n        )}\n      </div>\n      <Switch id={id} defaultSelected={defaultSelected} />\n    </div>\n  )\n}"
         }
     ]
 }

package/dist/patterns/form/toggle-setting-row/variations/destructive/index.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Switch, Label } from 'ui-lab-components';
 function ToggleSettingRowDestructive({ id, label, description, defaultSelected = false }) {
-    return (_jsxs("div", { className: "flex items-start justify-between gap-4 py-3 border-b border-background-800", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Label, { htmlFor: id, className: "text-sm font-medium text-foreground-100 cursor-pointer", children: label }), description && _jsx("p", { className: "text-xs text-foreground-400 mt-0.5", children: description })] }), _jsx(Switch, { id: id, defaultSelected: defaultSelected })] }));
+    return (_jsxs("div", { className: "flex items-start justify-between gap-4 py-3 border-b border-background-800", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Label, { htmlFor: id, className: "text-sm font-medium text-foreground-100 cursor-pointer", children: label }), description && _jsx("p", { className: "text-sm text-foreground-400 mt-0.5", children: description })] }), _jsx(Switch, { id: id, defaultSelected: defaultSelected })] }));
 }
 export function ToggleSettingRowDestructiveDemo() {
     return (_jsxs("div", { className: "p-6 flex flex-col max-w-md w-full", children: [_jsx(ToggleSettingRowDestructive, { id: "del-acct", label: "Delete account data on cancellation", description: "All data will be permanently removed within 30 days." }), _jsx(ToggleSettingRowDestructive, { id: "pub-data", label: "Share usage data with third parties", description: "Opt out to keep your data private.", defaultSelected: true })] }));

package/dist/patterns/form/toggle-setting-row/variations/main/index.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Switch, Label } from 'ui-lab-components';
 function ToggleSettingRow({ id, label, description, defaultSelected = false }) {
-    return (_jsxs("div", { className: "flex items-start justify-between gap-4 py-3 border-b border-background-800", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Label, { htmlFor: id, className: "text-sm font-medium text-foreground-200 cursor-pointer", children: label }), description && _jsx("p", { className: "text-xs text-foreground-400 mt-0.5", children: description })] }), _jsx(Switch, { id: id, defaultSelected: defaultSelected })] }));
+    return (_jsxs("div", { className: "flex items-start justify-between gap-4 py-3 border-b border-background-800", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Label, { htmlFor: id, className: "text-sm font-medium text-foreground-200 cursor-pointer", children: label }), description && _jsx("p", { className: "text-sm text-foreground-400 mt-0.5", children: description })] }), _jsx(Switch, { id: id, defaultSelected: defaultSelected })] }));
 }
 export function ToggleSettingRowDemo() {
     return (_jsxs("div", { className: "p-6 flex flex-col max-w-md w-full", children: [_jsx(ToggleSettingRow, { id: "notifs", label: "Email notifications", description: "Receive updates about your account activity.", defaultSelected: true }), _jsx(ToggleSettingRow, { id: "mktg", label: "Marketing emails", description: "Product news and feature announcements." }), _jsx(ToggleSettingRow, { id: "2fa", label: "Two-factor authentication", description: "Add an extra layer of security to your account.", defaultSelected: true })] }));

package/dist/patterns/interaction/icon-action-bar/variations/compact/index.js

@@ -5,6 +5,6 @@ function IconActionBarCompact({ onEdit, onCopy, onDelete }) {
     return (_jsxs(Group, { spacing: "none", children: [_jsx(Button, { variant: "ghost", size: "sm", onPress: onEdit, "aria-label": "Edit", children: _jsx("svg", { width: "12", height: "12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) }) }), _jsx(Button, { variant: "ghost", size: "sm", onPress: onCopy, "aria-label": "Copy", children: _jsx("svg", { width: "12", height: "12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }) }), _jsx(Button, { variant: "ghost", size: "sm", onPress: onDelete, "aria-label": "Delete", children: _jsx("svg", { width: "12", height: "12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }) })] }));
 }
 export function IconActionBarCompactDemo() {
-    return (_jsx("div", { className: "p-6 flex flex-col gap-0 max-w-md w-full", children: ['api-deploy-prod', 'run-tests', 'seed-db'].map((label) => (_jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 border-b border-background-800", children: [_jsx("span", { className: "text-xs font-mono text-foreground-300", children: label }), _jsx(IconActionBarCompact, { onEdit: () => { }, onCopy: () => { }, onDelete: () => { } })] }, label))) }));
+    return (_jsx("div", { className: "p-6 flex flex-col gap-0 max-w-md w-full", children: ['api-deploy-prod', 'run-tests', 'seed-db'].map((label) => (_jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 border-b border-background-800", children: [_jsx("span", { className: "text-sm font-mono text-foreground-300", children: label }), _jsx(IconActionBarCompact, { onEdit: () => { }, onCopy: () => { }, onDelete: () => { } })] }, label))) }));
 }
 //# sourceMappingURL=index.js.map

package/dist/patterns/layout/media-object/metadata.json

@@ -20,7 +20,7 @@
             "id": "media-object-sm",
             "name": "Small",
             "description": "Reduced icon size (w-8 h-8) and tighter gap for dense lists.",
-            "code": "function MediaObjectSm({ icon, title, description }) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <div className=\"w-8 h-8 flex items-center justify-center rounded-md bg-background-800 text-foreground-300 flex-shrink-0\">\n        {icon}\n      </div>\n      <div className=\"min-w-0\">\n        <p className=\"text-xs font-medium text-foreground-200 truncate\">{title}</p>\n        <p className=\"text-xs text-foreground-400 truncate\">{description}</p>\n      </div>\n    </div>\n  )\n}"
+            "code": "function MediaObjectSm({ icon, title, description }) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <div className=\"w-8 h-8 flex items-center justify-center rounded-md bg-background-800 text-foreground-300 flex-shrink-0\">\n        {icon}\n      </div>\n      <div className=\"min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{title}</p>\n        <p className=\"text-sm text-foreground-400 truncate\">{description}</p>\n      </div>\n    </div>\n  )\n}"
         },
         {
             "id": "media-object-lg",

package/dist/patterns/layout/media-object/variations/sm/index.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Icon = () => (_jsx("svg", { width: "12", height: "12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }));
 function MediaObjectSm({ icon, title, description }) {
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-8 h-8 flex items-center justify-center rounded-md bg-background-800 text-foreground-300 flex-shrink-0", children: icon }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-xs font-medium text-foreground-200 truncate", children: title }), _jsx("p", { className: "text-xs text-foreground-400 truncate", children: description })] })] }));
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-8 h-8 flex items-center justify-center rounded-md bg-background-800 text-foreground-300 flex-shrink-0", children: icon }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground-200 truncate", children: title }), _jsx("p", { className: "text-sm text-foreground-400 truncate", children: description })] })] }));
 }
 export function MediaObjectSmDemo() {
     return (_jsxs("div", { className: "p-6 flex flex-col gap-3 max-w-sm w-full", children: [_jsx(MediaObjectSm, { icon: _jsx(Icon, {}), title: "Push Notifications", description: "Stay updated on new activity." }), _jsx(MediaObjectSm, { icon: _jsx(Icon, {}), title: "Security Alerts", description: "Get notified of unusual activity." }), _jsx(MediaObjectSm, { icon: _jsx(Icon, {}), title: "Analytics Reports", description: "Receive weekly summaries." })] }));

package/dist/patterns/layout/split-row/metadata.json

@@ -14,19 +14,19 @@
     ],
     "complexity": "simple",
     "notes": "border-b border-background-800 for row separators. flex-shrink-0 on the right side prevents it from wrapping under long titles.",
-    "code": "import { Badge } from 'ui-lab-components'\n\nfunction SplitRow({ title, description, timestamp, status }) {\n  const variant = status === 'active' ? 'success' : status === 'pending' ? 'warning' : 'default'\n  return (\n    <div className=\"flex items-center gap-4 py-3 border-b border-background-800 hover:bg-background-900 transition-colors px-2 -mx-2 rounded\">\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{title}</p>\n        <p className=\"text-xs text-foreground-400 truncate\">{description}</p>\n      </div>\n      <div className=\"flex items-center gap-3 flex-shrink-0\">\n        <span className=\"text-xs text-foreground-400\">{timestamp}</span>\n        <Badge size=\"sm\" variant={variant}>{status}</Badge>\n      </div>\n    </div>\n  )\n}",
+    "code": "import { Badge } from 'ui-lab-components'\n\nfunction SplitRow({ title, description, timestamp, status }) {\n  const variant = status === 'active' ? 'success' : status === 'pending' ? 'warning' : 'default'\n  return (\n    <div className=\"flex items-center gap-4 py-3 border-b border-background-800 hover:bg-background-900 transition-colors px-2 -mx-2 rounded\">\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{title}</p>\n        <p className=\"text-sm text-foreground-400 truncate\">{description}</p>\n      </div>\n      <div className=\"flex items-center gap-3 flex-shrink-0\">\n        <span className=\"text-sm text-foreground-400\">{timestamp}</span>\n        <Badge size=\"sm\" variant={variant}>{status}</Badge>\n      </div>\n    </div>\n  )\n}",
     "variations": [
         {
             "id": "split-row-actions",
             "name": "With Actions",
             "description": "Right side shows icon action buttons instead of metadata.",
-            "code": "import { Button, Group } from 'ui-lab-components'\n\nfunction SplitRowActions({ title, description, onEdit, onDelete }) {\n  return (\n    <div className=\"flex items-center gap-4 py-3 border-b border-background-800 group\">\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{title}</p>\n        <p className=\"text-xs text-foreground-400 truncate\">{description}</p>\n      </div>\n      <div className=\"flex items-center gap-1 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity\">\n        <Button variant=\"ghost\" size=\"sm\" onPress={onEdit}>Edit</Button>\n        <Button variant=\"ghost\" size=\"sm\" onPress={onDelete}>Delete</Button>\n      </div>\n    </div>\n  )\n}"
+            "code": "import { Button, Group } from 'ui-lab-components'\n\nfunction SplitRowActions({ title, description, onEdit, onDelete }) {\n  return (\n    <div className=\"flex items-center gap-4 py-3 border-b border-background-800 group\">\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{title}</p>\n        <p className=\"text-sm text-foreground-400 truncate\">{description}</p>\n      </div>\n      <div className=\"flex items-center gap-1 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity\">\n        <Button variant=\"ghost\" size=\"sm\" onPress={onEdit}>Edit</Button>\n        <Button variant=\"ghost\" size=\"sm\" onPress={onDelete}>Delete</Button>\n      </div>\n    </div>\n  )\n}"
         },
         {
             "id": "split-row-meta",
             "name": "With Meta",
             "description": "Right side shows two metadata values (e.g. size + date) in a column.",
-            "code": "function SplitRowMeta({ title, description, primaryMeta, secondaryMeta }) {\n  return (\n    <div className=\"flex items-center gap-4 py-3 border-b border-background-800\">\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{title}</p>\n        <p className=\"text-xs text-foreground-400 truncate\">{description}</p>\n      </div>\n      <div className=\"flex flex-col items-end flex-shrink-0\">\n        <span className=\"text-xs font-medium text-foreground-300\">{primaryMeta}</span>\n        <span className=\"text-xs text-foreground-500\">{secondaryMeta}</span>\n      </div>\n    </div>\n  )\n}"
+            "code": "function SplitRowMeta({ title, description, primaryMeta, secondaryMeta }) {\n  return (\n    <div className=\"flex items-center gap-4 py-3 border-b border-background-800\">\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{title}</p>\n        <p className=\"text-sm text-foreground-400 truncate\">{description}</p>\n      </div>\n      <div className=\"flex flex-col items-end flex-shrink-0\">\n        <span className=\"text-sm font-medium text-foreground-300\">{primaryMeta}</span>\n        <span className=\"text-sm text-foreground-500\">{secondaryMeta}</span>\n      </div>\n    </div>\n  )\n}"
         }
     ]
 }

package/dist/patterns/layout/split-row/variations/actions/index.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from 'ui-lab-components';
 function SplitRowActions({ title, description, onEdit, onDelete }) {
-    return (_jsxs("div", { className: "flex items-center gap-4 py-3 border-b border-background-800 group", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground-200 truncate", children: title }), _jsx("p", { className: "text-xs text-foreground-400 truncate", children: description })] }), _jsxs("div", { className: "flex items-center gap-1 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity", children: [_jsx(Button, { variant: "ghost", size: "sm", onPress: onEdit, children: "Edit" }), _jsx(Button, { variant: "ghost", size: "sm", onPress: onDelete, children: "Delete" })] })] }));
+    return (_jsxs("div", { className: "flex items-center gap-4 py-3 border-b border-background-800 group", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground-200 truncate", children: title }), _jsx("p", { className: "text-sm text-foreground-400 truncate", children: description })] }), _jsxs("div", { className: "flex items-center gap-1 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity", children: [_jsx(Button, { variant: "ghost", size: "sm", onPress: onEdit, children: "Edit" }), _jsx(Button, { variant: "ghost", size: "sm", onPress: onDelete, children: "Delete" })] })] }));
 }
 export function SplitRowActionsDemo() {
     return (_jsxs("div", { className: "p-6 flex flex-col max-w-lg w-full", children: [_jsx(SplitRowActions, { title: "API Key \u2014 Production", description: "Last used 2 hours ago", onEdit: () => { }, onDelete: () => { } }), _jsx(SplitRowActions, { title: "API Key \u2014 Staging", description: "Last used 3 days ago", onEdit: () => { }, onDelete: () => { } }), _jsx(SplitRowActions, { title: "API Key \u2014 Development", description: "Last used 1 week ago", onEdit: () => { }, onDelete: () => { } })] }));

package/dist/patterns/layout/split-row/variations/main/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge } from 'ui-lab-components';
 function SplitRow({ title, description, timestamp, status }) {
     const variant = status === 'active' ? 'success' : status === 'pending' ? 'warning' : 'default';
-    return (_jsxs("div", { className: "flex items-center gap-4 py-3 border-b border-background-800 hover:bg-background-900 transition-colors px-2 -mx-2 rounded", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground-200 truncate", children: title }), _jsx("p", { className: "text-xs text-foreground-400 truncate", children: description })] }), _jsxs("div", { className: "flex items-center gap-3 flex-shrink-0", children: [_jsx("span", { className: "text-xs text-foreground-400", children: timestamp }), _jsx(Badge, { size: "sm", variant: variant, children: status })] })] }));
+    return (_jsxs("div", { className: "flex items-center gap-4 py-3 border-b border-background-800 hover:bg-background-900 transition-colors px-2 -mx-2 rounded", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground-200 truncate", children: title }), _jsx("p", { className: "text-sm text-foreground-400 truncate", children: description })] }), _jsxs("div", { className: "flex items-center gap-3 flex-shrink-0", children: [_jsx("span", { className: "text-sm text-foreground-400", children: timestamp }), _jsx(Badge, { size: "sm", variant: variant, children: status })] })] }));
 }
 export function SplitRowDemo() {
     return (_jsxs("div", { className: "p-6 flex flex-col max-w-lg w-full", children: [_jsx(SplitRow, { title: "Deploy production build", description: "github-actions \u00B7 main", timestamp: "2m ago", status: "active" }), _jsx(SplitRow, { title: "Run integration tests", description: "github-actions \u00B7 staging", timestamp: "14m ago", status: "pending" }), _jsx(SplitRow, { title: "Seed database migration", description: "cli \u00B7 development", timestamp: "1h ago", status: "inactive" })] }));

package/dist/patterns/layout/split-row/variations/meta/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function SplitRowMeta({ title, description, primaryMeta, secondaryMeta }) {
-    return (_jsxs("div", { className: "flex items-center gap-4 py-3 border-b border-background-800", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground-200 truncate", children: title }), _jsx("p", { className: "text-xs text-foreground-400 truncate", children: description })] }), _jsxs("div", { className: "flex flex-col items-end flex-shrink-0", children: [_jsx("span", { className: "text-xs font-medium text-foreground-300", children: primaryMeta }), _jsx("span", { className: "text-xs text-foreground-500", children: secondaryMeta })] })] }));
+    return (_jsxs("div", { className: "flex items-center gap-4 py-3 border-b border-background-800", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground-200 truncate", children: title }), _jsx("p", { className: "text-sm text-foreground-400 truncate", children: description })] }), _jsxs("div", { className: "flex flex-col items-end flex-shrink-0", children: [_jsx("span", { className: "text-sm font-medium text-foreground-300", children: primaryMeta }), _jsx("span", { className: "text-sm text-foreground-500", children: secondaryMeta })] })] }));
 }
 export function SplitRowMetaDemo() {
     return (_jsxs("div", { className: "p-6 flex flex-col max-w-lg w-full", children: [_jsx(SplitRowMeta, { title: "design-system.fig", description: "Figma \u00B7 Shared with team", primaryMeta: "4.2 MB", secondaryMeta: "Jan 12, 2025" }), _jsx(SplitRowMeta, { title: "brand-assets.zip", description: "S3 \u00B7 us-east-1", primaryMeta: "128 MB", secondaryMeta: "Dec 3, 2024" }), _jsx(SplitRowMeta, { title: "icon-set.svg", description: "GitHub \u00B7 public", primaryMeta: "18 KB", secondaryMeta: "Nov 28, 2024" })] }));

package/dist/patterns/layout/stat-block/metadata.json

@@ -14,19 +14,19 @@
     ],
     "complexity": "simple",
     "notes": "text-foreground-100 for the value \u2014 maximum contrast since the number is the focal point. text-foreground-400 for the label. Trend uses text-accent-400 for positive indicators.",
-    "code": "function StatBlock({ value, label, trend }) {\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <p className=\"text-3xl font-bold text-foreground-100 tabular-nums\">{value}</p>\n      <p className=\"text-sm text-foreground-400\">{label}</p>\n      {trend && (\n        <p className=\"text-xs text-accent-400\">{trend}</p>\n      )}\n    </div>\n  )\n}",
+    "code": "function StatBlock({ value, label, trend }) {\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <p className=\"text-3xl font-bold text-foreground-100 tabular-nums\">{value}</p>\n      <p className=\"text-sm text-foreground-400\">{label}</p>\n      {trend && (\n        <p className=\"text-sm text-accent-400\">{trend}</p>\n      )}\n    </div>\n  )\n}",
     "variations": [
         {
             "id": "stat-block-compact",
             "name": "Compact",
             "description": "Horizontal inline layout \u2014 value and label on one line. For use in dense sidebars and toolbars.",
-            "code": "function StatBlockCompact({ value, label }) {\n  return (\n    <div className=\"flex items-baseline gap-2\">\n      <span className=\"text-xl font-bold text-foreground-100 tabular-nums\">{value}</span>\n      <span className=\"text-xs text-foreground-400\">{label}</span>\n    </div>\n  )\n}"
+            "code": "function StatBlockCompact({ value, label }) {\n  return (\n    <div className=\"flex items-baseline gap-2\">\n      <span className=\"text-xl font-bold text-foreground-100 tabular-nums\">{value}</span>\n      <span className=\"text-sm text-foreground-400\">{label}</span>\n    </div>\n  )\n}"
         },
         {
             "id": "stat-block-with-icon",
             "name": "With Icon",
             "description": "Icon in a pill container above the number. Reinforces metric meaning visually.",
-            "code": "function StatBlockWithIcon({ icon, value, label, trend }) {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"w-9 h-9 flex items-center justify-center rounded-lg bg-background-800 text-foreground-300\">\n        {icon}\n      </div>\n      <div className=\"flex flex-col gap-0.5\">\n        <p className=\"text-2xl font-bold text-foreground-100 tabular-nums\">{value}</p>\n        <p className=\"text-sm text-foreground-400\">{label}</p>\n        {trend && <p className=\"text-xs text-accent-400\">{trend}</p>}\n      </div>\n    </div>\n  )\n}"
+            "code": "function StatBlockWithIcon({ icon, value, label, trend }) {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"w-9 h-9 flex items-center justify-center rounded-lg bg-background-800 text-foreground-300\">\n        {icon}\n      </div>\n      <div className=\"flex flex-col gap-0.5\">\n        <p className=\"text-2xl font-bold text-foreground-100 tabular-nums\">{value}</p>\n        <p className=\"text-sm text-foreground-400\">{label}</p>\n        {trend && <p className=\"text-sm text-accent-400\">{trend}</p>}\n      </div>\n    </div>\n  )\n}"
         }
     ]
 }

package/dist/patterns/layout/stat-block/variations/compact/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function StatBlockCompact({ value, label }) {
-    return (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-xl font-bold text-foreground-100 tabular-nums", children: value }), _jsx("span", { className: "text-xs text-foreground-400", children: label })] }));
+    return (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-xl font-bold text-foreground-100 tabular-nums", children: value }), _jsx("span", { className: "text-sm text-foreground-400", children: label })] }));
 }
 export function StatBlockCompactDemo() {
     return (_jsxs("div", { className: "p-6 flex gap-6 flex-wrap w-full", children: [_jsx(StatBlockCompact, { value: "12,430", label: "users" }), _jsx(StatBlockCompact, { value: "$4,821", label: "revenue" }), _jsx(StatBlockCompact, { value: "98.6%", label: "uptime" }), _jsx(StatBlockCompact, { value: "143ms", label: "avg latency" })] }));

package/dist/patterns/layout/stat-block/variations/main/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function StatBlock({ value, label, trend }) {
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-3xl font-bold text-foreground-100 tabular-nums", children: value }), _jsx("p", { className: "text-sm text-foreground-400", children: label }), trend && _jsx("p", { className: "text-xs text-accent-400", children: trend })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-3xl font-bold text-foreground-100 tabular-nums", children: value }), _jsx("p", { className: "text-sm text-foreground-400", children: label }), trend && _jsx("p", { className: "text-sm text-accent-400", children: trend })] }));
 }
 export function StatBlockDemo() {
     return (_jsxs("div", { className: "p-6 flex gap-8 flex-wrap w-full", children: [_jsx(StatBlock, { value: "12,430", label: "Total users", trend: "+8.2% this month" }), _jsx(StatBlock, { value: "$4,821", label: "Monthly revenue", trend: "+12.4% vs last month" }), _jsx(StatBlock, { value: "98.6%", label: "Uptime" })] }));

package/dist/patterns/layout/stat-block/variations/with-icon/index.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const UsersIcon = () => (_jsx("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" }) }));
 function StatBlockWithIcon({ icon, value, label, trend }) {
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "w-9 h-9 flex items-center justify-center rounded-lg bg-background-800 text-foreground-300", children: icon }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("p", { className: "text-2xl font-bold text-foreground-100 tabular-nums", children: value }), _jsx("p", { className: "text-sm text-foreground-400", children: label }), trend && _jsx("p", { className: "text-xs text-accent-400", children: trend })] })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "w-9 h-9 flex items-center justify-center rounded-lg bg-background-800 text-foreground-300", children: icon }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("p", { className: "text-2xl font-bold text-foreground-100 tabular-nums", children: value }), _jsx("p", { className: "text-sm text-foreground-400", children: label }), trend && _jsx("p", { className: "text-sm text-accent-400", children: trend })] })] }));
 }
 export function StatBlockWithIconDemo() {
     return (_jsxs("div", { className: "p-6 flex gap-8 flex-wrap w-full", children: [_jsx(StatBlockWithIcon, { icon: _jsx(UsersIcon, {}), value: "12,430", label: "Total users", trend: "+8.2% this month" }), _jsx(StatBlockWithIcon, { icon: _jsx(UsersIcon, {}), value: "$4,821", label: "Monthly revenue", trend: "+12.4% vs last month" }), _jsx(StatBlockWithIcon, { icon: _jsx(UsersIcon, {}), value: "98.6%", label: "Uptime" })] }));

package/dist/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD,eAAO,MAAM,iBAAiB,EAAE,iBA26B/B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;GAM3B,CAAC"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD,eAAO,MAAM,iBAAiB,EAAE,iBAi6B/B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;GAM3B,CAAC"}