apex-design-cli 1.0.0

package/registry/source/textarea.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Additional CSS classes */
+  className?: string;
+  /** Textarea size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Error state */
+  error?: boolean;
+  /** Label text */
+  label?: string;
+  /** Helper text shown below textarea */
+  helperText?: string;
+  /** Error message shown when error={true} */
+  errorMessage?: string;
+  /** Mark as required */
+  required?: boolean;
+  /** Show character count */
+  showCount?: boolean;
+  /** Resize behavior */
+  resize?: 'none' | 'vertical' | 'both';
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      className,
+      size = 'md',
+      error = false,
+      label,
+      helperText,
+      errorMessage,
+      required,
+      showCount = false,
+      resize = 'vertical',
+      maxLength,
+      value,
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    const textareaId = id || React.useId();
+    const helperTextId = `${textareaId}-helper`;
+    const errorMessageId = `${textareaId}-error`;
+
+    const currentLength = typeof value === 'string' ? value.length : 0;
+
+    const sizeClasses = {
+      sm: 'min-h-[80px] px-3 py-2 text-sm',
+      md: 'min-h-[120px] px-3 py-2 text-base',
+      lg: 'min-h-[160px] px-4 py-3 text-lg',
+    };
+
+    const resizeClasses = {
+      none: 'resize-none',
+      vertical: 'resize-y',
+      both: 'resize',
+    };
+
+    return (
+      <div className="w-full">
+        <div className="flex items-center justify-between mb-1.5">
+          {label && (
+            <label
+              htmlFor={textareaId}
+              className="block text-sm font-medium text-semantic-fg-secondary"
+            >
+              {label}
+              {required && <span className="ml-1 text-semantic-fg-error">*</span>}
+            </label>
+          )}
+          {showCount && maxLength && (
+            <span className="text-xs text-semantic-fg-secondary">
+              {currentLength}/{maxLength}
+            </span>
+          )}
+        </div>
+
+        <textarea
+          ref={ref}
+          id={textareaId}
+          value={value}
+          maxLength={maxLength}
+          className={cn(
+            'w-full rounded-md border bg-semantic-control-bg transition-colors',
+            'placeholder:text-semantic-control-placeholder',
+            'focus:outline-none focus:ring-2 focus:ring-offset-0',
+            'disabled:cursor-not-allowed disabled:bg-semantic-bg-disabled disabled:text-semantic-fg-disabled',
+            sizeClasses[size],
+            resizeClasses[resize],
+            error
+              ? 'border-semantic-control-border-error text-semantic-control-fg focus:ring-semantic-control-border-error focus:border-semantic-control-border-error'
+              : 'border-semantic-control-border text-semantic-control-fg focus:ring-semantic-focus focus:border-semantic-border-focus',
+            className
+          )}
+          aria-invalid={error ? 'true' : 'false'}
+          aria-describedby={
+            error && errorMessage
+              ? errorMessageId
+              : helperText
+                ? helperTextId
+                : undefined
+          }
+          aria-required={required}
+          {...props}
+        />
+
+        {!error && helperText && (
+          <p id={helperTextId} className="mt-1.5 text-sm text-semantic-fg-secondary">
+            {helperText}
+          </p>
+        )}
+
+        {error && errorMessage && (
+          <p id={errorMessageId} className="mt-1.5 text-sm text-semantic-fg-error">
+            {errorMessage}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
+export default Textarea;

package/registry/source/theme-toggler.tsx

@@ -0,0 +1,94 @@
+import { Sun, Moon, Monitor } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { useTheme } from '../../hooks/useTheme';
+
+export interface ThemeTogglerProps {
+  /** Show system option alongside light/dark */
+  showSystem?: boolean;
+  /** Size of the toggler */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const sizeMap = {
+  sm: { button: 'h-8 w-8', icon: 'h-4 w-4' },
+  md: { button: 'h-9 w-9', icon: 'h-5 w-5' },
+  lg: { button: 'h-10 w-10', icon: 'h-6 w-6' },
+};
+
+export function ThemeToggler({ showSystem = false, size = 'md', className }: ThemeTogglerProps) {
+  const { theme, resolvedTheme, setTheme, toggleTheme } = useTheme();
+  const { button: buttonSize, icon: iconSize } = sizeMap[size];
+
+  if (showSystem) {
+    return (
+      <div role="radiogroup" aria-label="Theme selector" className={cn('inline-flex items-center rounded-lg border border-semantic-border-default bg-semantic-bg-sunken p-1', className)}>
+        <button
+          type="button"
+          role="radio"
+          aria-checked={theme === 'light'}
+          onClick={() => setTheme('light')}
+          className={cn(
+            'inline-flex items-center justify-center rounded-md p-1.5 transition-colors',
+            theme === 'light'
+              ? 'bg-semantic-bg-segment-active text-semantic-fg-segment-active shadow-sm'
+              : 'text-semantic-fg-muted hover:text-semantic-fg-secondary'
+          )}
+          aria-label="Light mode"
+        >
+          <Sun className={iconSize} aria-hidden="true" />
+        </button>
+        <button
+          type="button"
+          role="radio"
+          aria-checked={theme === 'dark'}
+          onClick={() => setTheme('dark')}
+          className={cn(
+            'inline-flex items-center justify-center rounded-md p-1.5 transition-colors',
+            theme === 'dark'
+              ? 'bg-semantic-bg-segment-active text-semantic-fg-segment-active shadow-sm'
+              : 'text-semantic-fg-muted hover:text-semantic-fg-secondary'
+          )}
+          aria-label="Dark mode"
+        >
+          <Moon className={iconSize} aria-hidden="true" />
+        </button>
+        <button
+          type="button"
+          role="radio"
+          aria-checked={theme === 'system'}
+          onClick={() => setTheme('system')}
+          className={cn(
+            'inline-flex items-center justify-center rounded-md p-1.5 transition-colors',
+            theme === 'system'
+              ? 'bg-semantic-bg-segment-active text-semantic-fg-segment-active shadow-sm'
+              : 'text-semantic-fg-muted hover:text-semantic-fg-secondary'
+          )}
+          aria-label="System theme"
+        >
+          <Monitor className={iconSize} aria-hidden="true" />
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      className={cn(
+        buttonSize,
+        'inline-flex items-center justify-center rounded-md border border-semantic-border-default bg-semantic-bg-elevated text-semantic-fg-secondary transition-colors hover:bg-semantic-bg-hover hover:text-semantic-fg-primary',
+        className
+      )}
+      aria-label={resolvedTheme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
+    >
+      {resolvedTheme === 'light' ? (
+        <Moon className={iconSize} aria-hidden="true" />
+      ) : (
+        <Sun className={iconSize} aria-hidden="true" />
+      )}
+    </button>
+  );
+}

package/registry/source/toast.tsx

@@ -0,0 +1,166 @@
+import * as React from 'react';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X, CheckCircle2, XCircle, AlertCircle, Info } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    aria-live="polite"
+    aria-atomic="true"
+    className={cn(
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      className
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-4 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: {
+        default: 'border-semantic-border-default bg-semantic-bg-elevated text-semantic-fg-primary',
+        success: 'success border-semantic-status-success-border bg-semantic-status-success-bg text-semantic-status-success-fg',
+        error: 'error border-semantic-status-error-border bg-semantic-status-error-bg text-semantic-status-error-fg',
+        warning: 'warning border-semantic-status-warning-border bg-semantic-status-warning-bg text-semantic-status-warning-fg',
+        info: 'info border-semantic-status-info-border bg-semantic-status-info-bg text-semantic-status-info-fg',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-semantic-border-default bg-transparent px-3 text-sm font-medium ring-offset-semantic-offset transition-colors hover:bg-semantic-bg-hover focus:outline-none focus:ring-2 focus:ring-semantic-focus focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.success]:border-semantic-status-success-border group-[.success]:hover:bg-semantic-status-success-bg group-[.error]:border-semantic-status-error-border group-[.error]:hover:bg-semantic-status-error-bg',
+      className
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      'absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity hover:opacity-100 focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100',
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" aria-hidden="true" />
+    <span className="sr-only">Close</span>
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn('text-sm font-semibold', className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn('text-sm opacity-90', className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export interface ToastContentProps {
+  title?: string;
+  description?: string;
+  action?: ToastActionElement;
+  variant?: 'default' | 'success' | 'error' | 'warning' | 'info';
+  icon?: React.ReactNode;
+  showIcon?: boolean;
+}
+
+const ToastContent = React.forwardRef<HTMLDivElement, ToastContentProps>(
+  ({ title, description, icon, showIcon = true, variant = 'default' }, ref) => {
+    const defaultIcons = {
+      default: <Info className="h-5 w-5" />,
+      info: <Info className="h-5 w-5 text-semantic-status-info-icon" />,
+      success: <CheckCircle2 className="h-5 w-5 text-semantic-status-success-icon" />,
+      error: <XCircle className="h-5 w-5 text-semantic-status-error-icon" />,
+      warning: <AlertCircle className="h-5 w-5 text-semantic-status-warning-icon" />,
+    };
+
+    const iconToRender = icon || defaultIcons[variant];
+
+    return (
+      <div ref={ref} className="flex gap-3">
+        {showIcon && <div className="flex-shrink-0" aria-hidden="true">{iconToRender}</div>}
+        <div className="grid gap-1">
+          {title && <ToastTitle>{title}</ToastTitle>}
+          {description && <ToastDescription>{description}</ToastDescription>}
+        </div>
+      </div>
+    );
+  }
+);
+ToastContent.displayName = 'ToastContent';
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+  ToastContent,
+};

package/registry/source/tooltip.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '../../lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 overflow-hidden rounded-md border border-semantic-border-default bg-semantic-bg-elevated px-3 py-1.5 text-sm text-semantic-fg-primary shadow-md',
+      'animate-in fade-in-0 zoom-in-95',
+      'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+      'data-[side=bottom]:slide-in-from-top-2',
+      'data-[side=left]:slide-in-from-right-2',
+      'data-[side=right]:slide-in-from-left-2',
+      'data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export interface SimpleTooltipProps {
+  content: React.ReactNode;
+  children: React.ReactElement;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  delayDuration?: number;
+  className?: string;
+}
+
+const SimpleTooltip = React.forwardRef<HTMLDivElement, SimpleTooltipProps>(
+  ({ content, children, side = 'top', delayDuration = 200, className }, ref) => {
+    return (
+      <Tooltip delayDuration={delayDuration}>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent side={side} className={className} ref={ref}>
+          {content}
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+);
+SimpleTooltip.displayName = 'SimpleTooltip';
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, SimpleTooltip };

package/registry/source/use-theme.tsx

@@ -0,0 +1,102 @@
+import { createContext, useContext, useEffect, useState, useCallback } from 'react';
+import type { ReactNode } from 'react';
+
+type Theme = 'light' | 'dark' | 'system';
+type ResolvedTheme = 'light' | 'dark';
+
+interface ThemeContextValue {
+  theme: Theme;
+  resolvedTheme: ResolvedTheme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+const STORAGE_KEY = 'ds-theme';
+
+function getSystemTheme(): ResolvedTheme {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function resolveTheme(theme: Theme): ResolvedTheme {
+  return theme === 'system' ? getSystemTheme() : theme;
+}
+
+function applyTheme(resolved: ResolvedTheme) {
+  const root = document.documentElement;
+  root.classList.remove('light', 'dark');
+  root.classList.add(resolved);
+}
+
+export interface ThemeProviderProps {
+  children: ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = STORAGE_KEY,
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    if (typeof window === 'undefined') return defaultTheme;
+    const stored = localStorage.getItem(storageKey) as Theme | null;
+    return stored || defaultTheme;
+  });
+
+  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>(() =>
+    resolveTheme(theme)
+  );
+
+  const setTheme = useCallback(
+    (newTheme: Theme) => {
+      setThemeState(newTheme);
+      localStorage.setItem(storageKey, newTheme);
+      const resolved = resolveTheme(newTheme);
+      setResolvedTheme(resolved);
+      applyTheme(resolved);
+    },
+    [storageKey]
+  );
+
+  const toggleTheme = useCallback(() => {
+    setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
+  }, [resolvedTheme, setTheme]);
+
+  // Apply theme on mount
+  useEffect(() => {
+    applyTheme(resolveTheme(theme));
+  }, []);
+
+  // Listen for system theme changes
+  useEffect(() => {
+    if (theme !== 'system') return;
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = () => {
+      const resolved = getSystemTheme();
+      setResolvedTheme(resolved);
+      applyTheme(resolved);
+    };
+
+    mediaQuery.addEventListener('change', handler);
+    return () => mediaQuery.removeEventListener('change', handler);
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}

package/registry/source/utils.ts

@@ -0,0 +1,13 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Utility function to merge Tailwind CSS classes with proper precedence
+ * Uses clsx to handle conditional classes and tailwind-merge to resolve conflicts
+ *
+ * @example
+ * cn('px-4 py-2', isLarge && 'px-6 py-3', className)
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}