ui-lab-registry 0.3.45 → 0.3.47

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="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/Modal/examples/03-delete-confirmation.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Modal, Button } from "ui-lab-components";
-
-export const metadata = {
-  title: "Delete Confirmation",
-  description: "Destructive action dialog that blocks the user until they explicitly confirm or cancel.",
-};
-
-export default function Example() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      <Button variant="destructive" onClick={() => setIsOpen(true)}>
-        Delete workspace
-      </Button>
-
-      <Modal
-        isOpen={isOpen}
-        onOpenChange={setIsOpen}
-        title="Delete workspace"
-        footer={
-          <>
-            <Button variant="ghost" onClick={() => setIsOpen(false)}>
-              Cancel
-            </Button>
-            <Button variant="destructive" onClick={() => setIsOpen(false)}>
-              Delete
-            </Button>
-          </>
-        }
-      >
-        <p className="text-sm text-foreground-300">
-          This will permanently delete <strong className="text-foreground-100">acme-corp</strong> and all
-          its data. This action cannot be undone.
-        </p>
-      </Modal>
-    </>
-  );
-}

package/src/components/Modal/examples/04-create-api-key.tsx

@@ -1,54 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Modal, Button, Input, Label } from "ui-lab-components";
-
-export const metadata = {
-  title: "Create API Key",
-  description: "Form modal with a single required input. The primary action stays disabled until the field has a value.",
-};
-
-export default function Example() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [name, setName] = useState("");
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>New API key</Button>
-
-      <Modal
-        isOpen={isOpen}
-        onOpenChange={setIsOpen}
-        title="New API key"
-        footer={
-          <>
-            <Button variant="ghost" onClick={() => setIsOpen(false)}>
-              Cancel
-            </Button>
-            <Button
-              onClick={() => setIsOpen(false)}
-              isDisabled={!name.trim()}
-            >
-              Create
-            </Button>
-          </>
-        }
-      >
-        <div className="flex flex-col gap-4 px-6 py-4">
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="key-name">Name</Label>
-            <Input
-              id="key-name"
-              placeholder="e.g. CI deploy key"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-            />
-          </div>
-          <p className="text-xs text-foreground-400">
-            The key will only be shown once after creation.
-          </p>
-        </div>
-      </Modal>
-    </>
-  );
-}

package/src/components/Modal/examples/05-notification-settings.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Modal, Button, Switch } from "ui-lab-components";
-
-export const metadata = {
-  title: "Notification Settings",
-  description: "Settings panel using the compound Modal.Header / Modal.Body / Modal.Footer API with toggle rows.",
-};
-
-export default function Example() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [prefs, setPrefs] = useState({ email: true, push: false, marketing: false });
-
-  const toggle = (key: keyof typeof prefs) =>
-    setPrefs((p) => ({ ...p, [key]: !p[key] }));
-
-  return (
-    <>
-      <Button variant="ghost" onClick={() => setIsOpen(true)}>
-        Notification settings
-      </Button>
-
-      <Modal isOpen={isOpen} onOpenChange={setIsOpen}>
-        <Modal.Header>
-          <span className="text-sm font-semibold text-foreground-100">Notification preferences</span>
-        </Modal.Header>
-
-        <Modal.Body>
-          <div className="flex flex-col divide-y divide-border px-6">
-            {(
-              [
-                { key: "email", label: "Email notifications", description: "Receive updates and alerts by email" },
-                { key: "push", label: "Push notifications", description: "Browser and mobile push alerts" },
-                { key: "marketing", label: "Product updates", description: "New features and announcements" },
-              ] as const
-            ).map(({ key, label, description }) => (
-              <div key={key} className="flex items-center justify-between py-4">
-                <div className="flex flex-col gap-0.5">
-                  <span className="text-sm text-foreground-100">{label}</span>
-                  <span className="text-xs text-foreground-400">{description}</span>
-                </div>
-                <Switch isSelected={prefs[key]} onChange={() => toggle(key)} />
-              </div>
-            ))}
-          </div>
-        </Modal.Body>
-
-        <Modal.Footer>
-          <Button variant="ghost" onClick={() => setIsOpen(false)}>
-            Cancel
-          </Button>
-          <Button onClick={() => setIsOpen(false)}>Save</Button>
-        </Modal.Footer>
-      </Modal>
-    </>
-  );
-}

