apex-design-cli 1.0.0

package/registry/source/input.tsx

@@ -0,0 +1,219 @@
+import React from 'react';
+
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /**
+   * Visual style variant of the input
+   */
+  variant?: 'default' | 'error';
+
+  /**
+   * Size of the input field
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Label text displayed above the input
+   */
+  label?: string;
+
+  /**
+   * Helper text displayed below the input
+   */
+  helperText?: string;
+
+  /**
+   * Error message displayed below the input
+   */
+  errorMessage?: string;
+
+  /**
+   * Icon to display on the left side of the input
+   */
+  leftIcon?: React.ReactNode;
+
+  /**
+   * Icon to display on the right side of the input
+   */
+  rightIcon?: React.ReactNode;
+
+  /**
+   * Whether the field is required
+   */
+  required?: boolean;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      variant = 'default',
+      size = 'md',
+      label,
+      helperText,
+      errorMessage,
+      leftIcon,
+      rightIcon,
+      required,
+      disabled,
+      className = '',
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+    // Determine if we should show error state
+    const hasError = variant === 'error' || !!errorMessage;
+
+    // Base styles for the input container
+    const containerStyles = 'flex flex-col gap-1.5';
+
+    // Label styles
+    const labelStyles = 'text-sm font-medium text-semantic-fg-secondary';
+
+    // Input wrapper styles (for icon support)
+    const wrapperStyles = 'relative flex items-center';
+
+    // Base input styles
+    const baseInputStyles = `
+      w-full
+      rounded-md
+      border
+      bg-semantic-control-bg
+      text-semantic-control-fg
+      placeholder:text-semantic-control-placeholder
+      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
+    `.trim().replace(/\s+/g, ' ');
+
+    // Variant styles
+    const variantStyles = {
+      default: `
+        border-semantic-control-border
+        hover:border-semantic-control-border-hover
+        focus:border-semantic-border-focus
+        focus:ring-semantic-focus
+      `.trim().replace(/\s+/g, ' '),
+      error: `
+        border-semantic-control-border-error
+        hover:border-semantic-control-border-error
+        focus:border-semantic-control-border-error
+        focus:ring-semantic-control-border-error
+      `.trim().replace(/\s+/g, ' '),
+    };
+
+    // Size styles
+    const sizeStyles = {
+      sm: 'h-8 px-3 text-sm',
+      md: 'h-10 px-3 text-sm',
+      lg: 'h-12 px-4 text-base',
+    };
+
+    // Adjust padding for icons
+    const iconPaddingStyles = {
+      left: {
+        sm: 'pl-9',
+        md: 'pl-10',
+        lg: 'pl-12',
+      },
+      right: {
+        sm: 'pr-9',
+        md: 'pr-10',
+        lg: 'pr-12',
+      },
+    };
+
+    // Icon container styles
+    const iconContainerStyles = {
+      base: 'absolute flex items-center justify-center text-semantic-control-icon',
+      left: {
+        sm: 'left-2.5 w-4 h-4',
+        md: 'left-3 w-4 h-4',
+        lg: 'left-3.5 w-5 h-5',
+      },
+      right: {
+        sm: 'right-2.5 w-4 h-4',
+        md: 'right-3 w-4 h-4',
+        lg: 'right-3.5 w-5 h-5',
+      },
+    };
+
+    // Combine all input classes
+    const inputClassName = [
+      baseInputStyles,
+      variantStyles[hasError ? 'error' : 'default'],
+      sizeStyles[size],
+      leftIcon && iconPaddingStyles.left[size],
+      rightIcon && iconPaddingStyles.right[size],
+      className,
+    ].filter(Boolean).join(' ');
+
+    // Helper/Error text styles
+    const messageStyles = hasError
+      ? 'text-sm text-semantic-fg-error'
+      : 'text-sm text-semantic-fg-secondary';
+
+    return (
+      <div className={containerStyles}>
+        {/* Label */}
+        {label && (
+          <label htmlFor={inputId} className={labelStyles}>
+            {label}
+            {required && <span className="text-semantic-fg-error ml-1">*</span>}
+          </label>
+        )}
+
+        {/* Input wrapper with icons */}
+        <div className={wrapperStyles}>
+          {/* Left icon */}
+          {leftIcon && (
+            <div
+              className={`${iconContainerStyles.base} ${iconContainerStyles.left[size]}`}
+              aria-hidden="true"
+            >
+              {leftIcon}
+            </div>
+          )}
+
+          {/* Input field */}
+          <input
+            ref={ref}
+            id={inputId}
+            className={inputClassName}
+            disabled={disabled}
+            aria-invalid={hasError}
+            aria-required={required}
+            {...props}
+          />
+
+          {/* Right icon */}
+          {rightIcon && (
+            <div
+              className={`${iconContainerStyles.base} ${iconContainerStyles.right[size]}`}
+              aria-hidden="true"
+            >
+              {rightIcon}
+            </div>
+          )}
+        </div>
+
+        {/* Helper text or error message */}
+        {(errorMessage || helperText) && (
+          <p className={messageStyles}>
+            {errorMessage || helperText}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+export { Input };
+export default Input;

package/registry/source/label.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+  {
+    variants: {
+      variant: {
+        default: 'text-semantic-fg-primary',
+        muted: 'text-semantic-fg-muted',
+      },
+      size: {
+        sm: 'text-xs',
+        md: 'text-sm',
+        lg: 'text-base',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+export interface LabelProps
+  extends React.LabelHTMLAttributes<HTMLLabelElement>,
+    VariantProps<typeof labelVariants> {
+  /** Whether the field is required */
+  required?: boolean;
+  /** Whether the field is disabled */
+  disabled?: boolean;
+}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, variant, size, required, disabled, children, ...props }, ref) => {
+    return (
+      <label
+        ref={ref}
+        className={cn(
+          labelVariants({ variant, size }),
+          disabled && 'cursor-not-allowed opacity-70',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {required && (
+          <span className="ml-1 text-semantic-fg-error" aria-label="required">
+            *
+          </span>
+        )}
+      </label>
+    );
+  }
+);
+
+Label.displayName = 'Label';
+
+export { Label, labelVariants };

package/registry/source/progress.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const progressVariants = cva('relative h-4 w-full overflow-hidden rounded-full', {
+  variants: {
+    variant: {
+      default: 'bg-semantic-progress-track',
+      success: 'bg-semantic-progress-success-track',
+      warning: 'bg-semantic-progress-warning-track',
+      error: 'bg-semantic-progress-error-track',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+const progressIndicatorVariants = cva(
+  'h-full w-full flex-1 transition-all duration-300 ease-in-out',
+  {
+    variants: {
+      variant: {
+        default: 'bg-semantic-progress-fill',
+        success: 'bg-semantic-progress-success-fill',
+        warning: 'bg-semantic-progress-warning-fill',
+        error: 'bg-semantic-progress-error-fill',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface ProgressProps
+  extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,
+    VariantProps<typeof progressVariants> {
+  showLabel?: boolean;
+  label?: string;
+}
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  ProgressProps
+>(({ className, value = 0, variant, showLabel, label, ...props }, ref) => {
+  const progressValue = Math.min(Math.max(value || 0, 0), 100);
+
+  return (
+    <div className="w-full space-y-2" aria-live="polite">
+      {(showLabel || label) && (
+        <div className="flex items-center justify-between text-sm">
+          <span className="text-semantic-fg-secondary">
+            {label || 'Progress'}
+          </span>
+          {showLabel && (
+            <span className="font-medium text-semantic-fg-primary">
+              {progressValue}%
+            </span>
+          )}
+        </div>
+      )}
+      <ProgressPrimitive.Root
+        ref={ref}
+        className={cn(progressVariants({ variant }), className)}
+        value={progressValue}
+        aria-label={label || 'Progress'}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={progressValue}
+        {...props}
+      >
+        <ProgressPrimitive.Indicator
+          className={cn(progressIndicatorVariants({ variant }))}
+          style={{ transform: `translateX(-${100 - progressValue}%)` }}
+        />
+      </ProgressPrimitive.Root>
+    </div>
+  );
+});
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress, progressVariants };

package/registry/source/radio.tsx

@@ -0,0 +1,161 @@
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />;
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
+    size?: 'sm' | 'md' | 'lg';
+  }
+>(({ className, size = 'md', ...props }, ref) => {
+  const sizeClasses = {
+    sm: 'h-4 w-4',
+    md: 'h-5 w-5',
+    lg: 'h-6 w-6',
+  };
+
+  const iconSizes = {
+    sm: 8,
+    md: 10,
+    lg: 12,
+  };
+
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'aspect-square rounded-full border-2 border-semantic-control-border text-semantic-control-bg-checked ring-offset-semantic-offset',
+        'transition-colors',
+        'focus:outline-none focus-visible:ring-2 focus-visible:ring-semantic-focus focus-visible:ring-offset-2',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'data-[state=checked]:border-semantic-control-bg-checked data-[state=checked]:bg-semantic-control-bg',
+        sizeClasses[size],
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="fill-current text-current" size={iconSizes[size]} />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export interface RadioOption {
+  value: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+export interface RadioGroupWrapperProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, 'children'> {
+  label?: string;
+  helperText?: string;
+  errorMessage?: string;
+  error?: boolean;
+  options: RadioOption[];
+  size?: 'sm' | 'md' | 'lg';
+  orientation?: 'vertical' | 'horizontal';
+}
+
+const RadioGroupWrapper = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  RadioGroupWrapperProps
+>(
+  (
+    {
+      label,
+      helperText,
+      errorMessage,
+      error = false,
+      options,
+      size = 'md',
+      orientation = 'vertical',
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const groupId = React.useId();
+    const helperTextId = `${groupId}-helper`;
+    const errorMessageId = `${groupId}-error`;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label className="mb-2 block text-sm font-medium text-semantic-fg-secondary">
+            {label}
+          </label>
+        )}
+
+        <RadioGroup
+          ref={ref}
+          className={cn(
+            orientation === 'horizontal' ? 'flex flex-wrap gap-4' : 'grid gap-3',
+            className
+          )}
+          aria-invalid={error ? 'true' : 'false'}
+          aria-describedby={
+            error && errorMessage ? errorMessageId : helperText ? helperTextId : undefined
+          }
+          {...props}
+        >
+          {options.map((option) => (
+            <div key={option.value} className="flex items-start gap-2">
+              <RadioGroupItem id={option.value} value={option.value} size={size} disabled={option.disabled} />
+              <div className="flex flex-col">
+                <label
+                  htmlFor={option.value}
+                  className={cn(
+                    'cursor-pointer select-none font-medium leading-none',
+                    size === 'sm' ? 'text-sm' : size === 'lg' ? 'text-lg' : 'text-base',
+                    option.disabled && 'cursor-not-allowed opacity-70',
+                    'text-semantic-fg-primary'
+                  )}
+                >
+                  {option.label}
+                </label>
+                {option.description && (
+                  <p
+                    className={cn(
+                      'text-semantic-fg-secondary',
+                      size === 'sm' ? 'text-xs mt-0.5' : 'text-sm mt-1'
+                    )}
+                  >
+                    {option.description}
+                  </p>
+                )}
+              </div>
+            </div>
+          ))}
+        </RadioGroup>
+
+        {!error && helperText && (
+          <p id={helperTextId} className="mt-2 text-sm text-semantic-fg-secondary">
+            {helperText}
+          </p>
+        )}
+
+        {error && errorMessage && (
+          <p id={errorMessageId} className="mt-2 text-sm text-semantic-fg-error">
+            {errorMessage}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+RadioGroupWrapper.displayName = 'RadioGroupWrapper';
+
+export { RadioGroup, RadioGroupItem, RadioGroupWrapper };