ui-lab-registry 0.3.44 → 0.3.45

package/src/types.ts

@@ -35,6 +35,20 @@ export interface ComponentAPI {
   examples?: ComponentExample[];
 }
 
+export interface ComponentUsageRule {
+  type: 'do' | 'avoid' | 'prefer';
+  title: string;
+  description: string;
+  relatedComponents?: string[];
+}
+
+export interface ComponentUsage {
+  summary: string;
+  whenToUse?: string[];
+  whenNotToUse?: string[];
+  rules?: ComponentUsageRule[];
+}
+
 export interface StyleVariable {
   name: string;
   defaultValue?: string;
@@ -240,6 +254,7 @@ export interface ComponentMetadata {
   };
   reactAriaUrl?: string;
   api?: ComponentAPI;
+  usage?: ComponentUsage;
   styles?: ComponentStyles;
   examples?: ComponentExample[];
   example?: Example;
@@ -289,9 +304,12 @@ export interface ControlOption {
 export interface ControlDef {
   name: string;
   label: string;
-  type: 'select' | 'toggle' | 'text';
+  type: 'select' | 'toggle' | 'text' | 'stepper';
   options?: ControlOption[];
   defaultValue?: string | number | boolean;
+  min?: number;
+  max?: number;
+  step?: number;
 }
 
 // Component Detail for Site
@@ -318,6 +336,7 @@ export interface SiteComponentExample {
   controls?: ControlDef[];
   renderPreview?: (props: Record<string, any>) => React.ReactNode;
   previewLayout?: 'center' | 'start';
+  resizable?: boolean;
 }
 
 export interface ComponentDetail {

package/src/utils/load-component-examples.ts

@@ -8,6 +8,10 @@ interface ExampleData {
     title: string;
     description: string;
   };
+  controls?: SiteComponentExample['controls'];
+  renderPreview?: SiteComponentExample['renderPreview'];
+  previewLayout?: SiteComponentExample['previewLayout'];
+  resizable?: boolean;
 }
 
 interface ExamplesJsonEntry {
@@ -16,13 +20,6 @@ interface ExamplesJsonEntry {
   code: string;
 }
 
-/**
- * Loads component examples by merging examplesData with code from examples.json
- *
- * @param examplesData - Array of example data with id, Component, and metadata
- * @param examplesJson - Object with example codes keyed by example id
- * @returns Array of SiteComponentExample objects ready for rendering
- */
 export function loadComponentExamples(
   examplesData: ExampleData[],
   examplesJson: Record<string, ExamplesJsonEntry>
@@ -35,6 +32,10 @@ export function loadComponentExamples(
       description: example.metadata.description,
       code: jsonEntry?.code || '',
       preview: React.createElement(example.Component),
+      controls: example.controls,
+      renderPreview: example.renderPreview,
+      previewLayout: example.previewLayout,
+      resizable: example.resizable,
     };
   });
 }

package/src/components/Anchor/examples/01-basic-anchor.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Anchor } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Anchor',
-  description: 'A simple anchor component with custom underline. Hover to see the popover preview.'
-};
-
-export default function Example() {
-  return (
-    <Anchor>
-      Learn more about this topic
-      <Anchor.Preview>
-        <div className="text-sm">Preview content</div>
-      </Anchor.Preview>
-    </Anchor>
-  );
-}

package/src/components/Badge/examples/01-basic-badge.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Badge } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Badge',
-  description: 'A simple badge with default styling. Use this to display labels, tags, or status indicators in your interface.'
-};
-
-export default function Example() {
-  return <Badge>New</Badge>;
-}

package/src/components/Badge/examples/02-variants-and-sizes.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { Badge } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Badge Variants and Sizes',
-  description: 'Showcases all available badge variants (default, success, warning, danger, info) and sizes (sm, md, lg). Also demonstrates pill-shaped badges.'
-};
-
-export default function Example() {
-  return (
-    <div className="p-4 space-y-8">
-      <div>
-        <h3 className="text-sm font-semibold text-foreground-200 mb-3">Variants</h3>
-        <div className="flex gap-2 flex-wrap items-center">
-          <Badge variant="default">Default</Badge>
-          <Badge variant="success">Success</Badge>
-          <Badge variant="warning">Warning</Badge>
-          <Badge variant="danger">Danger</Badge>
-          <Badge variant="info">Info</Badge>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-semibold text-foreground-200 mb-3">Sizes</h3>
-        <div className="flex gap-2 flex-wrap items-center">
-          <Badge size="sm">Small</Badge>
-          <Badge size="md">Medium</Badge>
-          <Badge size="lg">Large</Badge>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-semibold text-foreground-200 mb-3">Pill Shape</h3>
-        <div className="flex gap-2 flex-wrap items-center">
-          <Badge pill variant="default">Default Pill</Badge>
-          <Badge pill variant="success">Success Pill</Badge>
-          <Badge pill variant="warning">Warning Pill</Badge>
-          <Badge pill variant="danger">Danger Pill</Badge>
-          <Badge pill variant="info">Info Pill</Badge>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-semibold text-foreground-200 mb-3">Variants with Sizes</h3>
-        <div className="space-y-3">
-          <div className="flex gap-2 flex-wrap items-center">
-            <Badge variant="success" size="sm">Small Success</Badge>
-            <Badge variant="success" size="md">Medium Success</Badge>
-            <Badge variant="success" size="lg">Large Success</Badge>
-          </div>
-          <div className="flex gap-2 flex-wrap items-center">
-            <Badge variant="danger" size="sm">Small Danger</Badge>
-            <Badge variant="danger" size="md">Medium Danger</Badge>
-            <Badge variant="danger" size="lg">Large Danger</Badge>
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-semibold text-foreground-200 mb-3">With Count</h3>
-        <div className="flex gap-2 flex-wrap items-center">
-          <Badge variant="default" count={5} />
-          <Badge variant="success" count={12} />
-          <Badge variant="warning" count={99} />
-          <Badge variant="danger" count={3} pill />
-          <Badge variant="info" count={42} pill />
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/Banner/examples/01-basic-banner.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Banner } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Banner',
-  description: 'A neutral note banner using background shades instead of semantic colors. The default banner variant for general-purpose messaging.'
-};
-
-export default function Example() {
-  return (
-    <Banner variant="note" size="md">
-      This is a note banner. Use it for general-purpose messages and information without semantic intent.
-    </Banner>
-  );
-}

package/src/components/Card/examples/01-basic-card.tsx

@@ -1,22 +0,0 @@
-import { Card } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Card',
-  description: 'A simple card container with header, body, and footer sections. Use this to group related content in your interface.'
-};
-
-export default function Example() {
-  return (
-    <Card>
-      <Card.Header>
-        <h3>Card Title</h3>
-      </Card.Header>
-      <Card.Body>
-        <p>This is the card content area where you can place any information or components.</p>
-      </Card.Body>
-      <Card.Footer>
-        <p>Footer content</p>
-      </Card.Footer>
-    </Card>
-  );
-}

package/src/components/Checkbox/examples/01-basic-checkbox.tsx

@@ -1,21 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Checkbox } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Checkbox',
-  description: 'A simple checkbox with a label. Use this as the standard checkbox input in your forms.'
-};
-
-export default function Example() {
-  const [checked, setChecked] = React.useState(false);
-
-  return (
-    <Checkbox
-      checked={checked}
-      onChange={(e) => setChecked(e.target.checked)}
-      label="Accept terms and conditions"
-    />
-  );
-}

package/src/components/Checkbox/examples/02-checkbox-group-with-descriptions.tsx

@@ -1,59 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Checkbox, Card, Flex } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Checkbox Group with Descriptions',
-  description: 'Multiple checkboxes grouped together as a settings panel. Each checkbox includes a label and helper text for context.'
-};
-
-export default function Example() {
-  const [notifications, setNotifications] = React.useState({
-    email: true,
-    push: false,
-    sms: false,
-    marketing: false,
-  });
-
-  const handleChange = (key: keyof typeof notifications) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    setNotifications(prev => ({ ...prev, [key]: e.target.checked }));
-  };
-
-  return (
-    <Card>
-      <Card.Header>
-        <h3 className="text-lg font-medium text-foreground-100">Notification Preferences</h3>
-        <p className="text-sm text-foreground-400">Choose how you want to be notified.</p>
-      </Card.Header>
-      <Card.Body>
-        <Flex direction="column" gap="lg">
-          <Checkbox
-            checked={notifications.email}
-            onChange={handleChange('email')}
-            label="Email notifications"
-            helperText="Receive updates about your account activity via email."
-          />
-          <Checkbox
-            checked={notifications.push}
-            onChange={handleChange('push')}
-            label="Push notifications"
-            helperText="Get instant alerts on your device for important updates."
-          />
-          <Checkbox
-            checked={notifications.sms}
-            onChange={handleChange('sms')}
-            label="SMS notifications"
-            helperText="Receive text messages for critical alerts and reminders."
-          />
-          <Checkbox
-            checked={notifications.marketing}
-            onChange={handleChange('marketing')}
-            label="Marketing emails"
-            helperText="Stay informed about new features, tips, and special offers."
-          />
-        </Flex>
-      </Card.Body>
-    </Card>
-  );
-}

package/src/components/Color/examples/01-basic-color.tsx

@@ -1,25 +0,0 @@
-import React, { useState } from 'react';
-import { Color } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Color',
-  description: 'A simple color component with default configuration showing hex format.'
-};
-
-export default function Example() {
-  const [color, setColor] = useState('#FF6B6B');
-
-  return (
-    <div className="p-4 space-y-4">
-      <div>
-        <p className="text-sm text-foreground-300 mb-3">Selected color: <code className="text-accent-500 font-mono">{color}</code></p>
-        <Color
-          value={color}
-          onChange={setColor}
-          format="hex"
-          defaultValue="#FF6B6B"
-        />
-      </div>
-    </div>
-  );
-}

package/src/components/Color/examples/02-opacity-slider.tsx

@@ -1,26 +0,0 @@
-import React, { useState } from 'react';
-import { Color } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Opacity Slider',
-  description: 'Color picker with opacity/alpha slider enabled for transparent color selection.'
-};
-
-export default function Example() {
-  const [color, setColor] = useState('rgba(106, 90, 205, 0.75)');
-
-  return (
-    <div className="p-4 space-y-4">
-      <div>
-        <p className="text-sm text-foreground-300 mb-3">Selected color: <code className="text-accent-500 font-mono">{color}</code></p>
-        <Color
-          value={color}
-          onChange={setColor}
-          showOpacity
-          format="rgb"
-          defaultValue="rgba(106, 90, 205, 0.75)"
-        />
-      </div>
-    </div>
-  );
-}

package/src/components/Color/examples/03-format-switching.tsx

@@ -1,46 +0,0 @@
-import React, { useState } from 'react';
-import { Color } from 'ui-lab-components';
-
-const metadata = {
-  title: 'Format Switching',
-  description: 'Color picker with format toggle between hex and RGB to copy colors in different formats.'
-};
-
-export default function Example() {
-  const [color, setColor] = useState('#3B82F6');
-  const [format, setFormat] = useState<'hex' | 'rgb'>('hex');
-
-  const handleFormatChange = () => {
-    setFormat(format === 'hex' ? 'rgb' : 'hex');
-  };
-
-  return (
-    <div className="p-4 space-y-4">
-      <div>
-        <div className="flex items-center justify-between mb-3">
-          <p className="text-sm text-foreground-300">
-            Selected color: <code className="text-accent-500 font-mono">{color}</code>
-          </p>
-          <button
-            onClick={handleFormatChange}
-            className="px-3 py-1 text-sm bg-foreground-400 hover:bg-foreground-400 text-foreground-100 rounded transition-colors"
-          >
-            Format: {format.toUpperCase()}
-          </button>
-        </div>
-        <Color
-          value={color}
-          onChange={setColor}
-          format={format}
-          defaultValue="#3B82F6"
-        />
-      </div>
-      <div className="mt-4 p-3 bg-foreground-400 rounded border border-foreground-400">
-        <p className="text-sm text-foreground-300">
-          <strong>Tip:</strong> Click the format button to switch between hex and RGB output formats.
-          This is useful when you need to copy colors in different formats for different contexts.
-        </p>
-      </div>
-    </div>
-  );
-}

package/src/components/Expand/examples/01-basic-expand.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Expand } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Expand',
-  description: 'An expandable/collapsible disclosure component. Use this to show and hide content sections while maintaining accessibility and keyboard support.'
-};
-
-export default function Example() {
-  return (
-    <Expand title="What is an Expand component?">
-      <p className="text-foreground-300">
-        An Expand component is a disclosure widget that expands and collapses content.
-        It's built with React Aria for full accessibility support.
-      </p>
-    </Expand>
-  );
-}

package/src/components/Flex/examples/01-basic-flex.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { Flex } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Flex',
-  description: 'A simple flex layout arranging items in a row. Use this component to easily create flexible layouts with consistent spacing.'
-};
-
-export default function Example() {
-  return (
-    <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>
-  );
-}

package/src/components/Gallery/examples/01-basic-gallery.tsx

@@ -1,28 +0,0 @@
-import { Gallery } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Gallery',
-  description: 'A simple gallery with multiple items in a grid layout. Use this for displaying collections of images or content.'
-};
-
-export default function Example() {
-  return (
-    <Gallery columns={3} gap="md">
-      <Gallery.Item>
-        <Gallery.View aspectRatio="1/1">
-          <div style={{ background: '#e0e0e0', width: '100%', height: '100%' }} />
-        </Gallery.View>
-      </Gallery.Item>
-      <Gallery.Item>
-        <Gallery.View aspectRatio="1/1">
-          <div style={{ background: '#d0d0d0', width: '100%', height: '100%' }} />
-        </Gallery.View>
-      </Gallery.Item>
-      <Gallery.Item>
-        <Gallery.View aspectRatio="1/1">
-          <div style={{ background: '#c0c0c0', width: '100%', height: '100%' }} />
-        </Gallery.View>
-      </Gallery.Item>
-    </Gallery>
-  );
-}