ui-lab-registry 0.3.44 → 0.3.46

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/Textarea/examples/01-basic-textarea.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { TextArea } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic TextArea',
-  description: 'A simple multi-line text input field. Use this for collecting longer text input like comments or descriptions.'
-};
-
-export default function Example() {
-  return (
-    <TextArea
-      placeholder="Enter your comments here..."
-      rows={4}
-    />
-  );
-}

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

package/src/design-tokens/index.ts

@@ -1,196 +0,0 @@
-export interface ColorFamilyInfo {
-  name: string;
-  availableShades: number[];
-  wcagLevel: 'AA' | 'AAA';
-  usageGuidance: string;
-}
-
-export interface ColorRecommendation {
-  background?: { family: string; shade: number; cssVar: string };
-  text?: { family: string; shade: number; cssVar: string };
-  border?: { family: string; shade: number; cssVar: string };
-  hover?: { family: string; shade: number; cssVar: string };
-  active?: { family: string; shade: number; cssVar: string };
-  disabled?: { family: string; shade: number; cssVar: string };
-  rationale: string;
-}
-
-export interface ColorRecommendationRegistry {
-  [key: string]: ColorRecommendation;
-}
-
-const COLOR_FAMILIES: Record<string, ColorFamilyInfo> = {
-  background: {
-    name: 'background',
-    availableShades: [500, 600, 700, 800, 900, 950],
-    wcagLevel: 'AA',
-    usageGuidance: 'Dark backgrounds only; shades 500 (medium) through 950 (darkest)',
-  },
-  foreground: {
-    name: 'foreground',
-    availableShades: [50, 100, 200, 300, 400],
-    wcagLevel: 'AA',
-    usageGuidance: 'Text and borders; shades 50 (lightest) through 400 (darker)',
-  },
-  accent: {
-    name: 'accent',
-    availableShades: [50, 100, 200, 300, 400, 500, 600],
-    wcagLevel: 'AA',
-    usageGuidance: 'Primary actions and brand color; 50 (lightest) to 600 (darkest)',
-  },
-  success: {
-    name: 'success',
-    availableShades: [50, 100, 200, 300, 400, 500, 600],
-    wcagLevel: 'AA',
-    usageGuidance: 'Success states, confirmations; 50-300 for backgrounds, 400-600 for text',
-  },
-  danger: {
-    name: 'danger',
-    availableShades: [50, 100, 200, 300, 400, 500, 600],
-    wcagLevel: 'AA',
-    usageGuidance: 'Destructive actions, errors; 50-300 for backgrounds, 400-600 for text',
-  },
-  warning: {
-    name: 'warning',
-    availableShades: [50, 100, 200, 300, 400, 500, 600],
-    wcagLevel: 'AA',
-    usageGuidance: 'Warning states; 50-300 for backgrounds, 400-600 for text',
-  },
-  info: {
-    name: 'info',
-    availableShades: [50, 100, 200, 300, 400, 500, 600],
-    wcagLevel: 'AA',
-    usageGuidance: 'Informational states; 50-300 for backgrounds, 400-600 for text',
-  },
-};
-
-const COLOR_RECOMMENDATIONS: ColorRecommendationRegistry = {
-  'button:default': {
-    background: { family: 'background', shade: 800, cssVar: '--background-800' },
-    text: { family: 'foreground', shade: 300, cssVar: '--foreground-300' },
-    border: { family: 'background', shade: 700, cssVar: '--background-700' },
-    hover: { family: 'background', shade: 700, cssVar: '--background-700' },
-    disabled: { family: 'foreground', shade: 200, cssVar: '--foreground-200' },
-    rationale: 'Default button uses background surface colors with standard foreground text',
-  },
-  'button:outline': {
-    text: { family: 'foreground', shade: 300, cssVar: '--foreground-300' },
-    border: { family: 'background', shade: 700, cssVar: '--background-700' },
-    hover: { family: 'background', shade: 800, cssVar: '--background-800' },
-    disabled: { family: 'foreground', shade: 200, cssVar: '--foreground-200' },
-    rationale: 'Transparent background with visible border; fills on hover',
-  },
-  'button:ghost': {
-    text: { family: 'foreground', shade: 300, cssVar: '--foreground-300' },
-    hover: { family: 'background', shade: 900, cssVar: '--background-900' },
-    disabled: { family: 'foreground', shade: 200, cssVar: '--foreground-200' },
-    rationale: 'No background or border at rest; subtle fill on hover for low-emphasis actions',
-  },
-  'button:danger': {
-    background: { family: 'danger', shade: 600, cssVar: '--danger-600' },
-    text: { family: 'background', shade: 900, cssVar: '--background-900' },
-    border: { family: 'danger', shade: 600, cssVar: '--danger-600' },
-    hover: { family: 'danger', shade: 400, cssVar: '--danger-400' },
-    active: { family: 'danger', shade: 600, cssVar: '--danger-600' },
-    disabled: { family: 'foreground', shade: 300, cssVar: '--foreground-300' },
-    rationale: 'Danger color signals destructive action with clear visual hierarchy',
-  },
-  'alert:success': {
-    background: { family: 'success', shade: 100, cssVar: '--success-100' },
-    text: { family: 'success', shade: 600, cssVar: '--success-600' },
-    border: { family: 'success', shade: 300, cssVar: '--success-300' },
-    rationale: 'Success family with light background and dark text for positive feedback',
-  },
-  'alert:danger': {
-    background: { family: 'danger', shade: 100, cssVar: '--danger-100' },
-    text: { family: 'danger', shade: 600, cssVar: '--danger-600' },
-    border: { family: 'danger', shade: 300, cssVar: '--danger-300' },
-    rationale: 'Danger family for error states with proper contrast',
-  },
-  'alert:warning': {
-    background: { family: 'warning', shade: 100, cssVar: '--warning-100' },
-    text: { family: 'warning', shade: 600, cssVar: '--warning-600' },
-    border: { family: 'warning', shade: 300, cssVar: '--warning-300' },
-    rationale: 'Warning family for cautionary messages',
-  },
-  'alert:info': {
-    background: { family: 'info', shade: 100, cssVar: '--info-100' },
-    text: { family: 'info', shade: 600, cssVar: '--info-600' },
-    border: { family: 'info', shade: 300, cssVar: '--info-300' },
-    rationale: 'Info family for neutral informational messages',
-  },
-  'input:default': {
-    background: { family: 'foreground', shade: 50, cssVar: '--foreground-50' },
-    text: { family: 'foreground', shade: 400, cssVar: '--foreground-400' },
-    border: { family: 'foreground', shade: 300, cssVar: '--foreground-300' },
-    disabled: { family: 'foreground', shade: 200, cssVar: '--foreground-200' },
-    rationale: 'Light input with dark text for readability',
-  },
-  'input:error': {
-    background: { family: 'foreground', shade: 50, cssVar: '--foreground-50' },
-    text: { family: 'foreground', shade: 400, cssVar: '--foreground-400' },
-    border: { family: 'danger', shade: 600, cssVar: '--danger-600' },
-    rationale: 'Error state with danger border to indicate validation failure',
-  },
-  'badge:default': {
-    background: { family: 'foreground', shade: 200, cssVar: '--foreground-200' },
-    text: { family: 'foreground', shade: 400, cssVar: '--foreground-400' },
-    rationale: 'Neutral badge for general labeling',
-  },
-  'badge:success': {
-    background: { family: 'success', shade: 200, cssVar: '--success-200' },
-    text: { family: 'success', shade: 600, cssVar: '--success-600' },
-    rationale: 'Success badge for positive labels',
-  },
-  'badge:danger': {
-    background: { family: 'danger', shade: 200, cssVar: '--danger-200' },
-    text: { family: 'danger', shade: 600, cssVar: '--danger-600' },
-    rationale: 'Danger badge for negative or destructive labels',
-  },
-  'card:default': {
-    background: { family: 'foreground', shade: 50, cssVar: '--foreground-50' },
-    text: { family: 'foreground', shade: 400, cssVar: '--foreground-400' },
-    border: { family: 'foreground', shade: 200, cssVar: '--foreground-200' },
-    rationale: 'Light card background with subtle border',
-  },
-};
-
-export function hasColorFamily(family: string): boolean {
-  return family in COLOR_FAMILIES;
-}
-
-export function getColorFamilyInfo(family: string): ColorFamilyInfo | null {
-  return COLOR_FAMILIES[family] || null;
-}
-
-export function hasColorShade(family: string, shade: number): boolean {
-  const info = getColorFamilyInfo(family);
-  return info ? info.availableShades.includes(shade) : false;
-}
-
-export function getColorCssVar(family: string, shade: number): string | null {
-  if (!hasColorShade(family, shade)) return null;
-  return `--${family}-${shade}`;
-}
-
-export function getAllColorFamilies(): string[] {
-  return Object.keys(COLOR_FAMILIES);
-}
-
-export function getColorFamilyShades(family: string): number[] | null {
-  const info = getColorFamilyInfo(family);
-  return info ? info.availableShades : null;
-}
-
-export function getColorRecommendation(componentId: string, semanticIntent: string): ColorRecommendation | null {
-  return COLOR_RECOMMENDATIONS[`${componentId}:${semanticIntent}`] || null;
-}
-
-export function getAllColorRecommendations(): ColorRecommendationRegistry {
-  return COLOR_RECOMMENDATIONS;
-}
-
-export function getColorFamilyWCAGLevel(family: string): 'AA' | 'AAA' | null {
-  const info = getColorFamilyInfo(family);
-  return info ? info.wcagLevel : null;
-}