@snowcone-app/ui 0.1.42 → 0.2.0

package/src/primitives/link.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../lib/utils';
+
+const linkVariants = cva(
+  [
+    'inline-flex items-center gap-1 font-medium 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',
+    'aria-disabled:pointer-events-none aria-disabled:opacity-50',
+  ],
+  {
+    variants: {
+      color: {
+        default: 'text-foreground hover:text-foreground/80',
+        primary: 'text-primary hover:text-primary/80',
+        secondary: 'text-secondary hover:text-secondary/80',
+        success: 'text-success hover:text-success/80',
+        warning: 'text-warning hover:text-warning/80',
+        danger: 'text-danger hover:text-danger/80',
+      },
+      size: {
+        sm: 'text-sm',
+        md: 'text-base',
+        lg: 'text-lg',
+      },
+      underline: {
+        none: '',
+        hover: [
+          'relative',
+          'after:absolute after:bottom-0 after:left-0 after:h-[1px] after:w-full',
+          'after:origin-bottom-right after:scale-x-0',
+          'after:bg-current after:transition-transform after:duration-200',
+          'hover:after:origin-bottom-left hover:after:scale-x-100',
+        ],
+        always: [
+          'relative',
+          'after:absolute after:bottom-0 after:left-0 after:h-[1px] after:w-full',
+          'after:bg-current after:opacity-50',
+          'hover:after:opacity-100',
+        ],
+      },
+      underlineOffset: {
+        1: 'after:bottom-0',
+        2: 'after:-bottom-0.5',
+        3: 'after:-bottom-1',
+      },
+    },
+    defaultVariants: {
+      color: 'primary',
+      size: 'md',
+      underline: 'hover',
+      underlineOffset: 1,
+    },
+  }
+);
+
+export interface LinkProps
+  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'>,
+    VariantProps<typeof linkVariants> {
+  /**
+   * If true, the link will be rendered as its child element (using Radix Slot).
+   * Useful for integrating with routing libraries like Next.js Link.
+   */
+  asChild?: boolean;
+  /**
+   * If true, adds an external link icon.
+   */
+  isExternal?: boolean;
+  /**
+   * If true, shows a block-style link (full width with padding).
+   */
+  isBlock?: boolean;
+}
+
+/**
+ * Link - A styled anchor component for navigation.
+ *
+ * Supports animated underlines, external link indicators, and integration
+ * with routing libraries via the asChild prop.
+ *
+ * @example
+ * ```tsx
+ * <Link href="/about">About</Link>
+ * <Link href="https://example.com" isExternal>External Link</Link>
+ * <Link asChild underline="hover">
+ *   <NextLink href="/dashboard">Dashboard</NextLink>
+ * </Link>
+ * ```
+ */
+const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  (
+    {
+      className,
+      color,
+      size,
+      underline,
+      underlineOffset,
+      asChild = false,
+      isExternal = false,
+      isBlock = false,
+      children,
+      target,
+      rel,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : 'a';
+
+    // Handle external links
+    const externalProps = isExternal
+      ? {
+          target: target ?? '_blank',
+          rel: rel ?? 'noopener noreferrer',
+        }
+      : { target, rel };
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          linkVariants({ color, size, underline, underlineOffset }),
+          isBlock && 'w-full justify-start rounded-md px-3 py-2 hover:bg-muted',
+          className
+        )}
+        {...externalProps}
+        {...props}
+      >
+        {children}
+        {isExternal && <LinkIcon />}
+      </Comp>
+    );
+  }
+);
+Link.displayName = 'Link';
+
+/**
+ * LinkIcon - External link indicator icon.
+ *
+ * Used automatically when isExternal is true, or can be used manually.
+ */
+interface LinkIconProps extends React.SVGAttributes<SVGElement> {
+  /**
+   * If true, renders as child element using Slot.
+   */
+  asChild?: boolean;
+}
+
+const LinkIcon = React.forwardRef<SVGSVGElement, LinkIconProps>(
+  ({ className, asChild = false, children, ...props }, ref) => {
+    if (asChild && children) {
+      return <Slot className={cn('size-3.5 shrink-0', className)}>{children}</Slot>;
+    }
+
+    return (
+      <svg
+        ref={ref}
+        className={cn('size-3.5 shrink-0', className)}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        {...props}
+      >
+        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+        <polyline points="15 3 21 3 21 9" />
+        <line x1="10" y1="14" x2="21" y2="3" />
+      </svg>
+    );
+  }
+);
+LinkIcon.displayName = 'LinkIcon';
+
+export { Link, LinkIcon, linkVariants };

