apex-design-cli 1.0.0

package/registry/source/divider.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '../../lib/utils';
+
+export interface DividerProps
+  extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {
+  label?: string;
+  labelPosition?: 'left' | 'center' | 'right';
+}
+
+const Divider = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  DividerProps
+>(
+  (
+    {
+      className,
+      orientation = 'horizontal',
+      decorative = true,
+      label,
+      labelPosition = 'center',
+      ...props
+    },
+    ref
+  ) => {
+    if (!label) {
+      return (
+        <SeparatorPrimitive.Root
+          ref={ref}
+          decorative={decorative}
+          orientation={orientation}
+          className={cn(
+            'shrink-0 bg-semantic-border-default',
+            orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+            className
+          )}
+          {...props}
+        />
+      );
+    }
+
+    // Divider with label (only for horizontal)
+    if (orientation === 'vertical') {
+      return (
+        <SeparatorPrimitive.Root
+          ref={ref}
+          decorative={decorative}
+          orientation={orientation}
+          className={cn('h-full w-[1px] shrink-0 bg-semantic-border-default', className)}
+          {...props}
+        />
+      );
+    }
+
+    const labelPositionClasses = {
+      left: 'justify-start',
+      center: 'justify-center',
+      right: 'justify-end',
+    };
+
+    return (
+      <div className={cn('flex w-full items-center', labelPositionClasses[labelPosition])}>
+        {labelPosition !== 'left' && (
+          <SeparatorPrimitive.Root
+            decorative={decorative}
+            orientation={orientation}
+            className="h-[1px] flex-1 bg-semantic-border-default"
+          />
+        )}
+        <span className="px-3 text-xs font-medium text-semantic-fg-secondary">{label}</span>
+        {labelPosition !== 'right' && (
+          <SeparatorPrimitive.Root
+            decorative={decorative}
+            orientation={orientation}
+            className="h-[1px] flex-1 bg-semantic-border-default"
+          />
+        )}
+      </div>
+    );
+  }
+);
+Divider.displayName = 'Divider';
+
+export { Divider };

package/registry/source/dropdown-menu.tsx

@@ -0,0 +1,209 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+      'focus:bg-semantic-bg-hover data-[state=open]:bg-semantic-bg-hover',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger';
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border border-semantic-border-default bg-semantic-bg-elevated p-1 shadow-lg',
+      '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=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2',
+      'data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = 'DropdownMenuSubContent';
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-semantic-border-default bg-semantic-bg-elevated p-1 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=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2',
+        'data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = 'DropdownMenuContent';
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+      'focus:bg-semantic-bg-hover focus:text-semantic-fg-primary',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = 'DropdownMenuItem';
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+      'focus:bg-semantic-bg-hover focus:text-semantic-fg-primary',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+      'focus:bg-semantic-bg-hover focus:text-semantic-fg-primary',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold text-semantic-fg-primary',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = 'DropdownMenuLabel';
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-semantic-border-default', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span
+    className={cn('ml-auto text-xs tracking-widest text-semantic-fg-muted', className)}
+    {...props}
+  />
+);
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

package/registry/source/empty-state.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const emptyStateVariants = cva(
+  'flex flex-col items-center justify-center text-center',
+  {
+    variants: {
+      variant: {
+        default: 'py-12 px-6',
+        minimal: 'py-8 px-4',
+        card: 'py-12 px-6 bg-semantic-bg-elevated border border-semantic-border-default rounded-lg shadow-sm',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface EmptyStateProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof emptyStateVariants> {
+  /** Icon element to display */
+  icon?: React.ReactNode;
+  /** Title text */
+  title: string;
+  /** Description text */
+  description?: string;
+  /** Action element (typically a Button) */
+  action?: React.ReactNode;
+}
+
+const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
+  ({ className, variant, icon, title, description, action, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="region"
+        aria-label={title}
+        className={cn(emptyStateVariants({ variant }), className)}
+        {...props}
+      >
+        {icon && (
+          <div
+            className={cn(
+              'mb-4 flex items-center justify-center text-semantic-fg-disabled',
+              variant === 'minimal' && 'mb-3'
+            )}
+            aria-hidden="true"
+          >
+            {icon}
+          </div>
+        )}
+
+        <h3
+          className={cn(
+            'font-semibold text-semantic-fg-primary',
+            variant === 'minimal' ? 'text-base' : 'text-lg'
+          )}
+        >
+          {title}
+        </h3>
+
+        {description && (
+          <p
+            className={cn(
+              'mt-2 max-w-sm text-semantic-fg-muted',
+              variant === 'minimal' ? 'text-xs' : 'text-sm'
+            )}
+          >
+            {description}
+          </p>
+        )}
+
+        {action && (
+          <div className={cn('mt-6', variant === 'minimal' && 'mt-4')}>
+            {action}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+EmptyState.displayName = 'EmptyState';
+
+export { EmptyState, emptyStateVariants };

package/registry/source/error-message.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { AlertCircle } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+const errorMessageVariants = cva(
+  'flex items-start gap-2 text-sm text-semantic-fg-error',
+  {
+    variants: {
+      size: {
+        sm: 'text-xs',
+        md: 'text-sm',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export interface ErrorMessageProps
+  extends React.HTMLAttributes<HTMLParagraphElement>,
+    VariantProps<typeof errorMessageVariants> {
+  /** Show error icon */
+  showIcon?: boolean;
+}
+
+const ErrorMessage = React.forwardRef<HTMLParagraphElement, ErrorMessageProps>(
+  ({ className, size, showIcon = true, children, ...props }, ref) => {
+    return (
+      <p
+        ref={ref}
+        className={cn(errorMessageVariants({ size }), className)}
+        role="alert"
+        aria-live="assertive"
+        {...props}
+      >
+        {showIcon && (
+          <AlertCircle className={cn('flex-shrink-0', size === 'sm' ? 'h-3 w-3' : 'h-4 w-4')} aria-hidden="true" />
+        )}
+        <span>{children}</span>
+      </p>
+    );
+  }
+);
+
+ErrorMessage.displayName = 'ErrorMessage';
+
+export { ErrorMessage, errorMessageVariants };

package/registry/source/field-group.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const fieldGroupVariants = cva('space-y-2', {
+  variants: {
+    spacing: {
+      sm: 'space-y-1',
+      md: 'space-y-2',
+      lg: 'space-y-3',
+    },
+  },
+  defaultVariants: {
+    spacing: 'md',
+  },
+});
+
+export interface FieldGroupProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof fieldGroupVariants> {
+  /** Field label element */
+  label?: React.ReactNode;
+  /** Helper text element */
+  helperText?: React.ReactNode;
+  /** Error message element */
+  error?: React.ReactNode;
+  /** The input/field element */
+  children: React.ReactNode;
+}
+
+const FieldGroup = React.forwardRef<HTMLDivElement, FieldGroupProps>(
+  ({ className, spacing, label, helperText, error, children, ...props }, ref) => {
+    const labelId = React.useId();
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-labelledby={label ? labelId : undefined}
+        className={cn(fieldGroupVariants({ spacing }), className)}
+        {...props}
+      >
+        {label && <div id={labelId}>{label}</div>}
+        <div>{children}</div>
+        {error ? <div>{error}</div> : helperText ? <div>{helperText}</div> : null}
+      </div>
+    );
+  }
+);
+
+FieldGroup.displayName = 'FieldGroup';
+
+export { FieldGroup, fieldGroupVariants };

package/registry/source/helper-text.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const helperTextVariants = cva('text-sm', {
+  variants: {
+    variant: {
+      default: 'text-semantic-fg-secondary',
+      muted: 'text-semantic-fg-muted',
+    },
+    size: {
+      sm: 'text-xs',
+      md: 'text-sm',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'md',
+  },
+});
+
+export interface HelperTextProps
+  extends React.HTMLAttributes<HTMLParagraphElement>,
+    VariantProps<typeof helperTextVariants> {}
+
+const HelperText = React.forwardRef<HTMLParagraphElement, HelperTextProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <p
+        ref={ref}
+        className={cn(helperTextVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+  }
+);
+
+HelperText.displayName = 'HelperText';
+
+export { HelperText, helperTextVariants };