ui-lab-registry 0.3.44 → 0.3.46

package/src/components/Label/examples/01-basic-label.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Label, Input } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Label',
-  description: 'A simple label component associated with a form input. Use this to provide accessible labels for form elements.'
-};
-
-export default function Example() {
-  return (
-    <div>
-      <Label htmlFor="name">Name</Label>
-      <Input id="name" placeholder="Enter your name" />
-    </div>
-  );
-}

package/src/components/List/examples/01-basic.tsx

@@ -1,25 +0,0 @@
-import { List } from 'ui-lab-components';
-import { Button } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic List',
-  description: 'A simple list displaying basic items with selection and interaction support.',
-};
-
-export default function Example() {
-  return (
-    <List aria-label="Basic List Example">
-      <List.Header>
-        <h2>Items</h2>
-      </List.Header>
-      <List.Item interactive>Item One</List.Item>
-      <List.Item interactive>Item Two</List.Item>
-      <List.Item interactive>Item Three</List.Item>
-      <List.Footer align="center">
-        <Button variant="primary" size="sm">
-          Load More
-        </Button>
-      </List.Footer>
-    </List>
-  );
-}

package/src/components/Mask/examples/01-read-more-fade.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { Mask } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Mask - Read More Effect',
-  description: 'Using the mask component to create a smooth fade effect on long text content.'
-};
-
-export default function Example() {
-  return (
-    <div className="max-w-md mx-auto p-4 border rounded-lg bg-background">
-      <h3 className="text-lg font-semibold mb-2">Terms of Service</h3>
-      <Mask className="h-48 bg-muted/30 rounded-md p-4">
-        <Mask.Fade direction="top" intensity={0.8} fixed />
-        <Mask.Fade direction="bottom" intensity={0.8} fixed />
-        <div className="space-y-4 text-sm text-muted-foreground">
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-          </p>
-          <p>
-            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          </p>
-          <p>
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-          </p>
-          <p>
-            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.
-          </p>
-        </div>
-      </Mask>
-    </div>
-  );
-}

package/src/components/Mask/examples/02-text-gradient.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Mask } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Mask - Text Gradient',
-  description: 'Using the mask component to create a generic gradient effect on text elements.'
-};
-
-export default function Example() {
-  return (
-    <div className="w-full flex flex-col items-center justify-center space-y-8 p-8">
-      <div className="w-full max-w-2xl">
-        <Mask.Gradient gradient="linear-gradient(to right, var(--foreground-200), var(--accent-500))">
-          <div className="whitespace-nowrap text-3xl text-center">
-            Gradient
-          </div>
-        </Mask.Gradient>
-      </div>
-    </div>
-  );
-}

package/src/components/Menu/examples/01-basic-menu.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Menu } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Menu',
-  description: 'A simple context menu triggered by right-click. Use this to provide quick access to common actions and context-specific commands.'
-};
-
-export default function Example() {
-  return (
-    <Menu>
-      <Menu.Trigger className="flex items-center justify-center rounded-md border-2 border-dashed border-background-600 p-12 w-full cursor-context-menu select-none text-foreground-300 hover:border-background-500 transition-colors">
-        Right click here
-      </Menu.Trigger>
-      <Menu.Content>
-        <Menu.Item>Copy</Menu.Item>
-        <Menu.Item>Paste</Menu.Item>
-        <Menu.Item disabled>Cut</Menu.Item>
-      </Menu.Content>
-    </Menu>
-  );
-}

package/src/components/Menu/examples/02-nested-menu.tsx

@@ -1,49 +0,0 @@
-import { Menu } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Nested Menu',
-  description: 'Context menu with submenus for organizing related actions. Hover over items with arrows to reveal nested options.'
-};
-
-export default function Example() {
-  return (
-    <Menu>
-      <Menu.Trigger className="flex items-center justify-center rounded-md border-2 border-dashed border-background-600 p-12 w-full cursor-context-menu select-none text-foreground-300 hover:border-background-500 transition-colors">
-        Right click here
-      </Menu.Trigger>
-      <Menu.Content>
-        <Menu.Item>New File</Menu.Item>
-        <Menu.Item>New Folder</Menu.Item>
-        <Menu.Separator />
-        <Menu.Sub>
-          <Menu.SubTrigger>Open with...</Menu.SubTrigger>
-          <Menu.SubContent>
-            <Menu.Item>VS Code</Menu.Item>
-            <Menu.Item>Sublime Text</Menu.Item>
-            <Menu.Item>Vim</Menu.Item>
-            <Menu.Separator />
-            <Menu.Item>Other Application...</Menu.Item>
-          </Menu.SubContent>
-        </Menu.Sub>
-        <Menu.Sub>
-          <Menu.SubTrigger>Share</Menu.SubTrigger>
-          <Menu.SubContent>
-            <Menu.Item>Copy Link</Menu.Item>
-            <Menu.Item>Email</Menu.Item>
-            <Menu.Sub>
-              <Menu.SubTrigger>Social Media</Menu.SubTrigger>
-              <Menu.SubContent>
-                <Menu.Item>Twitter</Menu.Item>
-                <Menu.Item>LinkedIn</Menu.Item>
-                <Menu.Item>Facebook</Menu.Item>
-              </Menu.SubContent>
-            </Menu.Sub>
-          </Menu.SubContent>
-        </Menu.Sub>
-        <Menu.Separator />
-        <Menu.Item>Rename</Menu.Item>
-        <Menu.Item disabled>Delete</Menu.Item>
-      </Menu.Content>
-    </Menu>
-  );
-}

package/src/components/Modal/examples/01-basic-modal.tsx

@@ -1,24 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Modal, Button } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Modal',
-  description: 'A simple modal dialog with a trigger button. Use this for important user interactions that require focused attention.'
-};
-
-export default function Example() {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
-      <Modal isOpen={isOpen} onOpenChange={setIsOpen}>
-        <Modal.Header>Modal Title</Modal.Header>
-        <Modal.Body>This is the modal content. It displays important information or actions.</Modal.Body>
-        <Modal.Footer>Modal Footer</Modal.Footer>
-      </Modal>
-    </>
-  );
-}

package/src/components/Modal/examples/02-form-modal.tsx

@@ -1,88 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Modal, Button, Input, Label, TextArea, Flex } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Form Modal',
-  description: 'A modal dialog containing a form for editing user profile settings. Demonstrates using form inputs, labels, and action buttons within a modal.'
-};
-
-export default function Example() {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [formData, setFormData] = React.useState({
-    name: 'John Doe',
-    email: 'john.doe@example.com',
-    bio: 'Software developer passionate about building great user experiences.',
-  });
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    // Handle form submission
-    setIsOpen(false);
-  };
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Edit Profile</Button>
-      <Modal isOpen={isOpen} onOpenChange={setIsOpen} size="auto">
-        <Modal.Header>Edit Profile</Modal.Header>
-        <Modal.Body>
-          <form id="profile-form" onSubmit={handleSubmit}>
-            <Flex direction="column" gap="md">
-              <div>
-                <Label htmlFor="name" required>
-                  Full Name
-                </Label>
-                <Input
-                  id="name"
-                  value={formData.name}
-                  onChange={(e) =>
-                    setFormData({ ...formData, name: e.target.value })
-                  }
-                  placeholder="Enter your name"
-                />
-              </div>
-              <div>
-                <Label htmlFor="email" required>
-                  Email Address
-                </Label>
-                <Input
-                  id="email"
-                  type="email"
-                  value={formData.email}
-                  onChange={(e) =>
-                    setFormData({ ...formData, email: e.target.value })
-                  }
-                  placeholder="Enter your email"
-                />
-              </div>
-              <div>
-                <Label htmlFor="bio">Bio</Label>
-                <TextArea
-                  id="bio"
-                  value={formData.bio}
-                  onChange={(e) =>
-                    setFormData({ ...formData, bio: e.target.value })
-                  }
-                  placeholder="Tell us about yourself"
-                  rows={3}
-                />
-              </div>
-            </Flex>
-          </form>
-        </Modal.Body>
-        <Modal.Footer>
-          <Flex gap="sm" justify="flex-end">
-            <Button variant="ghost" onClick={() => setIsOpen(false)}>
-              Cancel
-            </Button>
-            <Button type="submit" form="profile-form">
-              Save Changes
-            </Button>
-          </Flex>
-        </Modal.Footer>
-      </Modal>
-    </>
-  );
-}

package/src/components/Path/examples/01-basic-path.tsx

@@ -1,17 +0,0 @@
-import { Path, PathItem } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Path',
-  description: 'A simple path navigation showing the current page location. Use this to help users understand their position in the site hierarchy.'
-};
-
-export default function Example() {
-  return (
-    <Path>
-      <PathItem href="/">Home</PathItem>
-      <PathItem href="/products">Products</PathItem>
-      <PathItem href="/products/electronics">Electronics</PathItem>
-      <PathItem>Laptop</PathItem>
-    </Path>
-  );
-}

package/src/components/Popover/examples/01-basic-popover.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Popover, Button } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Popover',
-  description: 'A simple popover with a trigger button. Use this to display contextual content or actions.'
-};
-
-export default function Example() {
-  return (
-    <Popover content={<p className="text-sm">This is popover content. It appears when you click the button.</p>}>
-      <Button>Click me</Button>
-    </Popover>
-  );
-}

package/src/components/Progress/examples/01-basic-progress.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Progress } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Progress',
-  description: 'A simple progress bar showing completion at 65%. Use this to display task or loading progress in your interface.'
-};
-
-export default function Example() {
-  return <Progress value={65} />;
-}

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,22 +0,0 @@
-import { Scroll } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Scroll',
-  description: 'A simple scrollable container with fixed height. Use this to display overflow content in a constrained space.'
-};
-
-export default function Example() {
-  return (
-    <div className='overflow-hidden' style={{ height: '200px', width: '300px' }}>
-      <Scroll>
-        <div>
-          <p>This is scrollable content.</p>
-          <p>Add more content here to see scrolling in action.</p>
-          <p>The Scroll component manages overflow elegantly.</p>
-          <p>You can scroll through all of this content.</p>
-          <p>Perfect for constrained layouts.</p>
-        </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/Slider/examples/01-basic-slider.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Slider } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Slider',
-  description: 'A simple range slider with a default value. Perfect for adjusting values within a range like volume or brightness.'
-};
-
-export default function Example() {
-  return <Slider.Root min={0} max={100} defaultValue={[50]} />;
-}

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

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Switch } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Switch',
-  description: 'A simple toggle switch component. Use for binary on/off states like enabling features or toggling settings.'
-};
-
-export default function Example() {
-  return <Switch />;
-}

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