@snowcone-app/ui 0.1.43 → 0.2.0

package/src/primitives/accordion.tsx

@@ -0,0 +1,280 @@
+"use client";
+
+'use client';
+
+import * as React from 'react';
+import { Icon } from '@iconify/react';
+import { cn } from '../lib/utils';
+
+/**
+ * CSS Grid-based Accordion
+ *
+ * Uses CSS `grid-template-rows` animation instead of JavaScript height measurement.
+ * This avoids forced reflows that cause 300-400ms delays on page load.
+ *
+ * Benefits:
+ * - No forced reflow/layout thrashing
+ * - Smooth height animation
+ * - Fully accessible (keyboard nav, ARIA)
+ * - Same API as Radix accordion
+ *
+ * @see https://developer.chrome.com/docs/performance/insights/forced-reflow
+ */
+
+type AccordionContextValue = {
+  value: string[];
+  onValueChange: (value: string[]) => void;
+  type: 'single' | 'multiple';
+  collapsible: boolean;
+};
+
+const AccordionContext = React.createContext<AccordionContextValue | null>(null);
+
+function useAccordion() {
+  const context = React.useContext(AccordionContext);
+  if (!context) {
+    throw new Error('Accordion components must be used within an Accordion');
+  }
+  return context;
+}
+
+type AccordionItemContextValue = {
+  value: string;
+  isOpen: boolean;
+  triggerId: string;
+  contentId: string;
+};
+
+const AccordionItemContext = React.createContext<AccordionItemContextValue | null>(null);
+
+function useAccordionItem() {
+  const context = React.useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error('AccordionItem components must be used within an AccordionItem');
+  }
+  return context;
+}
+
+// ============================================================================
+// Accordion Root
+// ============================================================================
+
+interface AccordionSingleProps {
+  type: 'single';
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  collapsible?: boolean;
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface AccordionMultipleProps {
+  type?: 'multiple';
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+
+const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>((props, ref) => {
+  const { type = 'multiple', children, className, ...rest } = props;
+
+  // Handle single vs multiple value state
+  const [internalValue, setInternalValue] = React.useState<string[]>(() => {
+    if (type === 'single') {
+      const singleProps = props as AccordionSingleProps;
+      return singleProps.defaultValue ? [singleProps.defaultValue] : [];
+    } else {
+      const multiProps = props as AccordionMultipleProps;
+      return multiProps.defaultValue || [];
+    }
+  });
+
+  const value = React.useMemo(() => {
+    if (type === 'single') {
+      const singleProps = props as AccordionSingleProps;
+      return singleProps.value !== undefined ? [singleProps.value] : internalValue;
+    } else {
+      const multiProps = props as AccordionMultipleProps;
+      return multiProps.value !== undefined ? multiProps.value : internalValue;
+    }
+  }, [type, props, internalValue]);
+
+  const onValueChange = React.useCallback(
+    (newValue: string[]) => {
+      setInternalValue(newValue);
+      if (type === 'single') {
+        const singleProps = props as AccordionSingleProps;
+        singleProps.onValueChange?.(newValue[0] || '');
+      } else {
+        const multiProps = props as AccordionMultipleProps;
+        multiProps.onValueChange?.(newValue);
+      }
+    },
+    [type, props]
+  );
+
+  const collapsible = type === 'single' ? ((props as AccordionSingleProps).collapsible ?? false) : true;
+
+  const contextValue = React.useMemo<AccordionContextValue>(
+    () => ({
+      value,
+      onValueChange,
+      type,
+      collapsible,
+    }),
+    [value, onValueChange, type, collapsible]
+  );
+
+  return (
+    <AccordionContext.Provider value={contextValue}>
+      <div ref={ref} className={className} data-accordion="">
+        {children}
+      </div>
+    </AccordionContext.Provider>
+  );
+});
+Accordion.displayName = 'Accordion';
+
+// ============================================================================
+// Accordion Item
+// ============================================================================
+
+interface AccordionItemProps {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+}
+
+const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
+  ({ value, children, className, disabled }, ref) => {
+    const accordion = useAccordion();
+    const isOpen = accordion.value.includes(value);
+
+    const triggerId = React.useId();
+    const contentId = React.useId();
+
+    const contextValue = React.useMemo<AccordionItemContextValue>(
+      () => ({
+        value,
+        isOpen,
+        triggerId,
+        contentId,
+      }),
+      [value, isOpen, triggerId, contentId]
+    );
+
+    return (
+      <AccordionItemContext.Provider value={contextValue}>
+        <div
+          ref={ref}
+          className={cn('border-b border-divider', className)}
+          data-state={isOpen ? 'open' : 'closed'}
+          data-disabled={disabled || undefined}
+        >
+          {children}
+        </div>
+      </AccordionItemContext.Provider>
+    );
+  }
+);
+AccordionItem.displayName = 'AccordionItem';
+
+// ============================================================================
+// Accordion Trigger
+// ============================================================================
+
+interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+}
+
+const AccordionTrigger = React.forwardRef<HTMLButtonElement, AccordionTriggerProps>(
+  ({ className, children, ...props }, ref) => {
+    const accordion = useAccordion();
+    const item = useAccordionItem();
+
+    const handleClick = () => {
+      if (item.isOpen) {
+        // Closing
+        if (accordion.type === 'single' && !accordion.collapsible) {
+          // Can't close in single non-collapsible mode
+          return;
+        }
+        accordion.onValueChange(accordion.value.filter((v) => v !== item.value));
+      } else {
+        // Opening
+        if (accordion.type === 'single') {
+          accordion.onValueChange([item.value]);
+        } else {
+          accordion.onValueChange([...accordion.value, item.value]);
+        }
+      }
+    };
+
+    return (
+      <h3 className="flex">
+        <button
+          ref={ref}
+          type="button"
+          id={item.triggerId}
+          aria-expanded={item.isOpen}
+          aria-controls={item.contentId}
+          data-state={item.isOpen ? 'open' : 'closed'}
+          onClick={handleClick}
+          className={cn(
+            'flex flex-1 items-center justify-between py-4 transition-all hover:underline [&[data-state=open]>svg]:rotate-180 font-label',
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <Icon icon="gravity-ui:chevron-down" className="size-4 shrink-0 transition-transform duration-200" />
+        </button>
+      </h3>
+    );
+  }
+);
+AccordionTrigger.displayName = 'AccordionTrigger';
+
+// ============================================================================
+// Accordion Content
+// ============================================================================
+
+interface AccordionContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const AccordionContent = React.forwardRef<HTMLDivElement, AccordionContentProps>(
+  ({ className, children }, ref) => {
+    const item = useAccordionItem();
+
+    return (
+      <div
+        ref={ref}
+        id={item.contentId}
+        role="region"
+        aria-labelledby={item.triggerId}
+        data-state={item.isOpen ? 'open' : 'closed'}
+        // CSS Grid animation - no JS height measurement needed!
+        className={cn(
+          'grid transition-[grid-template-rows] duration-300 ease-out',
+          item.isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+        )}
+      >
+        {/* Inner wrapper must have overflow-hidden and min-h-0 for the grid animation to work */}
+        <div className="overflow-hidden min-h-0">
+          <div className={cn('pb-4 pt-0 text-sm font-body', className)}>{children}</div>
+        </div>
+      </div>
+    );
+  }
+);
+AccordionContent.displayName = 'AccordionContent';
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/primitives/badge.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../lib/utils';
+import { useSurface } from './surface';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-badge border px-2.5 py-0.5 text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 font-caption',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground',
+        secondary: 'border-transparent bg-default text-default-foreground',
+        destructive: 'border-transparent bg-danger text-danger-foreground',
+        success: 'border-transparent bg-success text-success-foreground',
+        warning: 'border-transparent bg-warning text-warning-foreground',
+        outline: 'border-divider text-foreground',
+        gradient: 'border-transparent bg-gradient-primary text-gradient-foreground',
+      },
+      size: {
+        default: 'px-2.5 py-0.5 text-xs',
+        sm: 'px-2 py-0.5 text-[10px]',
+        lg: 'px-3 py-1 text-sm',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+  // HeroUI Chip compatibility props
+  color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+  /** Whether to show a dot indicator */
+  dot?: boolean;
+  /** Content to show on the left */
+  startContent?: React.ReactNode;
+  /** Content to show on the right */
+  endContent?: React.ReactNode;
+  /** Close button click handler (makes badge dismissible) */
+  onClose?: () => void;
+}
+
+function Badge({
+  className,
+  variant,
+  size,
+  color,
+  dot,
+  startContent,
+  endContent,
+  onClose,
+  children,
+  ...props
+}: BadgeProps) {
+  const { variant: surfaceVariant } = useSurface();
+  const isOnDefaultSurface = surfaceVariant === 'default';
+  const isOnSecondarySurface = surfaceVariant === 'secondary';
+
+  // Map HeroUI color prop to variant
+  const effectiveVariant = color
+    ? (
+        {
+          default: 'secondary',
+          primary: 'default',
+          secondary: 'secondary',
+          success: 'success',
+          warning: 'warning',
+          danger: 'destructive',
+        } as const
+      )[color]
+    : variant;
+
+  // Surface-aware variant overrides
+  // - On default surface (white card): dark mode needs lighter bg, light mode base color is fine
+  // - On secondary surface: both modes need the raised color for contrast
+  const surfaceOverrides = {
+    secondary:
+      effectiveVariant === 'secondary' &&
+      (isOnSecondarySurface
+        ? 'bg-[var(--color-default-on-surface)] hover:bg-[var(--color-default-on-surface)]/80'
+        : isOnDefaultSurface
+          ? 'dark:bg-[var(--color-default-on-surface)] dark:hover:bg-[var(--color-default-on-surface)]/80'
+          : false),
+    outline:
+      effectiveVariant === 'outline' &&
+      (isOnDefaultSurface || isOnSecondarySurface) &&
+      'border-muted-foreground/30',
+  };
+
+  return (
+    <div
+      className={cn(
+        badgeVariants({ variant: effectiveVariant, size }),
+        surfaceOverrides.secondary,
+        surfaceOverrides.outline,
+        className
+      )}
+      {...props}
+    >
+      {dot && <span className="mr-1.5 size-1.5 rounded-full bg-current" aria-hidden="true" />}
+      {startContent && <span className="mr-1">{startContent}</span>}
+      {children}
+      {endContent && <span className="ml-1">{endContent}</span>}
+      {onClose && (
+        <button
+          type="button"
+          onClick={onClose}
+          className="ml-1 inline-flex size-3.5 items-center justify-center rounded-full hover:bg-current/20 focus:outline-none"
+          aria-label="Remove"
+        >
+          <svg
+            className="size-3"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}
+
+// HeroUI Chip alias
+const Chip = Badge;
+
+export { Badge, Chip, badgeVariants };

package/src/primitives/card.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../lib/utils';
+import { Surface } from './surface';
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Visual variant - 'outlined' adds border and shadow */
+  variant?: 'default' | 'outlined';
+}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = 'default', ...props }, ref) => {
+    return (
+      <Surface
+        ref={ref}
+        variant="default"
+        className={cn(
+          'rounded-card text-foreground',
+          variant === 'outlined' && 'border border-divider shadow-soft',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn('leading-none tracking-tight font-heading', className)} {...props} />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => <p ref={ref} className={cn('text-muted-foreground font-caption', className)} {...props} />
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/src/primitives/checkbox.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Icon } from '@iconify/react';
+import { cn } from '../lib/utils';
+import { useSurface } from './surface';
+
+interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+  /** Visual variant - auto-detected from Surface context, or can be set explicitly */
+  variant?: 'default' | 'filled';
+}
+
+const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+  ({ className, checked, variant, ...props }, ref) => {
+    // Auto-detect variant from Surface context
+    const surface = useSurface();
+    const effectiveVariant = variant ?? (surface.variant === 'default' ? 'filled' : 'default');
+
+    return (
+      <CheckboxPrimitive.Root
+        ref={ref}
+        className={cn(
+          'peer size-4 shrink-0 rounded transition-colors border-none',
+          'focus-visible:outline-none',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          // Variant styles - semantic: field on page vs field on surface
+          effectiveVariant === 'default' && 'bg-field shadow-soft dark:shadow-none',
+          effectiveVariant === 'filled' && 'bg-[var(--color-field-on-surface)]',
+          'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:shadow-none',
+          'data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:shadow-none',
+          className
+        )}
+        checked={checked}
+        {...props}
+      >
+        <CheckboxPrimitive.Indicator
+          className={cn(
+            'flex items-center justify-center text-current',
+            'data-[state=checked]:animate-in data-[state=checked]:zoom-in-0 data-[state=checked]:duration-300',
+            'data-[state=indeterminate]:animate-in data-[state=indeterminate]:zoom-in-0 data-[state=indeterminate]:duration-150'
+          )}
+        >
+          {checked === 'indeterminate' ? (
+            <Icon icon="gravity-ui:minus" className="size-3" />
+          ) : (
+            <Icon icon="gravity-ui:check" className="size-3" />
+          )}
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+    );
+  }
+);
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/src/primitives/collapsible.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import * as React from 'react';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import { cn } from '../lib/utils';
+
+const CollapsibleRoot = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CollapsiblePrimitive.Root
+    ref={ref}
+    className={cn(className)}
+    {...props}
+  />
+));
+CollapsibleRoot.displayName = 'Collapsible';
+
+const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+
+const CollapsibleContent = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <CollapsiblePrimitive.Content
+    ref={ref}
+    className={cn(
+      'overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down',
+      className
+    )}
+    {...props}
+  />
+));
+CollapsibleContent.displayName = 'CollapsibleContent';
+
+const Collapsible = CollapsibleRoot;
+
+// Disclosure aliases (alternative naming)
+const Disclosure = CollapsibleRoot;
+const DisclosureTrigger = CollapsibleTrigger;
+const DisclosureContent = CollapsibleContent;
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  CollapsibleRoot,
+  Disclosure,
+  DisclosureTrigger,
+  DisclosureContent,
+};