@snowcone-app/ui 0.1.42 → 0.2.0

package/src/primitives/dropdown-menu.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Icon } from '@iconify/react';
+import { cn } from '../lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'focus:bg-default/50 dark:focus:bg-white/5 data-[state=open]:bg-default/50 dark:data-[state=open]:bg-white/5 flex cursor-default items-center gap-3 rounded-lg px-3 py-3 text-base font-medium text-foreground outline-none select-none',
+      '[&_svg]:size-5 [&_svg]:shrink-0 [&_svg]:text-foreground/60',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <Icon icon="gravity-ui:chevron-right" className="ml-auto size-5" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-[200] bg-popover text-popover-foreground min-w-[8rem] overflow-hidden rounded-2xl p-2',
+      'shadow-[0_4px_24px_-4px_rgba(0,0,0,0.15),0_0_0_1px_rgba(0,0,0,0.05)]',
+      'dark:shadow-[0_4px_24px_-4px_rgba(0,0,0,0.4),0_0_0_1px_rgba(255,255,255,0.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',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-[200] bg-popover text-popover-foreground min-w-[8rem] overflow-hidden rounded-2xl p-2',
+        'shadow-[0_4px_24px_-4px_rgba(0,0,0,0.15),0_0_0_1px_rgba(0,0,0,0.05)]',
+        'dark:shadow-[0_4px_24px_-4px_rgba(0,0,0,0.4),0_0_0_1px_rgba(255,255,255,0.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',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default items-center gap-3 rounded-lg px-3 py-3 text-base font-medium text-foreground transition-colors outline-none select-none',
+      '[&_svg]:size-5 [&_svg]:shrink-0 [&_svg]:text-foreground/60',
+      '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',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default items-center rounded-full py-1 pr-2 pl-7 text-sm transition-colors outline-none select-none',
+      '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
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Icon icon="gravity-ui:check" className="size-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default items-center rounded-full py-1 pr-2 pl-7 text-sm transition-colors outline-none select-none',
+      '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 left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Icon icon="gravity-ui:circle-fill" className="size-2" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-xs font-semibold text-muted-foreground', inset && 'pl-8', className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator ref={ref} className={cn('bg-divider mx-2 my-1 h-px', className)} {...props} />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />;
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

package/src/primitives/fieldset.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../lib/utils';
+
+export interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {}
+
+/**
+ * Fieldset - A semantic grouping element for form controls.
+ *
+ * Use this to group related form elements together with an optional legend.
+ *
+ * @example
+ * ```tsx
+ * <Fieldset>
+ *   <legend className="text-sm font-medium">Personal Info</legend>
+ *   <TextField>
+ *     <Label>Name</Label>
+ *     <Input placeholder="Enter name..." />
+ *   </TextField>
+ * </Fieldset>
+ * ```
+ */
+const Fieldset = React.forwardRef<HTMLFieldSetElement, FieldsetProps>(
+  ({ className, disabled, children, ...props }, ref) => {
+    return (
+      <fieldset
+        ref={ref}
+        disabled={disabled}
+        className={cn(
+          'flex flex-col gap-3',
+          // Disabled styles
+          disabled && 'opacity-60 cursor-not-allowed',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </fieldset>
+    );
+  }
+);
+Fieldset.displayName = 'Fieldset';
+
+export interface LegendProps extends React.HTMLAttributes<HTMLLegendElement> {}
+
+/**
+ * Legend - A caption for a fieldset.
+ *
+ * @example
+ * ```tsx
+ * <Fieldset>
+ *   <Legend>Account Settings</Legend>
+ *   ...
+ * </Fieldset>
+ * ```
+ */
+const Legend = React.forwardRef<HTMLLegendElement, LegendProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <legend
+        ref={ref}
+        className={cn('text-base text-foreground mb-3 font-heading', className)}
+        {...props}
+      >
+        {children}
+      </legend>
+    );
+  }
+);
+Legend.displayName = 'Legend';
+
+export { Fieldset, Legend };

package/src/primitives/index.ts

@@ -0,0 +1,138 @@
+// Button
+export { Button, buttonVariants } from './Button';
+export type { ButtonProps } from './Button';
+
+// Label
+export { Label } from './label';
+
+// Tooltip
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipRoot } from './tooltip';
+
+// Slider
+export { Slider } from './slider';
+
+// Switch
+export { Switch } from './switch';
+
+// Popover
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverRoot } from './popover';
+
+// Tabs
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsRoot } from './tabs';
+
+// RadioGroup
+export { RadioGroup, RadioGroupItem, Radio } from './radio-group';
+
+// Collapsible (and Disclosure aliases)
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  CollapsibleRoot,
+  Disclosure,
+  DisclosureTrigger,
+  DisclosureContent,
+} from './collapsible';
+
+// Accordion
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './accordion';
+
+// DropdownMenu
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from './dropdown-menu';
+
+// Select
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+} from './select';
+
+// Drawer - Mobile-optimized drawer component (works on all platforms including iOS Safari)
+export {
+  // Primary exports
+  Drawer,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  // Legacy IOS-prefixed names (for backwards compatibility)
+  IOSDrawer,
+  IOSDrawerTrigger,
+  IOSDrawerClose,
+  IOSDrawerContent,
+  IOSDrawerHeader,
+  IOSDrawerFooter,
+  IOSDrawerTitle,
+  IOSDrawerDescription,
+} from './drawer';
+
+// Input
+export { Input } from './input';
+export type { InputProps } from './input';
+
+// Textarea (with HeroUI TextArea alias)
+export { Textarea, TextArea } from './textarea';
+export type { TextareaProps } from './textarea';
+
+// Checkbox
+export { Checkbox } from './checkbox';
+
+// Card
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card';
+
+// Separator
+export { Separator } from './separator';
+
+// Badge (HeroUI Chip replacement)
+export { Badge, Chip, badgeVariants } from './badge';
+export type { BadgeProps } from './badge';
+
+// Spinner
+export { Spinner, spinnerVariants } from './spinner';
+export type { SpinnerProps } from './spinner';
+
+// Surface
+export { Surface, surfaceVariants, useSurface } from './surface';
+export type { SurfaceProps } from './surface';
+
+// TextField (Input + Label wrapper for HeroUI compatibility)
+export { TextField } from './text-field';
+export type { TextFieldProps } from './text-field';
+
+// Kbd (keyboard shortcut display)
+export { Kbd, kbdVariants } from './kbd';
+export type { KbdProps } from './kbd';
+
+// Fieldset
+export { Fieldset, Legend } from './fieldset';
+export type { FieldsetProps, LegendProps } from './fieldset';
+
+// Link
+export { Link, LinkIcon, linkVariants } from './link';
+export type { LinkProps } from './link';

package/src/primitives/input.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../lib/utils';
+import { useSurface } from './surface';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  /** Whether the input is in an invalid state */
+  isInvalid?: boolean;
+  /** Content to display at the start of the input */
+  startContent?: React.ReactNode;
+  /** Content to display at the end of the input */
+  endContent?: React.ReactNode;
+  /**
+   * Visual variant - auto-detected from Surface context, or can be set explicitly
+   * - `default`: Standard field styling for forms (bg-field)
+   * - `filled`: Field on elevated surface (bg-field-on-surface)
+   * - `subtle`: Blends with buttons/tabs in toolbars (bg-default)
+   */
+  variant?: 'default' | 'filled' | 'subtle';
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      type,
+      isInvalid,
+      startContent,
+      endContent,
+      disabled,
+      readOnly,
+      required,
+      variant,
+      ...props
+    },
+    ref
+  ) => {
+    // Auto-detect variant from Surface context
+    const surface = useSurface();
+    const isOnSurface = surface.variant === 'default' || surface.variant === 'secondary';
+    const effectiveVariant = variant ?? (isOnSurface ? 'filled' : 'default');
+
+    const inputElement = (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-input px-2.5 py-1.5 text-sm appearance-none',
+          'text-foreground border-none',
+          'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
+          'placeholder:text-foreground/50',
+          'transition-shadow duration-200 ease-out focus-visible:outline-none focus:ring-2 focus:ring-focus focus:ring-offset-1 focus:ring-offset-background',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          // Variant styles - semantic: field on page vs field on surface vs toolbar
+          effectiveVariant === 'default' && 'bg-field shadow-soft dark:shadow-none',
+          effectiveVariant === 'filled' && 'bg-[var(--color-field-on-surface)]',
+          effectiveVariant === 'subtle' && 'bg-default dark:bg-[var(--color-default-on-surface)]',
+          isInvalid && 'ring-2 ring-danger focus-visible:ring-danger',
+          startContent && 'pl-10',
+          endContent && 'pr-10',
+          className
+        )}
+        ref={ref}
+        disabled={disabled}
+        readOnly={readOnly}
+        required={required}
+        aria-invalid={isInvalid}
+        {...props}
+      />
+    );
+
+    if (startContent || endContent) {
+      return (
+        <div className="relative">
+          {startContent && (
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground opacity-40">{startContent}</div>
+          )}
+          {inputElement}
+          {endContent && (
+            <div className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground opacity-40">{endContent}</div>
+          )}
+        </div>
+      );
+    }
+
+    return inputElement;
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };

package/src/primitives/kbd.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../lib/utils';
+
+const kbdVariants = cva(
+  'inline-flex items-center justify-center gap-1 rounded font-mono text-xs font-medium',
+  {
+    variants: {
+      variant: {
+        default:
+          'border border-divider bg-default/50 px-1.5 py-0.5 text-foreground/80 shadow-[0_1px_0_1px] shadow-black/10 dark:shadow-black/30',
+        minimal: 'bg-default/30 px-1 py-0.5 text-foreground/60',
+        outline: 'border border-divider px-1.5 py-0.5 text-foreground/70',
+      },
+      size: {
+        sm: 'h-4 min-w-[1rem] text-[10px]',
+        md: 'h-5 min-w-[1.25rem] text-xs',
+        lg: 'h-6 min-w-[1.5rem] text-sm',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+export interface KbdProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof kbdVariants> {
+  /**
+   * The keyboard key(s) to display.
+   * Can use special values that will be transformed:
+   * - "cmd" or "command" -> displays platform-specific modifier (⌘ on Mac, Ctrl on Windows)
+   * - "ctrl" -> ⌃
+   * - "alt" or "option" -> ⌥
+   * - "shift" -> ⇧
+   * - "enter" or "return" -> ↵
+   * - "backspace" or "delete" -> ⌫
+   * - "escape" or "esc" -> Esc
+   * - "tab" -> ⇥
+   * - "space" -> Space
+   * - "up", "down", "left", "right" -> arrows
+   */
+  keys?: string | string[];
+}
+
+/**
+ * Map of special key names to their display symbols
+ */
+const keySymbols: Record<string, string> = {
+  cmd: '⌘',
+  command: '⌘',
+  ctrl: '⌃',
+  control: '⌃',
+  alt: '⌥',
+  option: '⌥',
+  shift: '⇧',
+  enter: '↵',
+  return: '↵',
+  backspace: '⌫',
+  delete: '⌫',
+  escape: 'Esc',
+  esc: 'Esc',
+  tab: '⇥',
+  space: '␣',
+  up: '↑',
+  down: '↓',
+  left: '←',
+  right: '→',
+};
+
+/**
+ * Transforms a key name to its display symbol
+ */
+function formatKey(key: string): string {
+  const lowerKey = key.toLowerCase();
+  if (keySymbols[lowerKey]) {
+    return keySymbols[lowerKey];
+  }
+  // Single letters should be uppercase
+  if (key.length === 1) {
+    return key.toUpperCase();
+  }
+  return key;
+}
+
+/**
+ * Kbd - Keyboard key display component.
+ *
+ * Displays keyboard shortcuts in a visually consistent way.
+ *
+ * @example
+ * ```tsx
+ * <Kbd>K</Kbd>
+ * <Kbd keys={['cmd', 'shift', 'P']} />
+ * <Kbd keys="cmd+K" />
+ * ```
+ */
+const Kbd = React.forwardRef<HTMLElement, KbdProps>(
+  ({ className, variant, size, keys, children, ...props }, ref) => {
+    // Parse keys if provided as a string with "+" separator
+    let parsedKeys: string[] = [];
+    if (keys) {
+      if (Array.isArray(keys)) {
+        parsedKeys = keys;
+      } else if (typeof keys === 'string') {
+        parsedKeys = keys.split('+').map((k) => k.trim());
+      }
+    }
+
+    return (
+      <kbd ref={ref} className={cn(kbdVariants({ variant, size }), className)} {...props}>
+        {parsedKeys.length > 0
+          ? parsedKeys.map((key, index) => (
+              <React.Fragment key={index}>
+                {index > 0 && <span className="text-foreground/40">+</span>}
+                <span>{formatKey(key)}</span>
+              </React.Fragment>
+            ))
+          : children}
+      </kbd>
+    );
+  }
+);
+Kbd.displayName = 'Kbd';
+
+export { Kbd, kbdVariants };

package/src/primitives/label.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../lib/utils';
+
+const labelVariants = cva(
+  'block text-sm leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70 font-label'
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };