apex-design-cli 1.0.0

package/registry/components/tabs.json

@@ -0,0 +1,25 @@
+{
+  "name": "tabs",
+  "type": "registry:ui",
+  "title": "Tabs",
+  "description": "A set of layered panels that display one at a time via tab navigation.",
+  "category": "navigation",
+  "files": [
+    {
+      "path": "registry/source/tabs.tsx",
+      "target": "components/ui/tabs.tsx"
+    }
+  ],
+  "dependencies": [
+    "@radix-ui/react-tabs@^1.0.0"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "exports": [
+    "Tabs",
+    "TabsList",
+    "TabsTrigger",
+    "TabsContent"
+  ]
+}

package/registry/components/textarea.json

@@ -0,0 +1,21 @@
+{
+  "name": "textarea",
+  "type": "registry:ui",
+  "title": "Textarea",
+  "description": "A multi-line text input field for longer content.",
+  "category": "inputs",
+  "files": [
+    {
+      "path": "registry/source/textarea.tsx",
+      "target": "components/ui/textarea.tsx"
+    }
+  ],
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "exports": [
+    "Textarea",
+    "TextareaProps"
+  ]
+}

package/registry/components/theme-toggler.json

@@ -0,0 +1,24 @@
+{
+  "name": "theme-toggler",
+  "type": "registry:ui",
+  "title": "ThemeToggler",
+  "description": "A three-way toggle for switching between light, dark, and system theme modes.",
+  "category": "utility",
+  "files": [
+    {
+      "path": "registry/source/theme-toggler.tsx",
+      "target": "components/ui/theme-toggler.tsx"
+    }
+  ],
+  "dependencies": [
+    "lucide-react@^0.563.0"
+  ],
+  "registryDependencies": [
+    "utils",
+    "use-theme"
+  ],
+  "exports": [
+    "ThemeToggler",
+    "ThemeTogglerProps"
+  ]
+}

package/registry/components/toast.json

@@ -0,0 +1,31 @@
+{
+  "name": "toast",
+  "type": "registry:ui",
+  "title": "Toast",
+  "description": "A brief, auto-dismissing notification message that appears temporarily.",
+  "category": "feedback",
+  "files": [
+    {
+      "path": "registry/source/toast.tsx",
+      "target": "components/ui/toast.tsx"
+    }
+  ],
+  "dependencies": [
+    "@radix-ui/react-toast@^1.0.0",
+    "lucide-react@^0.563.0",
+    "class-variance-authority@^0.7.1"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "exports": [
+    "ToastProvider",
+    "ToastViewport",
+    "Toast",
+    "ToastTitle",
+    "ToastDescription",
+    "ToastClose",
+    "ToastAction",
+    "ToastContent"
+  ]
+}

package/registry/components/tooltip.json

@@ -0,0 +1,26 @@
+{
+  "name": "tooltip",
+  "type": "registry:ui",
+  "title": "Tooltip",
+  "description": "A popup that displays additional information on hover or focus.",
+  "category": "overlay",
+  "files": [
+    {
+      "path": "registry/source/tooltip.tsx",
+      "target": "components/ui/tooltip.tsx"
+    }
+  ],
+  "dependencies": [
+    "@radix-ui/react-tooltip@^1.0.0"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "exports": [
+    "TooltipProvider",
+    "Tooltip",
+    "TooltipTrigger",
+    "TooltipContent",
+    "SimpleTooltip"
+  ]
+}

package/registry/components/use-theme.json

@@ -0,0 +1,19 @@
+{
+  "name": "use-theme",
+  "type": "registry:hook",
+  "title": "useTheme",
+  "description": "Theme hook and provider for managing light, dark, and system theme modes.",
+  "category": "utility",
+  "files": [
+    {
+      "path": "registry/source/use-theme.tsx",
+      "target": "hooks/use-theme.tsx"
+    }
+  ],
+  "dependencies": [],
+  "registryDependencies": [],
+  "exports": [
+    "useTheme",
+    "ThemeProvider"
+  ]
+}

package/registry/components/utils.json

@@ -0,0 +1,21 @@
+{
+  "name": "utils",
+  "type": "registry:lib",
+  "title": "Utils",
+  "description": "Utility function cn() for merging Tailwind CSS classes with conditional logic.",
+  "category": "utility",
+  "files": [
+    {
+      "path": "registry/source/utils.ts",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "dependencies": [
+    "clsx@^2.1.1",
+    "tailwind-merge@^3.4.0"
+  ],
+  "registryDependencies": [],
+  "exports": [
+    "cn"
+  ]
+}

package/registry/registry.json

@@ -0,0 +1,35 @@
+{
+  "name": "apex-design-system",
+  "version": "1.0.0",
+  "components": [
+    "accordion",
+    "alert",
+    "avatar",
+    "badge",
+    "breadcrumb",
+    "button",
+    "card",
+    "checkbox",
+    "command",
+    "dialog",
+    "divider",
+    "dropdown-menu",
+    "empty-state",
+    "error-message",
+    "field-group",
+    "helper-text",
+    "input",
+    "label",
+    "progress",
+    "radio",
+    "select",
+    "spinner",
+    "switch",
+    "table",
+    "tabs",
+    "textarea",
+    "theme-toggler",
+    "toast",
+    "tooltip"
+  ]
+}

package/registry/source/accordion.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b border-semantic-border-default', className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/registry/source/alert.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+import { AlertCircle, CheckCircle2, Info, XCircle, X } from 'lucide-react';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-semantic-fg-primary',
+  {
+    variants: {
+      variant: {
+        default: 'bg-semantic-bg-elevated text-semantic-fg-primary border-semantic-border-default',
+        info: 'border-semantic-status-info-border bg-semantic-status-info-bg text-semantic-status-info-fg [&>svg]:text-semantic-status-info-icon',
+        success: 'border-semantic-status-success-border bg-semantic-status-success-bg text-semantic-status-success-fg [&>svg]:text-semantic-status-success-icon',
+        warning: 'border-semantic-status-warning-border bg-semantic-status-warning-bg text-semantic-status-warning-fg [&>svg]:text-semantic-status-warning-icon',
+        error: 'border-semantic-status-error-border bg-semantic-status-error-bg text-semantic-status-error-fg [&>svg]:text-semantic-status-error-icon',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {
+  icon?: React.ReactNode;
+  showIcon?: boolean;
+  closable?: boolean;
+  onClose?: () => void;
+}
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant, icon, showIcon = true, closable, onClose, children, ...props }, ref) => {
+    const [visible, setVisible] = React.useState(true);
+
+    const handleClose = () => {
+      setVisible(false);
+      onClose?.();
+    };
+
+    if (!visible) return null;
+
+    const defaultIcons = {
+      default: <Info className="h-4 w-4" />,
+      info: <Info className="h-4 w-4" />,
+      success: <CheckCircle2 className="h-4 w-4" />,
+      warning: <AlertCircle className="h-4 w-4" />,
+      error: <XCircle className="h-4 w-4" />,
+    };
+
+    const iconToRender = icon || defaultIcons[variant || 'default'];
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(alertVariants({ variant }), className)}
+        {...props}
+      >
+        {showIcon && <span aria-hidden="true">{iconToRender}</span>}
+        <div className={cn(showIcon && 'pl-7', closable && 'pr-8')}>{children}</div>
+        {closable && (
+          <button
+            onClick={handleClose}
+            className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-semantic-offset transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-semantic-focus focus:ring-offset-2"
+          >
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription, alertVariants };

package/registry/source/avatar.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const avatarVariants = cva(
+  'relative flex shrink-0 overflow-hidden rounded-full',
+  {
+    variants: {
+      size: {
+        sm: 'h-8 w-8 text-xs',
+        md: 'h-10 w-10 text-sm',
+        lg: 'h-12 w-12 text-base',
+        xl: 'h-16 w-16 text-lg',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> &
+    VariantProps<typeof avatarVariants>
+>(({ className, size, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(avatarVariants({ size }), className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+interface AvatarImageProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {
+  alt: string;
+}
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  AvatarImageProps
+>(({ className, alt, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full object-cover', className)}
+    alt={alt}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-semantic-bg-sunken font-medium text-semantic-fg-primary',
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export interface AvatarWithLabelProps
+  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+  src?: string;
+  alt?: string;
+  fallback?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  label?: string;
+  description?: string;
+  status?: 'online' | 'offline' | 'away' | 'busy';
+}
+
+const AvatarWithLabel = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  AvatarWithLabelProps
+>(({ src, alt, fallback, size = 'md', label, description, status, className, ...props }, ref) => {
+  const statusColors = {
+    online: 'bg-semantic-indicator-online',
+    offline: 'bg-semantic-indicator-offline',
+    away: 'bg-semantic-indicator-away',
+    busy: 'bg-semantic-indicator-busy',
+  };
+
+  const statusSizes = {
+    sm: 'h-2 w-2 border',
+    md: 'h-2.5 w-2.5 border-2',
+    lg: 'h-3 w-3 border-2',
+    xl: 'h-4 w-4 border-2',
+  };
+
+  const avatarComponent = (
+    <div className="relative">
+      <Avatar size={size} className={className} ref={ref} {...props}>
+        {src && <AvatarImage src={src} alt={alt || ''} />}
+        <AvatarFallback>{fallback}</AvatarFallback>
+      </Avatar>
+      {status && (
+        <span
+          className={cn(
+            'absolute bottom-0 right-0 block rounded-full border-semantic-indicator-border',
+            statusColors[status],
+            statusSizes[size]
+          )}
+          role="status"
+          aria-label={status.charAt(0).toUpperCase() + status.slice(1)}
+        />
+      )}
+    </div>
+  );
+
+  if (!label && !description) {
+    return avatarComponent;
+  }
+
+  return (
+    <div className="flex items-center gap-3">
+      {avatarComponent}
+      <div className="flex flex-col">
+        {label && (
+          <span className="text-sm font-medium text-semantic-fg-primary">{label}</span>
+        )}
+        {description && (
+          <span className="text-xs text-semantic-fg-secondary">{description}</span>
+        )}
+      </div>
+    </div>
+  );
+});
+AvatarWithLabel.displayName = 'AvatarWithLabel';
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarWithLabel };

package/registry/source/badge.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ring-offset-semantic-offset',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-semantic-badge-default-bg text-semantic-badge-default-fg hover:opacity-80',
+        secondary: 'border-transparent bg-semantic-badge-secondary-bg text-semantic-badge-secondary-fg hover:opacity-80',
+        success: 'border-transparent bg-semantic-status-success-solid text-semantic-fg-inverse hover:opacity-80',
+        warning: 'border-transparent bg-semantic-status-warning-solid text-semantic-fg-inverse hover:opacity-80',
+        error: 'border-transparent bg-semantic-status-error-icon text-semantic-fg-inverse hover:opacity-80',
+        outline: 'text-semantic-badge-outline-fg border-semantic-badge-outline-border hover:bg-semantic-bg-hover',
+      },
+      size: {
+        sm: 'px-2 py-0 text-xs',
+        md: 'px-2.5 py-0.5 text-xs',
+        lg: 'px-3 py-1 text-sm',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, size, ...props }: BadgeProps) {
+  return <span className={cn(badgeVariants({ variant, size }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

package/registry/source/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<'nav'> & {
+    separator?: React.ReactNode;
+  }
+>(({ className, ...props }, ref) => (
+  <nav ref={ref} aria-label="breadcrumb" {...props} />
+));
+Breadcrumb.displayName = 'Breadcrumb';
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<'ol'>
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      'flex flex-wrap items-center gap-1.5 break-words text-sm text-semantic-fg-muted sm:gap-2.5',
+      className
+    )}
+    {...props}
+  />
+));
+BreadcrumbList.displayName = 'BreadcrumbList';
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<'li'>
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn('inline-flex items-center gap-1.5', className)}
+    {...props}
+  />
+));
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<'a'>
+>(({ className, ...props }, ref) => (
+  <a
+    ref={ref}
+    className={cn('transition-colors hover:text-semantic-fg-primary', className)}
+    {...props}
+  />
+));
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<'span'>
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn('font-medium text-semantic-fg-primary', className)}
+    {...props}
+  />
+));
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn('[&>svg]:h-3.5 [&>svg]:w-3.5', className)}
+    {...props}
+  >
+    {children || <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};