ui-lab-registry 0.3.45 → 0.3.47

package/src/components/Progress/examples/04-indeterminate.tsx

@@ -1,33 +0,0 @@
-"use client";
-
-import { useState, useEffect } from 'react';
-import { Progress, Flex, Button } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Indeterminate Loading',
-  description: 'Animated bar for unknown-duration operations — switches to complete when done.'
-};
-
-export default function Example() {
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    if (!loading) return;
-    const t = setTimeout(() => setLoading(false), 3000);
-    return () => clearTimeout(t);
-  }, [loading]);
-
-  return (
-    <Flex direction="column" gap="md" style={{ width: 320 }}>
-      <Flex direction="column" gap="xs">
-        <span style={{ fontSize: "var(--text-sm)", color: "var(--foreground-muted)" }}>
-          {loading ? "Fetching results…" : "Results loaded"}
-        </span>
-        <Progress indeterminate={loading} value={loading ? 0 : 100} />
-      </Flex>
-      <Button variant="ghost" onClick={() => setLoading(true)} disabled={loading}>
-        Reload
-      </Button>
-    </Flex>
-  );
-}

package/src/components/Progress/examples/05-skill-levels.tsx

@@ -1,22 +0,0 @@
-import { Progress, Flex } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Skill Levels',
-  description: 'Stacked progress bars in a profile or stats context with labels and values.'
-};
-
-const skills = [
-  { name: "TypeScript", value: 92 },
-  { name: "Rust", value: 54 },
-  { name: "Go", value: 38 },
-];
-
-export default function Example() {
-  return (
-    <Flex direction="column" gap="sm" style={{ width: 300 }}>
-      {skills.map((s) => (
-        <Progress key={s.name} value={s.value} label={s.name} showValue />
-      ))}
-    </Flex>
-  );
-}

package/src/components/Radio/examples/01-basic-radio.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Radio } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Radio',
-  description: 'A simple radio button option with a label. Use this for single-choice selection in forms and settings.'
-};
-
-export default function Example() {
-  return (
-    <Radio value="option1" label="Select this option" />
-  );
-}

package/src/components/Radio/examples/02-radio-with-descriptions.tsx

@@ -1,31 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Radio } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Radio with Descriptions',
-  description: 'Radio buttons with titles and descriptive text. Useful for plan selection, settings, or any choice that benefits from additional context.'
-};
-
-export default function Example() {
-  return (
-    <Radio.Group defaultValue="pro" className="w-full max-w-md">
-      <Radio.Item
-        value="starter"
-        label="Starter Plan"
-        description="Perfect for individuals and small projects. Includes 5GB storage and basic support."
-      />
-      <Radio.Item
-        value="pro"
-        label="Pro Plan"
-        description="Ideal for growing teams. Includes 50GB storage, priority support, and advanced analytics."
-      />
-      <Radio.Item
-        value="enterprise"
-        label="Enterprise Plan"
-        description="For large organizations. Unlimited storage, dedicated support, and custom integrations."
-      />
-    </Radio.Group>
-  );
-}

package/src/components/Radio/examples/examples.json

@@ -1,8 +0,0 @@
-[
-  {
-    "id": "01-basic-radio",
-    "title": "Basic Radio",
-    "description": "A simple radio button option with a label. Use this for single-choice selection in forms and settings.",
-    "code": "import React from 'react';\nimport { Radio } from 'ui-lab-components';\n\nexport const metadata = {\n  title: 'Basic Radio',\n  description: 'A simple radio button option with a label. Use this for single-choice selection in forms and settings.'\n};\n\nexport default function Example() {\n  return (\n    <Radio value=\"option1\">\n      Select this option\n    </Radio>\n  );\n}\n"
-  }
-]

package/src/components/Scroll/examples/01-basic-scroll.tsx

@@ -1,55 +0,0 @@
-import { Scroll } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Log Viewer',
-  description: 'Vertically scrollable log output with fade mask to hint at overflow content.'
-};
-
-const LOG_ENTRIES = [
-  { level: "info", msg: "Server started on port 3000" },
-  { level: "info", msg: "Connected to database" },
-  { level: "warn", msg: "Slow query detected: users.findAll (342ms)" },
-  { level: "error", msg: "Failed to send email: SMTP timeout" },
-  { level: "info", msg: "Cache warmed: 1,204 keys loaded" },
-  { level: "info", msg: "Background job 'sync-orders' started" },
-  { level: "warn", msg: "Memory usage at 78%" },
-  { level: "info", msg: "Background job 'sync-orders' completed" },
-  { level: "error", msg: "Unhandled rejection: Cannot read property 'id' of undefined" },
-  { level: "info", msg: "Health check passed" },
-  { level: "warn", msg: "Rate limit reached for IP 192.168.1.42" },
-  { level: "info", msg: "User #4821 logged in" },
-  { level: "info", msg: "Deployment complete: v2.14.0" },
-];
-
-export default function Example() {
-  return (
-    <div style={{ width: 480, display: 'flex', flexDirection: 'column', gap: 4 }}>
-      <span style={{ fontSize: 11, color: 'var(--color-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
-        Application Logs
-      </span>
-      <div style={{ border: '1px solid var(--color-border)', borderRadius: 6, background: 'var(--color-background-900)', overflow: 'hidden' }}>
-        <Scroll maxHeight="200px" fade-y fadeDistance={8} fadeSize={5}>
-          <div style={{ padding: '8px 0' }}>
-            {LOG_ENTRIES.map((entry, i) => (
-              <div key={i} style={{
-                display: 'flex',
-                gap: 10,
-                padding: '3px 12px',
-                fontSize: 12,
-                fontFamily: 'var(--font-mono, monospace)',
-                color: entry.level === 'error'
-                  ? 'var(--color-destructive)'
-                  : entry.level === 'warn'
-                    ? 'var(--color-warning, var(--color-muted))'
-                    : 'var(--color-foreground)',
-              }}>
-                <span style={{ color: 'var(--color-muted)', minWidth: 36 }}>{entry.level}</span>
-                <span>{entry.msg}</span>
-              </div>
-            ))}
-          </div>
-        </Scroll>
-      </div>
-    </div>
-  );
-}

package/src/components/Scroll/examples/02-settings-panel.tsx

@@ -1,40 +0,0 @@
-import { Scroll } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Settings Panel',
-  description: 'Constrained-height settings list with a custom scrollbar shown on hover.'
-};
-
-const SETTINGS_ITEMS = Array.from({ length: 18 }, (_, i) => ({
-  label: `Option ${i + 1}`,
-  description: `Configure behavior for setting ${i + 1}`,
-}));
-
-export default function Example() {
-  return (
-    <div style={{ width: 320, border: '1px solid var(--color-border)', borderRadius: 8, overflow: 'hidden', background: 'var(--color-background)' }}>
-      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--color-border)', fontSize: 13, fontWeight: 500 }}>
-        Preferences
-      </div>
-      <Scroll maxHeight="240px">
-        <div style={{ padding: '8px 0' }}>
-          {SETTINGS_ITEMS.map((item, i) => (
-            <div key={i} style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              padding: '8px 16px',
-              fontSize: 13,
-              borderBottom: i < SETTINGS_ITEMS.length - 1 ? '1px solid var(--color-border)' : undefined,
-            }}>
-              <div>
-                <div style={{ color: 'var(--color-foreground)' }}>{item.label}</div>
-                <div style={{ fontSize: 11, color: 'var(--color-muted)', marginTop: 1 }}>{item.description}</div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </Scroll>
-    </div>
-  );
-}

package/src/components/Scroll/examples/03-horizontal-tags.tsx

@@ -1,38 +0,0 @@
-import { Scroll } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Horizontal Tag List',
-  description: 'Horizontally scrollable row of filter tags that overflow their container.'
-};
-
-const TAGS = [
-  "authentication", "payments", "webhooks", "analytics", "notifications",
-  "billing", "user-management", "api-keys", "rate-limiting", "audit-logs",
-  "exports", "integrations", "search", "permissions", "reports",
-];
-
-export default function Example() {
-  return (
-    <div style={{ width: 420, display: 'flex', flexDirection: 'column', gap: 6 }}>
-      <span style={{ fontSize: 12, color: 'var(--color-muted)' }}>Filter by topic</span>
-      <Scroll direction="horizontal" maxWidth="420px" hide={false} inline>
-        <div style={{ display: 'flex', gap: 6, padding: '2px 0' }}>
-          {TAGS.map((tag) => (
-            <span key={tag} style={{
-              whiteSpace: 'nowrap',
-              padding: '3px 10px',
-              border: '1px solid var(--color-border)',
-              borderRadius: 4,
-              fontSize: 12,
-              color: 'var(--color-foreground)',
-              cursor: 'default',
-              background: 'var(--color-background-900)',
-            }}>
-              {tag}
-            </span>
-          ))}
-        </div>
-      </Scroll>
-    </div>
-  );
-}

package/src/components/Select/examples/01-basic-select.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Select } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Select',
-  description: 'A simple dropdown select component with options. Use this for form inputs and user choices.'
-};
-
-export default function Example() {
-  return (
-    <Select>
-      <Select.Trigger>
-        <Select.Value placeholder="Select an option" />
-      </Select.Trigger>
-      <Select.Content>
-        <Select.Item value="option1" textValue="Option 1">Option 1</Select.Item>
-        <Select.Item value="option2" textValue="Option 2">Option 2</Select.Item>
-        <Select.Item value="option3" textValue="Option 3">Option 3</Select.Item>
-      </Select.Content>
-    </Select>
-  );
-}

package/src/components/Select/examples/02-searchable-select.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import { Select, Searchable } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Searchable Select',
-  description: 'A filterable select component with search input. Type to filter through a large list of options.'
-};
-
-const countries = [
-  { value: 'us', label: 'United States' },
-  { value: 'ca', label: 'Canada' },
-  { value: 'mx', label: 'Mexico' },
-  { value: 'br', label: 'Brazil' },
-  { value: 'ar', label: 'Argentina' },
-  { value: 'uk', label: 'United Kingdom' },
-  { value: 'fr', label: 'France' },
-  { value: 'de', label: 'Germany' },
-  { value: 'it', label: 'Italy' },
-  { value: 'es', label: 'Spain' },
-  { value: 'pt', label: 'Portugal' },
-  { value: 'nl', label: 'Netherlands' },
-  { value: 'be', label: 'Belgium' },
-  { value: 'ch', label: 'Switzerland' },
-  { value: 'at', label: 'Austria' },
-  { value: 'se', label: 'Sweden' },
-  { value: 'no', label: 'Norway' },
-  { value: 'dk', label: 'Denmark' },
-  { value: 'fi', label: 'Finland' },
-  { value: 'pl', label: 'Poland' },
-  { value: 'jp', label: 'Japan' },
-  { value: 'cn', label: 'China' },
-  { value: 'kr', label: 'South Korea' },
-  { value: 'in', label: 'India' },
-  { value: 'au', label: 'Australia' },
-  { value: 'nz', label: 'New Zealand' },
-];
-
-export default function Example() {
-  return (
-    <Select>
-      <Searchable.Input placeholder="Search countries..." />
-      <Searchable.Content searchPlaceholder="Type to filter...">
-        {countries.map((country) => (
-          <Select.Item key={country.value} value={country.value} textValue={country.label}>
-            {country.label}
-          </Select.Item>
-        ))}
-      </Searchable.Content>
-    </Select>
-  );
-}

package/src/components/Select/examples/03-country-select.tsx

@@ -1,55 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Select, Searchable } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Country Selector',
-  description: 'Button trigger reveals a searchable country list with flags and dial codes inside the dropdown content.'
-};
-
-const countries = [
-  { value: "us", label: "United States", flag: "🇺🇸", code: "+1" },
-  { value: "gb", label: "United Kingdom", flag: "🇬🇧", code: "+44" },
-  { value: "de", label: "Germany", flag: "🇩🇪", code: "+49" },
-  { value: "fr", label: "France", flag: "🇫🇷", code: "+33" },
-  { value: "jp", label: "Japan", flag: "🇯🇵", code: "+81" },
-  { value: "kr", label: "South Korea", flag: "🇰🇷", code: "+82" },
-  { value: "cn", label: "China", flag: "🇨🇳", code: "+86" },
-  { value: "in", label: "India", flag: "🇮🇳", code: "+91" },
-  { value: "br", label: "Brazil", flag: "🇧🇷", code: "+55" },
-  { value: "au", label: "Australia", flag: "🇦🇺", code: "+61" },
-  { value: "ca", label: "Canada", flag: "🇨🇦", code: "+1" },
-  { value: "mx", label: "Mexico", flag: "🇲🇽", code: "+52" },
-];
-
-export default function Example() {
-  const [country, setCountry] = useState<string | number | null>("us");
-  const selected = countries.find(c => c.value === country);
-
-  return (
-    <Select
-      selectedKey={country}
-      valueLabel={selected?.label}
-      onSelectionChange={setCountry}
-      className="w-72"
-    >
-      <Select.Trigger>
-        <Select.Value
-          placeholder="Choose a country..."
-          icon={selected && <span className="text-sm">{selected.flag}</span>}
-        />
-      </Select.Trigger>
-      <Searchable.Content searchPlaceholder="Search countries...">
-        {countries.map((c) => (
-          <Select.Item key={c.value} value={c.value} textValue={c.label} icon={<span className="text-md">{c.flag}</span>}>
-            <div className="flex items-center justify-between w-full">
-              <span>{c.label}</span>
-              <span className="ml-2 text-sm text-foreground-400">{c.code}</span>
-            </div>
-          </Select.Item>
-        ))}
-      </Searchable.Content>
-    </Select>
-  );
-}

package/src/components/Slider/examples/01-basic-slider.tsx

@@ -1,26 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Slider } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Volume Control',
-  description: 'Horizontal slider with a label and live numeric readout.'
-};
-
-export default function Example() {
-  const [volume, setVolume] = useState(60);
-
-  return (
-    <div className="flex items-center gap-4 w-72">
-      <span className="text-sm text-muted-foreground w-16">Volume</span>
-      <Slider
-        aria-label="Volume"
-        value={volume}
-        onValueChange={([v]) => setVolume(v)}
-        className="flex-1"
-      />
-      <span className="text-sm tabular-nums w-8 text-right">{volume}</span>
-    </div>
-  );
-}

package/src/components/Slider/examples/02-settings-panel.tsx

@@ -1,33 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Slider } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Settings Panel',
-  description: 'Multiple sliders in a settings list with dividers.'
-};
-
-export default function Example() {
-  const [brightness, setBrightness] = useState(80);
-  const [contrast, setContrast] = useState(50);
-  const [saturation, setSaturation] = useState(40);
-
-  const settings = [
-    { id: "brightness", label: "Brightness", value: brightness, onChange: (v: number[]) => setBrightness(v[0]) },
-    { id: "contrast", label: "Contrast", value: contrast, onChange: (v: number[]) => setContrast(v[0]) },
-    { id: "saturation", label: "Saturation", value: saturation, onChange: (v: number[]) => setSaturation(v[0]) },
-  ];
-
-  return (
-    <div className="w-80 divide-y divide-border divide-background-700">
-      {settings.map(({ id, label, value, onChange }) => (
-        <div key={id} className="flex items-center gap-4 py-3">
-          <span className="text-sm w-24 shrink-0">{label}</span>
-          <Slider aria-label={label} value={value} onValueChange={onChange} className="flex-1" />
-          <span className="text-sm tabular-nums w-8 text-right text-muted-foreground">{value}</span>
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/components/Slider/examples/03-price-range.tsx

@@ -1,34 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Slider } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Price Range',
-  description: 'Range slider with two thumbs for min/max filtering.'
-};
-
-export default function Example() {
-  const [range, setRange] = useState([200, 800]);
-
-  return (
-    <div className="w-80 flex flex-col gap-4">
-      <div className="flex justify-between text-sm text-muted-foreground">
-        <span>Price range</span>
-        <span>${range[0]} – ${range[1]}</span>
-      </div>
-      <Slider
-        aria-label="Price range"
-        value={range}
-        min={0}
-        max={1000}
-        step={10}
-        onValueChange={setRange}
-      />
-      <div className="flex justify-between text-xs text-muted-foreground">
-        <span>$0</span>
-        <span>$1,000</span>
-      </div>
-    </div>
-  );
-}

package/src/components/Slider/examples/04-step-slider.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Slider } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Step Slider',
-  description: 'Slider constrained to discrete steps with tick labels.'
-};
-
-export default function Example() {
-  const [rating, setRating] = useState(3);
-
-  return (
-    <div className="flex flex-col gap-3 w-64">
-      <div className="flex justify-between items-center">
-        <label className="text-sm">Quality rating</label>
-        <span className="text-sm font-medium">{rating} / 5</span>
-      </div>
-      <Slider
-        aria-label="Quality rating"
-        value={rating}
-        min={1}
-        max={5}
-        step={1}
-        onValueChange={([v]) => setRating(v)}
-      />
-      <div className="flex justify-between text-xs text-muted-foreground">
-        {[1, 2, 3, 4, 5].map((n) => (
-          <span key={n}>{n}</span>
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/components/Slider/examples/05-disabled-state.tsx

@@ -1,21 +0,0 @@
-import { Slider } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Disabled State',
-  description: 'Active and disabled sliders side by side.'
-};
-
-export default function Example() {
-  return (
-    <div className="flex flex-col gap-4 w-64">
-      <div className="flex items-center gap-4">
-        <span className="text-sm text-muted-foreground w-20">Active</span>
-        <Slider aria-label="Active slider" defaultValue={40} className="flex-1" />
-      </div>
-      <div className="flex items-center gap-4">
-        <span className="text-sm text-muted-foreground w-20">Disabled</span>
-        <Slider aria-label="Disabled slider" defaultValue={40} disabled className="flex-1" />
-      </div>
-    </div>
-  );
-}

package/src/components/Slider/examples/06-vertical-mixer.tsx

@@ -1,34 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Slider } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Vertical Mixer',
-  description: 'Vertical orientation for audio-style channel controls.'
-};
-
-export default function Example() {
-  const [channels, setChannels] = useState([70, 50, 80, 40]);
-
-  return (
-    <div className="flex items-end gap-6 h-40">
-      {["CH1", "CH2", "CH3", "CH4"].map((label, i) => (
-        <div key={label} className="flex flex-col items-center gap-2">
-          <Slider
-            aria-label={label}
-            value={channels[i]}
-            orientation="vertical"
-            onValueChange={([v]) => {
-              const next = [...channels];
-              next[i] = v;
-              setChannels(next);
-            }}
-            style={{ height: 120 }}
-          />
-          <span className="text-xs text-muted-foreground">{label}</span>
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/components/Switch/examples/01-basic-switch.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Switch } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Inline Form Field',
-  description: 'Switch paired with a label in a horizontal form row.'
-};
-
-export default function Example() {
-  const [enabled, setEnabled] = useState(false);
-
-  return (
-    <div className="flex items-center justify-between gap-4 w-64">
-      <label htmlFor="marketing" className="text-sm">
-        Marketing emails
-      </label>
-      <Switch
-        id="marketing"
-        aria-label="Marketing emails"
-        isSelected={enabled}
-        onChange={setEnabled}
-      />
-    </div>
-  );
-}

package/src/components/Switch/examples/02-settings-panel.tsx

@@ -1,32 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Switch } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Settings Panel',
-  description: 'A list of toggleable settings with dividers.'
-};
-
-export default function Example() {
-  const [notifications, setNotifications] = useState(true);
-  const [sounds, setSounds] = useState(false);
-  const [badge, setBadge] = useState(true);
-
-  const settings = [
-    { id: "notifications", label: "Push notifications", value: notifications, onChange: setNotifications },
-    { id: "sounds", label: "Sound effects", value: sounds, onChange: setSounds },
-    { id: "badge", label: "App badge", value: badge, onChange: setBadge },
-  ];
-
-  return (
-    <div className="w-72 divide-y divide-border">
-      {settings.map(({ id, label, value, onChange }) => (
-        <div key={id} className="flex items-center justify-between py-3">
-          <span className="text-sm">{label}</span>
-          <Switch aria-label={label} isSelected={value} onChange={onChange} />
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/components/Switch/examples/03-disabled-state.tsx

@@ -1,21 +0,0 @@
-import { Switch } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Disabled State',
-  description: 'Switch in both on and off disabled states.'
-};
-
-export default function Example() {
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex items-center gap-3">
-        <Switch aria-label="Off disabled" isDisabled defaultSelected={false} />
-        <span className="text-sm text-muted-foreground">Disabled off</span>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch aria-label="On disabled" isDisabled defaultSelected={true} />
-        <span className="text-sm text-muted-foreground">Disabled on</span>
-      </div>
-    </div>
-  );
-}