package/src/components/Panel/examples/01-sidebar-toggle.tsx

@@ -1,20 +0,0 @@
-import { Panel } from "ui-lab-components";
-
-export const metadata = {
-  title: "Sidebar with Toggle",
-  description: "Left sidebar that collapses and expands via a toggle button in the content area.",
-};
-
-export default function Example() {
-  return (
-    <Panel style={{ height: "400px" }} className="w-full border border-background-700 rounded-lg bg-background-900">
-      <Panel.Sidebar side="left" defaultOpen width="200px" collapsedWidth="0">
-      </Panel.Sidebar>
-      <Panel.Content>
-        <Panel.Toggle>
-          <button>☰</button>
-        </Panel.Toggle>
-      </Panel.Content>
-    </Panel>
-  );
-}

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

@@ -1,17 +0,0 @@
-import { Path } 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>
-      <Path.Item href="/">Home</Path.Item>
-      <Path.Item href="/products">Products</Path.Item>
-      <Path.Item href="/products/electronics">Electronics</Path.Item>
-      <Path.Item>Laptop</Path.Item>
-    </Path>
-  );
-}

package/src/components/Path/examples/02-custom-separator.tsx

@@ -1,17 +0,0 @@
-import { Path } from "ui-lab-components";
-import { FaChevronRight } from "react-icons/fa6";
-
-export const metadata = {
-  title: "Custom Separator",
-  description: "Pass any node via the separator prop to replace the default slash.",
-};
-
-export default function Example() {
-  return (
-    <Path separator={<FaChevronRight className="w-3 h-3 text-foreground-400" />}>
-      <Path.Item href="/projects">Projects</Path.Item>
-      <Path.Item href="/projects/ui-lab">ui-lab</Path.Item>
-      <Path.Item>components</Path.Item>
-    </Path>
-  );
-}

package/src/components/Path/examples/03-collapsed-breadcrumb.tsx

@@ -1,37 +0,0 @@
-import { Path, Menu, Button } from "ui-lab-components";
-import { FaEllipsis } from "react-icons/fa6";
-
-export const metadata = {
-  title: "Collapsed Breadcrumb",
-  description: "Deep paths collapse intermediate crumbs into an ellipsis menu — Path.Item wraps the Menu trigger directly.",
-};
-
-const collapsed = [
-  { label: "Projects", href: "/projects" },
-  { label: "ui-lab", href: "/projects/ui-lab" },
-  { label: "packages", href: "/projects/ui-lab/packages" },
-];
-
-export default function Example() {
-  return (
-    <Path>
-      <Path.Item href="/">Home</Path.Item>
-      <Path.Item>
-        <Menu type="pop-over">
-          <Menu.Trigger>
-            <Button icon={<FaEllipsis />} styles="p-2" size="icon" variant="ghost" aria-label="Show collapsed path" />
-          </Menu.Trigger>
-          <Menu.Content align="start">
-            {collapsed.map((crumb) => (
-              <Menu.Item key={crumb.href} onSelect={() => {}}>
-                {crumb.label}
-              </Menu.Item>
-            ))}
-          </Menu.Content>
-        </Menu>
-      </Path.Item>
-      <Path.Item href="/projects/ui-lab/packages/@ui">@ui</Path.Item>
-      <Path.Item>Path.tsx</Path.Item>
-    </Path>
-  );
-}

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

@@ -1,34 +0,0 @@
-"use client";
-
-import { Popover, Button } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic',
-  description: 'Default popover with a short note and two clear actions.'
-};
-
-export default function Example() {
-  return (
-    <Popover
-      content={
-        <div className="w-64 space-y-3">
-          <div className="space-y-1">
-            <div className="text-sm font-medium">Quick note</div>
-            <p>A popover works best when it adds one small piece of context, one simple choice, or one short action.</p>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <Button variant="ghost" size="sm">
-              Dismiss
-            </Button>
-            <Button size="sm">
-              Continue
-            </Button>
-          </div>
-        </div>
-      }
-    >
-      <Button>Show info</Button>
-    </Popover>
-  );
-}

package/src/components/Popover/examples/02-toggleable-options.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Popover, Button, List } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Toggleable Options',
-  description: 'Popover containing a list of toggleable options using List.Item and List.Switch.'
-};
-
-const toggleableItems = [
-  { id: "notifications", label: "Notifications", desc: "Push and email alerts" },
-  { id: "autoSave", label: "Auto-save", desc: "Save changes automatically" },
-  { id: "darkMode", label: "Dark mode", desc: "Use dark color scheme" },
-];
-
-export default function Example() {
-  const [enabled, setEnabled] = useState<Set<string>>(
-    () => new Set(["notifications", "darkMode"])
-  );
-
-  const toggle = (id: string) =>
-    setEnabled((prev) => {
-      const next = new Set(prev);
-      next.has(id) ? next.delete(id) : next.add(id);
-      return next;
-    });
-
-  return (
-    <Popover
-      position="bottom"
-      content={
-        <List items={toggleableItems} spacing="sm" style={{ width: 280 }}>
-          {toggleableItems.map((item) => (
-            <List.Item
-              key={item.id}
-              value={item.id}
-              interactive
-              onClick={() => toggle(item.id)}
-            >
-              <div className="min-w-0 flex-1">
-                <List.Title>{item.label}</List.Title>
-                <List.Desc>{item.desc}</List.Desc>
-              </div>
-              <List.Switch
-                isSelected={enabled.has(item.id)}
-                onChange={() => toggle(item.id)}
-                aria-label={item.label}
-              />
-            </List.Item>
-          ))}
-        </List>
-      }
-    >
-      <Button>Options</Button>
-    </Popover>
-  );
-}

package/src/components/Popover/examples/03-table-row-actions.tsx

@@ -1,64 +0,0 @@
-"use client";
-
-import { Popover, Button, List } from 'ui-lab-components';
-import { FaEllipsis } from 'react-icons/fa6';
-
-export const metadata = {
-  title: 'Table Row Actions',
-  description: 'Per-row action menu in a data table, anchored to the overflow button.'
-};
-
-const rows = [
-  { id: "usr_1", name: "Alice", role: "Admin", status: "Active" },
-  { id: "usr_2", name: "Bob", role: "Member", status: "Invited" },
-  { id: "usr_3", name: "Carol", role: "Viewer", status: "Active" },
-];
-
-export default function Example() {
-  return (
-    <table className="w-full text-sm border-collapse">
-      <thead>
-        <tr className="border-b border-background-700">
-          <th className="text-left py-2 px-3 font-medium text-foreground-200">Name</th>
-          <th className="text-left py-2 px-3 font-medium text-foreground-200">Role</th>
-          <th className="text-left py-2 px-3 font-medium text-foreground-200">Status</th>
-          <th className="py-2 px-3" />
-        </tr>
-      </thead>
-      <tbody>
-        {rows.map((row) => (
-          <tr key={row.id} className="border-b border-background-700 last:border-0">
-            <td className="py-2 px-3">{row.name}</td>
-            <td className="py-2 px-3 text-foreground-200">{row.role}</td>
-            <td className="py-2 px-3 text-foreground-200">{row.status}</td>
-            <td className="py-2 px-3 text-right">
-              <Popover
-                position="left"
-                content={
-                  <List gap="sm" styles={{ root: "w-full" }}>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      styles={{ root: "justify-start" }}
-                    >
-                      Edit {row.name}
-                    </Button>
-                    <Button
-                      variant="danger"
-                      size="sm"
-                      styles={{ root: "justify-start" }}
-                    >
-                      Remove {row.name}
-                    </Button>
-                  </List>
-                }
-              >
-                <Button icon={<FaEllipsis />} styles="p-2" size="icon" variant="ghost" aria-label={`Row actions for ${row.name}`} />
-              </Popover>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}

package/src/components/Popover/examples/04-input-form.tsx

@@ -1,46 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Popover, Button, Flex, Label, Input } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Input Form',
-  description: 'Popover containing a small form with labeled input fields and save/cancel actions.'
-};
-
-export default function Example() {
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-
-  return (
-    <Popover
-      position="bottom"
-      content={
-        <Flex direction="column" gap="sm" styles={{ root: "w-80" }}>
-          <Flex direction="column" gap="xs">
-            <Label htmlFor="contact-name">Name</Label>
-            <Input
-              id="contact-name"
-              type="text"
-              value={name}
-              onChange={(e) => setName((e.target as HTMLInputElement).value)}
-              placeholder="Full name"
-            />
-          </Flex>
-          <Flex direction="column" gap="xs">
-            <Label htmlFor="contact-email">Email</Label>
-            <Input
-              id="contact-email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail((e.target as HTMLInputElement).value)}
-              placeholder="name@example.com"
-            />
-          </Flex>
-        </Flex>
-      }
-    >
-      <Button>Edit contact</Button>
-    </Popover>
-  );
-}

package/src/components/Popover/examples/05-arrow-positions.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { Popover, Button, Flex } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Arrow & Positions',
-  description: 'Directional arrow enabled across all four placement options.'
-};
-
-export default function Example() {
-  return (
-    <Flex align="center">
-      {(["top", "bottom", "left", "right"] as const).map((position) => (
-        <Popover
-          key={position}
-          position={position}
-          showArrow
-          content={<span className="text-sm capitalize">{position}</span>}
-        >
-          <Button variant="ghost">
-            <span className="capitalize">{position}</span>
-          </Button>
-        </Popover>
-      ))}
-    </Flex>
-  );
-}

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

@@ -1,40 +0,0 @@
-"use client";
-
-import { useState, useEffect } from 'react';
-import { Progress, Flex, Button } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'File Upload',
-  description: 'Simulated upload progress with a label and live percentage — starts on button click.'
-};
-
-export default function Example() {
-  const [progress, setProgress] = useState(0);
-  const [running, setRunning] = useState(false);
-
-  useEffect(() => {
-    if (!running) return;
-    if (progress >= 100) { setRunning(false); return; }
-    const t = setTimeout(() => setProgress((p) => Math.min(p + Math.random() * 12, 100)), 200);
-    return () => clearTimeout(t);
-  }, [running, progress]);
-
-  const reset = () => { setProgress(0); setRunning(false); };
-
-  return (
-    <Flex direction="column" gap="md" style={{ width: 340 }}>
-      <Flex direction="column" gap="xs">
-        <span style={{ fontSize: "var(--text-sm)", color: "var(--foreground-muted)" }}>
-          report-q4-2025.pdf
-        </span>
-        <Progress value={progress} label="Uploading" showValue />
-      </Flex>
-      <Flex gap="sm">
-        <Button variant="primary" onClick={() => setRunning(true)} disabled={running || progress === 100}>
-          {progress === 100 ? "Done" : "Upload"}
-        </Button>
-        <Button variant="ghost" onClick={reset}>Reset</Button>
-      </Flex>
-    </Flex>
-  );
-}

package/src/components/Progress/examples/02-storage-quota.tsx

@@ -1,22 +0,0 @@
-import { Progress, Flex } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Storage Quota',
-  description: 'Fixed progress bar showing disk usage relative to a custom max value.'
-};
-
-const used = 7.4;
-const total = 10;
-
-export default function Example() {
-  return (
-    <Flex direction="column" gap="md" style={{ width: 300 }}>
-      <Flex direction="column" gap="xs">
-        <Progress value={used} max={total} label="Storage" showValue />
-        <span style={{ fontSize: "var(--text-xs)", color: "var(--foreground-muted)" }}>
-          {used} GB of {total} GB used
-        </span>
-      </Flex>
-    </Flex>
-  );
-}

package/src/components/Progress/examples/03-onboarding-steps.tsx

@@ -1,34 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Progress, Flex, Button } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Onboarding Steps',
-  description: 'Step tracker using value/max to represent wizard completion.'
-};
-
-const steps = ["Profile", "Preferences", "Integrations", "Invite team"];
-
-export default function Example() {
-  const [step, setStep] = useState(1);
-
-  return (
-    <Flex direction="column" gap="md" style={{ width: 340 }}>
-      <Flex direction="column" gap="xs">
-        <Progress value={step} max={steps.length} />
-        <span style={{ fontSize: "var(--text-sm)", color: "var(--foreground-muted)" }}>
-          Step {step} of {steps.length} — {steps[step - 1]}
-        </span>
-      </Flex>
-      <Flex gap="sm">
-        <Button variant="ghost" onClick={() => setStep((s) => Math.max(1, s - 1))} disabled={step === 1}>
-          Back
-        </Button>
-        <Button variant="primary" onClick={() => setStep((s) => Math.min(steps.length, s + 1))} disabled={step === steps.length}>
-          Next
-        </Button>
-      </Flex>
-    </Flex>
-  );
-}