@snowcone-app/ui 0.1.43 → 0.2.0

package/src/primitives/slider.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+'use client';
+
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { cn } from '../lib/utils';
+
+interface SliderProps
+  extends Omit<
+    React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,
+    'value' | 'onValueChange'
+  > {
+  // Accepts both array and single number for convenience
+  value?: number | number[];
+  onValueChange?: (value: number[]) => void;
+  onChangeEnd?: (value: number[]) => void;
+  children?: React.ReactNode;
+}
+
+// Context for passing slider state to compound components
+interface SliderContextValue {
+  values: number[];
+  min: number;
+  max: number;
+}
+const SliderContext = React.createContext<SliderContextValue | null>(null);
+
+// HeroUI-compatible compound components
+const SliderTrack = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, children, ...props }, ref) => (
+    <SliderPrimitive.Track
+      ref={ref}
+      className={cn('relative h-2 w-full grow overflow-hidden rounded-full bg-muted', className)}
+      {...props}
+    >
+      {children}
+    </SliderPrimitive.Track>
+  )
+);
+SliderTrack.displayName = 'SliderTrack';
+
+const SliderThumb = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, ...props }, ref) => (
+    <SliderPrimitive.Thumb
+      ref={ref}
+      // Base thumb size: h-6 w-6 (24px), touch devices can override via CSS to 32-36px
+      className={cn(
+        'relative block h-6 w-6 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+SliderThumb.displayName = 'SliderThumb';
+
+// HeroUI Fill component - displays the filled range portion
+const SliderFill = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, ...props }, ref) => (
+    <SliderPrimitive.Range ref={ref} className={cn('absolute h-full bg-primary', className)} {...props} />
+  )
+);
+SliderFill.displayName = 'SliderFill';
+
+// HeroUI Output component - renders current value(s)
+interface SliderOutputProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+  children?: React.ReactNode | ((props: { state: { values: number[] } }) => React.ReactNode);
+}
+
+const SliderOutput = React.forwardRef<HTMLSpanElement, SliderOutputProps>(
+  ({ className, children, ...props }, ref) => {
+    const context = React.useContext(SliderContext);
+    const values = context?.values ?? [0];
+
+    return (
+      <span ref={ref} className={cn('text-sm text-foreground/60', className)} {...props}>
+        {typeof children === 'function'
+          ? children({ state: { values } })
+          : children ?? values.join(' - ')}
+      </span>
+    );
+  }
+);
+SliderOutput.displayName = 'SliderOutput';
+
+const SliderBase = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
+  (
+    {
+      className,
+      value,
+      onValueChange,
+      onChangeEnd,
+      min = 0,
+      max = 100,
+      step = 1,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    // Normalize value to array (accepts both single number and array for convenience)
+    const normalizedValue = value !== undefined ? (Array.isArray(value) ? value : [value]) : undefined;
+
+    // Track internal value for context
+    const [internalValue, setInternalValue] = React.useState(normalizedValue ?? [min]);
+
+    // Track if we're currently dragging (for iOS body scroll prevention)
+    const isDraggingRef = React.useRef(false);
+    const touchMoveHandlerRef = React.useRef<((e: TouchEvent) => void) | null>(null);
+
+    // Prevent scroll during drag - added to document on pointer down, removed on pointer up
+    const preventScroll = React.useCallback((e: TouchEvent) => {
+      if (isDraggingRef.current) {
+        e.preventDefault();
+      }
+    }, []);
+
+    const handleChange = (newValue: number[]) => {
+      // Mark as actively dragging once value changes
+      isDraggingRef.current = true;
+      setInternalValue(newValue);
+      onValueChange?.(newValue);
+    };
+
+    const handleChangeEnd = (newValue: number[]) => {
+      isDraggingRef.current = false;
+      onChangeEnd?.(newValue);
+    };
+
+    // Handle pointer down - add document-level touchmove prevention
+    const handlePointerDown = React.useCallback(() => {
+      // Add touchmove listener to document to intercept scroll during drag
+      if (!touchMoveHandlerRef.current) {
+        touchMoveHandlerRef.current = preventScroll;
+        document.addEventListener('touchmove', preventScroll, { passive: false });
+      }
+    }, [preventScroll]);
+
+    // Handle pointer up/cancel - remove document listener
+    const handlePointerUp = React.useCallback(() => {
+      isDraggingRef.current = false;
+      if (touchMoveHandlerRef.current) {
+        document.removeEventListener('touchmove', touchMoveHandlerRef.current);
+        touchMoveHandlerRef.current = null;
+      }
+    }, []);
+
+    // Cleanup on unmount
+    React.useEffect(() => {
+      return () => {
+        if (touchMoveHandlerRef.current) {
+          document.removeEventListener('touchmove', touchMoveHandlerRef.current);
+        }
+      };
+    }, []);
+
+    // Check if children are provided (compound pattern)
+    const hasChildren = React.Children.count(children) > 0;
+
+    // Determine number of thumbs based on value array length or defaultValue
+    const thumbCount = normalizedValue?.length ?? props.defaultValue?.length ?? 1;
+
+    // Context value for compound components
+    const contextValue = React.useMemo(
+      () => ({
+        values: normalizedValue ?? internalValue,
+        min,
+        max,
+      }),
+      [normalizedValue, internalValue, min, max]
+    );
+
+    return (
+      <SliderContext.Provider value={contextValue}>
+        <SliderPrimitive.Root
+          ref={ref}
+          className={cn('relative flex w-full touch-none select-none items-center', className)}
+          value={normalizedValue}
+          onValueChange={handleChange}
+          onValueCommit={handleChangeEnd}
+          onPointerDown={handlePointerDown}
+          onPointerUp={handlePointerUp}
+          onPointerCancel={handlePointerUp}
+          onLostPointerCapture={handlePointerUp}
+          min={min}
+          max={max}
+          step={step}
+          {...props}
+        >
+          {hasChildren ? (
+            children
+          ) : (
+            <>
+              <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-muted">
+                <SliderPrimitive.Range className="absolute h-full bg-primary" />
+              </SliderPrimitive.Track>
+              {Array.from({ length: thumbCount }).map((_, index) => (
+                <SliderPrimitive.Thumb
+                  key={index}
+                  className="relative block h-6 w-6 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+                />
+              ))}
+            </>
+          )}
+        </SliderPrimitive.Root>
+      </SliderContext.Provider>
+    );
+  }
+);
+SliderBase.displayName = SliderPrimitive.Root.displayName;
+
+// Compound component with sub-components
+const Slider = Object.assign(SliderBase, {
+  Track: SliderTrack,
+  Thumb: SliderThumb,
+  Fill: SliderFill,
+  Output: SliderOutput,
+});
+
+export { Slider, SliderTrack, SliderThumb, SliderFill, SliderOutput };

