ui-lab-registry 0.3.44 → 0.3.45

package/dist/components/Expand/examples/04-directions.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Expand, Flex } from 'ui-lab-components';
+export const metadata = {
+    title: 'Reveal Directions',
+    description: 'Content can reveal from above or horizontally using the from prop on Expand.Content.',
+};
+export default function Example() {
+    return (_jsxs(Flex, { direction: "column", gap: "lg", className: "w-full max-w-sm", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs text-foreground-500 mb-2 px-1", children: "from=\"above\"" }), _jsx("div", { className: "border border-background-700 rounded-sm", children: _jsx(Expand, { title: "Reveal above", children: _jsx(Expand.Content, { from: "above", children: _jsx("p", { className: "text-sm text-foreground-400 px-3 py-3", children: "This content slides in from above the trigger." }) }) }) })] }), _jsxs("div", { children: [_jsx("p", { className: "text-xs text-foreground-500 mb-2 px-1", children: "from=\"right\"" }), _jsx("div", { className: "border border-background-700 rounded-sm", children: _jsx(Expand, { title: "Reveal right", children: _jsx(Expand.Content, { from: "right", children: _jsx("p", { className: "text-sm text-foreground-400 px-3 py-3", children: "Expands horizontally to the right." }) }) }) })] })] }));
+}
+//# sourceMappingURL=04-directions.js.map

package/dist/components/Expand/examples/04-directions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-directions.js","sourceRoot":"","sources":["../../../../src/components/Expand/examples/04-directions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,sFAAsF;CACpG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAC,iBAAiB,aAC3D,0BACE,YAAG,SAAS,EAAC,uCAAuC,+BAAiB,EACrE,cAAK,SAAS,EAAC,yCAAyC,YACtD,KAAC,MAAM,IAAC,KAAK,EAAC,cAAc,YAC1B,KAAC,MAAM,CAAC,OAAO,IAAC,IAAI,EAAC,OAAO,YAC1B,YAAG,SAAS,EAAC,uCAAuC,+DAAmD,GACxF,GACV,GACL,IACF,EACN,0BACE,YAAG,SAAS,EAAC,uCAAuC,+BAAiB,EACrE,cAAK,SAAS,EAAC,yCAAyC,YACtD,KAAC,MAAM,IAAC,KAAK,EAAC,cAAc,YAC1B,KAAC,MAAM,CAAC,OAAO,IAAC,IAAI,EAAC,OAAO,YAC1B,YAAG,SAAS,EAAC,uCAAuC,mDAAuC,GAC5E,GACV,GACL,IACF,IACD,CACR,CAAC;AACJ,CAAC"}

package/dist/components/Expand/examples/05-settings-panel.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-settings-panel.d.ts.map

package/dist/components/Expand/examples/05-settings-panel.d.ts.map

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

package/dist/components/Expand/examples/05-settings-panel.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Expand, Flex } from 'ui-lab-components';
+import { FaGear, FaCode } from 'react-icons/fa6';
+export const metadata = {
+    title: 'Settings Panel',
+    description: 'Grouped settings sections using compound mode with icons, dividers, and a list of rows.',
+};
+export default function Example() {
+    return (_jsxs("div", { className: "w-full max-w-sm border border-background-700 rounded-sm divide-y divide-background-700", children: [_jsxs(Expand, { defaultExpanded: true, children: [_jsxs(Expand.Trigger, { children: [_jsxs(Flex, { align: "center", gap: "xs", className: "flex-1 px-3 py-2.5", children: [_jsx(FaGear, { className: "text-foreground-400 text-xs" }), _jsx("span", { className: "text-sm font-medium", children: "General" })] }), _jsx(Expand.Icon, {})] }), _jsx(Expand.Divider, {}), _jsx(Expand.Content, { children: _jsx(Flex, { direction: "column", className: "divide-y divide-background-700", children: ['Language', 'Timezone', 'Date format'].map((setting) => (_jsxs(Flex, { justify: "between", align: "center", className: "px-3 py-2.5", children: [_jsx("span", { className: "text-sm text-foreground-300", children: setting }), _jsx("span", { className: "text-xs text-foreground-500", children: "Auto" })] }, setting))) }) })] }), _jsxs(Expand, { children: [_jsxs(Expand.Trigger, { children: [_jsxs(Flex, { align: "center", gap: "xs", className: "flex-1 px-3 py-2.5", children: [_jsx(FaCode, { className: "text-foreground-400 text-xs" }), _jsx("span", { className: "text-sm font-medium", children: "Developer" })] }), _jsx(Expand.Icon, {})] }), _jsx(Expand.Divider, {}), _jsx(Expand.Content, { children: _jsx(Flex, { direction: "column", className: "divide-y divide-background-700", children: ['API keys', 'Webhooks', 'Debug mode'].map((setting) => (_jsxs(Flex, { justify: "between", align: "center", className: "px-3 py-2.5", children: [_jsx("span", { className: "text-sm text-foreground-300", children: setting }), _jsx("span", { className: "text-xs text-foreground-500", children: "Off" })] }, setting))) }) })] })] }));
+}
+//# sourceMappingURL=05-settings-panel.js.map

package/dist/components/Expand/examples/05-settings-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"05-settings-panel.js","sourceRoot":"","sources":["../../../../src/components/Expand/examples/05-settings-panel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,gBAAgB;IACvB,WAAW,EAAE,yFAAyF;CACvG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,eAAK,SAAS,EAAC,wFAAwF,aACrG,MAAC,MAAM,IAAC,eAAe,mBACrB,MAAC,MAAM,CAAC,OAAO,eACb,MAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAC,oBAAoB,aAC1D,KAAC,MAAM,IAAC,SAAS,EAAC,6BAA6B,GAAG,EAClD,eAAM,SAAS,EAAC,qBAAqB,wBAAe,IAC/C,EACP,KAAC,MAAM,CAAC,IAAI,KAAG,IACA,EACjB,KAAC,MAAM,CAAC,OAAO,KAAG,EAClB,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAC,gCAAgC,YAChE,CAAC,UAAU,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACxD,MAAC,IAAI,IAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAC,aAAa,aAC1E,eAAM,SAAS,EAAC,6BAA6B,YAAE,OAAO,GAAQ,EAC9D,eAAM,SAAS,EAAC,6BAA6B,qBAAY,KAFhD,OAAO,CAGX,CACR,CAAC,GACG,GACQ,IACV,EACT,MAAC,MAAM,eACL,MAAC,MAAM,CAAC,OAAO,eACb,MAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAC,oBAAoB,aAC1D,KAAC,MAAM,IAAC,SAAS,EAAC,6BAA6B,GAAG,EAClD,eAAM,SAAS,EAAC,qBAAqB,0BAAiB,IACjD,EACP,KAAC,MAAM,CAAC,IAAI,KAAG,IACA,EACjB,KAAC,MAAM,CAAC,OAAO,KAAG,EAClB,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAC,gCAAgC,YAChE,CAAC,UAAU,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACvD,MAAC,IAAI,IAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAC,aAAa,aAC1E,eAAM,SAAS,EAAC,6BAA6B,YAAE,OAAO,GAAQ,EAC9D,eAAM,SAAS,EAAC,6BAA6B,oBAAW,KAF/C,OAAO,CAGX,CACR,CAAC,GACG,GACQ,IACV,IACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/Expand/examples/06-disabled.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=06-disabled.d.ts.map

package/dist/components/Expand/examples/06-disabled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"06-disabled.d.ts","sourceRoot":"","sources":["../../../../src/components/Expand/examples/06-disabled.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAW9B"}

package/dist/components/Expand/examples/06-disabled.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Expand } from 'ui-lab-components';
+export const metadata = {
+    title: 'Disabled State',
+    description: 'An isDisabled section is visually dimmed and blocks interaction.',
+};
+export default function Example() {
+    return (_jsxs("div", { className: "w-full max-w-sm border border-background-700 rounded-sm divide-y divide-background-700", children: [_jsx(Expand, { title: "Available section", children: _jsx("p", { className: "text-sm text-foreground-400 px-3 py-3", children: "This section is accessible and can be expanded." }) }), _jsx(Expand, { title: "Restricted section", isDisabled: true, children: _jsx("p", { className: "text-sm text-foreground-400 px-3 py-3", children: "This content is not accessible." }) })] }));
+}
+//# sourceMappingURL=06-disabled.js.map

package/dist/components/Expand/examples/06-disabled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"06-disabled.js","sourceRoot":"","sources":["../../../../src/components/Expand/examples/06-disabled.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,gBAAgB;IACvB,WAAW,EAAE,kEAAkE;CAChF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,eAAK,SAAS,EAAC,wFAAwF,aACrG,KAAC,MAAM,IAAC,KAAK,EAAC,mBAAmB,YAC/B,YAAG,SAAS,EAAC,uCAAuC,gEAAoD,GACjG,EACT,KAAC,MAAM,IAAC,KAAK,EAAC,oBAAoB,EAAC,UAAU,kBAC3C,YAAG,SAAS,EAAC,uCAAuC,gDAAoC,GACjF,IACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/Expand/examples/07-inline-info.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=07-inline-info.d.ts.map

package/dist/components/Expand/examples/07-inline-info.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"07-inline-info.d.ts","sourceRoot":"","sources":["../../../../src/components/Expand/examples/07-inline-info.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAoB9B"}

package/dist/components/Expand/examples/07-inline-info.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Expand, Flex } from 'ui-lab-components';
+import { FaCircleInfo } from 'react-icons/fa6';
+export const metadata = {
+    title: 'Inline Info',
+    description: 'A contextual disclosure pattern for surfacing supplementary information inline.',
+};
+export default function Example() {
+    return (_jsx("div", { className: "w-full max-w-sm rounded-sm border border-background-700 bg-background-900", children: _jsxs(Expand, { children: [_jsxs(Expand.Trigger, { children: [_jsxs(Flex, { align: "center", gap: "xs", className: "flex-1 px-3 py-2.5", children: [_jsx(FaCircleInfo, { className: "text-foreground-400 text-xs shrink-0" }), _jsx("span", { className: "text-sm font-medium text-foreground-200", children: "Why do we collect this?" })] }), _jsx(Expand.Icon, {})] }), _jsx(Expand.Divider, {}), _jsx(Expand.Content, { children: _jsx("p", { className: "text-sm text-foreground-400 px-3 py-3 leading-relaxed", children: "We use this information only to verify your identity and improve the service. It is never shared with third parties." }) })] }) }));
+}
+//# sourceMappingURL=07-inline-info.js.map

package/dist/components/Expand/examples/07-inline-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"07-inline-info.js","sourceRoot":"","sources":["../../../../src/components/Expand/examples/07-inline-info.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,aAAa;IACpB,WAAW,EAAE,iFAAiF;CAC/F,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,cAAK,SAAS,EAAC,2EAA2E,YACxF,MAAC,MAAM,eACL,MAAC,MAAM,CAAC,OAAO,eACb,MAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAC,oBAAoB,aAC1D,KAAC,YAAY,IAAC,SAAS,EAAC,sCAAsC,GAAG,EACjE,eAAM,SAAS,EAAC,yCAAyC,wCAA+B,IACnF,EACP,KAAC,MAAM,CAAC,IAAI,KAAG,IACA,EACjB,KAAC,MAAM,CAAC,OAAO,KAAG,EAClB,KAAC,MAAM,CAAC,OAAO,cACb,YAAG,SAAS,EAAC,uDAAuD,qIAEhE,GACW,IACV,GACL,CACP,CAAC;AACJ,CAAC"}

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

@@ -1,3 +1,15 @@
-export { default as Example1 } from './01-basic-expand.js';
-export { metadata as metadata1 } from './01-basic-expand.js';
+export { default as Example1 } from './01-basic.js';
+export { metadata as metadata1 } from './01-basic.js';
+export { default as Example2 } from './02-accordion.js';
+export { metadata as metadata2 } from './02-accordion.js';
+export { default as Example3 } from './03-custom-trigger.js';
+export { metadata as metadata3 } from './03-custom-trigger.js';
+export { default as Example4 } from './04-directions.js';
+export { metadata as metadata4 } from './04-directions.js';
+export { default as Example5 } from './05-settings-panel.js';
+export { metadata as metadata5 } from './05-settings-panel.js';
+export { default as Example6 } from './06-disabled.js';
+export { metadata as metadata6 } from './06-disabled.js';
+export { default as Example7 } from './07-inline-info.js';
+export { metadata as metadata7 } from './07-inline-info.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Expand/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Expand/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC"}

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

@@ -1,3 +1,15 @@
-export { default as Example1 } from './01-basic-expand.js';
-export { metadata as metadata1 } from './01-basic-expand.js';
+export { default as Example1 } from './01-basic.js';
+export { metadata as metadata1 } from './01-basic.js';
+export { default as Example2 } from './02-accordion.js';
+export { metadata as metadata2 } from './02-accordion.js';
+export { default as Example3 } from './03-custom-trigger.js';
+export { metadata as metadata3 } from './03-custom-trigger.js';
+export { default as Example4 } from './04-directions.js';
+export { metadata as metadata4 } from './04-directions.js';
+export { default as Example5 } from './05-settings-panel.js';
+export { metadata as metadata5 } from './05-settings-panel.js';
+export { default as Example6 } from './06-disabled.js';
+export { metadata as metadata6 } from './06-disabled.js';
+export { default as Example7 } from './07-inline-info.js';
+export { metadata as metadata7 } from './07-inline-info.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Expand/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Expand/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/Expand/examples.json

@@ -1,7 +1,37 @@
 {
-    "01-basic-expand": {
-        "title": "Basic Expand",
-        "description": "An expandable/collapsible disclosure component. Use this to show and hide content sections while maintaining accessibility and keyboard support.",
-        "code": "import React from 'react';\nimport { Expand } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Expand title=\"What is an Expand component?\">\n      <p className=\"text-foreground-300\">\n        An Expand component is a disclosure widget that expands and collapses content.\n        It's built with React Aria for full accessibility support.\n      </p>\n    </Expand>\n  );\n}"
+    "01-basic": {
+        "title": "Basic",
+        "description": "Preset mode using the title prop — the simplest way to render a labeled expandable section.",
+        "code": "import { Expand } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <div className=\"w-full max-w-sm border border-background-700 rounded-sm divide-y divide-background-700\">\n      <Expand title=\"What is UI Lab?\">\n        <p className=\"text-sm text-foreground-400 px-3 py-3\">\n          UI Lab is a component library built for building beautiful, accessible interfaces with a consistent design system.\n        </p>\n      </Expand>\n    </div>\n  );\n}"
+    },
+    "02-accordion": {
+        "title": "Accordion",
+        "description": "Controlled expand group where only one item can be open at a time.",
+        "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Expand } from 'ui-lab-components';\n\nconst items = [\n  {\n    id: 'shipping',\n    title: 'Shipping & Delivery',\n    content: 'Standard shipping takes 3–5 business days. Express options are available at checkout for next-day delivery.',\n  },\n  {\n    id: 'returns',\n    title: 'Returns & Refunds',\n    content: 'Items can be returned within 30 days of purchase. Refunds are processed within 5–7 business days after we receive the item.',\n  },\n  {\n    id: 'warranty',\n    title: 'Warranty',\n    content: 'All products include a 12-month manufacturer warranty. Extended coverage can be purchased at checkout.',\n  },\n];\n\nexport default function Example() {\n  const [open, setOpen] = useState<string | null>('shipping');\n\n  return (\n    <div className=\"w-full max-w-sm border border-background-700 rounded-sm divide-y divide-background-700\">\n      {items.map((item) => (\n        <Expand\n          key={item.id}\n          title={item.title}\n          isExpanded={open === item.id}\n          onExpandedChange={(expanded) => setOpen(expanded ? item.id : null)}\n        >\n          <p className=\"text-sm text-foreground-400 px-3 py-3\">{item.content}</p>\n        </Expand>\n      ))}\n    </div>\n  );\n}"
+    },
+    "03-custom-trigger": {
+        "title": "Custom Trigger",
+        "description": "Compound mode with a fully composed trigger — custom icon, badge, and layout.",
+        "code": "import { Expand, Flex, Badge } from 'ui-lab-components';\nimport { FaUser } from 'react-icons/fa6';\n\nexport default function Example() {\n  return (\n    <div className=\"w-full max-w-sm border border-background-700 rounded-sm\">\n      <Expand>\n        <Expand.Trigger>\n          <Flex align=\"center\" gap=\"xs\" className=\"flex-1 px-3 py-2.5\">\n            <FaUser className=\"text-foreground-400 text-xs shrink-0\" />\n            <span className=\"text-sm font-medium\">Account Settings</span>\n            <Badge className=\"ml-auto mr-2\">New</Badge>\n          </Flex>\n          <Expand.Icon />\n        </Expand.Trigger>\n        <Expand.Divider />\n        <Expand.Content>\n          <Flex direction=\"column\" gap=\"xs\" className=\"px-3 py-3\">\n            <p className=\"text-sm text-foreground-400\">Manage your profile, password, and notification preferences.</p>\n          </Flex>\n        </Expand.Content>\n      </Expand>\n    </div>\n  );\n}"
+    },
+    "04-directions": {
+        "title": "Reveal Directions",
+        "description": "Content can reveal from above or horizontally using the from prop on Expand.Content.",
+        "code": "import { Expand, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex direction=\"column\" gap=\"lg\" className=\"w-full max-w-sm\">\n      <div>\n        <p className=\"text-xs text-foreground-500 mb-2 px-1\">from=\"above\"</p>\n        <div className=\"border border-background-700 rounded-sm\">\n          <Expand title=\"Reveal above\">\n            <Expand.Content from=\"above\">\n              <p className=\"text-sm text-foreground-400 px-3 py-3\">This content slides in from above the trigger.</p>\n            </Expand.Content>\n          </Expand>\n        </div>\n      </div>\n      <div>\n        <p className=\"text-xs text-foreground-500 mb-2 px-1\">from=\"right\"</p>\n        <div className=\"border border-background-700 rounded-sm\">\n          <Expand title=\"Reveal right\">\n            <Expand.Content from=\"right\">\n              <p className=\"text-sm text-foreground-400 px-3 py-3\">Expands horizontally to the right.</p>\n            </Expand.Content>\n          </Expand>\n        </div>\n      </div>\n    </Flex>\n  );\n}"
+    },
+    "05-settings-panel": {
+        "title": "Settings Panel",
+        "description": "Grouped settings sections using compound mode with icons, dividers, and a list of rows.",
+        "code": "import { Expand, Flex } from 'ui-lab-components';\nimport { FaGear, FaCode } from 'react-icons/fa6';\n\nexport default function Example() {\n  return (\n    <div className=\"w-full max-w-sm border border-background-700 rounded-sm divide-y divide-background-700\">\n      <Expand defaultExpanded>\n        <Expand.Trigger>\n          <Flex align=\"center\" gap=\"xs\" className=\"flex-1 px-3 py-2.5\">\n            <FaGear className=\"text-foreground-400 text-xs\" />\n            <span className=\"text-sm font-medium\">General</span>\n          </Flex>\n          <Expand.Icon />\n        </Expand.Trigger>\n        <Expand.Divider />\n        <Expand.Content>\n          <Flex direction=\"column\" className=\"divide-y divide-background-700\">\n            {['Language', 'Timezone', 'Date format'].map((setting) => (\n              <Flex key={setting} justify=\"between\" align=\"center\" className=\"px-3 py-2.5\">\n                <span className=\"text-sm text-foreground-300\">{setting}</span>\n                <span className=\"text-xs text-foreground-500\">Auto</span>\n              </Flex>\n            ))}\n          </Flex>\n        </Expand.Content>\n      </Expand>\n      <Expand>\n        <Expand.Trigger>\n          <Flex align=\"center\" gap=\"xs\" className=\"flex-1 px-3 py-2.5\">\n            <FaCode className=\"text-foreground-400 text-xs\" />\n            <span className=\"text-sm font-medium\">Developer</span>\n          </Flex>\n          <Expand.Icon />\n        </Expand.Trigger>\n        <Expand.Divider />\n        <Expand.Content>\n          <Flex direction=\"column\" className=\"divide-y divide-background-700\">\n            {['API keys', 'Webhooks', 'Debug mode'].map((setting) => (\n              <Flex key={setting} justify=\"between\" align=\"center\" className=\"px-3 py-2.5\">\n                <span className=\"text-sm text-foreground-300\">{setting}</span>\n                <span className=\"text-xs text-foreground-500\">Off</span>\n              </Flex>\n            ))}\n          </Flex>\n        </Expand.Content>\n      </Expand>\n    </div>\n  );\n}"
+    },
+    "06-disabled": {
+        "title": "Disabled State",
+        "description": "An isDisabled section is visually dimmed and blocks interaction.",
+        "code": "import { Expand } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <div className=\"w-full max-w-sm border border-background-700 rounded-sm divide-y divide-background-700\">\n      <Expand title=\"Available section\">\n        <p className=\"text-sm text-foreground-400 px-3 py-3\">This section is accessible and can be expanded.</p>\n      </Expand>\n      <Expand title=\"Restricted section\" isDisabled>\n        <p className=\"text-sm text-foreground-400 px-3 py-3\">This content is not accessible.</p>\n      </Expand>\n    </div>\n  );\n}"
+    },
+    "07-inline-info": {
+        "title": "Inline Info",
+        "description": "A contextual disclosure pattern for surfacing supplementary information inline.",
+        "code": "import { Expand, Flex } from 'ui-lab-components';\nimport { FaCircleInfo } from 'react-icons/fa6';\n\nexport default function Example() {\n  return (\n    <div className=\"w-full max-w-sm rounded-sm border border-background-700 bg-background-900\">\n      <Expand>\n        <Expand.Trigger>\n          <Flex align=\"center\" gap=\"xs\" className=\"flex-1 px-3 py-2.5\">\n            <FaCircleInfo className=\"text-foreground-400 text-xs shrink-0\" />\n            <span className=\"text-sm font-medium text-foreground-200\">Why do we collect this?</span>\n          </Flex>\n          <Expand.Icon />\n        </Expand.Trigger>\n        <Expand.Divider />\n        <Expand.Content>\n          <p className=\"text-sm text-foreground-400 px-3 py-3 leading-relaxed\">\n            We use this information only to verify your identity and improve the service. It is never shared with third parties.\n          </p>\n        </Expand.Content>\n      </Expand>\n    </div>\n  );\n}"
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Expand/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAWtD,QAAA,MAAM,cAAc,EAAE,UAAU,EAO/B,CAAC;AAcF,eAAO,MAAM,YAAY,EAAE,eAgE1B,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Expand/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAuBtD,QAAA,MAAM,cAAc,EAAE,UAAU,EAO/B,CAAC;AAcF,eAAO,MAAM,YAAY,EAAE,eAgE1B,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,cAAc,qBAAqB,CAAC"}

package/dist/components/Expand/index.js

@@ -1,11 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Expand } from 'ui-lab-components';
-import Example1, { metadata as metadata1 } from './examples/01-basic-expand.js';
+import Example1, { metadata as metadata1 } from './examples/01-basic.js';
+import Example2, { metadata as metadata2 } from './examples/02-accordion.js';
+import Example3, { metadata as metadata3 } from './examples/03-custom-trigger.js';
+import Example4, { metadata as metadata4 } from './examples/04-directions.js';
+import Example5, { metadata as metadata5 } from './examples/05-settings-panel.js';
+import Example6, { metadata as metadata6 } from './examples/06-disabled.js';
+import Example7, { metadata as metadata7 } from './examples/07-inline-info.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 // Define examplesData locally
 const examplesData = [
-    { id: '01-basic-expand', Component: Example1, metadata: metadata1 },
+    { id: '01-basic', Component: Example1, metadata: metadata1 },
+    { id: '02-accordion', Component: Example2, metadata: metadata2 },
+    { id: '03-custom-trigger', Component: Example3, metadata: metadata3 },
+    { id: '04-directions', Component: Example4, metadata: metadata4 },
+    { id: '05-settings-panel', Component: Example5, metadata: metadata5 },
+    { id: '06-disabled', Component: Example6, metadata: metadata6 },
+    { id: '07-inline-info', Component: Example7, metadata: metadata7 },
 ];
 const expandControls = [
     {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Expand/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,YAAY,MAAM,iBAAiB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAG/E,8BAA8B;AAC9B,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;CACpE,CAAC;AAEF,MAAM,cAAc,GAAiB;IACnC;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,kBAAkB;QACzB,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,KAAK;KACpB;CACF,CAAC;AAEF,MAAM,eAAe,GAAG;;;;;;;;;;EAUtB,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAoB;IAC3C,EAAE,EAAE,QAAQ;IACZ,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,oHAAoH;IACjI,QAAQ,EAAE,CACR,cAAK,SAAS,EAAC,+BAA+B,YAC5C,wOAII,GACA,CACP;IACD,QAAQ,EAAE;QACR;YACE,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,yCAAyC;YACtD,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,CACP,KAAC,MAAM,IAAC,KAAK,EAAC,8BAA8B,YAC1C,YAAG,SAAS,EAAC,qBAAqB,+FAE9B,GACG,CACV;YACD,QAAQ,EAAE,cAAc;YACxB,aAAa,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,CAC7B,KAAC,MAAM,IAAC,KAAK,EAAC,8BAA8B,EAAC,eAAe,EAAE,KAAK,CAAC,QAAQ,YAC1E,YAAG,SAAS,EAAC,qBAAqB,0JAG9B,GACG,CACV;SACF;QACD,GAAG,qBAAqB,CAAC,YAAY,EAAE,YAAY,CAAC;KACrD;IACD,QAAQ,EAAE;QACR;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,+CAA+C;YAC5D,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,CACP,KAAC,MAAM,IAAC,KAAK,EAAC,8BAA8B,YAC1C,YAAG,SAAS,EAAC,qBAAqB,kCAAsB,GACjD,CACV;SACF;QACD;YACE,EAAE,EAAE,UAAU;YACd,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,qDAAqD;YAClE,IAAI,EAAE;;UAEF;YACJ,OAAO,EAAE,CACP,KAAC,MAAM,IAAC,KAAK,EAAC,iBAAiB,EAAC,eAAe,kBAC7C,YAAG,SAAS,EAAC,qBAAqB,8CAAkC,GAC7D,CACV;SACF;KACF;CACF,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Expand/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Flex/examples/01-axis-control.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=01-axis-control.d.ts.map

package/dist/components/Flex/examples/01-axis-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"01-axis-control.d.ts","sourceRoot":"","sources":["../../../../src/components/Flex/examples/01-axis-control.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAazC,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,UAAU,EAsEhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAG,OAAgB,CAAC;AAC9C,eAAO,MAAM,SAAS,OAAO,CAAC;AA0D9B,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,2CAwC3D;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,4CAE9B"}

package/dist/components/Flex/examples/01-axis-control.js

@@ -0,0 +1,149 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Frame } from 'ui-lab-components';
+const BASE_CELL_STYLE = {
+    '--frame-fill': 'var(--background-900)',
+    '--frame-stroke-color': 'var(--background-600)',
+};
+export const metadata = {
+    title: 'Axis Control',
+    description: 'Interactive demo of Flex direction, justify, align, gap, and wrap across row and column layouts.',
+};
+export const controls = [
+    {
+        name: 'direction',
+        label: 'Main Axis',
+        type: 'select',
+        options: [
+            { label: 'Row', value: 'row' },
+            { label: 'Column', value: 'column' },
+        ],
+        defaultValue: 'row',
+    },
+    {
+        name: 'justify',
+        label: 'Main-Axis Distribution',
+        type: 'select',
+        options: [
+            { label: 'Start', value: 'start' },
+            { label: 'Center', value: 'center' },
+            { label: 'End', value: 'end' },
+            { label: 'Space Between', value: 'between' },
+            { label: 'Space Around', value: 'around' },
+            { label: 'Space Evenly', value: 'evenly' },
+        ],
+        defaultValue: 'start',
+    },
+    {
+        name: 'align',
+        label: 'Cross-Axis 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: '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: 'frameCount',
+        label: 'Frames',
+        type: 'stepper',
+        defaultValue: 4,
+        min: 4,
+        max: 10,
+        step: 1,
+    },
+    {
+        name: 'wrap',
+        label: 'Overflow Strategy',
+        type: 'select',
+        options: [
+            { label: 'No Wrap', value: 'nowrap' },
+            { label: 'Wrap', value: 'wrap' },
+        ],
+        defaultValue: 'nowrap',
+    },
+];
+export const previewLayout = 'start';
+export const resizable = true;
+function getDirection(value) {
+    return value === 'column' ? 'column' : 'row';
+}
+function getJustify(value) {
+    if (value === 'center' || value === 'end' || value === 'between' || value === 'around' || value === 'evenly')
+        return value;
+    return 'start';
+}
+function getAlign(value) {
+    if (value === 'start' || value === 'center' || value === 'end' || value === 'baseline')
+        return value;
+    return 'stretch';
+}
+function getGap(value) {
+    if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl')
+        return value;
+    return 'md';
+}
+function getWrap(value) {
+    return value === 'wrap' ? 'wrap' : 'nowrap';
+}
+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 FrameCell({ className, style }) {
+    return (_jsx(Frame, { pathStroke: "dashed", className: className, style: { ...BASE_CELL_STYLE, ...style }, children: _jsx("div", { className: "size-full" }) }));
+}
+function getAxisColumnActionSpecs(frameCount) {
+    const total = Math.max(frameCount - 2, 1);
+    const pattern = [
+        { className: 'min-w-[4.75rem] flex-1', style: { width: 'auto', minWidth: '4.75rem', height: '2.75rem' } },
+        { className: 'min-w-[5.5rem] flex-1', style: { width: 'auto', minWidth: '5.5rem', height: '2.75rem' } },
+        { className: 'min-w-[4rem] flex-1', style: { width: 'auto', minWidth: '4rem', height: '3rem' } },
+    ];
+    return Array.from({ length: total }, (_, i) => pattern[i % pattern.length]);
+}
+function getAxisRowGroups(frameCount) {
+    const groupCount = Math.max(Math.ceil(frameCount / 4), 1);
+    return Array.from({ length: groupCount }, (_, gi) => {
+        const remaining = frameCount - gi * 4;
+        const itemCount = Math.min(Math.max(remaining, 0), 4);
+        return { rail: itemCount >= 1, canvas: itemCount >= 2, actionTop: itemCount >= 3, actionBottom: itemCount >= 4 };
+    });
+}
+export function renderPreview(props) {
+    const direction = getDirection(props.direction);
+    const justify = getJustify(props.justify);
+    const align = getAlign(props.align);
+    const gap = getGap(props.gap);
+    const wrap = getWrap(props.wrap);
+    const frameCount = getFrameCount(props.frameCount, 4, 10, 4);
+    if (direction === 'row') {
+        const groups = getAxisRowGroups(frameCount);
+        return (_jsx(Flex, { direction: "column", justify: justify, align: align, gap: gap, wrap: "nowrap", className: "w-full", children: groups.map((group, index) => (_jsxs(Flex, { direction: "row", gap: "md", align: "stretch", className: "w-full", children: [group.rail && _jsx(FrameCell, { className: "shrink-0", style: { width: '4.5rem', height: '8.5rem' } }), group.canvas && _jsx(FrameCell, { className: "min-w-[11rem] flex-1", style: { width: 'auto', minWidth: '11rem', flex: '1.4 1 12rem', height: '8.5rem' } }), (group.actionTop || group.actionBottom) && (_jsxs(Flex, { direction: "column", gap: "sm", className: "w-[5.5rem] shrink-0", children: [group.actionTop && _jsx(FrameCell, { className: "shrink-0", style: { width: '5.5rem', height: '4.5rem' } }), group.actionBottom && _jsx(FrameCell, { className: "shrink-0", style: { width: '5.5rem', height: '3.25rem' } })] }))] }, `axis-row-group-${index}`))) }));
+    }
+    const actions = getAxisColumnActionSpecs(frameCount);
+    return (_jsxs(Flex, { direction: "column", justify: justify, align: align, gap: gap, wrap: wrap, className: "w-full", children: [_jsx(FrameCell, { className: "w-full", style: { width: '100%', height: '2.75rem' } }), _jsx(FrameCell, { className: "w-full", style: { width: '100%', height: '8rem' } }), _jsx(Flex, { direction: "row", wrap: "wrap", gap: "sm", className: "w-full", children: actions.map((action, index) => (_jsx(FrameCell, { className: action.className, style: action.style }, `column-action-${index}`))) })] }));
+}
+export default function Example() {
+    return renderPreview({ direction: 'row', justify: 'start', align: 'stretch', gap: 'md', wrap: 'nowrap', frameCount: 4 });
+}
+//# sourceMappingURL=01-axis-control.js.map

package/dist/components/Flex/examples/01-axis-control.js.map

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

package/dist/components/Flex/examples/02-wrap-overflow.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=02-wrap-overflow.d.ts.map

package/dist/components/Flex/examples/02-wrap-overflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-wrap-overflow.d.ts","sourceRoot":"","sources":["../../../../src/components/Flex/examples/02-wrap-overflow.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAazC,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,UAAU,EAsEhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAG,OAAgB,CAAC;AAC9C,eAAO,MAAM,SAAS,OAAO,CAAC;AA+D9B,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,2CAmB3D;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,4CAE9B"}

package/dist/components/Flex/examples/02-wrap-overflow.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex, Frame } from 'ui-lab-components';
+const BASE_CELL_STYLE = {
+    '--frame-fill': 'var(--background-900)',
+    '--frame-stroke-color': 'var(--background-600)',
+};
+export const metadata = {
+    title: 'Wrap Overflow Into Rows',
+    description: 'When wrap="wrap" is set, items that exceed the container width reflow into additional rows.',
+};
+export const controls = [
+    {
+        name: 'direction',
+        label: 'Main Axis',
+        type: 'select',
+        options: [
+            { label: 'Row', value: 'row' },
+            { label: 'Column', value: 'column' },
+        ],
+        defaultValue: 'row',
+    },
+    {
+        name: 'justify',
+        label: 'Main-Axis Distribution',
+        type: 'select',
+        options: [
+            { label: 'Start', value: 'start' },
+            { label: 'Center', value: 'center' },
+            { label: 'End', value: 'end' },
+            { label: 'Space Between', value: 'between' },
+            { label: 'Space Around', value: 'around' },
+            { label: 'Space Evenly', value: 'evenly' },
+        ],
+        defaultValue: 'start',
+    },
+    {
+        name: 'align',
+        label: 'Cross-Axis 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: '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: 'frameCount',
+        label: 'Frames',
+        type: 'stepper',
+        defaultValue: 7,
+        min: 4,
+        max: 12,
+        step: 1,
+    },
+    {
+        name: 'wrap',
+        label: 'Overflow Strategy',
+        type: 'select',
+        options: [
+            { label: 'No Wrap', value: 'nowrap' },
+            { label: 'Wrap', value: 'wrap' },
+        ],
+        defaultValue: 'wrap',
+    },
+];
+export const previewLayout = 'start';
+export const resizable = true;
+function getDirection(value) {
+    return value === 'column' ? 'column' : 'row';
+}
+function getJustify(value) {
+    if (value === 'center' || value === 'end' || value === 'between' || value === 'around' || value === 'evenly')
+        return value;
+    return 'start';
+}
+function getAlign(value) {
+    if (value === 'start' || value === 'center' || value === 'end' || value === 'baseline')
+        return value;
+    return 'stretch';
+}
+function getGap(value) {
+    if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl')
+        return value;
+    return 'md';
+}
+function getWrap(value) {
+    return value === 'wrap' ? 'wrap' : 'nowrap';
+}
+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 FrameCell({ className, style }) {
+    return (_jsx(Frame, { pathStroke: "dashed", className: className, style: { ...BASE_CELL_STYLE, ...style }, children: _jsx("div", { className: "size-full" }) }));
+}
+function getToolbarFlowSpecs(direction, frameCount) {
+    if (direction === 'column') {
+        const pattern = [
+            { style: { width: '100%', height: '3.25rem' } },
+            { style: { width: '100%', height: '3rem' } },
+            { style: { width: '100%', height: '3.25rem' } },
+            { style: { width: '100%', height: '2.75rem' } },
+        ];
+        return Array.from({ length: frameCount }, (_, i) => ({ className: 'w-full', ...pattern[i % pattern.length] }));
+    }
+    const repeatPattern = [
+        { className: 'shrink-0', style: { width: '6rem', height: '3.25rem' } },
+        { className: 'shrink-0', style: { width: '6.75rem', height: '3.25rem' } },
+        { className: 'shrink-0', style: { width: '5.5rem', height: '3.25rem' } },
+        { className: 'shrink-0', style: { width: '6.5rem', height: '3.25rem' } },
+        { className: 'shrink-0', style: { width: '4.5rem', height: '3.25rem' } },
+        { className: 'shrink-0', style: { width: '5.5rem', height: '3.25rem' } },
+    ];
+    return [
+        { className: 'min-w-[12rem]', style: { width: 'auto', minWidth: '12rem', flex: '1.6 1 14rem', height: '3.25rem' } },
+        ...Array.from({ length: Math.max(frameCount - 1, 0) }, (_, i) => repeatPattern[i % repeatPattern.length]),
+    ];
+}
+export function renderPreview(props) {
+    const direction = getDirection(props.direction);
+    const frameCount = getFrameCount(props.frameCount, 4, 12, 7);
+    const specs = getToolbarFlowSpecs(direction, frameCount);
+    return (_jsx(Flex, { direction: direction, justify: getJustify(props.justify), align: getAlign(props.align), gap: getGap(props.gap), wrap: getWrap(props.wrap), className: "w-full", children: specs.map((spec, index) => (_jsx(FrameCell, { className: spec.className, style: spec.style }, `${direction}-toolbar-${index}`))) }));
+}
+export default function Example() {
+    return renderPreview({ direction: 'row', justify: 'start', align: 'center', gap: 'md', wrap: 'wrap', frameCount: 7 });
+}
+//# sourceMappingURL=02-wrap-overflow.js.map