ui-lab-registry 0.3.45 → 0.3.46

package/src/components/Switch/examples/04-small-size.tsx

@@ -1,25 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Switch } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Small Size',
-  description: 'Compact switch for dense UIs.'
-};
-
-export default function Example() {
-  const [dense, setDense] = useState(false);
-
-  return (
-    <div className="flex items-center gap-2">
-      <Switch
-        size="sm"
-        aria-label="Dense mode"
-        isSelected={dense}
-        onChange={setDense}
-      />
-      <span className="text-sm text-muted-foreground">Dense mode</span>
-    </div>
-  );
-}

package/src/components/Switch/examples/05-controlled-toggle.tsx

@@ -1,32 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Switch } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Controlled Toggle',
-  description: 'Fully controlled switch with external state and reset.'
-};
-
-export default function Example() {
-  const [active, setActive] = useState(false);
-
-  return (
-    <div className="flex flex-col items-center gap-4">
-      <Switch
-        aria-label="Feature flag"
-        isSelected={active}
-        onChange={setActive}
-      />
-      <p className="text-xs text-muted-foreground">
-        Feature is <strong>{active ? "enabled" : "disabled"}</strong>
-      </p>
-      <button
-        className="text-xs underline text-muted-foreground"
-        onClick={() => setActive(false)}
-      >
-        Reset
-      </button>
-    </div>
-  );
-}

package/src/components/Table/examples/01-basic-table.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Table } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Table',
-  description: 'A simple data table displaying structured information with columns and rows. Use this for displaying tabular data in your application.'
-};
-
-export default function Example() {
-  const data = [
-    { id: 1, name: 'Alice Johnson', email: 'alice@example.com', status: 'Active' },
-    { id: 2, name: 'Bob Smith', email: 'bob@example.com', status: 'Inactive' },
-    { id: 3, name: 'Carol White', email: 'carol@example.com', status: 'Active' }
-  ];
-
-  return (
-    <Table
-      data={data}
-      columns={[
-        { key: 'id', label: 'ID' },
-        { key: 'name', label: 'Name' },
-        { key: 'email', label: 'Email' },
-        { key: 'status', label: 'Status' }
-      ]}
-    />
-  );
-}

package/src/components/Tabs/examples/01-basic-tabs.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { Tabs } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Tabs',
-  description: 'A simple tabbed interface with content switching. Use this to organize related content into separate views.'
-};
-
-export default function Example() {
-  return (
-    <Tabs default="overview">
-      <Tabs.List aria-label="Content sections">
-        <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
-        <Tabs.Trigger value="details">Details</Tabs.Trigger>
-        <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
-      </Tabs.List>
-      <Tabs.Content value="overview">
-        <p>Overview content goes here.</p>
-      </Tabs.Content>
-      <Tabs.Content value="details">
-        <p>Details content goes here.</p>
-      </Tabs.Content>
-      <Tabs.Content value="settings">
-        <p>Settings content goes here.</p>
-      </Tabs.Content>
-    </Tabs>
-  );
-}

package/src/components/Tabs/examples/02-vertical-tabs.tsx

@@ -1,103 +0,0 @@
-import React from 'react';
-import { Tabs, Card } from 'ui-lab-components';
-import { User, Settings, Bell, Shield } from 'lucide-react';
-
-export const metadata = {
-  title: 'Vertical Tabs (Sidebar)',
-  description: 'A vertical tab layout ideal for settings pages or sidebar navigation. Tabs are stacked vertically with content panels beside them.'
-};
-
-export default function Example() {
-  return (
-    <div className="flex items-center justify-center bg-background-950 p-4 min-h-[400px]">
-      <Card className="w-full max-w-2xl">
-        <Tabs default="profile" className="flex flex-row">
-          {/* Vertical tab list - styled as sidebar */}
-          <Tabs.List
-            aria-label="Settings sections"
-            className="flex-col items-stretch justify-start h-auto w-48 border-r border-background-700 rounded-none bg-transparent p-2"
-          >
-            <Tabs.Trigger value="profile" icon={<User className="w-4 h-4" />} className="justify-start">
-              Profile
-            </Tabs.Trigger>
-            <Tabs.Trigger value="notifications" icon={<Bell className="w-4 h-4" />} className="justify-start">
-              Notifications
-            </Tabs.Trigger>
-            <Tabs.Trigger value="security" icon={<Shield className="w-4 h-4" />} className="justify-start">
-              Security
-            </Tabs.Trigger>
-            <Tabs.Trigger value="preferences" icon={<Settings className="w-4 h-4" />} className="justify-start">
-              Preferences
-            </Tabs.Trigger>
-          </Tabs.List>
-
-          {/* Content panels */}
-          <div className="flex-1 p-6">
-            <Tabs.Content value="profile" className="mt-0">
-              <h3 className="text-lg font-semibold text-foreground-100 mb-2">Profile Settings</h3>
-              <p className="text-foreground-400 text-sm mb-4">
-                Manage your personal information and how others see you on the platform.
-              </p>
-              <div className="space-y-3">
-                <div className="h-10 w-full bg-background-800 rounded border border-background-700" />
-                <div className="h-10 w-full bg-background-800 rounded border border-background-700" />
-                <div className="h-10 w-2/3 bg-background-800 rounded border border-background-700" />
-              </div>
-            </Tabs.Content>
-
-            <Tabs.Content value="notifications" className="mt-0">
-              <h3 className="text-lg font-semibold text-foreground-100 mb-2">Notification Preferences</h3>
-              <p className="text-foreground-400 text-sm mb-4">
-                Control how and when you receive alerts and updates.
-              </p>
-              <div className="space-y-3">
-                <div className="flex items-center gap-3">
-                  <div className="h-5 w-5 bg-accent-500 rounded" />
-                  <div className="h-4 w-32 bg-background-800 rounded" />
-                </div>
-                <div className="flex items-center gap-3">
-                  <div className="h-5 w-5 bg-background-700 rounded" />
-                  <div className="h-4 w-40 bg-background-800 rounded" />
-                </div>
-                <div className="flex items-center gap-3">
-                  <div className="h-5 w-5 bg-accent-500 rounded" />
-                  <div className="h-4 w-28 bg-background-800 rounded" />
-                </div>
-              </div>
-            </Tabs.Content>
-
-            <Tabs.Content value="security" className="mt-0">
-              <h3 className="text-lg font-semibold text-foreground-100 mb-2">Security Settings</h3>
-              <p className="text-foreground-400 text-sm mb-4">
-                Protect your account with passwords, two-factor authentication, and more.
-              </p>
-              <div className="space-y-3">
-                <div className="p-3 bg-background-800 rounded border border-background-700">
-                  <div className="h-4 w-24 bg-background-700 rounded mb-2" />
-                  <div className="h-3 w-48 bg-background-700/50 rounded" />
-                </div>
-                <div className="p-3 bg-background-800 rounded border border-background-700">
-                  <div className="h-4 w-32 bg-background-700 rounded mb-2" />
-                  <div className="h-3 w-40 bg-background-700/50 rounded" />
-                </div>
-              </div>
-            </Tabs.Content>
-
-            <Tabs.Content value="preferences" className="mt-0">
-              <h3 className="text-lg font-semibold text-foreground-100 mb-2">General Preferences</h3>
-              <p className="text-foreground-400 text-sm mb-4">
-                Customize your experience with theme, language, and display options.
-              </p>
-              <div className="grid grid-cols-2 gap-3">
-                <div className="h-20 bg-background-800 rounded border border-background-700" />
-                <div className="h-20 bg-background-800 rounded border border-background-700" />
-                <div className="h-20 bg-background-800 rounded border border-background-700" />
-                <div className="h-20 bg-background-800 rounded border border-background-700" />
-              </div>
-            </Tabs.Content>
-          </div>
-        </Tabs>
-      </Card>
-    </div>
-  );
-}

package/src/components/Tabs/examples/03-underline-tabs.tsx

@@ -1,23 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Tabs } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Underline Variant',
-  description: 'Horizontal tabs with underline indicator. Great for documentation sites.'
-};
-
-export default function Example() {
-  const [selected, setSelected] = useState("tab1");
-
-  return (
-    <Tabs value={selected} onValueChange={setSelected} variant="underline" className="w-fit">
-      <Tabs.List aria-label="Tab options">
-        <Tabs.Trigger value="tab1">Install</Tabs.Trigger>
-        <Tabs.Trigger value="tab2">Usage</Tabs.Trigger>
-        <Tabs.Trigger value="tab3">API</Tabs.Trigger>
-      </Tabs.List>
-    </Tabs>
-  );
-}

package/src/components/Tabs/examples/04-vertical-underline-tabs.tsx

@@ -1,23 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Tabs } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Vertical Underline',
-  description: 'Vertical tabs with underline variant indicator.'
-};
-
-export default function Example() {
-  const [selected, setSelected] = useState("tab1");
-
-  return (
-    <Tabs value={selected} onValueChange={setSelected} variant="underline" orientation="vertical" className="flex w-fit gap-4">
-      <Tabs.List aria-label="Tab options" className="flex flex-col w-fit">
-        <Tabs.Trigger value="tab1">Profile</Tabs.Trigger>
-        <Tabs.Trigger value="tab2">Billing</Tabs.Trigger>
-        <Tabs.Trigger value="tab3">Team</Tabs.Trigger>
-      </Tabs.List>
-    </Tabs>
-  );
-}

package/src/components/Textarea/examples/01-basic-textarea.tsx

@@ -1,29 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { TextArea, Flex, Button } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Feedback Form',
-  description: 'TextArea with a character limit and submit button — disabled until the user types.'
-};
-
-export default function Example() {
-  const [value, setValue] = useState("");
-
-  return (
-    <Flex direction="column" gap="sm" style={{ width: 380 }}>
-      <TextArea
-        placeholder="Tell us what you think..."
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        showCharacterCount
-        maxCharacters={300}
-        rows={4}
-      />
-      <Button variant="primary" disabled={value.trim().length === 0} className="self-end">
-        Submit
-      </Button>
-    </Flex>
-  );
-}

package/src/components/Textarea/examples/02-bio-settings.tsx

@@ -1,30 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { TextArea, Flex, Button } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Profile Bio',
-  description: 'Fixed-height settings textarea with a 160-character cap and save/clear actions.'
-};
-
-export default function Example() {
-  const [bio, setBio] = useState("UI designer & developer building minimal tools.");
-
-  return (
-    <Flex direction="column" gap="sm" style={{ width: 380 }}>
-      <TextArea
-        value={bio}
-        onChange={(e) => setBio(e.target.value)}
-        showCharacterCount
-        maxCharacters={160}
-        rows={3}
-        resizable={false}
-      />
-      <Flex justify="end" gap="sm">
-        <Button size="sm" variant="ghost" onClick={() => setBio("")}>Clear</Button>
-        <Button size="sm" variant="primary">Save</Button>
-      </Flex>
-    </Flex>
-  );
-}

package/src/components/Textarea/examples/03-error-state.tsx

@@ -1,31 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { TextArea, Flex } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Validation Error',
-  description: 'Error styling triggered when the input is non-empty but below a minimum length.'
-};
-
-export default function Example() {
-  const [value, setValue] = useState("");
-  const hasError = value.trim().length > 0 && value.trim().length < 20;
-
-  return (
-    <Flex direction="column" gap="sm" style={{ width: 380 }}>
-      <TextArea
-        placeholder="Describe the issue in detail..."
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        error={hasError}
-        rows={4}
-      />
-      {hasError && (
-        <span style={{ fontSize: "0.75rem", color: "var(--color-destructive)" }}>
-          Description must be at least 20 characters.
-        </span>
-      )}
-    </Flex>
-  );
-}

package/src/components/Textarea/examples/04-disabled-readonly.tsx

@@ -1,25 +0,0 @@
-import { TextArea, Flex } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Disabled & Read-only',
-  description: 'Side-by-side disabled and read-only states to compare their visual treatment.'
-};
-
-export default function Example() {
-  return (
-    <Flex direction="column" gap="md" style={{ width: 380 }}>
-      <TextArea
-        value="This field is disabled and cannot be edited."
-        disabled
-        rows={2}
-        resizable={false}
-      />
-      <TextArea
-        value="This is a read-only note visible to all team members."
-        readOnly
-        rows={2}
-        resizable={false}
-      />
-    </Flex>
-  );
-}

package/src/components/Textarea/examples/05-scrolling.tsx

@@ -1,26 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { TextArea, Flex } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Scrollable with maxHeight',
-  description: 'TextArea bounded by a max height — content scrolls once it overflows.'
-};
-
-export default function Example() {
-  const [value, setValue] = useState(
-    "Line 1\nLine 2\nLine 3\nLine 4\nLine 5\nLine 6\nLine 7\nLine 8"
-  );
-
-  return (
-    <Flex direction="column" gap="sm" style={{ width: 380 }}>
-      <TextArea
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        maxHeight="120px"
-        resizable={false}
-      />
-    </Flex>
-  );
-}

package/src/components/Toast/examples/01-basic-toast.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Button, toast, Toaster } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Toast',
-  description: 'A simple toast notification. Click the button to trigger a toast message with default styling.'
-};
-
-export default function Example() {
-  return (
-    <>
-      <Button
-        size="sm"
-        onClick={() => toast({ title: 'Notification', description: 'This is a toast message' })}>
-        Show Toast
-      </Button>
-      <Toaster />
-    </>
-  );
-}

package/src/components/Toast/examples/02-success-toast.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Button, toast, Toaster } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Success Toast',
-  description: 'Toast notification for successful operations.'
-};
-
-export default function Example() {
-  return (
-    <>
-      <Button
-        size="sm"
-        onClick={() =>
-          toast({
-            title: 'Success',
-            description: 'Operation completed successfully',
-            variant: 'success',
-          })
-        }
-      >
-        Show Success
-      </Button>
-      <Toaster />
-    </>
-  );
-}

package/src/components/Toast/examples/03-danger-toast.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Button, toast, Toaster } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Danger Toast',
-  description: 'Toast notification for errors or destructive operations.'
-};
-
-export default function Example() {
-  return (
-    <>
-      <Button
-        size="sm"
-        onClick={() =>
-          toast({
-            title: 'Error',
-            description: 'Something went wrong',
-            variant: 'danger',
-          })
-        }
-      >
-        Show Error
-      </Button>
-      <Toaster />
-    </>
-  );
-}

package/src/components/Toast/examples/04-info-toast.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Button, toast, Toaster } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Info Toast',
-  description: 'Toast notification for informational messages.'
-};
-
-export default function Example() {
-  return (
-    <>
-      <Button
-        size="sm"
-        onClick={() =>
-          toast({
-            title: 'Info',
-            description: 'Here is some useful information',
-            variant: 'info',
-          })
-        }
-      >
-        Show Info
-      </Button>
-      <Toaster />
-    </>
-  );
-}

package/src/components/Toast/examples/05-warning-toast.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Button, toast, Toaster } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Warning Toast',
-  description: 'Toast notification for warnings.'
-};
-
-export default function Example() {
-  return (
-    <>
-      <Button
-        size="sm"
-        onClick={() =>
-          toast({
-            title: 'Warning',
-            description: 'Please be careful',
-            variant: 'warning',
-          })
-        }
-      >
-        Show Warning
-      </Button>
-      <Toaster />
-    </>
-  );
-}

package/src/components/Tooltip/examples/01-basic-tooltip.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Tooltip } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Tooltip',
-  description: 'A simple tooltip that appears on hover. Hover over the button to see the tooltip with helpful information.'
-};
-
-export default function Example() {
-  return (
-    <Tooltip content="This is a helpful tooltip">
-      <button>Hover me</button>
-    </Tooltip>
-  );
-}