apex-design-cli 1.0.0

package/registry/source/select.tsx

@@ -0,0 +1,278 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+// ===================
+// SELECT ROOT
+// ===================
+
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+
+// ===================
+// SELECT TRIGGER (Button que abre el dropdown)
+// ===================
+
+interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+  size?: 'sm' | 'md' | 'lg';
+  error?: boolean;
+}
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  SelectTriggerProps
+>(({ className, children, size = 'md', error = false, ...props }, ref) => {
+  const sizeClasses = {
+    sm: 'h-8 px-3 text-sm',
+    md: 'h-10 px-3 text-base',
+    lg: 'h-12 px-4 text-lg',
+  };
+
+  return (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex w-full items-center justify-between rounded-md border bg-semantic-control-bg',
+        'transition-colors',
+        'focus:outline-none focus:ring-2 focus:ring-offset-0',
+        'disabled:cursor-not-allowed disabled:bg-semantic-bg-disabled disabled:text-semantic-fg-disabled',
+        'placeholder:text-semantic-control-placeholder',
+        '[&>span]:line-clamp-1',
+        sizeClasses[size],
+        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
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDown className="h-4 w-4 text-semantic-control-icon" aria-hidden="true" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+// ===================
+// SELECT SCROLL BUTTONS
+// ===================
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    aria-hidden="true"
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    aria-hidden="true"
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+// ===================
+// SELECT CONTENT (Dropdown panel)
+// ===================
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-semantic-border-default bg-semantic-bg-elevated text-semantic-fg-primary shadow-md',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+// ===================
+// SELECT LABEL (Heading dentro del dropdown)
+// ===================
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold text-semantic-fg-primary', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+// ===================
+// SELECT ITEM (Cada opción)
+// ===================
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none',
+      'focus:bg-semantic-bg-hover focus:text-semantic-fg-primary',
+      'data-[disabled]:pointer-events-none data-[disabled]:text-semantic-fg-disabled',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center" aria-hidden="true">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+// ===================
+// SELECT SEPARATOR
+// ===================
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-semantic-border-default', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// ===================
+// SELECT WRAPPER (Componente conveniente con label y helper text)
+// ===================
+
+export interface SelectWrapperProps {
+  /** Label text */
+  label?: string;
+  /** Helper text shown below select */
+  helperText?: string;
+  /** Error message shown when error={true} */
+  errorMessage?: string;
+  /** Error state */
+  error?: boolean;
+  /** Mark as required */
+  required?: boolean;
+  /** Select size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Children (must be Select components) */
+  children: React.ReactNode;
+  /** Container class name */
+  className?: string;
+}
+
+const SelectWrapper: React.FC<SelectWrapperProps> = ({
+  label,
+  helperText,
+  errorMessage,
+  error = false,
+  required = false,
+  size: _size = 'md',
+  children,
+  className,
+}) => {
+  const selectId = React.useId();
+  const helperTextId = `${selectId}-helper`;
+  const errorMessageId = `${selectId}-error`;
+
+  return (
+    <div className={cn('w-full', className)}>
+      {label && (
+        <label
+          htmlFor={selectId}
+          className="mb-1.5 block text-sm font-medium text-semantic-fg-secondary"
+        >
+          {label}
+          {required && <span className="ml-1 text-semantic-fg-error">*</span>}
+        </label>
+      )}
+
+      {children}
+
+      {!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>
+  );
+};
+
+// ===================
+// EXPORTS
+// ===================
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  SelectWrapper,
+};

package/registry/source/spinner.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+import { Loader2 } from 'lucide-react';
+
+const spinnerVariants = cva('animate-spin', {
+  variants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-6 w-6',
+      lg: 'h-8 w-8',
+      xl: 'h-12 w-12',
+    },
+    variant: {
+      default: 'text-semantic-fg-primary',
+      primary: 'text-semantic-action-primary',
+      secondary: 'text-semantic-fg-secondary',
+      light: 'text-semantic-fg-inverse',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'default',
+  },
+});
+
+export interface SpinnerProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,
+    VariantProps<typeof spinnerVariants> {
+  label?: string;
+}
+
+const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
+  ({ className, size, variant, label, ...props }, ref) => {
+    const labelColorClass = variant === 'light'
+      ? 'text-semantic-fg-inverse'
+      : 'text-semantic-fg-secondary';
+
+    return (
+      <div
+        ref={ref}
+        role="status"
+        aria-label={label || 'Loading'}
+        className={cn('inline-flex items-center gap-2', className)}
+        {...props}
+      >
+        <Loader2 className={cn(spinnerVariants({ size, variant }))} />
+        {label && (
+          <span className={cn('text-sm', labelColorClass)}>{label}</span>
+        )}
+        <span className="sr-only">{label || 'Loading'}</span>
+      </div>
+    );
+  }
+);
+Spinner.displayName = 'Spinner';
+
+export interface LoadingOverlayProps extends SpinnerProps {
+  show?: boolean;
+  transparent?: boolean;
+}
+
+const LoadingOverlay = React.forwardRef<HTMLDivElement, LoadingOverlayProps>(
+  ({ show = true, transparent = false, label = 'Loading...', ...spinnerProps }, ref) => {
+    if (!show) return null;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'fixed inset-0 z-50 flex items-center justify-center',
+          transparent
+            ? 'bg-transparent'
+            : 'bg-semantic-bg-loading-overlay backdrop-blur-sm'
+        )}
+      >
+        <Spinner label={label} {...spinnerProps} />
+      </div>
+    );
+  }
+);
+LoadingOverlay.displayName = 'LoadingOverlay';
+
+export { Spinner, LoadingOverlay, spinnerVariants };

package/registry/source/switch.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { cn } from '../../lib/utils';
+
+const SwitchRoot = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> & {
+    size?: 'sm' | 'md' | 'lg';
+  }
+>(({ className, size = 'md', ...props }, ref) => {
+  const sizeClasses = {
+    sm: 'h-5 w-9',
+    md: 'h-6 w-11',
+    lg: 'h-7 w-14',
+  };
+
+  const thumbSizeClasses = {
+    sm: 'h-4 w-4 data-[state=checked]:translate-x-4',
+    md: 'h-5 w-5 data-[state=checked]:translate-x-5',
+    lg: 'h-6 w-6 data-[state=checked]:translate-x-7',
+  };
+
+  return (
+    <SwitchPrimitive.Root
+      className={cn(
+        'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent',
+        'transition-colors',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-semantic-focus focus-visible:ring-offset-2',
+        'disabled:cursor-not-allowed disabled:bg-semantic-bg-disabled',
+        'data-[state=checked]:bg-semantic-control-bg-checked data-[state=unchecked]:bg-semantic-control-unchecked',
+        sizeClasses[size],
+        className
+      )}
+      {...props}
+      ref={ref}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          'pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform',
+          'data-[state=unchecked]:translate-x-0',
+          thumbSizeClasses[size]
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+});
+SwitchRoot.displayName = SwitchPrimitive.Root.displayName;
+
+export interface SwitchProps
+  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
+  label?: string;
+  description?: string;
+  size?: 'sm' | 'md' | 'lg';
+  labelPosition?: 'left' | 'right';
+}
+
+const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitive.Root>, SwitchProps>(
+  ({ className, label, description, size = 'md', labelPosition = 'right', id, ...props }, ref) => {
+    const switchId = id || React.useId();
+
+    const switchElement = <SwitchRoot ref={ref} id={switchId} size={size} {...props} />;
+
+    if (!label) {
+      return switchElement;
+    }
+
+    return (
+      <div className={cn('flex items-start gap-3', className)}>
+        {labelPosition === 'left' && (
+          <div className="flex-1">
+            <label
+              htmlFor={switchId}
+              className="cursor-pointer select-none text-sm font-medium leading-none text-semantic-fg-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              {label}
+            </label>
+            {description && (
+              <p className="mt-1 text-sm text-semantic-fg-secondary">{description}</p>
+            )}
+          </div>
+        )}
+
+        {switchElement}
+
+        {labelPosition === 'right' && (
+          <div className="flex-1">
+            <label
+              htmlFor={switchId}
+              className="cursor-pointer select-none text-sm font-medium leading-none text-semantic-fg-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              {label}
+            </label>
+            {description && (
+              <p className="mt-1 text-sm text-semantic-fg-secondary">{description}</p>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+Switch.displayName = 'Switch';
+
+export { Switch, SwitchRoot };

package/registry/source/table.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn('w-full caption-bottom text-sm', className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn('[&_tr:last-child]:border-0', className)}
+    {...props}
+  />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      'border-t bg-semantic-bg-sunken font-medium [&>tr]:last:border-b-0',
+      className
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      'border-b border-semantic-border-default transition-colors hover:bg-semantic-bg-hover data-[state=selected]:bg-semantic-bg-selected',
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-12 px-4 text-left align-middle font-medium text-semantic-fg-secondary [&:has([role=checkbox])]:pr-0',
+      className
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn('mt-4 text-sm text-semantic-fg-secondary', className)}
+    {...props}
+  />
+));
+TableCaption.displayName = 'TableCaption';
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

package/registry/source/tabs.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '../../lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-10 items-center justify-center rounded-md bg-semantic-bg-sunken p-1 text-semantic-fg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-semantic-offset transition-all',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-semantic-focus focus-visible:ring-offset-2',
+      'disabled:pointer-events-none disabled:opacity-50',
+      'data-[state=active]:bg-semantic-bg-elevated data-[state=active]:text-semantic-fg-primary data-[state=active]:shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-semantic-offset focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-semantic-focus focus-visible:ring-offset-2',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };