@psnext/design-system 1.5.1 → 2.0.0

package/dist/primitives/DropdownMenu/index.js

@@ -29,7 +29,7 @@ function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
 	return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu$1.Content, {
 		"data-slot": "dropdown-menu-content",
 		sideOffset,
-		className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+		className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-12 border border-primary-border bg-glass-60-bg backdrop-blur-glass p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", "[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-item]:not([data-inset])]:pl-8", "[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-label]:not([data-inset])]:pl-8", "[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-sub-trigger]:not([data-inset])]:pl-8", className),
 		...props
 	}) });
 }
@@ -46,7 +46,7 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "dropdown-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive-subtle data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
+		className: cn("relative flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-danger-txt data-[variant=destructive]:focus:bg-danger-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt data-[variant=destructive]:*:[svg]:text-danger-txt!", className),
 		...props
 	});
 }
@@ -54,7 +54,7 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
 	return /* @__PURE__ */ jsxs(DropdownMenu$1.CheckboxItem, {
 		"data-slot": "dropdown-menu-checkbox-item",
-		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		checked,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
@@ -74,7 +74,7 @@ function DropdownMenuRadioGroup({ ...props }) {
 function DropdownMenuRadioItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(DropdownMenu$1.RadioItem, {
 		"data-slot": "dropdown-menu-radio-item",
-		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
@@ -87,7 +87,7 @@ function DropdownMenuLabel({ className, inset, ...props }) {
 	return /* @__PURE__ */ jsx(DropdownMenu$1.Label, {
 		"data-slot": "dropdown-menu-label",
 		"data-inset": inset,
-		className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className),
+		className: cn("px-2 py-1.5 text-xs leading-4 font-medium text-muted-txt data-[inset]:pl-8", className),
 		...props
 	});
 }
@@ -95,7 +95,7 @@ function DropdownMenuLabel({ className, inset, ...props }) {
 function DropdownMenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(DropdownMenu$1.Separator, {
 		"data-slot": "dropdown-menu-separator",
-		className: cn("-mx-1 my-1 h-px bg-border", className),
+		className: cn("my-1 h-px bg-primary-border", className),
 		...props
 	});
 }
@@ -103,7 +103,7 @@ function DropdownMenuSeparator({ className, ...props }) {
 function DropdownMenuShortcut({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "dropdown-menu-shortcut",
-		className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+		className: cn("ml-auto text-sm leading-5 text-muted-txt", className),
 		...props
 	});
 }
@@ -119,7 +119,7 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(DropdownMenu$1.SubTrigger, {
 		"data-slot": "dropdown-menu-sub-trigger",
 		"data-inset": inset,
-		className: cn("flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		className: cn("flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })]
 	});
@@ -128,7 +128,7 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 function DropdownMenuSubContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx(DropdownMenu$1.SubContent, {
 		"data-slot": "dropdown-menu-sub-content",
-		className: cn("z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+		className: cn("z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", "[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-item]:not([data-inset])]:pl-8", "[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-label]:not([data-inset])]:pl-8", "[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-sub-trigger]:not([data-inset])]:pl-8", className),
 		...props
 	});
 }

package/dist/primitives/DropdownMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DropdownMenuPrimitive"],"sources":["../../../src/primitives/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a dropdown menu; holds open state and wires the trigger to its content. */\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\n/** Renders the menu into a portal so it escapes overflow/stacking contexts. */\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\n/** The control (usually a button) that toggles the menu open and closed. */\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\n/** The floating surface that holds the menu items; portalled and animated on open/close. */\nfunction DropdownMenuContent({\n  className,\n  /** Gap in pixels between the trigger and the content edge. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\n/** Groups related menu items together for labelling and keyboard navigation. */\nfunction DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\n/** A selectable menu row that fires on click/Enter. */\nfunction DropdownMenuItem({\n  className,\n  /** Indents the item to align with rows that have a leading icon/indicator. */\n  inset,\n  /** Visual tone of the item; `destructive` renders in the danger color. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive-subtle data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu row with a toggleable checkmark indicator for boolean options. */\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  /** Whether the checkbox indicator is shown as checked. */\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** Wraps radio items so only one option in the group can be selected at a time. */\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return <DropdownMenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\n/** A single mutually-exclusive option within a `DropdownMenuRadioGroup`. */\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading used to title a group of menu items. */\nfunction DropdownMenuLabel({\n  className,\n  /** Indents the label to align with rows that have a leading icon/indicator. */\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line used to visually separate groups of menu items. */\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint for an item's keyboard shortcut (e.g. ⇧⌘P). */\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Root for a nested submenu; holds the sub-trigger and its sub-content. */\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\n/** The item that opens a nested submenu, shown with a trailing chevron. */\nfunction DropdownMenuSubTrigger({\n  className,\n  /** Indents the trigger to align with rows that have a leading icon/indicator. */\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The floating surface for a nested submenu's items. */\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DropdownMenuPrimitive"],"sources":["../../../src/primitives/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a dropdown menu; holds open state and wires the trigger to its content. */\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\n/** Renders the menu into a portal so it escapes overflow/stacking contexts. */\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\n/** The control (usually a button) that toggles the menu open and closed. */\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\n/** The floating surface that holds the menu items; portalled and animated on open/close. */\nfunction DropdownMenuContent({\n  className,\n  /** Gap in pixels between the trigger and the content edge. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          // Figma Menu spec (Select & Combobox page): glass-none surface, primary\n          // border, radius-12, shadow-sm, 8px padding.\n          \"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-12 border border-primary-border bg-glass-60-bg backdrop-blur-glass p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          // Vertical hierarchy: if any item reserves the 32px indicator column\n          // (checkbox/radio items), plain items, labels and sub-triggers share it.\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-item]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-label]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-sub-trigger]:not([data-inset])]:pl-8\",\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\n/** Groups related menu items together for labelling and keyboard navigation. */\nfunction DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\n/** A selectable menu row that fires on click/Enter. */\nfunction DropdownMenuItem({\n  className,\n  /** Indents the item to align with rows that have a leading icon/indicator. */\n  inset,\n  /** Visual tone of the item; `destructive` renders in the danger color. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-danger-txt data-[variant=destructive]:focus:bg-danger-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt data-[variant=destructive]:*:[svg]:text-danger-txt!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu row with a toggleable checkmark indicator for boolean options. */\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  /** Whether the checkbox indicator is shown as checked. */\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** Wraps radio items so only one option in the group can be selected at a time. */\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return <DropdownMenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\n/** A single mutually-exclusive option within a `DropdownMenuRadioGroup`. */\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading used to title a group of menu items. */\nfunction DropdownMenuLabel({\n  className,\n  /** Indents the label to align with rows that have a leading icon/indicator. */\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs leading-4 font-medium text-muted-txt data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line used to visually separate groups of menu items. */\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"my-1 h-px bg-primary-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint for an item's keyboard shortcut (e.g. ⇧⌘P). */\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"ml-auto text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Root for a nested submenu; holds the sub-trigger and its sub-content. */\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\n/** The item that opens a nested submenu, shown with a trailing chevron. */\nfunction DropdownMenuSubTrigger({\n  className,\n  /** Indents the trigger to align with rows that have a leading icon/indicator. */\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The floating surface for a nested submenu's items. */\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        // Vertical hierarchy: if any item reserves the 32px indicator column\n        // (checkbox/radio items), plain items, labels and sub-triggers share it.\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-item]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-label]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-sub-trigger]:not([data-inset])]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n"],"mappings":"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"}

package/dist/primitives/Empty/index.cjs

@@ -3,11 +3,11 @@ const require_cn = require("../../cn.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
 //#region src/primitives/Empty/Empty.tsx
-const emptyVariants = (0, class_variance_authority.cva)("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6 text-center text-balance md:p-12", {
+const emptyVariants = (0, class_variance_authority.cva)("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-8 p-6 text-center text-balance md:p-12", {
 	variants: { variant: {
 		default: "",
 		outline: "border",
-		background: "bg-muted",
+		background: "bg-muted-bg",
 		"outline-dashed": "border border-dashed"
 	} },
 	defaultVariants: { variant: "default" }
@@ -32,7 +32,7 @@ function EmptyHeader({ className, ...props }) {
 const emptyMediaVariants = (0, class_variance_authority.cva)("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
 	variants: { variant: {
 		default: "bg-transparent",
-		icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6"
+		icon: "flex size-10 shrink-0 items-center justify-center rounded-8 bg-muted-bg text-primary-txt [&_svg:not([class*='size-'])]:size-6"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -60,7 +60,7 @@ function EmptyTitle({ className, ...props }) {
 function EmptyDescription({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "empty-description",
-		className: require_cn.cn("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		className: require_cn.cn("text-sm/relaxed text-muted-txt [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary-txt", className),
 		...props
 	});
 }

package/dist/primitives/Empty/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Empty/Empty.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst emptyVariants = cva(\n  \"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6 text-center text-balance md:p-12\",\n  {\n    variants: {\n      // Container chrome — matches the Figma \"Empty\" variant axis.\n      variant: {\n        default: \"\",\n        outline: \"border\",\n        background: \"bg-muted\",\n        \"outline-dashed\": \"border border-dashed\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/** Centered empty-state container; compose Header/Media/Title/Description/Content inside it. */\nfunction Empty({\n  className,\n  /** Container chrome: plain, bordered, muted background, or dashed border. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyVariants>) {\n  return (\n    <div\n      data-slot=\"empty\"\n      data-variant={variant}\n      className={cn(emptyVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Groups the media, title, and description with centered alignment. */\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2 text-center\", className)}\n      {...props}\n    />\n  );\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/** Holds the leading illustration or icon above the title. */\nfunction EmptyMedia({\n  className,\n  /** Visual treatment: bare media or a rounded muted icon badge. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\n/** The primary heading line of the empty state. */\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted supporting copy explaining the empty state. */\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Slot for actions or follow-up content below the header. */\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n  emptyVariants,\n};\n"],"mappings":";;;;;AAKA,MAAM,iBAAA,GAAA,yBAAA,KACJ,kHACA;CACE,UAAU,EAER,SAAS;EACP,SAAS;EACT,SAAS;EACT,YAAY;EACZ,kBAAkB;CACpB,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WAEA,UAAU,WACV,GAAG,SACgE;CACnE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAWA,WAAAA,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,sBAAA,GAAA,yBAAA,KACJ,+FACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;AAGA,SAAS,WAAW,EAClB,WAEA,UAAU,WACV,GAAG,SACqE;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAWA,WAAAA,GAAG,mBAAmB;GAAE;GAAS;EAAU,CAAC,CAAC;EACxD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAoC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,2GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,iFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Empty/Empty.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst emptyVariants = cva(\n  \"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-8 p-6 text-center text-balance md:p-12\",\n  {\n    variants: {\n      // Container chrome — matches the Figma \"Empty\" variant axis.\n      variant: {\n        default: \"\",\n        outline: \"border\",\n        background: \"bg-muted-bg\",\n        \"outline-dashed\": \"border border-dashed\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/** Centered empty-state container; compose Header/Media/Title/Description/Content inside it. */\nfunction Empty({\n  className,\n  /** Container chrome: plain, bordered, muted background, or dashed border. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyVariants>) {\n  return (\n    <div\n      data-slot=\"empty\"\n      data-variant={variant}\n      className={cn(emptyVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Groups the media, title, and description with centered alignment. */\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2 text-center\", className)}\n      {...props}\n    />\n  );\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-10 shrink-0 items-center justify-center rounded-8 bg-muted-bg text-primary-txt [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/** Holds the leading illustration or icon above the title. */\nfunction EmptyMedia({\n  className,\n  /** Visual treatment: bare media or a rounded muted icon badge. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\n/** The primary heading line of the empty state. */\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted supporting copy explaining the empty state. */\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-txt [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Slot for actions or follow-up content below the header. */\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n  emptyVariants,\n};\n"],"mappings":";;;;;AAKA,MAAM,iBAAA,GAAA,yBAAA,KACJ,iHACA;CACE,UAAU,EAER,SAAS;EACP,SAAS;EACT,SAAS;EACT,YAAY;EACZ,kBAAkB;CACpB,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WAEA,UAAU,WACV,GAAG,SACgE;CACnE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAWA,WAAAA,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,sBAAA,GAAA,yBAAA,KACJ,+FACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;AAGA,SAAS,WAAW,EAClB,WAEA,UAAU,WACV,GAAG,SACqE;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAWA,WAAAA,GAAG,mBAAmB;GAAE;GAAS;EAAU,CAAC,CAAC;EACxD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAoC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,wGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,iFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Empty/index.js

@@ -2,11 +2,11 @@ import { t as cn } from "../../cn.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/primitives/Empty/Empty.tsx
-const emptyVariants = cva("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6 text-center text-balance md:p-12", {
+const emptyVariants = cva("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-8 p-6 text-center text-balance md:p-12", {
 	variants: { variant: {
 		default: "",
 		outline: "border",
-		background: "bg-muted",
+		background: "bg-muted-bg",
 		"outline-dashed": "border border-dashed"
 	} },
 	defaultVariants: { variant: "default" }
@@ -31,7 +31,7 @@ function EmptyHeader({ className, ...props }) {
 const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
 	variants: { variant: {
 		default: "bg-transparent",
-		icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6"
+		icon: "flex size-10 shrink-0 items-center justify-center rounded-8 bg-muted-bg text-primary-txt [&_svg:not([class*='size-'])]:size-6"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -59,7 +59,7 @@ function EmptyTitle({ className, ...props }) {
 function EmptyDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "empty-description",
-		className: cn("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		className: cn("text-sm/relaxed text-muted-txt [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary-txt", className),
 		...props
 	});
 }

package/dist/primitives/Empty/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Empty/Empty.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst emptyVariants = cva(\n  \"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6 text-center text-balance md:p-12\",\n  {\n    variants: {\n      // Container chrome — matches the Figma \"Empty\" variant axis.\n      variant: {\n        default: \"\",\n        outline: \"border\",\n        background: \"bg-muted\",\n        \"outline-dashed\": \"border border-dashed\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/** Centered empty-state container; compose Header/Media/Title/Description/Content inside it. */\nfunction Empty({\n  className,\n  /** Container chrome: plain, bordered, muted background, or dashed border. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyVariants>) {\n  return (\n    <div\n      data-slot=\"empty\"\n      data-variant={variant}\n      className={cn(emptyVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Groups the media, title, and description with centered alignment. */\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2 text-center\", className)}\n      {...props}\n    />\n  );\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/** Holds the leading illustration or icon above the title. */\nfunction EmptyMedia({\n  className,\n  /** Visual treatment: bare media or a rounded muted icon badge. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\n/** The primary heading line of the empty state. */\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted supporting copy explaining the empty state. */\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Slot for actions or follow-up content below the header. */\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n  emptyVariants,\n};\n"],"mappings":";;;;AAKA,MAAM,gBAAgB,IACpB,kHACA;CACE,UAAU,EAER,SAAS;EACP,SAAS;EACT,SAAS;EACT,YAAY;EACZ,kBAAkB;CACpB,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WAEA,UAAU,WACV,GAAG,SACgE;CACnE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,qBAAqB,IACzB,+FACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;AAGA,SAAS,WAAW,EAClB,WAEA,UAAU,WACV,GAAG,SACqE;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,mBAAmB;GAAE;GAAS;EAAU,CAAC,CAAC;EACxD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAoC;CAC5E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,2GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,iFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Empty/Empty.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst emptyVariants = cva(\n  \"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-8 p-6 text-center text-balance md:p-12\",\n  {\n    variants: {\n      // Container chrome — matches the Figma \"Empty\" variant axis.\n      variant: {\n        default: \"\",\n        outline: \"border\",\n        background: \"bg-muted-bg\",\n        \"outline-dashed\": \"border border-dashed\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/** Centered empty-state container; compose Header/Media/Title/Description/Content inside it. */\nfunction Empty({\n  className,\n  /** Container chrome: plain, bordered, muted background, or dashed border. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyVariants>) {\n  return (\n    <div\n      data-slot=\"empty\"\n      data-variant={variant}\n      className={cn(emptyVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Groups the media, title, and description with centered alignment. */\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2 text-center\", className)}\n      {...props}\n    />\n  );\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-10 shrink-0 items-center justify-center rounded-8 bg-muted-bg text-primary-txt [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/** Holds the leading illustration or icon above the title. */\nfunction EmptyMedia({\n  className,\n  /** Visual treatment: bare media or a rounded muted icon badge. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\n/** The primary heading line of the empty state. */\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted supporting copy explaining the empty state. */\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-txt [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Slot for actions or follow-up content below the header. */\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n  emptyVariants,\n};\n"],"mappings":";;;;AAKA,MAAM,gBAAgB,IACpB,iHACA;CACE,UAAU,EAER,SAAS;EACP,SAAS;EACT,SAAS;EACT,YAAY;EACZ,kBAAkB;CACpB,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WAEA,UAAU,WACV,GAAG,SACgE;CACnE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,qBAAqB,IACzB,+FACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;AAGA,SAAS,WAAW,EAClB,WAEA,UAAU,WACV,GAAG,SACqE;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,mBAAmB;GAAE;GAAS;EAAU,CAAC,CAAC;EACxD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAoC;CAC5E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,wGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,iFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Field/index.cjs

@@ -31,7 +31,7 @@ function FieldGroup({ className, ...props }) {
 		...props
 	});
 }
-const fieldVariants = (0, class_variance_authority.cva)("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
+const fieldVariants = (0, class_variance_authority.cva)("group/field flex w-full gap-3 data-[invalid=true]:text-danger-txt", {
 	variants: { orientation: {
 		vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
 		horizontal: [
@@ -69,7 +69,7 @@ function FieldContent({ className, ...props }) {
 function FieldLabel({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Label_index.Label, {
 		"data-slot": "field-label",
-		className: require_cn.cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5", className),
+		className: require_cn.cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-6 has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", "has-data-[state=checked]:border-selected-border has-data-[state=checked]:bg-primary-invert-bg/5", className),
 		...props
 	});
 }
@@ -85,7 +85,7 @@ function FieldTitle({ className, ...props }) {
 function FieldDescription({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 		"data-slot": "field-description",
-		className: require_cn.cn("text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance", "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		className: require_cn.cn("text-sm leading-normal font-normal text-muted-txt group-has-[[data-orientation=horizontal]]/field:text-balance", "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary-txt", className),
 		...props
 	});
 }
@@ -97,7 +97,7 @@ function FieldSeparator({ children, className, ...props }) {
 		className: require_cn.cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Separator_index.Separator, { className: "absolute inset-0 top-1/2" }), children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
+			className: "relative mx-auto block w-fit bg-primary-bg px-2 text-muted-txt",
 			"data-slot": "field-separator-content",
 			children
 		})]
@@ -119,7 +119,7 @@ function FieldError({ className, children, errors, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role: "alert",
 		"data-slot": "field-error",
-		className: require_cn.cn("text-sm font-normal text-destructive", className),
+		className: require_cn.cn("text-sm font-normal text-danger-txt", className),
 		...props,
 		children: content
 	});

package/dist/primitives/Field/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn","Label","Separator"],"sources":["../../../src/primitives/Field/Field.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { useMemo } from \"react\";\nimport type * as React from \"react\";\n\nimport { Label } from \"@/primitives/Label\";\nimport { Separator } from \"@/primitives/Separator\";\nimport { cn } from \"@/utils\";\n\n/** A `<fieldset>` wrapper that groups related fields with consistent spacing. */\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6\",\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The caption for a `FieldSet`, rendered as a `<legend>`. */\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & {\n  /** Visual scale of the legend: section header (`legend`) or smaller label-sized (`label`). */\n  variant?: \"legend\" | \"label\";\n}) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A container that stacks multiple `Field`s with group-level spacing and a responsive container. */\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva(\"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\", {\n  variants: {\n    orientation: {\n      vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\n      horizontal: [\n        \"flex-row items-center\",\n        \"[&>[data-slot=field-label]]:flex-auto\",\n        \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n      responsive: [\n        \"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto\",\n        \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n        \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n});\n\n/** A single labelled form field that lays out a control with its label, description, and error. */\nfunction Field({\n  className,\n  /** Layout direction of the label/control: stacked (`vertical`), side-by-side (`horizontal`), or `responsive`. */\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Stacks a label and description next to a control (used in horizontal checkbox/radio fields). */\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\", className)}\n      {...props}\n    />\n  );\n}\n\n/** The accessible label for a field's control; wraps the `Label` primitive. */\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4\",\n        \"has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A non-`<label>` title for a field group, styled like a label but not bound to a control. */\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Muted helper text shown beneath (or beside) a field's control. */\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of fields, optionally with centered label content. */\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Optional label rendered centered over the divider line. */\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className,\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\n/** A destructive `role=\"alert\"` message for a field, rendered from `children` or a list of `errors`. */\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Validation errors to render; deduped by message and listed when more than one. Ignored if `children` is provided. */\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length === 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["cn","Label","Separator"],"sources":["../../../src/primitives/Field/Field.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { useMemo } from \"react\";\nimport type * as React from \"react\";\n\nimport { Label } from \"@/primitives/Label\";\nimport { Separator } from \"@/primitives/Separator\";\nimport { cn } from \"@/utils\";\n\n/** A `<fieldset>` wrapper that groups related fields with consistent spacing. */\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6\",\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The caption for a `FieldSet`, rendered as a `<legend>`. */\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & {\n  /** Visual scale of the legend: section header (`legend`) or smaller label-sized (`label`). */\n  variant?: \"legend\" | \"label\";\n}) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A container that stacks multiple `Field`s with group-level spacing and a responsive container. */\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva(\"group/field flex w-full gap-3 data-[invalid=true]:text-danger-txt\", {\n  variants: {\n    orientation: {\n      vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\n      horizontal: [\n        \"flex-row items-center\",\n        \"[&>[data-slot=field-label]]:flex-auto\",\n        \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n      responsive: [\n        \"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto\",\n        \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n        \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n});\n\n/** A single labelled form field that lays out a control with its label, description, and error. */\nfunction Field({\n  className,\n  /** Layout direction of the label/control: stacked (`vertical`), side-by-side (`horizontal`), or `responsive`. */\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Stacks a label and description next to a control (used in horizontal checkbox/radio fields). */\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\", className)}\n      {...props}\n    />\n  );\n}\n\n/** The accessible label for a field's control; wraps the `Label` primitive. */\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-6 has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4\",\n        \"has-data-[state=checked]:border-selected-border has-data-[state=checked]:bg-primary-invert-bg/5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A non-`<label>` title for a field group, styled like a label but not bound to a control. */\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Muted helper text shown beneath (or beside) a field's control. */\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-sm leading-normal font-normal text-muted-txt group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of fields, optionally with centered label content. */\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Optional label rendered centered over the divider line. */\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className,\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-primary-bg px-2 text-muted-txt\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\n/** A destructive `role=\"alert\"` message for a field, rendered from `children` or a list of `errors`. */\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Validation errors to render; deduped by message and listed when more than one. Ignored if `children` is provided. */\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length === 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-danger-txt\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n};\n"],"mappings":"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"}

package/dist/primitives/Field/index.js

@@ -30,7 +30,7 @@ function FieldGroup({ className, ...props }) {
 		...props
 	});
 }
-const fieldVariants = cva("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
+const fieldVariants = cva("group/field flex w-full gap-3 data-[invalid=true]:text-danger-txt", {
 	variants: { orientation: {
 		vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
 		horizontal: [
@@ -68,7 +68,7 @@ function FieldContent({ className, ...props }) {
 function FieldLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Label, {
 		"data-slot": "field-label",
-		className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5", className),
+		className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-6 has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", "has-data-[state=checked]:border-selected-border has-data-[state=checked]:bg-primary-invert-bg/5", className),
 		...props
 	});
 }
@@ -84,7 +84,7 @@ function FieldTitle({ className, ...props }) {
 function FieldDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "field-description",
-		className: cn("text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance", "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		className: cn("text-sm leading-normal font-normal text-muted-txt group-has-[[data-orientation=horizontal]]/field:text-balance", "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary-txt", className),
 		...props
 	});
 }
@@ -96,7 +96,7 @@ function FieldSeparator({ children, className, ...props }) {
 		className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
 		...props,
 		children: [/* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && /* @__PURE__ */ jsx("span", {
-			className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
+			className: "relative mx-auto block w-fit bg-primary-bg px-2 text-muted-txt",
 			"data-slot": "field-separator-content",
 			children
 		})]
@@ -118,7 +118,7 @@ function FieldError({ className, children, errors, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		role: "alert",
 		"data-slot": "field-error",
-		className: cn("text-sm font-normal text-destructive", className),
+		className: cn("text-sm font-normal text-danger-txt", className),
 		...props,
 		children: content
 	});

package/dist/primitives/Field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Field/Field.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { useMemo } from \"react\";\nimport type * as React from \"react\";\n\nimport { Label } from \"@/primitives/Label\";\nimport { Separator } from \"@/primitives/Separator\";\nimport { cn } from \"@/utils\";\n\n/** A `<fieldset>` wrapper that groups related fields with consistent spacing. */\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6\",\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The caption for a `FieldSet`, rendered as a `<legend>`. */\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & {\n  /** Visual scale of the legend: section header (`legend`) or smaller label-sized (`label`). */\n  variant?: \"legend\" | \"label\";\n}) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A container that stacks multiple `Field`s with group-level spacing and a responsive container. */\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva(\"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\", {\n  variants: {\n    orientation: {\n      vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\n      horizontal: [\n        \"flex-row items-center\",\n        \"[&>[data-slot=field-label]]:flex-auto\",\n        \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n      responsive: [\n        \"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto\",\n        \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n        \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n});\n\n/** A single labelled form field that lays out a control with its label, description, and error. */\nfunction Field({\n  className,\n  /** Layout direction of the label/control: stacked (`vertical`), side-by-side (`horizontal`), or `responsive`. */\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Stacks a label and description next to a control (used in horizontal checkbox/radio fields). */\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\", className)}\n      {...props}\n    />\n  );\n}\n\n/** The accessible label for a field's control; wraps the `Label` primitive. */\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4\",\n        \"has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A non-`<label>` title for a field group, styled like a label but not bound to a control. */\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Muted helper text shown beneath (or beside) a field's control. */\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of fields, optionally with centered label content. */\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Optional label rendered centered over the divider line. */\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className,\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\n/** A destructive `role=\"alert\"` message for a field, rendered from `children` or a list of `errors`. */\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Validation errors to render; deduped by message and listed when more than one. Ignored if `children` is provided. */\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length === 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Field/Field.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { useMemo } from \"react\";\nimport type * as React from \"react\";\n\nimport { Label } from \"@/primitives/Label\";\nimport { Separator } from \"@/primitives/Separator\";\nimport { cn } from \"@/utils\";\n\n/** A `<fieldset>` wrapper that groups related fields with consistent spacing. */\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6\",\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The caption for a `FieldSet`, rendered as a `<legend>`. */\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & {\n  /** Visual scale of the legend: section header (`legend`) or smaller label-sized (`label`). */\n  variant?: \"legend\" | \"label\";\n}) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A container that stacks multiple `Field`s with group-level spacing and a responsive container. */\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva(\"group/field flex w-full gap-3 data-[invalid=true]:text-danger-txt\", {\n  variants: {\n    orientation: {\n      vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\n      horizontal: [\n        \"flex-row items-center\",\n        \"[&>[data-slot=field-label]]:flex-auto\",\n        \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n      responsive: [\n        \"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto\",\n        \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n        \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n});\n\n/** A single labelled form field that lays out a control with its label, description, and error. */\nfunction Field({\n  className,\n  /** Layout direction of the label/control: stacked (`vertical`), side-by-side (`horizontal`), or `responsive`. */\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Stacks a label and description next to a control (used in horizontal checkbox/radio fields). */\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\", className)}\n      {...props}\n    />\n  );\n}\n\n/** The accessible label for a field's control; wraps the `Label` primitive. */\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-6 has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4\",\n        \"has-data-[state=checked]:border-selected-border has-data-[state=checked]:bg-primary-invert-bg/5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A non-`<label>` title for a field group, styled like a label but not bound to a control. */\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Muted helper text shown beneath (or beside) a field's control. */\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-sm leading-normal font-normal text-muted-txt group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of fields, optionally with centered label content. */\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Optional label rendered centered over the divider line. */\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className,\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-primary-bg px-2 text-muted-txt\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\n/** A destructive `role=\"alert\"` message for a field, rendered from `children` or a list of `errors`. */\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Validation errors to render; deduped by message and listed when more than one. Ignored if `children` is provided. */\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length === 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-danger-txt\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n};\n"],"mappings":"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"}

package/dist/primitives/Form/index.cjs

@@ -54,7 +54,7 @@ function FormLabel({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Field_index.FieldLabel, {
 		"data-slot": "form-label",
 		"data-error": !!error,
-		className: require_cn.cn("data-[error=true]:text-destructive", className),
+		className: require_cn.cn("data-[error=true]:text-danger-txt", className),
 		htmlFor: formItemId,
 		...props
 	});

package/dist/primitives/Form/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["FormProvider","React","Controller","Field","FieldLabel","cn","Slot","FieldDescription","FieldError"],"sources":["../../../src/primitives/Form/Form.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  useFormContext,\n  useFormState,\n} from \"react-hook-form\";\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"@/primitives/Field\";\nimport { cn } from \"@/utils\";\n\n/** Root provider that shares one react-hook-form instance with all nested form pieces. */\n// Form is the react-hook-form binding layer. Its presentation pieces render the\n// Field primitives underneath so RHF forms share one visual system with non-RHF\n// forms built directly on Field.\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  /** The react-hook-form field name this context binds its descendants to. */\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\n/** Connects a single input to the form via RHF's `Controller`, exposing `field` to its render prop. */\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\n/** Hook for form pieces to read the current field's id, name, ARIA ids, and validation state. */\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\");\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  /** Generated id used to derive the field's control, description, and message ARIA ids. */\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);\n\n/** Wraps one field, generating an id so its label, control, and messages stay linked. */\nfunction FormItem({ ...props }: React.ComponentProps<typeof Field>) {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <Field data-slot=\"form-item\" {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\n/** Field label wired to the control's id and tinted destructive when the field is invalid. */\nfunction FormLabel({ className, ...props }: React.ComponentProps<typeof FieldLabel>) {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <FieldLabel\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\n/** Slots the actual input, applying the field's id, `aria-describedby`, and `aria-invalid`. */\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <Slot.Root\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\n/** Helper text for a field, linked to its control via `aria-describedby`. */\nfunction FormDescription({ ...props }: React.ComponentProps<typeof FieldDescription>) {\n  const { formDescriptionId } = useFormField();\n\n  return <FieldDescription data-slot=\"form-description\" id={formDescriptionId} {...props} />;\n}\n\n/** Renders the field's validation error (or `children`), and nothing when there is no message. */\nfunction FormMessage({ children, ...props }: React.ComponentProps<typeof FieldError>) {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? \"\") : children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <FieldError data-slot=\"form-message\" id={formMessageId} {...props}>\n      {body}\n    </FieldError>\n  );\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n};\n"],"mappings":";;;;;;;;;;;AAqBA,MAAM,OAAOA,gBAAAA;AAUb,MAAM,mBAAmBC,MAAM,cAAqC,CAAC,CAA0B;;AAG/F,MAAM,aAGJ,EACA,GAAG,YACuC;CAC1C,OACE,iBAAA,GAAA,kBAAA,KAAC,iBAAiB,UAAlB;EAA2B,OAAO,EAAE,MAAM,MAAM,KAAK;YACnD,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,YAAD,EAAY,GAAI,MAAQ,CAAA;CACC,CAAA;AAE/B;;AAGA,MAAM,qBAAqB;CACzB,MAAM,eAAeD,MAAM,WAAW,gBAAgB;CACtD,MAAM,cAAcA,MAAM,WAAW,eAAe;CACpD,MAAM,EAAE,mBAAA,GAAA,gBAAA,gBAAiC;CACzC,MAAM,aAAA,GAAA,gBAAA,cAAyB,EAAE,MAAM,aAAa,KAAK,CAAC;CAC1D,MAAM,aAAa,cAAc,aAAa,MAAM,SAAS;CAE7D,IAAI,CAAC,cACH,MAAM,IAAI,MAAM,gDAAgD;CAGlE,MAAM,EAAE,OAAO;CAEf,OAAO;EACL;EACA,MAAM,aAAa;EACnB,YAAY,GAAG,GAAG;EAClB,mBAAmB,GAAG,GAAG;EACzB,eAAe,GAAG,GAAG;EACrB,GAAG;CACL;AACF;AAOA,MAAM,kBAAkBA,MAAM,cAAoC,CAAC,CAAyB;;AAG5F,SAAS,SAAS,EAAE,GAAG,SAA6C;CAClE,MAAM,KAAKA,MAAM,MAAM;CAEvB,OACE,iBAAA,GAAA,kBAAA,KAAC,gBAAgB,UAAjB;EAA0B,OAAO,EAAE,GAAG;YACpC,iBAAA,GAAA,kBAAA,KAACE,+BAAAA,OAAD;GAAO,aAAU;GAAY,GAAI;EAAQ,CAAA;CACjB,CAAA;AAE9B;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAkD;CACnF,MAAM,EAAE,OAAO,eAAe,aAAa;CAE3C,OACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,YAAD;EACE,aAAU;EACV,cAAY,CAAC,CAAC;EACd,WAAWC,WAAAA,GAAG,sCAAsC,SAAS;EAC7D,SAAS;EACT,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,GAAG,SAAiD;CACzE,MAAM,EAAE,OAAO,YAAY,mBAAmB,kBAAkB,aAAa;CAE7E,OACE,iBAAA,GAAA,kBAAA,KAACC,SAAAA,KAAK,MAAN;EACE,aAAU;EACV,IAAI;EACJ,oBAAkB,CAAC,QAAQ,GAAG,sBAAsB,GAAG,kBAAkB,GAAG;EAC5E,gBAAc,CAAC,CAAC;EAChB,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,GAAG,SAAwD;CACpF,MAAM,EAAE,sBAAsB,aAAa;CAE3C,OAAO,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,kBAAD;EAAkB,aAAU;EAAmB,IAAI;EAAmB,GAAI;CAAQ,CAAA;AAC3F;;AAGA,SAAS,YAAY,EAAE,UAAU,GAAG,SAAkD;CACpF,MAAM,EAAE,OAAO,kBAAkB,aAAa;CAC9C,MAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,EAAE,IAAI;CAEpD,IAAI,CAAC,MACH,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,YAAD;EAAY,aAAU;EAAe,IAAI;EAAe,GAAI;YACzD;CACS,CAAA;AAEhB"}
+{"version":3,"file":"index.cjs","names":["FormProvider","React","Controller","Field","FieldLabel","cn","Slot","FieldDescription","FieldError"],"sources":["../../../src/primitives/Form/Form.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  useFormContext,\n  useFormState,\n} from \"react-hook-form\";\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"@/primitives/Field\";\nimport { cn } from \"@/utils\";\n\n/** Root provider that shares one react-hook-form instance with all nested form pieces. */\n// Form is the react-hook-form binding layer. Its presentation pieces render the\n// Field primitives underneath so RHF forms share one visual system with non-RHF\n// forms built directly on Field.\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  /** The react-hook-form field name this context binds its descendants to. */\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\n/** Connects a single input to the form via RHF's `Controller`, exposing `field` to its render prop. */\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\n/** Hook for form pieces to read the current field's id, name, ARIA ids, and validation state. */\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\");\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  /** Generated id used to derive the field's control, description, and message ARIA ids. */\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);\n\n/** Wraps one field, generating an id so its label, control, and messages stay linked. */\nfunction FormItem({ ...props }: React.ComponentProps<typeof Field>) {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <Field data-slot=\"form-item\" {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\n/** Field label wired to the control's id and tinted destructive when the field is invalid. */\nfunction FormLabel({ className, ...props }: React.ComponentProps<typeof FieldLabel>) {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <FieldLabel\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-danger-txt\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\n/** Slots the actual input, applying the field's id, `aria-describedby`, and `aria-invalid`. */\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <Slot.Root\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\n/** Helper text for a field, linked to its control via `aria-describedby`. */\nfunction FormDescription({ ...props }: React.ComponentProps<typeof FieldDescription>) {\n  const { formDescriptionId } = useFormField();\n\n  return <FieldDescription data-slot=\"form-description\" id={formDescriptionId} {...props} />;\n}\n\n/** Renders the field's validation error (or `children`), and nothing when there is no message. */\nfunction FormMessage({ children, ...props }: React.ComponentProps<typeof FieldError>) {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? \"\") : children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <FieldError data-slot=\"form-message\" id={formMessageId} {...props}>\n      {body}\n    </FieldError>\n  );\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n};\n"],"mappings":";;;;;;;;;;;AAqBA,MAAM,OAAOA,gBAAAA;AAUb,MAAM,mBAAmBC,MAAM,cAAqC,CAAC,CAA0B;;AAG/F,MAAM,aAGJ,EACA,GAAG,YACuC;CAC1C,OACE,iBAAA,GAAA,kBAAA,KAAC,iBAAiB,UAAlB;EAA2B,OAAO,EAAE,MAAM,MAAM,KAAK;YACnD,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,YAAD,EAAY,GAAI,MAAQ,CAAA;CACC,CAAA;AAE/B;;AAGA,MAAM,qBAAqB;CACzB,MAAM,eAAeD,MAAM,WAAW,gBAAgB;CACtD,MAAM,cAAcA,MAAM,WAAW,eAAe;CACpD,MAAM,EAAE,mBAAA,GAAA,gBAAA,gBAAiC;CACzC,MAAM,aAAA,GAAA,gBAAA,cAAyB,EAAE,MAAM,aAAa,KAAK,CAAC;CAC1D,MAAM,aAAa,cAAc,aAAa,MAAM,SAAS;CAE7D,IAAI,CAAC,cACH,MAAM,IAAI,MAAM,gDAAgD;CAGlE,MAAM,EAAE,OAAO;CAEf,OAAO;EACL;EACA,MAAM,aAAa;EACnB,YAAY,GAAG,GAAG;EAClB,mBAAmB,GAAG,GAAG;EACzB,eAAe,GAAG,GAAG;EACrB,GAAG;CACL;AACF;AAOA,MAAM,kBAAkBA,MAAM,cAAoC,CAAC,CAAyB;;AAG5F,SAAS,SAAS,EAAE,GAAG,SAA6C;CAClE,MAAM,KAAKA,MAAM,MAAM;CAEvB,OACE,iBAAA,GAAA,kBAAA,KAAC,gBAAgB,UAAjB;EAA0B,OAAO,EAAE,GAAG;YACpC,iBAAA,GAAA,kBAAA,KAACE,+BAAAA,OAAD;GAAO,aAAU;GAAY,GAAI;EAAQ,CAAA;CACjB,CAAA;AAE9B;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAkD;CACnF,MAAM,EAAE,OAAO,eAAe,aAAa;CAE3C,OACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,YAAD;EACE,aAAU;EACV,cAAY,CAAC,CAAC;EACd,WAAWC,WAAAA,GAAG,qCAAqC,SAAS;EAC5D,SAAS;EACT,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,GAAG,SAAiD;CACzE,MAAM,EAAE,OAAO,YAAY,mBAAmB,kBAAkB,aAAa;CAE7E,OACE,iBAAA,GAAA,kBAAA,KAACC,SAAAA,KAAK,MAAN;EACE,aAAU;EACV,IAAI;EACJ,oBAAkB,CAAC,QAAQ,GAAG,sBAAsB,GAAG,kBAAkB,GAAG;EAC5E,gBAAc,CAAC,CAAC;EAChB,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,GAAG,SAAwD;CACpF,MAAM,EAAE,sBAAsB,aAAa;CAE3C,OAAO,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,kBAAD;EAAkB,aAAU;EAAmB,IAAI;EAAmB,GAAI;CAAQ,CAAA;AAC3F;;AAGA,SAAS,YAAY,EAAE,UAAU,GAAG,SAAkD;CACpF,MAAM,EAAE,OAAO,kBAAkB,aAAa;CAC9C,MAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,EAAE,IAAI;CAEpD,IAAI,CAAC,MACH,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,YAAD;EAAY,aAAU;EAAe,IAAI;EAAe,GAAI;YACzD;CACS,CAAA;AAEhB"}

package/dist/primitives/Form/index.js

@@ -51,7 +51,7 @@ function FormLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(FieldLabel, {
 		"data-slot": "form-label",
 		"data-error": !!error,
-		className: cn("data-[error=true]:text-destructive", className),
+		className: cn("data-[error=true]:text-danger-txt", className),
 		htmlFor: formItemId,
 		...props
 	});

package/dist/primitives/Form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Form/Form.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  useFormContext,\n  useFormState,\n} from \"react-hook-form\";\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"@/primitives/Field\";\nimport { cn } from \"@/utils\";\n\n/** Root provider that shares one react-hook-form instance with all nested form pieces. */\n// Form is the react-hook-form binding layer. Its presentation pieces render the\n// Field primitives underneath so RHF forms share one visual system with non-RHF\n// forms built directly on Field.\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  /** The react-hook-form field name this context binds its descendants to. */\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\n/** Connects a single input to the form via RHF's `Controller`, exposing `field` to its render prop. */\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\n/** Hook for form pieces to read the current field's id, name, ARIA ids, and validation state. */\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\");\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  /** Generated id used to derive the field's control, description, and message ARIA ids. */\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);\n\n/** Wraps one field, generating an id so its label, control, and messages stay linked. */\nfunction FormItem({ ...props }: React.ComponentProps<typeof Field>) {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <Field data-slot=\"form-item\" {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\n/** Field label wired to the control's id and tinted destructive when the field is invalid. */\nfunction FormLabel({ className, ...props }: React.ComponentProps<typeof FieldLabel>) {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <FieldLabel\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\n/** Slots the actual input, applying the field's id, `aria-describedby`, and `aria-invalid`. */\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <Slot.Root\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\n/** Helper text for a field, linked to its control via `aria-describedby`. */\nfunction FormDescription({ ...props }: React.ComponentProps<typeof FieldDescription>) {\n  const { formDescriptionId } = useFormField();\n\n  return <FieldDescription data-slot=\"form-description\" id={formDescriptionId} {...props} />;\n}\n\n/** Renders the field's validation error (or `children`), and nothing when there is no message. */\nfunction FormMessage({ children, ...props }: React.ComponentProps<typeof FieldError>) {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? \"\") : children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <FieldError data-slot=\"form-message\" id={formMessageId} {...props}>\n      {body}\n    </FieldError>\n  );\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n};\n"],"mappings":";;;;;;;;AAqBA,MAAM,OAAO;AAUb,MAAM,mBAAmB,MAAM,cAAqC,CAAC,CAA0B;;AAG/F,MAAM,aAGJ,EACA,GAAG,YACuC;CAC1C,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO,EAAE,MAAM,MAAM,KAAK;YACnD,oBAAC,YAAD,EAAY,GAAI,MAAQ,CAAA;CACC,CAAA;AAE/B;;AAGA,MAAM,qBAAqB;CACzB,MAAM,eAAe,MAAM,WAAW,gBAAgB;CACtD,MAAM,cAAc,MAAM,WAAW,eAAe;CACpD,MAAM,EAAE,kBAAkB,eAAe;CACzC,MAAM,YAAY,aAAa,EAAE,MAAM,aAAa,KAAK,CAAC;CAC1D,MAAM,aAAa,cAAc,aAAa,MAAM,SAAS;CAE7D,IAAI,CAAC,cACH,MAAM,IAAI,MAAM,gDAAgD;CAGlE,MAAM,EAAE,OAAO;CAEf,OAAO;EACL;EACA,MAAM,aAAa;EACnB,YAAY,GAAG,GAAG;EAClB,mBAAmB,GAAG,GAAG;EACzB,eAAe,GAAG,GAAG;EACrB,GAAG;CACL;AACF;AAOA,MAAM,kBAAkB,MAAM,cAAoC,CAAC,CAAyB;;AAG5F,SAAS,SAAS,EAAE,GAAG,SAA6C;CAClE,MAAM,KAAK,MAAM,MAAM;CAEvB,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO,EAAE,GAAG;YACpC,oBAAC,OAAD;GAAO,aAAU;GAAY,GAAI;EAAQ,CAAA;CACjB,CAAA;AAE9B;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAkD;CACnF,MAAM,EAAE,OAAO,eAAe,aAAa;CAE3C,OACE,oBAAC,YAAD;EACE,aAAU;EACV,cAAY,CAAC,CAAC;EACd,WAAW,GAAG,sCAAsC,SAAS;EAC7D,SAAS;EACT,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,GAAG,SAAiD;CACzE,MAAM,EAAE,OAAO,YAAY,mBAAmB,kBAAkB,aAAa;CAE7E,OACE,oBAAC,KAAK,MAAN;EACE,aAAU;EACV,IAAI;EACJ,oBAAkB,CAAC,QAAQ,GAAG,sBAAsB,GAAG,kBAAkB,GAAG;EAC5E,gBAAc,CAAC,CAAC;EAChB,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,GAAG,SAAwD;CACpF,MAAM,EAAE,sBAAsB,aAAa;CAE3C,OAAO,oBAAC,kBAAD;EAAkB,aAAU;EAAmB,IAAI;EAAmB,GAAI;CAAQ,CAAA;AAC3F;;AAGA,SAAS,YAAY,EAAE,UAAU,GAAG,SAAkD;CACpF,MAAM,EAAE,OAAO,kBAAkB,aAAa;CAC9C,MAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,EAAE,IAAI;CAEpD,IAAI,CAAC,MACH,OAAO;CAGT,OACE,oBAAC,YAAD;EAAY,aAAU;EAAe,IAAI;EAAe,GAAI;YACzD;CACS,CAAA;AAEhB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Form/Form.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  useFormContext,\n  useFormState,\n} from \"react-hook-form\";\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"@/primitives/Field\";\nimport { cn } from \"@/utils\";\n\n/** Root provider that shares one react-hook-form instance with all nested form pieces. */\n// Form is the react-hook-form binding layer. Its presentation pieces render the\n// Field primitives underneath so RHF forms share one visual system with non-RHF\n// forms built directly on Field.\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  /** The react-hook-form field name this context binds its descendants to. */\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\n/** Connects a single input to the form via RHF's `Controller`, exposing `field` to its render prop. */\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\n/** Hook for form pieces to read the current field's id, name, ARIA ids, and validation state. */\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\");\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  /** Generated id used to derive the field's control, description, and message ARIA ids. */\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);\n\n/** Wraps one field, generating an id so its label, control, and messages stay linked. */\nfunction FormItem({ ...props }: React.ComponentProps<typeof Field>) {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <Field data-slot=\"form-item\" {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\n/** Field label wired to the control's id and tinted destructive when the field is invalid. */\nfunction FormLabel({ className, ...props }: React.ComponentProps<typeof FieldLabel>) {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <FieldLabel\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-danger-txt\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\n/** Slots the actual input, applying the field's id, `aria-describedby`, and `aria-invalid`. */\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <Slot.Root\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\n/** Helper text for a field, linked to its control via `aria-describedby`. */\nfunction FormDescription({ ...props }: React.ComponentProps<typeof FieldDescription>) {\n  const { formDescriptionId } = useFormField();\n\n  return <FieldDescription data-slot=\"form-description\" id={formDescriptionId} {...props} />;\n}\n\n/** Renders the field's validation error (or `children`), and nothing when there is no message. */\nfunction FormMessage({ children, ...props }: React.ComponentProps<typeof FieldError>) {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? \"\") : children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <FieldError data-slot=\"form-message\" id={formMessageId} {...props}>\n      {body}\n    </FieldError>\n  );\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n};\n"],"mappings":";;;;;;;;AAqBA,MAAM,OAAO;AAUb,MAAM,mBAAmB,MAAM,cAAqC,CAAC,CAA0B;;AAG/F,MAAM,aAGJ,EACA,GAAG,YACuC;CAC1C,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO,EAAE,MAAM,MAAM,KAAK;YACnD,oBAAC,YAAD,EAAY,GAAI,MAAQ,CAAA;CACC,CAAA;AAE/B;;AAGA,MAAM,qBAAqB;CACzB,MAAM,eAAe,MAAM,WAAW,gBAAgB;CACtD,MAAM,cAAc,MAAM,WAAW,eAAe;CACpD,MAAM,EAAE,kBAAkB,eAAe;CACzC,MAAM,YAAY,aAAa,EAAE,MAAM,aAAa,KAAK,CAAC;CAC1D,MAAM,aAAa,cAAc,aAAa,MAAM,SAAS;CAE7D,IAAI,CAAC,cACH,MAAM,IAAI,MAAM,gDAAgD;CAGlE,MAAM,EAAE,OAAO;CAEf,OAAO;EACL;EACA,MAAM,aAAa;EACnB,YAAY,GAAG,GAAG;EAClB,mBAAmB,GAAG,GAAG;EACzB,eAAe,GAAG,GAAG;EACrB,GAAG;CACL;AACF;AAOA,MAAM,kBAAkB,MAAM,cAAoC,CAAC,CAAyB;;AAG5F,SAAS,SAAS,EAAE,GAAG,SAA6C;CAClE,MAAM,KAAK,MAAM,MAAM;CAEvB,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO,EAAE,GAAG;YACpC,oBAAC,OAAD;GAAO,aAAU;GAAY,GAAI;EAAQ,CAAA;CACjB,CAAA;AAE9B;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAkD;CACnF,MAAM,EAAE,OAAO,eAAe,aAAa;CAE3C,OACE,oBAAC,YAAD;EACE,aAAU;EACV,cAAY,CAAC,CAAC;EACd,WAAW,GAAG,qCAAqC,SAAS;EAC5D,SAAS;EACT,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,GAAG,SAAiD;CACzE,MAAM,EAAE,OAAO,YAAY,mBAAmB,kBAAkB,aAAa;CAE7E,OACE,oBAAC,KAAK,MAAN;EACE,aAAU;EACV,IAAI;EACJ,oBAAkB,CAAC,QAAQ,GAAG,sBAAsB,GAAG,kBAAkB,GAAG;EAC5E,gBAAc,CAAC,CAAC;EAChB,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,GAAG,SAAwD;CACpF,MAAM,EAAE,sBAAsB,aAAa;CAE3C,OAAO,oBAAC,kBAAD;EAAkB,aAAU;EAAmB,IAAI;EAAmB,GAAI;CAAQ,CAAA;AAC3F;;AAGA,SAAS,YAAY,EAAE,UAAU,GAAG,SAAkD;CACpF,MAAM,EAAE,OAAO,kBAAkB,aAAa;CAC9C,MAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,EAAE,IAAI;CAEpD,IAAI,CAAC,MACH,OAAO;CAGT,OACE,oBAAC,YAAD;EAAY,aAAU;EAAe,IAAI;EAAe,GAAI;YACzD;CACS,CAAA;AAEhB"}

package/dist/primitives/Heading/index.cjs

@@ -24,8 +24,8 @@ const headingVariants = (0, require("class-variance-authority").cva)("font-headi
 			right: "text-right"
 		},
 		gradient: {
-			true: "bg-gradient-to-r from-[var(--gradient-heading-from)] to-[var(--gradient-heading-to)] bg-clip-text text-transparent",
-			false: "text-foreground"
+			true: "bg-gradient-to-r from-[var(--theme-brand-700)] to-[var(--theme-brand-500-primary)] bg-clip-text text-transparent",
+			false: "text-primary-txt"
 		}
 	},
 	defaultVariants: {