@snowcone-app/ui 0.1.42 → 0.2.0

package/src/primitives/tabs.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+'use client';
+
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '../lib/utils';
+import { useSurface } from './surface';
+
+interface TabsProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'value' | 'onValueChange'> {
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
+
+const TabsRoot = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, TabsProps>(
+  ({ value, onValueChange, ...props }, ref) => (
+    <TabsPrimitive.Root ref={ref} value={value} onValueChange={onValueChange} {...props} />
+  )
+);
+TabsRoot.displayName = 'Tabs';
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, children, ...props }, ref) => {
+  const listRef = React.useRef<HTMLDivElement>(null);
+  const [indicatorStyle, setIndicatorStyle] = React.useState<React.CSSProperties>({
+    opacity: 0,
+  });
+
+  // Update indicator position when active tab changes
+  React.useEffect(() => {
+    const listElement = listRef.current;
+    if (!listElement) return;
+
+    const updateIndicator = () => {
+      const activeTab = listElement.querySelector('[data-state="active"]') as HTMLElement;
+      if (activeTab) {
+        const listRect = listElement.getBoundingClientRect();
+        const tabRect = activeTab.getBoundingClientRect();
+
+        setIndicatorStyle({
+          width: tabRect.width,
+          height: tabRect.height,
+          left: tabRect.left - listRect.left,
+          opacity: 1,
+        });
+      }
+    };
+
+    // Initial position
+    updateIndicator();
+
+    // Use MutationObserver to detect when active tab changes
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'data-state') {
+          updateIndicator();
+          break;
+        }
+      }
+    });
+
+    // Observe all trigger elements for data-state changes
+    const triggers = listElement.querySelectorAll('[role="tab"]');
+    triggers.forEach((trigger) => {
+      observer.observe(trigger, { attributes: true, attributeFilter: ['data-state'] });
+    });
+
+    // Also update on resize
+    const resizeObserver = new ResizeObserver(updateIndicator);
+    resizeObserver.observe(listElement);
+
+    return () => {
+      observer.disconnect();
+      resizeObserver.disconnect();
+    };
+  }, [children]);
+
+  return (
+    <TabsPrimitive.List
+      ref={(node) => {
+        // Handle both refs
+        (listRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      }}
+      className={cn(
+        'relative inline-flex h-10 items-center justify-center rounded-full px-1 text-muted-foreground',
+        // Consistent bg-default matches Button secondary variant for toolbar harmony
+        'bg-default dark:bg-[var(--color-default-on-surface)]',
+        className
+      )}
+      {...props}
+    >
+      {/* Animated sliding indicator. In dark mode the previous `bg-muted`
+          value resolved to the same color as `bg-default` on the container,
+          so the active tab was invisible without relying purely on
+          shadow-md. `bg-popover` lands ~0.08 lightness above `bg-default`
+          in dark mode for a clearly visible elevation. */}
+      <span
+        className="absolute top-1/2 -translate-y-1/2 rounded-full bg-surface dark:bg-popover shadow-md transition-[left,width,opacity]"
+        style={{
+          ...indicatorStyle,
+          transitionDuration: '350ms',
+          transitionTimingFunction: 'cubic-bezier(0.22, 1, 0.36, 1)',
+        }}
+        aria-hidden="true"
+      />
+      {children}
+    </TabsPrimitive.List>
+  );
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+interface TabsTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, 'value'> {
+  // HeroUI uses 'id' for tab identification, Radix uses 'value'
+  // At least one must be provided
+  id?: string;
+  value?: string;
+}
+
+const TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>(
+  ({ className, id, value, ...props }, ref) => {
+    const { variant: surfaceVariant } = useSurface();
+    const isOnSurface = surfaceVariant === 'default' || surfaceVariant === 'secondary';
+
+    return (
+      <TabsPrimitive.Trigger
+        ref={ref}
+        value={id ?? value ?? ''}
+        className={cn(
+          'relative z-10 inline-flex h-8 items-center justify-center gap-2 whitespace-nowrap rounded-full px-4 text-sm font-label',
+          'transition-[color,opacity]',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2',
+          'disabled:pointer-events-none disabled:opacity-50',
+          'data-[state=active]:text-foreground data-[state=active]:opacity-100',
+          // Inactive tabs use element opacity (not color opacity) to avoid SVG path overlap issues
+          isOnSurface
+            ? 'data-[state=inactive]:text-foreground data-[state=inactive]:opacity-30 data-[state=inactive]:hover:opacity-50'
+            : 'data-[state=inactive]:text-foreground data-[state=inactive]:opacity-50 data-[state=inactive]:hover:opacity-70',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+interface TabsContentProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, 'value'> {
+  // HeroUI uses 'id' for panel identification, Radix uses 'value'
+  // At least one must be provided
+  id?: string;
+  value?: string;
+}
+
+const TabsContent = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Content>, TabsContentProps>(
+  ({ className, id, value, ...props }, ref) => (
+    <TabsPrimitive.Content
+      ref={ref}
+      value={id ?? value ?? ''}
+      className={cn(
+        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+// HeroUI ListContainer - wrapper for the tabs list (passthrough div)
+const TabsListContainer = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={className} {...props} />
+);
+TabsListContainer.displayName = 'TabsListContainer';
+
+// HeroUI Tab - alias for TabsTrigger
+const TabsTab = TabsTrigger;
+
+// HeroUI Panel - alias for TabsContent
+const TabsPanel = TabsContent;
+
+// HeroUI Indicator - now rendered automatically by TabsList, this is a no-op
+const TabsIndicator = () => null;
+
+// Create compound component with all aliases
+const TabsBase = TabsRoot;
+
+// HeroUI-compatible compound component
+const Tabs = Object.assign(TabsBase, {
+  List: TabsList,
+  ListContainer: TabsListContainer,
+  Tab: TabsTab,
+  Trigger: TabsTrigger,
+  Panel: TabsPanel,
+  Content: TabsContent,
+  Indicator: TabsIndicator,
+});
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsRoot };

package/src/primitives/text-field.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../lib/utils';
+
+export interface TextFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Accessible label for the input.
+   * If not provided via children, use aria-label on the div.
+   */
+  'aria-label'?: string;
+  /**
+   * Error state - applies error styling to children inputs
+   */
+  isInvalid?: boolean;
+  /**
+   * Disabled state - disables all children inputs
+   */
+  disabled?: boolean;
+  /**
+   * Required state - marks all children inputs as required
+   */
+  required?: boolean;
+}
+
+/**
+ * TextField - A wrapper component that groups Label and Input together.
+ *
+ * Groups Label and Input with a convenient wrapper that can propagate
+ * disabled, required, and invalid states to child inputs.
+ *
+ * @example
+ * ```tsx
+ * <TextField>
+ *   <Label>Email</Label>
+ *   <Input type="email" placeholder="Enter email..." />
+ * </TextField>
+ * ```
+ */
+const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>(
+  ({ className, children, isInvalid, disabled, required, ...props }, ref) => {
+    // Clone children to pass through state props to Input/Textarea children
+    const enhancedChildren = React.Children.map(children, (child) => {
+      if (!React.isValidElement(child)) return child;
+
+      // Get the display name or type name to check if it's an input component
+      const childType = child.type;
+      const displayName =
+        typeof childType === 'function'
+          ? (childType as React.ComponentType).displayName || childType.name
+          : typeof childType === 'string'
+            ? childType
+            : '';
+
+      // Check if this is an input-like element that should receive state props
+      const isInputElement =
+        displayName === 'Input' ||
+        displayName === 'Textarea' ||
+        displayName === 'TextArea' ||
+        displayName === 'input' ||
+        displayName === 'textarea';
+
+      if (isInputElement) {
+        const childProps = child.props as Record<string, unknown>;
+        return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {
+          isInvalid: (childProps.isInvalid as boolean) ?? isInvalid,
+          disabled: (childProps.disabled as boolean) ?? disabled,
+          required: (childProps.required as boolean) ?? required,
+        });
+      }
+
+      return child;
+    });
+
+    return (
+      <div ref={ref} className={cn('flex flex-col gap-1.5', className)} {...props}>
+        {enhancedChildren}
+      </div>
+    );
+  }
+);
+TextField.displayName = 'TextField';
+
+export { TextField };

package/src/primitives/textarea.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../lib/utils';
+import { useSurface } from './surface';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Whether the textarea is in an invalid state */
+  isInvalid?: boolean;
+  /** Visual variant - auto-detected from Surface context, or can be set explicitly */
+  variant?: 'default' | 'filled';
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, isInvalid, disabled, readOnly, required, variant, ...props }, ref) => {
+    // Auto-detect variant from Surface context
+    const surface = useSurface();
+    const effectiveVariant = variant ?? (surface.variant === 'default' ? 'filled' : 'default');
+
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[80px] w-full rounded-input px-2.5 py-2 text-sm transition-colors',
+          'text-foreground border-none',
+          'placeholder:text-foreground/50',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus',
+          '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)]',
+          isInvalid && 'ring-2 ring-danger focus-visible:ring-danger',
+          className
+        )}
+        ref={ref}
+        disabled={disabled}
+        readOnly={readOnly}
+        required={required}
+        aria-invalid={isInvalid}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+// Alias for HeroUI compatibility (HeroUI uses TextArea, Shadcn uses Textarea)
+const TextArea = Textarea;
+TextArea.displayName = 'TextArea';
+
+export { Textarea, TextArea };

package/src/primitives/tooltip.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '../lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const TooltipRoot = 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.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-tooltip overflow-hidden rounded-tooltip bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 font-caption',
+        '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}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// HeroUI-compatible compound component
+interface TooltipProps {
+  children: React.ReactNode;
+  delayDuration?: number;
+  skipDelayDuration?: number;
+  disableHoverableContent?: boolean;
+  // HeroUI compatibility props
+  delay?: number;
+  closeDelay?: number;
+}
+
+const TooltipBase = ({ children, delayDuration, delay, ...props }: TooltipProps) => (
+  <TooltipProvider>
+    <TooltipRoot delayDuration={delay ?? delayDuration ?? 200} {...props}>
+      {children}
+    </TooltipRoot>
+  </TooltipProvider>
+);
+
+// HeroUI-compatible compound component with .Trigger and .Content
+const Tooltip = Object.assign(TooltipBase, {
+  Trigger: TooltipTrigger,
+  Content: TooltipContent,
+});
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipRoot };