ui-lab-registry 0.3.44 → 0.3.46

package/src/components/Command/examples/01-basic-command.tsx

@@ -1,79 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Command, Button, Badge } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Command Palette',
-  description: 'A searchable command palette with keyboard shortcuts. Use Cmd+K (or Ctrl+K) to open.'
-};
-
-export default function Example() {
-  const [open, setOpen] = React.useState(false);
-
-  const commands = [
-    {
-      id: 'search',
-      label: 'Search',
-      description: 'Search documents',
-      shortcut: '⌘F',
-      action: () => console.log('Search'),
-    },
-    {
-      id: 'create',
-      label: 'Create new',
-      description: 'Create a new document',
-      shortcut: '⌘N',
-      action: () => console.log('Create'),
-    },
-    {
-      id: 'settings',
-      label: 'Settings',
-      description: 'Open application settings',
-      shortcut: '⌘,',
-      action: () => console.log('Settings'),
-    },
-  ];
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>
-        Open Palette (⌘K)
-      </Button>
-      <Command
-        open={open}
-        onOpenChange={setOpen}
-        items={commands}
-      >
-        <Command.Input placeholder="Search commands..." />
-        <Command.List>
-          <Command.Groups
-            renderCategory={(category) =>
-              category ? <Command.Category>{category}</Command.Category> : null
-            }
-            renderItem={(cmd) => (
-              <Command.Item
-                key={cmd.id}
-                value={cmd.id}
-                textValue={cmd.label}
-                action={cmd.action}
-                hint={cmd.shortcut}
-              >
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <div>
-                    <div style={{ fontWeight: 500 }}>{cmd.label}</div>
-                    {cmd.description && (
-                      <div style={{ fontSize: '0.875em', opacity: 0.7 }}>
-                        {cmd.description}
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </Command.Item>
-            )}
-          />
-        </Command.List>
-      </Command>
-    </>
-  );
-}

package/src/components/Confirm/examples/01-basic-confirm.tsx

@@ -1,20 +0,0 @@
-import { Confirm } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Confirm',
-  description: 'A confirmation dialog for critical actions. Use this to prevent accidental deletions or destructive operations.'
-};
-
-export default function Example() {
-  return (
-    <Confirm
-      triggerLabel="Delete Account"
-      title="Are you sure?"
-      description="This action cannot be undone. All your data will be permanently deleted."
-      confirmLabel="Delete"
-      cancelLabel="Cancel"
-      onConfirm={() => console.log('Account deleted')}
-      onCancel={() => console.log('Cancelled')}
-    />
-  );
-}

package/src/components/Date/examples/01-basic-date.tsx

@@ -1,12 +0,0 @@
-import React from 'react'
-import { Date as DatePicker } from 'ui-lab-components'
-
-export const metadata = {
-  title: 'Basic Date',
-  description: 'A simple date component for date selection with today indicator and week numbers. Click a date to select it.'
-}
-
-export default function Example() {
-  const [date, setDate] = React.useState<Date | null>(null)
-  return <DatePicker value={date} onChange={setDate} />
-}

package/src/components/Date/examples/02-with-disabled-dates.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { Date as DatePicker } from 'ui-lab-components'
-
-export const metadata = {
-  title: 'Date with Disabled Dates',
-  description: 'Date component with certain dates disabled (weekends). Disabled dates cannot be selected.'
-}
-
-export default function Example() {
-  const [date, setDate] = React.useState<Date | null>(null)
-
-  const isDisabled = React.useCallback(
-    (dateToCompare: Date) => {
-      const day = dateToCompare.getDay()
-      return day === 0 || day === 6 // Disable weekends only
-    },
-    []
-  )
-
-  return <DatePicker value={date} onChange={setDate} disabled={isDisabled} />
-}
-

package/src/components/Date/examples/03-controlled-mode.tsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import { Date as DatePicker, Button, Flex } from 'ui-lab-components'
-
-export const metadata = {
-  title: 'Controlled Mode',
-  description: 'Date picker with controlled value and external state management. Includes a "Today" button to programmatically set the current date.'
-}
-
-export default function Example() {
-  const [date, setDate] = React.useState<Date | null>(null)
-
-  const handleSetToday = () => {
-    setDate(new Date())
-  }
-
-  const handleClear = () => {
-    setDate(null)
-  }
-
-  const formatDate = (d: Date | null) => {
-    if (!d) return 'No date selected'
-    return d.toLocaleDateString('en-US', {
-      weekday: 'long',
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric'
-    })
-  }
-
-  return (
-    <Flex direction="column" gap="md">
-      <Flex gap="sm">
-        <Button variant="primary" onClick={handleSetToday}>
-          Today
-        </Button>
-        <Button variant="outline" onClick={handleClear}>
-          Clear
-        </Button>
-      </Flex>
-      <div className="text-sm text-foreground-400">
-        Selected: {formatDate(date)}
-      </div>
-      <DatePicker value={date} onChange={setDate} />
-    </Flex>
-  )
-}

package/src/components/Date/examples/04-date-range.tsx

@@ -1,82 +0,0 @@
-import React from 'react'
-import { Date as DatePicker, Flex } from 'ui-lab-components'
-
-export const metadata = {
-  title: 'Date Range Selection',
-  description: 'Two date pickers for selecting start and end dates. Useful for booking, event scheduling, or filtering data by date range. The start date is locked once selected until both dates are set.'
-}
-
-export default function Example() {
-  const [startDate, setStartDate] = React.useState<Date | null>(null)
-  const [endDate, setEndDate] = React.useState<Date | null>(null)
-
-  const handleStartDateChange = (date: Date) => {
-    setStartDate(date)
-    // Reset end date if it's before the new start date
-    if (endDate && date > endDate) {
-      setEndDate(null)
-    }
-  }
-
-  const handleEndDateChange = (date: Date) => {
-    if (startDate && date >= startDate) {
-      setEndDate(date)
-    }
-  }
-
-  const formatDate = (date: Date | null) => {
-    if (!date) return 'Select date'
-    return date.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric'
-    })
-  }
-
-  const daysDifference = startDate && endDate
-    ? Math.floor((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)) + 1
-    : null
-
-  const isEndDateDisabled = (date: Date) => {
-    return !startDate || date < startDate
-  }
-
-  return (
-    <Flex direction="column" gap="lg">
-      <Flex direction="column" gap="md">
-        <div>
-          <div className="text-sm font-medium text-foreground-400 mb-2">
-            Check-in Date
-          </div>
-          <DatePicker value={startDate} onChange={handleStartDateChange} />
-        </div>
-
-        <div>
-          <div className="text-sm font-medium text-foreground-400 mb-2">
-            Check-out Date
-          </div>
-          <DatePicker
-            value={endDate}
-            onChange={handleEndDateChange}
-            disabled={isEndDateDisabled}
-          />
-        </div>
-      </Flex>
-
-      {/* Range summary */}
-      <div className="p-3 bg-background-300 rounded-md">
-        <div className="text-sm text-foreground-400 mb-1">
-          Selected Range
-        </div>
-        <div className="text-foreground-400 font-medium">
-          {formatDate(startDate)} → {formatDate(endDate)}
-        </div>
-        {daysDifference !== null && (
-          <div className="text-sm text-foreground-400 mt-2">
-            Duration: {daysDifference} {daysDifference === 1 ? 'day' : 'days'}
-          </div>
-        )}
-      </div>
-    </Flex>
-  )
-}

package/src/components/Divider/examples/01-basic-divider.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { Divider } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Divider',
-  description: 'A simple horizontal divider separating content sections. Use this to create visual separation between different areas of your interface.'
-};
-
-export default function Example() {
-  return (
-    <div className="space-y-4">
-      <div className="text-foreground-300">Content above</div>
-      <Divider />
-      <div className="text-foreground-300">Content below</div>
-    </div>
-  );
-}

package/src/components/Divider/examples/02-pattern-variants.tsx

@@ -1,25 +0,0 @@
-import { Divider } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Pattern Variants',
-  description: 'Dividers support three distinct pattern styles: solid for continuous lines, dashed for rectangular segments, and dotted for circular dots.'
-};
-
-export default function Example() {
-  return (
-    <div className="space-y-6 w-full">
-      <div className="space-y-2">
-        <span className="text-sm text-foreground-400">Solid</span>
-        <Divider variant="solid" />
-      </div>
-      <div className="space-y-2">
-        <span className="text-sm text-foreground-400">Dashed</span>
-        <Divider variant="dashed" />
-      </div>
-      <div className="space-y-2">
-        <span className="text-sm text-foreground-400">Dotted</span>
-        <Divider variant="dotted" />
-      </div>
-    </div>
-  );
-}

package/src/components/Divider/examples/03-vertical-divider.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Divider } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Vertical Orientation',
-  description: 'Vertical dividers separate side-by-side content. All pattern variants work in both horizontal and vertical orientations.'
-};
-
-export default function Example() {
-  return (
-    <div className="flex items-center gap-4 h-16">
-      <span className="text-foreground-300">First</span>
-      <Divider orientation="vertical" variant="solid" spacing="none" />
-      <span className="text-foreground-300">Second</span>
-      <Divider orientation="vertical" variant="dashed" spacing="none" />
-      <span className="text-foreground-300">Third</span>
-      <Divider orientation="vertical" variant="dotted" spacing="none" />
-      <span className="text-foreground-300">Fourth</span>
-    </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/Frame/examples/01-default-frame.tsx

@@ -1,33 +0,0 @@
-export const metadata = {
-  title: 'Featured Card Frame',
-  description: 'A card frame with a curved top cutout for featured images or hero content.'
-};
-
-import { Frame } from 'ui-lab-components';
-
-// The SVG path definition for the curve
-const LIQUID_WIDTH = 180;
-const LIQUID_PATH = "M 0 0 C 36 0 36 44 90 44 C 144 44 144 0 180 0";
-
-const DefaultFrame = () => {
-  return (
-    <div className="flex items-center justify-center min-h-[400px] bg-background-950">
-      <div className="relative w-full max-w-sm group">
-
-        {/* 1. The Frame Component with the Path Prop */}
-        <Frame
-          path={LIQUID_PATH}
-          pathWidth={LIQUID_WIDTH}
-          className="text-background-700  bg-background-700/20 shadow-2xl backdrop-blur-sm"
-          style={{ color: "var(--background-700)" }}
-        >
-          {/* Minimal Content */}
-          <div className="w-100 h-50 flex flex-col h-full p-17 text-center">
-          </div>
-        </Frame>
-      </div>
-    </div>
-  );
-};
-
-export default DefaultFrame;

package/src/components/Frame/examples/02-tooltip-example.tsx

@@ -1,35 +0,0 @@
-export const metadata = {
-  title: 'Tooltip Frame',
-  description: 'A frame with a pointer tail on the bottom, typical for tooltips or popovers.'
-};
-
-import React from 'react';
-import { Frame } from 'ui-lab-components';
-
-const TAIL_WIDTH = 48;
-const TAIL_PATH = "M 0 0 C 8 0 20 -16 24 -16 C 28 -16 36 0 48 0";
-
-const Example2 = () => {
-  return (
-    <div className="flex flex-col gap-12 p-12 items-center justify-center min-h-[400px] bg-background-950">
-      <Frame
-        side="bottom"
-        shapeMode="extend"
-        path={TAIL_PATH}
-        pathWidth={TAIL_WIDTH}
-        className="max-w-sm border-background-700 p-6"
-        style={{ "--frame-fill": "var(--color-background-900)" } as React.CSSProperties}
-      >
-        <div className="text-center">
-          <h3 className="font-semibold text-lg mb-2 text-foreground-50">Did you know?</h3>
-          <p className="text-foreground-400 text-sm leading-relaxed">
-            You can customize the frame orientation using the <code className="bg-background-800 px-1 rounded">side</code> prop.
-            This frame uses <code className="text-accent-500">side="bottom"</code> to create a tooltip tail.
-          </p>
-        </div>
-      </Frame>
-    </div>
-  );
-};
-
-export default Example2;

package/src/components/Frame/examples/03-sidebar-tab.tsx

@@ -1,50 +0,0 @@
-export const metadata = {
-  title: 'Sidebar Tab Frame',
-  description: 'A frame with a tab extending from the side, perfect for active navigation states.'
-};
-
-import React from 'react';
-import { Frame } from 'ui-lab-components';
-
-const TAB_WIDTH = 120;
-const TAB_PATH = "M 0 0 C 20 0 20 -24 40 -24 L 80 -24 C 100 -24 100 0 120 0";
-
-const Example3 = () => {
-  return (
-    <div className="flex flex-row gap-0 p-12 items-center justify-center bg-background-950 min-h-[400px]">
-      {/* Mock Sidebar */}
-      <div className="flex flex-col items-end justify-center space-y-8 pr-6 border-background-800/50 h-64">
-        <div className="text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors">Dashboard</div>
-        <div className="text-accent-500 font-bold cursor-default">Settings</div>
-        <div className="text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors">Profile</div>
-      </div>
-
-      {/* Frame content - visually connecting to "Settings" */}
-      <div className="-ml-[1.5px]"> {/* Overlap border slightly to merge visual connection */}
-        <Frame
-          side="left"
-          shapeMode="extend"
-          path={TAB_PATH}
-          pathWidth={TAB_WIDTH}
-          className="w-80 h-64 p-6"
-          style={{
-            "--frame-fill": "var(--color-background-900)",
-            "--frame-radius": "16px",
-            color: "var(--background-700)",
-          } as React.CSSProperties}
-        >
-          <div className="h-full flex flex-col justify-center">
-            <h2 className="text-2xl font-bold text-foreground-50 mb-4">Settings</h2>
-            <div className="space-y-3">
-              <div className="h-2 w-2/3 bg-background-800 rounded"></div>
-              <div className="h-2 w-1/2 bg-background-800 rounded"></div>
-              <div className="h-2 w-3/4 bg-background-800 rounded"></div>
-            </div>
-          </div>
-        </Frame>
-      </div>
-    </div>
-  );
-};
-
-export default Example3;

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>
-  );
-}

package/src/components/Grid/examples/01-basic-grid.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Grid } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Grid',
-  description: 'A simple grid layout with multiple cells. Use this for organizing content in a responsive grid structure.'
-};
-
-export default function Example() {
-  return (
-    <Grid columns={3} gap="md">
-      <div style={{ padding: '1rem', background: '#e0e0e0' }}>Cell 1</div>
-      <div style={{ padding: '1rem', background: '#d0d0d0' }}>Cell 2</div>
-      <div style={{ padding: '1rem', background: '#c0c0c0' }}>Cell 3</div>
-      <div style={{ padding: '1rem', background: '#b0b0b0' }}>Cell 4</div>
-      <div style={{ padding: '1rem', background: '#a0a0a0' }}>Cell 5</div>
-      <div style={{ padding: '1rem', background: '#909090' }}>Cell 6</div>
-    </Grid>
-  );
-}

package/src/components/Group/examples/01-basic-group.tsx

@@ -1,16 +0,0 @@
-import { Group } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Group',
-  description: 'A simple group container that arranges multiple elements together. Use this to organize related UI elements in a consistent layout.'
-};
-
-export default function Example() {
-  return (
-    <Group>
-      <Group.Button>First</Group.Button>
-      <Group.Button>Second</Group.Button>
-      <Group.Button>Third</Group.Button>
-    </Group>
-  );
-}

package/src/components/Group/examples/examples.json

@@ -1,10 +0,0 @@
-{
-  "examples": [
-    {
-      "id": "01-basic-group",
-      "title": "Basic Group",
-      "description": "A simple group container that arranges multiple elements together. Use this to organize related UI elements in a consistent layout.",
-      "file": "01-basic-group.tsx"
-    }
-  ]
-}

package/src/components/Group/examples.json

@@ -1,7 +0,0 @@
-{
-  "01-basic-group": {
-    "title": "Basic Group",
-    "description": "A simple group container that arranges multiple elements together. Use this to organize related UI elements in a consistent layout.",
-    "code": "import { Group } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Group>\n      <Group.Button>First</Group.Button>\n      <Group.Button>Second</Group.Button>\n      <Group.Button>Third</Group.Button>\n    </Group>\n  );\n}"
-  }
-}

package/src/components/Input/examples/01-basic-input.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Input } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Input',
-  description: 'A simple text input field with default styling. Use this as the standard input element for collecting user text input.'
-};
-
-export default function Example() {
-  return <Input placeholder="Enter text..." />;
-}

package/src/components/Input/examples/02-validation.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { Input, Label } from 'ui-lab-components';
-import { FaCircleExclamation, FaCircleCheck } from 'react-icons/fa6';
-
-export const metadata = {
-  title: 'Validation States',
-  description: 'Input fields with error and success validation states, including helper text for user feedback.'
-};
-
-export default function Example() {
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-sm">
-      {/* Error State */}
-      <div className="flex flex-col gap-1.5">
-        <Label error helperText="Please enter a valid email address" helperTextError>
-          Email
-        </Label>
-        <Input
-          type="email"
-          placeholder="Enter your email"
-          error
-          defaultValue="invalid-email"
-          icon={{ suffix: <FaCircleExclamation className="text-danger-600" size={14} /> }}
-        />
-      </div>
-
-      {/* Success State */}
-      <div className="flex flex-col gap-1.5">
-        <Label helperText="Email address is available">
-          Email
-        </Label>
-        <Input
-          type="email"
-          placeholder="Enter your email"
-          defaultValue="user@example.com"
-          icon={{ suffix: <FaCircleCheck className="text-success-600" size={14} /> }}
-          className="border-success-600 focus:border-success-600"
-        />
-      </div>
-
-      {/* Default State with Helper Text */}
-      <div className="flex flex-col gap-1.5">
-        <Label required helperText="We'll never share your email with anyone else.">
-          Email
-        </Label>
-        <Input
-          type="email"
-          placeholder="Enter your email"
-        />
-      </div>
-    </div>
-  );
-}

package/src/components/Input/examples/examples.json

@@ -1,16 +0,0 @@
-{
-  "examples": [
-    {
-      "id": "01-basic-input",
-      "title": "Basic Input",
-      "description": "A simple text input field with default styling. Use this as the standard input element for collecting user text input.",
-      "file": "01-basic-input.tsx"
-    },
-    {
-      "id": "02-validation",
-      "title": "Validation States",
-      "description": "Input fields with error and success validation states, including helper text for user feedback.",
-      "file": "02-validation.tsx"
-    }
-  ]
-}