package/src/primitives/spinner.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../lib/utils';
+
+const spinnerVariants = cva('pointer-events-none relative origin-center animate-spin size-6 text-primary', {
+  variants: {
+    size: {
+      sm: 'size-4',
+      md: 'size-6',
+      lg: 'size-8',
+      xl: 'size-10',
+    },
+    color: {
+      primary: 'text-primary',
+      secondary: 'text-foreground/60',
+      success: 'text-success',
+      warning: 'text-warning',
+      danger: 'text-danger',
+      current: 'text-current',
+    },
+  },
+});
+
+export interface SpinnerProps
+  extends Omit<React.ComponentProps<'span'>, 'color'>,
+    VariantProps<typeof spinnerVariants> {
+  /** Label for screen readers */
+  label?: string;
+}
+
+function Spinner({ className, size, color, label = 'Loading', ...props }: SpinnerProps) {
+  const id = React.useId();
+
+  return (
+    <span
+      role="status"
+      aria-label={label}
+      className={cn(spinnerVariants({ size, color }), className)}
+      {...props}
+    >
+      <svg viewBox="0 0 24 24" className="size-full" aria-hidden>
+        <defs>
+          <linearGradient id={`spinner-grad-1-${id}`} x1="50%" x2="50%" y1="5.271%" y2="91.793%">
+            <stop offset="0%" stopColor="currentColor" />
+            <stop offset="100%" stopColor="currentColor" stopOpacity={0.55} />
+          </linearGradient>
+          <linearGradient id={`spinner-grad-2-${id}`} x1="50%" x2="50%" y1="15.24%" y2="87.15%">
+            <stop offset="0%" stopColor="currentColor" stopOpacity={0} />
+            <stop offset="100%" stopColor="currentColor" stopOpacity={0.55} />
+          </linearGradient>
+        </defs>
+        <g fill="none">
+          <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+          <path
+            d="M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021"
+            fill={`url(#spinner-grad-1-${id})`}
+            transform="translate(1.5 1.625)"
+          />
+          <path
+            d="M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118"
+            fill={`url(#spinner-grad-2-${id})`}
+            transform="translate(1.5 1.625)"
+          />
+        </g>
+      </svg>
+    </span>
+  );
+}
+
+export { Spinner, spinnerVariants };

package/src/primitives/stories/Accordion.stories.tsx

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../accordion';
+
+const meta = {
+  title: 'UI/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Default: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-[400px]">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that match your theme.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It has smooth expand/collapse animations using CSS keyframes.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <Accordion type="multiple" className="w-[400px]">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
+        <AccordionContent>
+          Yes! When using type="multiple", you can have multiple items open at once.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>How does it work?</AccordionTrigger>
+        <AccordionContent>
+          Just set the type prop to "multiple" instead of "single".
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>What about collapsible?</AccordionTrigger>
+        <AccordionContent>
+          The collapsible prop only applies to type="single" accordions.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const DefaultOpen: Story = {
+  render: () => (
+    <Accordion type="single" defaultValue="item-2" collapsible className="w-[400px]">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>First Section</AccordionTrigger>
+        <AccordionContent>Content for the first section.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Second Section (Default Open)</AccordionTrigger>
+        <AccordionContent>
+          This section is open by default because of the defaultValue prop.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Third Section</AccordionTrigger>
+        <AccordionContent>Content for the third section.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const FAQ: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <h2 className="text-xl font-heading mb-4">Frequently Asked Questions</h2>
+      <Accordion type="single" collapsible>
+        <AccordionItem value="q1">
+          <AccordionTrigger>What payment methods do you accept?</AccordionTrigger>
+          <AccordionContent>
+            We accept all major credit cards (Visa, MasterCard, American Express), PayPal,
+            and bank transfers for larger orders.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="q2">
+          <AccordionTrigger>How long does shipping take?</AccordionTrigger>
+          <AccordionContent>
+            Standard shipping takes 5-7 business days. Express shipping (2-3 days) is
+            available for an additional fee. International orders may take 10-14 days.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="q3">
+          <AccordionTrigger>What is your return policy?</AccordionTrigger>
+          <AccordionContent>
+            We offer a 30-day return policy for all unused items in their original
+            packaging. Custom orders are final sale and cannot be returned.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="q4">
+          <AccordionTrigger>Do you offer wholesale pricing?</AccordionTrigger>
+          <AccordionContent>
+            Yes! We offer wholesale pricing for orders of 50+ units. Please contact our
+            sales team at wholesale@example.com for more information.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  ),
+};

package/src/primitives/stories/Badge.stories.tsx

@@ -0,0 +1,221 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon } from '@iconify/react';
+import { Badge, Chip } from '../badge';
+import { Surface } from '../surface';
+
+const meta: Meta<typeof Badge> = {
+  title: 'UI/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'secondary', 'destructive', 'success', 'warning', 'outline', 'gradient'],
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm', 'lg'],
+    },
+    color: {
+      control: 'select',
+      options: ['default', 'primary', 'secondary', 'success', 'warning', 'danger'],
+      description: 'HeroUI Chip compatibility prop',
+    },
+    dot: {
+      control: 'boolean',
+    },
+    startContent: { control: false },
+    endContent: { control: false },
+    onClose: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Badge',
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="outline">Outline</Badge>
+      <Badge variant="gradient">Gradient</Badge>
+    </div>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Badge size="sm">Small</Badge>
+      <Badge size="default">Default</Badge>
+      <Badge size="lg">Large</Badge>
+    </div>
+  ),
+};
+
+export const WithDot: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge variant="default" dot>
+        Active
+      </Badge>
+      <Badge variant="success" dot>
+        Online
+      </Badge>
+      <Badge variant="warning" dot>
+        Pending
+      </Badge>
+      <Badge variant="destructive" dot>
+        Offline
+      </Badge>
+    </div>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge startContent={<Icon icon="gravity-ui:check" className="size-3" />}>Verified</Badge>
+      <Badge endContent={<Icon icon="gravity-ui:arrow-right" className="size-3" />}>Next</Badge>
+      <Badge
+        variant="success"
+        startContent={<Icon icon="gravity-ui:circle-check-fill" className="size-3" />}
+      >
+        Completed
+      </Badge>
+    </div>
+  ),
+};
+
+export const Dismissible: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge onClose={() => alert('Dismissed!')}>Dismissible</Badge>
+      <Badge variant="secondary" onClose={() => alert('Dismissed!')}>
+        Click X to close
+      </Badge>
+      <Badge variant="success" onClose={() => alert('Dismissed!')}>
+        Success
+      </Badge>
+    </div>
+  ),
+};
+
+export const HeroUIColorProp: Story = {
+  name: 'HeroUI Color Prop (Chip)',
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Chip color="default">Default</Chip>
+      <Chip color="primary">Primary</Chip>
+      <Chip color="secondary">Secondary</Chip>
+      <Chip color="success">Success</Chip>
+      <Chip color="warning">Warning</Chip>
+      <Chip color="danger">Danger</Chip>
+    </div>
+  ),
+};
+
+export const StatusBadges: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-foreground/70 w-20">Order:</span>
+        <Badge variant="success" dot>
+          Shipped
+        </Badge>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-foreground/70 w-20">Payment:</span>
+        <Badge variant="warning" dot>
+          Pending
+        </Badge>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-foreground/70 w-20">Status:</span>
+        <Badge variant="destructive" dot>
+          Cancelled
+        </Badge>
+      </div>
+    </div>
+  ),
+};
+
+export const TagList: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2 max-w-sm">
+      {['React', 'TypeScript', 'Tailwind', 'Radix UI', 'Storybook'].map((tag) => (
+        <Badge key={tag} variant="secondary" onClose={() => console.log(`Remove ${tag}`)}>
+          {tag}
+        </Badge>
+      ))}
+    </div>
+  ),
+};
+
+export const OnSurfaces: Story = {
+  name: 'Surface Awareness',
+  parameters: {
+    layout: 'padded',
+  },
+  render: () => (
+    <div className="space-y-8">
+      {/* On transparent background (page) */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-muted-foreground">On Page Background (transparent)</h3>
+        <Surface variant="transparent" className="p-4 rounded-lg border border-dashed border-border">
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="default">Default</Badge>
+            <Badge variant="secondary">Secondary</Badge>
+            <Badge variant="outline">Outline</Badge>
+            <Badge variant="destructive">Destructive</Badge>
+            <Badge variant="success">Success</Badge>
+            <Badge variant="warning">Warning</Badge>
+          </div>
+        </Surface>
+      </div>
+
+      {/* On default surface (card) */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-muted-foreground">On Surface (card)</h3>
+        <Surface variant="default" className="p-4 rounded-lg">
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="default">Default</Badge>
+            <Badge variant="secondary">Secondary</Badge>
+            <Badge variant="outline">Outline</Badge>
+            <Badge variant="destructive">Destructive</Badge>
+            <Badge variant="success">Success</Badge>
+            <Badge variant="warning">Warning</Badge>
+          </div>
+        </Surface>
+      </div>
+
+      {/* On secondary surface */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-muted-foreground">On Secondary Surface</h3>
+        <Surface variant="secondary" className="p-4 rounded-lg">
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="default">Default</Badge>
+            <Badge variant="secondary">Secondary</Badge>
+            <Badge variant="outline">Outline</Badge>
+            <Badge variant="destructive">Destructive</Badge>
+            <Badge variant="success">Success</Badge>
+            <Badge variant="warning">Warning</Badge>
+          </div>
+        </Surface>
+      </div>
+    </div>
+  ),
+};