ui-lab-registry 0.3.44 → 0.3.45

package/dist/components/Grid/examples/03-editorial-spans.d.ts

@@ -0,0 +1,11 @@
+import type { ControlDef } from '@/types';
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export declare const controls: ControlDef[];
+export declare const previewLayout: "start";
+export declare const resizable = true;
+export declare function renderPreview(props: Record<string, unknown>): import("react/jsx-runtime").JSX.Element;
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=03-editorial-spans.d.ts.map

package/dist/components/Grid/examples/03-editorial-spans.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-editorial-spans.d.ts","sourceRoot":"","sources":["../../../../src/components/Grid/examples/03-editorial-spans.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAUzC,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,UAAU,EA4EhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAG,OAAgB,CAAC;AAC9C,eAAO,MAAM,SAAS,OAAO,CAAC;AAuE9B,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,2CAqB3D;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,4CAE9B"}

package/dist/components/Grid/examples/03-editorial-spans.js

@@ -0,0 +1,167 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Grid, Frame } from 'ui-lab-components';
+const BASE_CELL_STYLE = {
+    '--frame-fill': 'var(--background-900)',
+    '--frame-stroke-color': 'var(--background-600)',
+};
+export const metadata = {
+    title: 'Editorial Spans',
+    description: 'Dense auto-flow grid with mixed column spans for editorial content layouts.',
+};
+export const controls = [
+    {
+        name: 'columns',
+        label: 'Columns',
+        type: 'select',
+        options: [
+            { label: '1 Column', value: '1' },
+            { label: '2 Columns', value: '2' },
+            { label: '3 Columns', value: '3' },
+            { label: '4 Columns', value: '4' },
+            { label: '5 Columns', value: '5' },
+            { label: '6 Columns', value: '6' },
+            { label: 'Auto Fit', value: 'auto-fit' },
+            { label: 'Auto Fill', value: 'auto-fill' },
+        ],
+        defaultValue: '4',
+    },
+    {
+        name: 'gap',
+        label: 'Gap Token',
+        type: 'select',
+        options: [
+            { label: 'Extra Small', value: 'xs' },
+            { label: 'Small', value: 'sm' },
+            { label: 'Medium', value: 'md' },
+            { label: 'Large', value: 'lg' },
+            { label: 'Extra Large', value: 'xl' },
+        ],
+        defaultValue: 'md',
+    },
+    {
+        name: 'justifyItems',
+        label: 'Inline Alignment',
+        type: 'select',
+        options: [
+            { label: 'Stretch', value: 'stretch' },
+            { label: 'Start', value: 'start' },
+            { label: 'Center', value: 'center' },
+            { label: 'End', value: 'end' },
+        ],
+        defaultValue: 'stretch',
+    },
+    {
+        name: 'alignItems',
+        label: 'Block Alignment',
+        type: 'select',
+        options: [
+            { label: 'Stretch', value: 'stretch' },
+            { label: 'Start', value: 'start' },
+            { label: 'Center', value: 'center' },
+            { label: 'End', value: 'end' },
+            { label: 'Baseline', value: 'baseline' },
+        ],
+        defaultValue: 'stretch',
+    },
+    {
+        name: 'autoFlow',
+        label: 'Auto Placement',
+        type: 'select',
+        options: [
+            { label: 'Row', value: 'row' },
+            { label: 'Column', value: 'column' },
+            { label: 'Row Dense', value: 'row-dense' },
+            { label: 'Column Dense', value: 'column-dense' },
+        ],
+        defaultValue: 'row-dense',
+    },
+    {
+        name: 'frameCount',
+        label: 'Panels',
+        type: 'stepper',
+        defaultValue: 7,
+        min: 5,
+        max: 12,
+        step: 1,
+    },
+];
+export const previewLayout = 'start';
+export const resizable = true;
+function getColumns(value) {
+    if (value === '1' || value === '2' || value === '4' || value === '5' || value === '6' || value === 'auto-fit' || value === 'auto-fill')
+        return value;
+    return '3';
+}
+function toColumns(value) {
+    if (value === 'auto-fit' || value === 'auto-fill')
+        return value;
+    return Number(value);
+}
+function getApproxColumnCount(value) {
+    if (value === 'auto-fit' || value === 'auto-fill')
+        return 4;
+    return Number(value);
+}
+function getGap(value) {
+    if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl')
+        return value;
+    return 'md';
+}
+function getJustifyItems(value) {
+    if (value === 'start' || value === 'center' || value === 'end')
+        return value;
+    return 'stretch';
+}
+function getAlignItems(value) {
+    if (value === 'start' || value === 'center' || value === 'end' || value === 'baseline')
+        return value;
+    return 'stretch';
+}
+function getAutoFlow(value) {
+    if (value === 'column' || value === 'row-dense' || value === 'column-dense')
+        return value;
+    return 'row';
+}
+function getFrameCount(value, min, max, fallback) {
+    const n = typeof value === 'number' ? value : Number(value);
+    if (Number.isNaN(n))
+        return fallback;
+    return Math.min(max, Math.max(min, Math.round(n)));
+}
+function span(trackCount, desired) {
+    return `span ${Math.max(1, Math.min(desired, trackCount))}`;
+}
+function getSpecs(trackCount, frameCount) {
+    if (trackCount <= 2) {
+        const pattern = [{ minHeight: '4rem' }, { minHeight: '5.5rem' }, { minHeight: '3rem' }];
+        return [
+            { style: { width: '100%', minHeight: '8rem' } },
+            ...Array.from({ length: Math.max(frameCount - 1, 0) }, (_, i) => ({ style: { width: '100%', ...pattern[i % pattern.length] } })),
+        ];
+    }
+    const pattern = [
+        { width: '100%', minHeight: '3rem' },
+        { width: '100%', minHeight: '6.5rem', gridColumn: span(trackCount, 2) },
+        { width: '100%', minHeight: '4rem' },
+        { width: '100%', minHeight: '3rem' },
+    ];
+    return [
+        { style: { width: '100%', minHeight: '8rem', gridColumn: span(trackCount, Math.max(trackCount - 1, 2)) } },
+        { style: { width: '100%', minHeight: '8rem' } },
+        { style: { width: '100%', minHeight: '3rem' } },
+        { style: { width: '100%', minHeight: '5rem', gridColumn: span(trackCount, 2) } },
+        { style: { width: '100%', minHeight: '5rem' } },
+        ...Array.from({ length: Math.max(frameCount - 5, 0) }, (_, i) => ({ style: pattern[i % pattern.length] })),
+    ];
+}
+export function renderPreview(props) {
+    const columns = getColumns(props.columns);
+    const frameCount = getFrameCount(props.frameCount, 5, 12, 7);
+    const specs = getSpecs(getApproxColumnCount(columns), frameCount);
+    return (_jsx(Grid, { columns: toColumns(columns), gap: getGap(props.gap), justifyItems: getJustifyItems(props.justifyItems), alignItems: getAlignItems(props.alignItems), autoFlow: getAutoFlow(props.autoFlow), className: "w-full", children: specs.map((spec, index) => (_jsx(Frame, { pathStroke: "dashed", style: { ...BASE_CELL_STYLE, ...spec.style }, className: "w-full h-full", children: _jsx("div", { className: "size-full" }) }, index))) }));
+}
+export default function Example() {
+    return renderPreview({ columns: '4', gap: 'md', justifyItems: 'stretch', alignItems: 'stretch', autoFlow: 'row-dense', frameCount: 7 });
+}
+//# sourceMappingURL=03-editorial-spans.js.map

package/dist/components/Grid/examples/03-editorial-spans.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-editorial-spans.js","sourceRoot":"","sources":["../../../../src/components/Grid/examples/03-editorial-spans.tsx"],"names":[],"mappings":"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"}

package/dist/components/Grid/examples/04-responsive-card-rail.d.ts

@@ -0,0 +1,11 @@
+import type { ControlDef } from '@/types';
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export declare const controls: ControlDef[];
+export declare const previewLayout: "start";
+export declare const resizable = true;
+export declare function renderPreview(props: Record<string, unknown>): import("react/jsx-runtime").JSX.Element;
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=04-responsive-card-rail.d.ts.map

package/dist/components/Grid/examples/04-responsive-card-rail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-responsive-card-rail.d.ts","sourceRoot":"","sources":["../../../../src/components/Grid/examples/04-responsive-card-rail.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAUzC,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,UAAU,EAiEhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAG,OAAgB,CAAC;AAC9C,eAAO,MAAM,SAAS,OAAO,CAAC;AAqC9B,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,2CAwB3D;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,4CAE9B"}

package/dist/components/Grid/examples/04-responsive-card-rail.js

@@ -0,0 +1,126 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Grid, Frame } from 'ui-lab-components';
+const BASE_CELL_STYLE = {
+    '--frame-fill': 'var(--background-900)',
+    '--frame-stroke-color': 'var(--background-600)',
+};
+export const metadata = {
+    title: 'Responsive Card Rail',
+    description: 'Grid that adapts column count and gap based on container width using responsive prop objects.',
+};
+export const controls = [
+    {
+        name: 'columns',
+        label: 'Columns',
+        type: 'select',
+        options: [
+            { label: '2 Columns', value: '2' },
+            { label: '3 Columns', value: '3' },
+            { label: '4 Columns', value: '4' },
+            { label: 'Auto Fit', value: 'auto-fit' },
+            { label: 'Auto Fill', value: 'auto-fill' },
+        ],
+        defaultValue: '4',
+    },
+    {
+        name: 'gap',
+        label: 'Base Gap Token',
+        type: 'select',
+        options: [
+            { label: 'Small', value: 'sm' },
+            { label: 'Medium', value: 'md' },
+            { label: 'Large', value: 'lg' },
+            { label: 'Extra Large', value: 'xl' },
+        ],
+        defaultValue: 'md',
+    },
+    {
+        name: 'rowGap',
+        label: 'Row Gap',
+        type: 'select',
+        options: [
+            { label: 'Match Gap', value: 'inherit' },
+            { label: 'Small', value: 'sm' },
+            { label: 'Medium', value: 'md' },
+            { label: 'Large', value: 'lg' },
+        ],
+        defaultValue: 'inherit',
+    },
+    {
+        name: 'columnGap',
+        label: 'Column Gap',
+        type: 'select',
+        options: [
+            { label: 'Match Gap', value: 'inherit' },
+            { label: 'Small', value: 'sm' },
+            { label: 'Medium', value: 'md' },
+            { label: 'Large', value: 'lg' },
+        ],
+        defaultValue: 'inherit',
+    },
+    {
+        name: 'frameCount',
+        label: 'Cards',
+        type: 'stepper',
+        defaultValue: 6,
+        min: 4,
+        max: 10,
+        step: 1,
+    },
+    {
+        name: 'responsive',
+        label: 'Enable Responsive Object',
+        type: 'toggle',
+        defaultValue: true,
+    },
+];
+export const previewLayout = 'start';
+export const resizable = true;
+function getColumns(value) {
+    if (value === '2' || value === '3' || value === 'auto-fit' || value === 'auto-fill')
+        return value;
+    return '4';
+}
+function toColumns(value) {
+    if (value === 'auto-fit' || value === 'auto-fill')
+        return value;
+    return Number(value);
+}
+function getGap(value) {
+    if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl')
+        return value;
+    return 'md';
+}
+function getOptionalGap(value) {
+    if (value === 'inherit' || value == null)
+        return undefined;
+    return getGap(value);
+}
+function getFrameCount(value, min, max, fallback) {
+    const n = typeof value === 'number' ? value : Number(value);
+    if (Number.isNaN(n))
+        return fallback;
+    return Math.min(max, Math.max(min, Math.round(n)));
+}
+const SPEC_PATTERN = [
+    { minHeight: '9rem' },
+    { minHeight: '4rem' },
+    { minHeight: '3rem' },
+    { minHeight: '5rem' },
+    { minHeight: '3.5rem' },
+    { minHeight: '6rem' },
+];
+export function renderPreview(props) {
+    const columns = getColumns(props.columns);
+    const baseColumns = toColumns(columns);
+    const gap = getGap(props.gap);
+    const responsive = Boolean(props.responsive);
+    const frameCount = getFrameCount(props.frameCount, 4, 10, 6);
+    const specs = Array.from({ length: frameCount }, (_, i) => SPEC_PATTERN[i % SPEC_PATTERN.length]);
+    return (_jsx(Grid, { columns: responsive ? { sm: 1, md: 2, lg: baseColumns } : baseColumns, gap: responsive ? { sm: 'sm', md: gap, lg: gap } : gap, rowGap: getOptionalGap(props.rowGap), columnGap: getOptionalGap(props.columnGap), responsive: responsive, className: "w-full", children: specs.map((spec, index) => (_jsx(Frame, { pathStroke: "dashed", style: { ...BASE_CELL_STYLE, width: '100%', minHeight: spec.minHeight }, className: "w-full h-full", children: _jsx("div", { className: "size-full" }) }, index))) }));
+}
+export default function Example() {
+    return renderPreview({ columns: '4', gap: 'md', rowGap: 'inherit', columnGap: 'inherit', frameCount: 6, responsive: true });
+}
+//# sourceMappingURL=04-responsive-card-rail.js.map

package/dist/components/Grid/examples/04-responsive-card-rail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-responsive-card-rail.js","sourceRoot":"","sources":["../../../../src/components/Grid/examples/04-responsive-card-rail.tsx"],"names":[],"mappings":"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"}

package/dist/components/Grid/examples/index.d.ts

@@ -1,3 +1,9 @@
 export { default as Example1 } from './01-basic-grid.js';
 export { metadata as metadata1 } from './01-basic-grid.js';
+export { default as Example2 } from './02-track-placement.js';
+export { metadata as metadata2 } from './02-track-placement.js';
+export { default as Example3 } from './03-editorial-spans.js';
+export { metadata as metadata3 } from './03-editorial-spans.js';
+export { default as Example4 } from './04-responsive-card-rail.js';
+export { metadata as metadata4 } from './04-responsive-card-rail.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Grid/examples/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Grid/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Grid/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/components/Grid/examples/index.js

@@ -1,3 +1,9 @@
 export { default as Example1 } from './01-basic-grid.js';
 export { metadata as metadata1 } from './01-basic-grid.js';
+export { default as Example2 } from './02-track-placement.js';
+export { metadata as metadata2 } from './02-track-placement.js';
+export { default as Example3 } from './03-editorial-spans.js';
+export { metadata as metadata3 } from './03-editorial-spans.js';
+export { default as Example4 } from './04-responsive-card-rail.js';
+export { metadata as metadata4 } from './04-responsive-card-rail.js';
 //# sourceMappingURL=index.js.map

package/dist/components/Grid/examples/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Grid/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Grid/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/components/Grid/examples.json

@@ -3,5 +3,20 @@
         "title": "Basic Grid",
         "description": "A simple grid layout with multiple cells. Use this for organizing content in a responsive grid structure.",
         "code": "import React from 'react';\nimport { Grid } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Grid columns={3} gap=\"md\">\n      <div style={{ padding: '1rem', background: '#e0e0e0' }}>Cell 1</div>\n      <div style={{ padding: '1rem', background: '#d0d0d0' }}>Cell 2</div>\n      <div style={{ padding: '1rem', background: '#c0c0c0' }}>Cell 3</div>\n      <div style={{ padding: '1rem', background: '#b0b0b0' }}>Cell 4</div>\n      <div style={{ padding: '1rem', background: '#a0a0a0' }}>Cell 5</div>\n      <div style={{ padding: '1rem', background: '#909090' }}>Cell 6</div>\n    </Grid>\n  );\n}"
+    },
+    "02-track-placement": {
+        "title": "Track Placement",
+        "description": "Adjust columns, gap, alignment, and auto-placement flow to explore the CSS Grid track model.",
+        "code": "\"use client\";\n\nimport React from 'react'\nimport { Grid, Frame } from 'ui-lab-components'\nimport type { GridProps } from 'ui-lab-components'\nimport type { ControlDef } from '@/types'\n\ntype GridColumnsValue = '1' | '2' | '3' | '4' | '5' | '6' | 'auto-fit' | 'auto-fill';\ntype GridGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nconst BASE_CELL_STYLE = {\n  '--frame-fill': 'var(--background-900)',\n  '--frame-stroke-color': 'var(--background-600)',\n} as React.CSSProperties;\n\nexport const controls: ControlDef[] = [\n  {\n    name: 'columns',\n    label: 'Columns',\n    type: 'select',\n    options: [\n      { label: '1 Column', value: '1' },\n      { label: '2 Columns', value: '2' },\n      { label: '3 Columns', value: '3' },\n      { label: '4 Columns', value: '4' },\n      { label: '5 Columns', value: '5' },\n      { label: '6 Columns', value: '6' },\n      { label: 'Auto Fit', value: 'auto-fit' },\n      { label: 'Auto Fill', value: 'auto-fill' },\n    ],\n    defaultValue: '3',\n  },\n  {\n    name: 'gap',\n    label: 'Gap Token',\n    type: 'select',\n    options: [\n      { label: 'Extra Small', value: 'xs' },\n      { label: 'Small', value: 'sm' },\n      { label: 'Medium', value: 'md' },\n      { label: 'Large', value: 'lg' },\n      { label: 'Extra Large', value: 'xl' },\n    ],\n    defaultValue: 'md',\n  },\n  {\n    name: 'justifyItems',\n    label: 'Inline Alignment',\n    type: 'select',\n    options: [\n      { label: 'Stretch', value: 'stretch' },\n      { label: 'Start', value: 'start' },\n      { label: 'Center', value: 'center' },\n      { label: 'End', value: 'end' },\n    ],\n    defaultValue: 'stretch',\n  },\n  {\n    name: 'alignItems',\n    label: 'Block Alignment',\n    type: 'select',\n    options: [\n      { label: 'Stretch', value: 'stretch' },\n      { label: 'Start', value: 'start' },\n      { label: 'Center', value: 'center' },\n      { label: 'End', value: 'end' },\n      { label: 'Baseline', value: 'baseline' },\n    ],\n    defaultValue: 'stretch',\n  },\n  {\n    name: 'autoFlow',\n    label: 'Auto Placement',\n    type: 'select',\n    options: [\n      { label: 'Row', value: 'row' },\n      { label: 'Column', value: 'column' },\n      { label: 'Row Dense', value: 'row-dense' },\n      { label: 'Column Dense', value: 'column-dense' },\n    ],\n    defaultValue: 'row',\n  },\n  {\n    name: 'frameCount',\n    label: 'Panels',\n    type: 'stepper',\n    defaultValue: 6,\n    min: 4,\n    max: 12,\n    step: 1,\n  },\n];\n\nexport const previewLayout = 'start' as const;\nexport const resizable = true;\n\nfunction getColumns(value: unknown): GridColumnsValue {\n  if (value === '1' || value === '2' || value === '4' || value === '5' || value === '6' || value === 'auto-fit' || value === 'auto-fill') return value;\n  return '3';\n}\n\nfunction toColumns(value: GridColumnsValue): number | 'auto-fit' | 'auto-fill' {\n  if (value === 'auto-fit' || value === 'auto-fill') return value;\n  return Number(value);\n}\n\nfunction getApproxColumnCount(value: GridColumnsValue) {\n  if (value === 'auto-fit' || value === 'auto-fill') return 4;\n  return Number(value);\n}\n\nfunction getGap(value: unknown): GridGap {\n  if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl') return value;\n  return 'md';\n}\n\nfunction getJustifyItems(value: unknown): NonNullable<GridProps['justifyItems']> {\n  if (value === 'start' || value === 'center' || value === 'end') return value;\n  return 'stretch';\n}\n\nfunction getAlignItems(value: unknown): NonNullable<GridProps['alignItems']> {\n  if (value === 'start' || value === 'center' || value === 'end' || value === 'baseline') return value;\n  return 'stretch';\n}\n\nfunction getAutoFlow(value: unknown): NonNullable<GridProps['autoFlow']> {\n  if (value === 'column' || value === 'row-dense' || value === 'column-dense') return value;\n  return 'row';\n}\n\nfunction getFrameCount(value: unknown, min: number, max: number, fallback: number) {\n  const n = typeof value === 'number' ? value : Number(value);\n  if (Number.isNaN(n)) return fallback;\n  return Math.min(max, Math.max(min, Math.round(n)));\n}\n\nfunction span(trackCount: number, desired: number) {\n  return `span ${Math.max(1, Math.min(desired, trackCount))}`;\n}\n\nfunction getSpecs(trackCount: number, frameCount: number) {\n  if (trackCount <= 2) {\n    const pattern = [{ minHeight: '5rem' }, { minHeight: '3rem' }, { minHeight: '4.5rem' }];\n    return [\n      { minHeight: '3rem' },\n      { minHeight: '8rem' },\n      ...Array.from({ length: Math.max(frameCount - 2, 0) }, (_, i) => ({ minHeight: pattern[i % pattern.length].minHeight })),\n    ].map(s => ({ style: { width: '100%', ...s } as React.CSSProperties }));\n  }\n  if (trackCount === 3) {\n    const pattern = [\n      { width: '100%', minHeight: '6rem', gridColumn: 'span 2' },\n      { width: '100%', minHeight: '3rem' },\n      { width: '100%', minHeight: '4.5rem' },\n    ];\n    return [\n      { style: { width: '100%', minHeight: '9rem', gridColumn: 'span 1', gridRow: 'span 2' } as React.CSSProperties },\n      { style: { width: '100%', minHeight: '5rem', gridColumn: 'span 2' } as React.CSSProperties },\n      { style: { width: '100%', minHeight: '3rem' } as React.CSSProperties },\n      { style: { width: '100%', minHeight: '3rem' } as React.CSSProperties },\n      ...Array.from({ length: Math.max(frameCount - 4, 0) }, (_, i) => ({ style: pattern[i % pattern.length] as React.CSSProperties })),\n    ];\n  }\n  const pattern = [\n    { width: '100%', minHeight: '6.5rem', gridColumn: span(trackCount, 2) },\n    { width: '100%', minHeight: '3rem' },\n    { width: '100%', minHeight: '4rem' },\n    { width: '100%', minHeight: '5rem', gridColumn: span(trackCount, 2) },\n  ];\n  return [\n    { style: { width: '100%', minHeight: '10rem', gridRow: 'span 2' } as React.CSSProperties },\n    { style: { width: '100%', minHeight: '6rem', gridColumn: span(trackCount - 1, trackCount - 1) } as React.CSSProperties },\n    { style: { width: '100%', minHeight: '3rem' } as React.CSSProperties },\n    { style: { width: '100%', minHeight: '3rem' } as React.CSSProperties },\n    ...Array.from({ length: Math.max(frameCount - 4, 0) }, (_, i) => ({ style: pattern[i % pattern.length] as React.CSSProperties })),\n  ];\n}\n\nexport function renderPreview(props: Record<string, unknown>) {\n  const columns = getColumns(props.columns);\n  const frameCount = getFrameCount(props.frameCount, 4, 12, 6);\n  const specs = getSpecs(getApproxColumnCount(columns), frameCount);\n\n  return (\n    <Grid\n      columns={toColumns(columns)}\n      gap={getGap(props.gap)}\n      justifyItems={getJustifyItems(props.justifyItems)}\n      alignItems={getAlignItems(props.alignItems)}\n      autoFlow={getAutoFlow(props.autoFlow)}\n      className=\"w-full\"\n    >\n      {specs.map((spec, index) => (\n        <Frame key={index} pathStroke=\"dashed\" style={{ ...BASE_CELL_STYLE, ...spec.style }} className=\"w-full h-full\">\n          <div className=\"size-full\" />\n        </Frame>\n      ))}\n    </Grid>\n  );\n}\n\nexport default function Example() {\n  return renderPreview({ columns: '3', gap: 'md', justifyItems: 'stretch', alignItems: 'stretch', autoFlow: 'row', frameCount: 6 });\n}"
+    },
+    "03-editorial-spans": {
+        "title": "Editorial Spans",
+        "description": "Dense auto-flow grid with mixed column spans for editorial content layouts.",
+        "code": "\"use client\";\n\nimport React from 'react'\nimport { Grid, Frame } from 'ui-lab-components'\nimport type { GridProps } from 'ui-lab-components'\nimport type { ControlDef } from '@/types'\n\ntype GridColumnsValue = '1' | '2' | '3' | '4' | '5' | '6' | 'auto-fit' | 'auto-fill';\ntype GridGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nconst BASE_CELL_STYLE = {\n  '--frame-fill': 'var(--background-900)',\n  '--frame-stroke-color': 'var(--background-600)',\n} as React.CSSProperties;\n\nexport const controls: ControlDef[] = [\n  {\n    name: 'columns',\n    label: 'Columns',\n    type: 'select',\n    options: [\n      { label: '1 Column', value: '1' },\n      { label: '2 Columns', value: '2' },\n      { label: '3 Columns', value: '3' },\n      { label: '4 Columns', value: '4' },\n      { label: '5 Columns', value: '5' },\n      { label: '6 Columns', value: '6' },\n      { label: 'Auto Fit', value: 'auto-fit' },\n      { label: 'Auto Fill', value: 'auto-fill' },\n    ],\n    defaultValue: '4',\n  },\n  {\n    name: 'gap',\n    label: 'Gap Token',\n    type: 'select',\n    options: [\n      { label: 'Extra Small', value: 'xs' },\n      { label: 'Small', value: 'sm' },\n      { label: 'Medium', value: 'md' },\n      { label: 'Large', value: 'lg' },\n      { label: 'Extra Large', value: 'xl' },\n    ],\n    defaultValue: 'md',\n  },\n  {\n    name: 'justifyItems',\n    label: 'Inline Alignment',\n    type: 'select',\n    options: [\n      { label: 'Stretch', value: 'stretch' },\n      { label: 'Start', value: 'start' },\n      { label: 'Center', value: 'center' },\n      { label: 'End', value: 'end' },\n    ],\n    defaultValue: 'stretch',\n  },\n  {\n    name: 'alignItems',\n    label: 'Block Alignment',\n    type: 'select',\n    options: [\n      { label: 'Stretch', value: 'stretch' },\n      { label: 'Start', value: 'start' },\n      { label: 'Center', value: 'center' },\n      { label: 'End', value: 'end' },\n      { label: 'Baseline', value: 'baseline' },\n    ],\n    defaultValue: 'stretch',\n  },\n  {\n    name: 'autoFlow',\n    label: 'Auto Placement',\n    type: 'select',\n    options: [\n      { label: 'Row', value: 'row' },\n      { label: 'Column', value: 'column' },\n      { label: 'Row Dense', value: 'row-dense' },\n      { label: 'Column Dense', value: 'column-dense' },\n    ],\n    defaultValue: 'row-dense',\n  },\n  {\n    name: 'frameCount',\n    label: 'Panels',\n    type: 'stepper',\n    defaultValue: 7,\n    min: 5,\n    max: 12,\n    step: 1,\n  },\n];\n\nexport const previewLayout = 'start' as const;\nexport const resizable = true;\n\nfunction getColumns(value: unknown): GridColumnsValue {\n  if (value === '1' || value === '2' || value === '4' || value === '5' || value === '6' || value === 'auto-fit' || value === 'auto-fill') return value;\n  return '3';\n}\n\nfunction toColumns(value: GridColumnsValue): number | 'auto-fit' | 'auto-fill' {\n  if (value === 'auto-fit' || value === 'auto-fill') return value;\n  return Number(value);\n}\n\nfunction getApproxColumnCount(value: GridColumnsValue) {\n  if (value === 'auto-fit' || value === 'auto-fill') return 4;\n  return Number(value);\n}\n\nfunction getGap(value: unknown): GridGap {\n  if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl') return value;\n  return 'md';\n}\n\nfunction getJustifyItems(value: unknown): NonNullable<GridProps['justifyItems']> {\n  if (value === 'start' || value === 'center' || value === 'end') return value;\n  return 'stretch';\n}\n\nfunction getAlignItems(value: unknown): NonNullable<GridProps['alignItems']> {\n  if (value === 'start' || value === 'center' || value === 'end' || value === 'baseline') return value;\n  return 'stretch';\n}\n\nfunction getAutoFlow(value: unknown): NonNullable<GridProps['autoFlow']> {\n  if (value === 'column' || value === 'row-dense' || value === 'column-dense') return value;\n  return 'row';\n}\n\nfunction getFrameCount(value: unknown, min: number, max: number, fallback: number) {\n  const n = typeof value === 'number' ? value : Number(value);\n  if (Number.isNaN(n)) return fallback;\n  return Math.min(max, Math.max(min, Math.round(n)));\n}\n\nfunction span(trackCount: number, desired: number) {\n  return `span ${Math.max(1, Math.min(desired, trackCount))}`;\n}\n\nfunction getSpecs(trackCount: number, frameCount: number) {\n  if (trackCount <= 2) {\n    const pattern = [{ minHeight: '4rem' }, { minHeight: '5.5rem' }, { minHeight: '3rem' }];\n    return [\n      { style: { width: '100%', minHeight: '8rem' } as React.CSSProperties },\n      ...Array.from({ length: Math.max(frameCount - 1, 0) }, (_, i) => ({ style: { width: '100%', ...pattern[i % pattern.length] } as React.CSSProperties })),\n    ];\n  }\n  const pattern = [\n    { width: '100%', minHeight: '3rem' },\n    { width: '100%', minHeight: '6.5rem', gridColumn: span(trackCount, 2) },\n    { width: '100%', minHeight: '4rem' },\n    { width: '100%', minHeight: '3rem' },\n  ];\n  return [\n    { style: { width: '100%', minHeight: '8rem', gridColumn: span(trackCount, Math.max(trackCount - 1, 2)) } as React.CSSProperties },\n    { style: { width: '100%', minHeight: '8rem' } as React.CSSProperties },\n    { style: { width: '100%', minHeight: '3rem' } as React.CSSProperties },\n    { style: { width: '100%', minHeight: '5rem', gridColumn: span(trackCount, 2) } as React.CSSProperties },\n    { style: { width: '100%', minHeight: '5rem' } as React.CSSProperties },\n    ...Array.from({ length: Math.max(frameCount - 5, 0) }, (_, i) => ({ style: pattern[i % pattern.length] as React.CSSProperties })),\n  ];\n}\n\nexport function renderPreview(props: Record<string, unknown>) {\n  const columns = getColumns(props.columns);\n  const frameCount = getFrameCount(props.frameCount, 5, 12, 7);\n  const specs = getSpecs(getApproxColumnCount(columns), frameCount);\n\n  return (\n    <Grid\n      columns={toColumns(columns)}\n      gap={getGap(props.gap)}\n      justifyItems={getJustifyItems(props.justifyItems)}\n      alignItems={getAlignItems(props.alignItems)}\n      autoFlow={getAutoFlow(props.autoFlow)}\n      className=\"w-full\"\n    >\n      {specs.map((spec, index) => (\n        <Frame key={index} pathStroke=\"dashed\" style={{ ...BASE_CELL_STYLE, ...spec.style }} className=\"w-full h-full\">\n          <div className=\"size-full\" />\n        </Frame>\n      ))}\n    </Grid>\n  );\n}\n\nexport default function Example() {\n  return renderPreview({ columns: '4', gap: 'md', justifyItems: 'stretch', alignItems: 'stretch', autoFlow: 'row-dense', frameCount: 7 });\n}"
+    },
+    "04-responsive-card-rail": {
+        "title": "Responsive Card Rail",
+        "description": "Grid that adapts column count and gap based on container width using responsive prop objects.",
+        "code": "\"use client\";\n\nimport React from 'react'\nimport { Grid, Frame } from 'ui-lab-components'\nimport type { ControlDef } from '@/types'\n\ntype GridColumnsValue = '2' | '3' | '4' | 'auto-fit' | 'auto-fill';\ntype GridGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nconst BASE_CELL_STYLE = {\n  '--frame-fill': 'var(--background-900)',\n  '--frame-stroke-color': 'var(--background-600)',\n} as React.CSSProperties;\n\nexport const controls: ControlDef[] = [\n  {\n    name: 'columns',\n    label: 'Columns',\n    type: 'select',\n    options: [\n      { label: '2 Columns', value: '2' },\n      { label: '3 Columns', value: '3' },\n      { label: '4 Columns', value: '4' },\n      { label: 'Auto Fit', value: 'auto-fit' },\n      { label: 'Auto Fill', value: 'auto-fill' },\n    ],\n    defaultValue: '4',\n  },\n  {\n    name: 'gap',\n    label: 'Base Gap Token',\n    type: 'select',\n    options: [\n      { label: 'Small', value: 'sm' },\n      { label: 'Medium', value: 'md' },\n      { label: 'Large', value: 'lg' },\n      { label: 'Extra Large', value: 'xl' },\n    ],\n    defaultValue: 'md',\n  },\n  {\n    name: 'rowGap',\n    label: 'Row Gap',\n    type: 'select',\n    options: [\n      { label: 'Match Gap', value: 'inherit' },\n      { label: 'Small', value: 'sm' },\n      { label: 'Medium', value: 'md' },\n      { label: 'Large', value: 'lg' },\n    ],\n    defaultValue: 'inherit',\n  },\n  {\n    name: 'columnGap',\n    label: 'Column Gap',\n    type: 'select',\n    options: [\n      { label: 'Match Gap', value: 'inherit' },\n      { label: 'Small', value: 'sm' },\n      { label: 'Medium', value: 'md' },\n      { label: 'Large', value: 'lg' },\n    ],\n    defaultValue: 'inherit',\n  },\n  {\n    name: 'frameCount',\n    label: 'Cards',\n    type: 'stepper',\n    defaultValue: 6,\n    min: 4,\n    max: 10,\n    step: 1,\n  },\n  {\n    name: 'responsive',\n    label: 'Enable Responsive Object',\n    type: 'toggle',\n    defaultValue: true,\n  },\n];\n\nexport const previewLayout = 'start' as const;\nexport const resizable = true;\n\nfunction getColumns(value: unknown): GridColumnsValue {\n  if (value === '2' || value === '3' || value === 'auto-fit' || value === 'auto-fill') return value;\n  return '4';\n}\n\nfunction toColumns(value: GridColumnsValue): number | 'auto-fit' | 'auto-fill' {\n  if (value === 'auto-fit' || value === 'auto-fill') return value;\n  return Number(value);\n}\n\nfunction getGap(value: unknown): GridGap {\n  if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl') return value;\n  return 'md';\n}\n\nfunction getOptionalGap(value: unknown): GridGap | undefined {\n  if (value === 'inherit' || value == null) return undefined;\n  return getGap(value);\n}\n\nfunction getFrameCount(value: unknown, min: number, max: number, fallback: number) {\n  const n = typeof value === 'number' ? value : Number(value);\n  if (Number.isNaN(n)) return fallback;\n  return Math.min(max, Math.max(min, Math.round(n)));\n}\n\nconst SPEC_PATTERN = [\n  { minHeight: '9rem' },\n  { minHeight: '4rem' },\n  { minHeight: '3rem' },\n  { minHeight: '5rem' },\n  { minHeight: '3.5rem' },\n  { minHeight: '6rem' },\n];\n\nexport function renderPreview(props: Record<string, unknown>) {\n  const columns = getColumns(props.columns);\n  const baseColumns = toColumns(columns);\n  const gap = getGap(props.gap);\n  const responsive = Boolean(props.responsive);\n  const frameCount = getFrameCount(props.frameCount, 4, 10, 6);\n  const specs = Array.from({ length: frameCount }, (_, i) => SPEC_PATTERN[i % SPEC_PATTERN.length]);\n\n  return (\n    <Grid\n      columns={responsive ? { sm: 1, md: 2, lg: baseColumns } : baseColumns}\n      gap={responsive ? { sm: 'sm', md: gap, lg: gap } : gap}\n      rowGap={getOptionalGap(props.rowGap)}\n      columnGap={getOptionalGap(props.columnGap)}\n      responsive={responsive}\n      className=\"w-full\"\n    >\n      {specs.map((spec, index) => (\n        <Frame key={index} pathStroke=\"dashed\" style={{ ...BASE_CELL_STYLE, width: '100%', minHeight: spec.minHeight } as React.CSSProperties} className=\"w-full h-full\">\n          <div className=\"size-full\" />\n        </Frame>\n      ))}\n    </Grid>\n  );\n}\n\nexport default function Example() {\n  return renderPreview({ columns: '4', gap: 'md', rowGap: 'inherit', columnGap: 'inherit', frameCount: 6, responsive: true });\n}"
     }
 }

package/dist/components/Grid/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAStD,QAAA,MAAM,YAAY,EAAE,UAAU,EAmE7B,CAAC;AAiBF,eAAO,MAAM,UAAU,EAAE,eAiExB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAetD,QAAA,MAAM,YAAY,EAAE,UAAU,EAmE7B,CAAC;AAiBF,eAAO,MAAM,UAAU,EAAE,eAiExB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,cAAc,qBAAqB,CAAC"}

package/dist/components/Grid/index.js

@@ -1,10 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Grid } from 'ui-lab-components';
 import Example1, { metadata as metadata1 } from './examples/01-basic-grid.js';
+import Example2, { metadata as metadata2, controls as controls2, renderPreview as renderPreview2, previewLayout as previewLayout2, resizable as resizable2 } from './examples/02-track-placement.js';
+import Example3, { metadata as metadata3, controls as controls3, renderPreview as renderPreview3, previewLayout as previewLayout3, resizable as resizable3 } from './examples/03-editorial-spans.js';
+import Example4, { metadata as metadata4, controls as controls4, renderPreview as renderPreview4, previewLayout as previewLayout4, resizable as resizable4 } from './examples/04-responsive-card-rail.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 const examplesData = [
     { id: '01-basic-grid', Component: Example1, metadata: metadata1 },
+    { id: '02-track-placement', Component: Example2, metadata: metadata2, controls: controls2, renderPreview: renderPreview2, previewLayout: previewLayout2, resizable: resizable2 },
+    { id: '03-editorial-spans', Component: Example3, metadata: metadata3, controls: controls3, renderPreview: renderPreview3, previewLayout: previewLayout3, resizable: resizable3 },
+    { id: '04-responsive-card-rail', Component: Example4, metadata: metadata4, controls: controls4, renderPreview: renderPreview4, previewLayout: previewLayout4, resizable: resizable4 },
 ];
 const gridControls = [
     {

package/dist/components/Grid/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Grid/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Grid/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Group/examples/02-create-project.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=02-create-project.d.ts.map

package/dist/components/Group/examples/02-create-project.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-create-project.d.ts","sourceRoot":"","sources":["../../../../src/components/Group/examples/02-create-project.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAU9B"}

package/dist/components/Group/examples/02-create-project.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider, Group } from "ui-lab-components";
+import { FaPlus } from "react-icons/fa6";
+export const metadata = {
+    title: "Create Project",
+    description: "A primary grouped action for creating a named item.",
+};
+export default function Example() {
+    return (_jsxs(Group, { variant: "primary", orientation: "horizontal", spacing: "xs", children: [_jsx(Group.Input, { "aria-label": "Project name", placeholder: "Untitled project", className: "w-56" }), _jsx(Divider, { orientation: "vertical" }), _jsxs(Group.Button, { children: [_jsx(FaPlus, { className: "mr-1.5" }), " Create"] })] }));
+}
+//# sourceMappingURL=02-create-project.js.map

package/dist/components/Group/examples/02-create-project.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-create-project.js","sourceRoot":"","sources":["../../../../src/components/Group/examples/02-create-project.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,gBAAgB;IACvB,WAAW,EAAE,qDAAqD;CACnE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,MAAC,KAAK,IAAC,OAAO,EAAC,SAAS,EAAC,WAAW,EAAC,YAAY,EAAC,OAAO,EAAC,IAAI,aAC5D,KAAC,KAAK,CAAC,KAAK,kBAAY,cAAc,EAAC,WAAW,EAAC,kBAAkB,EAAC,SAAS,EAAC,MAAM,GAAG,EACzF,KAAC,OAAO,IAAC,WAAW,EAAC,UAAU,GAAG,EAClC,MAAC,KAAK,CAAC,MAAM,eACX,KAAC,MAAM,IAAC,SAAS,EAAC,QAAQ,GAAG,eAChB,IACT,CACT,CAAC;AACJ,CAAC"}

package/dist/components/Group/examples/03-filter-bar.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=03-filter-bar.d.ts.map

package/dist/components/Group/examples/03-filter-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-filter-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/Group/examples/03-filter-bar.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAsB9B"}

package/dist/components/Group/examples/03-filter-bar.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Divider, Group, Select } from "ui-lab-components";
+import { FaMagnifyingGlass, FaFilter } from "react-icons/fa6";
+export const metadata = {
+    title: "Filter Bar with Selects",
+    description: "Horizontal group combining Select dropdowns with action buttons for filtering interfaces.",
+};
+export default function Example() {
+    const [status, setStatus] = useState("active");
+    return (_jsxs(Group, { variant: "default", orientation: "horizontal", children: [_jsx(Group.Input, { icon: _jsx(FaMagnifyingGlass, {}), placeholder: "Search..." }), _jsx(Divider, {}), _jsxs(Group.Select, { selectedKey: status, onSelectionChange: setStatus, className: "w-36", children: [_jsx(Select.Trigger, { children: _jsx(Select.Value, { placeholder: "Status" }) }), _jsx(Select.Content, { children: _jsxs(Select.List, { children: [_jsx(Select.Item, { value: "active", textValue: "Active", children: "Active" }), _jsx(Select.Item, { value: "inactive", textValue: "Inactive", children: "Inactive" }), _jsx(Select.Item, { value: "pending", textValue: "Pending", children: "Pending" })] }) })] }), _jsx(Divider, {}), _jsxs(Group.Button, { size: "md", children: [_jsx(FaFilter, { className: "mr-1.5" }), " Apply"] })] }));
+}
+//# sourceMappingURL=03-filter-bar.js.map

package/dist/components/Group/examples/03-filter-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-filter-bar.js","sourceRoot":"","sources":["../../../../src/components/Group/examples/03-filter-bar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,yBAAyB;IAChC,WAAW,EAAE,2FAA2F;CACzG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAyB,QAAQ,CAAC,CAAC;IAEvE,OAAO,CACL,MAAC,KAAK,IAAC,OAAO,EAAC,SAAS,EAAC,WAAW,EAAC,YAAY,aAC/C,KAAC,KAAK,CAAC,KAAK,IAAC,IAAI,EAAE,KAAC,iBAAiB,KAAG,EAAE,WAAW,EAAC,WAAW,GACnD,EACd,KAAC,OAAO,KAAG,EACX,MAAC,KAAK,CAAC,MAAM,IAAC,WAAW,EAAE,MAAM,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,aAC/E,KAAC,MAAM,CAAC,OAAO,cAAC,KAAC,MAAM,CAAC,KAAK,IAAC,WAAW,EAAC,QAAQ,GAAG,GAAiB,EACtE,KAAC,MAAM,CAAC,OAAO,cACb,MAAC,MAAM,CAAC,IAAI,eACV,KAAC,MAAM,CAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAC,QAAQ,uBAAqB,EACnE,KAAC,MAAM,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,SAAS,EAAC,UAAU,yBAAuB,EACzE,KAAC,MAAM,CAAC,IAAI,IAAC,KAAK,EAAC,SAAS,EAAC,SAAS,EAAC,SAAS,wBAAsB,IAC1D,GACC,IACJ,EACf,KAAC,OAAO,KAAG,EACX,MAAC,KAAK,CAAC,MAAM,IAAC,IAAI,EAAC,IAAI,aAAC,KAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ,GAAG,cAAqB,IACtE,CACT,CAAC;AACJ,CAAC"}

package/dist/components/Group/examples/04-documentation-search.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=04-documentation-search.d.ts.map

package/dist/components/Group/examples/04-documentation-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-documentation-search.d.ts","sourceRoot":"","sources":["../../../../src/components/Group/examples/04-documentation-search.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAY9B"}

package/dist/components/Group/examples/04-documentation-search.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider, Group } from "ui-lab-components";
+import { FaMagnifyingGlass } from "react-icons/fa6";
+export const metadata = {
+    title: "Documentation Search",
+    description: "A search input with an icon prefix and joined submit button.",
+};
+export default function Example() {
+    return (_jsxs(Group, { variant: "secondary", children: [_jsx("div", { className: "bg-background-800 flex items-center px-3 text-foreground-400", children: _jsx(FaMagnifyingGlass, {}) }), _jsx(Divider, {}), _jsx(Group.Input, { placeholder: "Search documentation...", className: "w-64" }), _jsx(Divider, {}), _jsx(Group.Button, { className: "w-full", children: "Search" })] }));
+}
+//# sourceMappingURL=04-documentation-search.js.map

package/dist/components/Group/examples/04-documentation-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-documentation-search.js","sourceRoot":"","sources":["../../../../src/components/Group/examples/04-documentation-search.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,sBAAsB;IAC7B,WAAW,EAAE,8DAA8D;CAC5E,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,MAAC,KAAK,IAAC,OAAO,EAAC,WAAW,aACxB,cAAK,SAAS,EAAC,8DAA8D,YAC3E,KAAC,iBAAiB,KAAG,GACjB,EACN,KAAC,OAAO,KAAG,EACX,KAAC,KAAK,CAAC,KAAK,IAAC,WAAW,EAAC,yBAAyB,EAAC,SAAS,EAAC,MAAM,GAAG,EACtE,KAAC,OAAO,KAAG,EACX,KAAC,KAAK,CAAC,MAAM,IAAC,SAAS,EAAC,QAAQ,uBAAsB,IAChD,CACT,CAAC;AACJ,CAAC"}

package/dist/components/Group/examples/05-email-signup.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=05-email-signup.d.ts.map

package/dist/components/Group/examples/05-email-signup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"05-email-signup.d.ts","sourceRoot":"","sources":["../../../../src/components/Group/examples/05-email-signup.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAY9B"}