package/src/primitives/popover.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '../lib/utils';
+import { SurfaceContext } from './surface';
+
+const PopoverRoot = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
+  /** Preserve text selection when popover opens (useful for canvas/editor contexts) */
+  preserveSelection?: boolean;
+  /** Use maximum z-index to appear above fullscreen modals (for canvas/editor contexts) */
+  maxZIndex?: boolean;
+}
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  PopoverContentProps
+>(({ className, align = 'center', sideOffset = 4, preserveSelection, maxZIndex, children, style, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <SurfaceContext.Provider value={{ variant: 'default' }}>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        data-preserve-selection={preserveSelection ? '' : undefined}
+        className={cn(
+          'z-dropdown w-72 overflow-hidden rounded-tooltip border-none bg-popover p-4 text-popover-foreground shadow-soft outline-none',
+          '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=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
+        )}
+        style={maxZIndex ? { ...style, zIndex: 2147483647 } : style}
+        {...props}
+      >
+        {children}
+      </PopoverPrimitive.Content>
+    </SurfaceContext.Provider>
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+interface PopoverProps {
+  children: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+  modal?: boolean;
+}
+
+const PopoverBase = ({ children, open, onOpenChange, ...props }: PopoverProps) => (
+  <PopoverRoot open={open} onOpenChange={onOpenChange} {...props}>
+    {children}
+  </PopoverRoot>
+);
+
+// Compound component with subcomponents
+const Popover = Object.assign(PopoverBase, {
+  Trigger: PopoverTrigger,
+  Content: PopoverContent,
+  Anchor: PopoverAnchor,
+  // HeroUI uses Dialog for the content wrapper - map to Content
+  Dialog: React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ children, className, ...props }, ref) => (
+      <div ref={ref} className={className} {...props}>
+        {children}
+      </div>
+    )
+  ),
+});
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverRoot };

package/src/primitives/radio-group.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { cn } from '../lib/utils';
+import { useSurface } from './surface';
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />
+));
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
+  /** Visual variant - auto-detected from Surface context, or can be set explicitly */
+  variant?: 'default' | 'filled';
+}
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  RadioGroupItemProps
+>(({ className, variant, ...props }, ref) => {
+  // Auto-detect variant from Surface context
+  const surface = useSurface();
+  const effectiveVariant = variant ?? (surface.variant === 'default' ? 'filled' : 'default');
+
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'aspect-square size-4 rounded-full border-none transition-colors',
+        '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]:shadow-none',
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <div className="size-1.5 rounded-full bg-primary-foreground" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+// Radio component - wraps RadioGroupItem with label pattern
+interface RadioProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
+  children?: React.ReactNode;
+  /** Visual variant - auto-detected from Surface context, or can be set explicitly */
+  variant?: 'default' | 'filled';
+}
+
+const Radio = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, RadioProps>(
+  ({ children, className, variant, ...props }, ref) => {
+    if (children) {
+      return (
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem ref={ref} variant={variant} {...props} />
+          <label
+            htmlFor={props.id}
+            className="text-sm leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70 font-label"
+          >
+            {children}
+          </label>
+        </div>
+      );
+    }
+    return <RadioGroupItem ref={ref} className={className} variant={variant} {...props} />;
+  }
+);
+Radio.displayName = 'Radio';
+
+export { RadioGroup, RadioGroupItem, Radio };

package/src/primitives/scroll-fade.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * ScrollFade Component
+ *
+ * A container that shows a gradient fade at the bottom when content is scrollable,
+ * indicating there's more content below. The gradient fades out when the user
+ * scrolls to the bottom.
+ *
+ * @example Basic usage
+ * <ScrollFade className="h-[400px]">
+ *   <div className="space-y-4">
+ *     {items.map(item => <Card key={item.id}>{item.content}</Card>)}
+ *   </div>
+ * </ScrollFade>
+ *
+ * @example With custom fade color
+ * <ScrollFade fadeColor="rgb(0, 0, 0)" className="h-full bg-black">
+ *   <DarkModeContent />
+ * </ScrollFade>
+ *
+ * @example Disabled fade
+ * <ScrollFade showFade={false}>
+ *   <Content />
+ * </ScrollFade>
+ */
+
+interface ScrollFadeProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Whether to show the gradient fade. Default: true */
+  showFade?: boolean;
+  /** Height of the gradient fade in pixels or CSS value. Default: 80 */
+  fadeHeight?: number | string;
+  /** Color for the gradient fade. Should match the container background. Default: uses CSS variable */
+  fadeColor?: string;
+  /** Additional class for the scroll container */
+  scrollClassName?: string;
+  /** Threshold in pixels from bottom to consider "at bottom". Default: 20 */
+  bottomThreshold?: number;
+  /** Callback when scroll position changes */
+  onScrollChange?: (info: { isAtBottom: boolean; isAtTop: boolean; scrollTop: number }) => void;
+}
+
+const ScrollFade = React.forwardRef<HTMLDivElement, ScrollFadeProps>(
+  (
+    {
+      className,
+      children,
+      showFade = true,
+      fadeHeight = 80,
+      fadeColor,
+      scrollClassName,
+      bottomThreshold = 20,
+      onScrollChange,
+      ...props
+    },
+    ref
+  ) => {
+    const [isAtBottom, setIsAtBottom] = React.useState(false);
+    const [isAtTop, setIsAtTop] = React.useState(true);
+    // Default to true - will be corrected after layout check
+    const [hasOverflow, setHasOverflow] = React.useState(true);
+    const scrollRef = React.useRef<HTMLDivElement>(null);
+
+    // Check if content overflows on mount and resize
+    React.useEffect(() => {
+      const checkOverflow = () => {
+        if (scrollRef.current) {
+          const hasScroll = scrollRef.current.scrollHeight > scrollRef.current.clientHeight;
+          setHasOverflow(hasScroll);
+          // If no overflow, we're at bottom
+          if (!hasScroll) {
+            setIsAtBottom(true);
+          } else {
+            // Check initial scroll position
+            const atBottom = scrollRef.current.scrollHeight - scrollRef.current.scrollTop - scrollRef.current.clientHeight < bottomThreshold;
+            setIsAtBottom(atBottom);
+          }
+        }
+      };
+
+      // Initial check after a short delay to ensure layout is complete
+      checkOverflow();
+      const timeoutId = setTimeout(checkOverflow, 100);
+
+      // Re-check on resize
+      const resizeObserver = new ResizeObserver(checkOverflow);
+      if (scrollRef.current) {
+        resizeObserver.observe(scrollRef.current);
+      }
+
+      return () => {
+        clearTimeout(timeoutId);
+        resizeObserver.disconnect();
+      };
+    }, [children, bottomThreshold]);
+
+    const handleScroll = React.useCallback(
+      (e: React.UIEvent<HTMLDivElement>) => {
+        const target = e.target as HTMLDivElement;
+        const scrollTop = target.scrollTop;
+        const atBottom =
+          target.scrollHeight - scrollTop - target.clientHeight < bottomThreshold;
+        const atTop = scrollTop < bottomThreshold;
+
+        setIsAtBottom(atBottom);
+        setIsAtTop(atTop);
+        onScrollChange?.({ isAtBottom: atBottom, isAtTop: atTop, scrollTop });
+      },
+      [bottomThreshold, onScrollChange]
+    );
+
+    const fadeHeightValue = typeof fadeHeight === "number" ? `${fadeHeight}px` : fadeHeight;
+
+    return (
+      <div
+        ref={ref}
+        className={cn("relative overflow-hidden min-h-0", className)}
+        {...props}
+      >
+        <div
+          ref={scrollRef}
+          className={cn("absolute inset-0 overflow-y-auto", scrollClassName)}
+          style={{
+            WebkitOverflowScrolling: "touch",
+            overscrollBehavior: "contain",
+          }}
+          onScroll={handleScroll}
+        >
+          {children}
+        </div>
+
+        {/* Gradient fade - hides when scrolled to bottom or no overflow */}
+        {showFade && (
+          <div
+            className={cn(
+              "absolute bottom-0 left-0 right-0 pointer-events-none transition-opacity duration-300 z-10",
+              isAtBottom || !hasOverflow ? "opacity-0" : "opacity-100",
+              !fadeColor && "bg-gradient-to-t from-background to-transparent"
+            )}
+            style={{
+              height: fadeHeightValue,
+              ...(fadeColor && {
+                background: `linear-gradient(to top, ${fadeColor}, transparent)`,
+              }),
+            }}
+            aria-hidden="true"
+          />
+        )}
+      </div>
+    );
+  }
+);
+ScrollFade.displayName = "ScrollFade";
+
+export { ScrollFade };
+export type { ScrollFadeProps };

package/src/primitives/select.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Icon } from '@iconify/react';
+import { cn } from '../lib/utils';
+import { useSurface } from './surface';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+  /** Visual variant - auto-detected from Surface context, or can be set explicitly */
+  variant?: 'default' | 'filled';
+}
+
+const SelectTrigger = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Trigger>, SelectTriggerProps>(
+  ({ className, children, variant, ...props }, ref) => {
+    // Auto-detect variant from Surface context
+    const surface = useSurface();
+    const effectiveVariant = variant ?? (surface.variant === 'default' ? 'filled' : 'default');
+
+    return (
+      <SelectPrimitive.Trigger
+        ref={ref}
+        className={cn(
+          'flex h-9 w-full items-center justify-between gap-2 rounded-input px-2.5 py-1.5 text-sm transition-colors',
+          'text-foreground border-none',
+          'focus:ring-focus focus:ring-2 focus:outline-none',
+          'disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+          // Placeholder styling (Radix adds data-placeholder attribute to trigger)
+          'data-[placeholder]:text-foreground/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)]',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SelectPrimitive.Icon asChild>
+          <Icon
+            icon="gravity-ui:chevron-down"
+            className="text-foreground/40 size-4 transition-transform duration-200 ease-out [[data-state=open]>&]:rotate-180"
+          />
+        </SelectPrimitive.Icon>
+      </SelectPrimitive.Trigger>
+    );
+  }
+);
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <Icon icon="gravity-ui:chevron-up" className="size-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <Icon icon="gravity-ui:chevron-down" className="size-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'z-dropdown bg-popover text-popover-foreground shadow-soft relative min-w-[8rem] overflow-hidden rounded-tooltip border-none p-1',
+        '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=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',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(position === 'popper' && 'w-full min-w-[var(--radix-select-trigger-width)]')}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('text-muted-foreground px-2 py-1.5 text-xs font-label', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default items-center rounded-full py-1 pr-8 pl-2 text-sm text-foreground outline-none select-none font-body',
+      'hover:bg-default/50 focus:bg-default/50 dark:hover:bg-white/5 dark:focus:bg-white/5 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Icon icon="gravity-ui:check" className="size-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator ref={ref} className={cn('bg-divider mx-2 my-1 h-px', className)} {...props} />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

package/src/primitives/separator.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '../lib/utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      'shrink-0 bg-divider',
+      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+      className
+    )}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };