ui-lab-registry 0.3.45 → 0.3.46

package/src/components/Button/index.tsx

@@ -1,28 +1,6 @@
 import React from 'react';
 import { Button } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-variants.js';
-import Example2, { metadata as metadata2 } from './examples/02-multi-actions.js';
-import Example3, { metadata as metadata3 } from './examples/03-joined-toggle.js';
-import Example4, { metadata as metadata4 } from './examples/04-sub-stack-actions.js';
-import Example5, { metadata as metadata5 } from './examples/05-split-action-button.js';
-import Example6, { metadata as metadata6 } from './examples/06-icons.js';
-import Example7, { metadata as metadata7 } from './examples/07-split-button.js';
-import Example8, { metadata as metadata8 } from './examples/08-button-group.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
-
-// Define examplesData locally
-const examplesData = [
-  { id: '01-variants', Component: Example1, metadata: metadata1 },
-  { id: '02-multi-actions', Component: Example2, metadata: metadata2 },
-  { id: '03-joined-toggle', Component: Example3, metadata: metadata3 },
-  { id: '04-sub-stack-actions', Component: Example4, metadata: metadata4 },
-  { id: '05-split-action-button', Component: Example5, metadata: metadata5 },
-  { id: '06-icons', Component: Example6, metadata: metadata6 },
-  { id: '07-split-button', Component: Example7, metadata: metadata7 },
-  { id: '08-button-group', Component: Example8, metadata: metadata8 },
-];
 
 const buttonControls: ControlDef[] = [
   {
@@ -103,9 +81,7 @@ export const buttonDetail: ComponentDetail = {
         </Button>
       ),
     },
-    ...loadComponentExamples(examplesData, examplesJson),
   ],
 };
 
 export { buttonControls };
-export * from './examples/index.js';

package/src/components/Card/examples/index.ts

@@ -1,8 +1 @@
-export { default as Example1 } from './01-notification.js';
-export { metadata as metadata1 } from './01-notification.js';
-
-export { default as Example2 } from './02-settings-panel.js';
-export { metadata as metadata2 } from './02-settings-panel.js';
-
-export { default as Example3 } from './03-task-progress.js';
-export { metadata as metadata3 } from './03-task-progress.js';
+// Card examples are served from @ui-lab-core/library (private registry)

package/src/components/Card/index.tsx

@@ -1,17 +1,7 @@
 import React from 'react';
 import { Card } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-notification.js';
-import Example2, { metadata as metadata2 } from './examples/02-settings-panel.js';
-import Example3, { metadata as metadata3 } from './examples/03-task-progress.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
-const examplesData = [
-  { id: '01-notification', Component: Example1, metadata: metadata1 },
-  { id: '02-settings-panel', Component: Example2, metadata: metadata2 },
-  { id: '03-task-progress', Component: Example3, metadata: metadata3 },
-];
 
 const cardControls: ControlDef[] = [];
 
@@ -77,10 +67,8 @@ export const cardDetail: ComponentDetail = {
           </Card.Body>
         </Card>
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 };
 
 export { cardControls };
-export * from './examples/index.js';

package/src/components/Checkbox/examples/index.ts

@@ -1,17 +1 @@
-export { default as Example1 } from './01-basic-states.js';
-export { metadata as metadata1 } from './01-basic-states.js';
-
-export { default as Example2 } from './02-helper-text.js';
-export { metadata as metadata2 } from './02-helper-text.js';
-
-export { default as Example3 } from './03-controlled.js';
-export { metadata as metadata3 } from './03-controlled.js';
-
-export { default as Example4 } from './04-group.js';
-export { metadata as metadata4 } from './04-group.js';
-
-export { default as Example5 } from './05-indeterminate.js';
-export { metadata as metadata5 } from './05-indeterminate.js';
-
-export { default as Example6 } from './06-consent-form.js';
-export { metadata as metadata6 } from './06-consent-form.js';
+// Checkbox examples are served from @ui-lab-core/library (private registry)

package/src/components/Checkbox/index.tsx

@@ -1,24 +1,6 @@
 import React from 'react';
 import { Checkbox } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-states.js';
-import Example2, { metadata as metadata2 } from './examples/02-helper-text.js';
-import Example3, { metadata as metadata3 } from './examples/03-controlled.js';
-import Example4, { metadata as metadata4 } from './examples/04-group.js';
-import Example5, { metadata as metadata5 } from './examples/05-indeterminate.js';
-import Example6, { metadata as metadata6 } from './examples/06-consent-form.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
-import { FaCheck } from 'react-icons/fa6';
-
-const examplesData = [
-  { id: '01-basic-states', Component: Example1, metadata: metadata1 },
-  { id: '02-helper-text', Component: Example2, metadata: metadata2 },
-  { id: '03-controlled', Component: Example3, metadata: metadata3 },
-  { id: '04-group', Component: Example4, metadata: metadata4 },
-  { id: '05-indeterminate', Component: Example5, metadata: metadata5 },
-  { id: '06-consent-form', Component: Example6, metadata: metadata6 },
-];
 
 const checkboxControls: ControlDef[] = [
   {
@@ -84,7 +66,6 @@ export const checkboxDetail: ComponentDetail = {
         />
       ),
     },
-    ...loadComponentExamples(examplesData, examplesJson),
   ],
   variants: [
     {
@@ -105,4 +86,3 @@ export const checkboxDetail: ComponentDetail = {
 };
 
 export { checkboxControls };
-export * from './examples/index.js';

package/src/components/Color/examples/index.ts

@@ -1,11 +1 @@
-export { default as Example1 } from './01-basic-color-picker.js';
-export { metadata as metadata1 } from './01-basic-color-picker.js';
-
-export { default as Example2 } from './02-color-picker-opacity.js';
-export { metadata as metadata2 } from './02-color-picker-opacity.js';
-
-export { default as Example3 } from './03-color-picker-preview.js';
-export { metadata as metadata3 } from './03-color-picker-preview.js';
-
-export { default as Example4 } from './04-color-slider-primitive.js';
-export { metadata as metadata4 } from './04-color-slider-primitive.js';
+// Color examples are served from @ui-lab-core/library (private registry)

package/src/components/Color/index.tsx

@@ -1,20 +1,8 @@
 import React from 'react';
 import { Color } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-color-picker.js';
-import Example2, { metadata as metadata2 } from './examples/02-color-picker-opacity.js';
-import Example3, { metadata as metadata3 } from './examples/03-color-picker-preview.js';
-import Example4, { metadata as metadata4 } from './examples/04-color-slider-primitive.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-color-picker', Component: Example1, metadata: metadata1 },
-  { id: '02-color-picker-opacity', Component: Example2, metadata: metadata2 },
-  { id: '03-color-picker-preview', Component: Example3, metadata: metadata3 },
-  { id: '04-color-slider-primitive', Component: Example4, metadata: metadata4 },
-];
 
 const colorControls: ControlDef[] = [
   {
@@ -100,10 +88,8 @@ export const colorDetail: ComponentDetail = {
           disabled={props.disabled}
         />
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 };
 
 export { colorControls };
-export * from './examples/index.js';

package/src/components/Command/examples/index.ts

@@ -1,2 +1 @@
-export { default as Example1 } from './01-basic-command.js';
-export { metadata as metadata1 } from './01-basic-command.js';
+// Command examples are served from @ui-lab-core/library (private registry)

package/src/components/Command/index.tsx

@@ -1,13 +1,7 @@
 import React, { useState } from 'react';
 import { Command, Button, type Command as CommandType } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-command.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
-const examplesData = [
-  { id: '01-basic-command', Component: Example1, metadata: metadata1 },
-];
 
 const commandControls: ControlDef[] = [
   {
@@ -191,8 +185,7 @@ export const commandDetail: ComponentDetail = {
       preview: <CommandPreview />,
       controls: commandControls,
       renderPreview: CommandRenderPreview,
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
   variants: [
     {
@@ -206,4 +199,3 @@ export const commandDetail: ComponentDetail = {
 };
 
 export { commandControls };
-export * from './examples/index.js';

package/src/components/Confirm/examples/index.ts

@@ -1,2 +1 @@
-export { default as Example1 } from './01-basic-confirm.js';
-export { metadata as metadata1 } from './01-basic-confirm.js';
+// Confirm examples are served from @ui-lab-core/library (private registry)

package/src/components/Confirm/index.tsx

@@ -1,14 +1,8 @@
 import React from 'react';
 import { Confirm } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-confirm.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaCheck, FaX } from 'react-icons/fa6';
 
-const examplesData = [
-  { id: '01-basic-confirm', Component: Example1, metadata: metadata1 },
-];
 
 const confirmControls: ControlDef[] = [
   {
@@ -90,8 +84,7 @@ export const confirmDetail: ComponentDetail = {
           onCancel={() => console.log('Cancelled')}
         />
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
   variants: [
     {
@@ -115,4 +108,3 @@ export const confirmDetail: ComponentDetail = {
 };
 
 export { confirmControls };
-export * from './examples/index.js';

package/src/components/Date/examples/index.ts

@@ -1,11 +1 @@
-export { default as Example1 } from './01-basic-date.js'
-export { metadata as metadata1 } from './01-basic-date.js'
-
-export { default as Example2 } from './02-with-disabled-dates.js'
-export { metadata as metadata2 } from './02-with-disabled-dates.js'
-
-export { default as Example3 } from './03-controlled-mode.js'
-export { metadata as metadata3 } from './03-controlled-mode.js'
-
-export { default as Example4 } from './04-date-range.js'
-export { metadata as metadata4 } from './04-date-range.js'
+// Date examples are served from @ui-lab-core/library (private registry)

package/src/components/Date/index.tsx

@@ -1,15 +1,6 @@
 import React from 'react'
 import { Date } from 'ui-lab-components'
 import { ControlDef, ComponentDetail } from '@/types'
-import Example1, { metadata as metadata1 } from './examples/01-basic-date.js'
-import Example2, { metadata as metadata2 } from './examples/02-with-disabled-dates.js'
-import examplesJson from './examples.json' with { type: 'json' }
-import { loadComponentExamples } from '../../utils/load-component-examples.js'
-
-const examplesData = [
-  { id: '01-basic-date', Component: Example1, metadata: metadata1 },
-  { id: '02-with-disabled-dates', Component: Example2, metadata: metadata2 },
-]
 
 const dateControls: ControlDef[] = []
 
@@ -46,7 +37,6 @@ export const dateDetail: ComponentDetail = {
       renderPreview: (props: any) => (
         <Date />
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 }

package/src/components/Divider/examples/index.ts

@@ -1,2 +1 @@
-export { default as Example1 } from './01-basic-divider.js';
-export { metadata as metadata1 } from './01-basic-divider.js';
+// Divider examples are served from @ui-lab-core/library (private registry)

package/src/components/Divider/index.tsx

@@ -1,24 +1,6 @@
 import React from 'react';
 import { Divider } from "ui-lab-components";
 import { ControlDef, ComponentDetail } from "@/types";
-import Example1, {
-  metadata as metadata1,
-} from "./examples/01-basic-divider.js";
-import Example2, {
-  metadata as metadata2,
-} from "./examples/02-pattern-variants.js";
-import Example3, {
-  metadata as metadata3,
-} from "./examples/03-vertical-divider.js";
-import examplesJson from "./examples.json";
-import { loadComponentExamples } from "../../utils/load-component-examples.js";
-
-// Define examplesData locally
-const examplesData = [
-  { id: "01-basic-divider", Component: Example1, metadata: metadata1 },
-  { id: "02-pattern-variants", Component: Example2, metadata: metadata2 },
-  { id: "03-vertical-divider", Component: Example3, metadata: metadata3 },
-];
 
 const dividerControls: ControlDef[] = [
   {
@@ -79,8 +61,7 @@ export const dividerDetail: ComponentDetail = {
           orientation={props.orientation as any}
         />
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
   variants: [
     {
@@ -107,4 +88,3 @@ export const dividerDetail: ComponentDetail = {
 };
 
 export { dividerControls };
-export * from "./examples/index.js";

package/src/components/Expand/examples/index.ts

@@ -1,20 +1 @@
-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';
+// Expand examples are served from @ui-lab-core/library (private registry)

package/src/components/Expand/index.tsx

@@ -1,27 +1,6 @@
 import React from 'react';
 import { Expand } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-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';
-import { FaChevronDown } from 'react-icons/fa6';
-
-// Define examplesData locally
-const examplesData = [
-  { 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: ControlDef[] = [
   {
@@ -80,7 +59,6 @@ export const expandDetail: ComponentDetail = {
         </Expand>
       ),
     },
-    ...loadComponentExamples(examplesData, examplesJson),
   ],
   variants: [
     {
@@ -111,4 +89,3 @@ export const expandDetail: ComponentDetail = {
 };
 
 export { expandControls };
-export * from './examples/index.js';

package/src/components/Flex/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Flex } from 'ui-lab-components';
+import { Flex, Frame } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1, controls as controls1, renderPreview as renderPreview1, previewLayout as previewLayout1, resizable as resizable1 } from './examples/01-axis-control.js';
 import Example2, { metadata as metadata2, controls as controls2, renderPreview as renderPreview2, previewLayout as previewLayout2, resizable as resizable2 } from './examples/02-wrap-overflow.js';
@@ -14,6 +14,11 @@ const examplesData = [
   { id: '03-container-query-reflow', Component: Example3, metadata: metadata3, controls: controls3, renderPreview: renderPreview3, previewLayout: previewLayout3, resizable: resizable3 },
 ];
 
+const BASE_FRAME_STYLE = {
+  '--frame-fill': 'var(--background-900)',
+  '--frame-stroke-color': 'var(--background-600)',
+} as React.CSSProperties;
+
 const flexControls: ControlDef[] = [
   {
     name: 'direction',
@@ -64,18 +69,29 @@ const flexControls: ControlDef[] = [
   },
 ];
 
-const flexBasicCode = `import { Flex } from "ui-lab-components";
+const flexBasicCode = `import { Flex, Frame } from "ui-lab-components";
 
 export function Example() {
   return (
-    <Flex gap="md">
-      <div>1</div>
-      <div>2</div>
-      <div>3</div>
+    <Flex gap="md" align="stretch">
+      <Frame pathStroke="dashed" style={{ width: "5rem", height: "7rem" }} />
+      <Frame pathStroke="dashed" style={{ width: "11rem", height: "7rem", flex: "1 1 12rem" }} />
+      <Flex direction="column" gap="sm" style={{ width: "5.5rem" }}>
+        <Frame pathStroke="dashed" style={{ width: "5.5rem", height: "3.75rem" }} />
+        <Frame pathStroke="dashed" style={{ width: "5.5rem", height: "2.5rem" }} />
+      </Flex>
     </Flex>
   );
 }`;
 
+function FlexFrame({ className, style }: { className?: string; style?: React.CSSProperties }) {
+  return (
+    <Frame pathStroke="dashed" className={className} style={{ ...BASE_FRAME_STYLE, ...style }}>
+      <div className="size-full" />
+    </Frame>
+  );
+}
+
 export const flexDetail: ComponentDetail = {
   id: 'flex',
   name: 'Flex',
@@ -94,30 +110,24 @@ export const flexDetail: ComponentDetail = {
       title: 'Preview',
       description: 'Adjust props to customize the component',
       code: flexBasicCode,
-      preview: (
-        <Flex gap="md">
-          <div className="h-16 w-20 bg-background-800 rounded border border-accent-500/50 flex items-center justify-center">1</div>
-          <div className="h-16 w-20 bg-background-800 rounded border border-accent-500/50 flex items-center justify-center">2</div>
-          <div className="h-16 w-20 bg-background-800 rounded border border-accent-500/50 flex items-center justify-center">3</div>
-        </Flex>
-      ),
+      preview: null,
+      previewLayout: 'start',
       controls: flexControls,
       renderPreview: (props: any) => {
-        const Box = ({ children }: { children: React.ReactNode }) => (
-          <div className="bg-background-800 border border-background-700 rounded flex items-center justify-center text-foreground-200 text-sm font-medium h-16 w-20">
-            {children}
-          </div>
-        );
         return (
           <Flex
             direction={props.direction as any}
             gap={props.gap as any}
             justify={props.justify as any}
             align={props.align as any}
+            className="w-full"
           >
-            <Box>1</Box>
-            <Box>2</Box>
-            <Box>3</Box>
+            <FlexFrame className="shrink-0" style={{ width: '5rem', height: '7rem' }} />
+            <FlexFrame className="min-w-[11rem] flex-1" style={{ width: 'auto', minWidth: '11rem', flex: '1.4 1 12rem', height: '7rem' }} />
+            <Flex direction="column" gap="sm" className="w-[5.5rem] shrink-0">
+              <FlexFrame className="shrink-0" style={{ width: '5.5rem', height: '3.75rem' }} />
+              <FlexFrame className="shrink-0" style={{ width: '5.5rem', height: '2.5rem' }} />
+            </Flex>
           </Flex>
         );
       },

package/src/components/Frame/examples/index.ts

@@ -1,6 +1 @@
-export { default as Example1 } from './01-default-frame.js';
-export { metadata as metadata1 } from './01-default-frame.js';
-export { default as Example2 } from './02-tooltip-example.js';
-export { metadata as metadata2 } from './02-tooltip-example.js';
-export { default as Example3 } from './03-sidebar-tab.js';
-export { metadata as metadata3 } from './03-sidebar-tab.js';
+// Frame examples are served from @ui-lab-core/library (private registry)

package/src/components/Frame/index.tsx

@@ -1,17 +1,7 @@
 import React from 'react';
 import { Frame } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-default-frame.js';
-import Example2, { metadata as metadata2 } from './examples/02-tooltip-example.js';
-import Example3, { metadata as metadata3 } from './examples/03-sidebar-tab.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
-const examplesData = [
-  { id: '01-default-frame', Component: Example1, metadata: metadata1 },
-  { id: '02-tooltip-example', Component: Example2, metadata: metadata2 },
-  { id: '03-sidebar-tab', Component: Example3, metadata: metadata3 },
-];
 
 const frameControls: ControlDef[] = [];
 
@@ -59,10 +49,8 @@ export const frameDetail: ComponentDetail = {
           <p className="text-sm text-foreground-300">Framed content</p>
         </Frame>
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 };
 
 export { frameControls };
-export * from './examples/index.js';

package/src/components/Grid/examples/index.ts

@@ -1,5 +1,3 @@
-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';

package/src/components/Grid/examples.json

@@ -1,9 +1,4 @@
 {
-  "01-basic-grid": {
-    "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.",