@waveso/ui 0.5.0 → 0.6.0

package/dist/context-menu.js

@@ -35,7 +35,7 @@ function ContextMenuContent({ className, align = "start", alignOffset = 4, side
 		sideOffset,
 		children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
 			"data-slot": "context-menu-content",
-			className: cn("motion-slide ring-foreground/10 bg-popover text-popover-foreground z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 outline-none", className),
+			className: cn("motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-none", className),
 			finalFocus: resolveFinalFocus(restoreFocusOnClose, finalFocus),
 			...props
 		})
@@ -51,7 +51,7 @@ function ContextMenuLabel({ className, inset, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.GroupLabel, {
 		"data-slot": "context-menu-label",
 		"data-inset": inset,
-		className: cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7", className),
+		className: cn("text-muted px-1.5 py-1 text-xs font-medium data-inset:pl-7", className),
 		...props
 	});
 }
@@ -60,7 +60,7 @@ function ContextMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "context-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-clickable items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-primary focus:text-white data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-white group/context-menu-item relative flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }
@@ -74,7 +74,7 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(ContextMenu$1.SubmenuTrigger, {
 		"data-slot": "context-menu-sub-trigger",
 		"data-inset": inset,
-		className: cn("focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-clickable items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-primary focus:text-white data-open:bg-primary data-open:text-white flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
 	});
@@ -82,7 +82,7 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
 function ContextMenuSubContent({ align = "start", alignOffset = -4, side = "right", sideOffset = 0, className, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenuContent, {
 		"data-slot": "context-menu-sub-content",
-		className: cn("w-auto min-w-24 shadow-lg", className),
+		className: cn("w-auto min-w-24 shadow-md", className),
 		align,
 		alignOffset,
 		side,
@@ -94,7 +94,7 @@ function ContextMenuCheckboxItem({ className, children, checked, inset, ...props
 	return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
 		"data-slot": "context-menu-checkbox-item",
 		"data-inset": inset,
-		className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-primary focus:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		checked,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
@@ -114,7 +114,7 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
 		"data-slot": "context-menu-radio-item",
 		"data-inset": inset,
-		className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-primary focus:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			"data-slot": "context-menu-radio-item-indicator",
@@ -126,14 +126,14 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
 function ContextMenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
 		"data-slot": "context-menu-separator",
-		className: cn("bg-border -mx-1 my-1 h-px", className),
+		className: cn("bg-line -mx-1 my-1 h-px", className),
 		...props
 	});
 }
 function ContextMenuShortcut({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "context-menu-shortcut",
-		className: cn("text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className),
+		className: cn("text-muted group-focus/context-menu-item:text-white ml-auto text-xs tracking-widest", className),
 		...props
 	});
 }

package/dist/context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.js","names":["ContextMenuPrimitive"],"sources":["../src/context-menu.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { ChevronRightIcon, CheckIcon } from \"./lib/internal-icons\"\n\nimport { cn } from \"./lib/utils\"\nimport { resolveFinalFocus, type RestoreFocusOnClose } from \"./lib/focus\"\n\ntype ContextMenuProps = React.ComponentProps<typeof ContextMenuPrimitive.Root>\ntype ContextMenuPortalProps = React.ComponentProps<typeof ContextMenuPrimitive.Portal>\ntype ContextMenuTriggerProps = React.ComponentProps<typeof ContextMenuPrimitive.Trigger>\n\ntype ContextMenuContentProps = React.ComponentProps<typeof ContextMenuPrimitive.Popup> &\n  Pick<\n    React.ComponentProps<typeof ContextMenuPrimitive.Positioner>,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  > & {\n    /**\n     * Focus-restoration policy when the menu closes. Defaults to Base\n     * UI's behaviour (restore to the trigger). Use `\"keyboard\"` when\n     * the trigger is hover/focus-within–revealed so a pointer close\n     * doesn't keep it pinned visible. See {@link RestoreFocusOnClose}.\n     */\n    restoreFocusOnClose?: RestoreFocusOnClose\n  }\n\ntype ContextMenuGroupProps = React.ComponentProps<typeof ContextMenuPrimitive.Group>\n\ntype ContextMenuLabelProps = React.ComponentProps<typeof ContextMenuPrimitive.GroupLabel> & {\n  inset?: boolean\n}\n\ntype ContextMenuItemProps = React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}\n\ntype ContextMenuSubProps = React.ComponentProps<typeof ContextMenuPrimitive.SubmenuRoot>\n\ntype ContextMenuSubTriggerProps = React.ComponentProps<typeof ContextMenuPrimitive.SubmenuTrigger> & {\n  inset?: boolean\n}\n\ntype ContextMenuCheckboxItemProps = React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}\n\ntype ContextMenuRadioGroupProps = React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>\n\ntype ContextMenuRadioItemProps = React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {\n  inset?: boolean\n}\n\ntype ContextMenuSeparatorProps = React.ComponentProps<typeof ContextMenuPrimitive.Separator>\n\ntype ContextMenuSubContentProps = React.ComponentProps<typeof ContextMenuContent>\ntype ContextMenuShortcutProps = React.ComponentProps<\"span\">\n\nfunction ContextMenu(props: ContextMenuProps) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal(props: ContextMenuPortalProps) {\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n}\n\nfunction ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  restoreFocusOnClose,\n  finalFocus,\n  ...props\n}: ContextMenuContentProps) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        data-slot=\"context-menu-positioner\"\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"motion-slide ring-foreground/10 bg-popover text-popover-foreground z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 outline-none\",\n            className,\n          )}\n          finalFocus={resolveFinalFocus(restoreFocusOnClose, finalFocus)}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup(props: ContextMenuGroupProps) {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n}\n\nfunction ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuItemProps) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-clickable items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub(props: ContextMenuSubProps) {\n  return <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuSubTriggerProps) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-clickable items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  align = \"start\",\n  // -4 cancels the popup's p-1 (4px) top padding so the submenu's first\n  // item lines up with the parent item row, not the popup container edge.\n  alignOffset = -4,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: ContextMenuSubContentProps) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\"w-auto min-w-24 shadow-lg\", className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuCheckboxItemProps) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        data-slot=\"context-menu-checkbox-item-indicator\"\n        className=\"absolute right-2 pointer-events-none\"\n      >\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <CheckIcon />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup(props: ContextMenuRadioGroupProps) {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />\n}\n\nfunction ContextMenuRadioItem({ className, children, inset, ...props }: ContextMenuRadioItemProps) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"context-menu-radio-item-indicator\"\n        className=\"absolute right-2 pointer-events-none\"\n      >\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <CheckIcon />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuPortal,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n}"],"mappings":";;;;;;;;AA4DA,SAAS,YAAY,OAAyB;AAC5C,QAAO,oBAACA,cAAqB,MAAtB;EAA2B,aAAU;EAAe,GAAI;EAAS,CAAA;;AAG1E,SAAS,kBAAkB,OAA+B;AACxD,QAAO,oBAACA,cAAqB,QAAtB;EAA6B,aAAU;EAAsB,GAAI;EAAS,CAAA;;AAGnF,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAkC;AAC5E,QACE,oBAACA,cAAqB,SAAtB;EACE,aAAU;EACV,WAAW,GAAG,eAAe,UAAU;EACvC,GAAI;EACJ,CAAA;;AAIN,SAAS,mBAAmB,EAC1B,WACA,QAAQ,SACR,cAAc,GACd,OAAO,SACP,aAAa,GACb,qBACA,YACA,GAAG,SACuB;AAC1B,QACE,oBAACA,cAAqB,QAAtB,EAAA,UACE,oBAACA,cAAqB,YAAtB;EACE,aAAU;EACV,WAAU;EACH;EACM;EACP;EACM;YAEZ,oBAACA,cAAqB,OAAtB;GACE,aAAU;GACV,WAAW,GACT,0NACA,UACD;GACD,YAAY,kBAAkB,qBAAqB,WAAW;GAC9D,GAAI;GACJ,CAAA;EAC8B,CAAA,EACN,CAAA;;AAIlC,SAAS,iBAAiB,OAA8B;AACtD,QAAO,oBAACA,cAAqB,OAAtB;EAA4B,aAAU;EAAqB,GAAI;EAAS,CAAA;;AAGjF,SAAS,iBAAiB,EAAE,WAAW,OAAO,GAAG,SAAgC;AAC/E,QACE,oBAACA,cAAqB,YAAtB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,yEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EACvB,WACA,OACA,UAAU,WACV,GAAG,SACoB;AACvB,QACE,oBAACA,cAAqB,MAAtB;EACE,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAW,GACT,qnBACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,OAA4B;AAClD,QAAO,oBAACA,cAAqB,aAAtB;EAAkC,aAAU;EAAmB,GAAI;EAAS,CAAA;;AAGrF,SAAS,sBAAsB,EAAE,WAAW,OAAO,UAAU,GAAG,SAAqC;AACnG,QACE,qBAACA,cAAqB,gBAAtB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,4SACA,UACD;EACD,GAAI;YAPN,CASG,UACD,oBAAC,kBAAD,EAAkB,WAAU,WAAY,CAAA,CACJ;;;AAI1C,SAAS,sBAAsB,EAC7B,QAAQ,SAGR,cAAc,IACd,OAAO,SACP,aAAa,GACb,WACA,GAAG,SAC0B;AAC7B,QACE,oBAAC,oBAAD;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,UAAU;EAC9C;EACM;EACP;EACM;EACZ,GAAI;EACJ,CAAA;;AAIN,SAAS,wBAAwB,EAC/B,WACA,UACA,SACA,OACA,GAAG,SAC4B;AAC/B,QACE,qBAACA,cAAqB,cAAtB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,gUACA,UACD;EACQ;EACT,GAAI;YARN,CAUE,oBAAC,QAAD;GACE,aAAU;GACV,WAAU;aAEV,oBAACA,cAAqB,uBAAtB,EAAA,UACE,oBAAC,WAAD,EAAa,CAAA,EAC8B,CAAA;GACxC,CAAA,EACN,SACiC;;;AAIxC,SAAS,sBAAsB,OAAmC;AAChE,QAAO,oBAACA,cAAqB,YAAtB;EAAiC,aAAU;EAA2B,GAAI;EAAS,CAAA;;AAG5F,SAAS,qBAAqB,EAAE,WAAW,UAAU,OAAO,GAAG,SAAoC;AACjG,QACE,qBAACA,cAAqB,WAAtB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,gUACA,UACD;EACD,GAAI;YAPN,CASE,oBAAC,QAAD;GACE,aAAU;GACV,WAAU;aAEV,oBAACA,cAAqB,oBAAtB,EAAA,UACE,oBAAC,WAAD,EAAa,CAAA,EAC2B,CAAA;GACrC,CAAA,EACN,SAC8B;;;AAIrC,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAoC;AAChF,QACE,oBAACA,cAAqB,WAAtB;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,UAAU;EACrD,GAAI;EACJ,CAAA;;AAIN,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAmC;AAC9E,QACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,8GACA,UACD;EACD,GAAI;EACJ,CAAA"}
+{"version":3,"file":"context-menu.js","names":["ContextMenuPrimitive"],"sources":["../src/context-menu.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { ChevronRightIcon, CheckIcon } from \"./lib/internal-icons\"\n\nimport { cn } from \"./lib/utils\"\nimport { resolveFinalFocus, type RestoreFocusOnClose } from \"./lib/focus\"\n\ntype ContextMenuProps = React.ComponentProps<typeof ContextMenuPrimitive.Root>\ntype ContextMenuPortalProps = React.ComponentProps<typeof ContextMenuPrimitive.Portal>\ntype ContextMenuTriggerProps = React.ComponentProps<typeof ContextMenuPrimitive.Trigger>\n\ntype ContextMenuContentProps = React.ComponentProps<typeof ContextMenuPrimitive.Popup> &\n  Pick<\n    React.ComponentProps<typeof ContextMenuPrimitive.Positioner>,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  > & {\n    /**\n     * Focus-restoration policy when the menu closes. Defaults to Base\n     * UI's behaviour (restore to the trigger). Use `\"keyboard\"` when\n     * the trigger is hover/focus-within–revealed so a pointer close\n     * doesn't keep it pinned visible. See {@link RestoreFocusOnClose}.\n     */\n    restoreFocusOnClose?: RestoreFocusOnClose\n  }\n\ntype ContextMenuGroupProps = React.ComponentProps<typeof ContextMenuPrimitive.Group>\n\ntype ContextMenuLabelProps = React.ComponentProps<typeof ContextMenuPrimitive.GroupLabel> & {\n  inset?: boolean\n}\n\ntype ContextMenuItemProps = React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}\n\ntype ContextMenuSubProps = React.ComponentProps<typeof ContextMenuPrimitive.SubmenuRoot>\n\ntype ContextMenuSubTriggerProps = React.ComponentProps<typeof ContextMenuPrimitive.SubmenuTrigger> & {\n  inset?: boolean\n}\n\ntype ContextMenuCheckboxItemProps = React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}\n\ntype ContextMenuRadioGroupProps = React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>\n\ntype ContextMenuRadioItemProps = React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {\n  inset?: boolean\n}\n\ntype ContextMenuSeparatorProps = React.ComponentProps<typeof ContextMenuPrimitive.Separator>\n\ntype ContextMenuSubContentProps = React.ComponentProps<typeof ContextMenuContent>\ntype ContextMenuShortcutProps = React.ComponentProps<\"span\">\n\nfunction ContextMenu(props: ContextMenuProps) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal(props: ContextMenuPortalProps) {\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n}\n\nfunction ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  restoreFocusOnClose,\n  finalFocus,\n  ...props\n}: ContextMenuContentProps) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        data-slot=\"context-menu-positioner\"\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-none\",\n            className,\n          )}\n          finalFocus={resolveFinalFocus(restoreFocusOnClose, finalFocus)}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup(props: ContextMenuGroupProps) {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n}\n\nfunction ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-muted px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuItemProps) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-primary focus:text-white data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-white group/context-menu-item relative flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub(props: ContextMenuSubProps) {\n  return <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuSubTriggerProps) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-primary focus:text-white data-open:bg-primary data-open:text-white flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  align = \"start\",\n  // -4 cancels the popup's p-1 (4px) top padding so the submenu's first\n  // item lines up with the parent item row, not the popup container edge.\n  alignOffset = -4,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: ContextMenuSubContentProps) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\"w-auto min-w-24 shadow-md\", className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuCheckboxItemProps) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-primary focus:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        data-slot=\"context-menu-checkbox-item-indicator\"\n        className=\"absolute right-2 pointer-events-none\"\n      >\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <CheckIcon />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup(props: ContextMenuRadioGroupProps) {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />\n}\n\nfunction ContextMenuRadioItem({ className, children, inset, ...props }: ContextMenuRadioItemProps) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-primary focus:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"context-menu-radio-item-indicator\"\n        className=\"absolute right-2 pointer-events-none\"\n      >\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <CheckIcon />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-line -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"text-muted group-focus/context-menu-item:text-white ml-auto text-xs tracking-widest\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuPortal,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n}"],"mappings":";;;;;;;;AA4DA,SAAS,YAAY,OAAyB;AAC5C,QAAO,oBAACA,cAAqB,MAAtB;EAA2B,aAAU;EAAe,GAAI;EAAS,CAAA;;AAG1E,SAAS,kBAAkB,OAA+B;AACxD,QAAO,oBAACA,cAAqB,QAAtB;EAA6B,aAAU;EAAsB,GAAI;EAAS,CAAA;;AAGnF,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAkC;AAC5E,QACE,oBAACA,cAAqB,SAAtB;EACE,aAAU;EACV,WAAW,GAAG,eAAe,UAAU;EACvC,GAAI;EACJ,CAAA;;AAIN,SAAS,mBAAmB,EAC1B,WACA,QAAQ,SACR,cAAc,GACd,OAAO,SACP,aAAa,GACb,qBACA,YACA,GAAG,SACuB;AAC1B,QACE,oBAACA,cAAqB,QAAtB,EAAA,UACE,oBAACA,cAAqB,YAAtB;EACE,aAAU;EACV,WAAU;EACH;EACM;EACP;EACM;YAEZ,oBAACA,cAAqB,OAAtB;GACE,aAAU;GACV,WAAW,GACT,gNACA,UACD;GACD,YAAY,kBAAkB,qBAAqB,WAAW;GAC9D,GAAI;GACJ,CAAA;EAC8B,CAAA,EACN,CAAA;;AAIlC,SAAS,iBAAiB,OAA8B;AACtD,QAAO,oBAACA,cAAqB,OAAtB;EAA4B,aAAU;EAAqB,GAAI;EAAS,CAAA;;AAGjF,SAAS,iBAAiB,EAAE,WAAW,OAAO,GAAG,SAAgC;AAC/E,QACE,oBAACA,cAAqB,YAAtB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,8DACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EACvB,WACA,OACA,UAAU,WACV,GAAG,SACoB;AACvB,QACE,oBAACA,cAAqB,MAAtB;EACE,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAW,GACT,8lBACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,OAA4B;AAClD,QAAO,oBAACA,cAAqB,aAAtB;EAAkC,aAAU;EAAmB,GAAI;EAAS,CAAA;;AAGrF,SAAS,sBAAsB,EAAE,WAAW,OAAO,UAAU,GAAG,SAAqC;AACnG,QACE,qBAACA,cAAqB,gBAAtB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,sRACA,UACD;EACD,GAAI;YAPN,CASG,UACD,oBAAC,kBAAD,EAAkB,WAAU,WAAY,CAAA,CACJ;;;AAI1C,SAAS,sBAAsB,EAC7B,QAAQ,SAGR,cAAc,IACd,OAAO,SACP,aAAa,GACb,WACA,GAAG,SAC0B;AAC7B,QACE,oBAAC,oBAAD;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,UAAU;EAC9C;EACM;EACP;EACM;EACZ,GAAI;EACJ,CAAA;;AAIN,SAAS,wBAAwB,EAC/B,WACA,UACA,SACA,OACA,GAAG,SAC4B;AAC/B,QACE,qBAACA,cAAqB,cAAtB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,qTACA,UACD;EACQ;EACT,GAAI;YARN,CAUE,oBAAC,QAAD;GACE,aAAU;GACV,WAAU;aAEV,oBAACA,cAAqB,uBAAtB,EAAA,UACE,oBAAC,WAAD,EAAa,CAAA,EAC8B,CAAA;GACxC,CAAA,EACN,SACiC;;;AAIxC,SAAS,sBAAsB,OAAmC;AAChE,QAAO,oBAACA,cAAqB,YAAtB;EAAiC,aAAU;EAA2B,GAAI;EAAS,CAAA;;AAG5F,SAAS,qBAAqB,EAAE,WAAW,UAAU,OAAO,GAAG,SAAoC;AACjG,QACE,qBAACA,cAAqB,WAAtB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,qTACA,UACD;EACD,GAAI;YAPN,CASE,oBAAC,QAAD;GACE,aAAU;GACV,WAAU;aAEV,oBAACA,cAAqB,oBAAtB,EAAA,UACE,oBAAC,WAAD,EAAa,CAAA,EAC2B,CAAA;GACrC,CAAA,EACN,SAC8B;;;AAIrC,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAoC;AAChF,QACE,oBAACA,cAAqB,WAAtB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAIN,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAmC;AAC9E,QACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,uFACA,UACD;EACD,GAAI;EACJ,CAAA"}

package/dist/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","names":[],"sources":["../src/dialog.tsx"],"mappings":";;;;;KASK,WAAA,GAAc,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,IAAA;;;AANE;;;;;;;;EAiB/D,uBAAA;AAAA;AAAA,KAEG,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,OAAA;AAAA,KACjE,iBAAA,GAAoB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,MAAA;AAAA,KAChE,gBAAA,GAAmB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,KAAA;AAAA,KAC/D,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,QAAA;AAAA,KACjE,gBAAA,GAAmB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,KAAA;AAAA,KAC/D,gBAAA,GAAmB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,KAAA;AAAA,KAC/D,sBAAA,GAAyB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,WAAA;AAAA,KAErE,kBAAA,GAAqB,gBAAA;EACxB,eAAA;AAAA;AAAA,KAGG,iBAAA,GAAoB,KAAA,CAAM,cAAA;EAC7B,eAAA;AAAA;AAAA,iBAGO,MAAA,CAAA;EAAS,uBAAA;EAAA,GAA4B;AAAA,GAAS,WAAA,GAAW,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIzD,aAAA,CAAA;EAAA,GAAmB;AAAA,GAAS,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9C,YAAA,CAAA;EAAA,GAAkB;AAAA,GAAS,iBAAA,GAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5C,WAAA,CAAA;EAAA,GAAiB;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI1C,aAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAaZ,aAAA,CAAA;EACP,SAAA;EACA,QAAA;EACA,eAAA;EAAA,GACG;AAAA,GACF,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiCZ,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,KAAA,CAAM,cAAA,UAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUjE,YAAA,CAAA;EACP,SAAA;EACA,eAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,iBAAA,GAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBX,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUrD,iBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,sBAAA,GAAsB,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"dialog.d.ts","names":[],"sources":["../src/dialog.tsx"],"mappings":";;;;;KASK,WAAA,GAAc,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,IAAA;;;AANE;;;;;;;;EAiB/D,uBAAA;AAAA;AAAA,KAEG,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,OAAA;AAAA,KACjE,iBAAA,GAAoB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,MAAA;AAAA,KAChE,gBAAA,GAAmB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,KAAA;AAAA,KAC/D,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,QAAA;AAAA,KACjE,gBAAA,GAAmB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,KAAA;AAAA,KAC/D,gBAAA,GAAmB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,KAAA;AAAA,KAC/D,sBAAA,GAAyB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,WAAA;AAAA,KAErE,kBAAA,GAAqB,gBAAA;EACxB,eAAA;AAAA;AAAA,KAGG,iBAAA,GAAoB,KAAA,CAAM,cAAA;EAC7B,eAAA;AAAA;AAAA,iBAGO,MAAA,CAAA;EAAS,uBAAA;EAAA,GAA4B;AAAA,GAAS,WAAA,GAAW,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIzD,aAAA,CAAA;EAAA,GAAmB;AAAA,GAAS,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9C,YAAA,CAAA;EAAA,GAAkB;AAAA,GAAS,iBAAA,GAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5C,WAAA,CAAA;EAAA,GAAiB;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI1C,aAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAaZ,aAAA,CAAA;EACP,SAAA;EACA,QAAA;EACA,eAAA;EAAA,GACG;AAAA,GACF,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiCZ,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,KAAA,CAAM,cAAA,UAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUjE,YAAA,CAAA;EACP,SAAA;EACA,eAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,iBAAA,GAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBX,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAYrD,iBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,sBAAA,GAAsB,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/dialog.js

@@ -41,7 +41,7 @@ function DialogOverlay({ className, ...props }) {
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
 		"data-slot": "dialog-content",
-		className: cn("motion-scale bg-background ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 outline-none sm:max-w-sm", className),
+		className: cn("motion-scale-lg bg-foundation ring-contrast/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-4 text-sm ring-1 outline-none sm:max-w-sm", className),
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog$1.Close, {
 			"data-slot": "dialog-close",
@@ -67,7 +67,7 @@ function DialogHeader({ className, ...props }) {
 function DialogFooter({ className, showCloseButton = false, children, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "dialog-footer",
-		className: cn("bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end", className),
+		className: cn("bg-secondary/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-lg border-t p-4 sm:flex-row sm:justify-end", className),
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
 			render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
@@ -78,14 +78,14 @@ function DialogFooter({ className, showCloseButton = false, children, ...props }
 function DialogTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Title, {
 		"data-slot": "dialog-title",
-		className: cn("text-base leading-none font-medium", className),
+		className: cn("text-base leading-none font-medium pr-8", className),
 		...props
 	});
 }
 function DialogDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Description, {
 		"data-slot": "dialog-description",
-		className: cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className),
+		className: cn("text-muted *:[a]:hover:text-contrast text-sm *:[a]:underline *:[a]:underline-offset-3", className),
 		...props
 	});
 }

package/dist/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":["DialogPrimitive"],"sources":["../src/dialog.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { CloseIcon } from \"./lib/internal-icons\"\n\ntype DialogProps = React.ComponentProps<typeof DialogPrimitive.Root> & {\n  /**\n   * When `true`, clicking outside the dialog (backdrop / pointer\n   * dismissal) does not close it. It can then only be closed via an\n   * explicit action — the close button, `Esc`, or programmatically.\n   *\n   * Use this for dialogs containing forms, wizards, or other content\n   * where an accidental outside click shouldn't discard the user's work.\n   *\n   * @default false\n   */\n  disablePointerDismissal?: boolean\n}\ntype DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>\ntype DialogPortalProps = React.ComponentProps<typeof DialogPrimitive.Portal>\ntype DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>\ntype DialogOverlayProps = React.ComponentProps<typeof DialogPrimitive.Backdrop>\ntype DialogPopupProps = React.ComponentProps<typeof DialogPrimitive.Popup>\ntype DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>\ntype DialogDescriptionProps = React.ComponentProps<typeof DialogPrimitive.Description>\n\ntype DialogContentProps = DialogPopupProps & {\n  showCloseButton?: boolean\n}\n\ntype DialogFooterProps = React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}\n\nfunction Dialog({ disablePointerDismissal, ...props }: DialogProps) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" disablePointerDismissal={disablePointerDismissal} {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogTriggerProps) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPortalProps) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogCloseProps) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogOverlayProps) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"motion-scrim fixed inset-0 isolate z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogContentProps) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"motion-scale bg-background ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 outline-none sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <CloseIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: DialogFooterProps) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n"],"mappings":";;;;;;;;AAsCA,SAAS,OAAO,EAAE,yBAAyB,GAAG,SAAsB;AAClE,QAAO,oBAACA,SAAgB,MAAjB;EAAsB,aAAU;EAAkC;EAAyB,GAAI;EAAS,CAAA;;AAGjH,SAAS,cAAc,EAAE,GAAG,SAA6B;AACvD,QAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,aAAa,EAAE,GAAG,SAA4B;AACrD,QAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAGxE,SAAS,YAAY,EAAE,GAAG,SAA2B;AACnD,QAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,cAAc,EACrB,WACA,GAAG,SACkB;AACrB,QACE,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,iGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,UACA,kBAAkB,MAClB,GAAG,SACkB;AACrB,QACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,EAAiB,CAAA,EACjB,qBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,gNACA,UACD;EACD,GAAI;YANN,CAQG,UACA,mBACC,qBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,QACE,oBAAC,QAAD;IACE,SAAQ;IACR,WAAU;IACV,MAAK;IACL,CAAA;aAPN,CAUE,oBAAC,WAAD,EAAa,CAAA,EACb,oBAAC,QAAD;IAAM,WAAU;cAAU;IAAY,CAAA,CAChB;KAEJ;IACX,EAAA,CAAA;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uBAAuB,UAAU;EAC/C,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SACiB;AACpB,QACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,4GACA,UACD;EACD,GAAI;YANN,CAQG,UACA,mBACC,oBAACA,SAAgB,OAAjB;GAAuB,QAAQ,oBAAC,QAAD,EAAQ,SAAQ,WAAY,CAAA;aAAE;GAErC,CAAA,CAEtB;;;AAIV,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,UAAU;EAC9D,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACsB;AACzB,QACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GACT,sGACA,UACD;EACD,GAAI;EACJ,CAAA"}
+{"version":3,"file":"dialog.js","names":["DialogPrimitive"],"sources":["../src/dialog.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { CloseIcon } from \"./lib/internal-icons\"\n\ntype DialogProps = React.ComponentProps<typeof DialogPrimitive.Root> & {\n  /**\n   * When `true`, clicking outside the dialog (backdrop / pointer\n   * dismissal) does not close it. It can then only be closed via an\n   * explicit action — the close button, `Esc`, or programmatically.\n   *\n   * Use this for dialogs containing forms, wizards, or other content\n   * where an accidental outside click shouldn't discard the user's work.\n   *\n   * @default false\n   */\n  disablePointerDismissal?: boolean\n}\ntype DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>\ntype DialogPortalProps = React.ComponentProps<typeof DialogPrimitive.Portal>\ntype DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>\ntype DialogOverlayProps = React.ComponentProps<typeof DialogPrimitive.Backdrop>\ntype DialogPopupProps = React.ComponentProps<typeof DialogPrimitive.Popup>\ntype DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>\ntype DialogDescriptionProps = React.ComponentProps<typeof DialogPrimitive.Description>\n\ntype DialogContentProps = DialogPopupProps & {\n  showCloseButton?: boolean\n}\n\ntype DialogFooterProps = React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}\n\nfunction Dialog({ disablePointerDismissal, ...props }: DialogProps) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" disablePointerDismissal={disablePointerDismissal} {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogTriggerProps) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPortalProps) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogCloseProps) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogOverlayProps) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"motion-scrim fixed inset-0 isolate z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogContentProps) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"motion-scale-lg bg-foundation ring-contrast/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-4 text-sm ring-1 outline-none sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <CloseIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: DialogFooterProps) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"bg-secondary/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-lg border-t p-4 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      // pr-8 reserves room for the close button (absolute, top-2 right-2) so a\n      // long title wraps before it instead of running underneath.\n      className={cn(\"text-base leading-none font-medium pr-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-muted *:[a]:hover:text-contrast text-sm *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n"],"mappings":";;;;;;;;AAsCA,SAAS,OAAO,EAAE,yBAAyB,GAAG,SAAsB;AAClE,QAAO,oBAACA,SAAgB,MAAjB;EAAsB,aAAU;EAAkC;EAAyB,GAAI;EAAS,CAAA;;AAGjH,SAAS,cAAc,EAAE,GAAG,SAA6B;AACvD,QAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,aAAa,EAAE,GAAG,SAA4B;AACrD,QAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAGxE,SAAS,YAAY,EAAE,GAAG,SAA2B;AACnD,QAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,cAAc,EACrB,WACA,GAAG,SACkB;AACrB,QACE,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,iGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,UACA,kBAAkB,MAClB,GAAG,SACkB;AACrB,QACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,EAAiB,CAAA,EACjB,qBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,iNACA,UACD;EACD,GAAI;YANN,CAQG,UACA,mBACC,qBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,QACE,oBAAC,QAAD;IACE,SAAQ;IACR,WAAU;IACV,MAAK;IACL,CAAA;aAPN,CAUE,oBAAC,WAAD,EAAa,CAAA,EACb,oBAAC,QAAD;IAAM,WAAU;cAAU;IAAY,CAAA,CAChB;KAEJ;IACX,EAAA,CAAA;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uBAAuB,UAAU;EAC/C,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SACiB;AACpB,QACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,gHACA,UACD;EACD,GAAI;YANN,CAQG,UACA,mBACC,oBAACA,SAAgB,OAAjB;GAAuB,QAAQ,oBAAC,QAAD,EAAQ,SAAQ,WAAY,CAAA;aAAE;GAErC,CAAA,CAEtB;;;AAIV,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EAGV,WAAW,GAAG,2CAA2C,UAAU;EACnE,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACsB;AACzB,QACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GACT,yFACA,UACD;EACD,GAAI;EACJ,CAAA"}

package/dist/drawer.js

@@ -43,12 +43,12 @@ function DrawerContent({ className, children, showCloseButton = false, ...props
 		className: "fixed inset-0 z-50 outline-none",
 		children: /* @__PURE__ */ jsxs(Drawer$1.Popup, {
 			"data-slot": "drawer-content",
-			className: cn("group/drawer-content bg-background fixed z-50 flex flex-col overflow-y-auto text-sm shadow-lg outline-none", "transition-[translate] duration-200 ease-out data-[swiping]:duration-0", "data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t", "data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b", "data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm", "data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm", "data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full", "data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full", "data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full", "data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full", className),
+			className: cn("group/drawer-content bg-foundation fixed z-50 flex flex-col overflow-y-auto text-sm shadow-lg outline-none", "transition-[translate] duration-(--duration-lg) ease-(--ease) data-[swiping]:duration-0", "data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-lg data-[swipe-direction=down]:border-t", "data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-lg data-[swipe-direction=up]:border-b", "data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-lg data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm", "data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-lg data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm", "data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full", "data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full", "data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full", "data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full", className),
 			...props,
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					"data-slot": "drawer-drag-handle",
-					className: "bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block"
+					className: "bg-secondary mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block"
 				}),
 				children,
 				showCloseButton && /* @__PURE__ */ jsxs(Drawer$1.Close, {
@@ -84,14 +84,14 @@ function DrawerFooter({ className, ...props }) {
 function DrawerTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Drawer$1.Title, {
 		"data-slot": "drawer-title",
-		className: cn("text-foreground text-base font-medium", className),
+		className: cn("text-contrast text-base font-medium", className),
 		...props
 	});
 }
 function DrawerDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Drawer$1.Description, {
 		"data-slot": "drawer-description",
-		className: cn("text-muted-foreground text-sm", className),
+		className: cn("text-muted text-sm", className),
 		...props
 	});
 }

package/dist/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","names":["DrawerPrimitive"],"sources":["../src/drawer.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { CloseIcon } from \"./lib/internal-icons\"\n\ntype DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>\ntype DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>\ntype DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>\ntype DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>\ntype DrawerOverlayProps = React.ComponentProps<typeof DrawerPrimitive.Backdrop>\ntype DrawerPopupProps = React.ComponentProps<typeof DrawerPrimitive.Popup>\ntype DrawerTitleProps = React.ComponentProps<typeof DrawerPrimitive.Title>\ntype DrawerDescriptionProps = React.ComponentProps<typeof DrawerPrimitive.Description>\ntype DrawerHeaderProps = React.ComponentProps<\"div\">\ntype DrawerFooterProps = React.ComponentProps<\"div\">\n\ntype DrawerContentProps = DrawerPopupProps & {\n  showCloseButton?: boolean\n}\n\nfunction Drawer({ ...props }: DrawerProps) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({ ...props }: DrawerTriggerProps) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({ ...props }: DrawerPortalProps) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({ ...props }: DrawerCloseProps) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({ className, ...props }: DrawerOverlayProps) {\n  return (\n    <DrawerPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"motion-scrim fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  showCloseButton = false,\n  ...props\n}: DrawerContentProps) {\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Viewport\n        data-slot=\"drawer-viewport\"\n        className=\"fixed inset-0 z-50 outline-none\"\n      >\n        <DrawerPrimitive.Popup\n          data-slot=\"drawer-content\"\n          className={cn(\n            // Base layout & appearance\n            \"group/drawer-content bg-background fixed z-50 flex flex-col overflow-y-auto text-sm shadow-lg outline-none\",\n            // Transition — animate translate, disable during swipe\n            \"transition-[translate] duration-200 ease-out data-[swiping]:duration-0\",\n            // Bottom drawer (swipeDirection=\"down\")\n            \"data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t\",\n            // Top drawer (swipeDirection=\"up\")\n            \"data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b\",\n            // Left drawer (swipeDirection=\"left\")\n            \"data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm\",\n            // Right drawer (swipeDirection=\"right\")\n            \"data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm\",\n            // Enter/exit slide — bottom\n            \"data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full\",\n            // Enter/exit slide — top\n            \"data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full\",\n            // Enter/exit slide — left\n            \"data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full\",\n            // Enter/exit slide — right\n            \"data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full\",\n            className,\n          )}\n          {...props}\n        >\n          {/* Drag handle — visible only for bottom drawers */}\n          <div\n            data-slot=\"drawer-drag-handle\"\n            className=\"bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block\"\n          />\n          {children}\n          {showCloseButton && (\n            <DrawerPrimitive.Close\n              data-slot=\"drawer-close\"\n              render={\n                <Button\n                  variant=\"ghost\"\n                  className=\"absolute top-2 right-2\"\n                  size=\"icon-sm\"\n                />\n              }\n            >\n              <CloseIcon />\n              <span className=\"sr-only\">Close</span>\n            </DrawerPrimitive.Close>\n          )}\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: DrawerHeaderProps) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:text-left\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: DrawerFooterProps) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerTitleProps) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: DrawerDescriptionProps) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n"],"mappings":";;;;;;;;AAwBA,SAAS,OAAO,EAAE,GAAG,SAAsB;AACzC,QAAO,oBAACA,SAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;EAAS,CAAA;;AAG/D,SAAS,cAAc,EAAE,GAAG,SAA6B;AACvD,QAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,aAAa,EAAE,GAAG,SAA4B;AACrD,QAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAGxE,SAAS,YAAY,EAAE,GAAG,SAA2B;AACnD,QAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,yFACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,UACA,kBAAkB,OAClB,GAAG,SACkB;AACrB,QACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,EAAiB,CAAA,EACjB,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAU;YAEV,qBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GAET,8GAEA,0EAEA,uOAEA,wNAEA,oOAEA,2OAEA,uIAEA,qIAEA,yIAEA,yIACA,UACD;GACD,GAAI;aAzBN;IA4BE,oBAAC,OAAD;KACE,aAAU;KACV,WAAU;KACV,CAAA;IACD;IACA,mBACC,qBAACA,SAAgB,OAAjB;KACE,aAAU;KACV,QACE,oBAAC,QAAD;MACE,SAAQ;MACR,WAAU;MACV,MAAK;MACL,CAAA;eAPN,CAUE,oBAAC,WAAD,EAAa,CAAA,EACb,oBAAC,QAAD;MAAM,WAAU;gBAAU;MAAY,CAAA,CAChB;;IAEJ;;EACC,CAAA,CACd,EAAA,CAAA;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kKACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,UAAU;EAC3D,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,yCAAyC,UAAU;EACjE,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACsB;AACzB,QACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;EACJ,CAAA"}
+{"version":3,"file":"drawer.js","names":["DrawerPrimitive"],"sources":["../src/drawer.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { CloseIcon } from \"./lib/internal-icons\"\n\ntype DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>\ntype DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>\ntype DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>\ntype DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>\ntype DrawerOverlayProps = React.ComponentProps<typeof DrawerPrimitive.Backdrop>\ntype DrawerPopupProps = React.ComponentProps<typeof DrawerPrimitive.Popup>\ntype DrawerTitleProps = React.ComponentProps<typeof DrawerPrimitive.Title>\ntype DrawerDescriptionProps = React.ComponentProps<typeof DrawerPrimitive.Description>\ntype DrawerHeaderProps = React.ComponentProps<\"div\">\ntype DrawerFooterProps = React.ComponentProps<\"div\">\n\ntype DrawerContentProps = DrawerPopupProps & {\n  showCloseButton?: boolean\n}\n\nfunction Drawer({ ...props }: DrawerProps) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({ ...props }: DrawerTriggerProps) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({ ...props }: DrawerPortalProps) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({ ...props }: DrawerCloseProps) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({ className, ...props }: DrawerOverlayProps) {\n  return (\n    <DrawerPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"motion-scrim fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  showCloseButton = false,\n  ...props\n}: DrawerContentProps) {\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Viewport\n        data-slot=\"drawer-viewport\"\n        className=\"fixed inset-0 z-50 outline-none\"\n      >\n        <DrawerPrimitive.Popup\n          data-slot=\"drawer-content\"\n          className={cn(\n            // Base layout & appearance\n            \"group/drawer-content bg-foundation fixed z-50 flex flex-col overflow-y-auto text-sm shadow-lg outline-none\",\n            // Transition — animate translate at the lg tier + the one curve; disable during swipe\n            \"transition-[translate] duration-(--duration-lg) ease-(--ease) data-[swiping]:duration-0\",\n            // Bottom drawer (swipeDirection=\"down\")\n            \"data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-lg data-[swipe-direction=down]:border-t\",\n            // Top drawer (swipeDirection=\"up\")\n            \"data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-lg data-[swipe-direction=up]:border-b\",\n            // Left drawer (swipeDirection=\"left\")\n            \"data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-lg data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm\",\n            // Right drawer (swipeDirection=\"right\")\n            \"data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-lg data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm\",\n            // Enter/exit slide — bottom\n            \"data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full\",\n            // Enter/exit slide — top\n            \"data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full\",\n            // Enter/exit slide — left\n            \"data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full\",\n            // Enter/exit slide — right\n            \"data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full\",\n            className,\n          )}\n          {...props}\n        >\n          {/* Drag handle — visible only for bottom drawers */}\n          <div\n            data-slot=\"drawer-drag-handle\"\n            className=\"bg-secondary mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block\"\n          />\n          {children}\n          {showCloseButton && (\n            <DrawerPrimitive.Close\n              data-slot=\"drawer-close\"\n              render={\n                <Button\n                  variant=\"ghost\"\n                  className=\"absolute top-2 right-2\"\n                  size=\"icon-sm\"\n                />\n              }\n            >\n              <CloseIcon />\n              <span className=\"sr-only\">Close</span>\n            </DrawerPrimitive.Close>\n          )}\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: DrawerHeaderProps) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:text-left\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: DrawerFooterProps) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerTitleProps) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-contrast text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: DrawerDescriptionProps) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n"],"mappings":";;;;;;;;AAwBA,SAAS,OAAO,EAAE,GAAG,SAAsB;AACzC,QAAO,oBAACA,SAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;EAAS,CAAA;;AAG/D,SAAS,cAAc,EAAE,GAAG,SAA6B;AACvD,QAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,aAAa,EAAE,GAAG,SAA4B;AACrD,QAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAGxE,SAAS,YAAY,EAAE,GAAG,SAA2B;AACnD,QAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,yFACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,UACA,kBAAkB,OAClB,GAAG,SACkB;AACrB,QACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,EAAiB,CAAA,EACjB,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAU;YAEV,qBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GAET,8GAEA,2FAEA,uOAEA,wNAEA,oOAEA,2OAEA,uIAEA,qIAEA,yIAEA,yIACA,UACD;GACD,GAAI;aAzBN;IA4BE,oBAAC,OAAD;KACE,aAAU;KACV,WAAU;KACV,CAAA;IACD;IACA,mBACC,qBAACA,SAAgB,OAAjB;KACE,aAAU;KACV,QACE,oBAAC,QAAD;MACE,SAAQ;MACR,WAAU;MACV,MAAK;MACL,CAAA;eAPN,CAUE,oBAAC,WAAD,EAAa,CAAA,EACb,oBAAC,QAAD;MAAM,WAAU;gBAAU;MAAY,CAAA,CAChB;;IAEJ;;EACC,CAAA,CACd,EAAA,CAAA;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kKACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,UAAU;EAC3D,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACsB;AACzB,QACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,sBAAsB,UAAU;EAC9C,GAAI;EACJ,CAAA"}

package/dist/field.js

@@ -21,14 +21,14 @@ function FieldLabel({ className, ...props }) {
 function FieldControl({ className, ...props }) {
 	return /* @__PURE__ */ jsx(FieldPrimitive.Control, {
 		"data-slot": "field-control",
-		className: cn("rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", className),
+		className: cn("rounded-md outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", className),
 		...props
 	});
 }
 function FieldDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx(FieldPrimitive.Description, {
 		"data-slot": "field-description",
-		className: cn("text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className),
+		className: cn("text-muted text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className),
 		...props
 	});
 }

package/dist/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","names":[],"sources":["../src/field.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\"\n\nimport { cn } from \"./lib/utils\"\n\nexport type FieldProps = React.ComponentProps<typeof FieldPrimitive.Root>\nexport type FieldLabelProps = React.ComponentProps<typeof FieldPrimitive.Label>\nexport type FieldDescriptionProps = React.ComponentProps<typeof FieldPrimitive.Description>\nexport type FieldItemProps = React.ComponentProps<typeof FieldPrimitive.Item>\nexport type FieldErrorProps = React.ComponentProps<typeof FieldPrimitive.Error>\nexport type FieldValidityProps = React.ComponentProps<typeof FieldPrimitive.Validity>\n\n// `ref` matters here for React Hook Form / focus management; it flows\n// through to the control via standard prop forwarding (React 19).\nexport type FieldControlProps = React.ComponentProps<typeof FieldPrimitive.Control>\n\nexport function Field({ className, ...props }: FieldProps) {\n  return (\n    <FieldPrimitive.Root\n      data-slot=\"field\"\n      className={cn(\n        \"grid w-full gap-2 data-[invalid]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function FieldLabel({ className, ...props }: FieldLabelProps) {\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function FieldControl({ className, ...props }: FieldControlProps) {\n  return (\n    <FieldPrimitive.Control\n      data-slot=\"field-control\"\n      className={cn(\n        \"rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function FieldDescription({ className, ...props }: FieldDescriptionProps) {\n  return (\n    <FieldPrimitive.Description\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function FieldItem({ className, ...props }: FieldItemProps) {\n  return (\n    <FieldPrimitive.Item\n      data-slot=\"field-item\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport function FieldError({ className, ...props }: FieldErrorProps) {\n  return (\n    <FieldPrimitive.Error\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-sm font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\n// Base UI's Validity does not accept `className`/`ref` (and we don't need to style it yet), so we export it as-is.\nexport const FieldValidity = FieldPrimitive.Validity\n\nexport { FieldPrimitive }"],"mappings":";;;;;;AAkBA,SAAgB,MAAM,EAAE,WAAW,GAAG,SAAqB;AACzD,QACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GACT,qDACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;AACnE,QACE,oBAAC,eAAe,OAAhB;EACE,aAAU;EACV,WAAW,GACT,kGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,aAAa,EAAE,WAAW,GAAG,SAA4B;AACvE,QACE,oBAAC,eAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,kKACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,iBAAiB,EAAE,WAAW,GAAG,SAAgC;AAC/E,QACE,oBAAC,eAAe,aAAhB;EACE,aAAU;EACV,WAAW,GACT,qJACA,8BACA,qEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAyB;AACjE,QACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAIN,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;AACnE,QACE,oBAAC,eAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,UAAU;EAChE,GAAI;EACJ,CAAA;;AAKN,MAAa,gBAAgB,eAAe"}
+{"version":3,"file":"field.js","names":[],"sources":["../src/field.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\"\n\nimport { cn } from \"./lib/utils\"\n\nexport type FieldProps = React.ComponentProps<typeof FieldPrimitive.Root>\nexport type FieldLabelProps = React.ComponentProps<typeof FieldPrimitive.Label>\nexport type FieldDescriptionProps = React.ComponentProps<typeof FieldPrimitive.Description>\nexport type FieldItemProps = React.ComponentProps<typeof FieldPrimitive.Item>\nexport type FieldErrorProps = React.ComponentProps<typeof FieldPrimitive.Error>\nexport type FieldValidityProps = React.ComponentProps<typeof FieldPrimitive.Validity>\n\n// `ref` matters here for React Hook Form / focus management; it flows\n// through to the control via standard prop forwarding (React 19).\nexport type FieldControlProps = React.ComponentProps<typeof FieldPrimitive.Control>\n\nexport function Field({ className, ...props }: FieldProps) {\n  return (\n    <FieldPrimitive.Root\n      data-slot=\"field\"\n      className={cn(\n        \"grid w-full gap-2 data-[invalid]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function FieldLabel({ className, ...props }: FieldLabelProps) {\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function FieldControl({ className, ...props }: FieldControlProps) {\n  return (\n    <FieldPrimitive.Control\n      data-slot=\"field-control\"\n      className={cn(\n        \"rounded-md outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function FieldDescription({ className, ...props }: FieldDescriptionProps) {\n  return (\n    <FieldPrimitive.Description\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function FieldItem({ className, ...props }: FieldItemProps) {\n  return (\n    <FieldPrimitive.Item\n      data-slot=\"field-item\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport function FieldError({ className, ...props }: FieldErrorProps) {\n  return (\n    <FieldPrimitive.Error\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-sm font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\n// Base UI's Validity does not accept `className`/`ref` (and we don't need to style it yet), so we export it as-is.\nexport const FieldValidity = FieldPrimitive.Validity\n\nexport { FieldPrimitive }"],"mappings":";;;;;;AAkBA,SAAgB,MAAM,EAAE,WAAW,GAAG,SAAqB;AACzD,QACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GACT,qDACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;AACnE,QACE,oBAAC,eAAe,OAAhB;EACE,aAAU;EACV,WAAW,GACT,kGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,aAAa,EAAE,WAAW,GAAG,SAA4B;AACvE,QACE,oBAAC,eAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,mKACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,iBAAiB,EAAE,WAAW,GAAG,SAAgC;AAC/E,QACE,oBAAC,eAAe,aAAhB;EACE,aAAU;EACV,WAAW,GACT,0IACA,8BACA,qEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAyB;AACjE,QACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAIN,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;AACnE,QACE,oBAAC,eAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,UAAU;EAChE,GAAI;EACJ,CAAA;;AAKN,MAAa,gBAAgB,eAAe"}

package/dist/form.js

@@ -85,7 +85,7 @@ function FormError({ className, ...props }) {
 	if (!message) return null;
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "form-error",
-		className: cn("text-destructive rounded-2xl border border-destructive/30 bg-destructive/5 p-4 text-sm", className),
+		className: cn("text-destructive rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm", className),
 		...props,
 		children: message
 	});
@@ -100,7 +100,7 @@ function FormActions({ className, ...props }) {
 function FormMessage({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "form-message",
-		className: cn("text-sm text-foreground/80", className),
+		className: cn("text-sm text-contrast/80", className),
 		...props
 	});
 }

package/dist/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":[],"sources":["../src/form.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useForm,\n  useWatch,\n  type SubmitHandler,\n  type UseFormReturn,\n  type ControllerFieldState,\n  type ControllerRenderProps,\n  type FieldPath,\n  type FieldValues,\n  type RegisterOptions,\n} from \"react-hook-form\";\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"./field\";\n\nimport { cn } from \"./lib/utils\";\n\ntype FormProps<TFieldValues extends FieldValues> = {\n  form: UseFormReturn<TFieldValues>;\n  onSubmit: SubmitHandler<TFieldValues>;\n} & Omit<React.ComponentProps<\"form\">, \"onSubmit\">;\n\ntype FormRootProps = React.ComponentProps<\"form\">;\ntype FormErrorProps = React.ComponentProps<\"p\">;\ntype FormActionsProps = React.ComponentProps<\"div\">;\ntype FormMessageProps = React.ComponentProps<\"p\">;\n\nfunction Form<TFieldValues extends FieldValues>({ form, onSubmit, ...props }: FormProps<TFieldValues>) {\n  return (\n    <FormProvider {...form}>\n      <FormRoot {...props} onSubmit={form.handleSubmit(onSubmit)} />\n    </FormProvider>\n  );\n}\n\n/**\n * Plain `<form>` element with RHF integration.\n *\n * Uses a native `<form>` instead of `@base-ui/react/form` because Base UI\n * Form's internal submit/validation handling conflicts with React Hook Form\n * and blocks button click events inside modal dialogs. Since RHF already\n * provides validation, error handling, and submit management, the Base UI\n * Form wrapper adds no value at the moment.\n */\nfunction FormRoot({ className, ...props }: FormRootProps) {\n  return (\n    <form noValidate data-slot=\"form\" className={cn(\"flex flex-col gap-6\", className)} {...props} />\n  );\n}\n\ntype FormFieldRenderArgs<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n> = {\n  id: string;\n  field: ControllerRenderProps<TFieldValues, TName>;\n  fieldState: ControllerFieldState;\n};\n\ntype FormFieldProps<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n> = {\n  name: TName;\n  id?: string;\n  required?: boolean;\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n  rules?: RegisterOptions<TFieldValues, TName>;\n  /**\n   * Render the actual control.\n   *\n   * - For Base UI controls, prefer `onValueChange`.\n   * - For native/standard inputs, use `onChange`.\n   *\n   * Use `fieldControlProps(field)` to get both.\n   */\n  render: (args: FormFieldRenderArgs<TFieldValues, TName>) => React.ReactNode;\n} & Omit<\n  React.ComponentProps<typeof Field>,\n  \"children\" | \"name\" | \"invalid\" | \"touched\" | \"dirty\" | \"render\"\n>;\n\n/**\n * Base UI + React Hook Form field helper.\n *\n * It maps RHF Controller state onto Base UI's <Field> state so styling can\n * rely on `data-[invalid]`, `data-[touched]`, `data-[dirty]`, etc.\n */\nfunction FormField<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n>(props: FormFieldProps<TFieldValues, TName>) {\n  const { name, id, required, label, description, rules, render, ...rootProps } = props;\n  const { control } = useFormContext<TFieldValues>();\n\n  const reactId = React.useId();\n  const safeName = String(name).replace(/[^a-zA-Z0-9_-]/g, \"-\");\n  const controlId = id ?? `field-${safeName}-${reactId}`;\n\n  const inferredRequired = (() => {\n    if (!rules || !(\"required\" in rules)) return false;\n    const req = (rules as { required?: unknown }).required;\n    if (typeof req === \"boolean\") return req;\n    if (typeof req === \"string\") return true;\n    if (req && typeof req === \"object\" && \"value\" in (req as Record<string, unknown>)) {\n      return Boolean((req as { value?: unknown }).value);\n    }\n    return Boolean(req);\n  })();\n\n  const isRequired = required ?? inferredRequired;\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <Field\n          {...rootProps}\n          name={field.name}\n          invalid={fieldState.invalid}\n          touched={fieldState.isTouched}\n          dirty={fieldState.isDirty}\n        >\n          {label ? (\n            <FieldLabel>\n              {label}\n              {isRequired ? (\n                <span aria-hidden=\"true\" className=\"text-destructive ml-1\">\n                  *\n                </span>\n              ) : null}\n            </FieldLabel>\n          ) : null}\n          {description ? <FieldDescription>{description}</FieldDescription> : null}\n\n          {render({ id: controlId, field, fieldState })}\n\n          {fieldState.error ? (\n            <FieldError>{fieldState.error.message}</FieldError>\n          ) : null}\n        </Field>\n      )}\n    />\n  );\n}\n\nfunction FormError({ className, ...props }: FormErrorProps) {\n  const {\n    formState: { errors },\n  } = useFormContext();\n\n  const message =\n    (errors as Record<string, unknown>)?.root &&\n    typeof (errors as { root?: { message?: unknown } }).root?.message === \"string\"\n      ? String((errors as { root?: { message?: unknown } }).root?.message)\n      : null;\n\n  if (!message) return null;\n\n  return (\n    <p\n      data-slot=\"form-error\"\n      className={cn(\n        \"text-destructive rounded-2xl border border-destructive/30 bg-destructive/5 p-4 text-sm\",\n        className,\n      )}\n      {...props}\n    >\n      {message}\n    </p>\n  );\n}\n\nfunction FormActions({ className, ...props }: FormActionsProps) {\n  return (\n    <div\n      data-slot=\"form-actions\"\n      className={cn(\"flex flex-wrap items-center gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction FormMessage({ className, ...props }: FormMessageProps) {\n  return (\n    <p data-slot=\"form-message\" className={cn(\"text-sm text-foreground/80\", className)} {...props} />\n  );\n}\n\n/**\n * Convenience helper for mapping RHF field props onto either:\n * - Base UI controls (use `onValueChange`)\n * - Native/standard inputs (use `onChange`)\n */\nfunction fieldControlProps<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n>(\n  field: ControllerRenderProps<TFieldValues, TName>,\n  opts?: {\n    id?: string;\n    describedBy?: string;\n    invalid?: boolean;\n    native?: boolean;\n  },\n) {\n  return {\n    id: opts?.id,\n    name: field.name,\n    ref: field.ref,\n    value: field.value ?? \"\",\n    onBlur: field.onBlur,\n    onChange: field.onChange,\n    ...(opts?.native ? {} : { onValueChange: field.onChange }),\n    \"aria-describedby\": opts?.describedBy,\n    \"aria-invalid\": opts?.invalid,\n  };\n}\n\nexport {\n  Form,\n  FormRoot,\n  FormField,\n  FormError,\n  FormActions,\n  FormMessage,\n  fieldControlProps,\n  useForm,\n  useWatch,\n  type FormFieldRenderArgs,\n  type FormFieldProps,\n};\n"],"mappings":";;;;;;;AAgCA,SAAS,KAAuC,EAAE,MAAM,UAAU,GAAG,SAAkC;AACrG,QACE,oBAAC,cAAD;EAAc,GAAI;YAChB,oBAAC,UAAD;GAAU,GAAI;GAAO,UAAU,KAAK,aAAa,SAAS;GAAI,CAAA;EACjD,CAAA;;;;;;;;;;;AAanB,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,QACE,oBAAC,QAAD;EAAM,YAAA;EAAW,aAAU;EAAO,WAAW,GAAG,uBAAuB,UAAU;EAAE,GAAI;EAAS,CAAA;;;;;;;;AA2CpG,SAAS,UAGP,OAA4C;CAC5C,MAAM,EAAE,MAAM,IAAI,UAAU,OAAO,aAAa,OAAO,QAAQ,GAAG,cAAc;CAChF,MAAM,EAAE,YAAY,gBAA8B;CAElD,MAAM,UAAU,MAAM,OAAO;CAC7B,MAAM,WAAW,OAAO,KAAK,CAAC,QAAQ,mBAAmB,IAAI;CAC7D,MAAM,YAAY,MAAM,SAAS,SAAS,GAAG;CAE7C,MAAM,0BAA0B;AAC9B,MAAI,CAAC,SAAS,EAAE,cAAc,OAAQ,QAAO;EAC7C,MAAM,MAAO,MAAiC;AAC9C,MAAI,OAAO,QAAQ,UAAW,QAAO;AACrC,MAAI,OAAO,QAAQ,SAAU,QAAO;AACpC,MAAI,OAAO,OAAO,QAAQ,YAAY,WAAY,IAChD,QAAO,QAAS,IAA4B,MAAM;AAEpD,SAAO,QAAQ,IAAI;KACjB;CAEJ,MAAM,aAAa,YAAY;AAE/B,QACE,oBAAC,YAAD;EACQ;EACG;EACF;EACP,SAAS,EAAE,OAAO,iBAChB,qBAAC,OAAD;GACE,GAAI;GACJ,MAAM,MAAM;GACZ,SAAS,WAAW;GACpB,SAAS,WAAW;GACpB,OAAO,WAAW;aALpB;IAOG,QACC,qBAAC,YAAD,EAAA,UAAA,CACG,OACA,aACC,oBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;eAAwB;KAEpD,CAAA,GACL,KACO,EAAA,CAAA,GACX;IACH,cAAc,oBAAC,kBAAD,EAAA,UAAmB,aAA+B,CAAA,GAAG;IAEnE,OAAO;KAAE,IAAI;KAAW;KAAO;KAAY,CAAC;IAE5C,WAAW,QACV,oBAAC,YAAD,EAAA,UAAa,WAAW,MAAM,SAAqB,CAAA,GACjD;IACE;;EAEV,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;CAC1D,MAAM,EACJ,WAAW,EAAE,aACX,gBAAgB;CAEpB,MAAM,UACH,QAAoC,QACrC,OAAQ,OAA4C,MAAM,YAAY,WAClE,OAAQ,OAA4C,MAAM,QAAQ,GAClE;AAEN,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,0FACA,UACD;EACD,GAAI;YAEH;EACC,CAAA;;AAIR,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qCAAqC,UAAU;EAC7D,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,KAAD;EAAG,aAAU;EAAe,WAAW,GAAG,8BAA8B,UAAU;EAAE,GAAI;EAAS,CAAA;;;;;;;AASrG,SAAS,kBAIP,OACA,MAMA;AACA,QAAO;EACL,IAAI,MAAM;EACV,MAAM,MAAM;EACZ,KAAK,MAAM;EACX,OAAO,MAAM,SAAS;EACtB,QAAQ,MAAM;EACd,UAAU,MAAM;EAChB,GAAI,MAAM,SAAS,EAAE,GAAG,EAAE,eAAe,MAAM,UAAU;EACzD,oBAAoB,MAAM;EAC1B,gBAAgB,MAAM;EACvB"}
+{"version":3,"file":"form.js","names":[],"sources":["../src/form.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useForm,\n  useWatch,\n  type SubmitHandler,\n  type UseFormReturn,\n  type ControllerFieldState,\n  type ControllerRenderProps,\n  type FieldPath,\n  type FieldValues,\n  type RegisterOptions,\n} from \"react-hook-form\";\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"./field\";\n\nimport { cn } from \"./lib/utils\";\n\ntype FormProps<TFieldValues extends FieldValues> = {\n  form: UseFormReturn<TFieldValues>;\n  onSubmit: SubmitHandler<TFieldValues>;\n} & Omit<React.ComponentProps<\"form\">, \"onSubmit\">;\n\ntype FormRootProps = React.ComponentProps<\"form\">;\ntype FormErrorProps = React.ComponentProps<\"p\">;\ntype FormActionsProps = React.ComponentProps<\"div\">;\ntype FormMessageProps = React.ComponentProps<\"p\">;\n\nfunction Form<TFieldValues extends FieldValues>({ form, onSubmit, ...props }: FormProps<TFieldValues>) {\n  return (\n    <FormProvider {...form}>\n      <FormRoot {...props} onSubmit={form.handleSubmit(onSubmit)} />\n    </FormProvider>\n  );\n}\n\n/**\n * Plain `<form>` element with RHF integration.\n *\n * Uses a native `<form>` instead of `@base-ui/react/form` because Base UI\n * Form's internal submit/validation handling conflicts with React Hook Form\n * and blocks button click events inside modal dialogs. Since RHF already\n * provides validation, error handling, and submit management, the Base UI\n * Form wrapper adds no value at the moment.\n */\nfunction FormRoot({ className, ...props }: FormRootProps) {\n  return (\n    <form noValidate data-slot=\"form\" className={cn(\"flex flex-col gap-6\", className)} {...props} />\n  );\n}\n\ntype FormFieldRenderArgs<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n> = {\n  id: string;\n  field: ControllerRenderProps<TFieldValues, TName>;\n  fieldState: ControllerFieldState;\n};\n\ntype FormFieldProps<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n> = {\n  name: TName;\n  id?: string;\n  required?: boolean;\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n  rules?: RegisterOptions<TFieldValues, TName>;\n  /**\n   * Render the actual control.\n   *\n   * - For Base UI controls, prefer `onValueChange`.\n   * - For native/standard inputs, use `onChange`.\n   *\n   * Use `fieldControlProps(field)` to get both.\n   */\n  render: (args: FormFieldRenderArgs<TFieldValues, TName>) => React.ReactNode;\n} & Omit<\n  React.ComponentProps<typeof Field>,\n  \"children\" | \"name\" | \"invalid\" | \"touched\" | \"dirty\" | \"render\"\n>;\n\n/**\n * Base UI + React Hook Form field helper.\n *\n * It maps RHF Controller state onto Base UI's <Field> state so styling can\n * rely on `data-[invalid]`, `data-[touched]`, `data-[dirty]`, etc.\n */\nfunction FormField<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n>(props: FormFieldProps<TFieldValues, TName>) {\n  const { name, id, required, label, description, rules, render, ...rootProps } = props;\n  const { control } = useFormContext<TFieldValues>();\n\n  const reactId = React.useId();\n  const safeName = String(name).replace(/[^a-zA-Z0-9_-]/g, \"-\");\n  const controlId = id ?? `field-${safeName}-${reactId}`;\n\n  const inferredRequired = (() => {\n    if (!rules || !(\"required\" in rules)) return false;\n    const req = (rules as { required?: unknown }).required;\n    if (typeof req === \"boolean\") return req;\n    if (typeof req === \"string\") return true;\n    if (req && typeof req === \"object\" && \"value\" in (req as Record<string, unknown>)) {\n      return Boolean((req as { value?: unknown }).value);\n    }\n    return Boolean(req);\n  })();\n\n  const isRequired = required ?? inferredRequired;\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <Field\n          {...rootProps}\n          name={field.name}\n          invalid={fieldState.invalid}\n          touched={fieldState.isTouched}\n          dirty={fieldState.isDirty}\n        >\n          {label ? (\n            <FieldLabel>\n              {label}\n              {isRequired ? (\n                <span aria-hidden=\"true\" className=\"text-destructive ml-1\">\n                  *\n                </span>\n              ) : null}\n            </FieldLabel>\n          ) : null}\n          {description ? <FieldDescription>{description}</FieldDescription> : null}\n\n          {render({ id: controlId, field, fieldState })}\n\n          {fieldState.error ? (\n            <FieldError>{fieldState.error.message}</FieldError>\n          ) : null}\n        </Field>\n      )}\n    />\n  );\n}\n\nfunction FormError({ className, ...props }: FormErrorProps) {\n  const {\n    formState: { errors },\n  } = useFormContext();\n\n  const message =\n    (errors as Record<string, unknown>)?.root &&\n    typeof (errors as { root?: { message?: unknown } }).root?.message === \"string\"\n      ? String((errors as { root?: { message?: unknown } }).root?.message)\n      : null;\n\n  if (!message) return null;\n\n  return (\n    <p\n      data-slot=\"form-error\"\n      className={cn(\n        \"text-destructive rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm\",\n        className,\n      )}\n      {...props}\n    >\n      {message}\n    </p>\n  );\n}\n\nfunction FormActions({ className, ...props }: FormActionsProps) {\n  return (\n    <div\n      data-slot=\"form-actions\"\n      className={cn(\"flex flex-wrap items-center gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction FormMessage({ className, ...props }: FormMessageProps) {\n  return (\n    <p data-slot=\"form-message\" className={cn(\"text-sm text-contrast/80\", className)} {...props} />\n  );\n}\n\n/**\n * Convenience helper for mapping RHF field props onto either:\n * - Base UI controls (use `onValueChange`)\n * - Native/standard inputs (use `onChange`)\n */\nfunction fieldControlProps<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n>(\n  field: ControllerRenderProps<TFieldValues, TName>,\n  opts?: {\n    id?: string;\n    describedBy?: string;\n    invalid?: boolean;\n    native?: boolean;\n  },\n) {\n  return {\n    id: opts?.id,\n    name: field.name,\n    ref: field.ref,\n    value: field.value ?? \"\",\n    onBlur: field.onBlur,\n    onChange: field.onChange,\n    ...(opts?.native ? {} : { onValueChange: field.onChange }),\n    \"aria-describedby\": opts?.describedBy,\n    \"aria-invalid\": opts?.invalid,\n  };\n}\n\nexport {\n  Form,\n  FormRoot,\n  FormField,\n  FormError,\n  FormActions,\n  FormMessage,\n  fieldControlProps,\n  useForm,\n  useWatch,\n  type FormFieldRenderArgs,\n  type FormFieldProps,\n};\n"],"mappings":";;;;;;;AAgCA,SAAS,KAAuC,EAAE,MAAM,UAAU,GAAG,SAAkC;AACrG,QACE,oBAAC,cAAD;EAAc,GAAI;YAChB,oBAAC,UAAD;GAAU,GAAI;GAAO,UAAU,KAAK,aAAa,SAAS;GAAI,CAAA;EACjD,CAAA;;;;;;;;;;;AAanB,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,QACE,oBAAC,QAAD;EAAM,YAAA;EAAW,aAAU;EAAO,WAAW,GAAG,uBAAuB,UAAU;EAAE,GAAI;EAAS,CAAA;;;;;;;;AA2CpG,SAAS,UAGP,OAA4C;CAC5C,MAAM,EAAE,MAAM,IAAI,UAAU,OAAO,aAAa,OAAO,QAAQ,GAAG,cAAc;CAChF,MAAM,EAAE,YAAY,gBAA8B;CAElD,MAAM,UAAU,MAAM,OAAO;CAC7B,MAAM,WAAW,OAAO,KAAK,CAAC,QAAQ,mBAAmB,IAAI;CAC7D,MAAM,YAAY,MAAM,SAAS,SAAS,GAAG;CAE7C,MAAM,0BAA0B;AAC9B,MAAI,CAAC,SAAS,EAAE,cAAc,OAAQ,QAAO;EAC7C,MAAM,MAAO,MAAiC;AAC9C,MAAI,OAAO,QAAQ,UAAW,QAAO;AACrC,MAAI,OAAO,QAAQ,SAAU,QAAO;AACpC,MAAI,OAAO,OAAO,QAAQ,YAAY,WAAY,IAChD,QAAO,QAAS,IAA4B,MAAM;AAEpD,SAAO,QAAQ,IAAI;KACjB;CAEJ,MAAM,aAAa,YAAY;AAE/B,QACE,oBAAC,YAAD;EACQ;EACG;EACF;EACP,SAAS,EAAE,OAAO,iBAChB,qBAAC,OAAD;GACE,GAAI;GACJ,MAAM,MAAM;GACZ,SAAS,WAAW;GACpB,SAAS,WAAW;GACpB,OAAO,WAAW;aALpB;IAOG,QACC,qBAAC,YAAD,EAAA,UAAA,CACG,OACA,aACC,oBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;eAAwB;KAEpD,CAAA,GACL,KACO,EAAA,CAAA,GACX;IACH,cAAc,oBAAC,kBAAD,EAAA,UAAmB,aAA+B,CAAA,GAAG;IAEnE,OAAO;KAAE,IAAI;KAAW;KAAO;KAAY,CAAC;IAE5C,WAAW,QACV,oBAAC,YAAD,EAAA,UAAa,WAAW,MAAM,SAAqB,CAAA,GACjD;IACE;;EAEV,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;CAC1D,MAAM,EACJ,WAAW,EAAE,aACX,gBAAgB;CAEpB,MAAM,UACH,QAAoC,QACrC,OAAQ,OAA4C,MAAM,YAAY,WAClE,OAAQ,OAA4C,MAAM,QAAQ,GAClE;AAEN,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,yFACA,UACD;EACD,GAAI;YAEH;EACC,CAAA;;AAIR,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qCAAqC,UAAU;EAC7D,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,KAAD;EAAG,aAAU;EAAe,WAAW,GAAG,4BAA4B,UAAU;EAAE,GAAI;EAAS,CAAA;;;;;;;AASnG,SAAS,kBAIP,OACA,MAMA;AACA,QAAO;EACL,IAAI,MAAM;EACV,MAAM,MAAM;EACZ,KAAK,MAAM;EACX,OAAO,MAAM,SAAS;EACtB,QAAQ,MAAM;EACd,UAAU,MAAM;EAChB,GAAI,MAAM,SAAS,EAAE,GAAG,EAAE,eAAe,MAAM,UAAU;EACzD,oBAAoB,MAAM;EAC1B,gBAAgB,MAAM;EACvB"}

package/dist/infinite-scroll.js

@@ -41,11 +41,11 @@ function InfiniteScroll({ onLoadMore, hasMore, isLoading = false, direction = "d
 	const loaderContent = isLoading && /* @__PURE__ */ jsx("div", {
 		"data-slot": "infinite-scroll-loader",
 		className: "flex items-center justify-center py-6",
-		children: loader ?? /* @__PURE__ */ jsx(Spinner, { className: "size-6 text-muted-foreground" })
+		children: loader ?? /* @__PURE__ */ jsx(Spinner, { className: "size-6 text-muted" })
 	});
 	const endContent = !hasMore && !isLoading && endMessage && /* @__PURE__ */ jsx("div", {
 		"data-slot": "infinite-scroll-end",
-		className: "flex items-center justify-center py-6 text-sm text-muted-foreground",
+		className: "flex items-center justify-center py-6 text-sm text-muted",
 		children: endMessage
 	});
 	const sentinel = /* @__PURE__ */ jsx("div", {

package/dist/infinite-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"infinite-scroll.js","names":[],"sources":["../src/infinite-scroll.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\nimport { Spinner } from \"./spinner\"\n\ntype InfiniteScrollProps = {\n  onLoadMore: () => void\n  hasMore: boolean\n  isLoading?: boolean\n  direction?: \"down\" | \"up\"\n  root?: React.RefObject<Element | null>\n  rootMargin?: string\n  threshold?: number\n  loader?: React.ReactNode\n  endMessage?: React.ReactNode\n  className?: string\n  children?: React.ReactNode\n}\n\nfunction InfiniteScroll({\n  onLoadMore,\n  hasMore,\n  isLoading = false,\n  direction = \"down\",\n  root,\n  rootMargin = \"200px\",\n  threshold = 0,\n  loader,\n  endMessage,\n  className,\n  children,\n}: InfiniteScrollProps) {\n  const sentinelRef = React.useRef<HTMLDivElement>(null)\n  const loadingRef = React.useRef(false)\n\n  const onLoadMoreRef = React.useRef(onLoadMore)\n  React.useEffect(() => {\n    onLoadMoreRef.current = onLoadMore\n  }, [onLoadMore])\n\n  React.useEffect(() => {\n    if (!isLoading) {\n      loadingRef.current = false\n    }\n  }, [isLoading])\n\n  React.useEffect(() => {\n    const sentinel = sentinelRef.current\n    if (!sentinel || !hasMore) return\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const [entry] = entries\n        if (entry?.isIntersecting && !loadingRef.current) {\n          loadingRef.current = true\n          onLoadMoreRef.current()\n        }\n      },\n      {\n        root: root?.current ?? null,\n        rootMargin,\n        threshold,\n      }\n    )\n\n    observer.observe(sentinel)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [hasMore, root, rootMargin, threshold])\n\n  const loaderContent = isLoading && (\n    <div\n      data-slot=\"infinite-scroll-loader\"\n      className=\"flex items-center justify-center py-6\"\n    >\n      {loader ?? <Spinner className=\"size-6 text-muted-foreground\" />}\n    </div>\n  )\n\n  const endContent = !hasMore && !isLoading && endMessage && (\n    <div\n      data-slot=\"infinite-scroll-end\"\n      className=\"flex items-center justify-center py-6 text-sm text-muted-foreground\"\n    >\n      {endMessage}\n    </div>\n  )\n\n  const sentinel = (\n    <div\n      ref={sentinelRef}\n      data-slot=\"infinite-scroll-sentinel\"\n      aria-hidden=\"true\"\n      className=\"h-px\"\n    />\n  )\n\n  return (\n    <div\n      data-slot=\"infinite-scroll\"\n      aria-busy={isLoading}\n      className={cn(\"flex flex-col\", className)}\n    >\n      {direction === \"up\" && (\n        <>\n          {sentinel}\n          {loaderContent}\n        </>\n      )}\n\n      {children}\n\n      {direction === \"down\" && (\n        <>\n          {sentinel}\n          {loaderContent}\n        </>\n      )}\n\n      {endContent}\n    </div>\n  )\n}\n\nexport { InfiniteScroll, type InfiniteScrollProps }\n"],"mappings":";;;;;;AAqBA,SAAS,eAAe,EACtB,YACA,SACA,YAAY,OACZ,YAAY,QACZ,MACA,aAAa,SACb,YAAY,GACZ,QACA,YACA,WACA,YACsB;CACtB,MAAM,cAAc,MAAM,OAAuB,KAAK;CACtD,MAAM,aAAa,MAAM,OAAO,MAAM;CAEtC,MAAM,gBAAgB,MAAM,OAAO,WAAW;AAC9C,OAAM,gBAAgB;AACpB,gBAAc,UAAU;IACvB,CAAC,WAAW,CAAC;AAEhB,OAAM,gBAAgB;AACpB,MAAI,CAAC,UACH,YAAW,UAAU;IAEtB,CAAC,UAAU,CAAC;AAEf,OAAM,gBAAgB;EACpB,MAAM,WAAW,YAAY;AAC7B,MAAI,CAAC,YAAY,CAAC,QAAS;EAE3B,MAAM,WAAW,IAAI,sBAClB,YAAY;GACX,MAAM,CAAC,SAAS;AAChB,OAAI,OAAO,kBAAkB,CAAC,WAAW,SAAS;AAChD,eAAW,UAAU;AACrB,kBAAc,SAAS;;KAG3B;GACE,MAAM,MAAM,WAAW;GACvB;GACA;GACD,CACF;AAED,WAAS,QAAQ,SAAS;AAE1B,eAAa;AACX,YAAS,YAAY;;IAEtB;EAAC;EAAS;EAAM;EAAY;EAAU,CAAC;CAE1C,MAAM,gBAAgB,aACpB,oBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAET,UAAU,oBAAC,SAAD,EAAS,WAAU,gCAAiC,CAAA;EAC3D,CAAA;CAGR,MAAM,aAAa,CAAC,WAAW,CAAC,aAAa,cAC3C,oBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAET;EACG,CAAA;CAGR,MAAM,WACJ,oBAAC,OAAD;EACE,KAAK;EACL,aAAU;EACV,eAAY;EACZ,WAAU;EACV,CAAA;AAGJ,QACE,qBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GAAG,iBAAiB,UAAU;YAH3C;GAKG,cAAc,QACb,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,cACA,EAAA,CAAA;GAGJ;GAEA,cAAc,UACb,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,cACA,EAAA,CAAA;GAGJ;GACG"}
+{"version":3,"file":"infinite-scroll.js","names":[],"sources":["../src/infinite-scroll.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\nimport { Spinner } from \"./spinner\"\n\ntype InfiniteScrollProps = {\n  onLoadMore: () => void\n  hasMore: boolean\n  isLoading?: boolean\n  direction?: \"down\" | \"up\"\n  root?: React.RefObject<Element | null>\n  rootMargin?: string\n  threshold?: number\n  loader?: React.ReactNode\n  endMessage?: React.ReactNode\n  className?: string\n  children?: React.ReactNode\n}\n\nfunction InfiniteScroll({\n  onLoadMore,\n  hasMore,\n  isLoading = false,\n  direction = \"down\",\n  root,\n  rootMargin = \"200px\",\n  threshold = 0,\n  loader,\n  endMessage,\n  className,\n  children,\n}: InfiniteScrollProps) {\n  const sentinelRef = React.useRef<HTMLDivElement>(null)\n  const loadingRef = React.useRef(false)\n\n  const onLoadMoreRef = React.useRef(onLoadMore)\n  React.useEffect(() => {\n    onLoadMoreRef.current = onLoadMore\n  }, [onLoadMore])\n\n  React.useEffect(() => {\n    if (!isLoading) {\n      loadingRef.current = false\n    }\n  }, [isLoading])\n\n  React.useEffect(() => {\n    const sentinel = sentinelRef.current\n    if (!sentinel || !hasMore) return\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const [entry] = entries\n        if (entry?.isIntersecting && !loadingRef.current) {\n          loadingRef.current = true\n          onLoadMoreRef.current()\n        }\n      },\n      {\n        root: root?.current ?? null,\n        rootMargin,\n        threshold,\n      }\n    )\n\n    observer.observe(sentinel)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [hasMore, root, rootMargin, threshold])\n\n  const loaderContent = isLoading && (\n    <div\n      data-slot=\"infinite-scroll-loader\"\n      className=\"flex items-center justify-center py-6\"\n    >\n      {loader ?? <Spinner className=\"size-6 text-muted\" />}\n    </div>\n  )\n\n  const endContent = !hasMore && !isLoading && endMessage && (\n    <div\n      data-slot=\"infinite-scroll-end\"\n      className=\"flex items-center justify-center py-6 text-sm text-muted\"\n    >\n      {endMessage}\n    </div>\n  )\n\n  const sentinel = (\n    <div\n      ref={sentinelRef}\n      data-slot=\"infinite-scroll-sentinel\"\n      aria-hidden=\"true\"\n      className=\"h-px\"\n    />\n  )\n\n  return (\n    <div\n      data-slot=\"infinite-scroll\"\n      aria-busy={isLoading}\n      className={cn(\"flex flex-col\", className)}\n    >\n      {direction === \"up\" && (\n        <>\n          {sentinel}\n          {loaderContent}\n        </>\n      )}\n\n      {children}\n\n      {direction === \"down\" && (\n        <>\n          {sentinel}\n          {loaderContent}\n        </>\n      )}\n\n      {endContent}\n    </div>\n  )\n}\n\nexport { InfiniteScroll, type InfiniteScrollProps }\n"],"mappings":";;;;;;AAqBA,SAAS,eAAe,EACtB,YACA,SACA,YAAY,OACZ,YAAY,QACZ,MACA,aAAa,SACb,YAAY,GACZ,QACA,YACA,WACA,YACsB;CACtB,MAAM,cAAc,MAAM,OAAuB,KAAK;CACtD,MAAM,aAAa,MAAM,OAAO,MAAM;CAEtC,MAAM,gBAAgB,MAAM,OAAO,WAAW;AAC9C,OAAM,gBAAgB;AACpB,gBAAc,UAAU;IACvB,CAAC,WAAW,CAAC;AAEhB,OAAM,gBAAgB;AACpB,MAAI,CAAC,UACH,YAAW,UAAU;IAEtB,CAAC,UAAU,CAAC;AAEf,OAAM,gBAAgB;EACpB,MAAM,WAAW,YAAY;AAC7B,MAAI,CAAC,YAAY,CAAC,QAAS;EAE3B,MAAM,WAAW,IAAI,sBAClB,YAAY;GACX,MAAM,CAAC,SAAS;AAChB,OAAI,OAAO,kBAAkB,CAAC,WAAW,SAAS;AAChD,eAAW,UAAU;AACrB,kBAAc,SAAS;;KAG3B;GACE,MAAM,MAAM,WAAW;GACvB;GACA;GACD,CACF;AAED,WAAS,QAAQ,SAAS;AAE1B,eAAa;AACX,YAAS,YAAY;;IAEtB;EAAC;EAAS;EAAM;EAAY;EAAU,CAAC;CAE1C,MAAM,gBAAgB,aACpB,oBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAET,UAAU,oBAAC,SAAD,EAAS,WAAU,qBAAsB,CAAA;EAChD,CAAA;CAGR,MAAM,aAAa,CAAC,WAAW,CAAC,aAAa,cAC3C,oBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAET;EACG,CAAA;CAGR,MAAM,WACJ,oBAAC,OAAD;EACE,KAAK;EACL,aAAU;EACV,eAAY;EACZ,WAAU;EACV,CAAA;AAGJ,QACE,qBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GAAG,iBAAiB,UAAU;YAH3C;GAKG,cAAc,QACb,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,cACA,EAAA,CAAA;GAGJ;GAEA,cAAc,UACb,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,cACA,EAAA,CAAA;GAGJ;GACG"}

package/dist/input-group.d.ts

@@ -18,7 +18,7 @@ declare function InputGroup({
   ...props
 }: InputGroupProps): _$react_jsx_runtime0.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+  align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function InputGroupAddon({
   className,

package/dist/input-group.js

@@ -11,11 +11,11 @@ function InputGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "input-group",
 		role: "group",
-		className: cn("border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 not-has-disabled:has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
+		className: cn("border-edge dark:bg-edge/30 has-[[data-slot=input-group-control]:focus-visible]:border-focus has-[[data-slot=input-group-control]:focus-visible]:ring-focus/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-edge/50 dark:has-disabled:bg-edge/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-md border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 not-has-disabled:has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
 		...props
 	});
 }
-const inputGroupAddonVariants = cva("text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", {
+const inputGroupAddonVariants = cva("text-muted h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-sm [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", {
 	variants: { align: {
 		"inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
 		"inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
@@ -39,9 +39,9 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
 }
 const inputGroupButtonVariants = cva("gap-2 text-sm shadow-none flex items-center", {
 	variants: { size: {
-		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+		xs: "h-6 gap-1 rounded-sm px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
 		sm: "",
-		"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0",
+		"icon-xs": "size-6 rounded-sm p-0",
 		"icon-sm": "size-8 p-0"
 	} },
 	defaultVariants: { size: "xs" }
@@ -57,7 +57,7 @@ function InputGroupButton({ className, type = "button", variant = "ghost", size
 }
 function InputGroupText({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("text-muted flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }

package/dist/input-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","names":[],"sources":["../src/input-group.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport { Textarea } from \"./textarea\"\n\ntype InputGroupProps = React.ComponentProps<\"div\">\n\ntype InputGroupAddonProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof inputGroupAddonVariants>\n\ntype InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }\n\ntype InputGroupTextProps = React.ComponentProps<\"span\">\n\ntype InputGroupInputProps = React.ComponentProps<\"input\">\n\ntype InputGroupTextareaProps = React.ComponentProps<\"textarea\">\n\nfunction InputGroup({ className, ...props }: InputGroupProps) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 not-has-disabled:has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\":\n          \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: InputGroupAddonProps) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-3px)] p-0\",\n        \"icon-sm\": \"size-8 p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: InputGroupButtonProps) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: InputGroupTextProps) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: InputGroupInputProps) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: InputGroupTextareaProps) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n"],"mappings":";;;;;;;;;AA0BA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,2qCACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,MAAM,0BAA0B,IAC9B,2PACA;CACE,UAAU,EACR,OAAO;EACL,gBACE;EACF,cACE;EACF,eACE;EACF,aACE;EACH,EACF;CACD,iBAAiB,EACf,OAAO,gBACR;CACF,CACF;AAED,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,GAAG,SACoB;AACvB,QACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,wBAAwB,EAAE,OAAO,CAAC,EAAE,UAAU;EAC5D,UAAU,MAAM;AACd,OAAK,EAAE,OAAuB,QAAQ,SAAS,CAC7C;AAEF,KAAE,cAAc,eAAe,cAAc,QAAQ,EAAE,OAAO;;EAEhE,GAAI;EACJ,CAAA;;AAIN,MAAM,2BAA2B,IAC/B,+CACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WACE;EACF,WAAW;EACZ,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CACF;AAED,SAAS,iBAAiB,EACxB,WACA,OAAO,UACP,UAAU,SACV,OAAO,MACP,GAAG,SACqB;AACxB,QACE,oBAAC,QAAD;EACQ;EACN,aAAW;EACF;EACT,WAAW,GAAG,yBAAyB,EAAE,MAAM,CAAC,EAAE,UAAU;EAC5D,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EAAE,WAAW,GAAG,SAA8B;AACpE,QACE,oBAAC,QAAD;EACE,WAAW,GACT,0HACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EACvB,WACA,GAAG,SACoB;AACvB,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,oLACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACuB;AAC1B,QACE,oBAAC,UAAD;EACE,aAAU;EACV,WAAW,GACT,qMACA,UACD;EACD,GAAI;EACJ,CAAA"}
+{"version":3,"file":"input-group.js","names":[],"sources":["../src/input-group.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport { Textarea } from \"./textarea\"\n\ntype InputGroupProps = React.ComponentProps<\"div\">\n\ntype InputGroupAddonProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof inputGroupAddonVariants>\n\ntype InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }\n\ntype InputGroupTextProps = React.ComponentProps<\"span\">\n\ntype InputGroupInputProps = React.ComponentProps<\"input\">\n\ntype InputGroupTextareaProps = React.ComponentProps<\"textarea\">\n\nfunction InputGroup({ className, ...props }: InputGroupProps) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-edge dark:bg-edge/30 has-[[data-slot=input-group-control]:focus-visible]:border-focus has-[[data-slot=input-group-control]:focus-visible]:ring-focus/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-edge/50 dark:has-disabled:bg-edge/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-md border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 not-has-disabled:has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-sm [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\":\n          \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: InputGroupAddonProps) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-sm px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-sm p-0\",\n        \"icon-sm\": \"size-8 p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: InputGroupButtonProps) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: InputGroupTextProps) {\n  return (\n    <span\n      className={cn(\n        \"text-muted flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: InputGroupInputProps) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: InputGroupTextareaProps) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n"],"mappings":";;;;;;;;;AA0BA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,yqCACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,MAAM,0BAA0B,IAC9B,yNACA;CACE,UAAU,EACR,OAAO;EACL,gBACE;EACF,cACE;EACF,eACE;EACF,aACE;EACH,EACF;CACD,iBAAiB,EACf,OAAO,gBACR;CACF,CACF;AAED,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,GAAG,SACoB;AACvB,QACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,wBAAwB,EAAE,OAAO,CAAC,EAAE,UAAU;EAC5D,UAAU,MAAM;AACd,OAAK,EAAE,OAAuB,QAAQ,SAAS,CAC7C;AAEF,KAAE,cAAc,eAAe,cAAc,QAAQ,EAAE,OAAO;;EAEhE,GAAI;EACJ,CAAA;;AAIN,MAAM,2BAA2B,IAC/B,+CACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WACE;EACF,WAAW;EACZ,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CACF;AAED,SAAS,iBAAiB,EACxB,WACA,OAAO,UACP,UAAU,SACV,OAAO,MACP,GAAG,SACqB;AACxB,QACE,oBAAC,QAAD;EACQ;EACN,aAAW;EACF;EACT,WAAW,GAAG,yBAAyB,EAAE,MAAM,CAAC,EAAE,UAAU;EAC5D,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EAAE,WAAW,GAAG,SAA8B;AACpE,QACE,oBAAC,QAAD;EACE,WAAW,GACT,+GACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EACvB,WACA,GAAG,SACoB;AACvB,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,oLACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACuB;AAC1B,QACE,oBAAC,UAAD;EACE,aAAU;EACV,WAAW,GACT,qMACA,UACD;EACD,GAAI;EACJ,CAAA"}

package/dist/input-otp.js

@@ -17,7 +17,7 @@ function InputOTP({ className, containerClassName, ...props }) {
 function InputOTPGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "input-otp-group",
-		className: cn("flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40", className),
+		className: cn("flex items-center rounded-md has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40", className),
 		...props
 	});
 }
@@ -26,11 +26,11 @@ function InputOTPSlot({ index, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "input-otp-slot",
 		"data-active": isActive || void 0,
-		className: cn("border-input dark:bg-input/30 relative flex size-9 items-center justify-center border-y border-r text-sm motion-color outline-none first:rounded-l-lg first:border-l last:rounded-r-lg", "data-active:border-ring data-active:ring-3 data-active:ring-ring/50 data-active:z-10", "aria-invalid:border-destructive data-active:aria-invalid:border-destructive data-active:aria-invalid:ring-destructive/20 dark:data-active:aria-invalid:ring-destructive/40", className),
+		className: cn("border-edge dark:bg-edge/30 relative flex size-9 items-center justify-center border-y border-r text-sm motion-color outline-none first:rounded-l-md first:border-l last:rounded-r-md", "data-active:border-focus data-active:ring-3 data-active:ring-focus/50 data-active:z-10", "aria-invalid:border-destructive data-active:aria-invalid:border-destructive data-active:aria-invalid:ring-destructive/20 dark:data-active:aria-invalid:ring-destructive/40", className),
 		...props,
 		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
 			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
-			children: /* @__PURE__ */ jsx("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" })
+			children: /* @__PURE__ */ jsx("div", { className: "animate-caret-blink bg-contrast h-4 w-px duration-1000" })
 		})]
 	});
 }