@ngrok/mantle 0.62.2 → 0.63.1

package/dist/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Separator } from \"../separator/separator.js\";\n\n/**\n * A menu of options or actions, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Root = DropdownMenuPrimitive.Root;\nRoot.displayName = \"DropdownMenu\";\n\n/**\n * The trigger button that opens the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-trigger\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Trigger = DropdownMenuPrimitive.Trigger;\nTrigger.displayName = \"DropdownMenuTrigger\";\n\nconst Group = DropdownMenuPrimitive.Group;\nGroup.displayName = \"DropdownMenuGroup\";\n\n/**\n * The portal container for rendering dropdown content outside the normal DOM tree.\n */\nconst Portal = DropdownMenuPrimitive.Portal;\nPortal.displayName = \"DropdownMenuPortal\";\n\nconst Sub = DropdownMenuPrimitive.Sub;\nSub.displayName = \"DropdownMenuSub\";\n\nconst RadioGroup = DropdownMenuPrimitive.RadioGroup;\nRadioGroup.displayName = \"DropdownMenuRadioGroup\";\n\n/**\n * A trigger for a dropdown menu sub-menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub-trigger\n */\nconst SubTrigger = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, children, ...props }, ref) => (\n\t<DropdownMenuPrimitive.SubTrigger\n\t\tclassName={cx(\n\t\t\t\"focus:bg-accent data-state-open:bg-accent relative flex select-none items-center rounded py-1.5 pl-2 pr-9 text-sm outline-hidden\",\n\t\t\t\"data-highlighted:bg-popover-hover data-state-open:bg-popover-hover\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t{children}\n\t\t<span className=\"absolute right-2 flex items-center\">\n\t\t\t<Icon svg={<CaretRightIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t</span>\n\t</DropdownMenuPrimitive.SubTrigger>\n));\nSubTrigger.displayName = \"DropdownMenuSubTrigger\";\n\n/**\n * The content container for a dropdown menu sub-menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub-content\n */\nconst SubContent = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubContent>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, loop = true, ...props }, ref) => (\n\t<Portal>\n\t\t<DropdownMenuPrimitive.SubContent\n\t\t\tclassName={cx(\n\t\t\t\t\"scrollbar\",\n\t\t\t\t\"text-popover-foreground border-popover bg-popover p-1.25 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border shadow-xl\",\n\t\t\t\t\"my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)-16px)] overflow-auto\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tloop={loop}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nSubContent.displayName = \"DropdownMenuSubContent\";\n\ntype DropdownMenuContentProps = ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {\n\t/**\n\t * Whether the DropdownMenuContent should match the width of the trigger or use the intrinsic content width.\n\t */\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The container for the dropdown menu content.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-content\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Content>,\n\tDropdownMenuContentProps\n>(({ className, onClick, loop = true, width, ...props }, ref) => (\n\t<Portal>\n\t\t<DropdownMenuPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"scrollbar\",\n\t\t\t\t\"text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-32 overflow-hidden rounded-md border shadow-xl outline-hidden\",\n\t\t\t\t\"data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\"my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)-16px)] overflow-auto\",\n\t\t\t\twidth === \"trigger\" && \"w-(--radix-dropdown-menu-trigger-width)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tloop={loop}\n\t\t\tonClick={(event) => {\n\t\t\t\t/**\n\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t * of the DropdownMenu\n\t\t\t\t */\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nContent.displayName = \"DropdownMenuContent\";\n\n/**\n * An item in the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-item\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Item = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Item>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"relative flex cursor-pointer select-none items-center rounded px-2 py-1.5 text-sm font-normal outline-hidden transition-colors\",\n\t\t\t\"data-highlighted:bg-popover-hover data-active-item:dark:bg-popover-hover\",\n\t\t\t\"focus:bg-accent focus:text-accent-foreground\",\n\t\t\t\"data-disabled:cursor-default data-disabled:opacity-50\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nItem.displayName = \"DropdownMenuItem\";\n\n/**\n * A menu item with a checkbox that can be controlled or uncontrolled.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-checkbox-item\n */\nconst CheckboxItem = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n\t<DropdownMenuPrimitive.CheckboxItem\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 pl-2 pr-9 text-sm font-normal outline-hidden\",\n\t\t\t\"data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover\",\n\t\t\t\"aria-checked:bg-filled-accent! aria-checked:text-on-filled aria-checked:font-medium\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tclassName,\n\t\t)}\n\t\tchecked={checked}\n\t\t{...props}\n\t>\n\t\t<span className=\"absolute right-2 flex items-center\">\n\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t</span>\n\t\t{children}\n\t</DropdownMenuPrimitive.CheckboxItem>\n));\nCheckboxItem.displayName = \"DropdownMenuCheckboxItem\";\n\ntype DropdownMenuRadioItemProps = ComponentPropsWithoutRef<\n\ttypeof DropdownMenuPrimitive.RadioItem\n> & {\n\tname?: string;\n\tid?: string;\n};\n\n/**\n * A menu item with a radio button that can be controlled or uncontrolled.\n * Used within a RadioGroup to create a set of mutually exclusive options.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-radio-item\n */\nconst RadioItem = forwardRef<ComponentRef<\"input\">, DropdownMenuRadioItemProps>(\n\t({ className, children, ...props }, ref) => (\n\t\t<DropdownMenuPrimitive.RadioItem\n\t\t\tclassName={cx(\n\t\t\t\t\"group/dropdown-menu-radio-item\",\n\t\t\t\t\"text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 px-2 text-sm font-normal outline-none\",\n\t\t\t\t\"data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover\",\n\t\t\t\t\"aria-checked:bg-filled-accent! aria-checked:text-on-filled aria-checked:font-medium aria-checked:pr-9\",\n\t\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex\">\n\t\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</DropdownMenuPrimitive.RadioItem>\n\t),\n);\nRadioItem.displayName = \"DropdownMenuRadioItem\";\n\n/**\n * A label for a group of dropdown menu items.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-label\n */\nconst Label = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cx(\"px-2 py-1.5 text-sm font-medium\", inset && \"pl-8\", className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = \"DropdownMenuLabel\";\n\n/**\n * A visual separator between dropdown menu items or groups.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-separator\n */\nconst DropdownSeparator = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator ref={ref} className={cx(\"-mx-1.25 my-1 w-auto\", className)} {...props} />\n));\nDropdownSeparator.displayName = \"DropdownMenuSeparator\";\n\nconst Shortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n\treturn (\n\t\t<span className={cx(\"ml-auto text-xs tracking-widest opacity-60\", className)} {...props} />\n\t);\n};\nShortcut.displayName = \"DropdownMenuShortcut\";\n\n/**\n * A menu of options or actions, triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst DropdownMenu = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger asChild>\n\t *     <Button>Open Menu</Button>\n\t *   </DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A checkbox item in the dropdown menu that can be toggled on and off.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-checkbox-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.CheckboxItem checked={true} onCheckedChange={setChecked}>\n\t *       Show notifications\n\t *     </DropdownMenu.CheckboxItem>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tCheckboxItem,\n\t/**\n\t * The container for the dropdown menu content. Appears in a portal with scrolling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content width=\"trigger\">\n\t *     <DropdownMenu.Item>Edit</DropdownMenu.Item>\n\t *     <DropdownMenu.Item>Delete</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * A group container for organizing related dropdown menu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-group\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Group>\n\t *       <DropdownMenu.Label>Account</DropdownMenu.Label>\n\t *       <DropdownMenu.Item>Profile</DropdownMenu.Item>\n\t *       <DropdownMenu.Item>Settings</DropdownMenu.Item>\n\t *     </DropdownMenu.Group>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * A standard item in the dropdown menu that can be selected or activated.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item onSelect={() => handleEdit()}>\n\t *       Edit\n\t *     </DropdownMenu.Item>\n\t *     <DropdownMenu.Item disabled>\n\t *       Delete\n\t *     </DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * A label for grouping and describing sections within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-label\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Label>My Account</DropdownMenu.Label>\n\t *     <DropdownMenu.Item>Profile</DropdownMenu.Item>\n\t *     <DropdownMenu.Item>Settings</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tLabel,\n\t/**\n\t * A radio group container for exclusive selection within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-radio-group\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.RadioGroup value={value} onValueChange={setValue}>\n\t *       <DropdownMenu.RadioItem value=\"option1\">Option 1</DropdownMenu.RadioItem>\n\t *       <DropdownMenu.RadioItem value=\"option2\">Option 2</DropdownMenu.RadioItem>\n\t *     </DropdownMenu.RadioGroup>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRadioGroup,\n\t/**\n\t * A radio item in the dropdown menu where only one item in the group can be selected.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-radio-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.RadioGroup value=\"small\" onValueChange={setSize}>\n\t *       <DropdownMenu.RadioItem value=\"small\">Small</DropdownMenu.RadioItem>\n\t *       <DropdownMenu.RadioItem value=\"medium\">Medium</DropdownMenu.RadioItem>\n\t *       <DropdownMenu.RadioItem value=\"large\">Large</DropdownMenu.RadioItem>\n\t *     </DropdownMenu.RadioGroup>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRadioItem,\n\t/**\n\t * A visual separator for dividing sections within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-separator\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>Edit</DropdownMenu.Item>\n\t *     <DropdownMenu.Item>Copy</DropdownMenu.Item>\n\t *     <DropdownMenu.Separator />\n\t *     <DropdownMenu.Item>Delete</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSeparator: DropdownSeparator,\n\t/**\n\t * A keyboard shortcut indicator for dropdown menu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-shortcut\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>\n\t *       Save\n\t *       <DropdownMenu.Shortcut>⌘S</DropdownMenu.Shortcut>\n\t *     </DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tShortcut,\n\t/**\n\t * A submenu container for creating nested dropdown menus.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Sub>\n\t *       <DropdownMenu.SubTrigger>More options</DropdownMenu.SubTrigger>\n\t *       <DropdownMenu.SubContent>\n\t *         <DropdownMenu.Item>Sub item 1</DropdownMenu.Item>\n\t *         <DropdownMenu.Item>Sub item 2</DropdownMenu.Item>\n\t *       </DropdownMenu.SubContent>\n\t *     </DropdownMenu.Sub>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSub,\n\t/**\n\t * The content container for submenu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Sub>\n\t *       <DropdownMenu.SubTrigger>Export</DropdownMenu.SubTrigger>\n\t *       <DropdownMenu.SubContent>\n\t *         <DropdownMenu.Item>Export as PDF</DropdownMenu.Item>\n\t *         <DropdownMenu.Item>Export as CSV</DropdownMenu.Item>\n\t *       </DropdownMenu.SubContent>\n\t *     </DropdownMenu.Sub>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSubContent,\n\t/**\n\t * The trigger item that opens a submenu when hovered or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Sub>\n\t *       <DropdownMenu.SubTrigger>Share</DropdownMenu.SubTrigger>\n\t *       <DropdownMenu.SubContent>\n\t *         <DropdownMenu.Item>Email</DropdownMenu.Item>\n\t *         <DropdownMenu.Item>Copy link</DropdownMenu.Item>\n\t *       </DropdownMenu.SubContent>\n\t *     </DropdownMenu.Sub>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSubTrigger,\n\t/**\n\t * The trigger button that opens the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Menu\n\t *     </Button>\n\t *   </DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tDropdownMenu,\n};\n"],"mappings":"2KAAA,OAAS,kBAAAA,MAAsB,mCAC/B,OAAS,aAAAC,MAAiB,8BAC1B,UAAYC,MAA2B,gCAEvC,OAAS,cAAAC,MAAkB,QA6E1B,OAaa,OAAAC,EAbb,QAAAC,MAAA,oBAnDD,IAAMC,EAA6B,OACnCA,EAAK,YAAc,eAqBnB,IAAMC,EAAgC,UACtCA,EAAQ,YAAc,sBAEtB,IAAMC,EAA8B,QACpCA,EAAM,YAAc,oBAKpB,IAAMC,EAA+B,SACrCA,EAAO,YAAc,qBAErB,IAAMC,EAA4B,MAClCA,EAAI,YAAc,kBAElB,IAAMC,EAAmC,aACzCA,EAAW,YAAc,yBAOzB,IAAMC,EAAaC,EAKjB,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAC5Cb,EAAuB,aAAtB,CACA,UAAWc,EACV,mIACA,qEACA,kCACAJ,GAAS,OACTD,CACD,EACA,IAAKI,EACJ,GAAGD,EAEH,UAAAD,EACDZ,EAAC,QAAK,UAAU,qCACf,SAAAA,EAACgB,EAAA,CAAK,IAAKhB,EAACiB,EAAA,CAAe,OAAO,OAAO,EAAI,UAAU,SAAS,EACjE,GACD,CACA,EACDT,EAAW,YAAc,yBAOzB,IAAMU,EAAaT,EAGjB,CAAC,CAAE,UAAAC,EAAW,KAAAS,EAAO,GAAM,GAAGN,CAAM,EAAGC,IACxCd,EAACK,EAAA,CACA,SAAAL,EAAuB,aAAtB,CACA,UAAWe,EACV,YACA,kbACA,4FACAL,CACD,EACA,KAAMS,EACN,IAAKL,EACJ,GAAGD,EACL,EACD,CACA,EACDK,EAAW,YAAc,yBA6BzB,IAAME,EAAUX,EAGd,CAAC,CAAE,UAAAC,EAAW,QAAAW,EAAS,KAAAF,EAAO,GAAM,MAAAG,EAAO,GAAGT,CAAM,EAAGC,IACxDd,EAACK,EAAA,CACA,SAAAL,EAAuB,UAAtB,CACA,IAAKc,EACL,UAAWC,EACV,YACA,oIACA,+TACA,4FACAO,IAAU,WAAa,0CACvBZ,CACD,EACA,KAAMS,EACN,QAAUI,GAAU,CAKnBA,EAAM,gBAAgB,EACtBF,IAAUE,CAAK,CAChB,EACC,GAAGV,EACL,EACD,CACA,EACDO,EAAQ,YAAc,sBAsBtB,IAAMI,EAAOf,EAKX,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,GAAGE,CAAM,EAAGC,IAClCd,EAAuB,OAAtB,CACA,IAAKc,EACL,UAAWC,EACV,iIACA,2EACA,+CACA,wDACA,kCACAJ,GAAS,OACTD,CACD,EACC,GAAGG,EACL,CACA,EACDW,EAAK,YAAc,mBAOnB,IAAMC,EAAehB,EAGnB,CAAC,CAAE,UAAAC,EAAW,SAAAE,EAAU,QAAAc,EAAS,GAAGb,CAAM,EAAGC,IAC9Cb,EAAuB,eAAtB,CACA,IAAKa,EACL,UAAWC,EACV,iMACA,2EACA,sFACA,kCACAL,CACD,EACA,QAASgB,EACR,GAAGb,EAEJ,UAAAb,EAAC,QAAK,UAAU,qCACf,SAAAA,EAAuB,gBAAtB,CACA,SAAAA,EAACgB,EAAA,CAAK,IAAKhB,EAAC2B,EAAA,CAAU,OAAO,OAAO,EAAI,UAAU,SAAS,EAC5D,EACD,EACCf,GACF,CACA,EACDa,EAAa,YAAc,2BAe3B,IAAMG,EAAYnB,EACjB,CAAC,CAAE,UAAAC,EAAW,SAAAE,EAAU,GAAGC,CAAM,EAAGC,IACnCb,EAAuB,YAAtB,CACA,UAAWc,EACV,iCACA,0LACA,2EACA,wGACA,kCACAL,CACD,EACA,IAAKI,EACJ,GAAGD,EAEJ,UAAAb,EAAC,QAAK,UAAU,wFACf,SAAAA,EAAuB,gBAAtB,CACA,SAAAA,EAACgB,EAAA,CAAK,IAAKhB,EAAC2B,EAAA,CAAU,OAAO,OAAO,EAAI,UAAU,SAAS,EAC5D,EACD,EACCf,GACF,CAEF,EACAgB,EAAU,YAAc,wBAOxB,IAAMC,EAAQpB,EAKZ,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,GAAGE,CAAM,EAAGC,IAClCd,EAAuB,QAAtB,CACA,IAAKc,EACL,UAAWC,EAAG,kCAAmCJ,GAAS,OAAQD,CAAS,EAC1E,GAAGG,EACL,CACA,EACDgB,EAAM,YAAc,oBAOpB,IAAMC,EAAoBrB,EAGxB,CAAC,CAAE,UAAAC,EAAW,GAAGG,CAAM,EAAGC,IAC3Bd,EAAC+B,EAAA,CAAU,IAAKjB,EAAK,UAAWC,EAAG,uBAAwBL,CAAS,EAAI,GAAGG,EAAO,CAClF,EACDiB,EAAkB,YAAc,wBAEhC,IAAME,EAAW,CAAC,CAAE,UAAAtB,EAAW,GAAGG,CAAM,IAEtCb,EAAC,QAAK,UAAWe,EAAG,6CAA8CL,CAAS,EAAI,GAAGG,EAAO,EAG3FmB,EAAS,YAAc,uBAsBvB,IAAMC,EAAe,CAkBpB,KAAA/B,EAkBA,aAAAuB,EAiBA,QAAAL,EAoBA,MAAAhB,EAqBA,KAAAoB,EAkBA,MAAAK,EAmBA,WAAAtB,EAoBA,UAAAqB,EAmBA,UAAWE,EAmBX,SAAAE,EAsBA,IAAA1B,EAsBA,WAAAY,EAsBA,WAAAV,EAoBA,QAAAL,CACD","names":["CaretRightIcon","CheckIcon","DropdownMenuPrimitive","forwardRef","jsx","jsxs","Root","Trigger","Group","Portal","Sub","RadioGroup","SubTrigger","forwardRef","className","inset","children","props","ref","cx","Icon","CaretRightIcon","SubContent","loop","Content","onClick","width","event","Item","CheckboxItem","checked","CheckIcon","RadioItem","Label","DropdownSeparator","Separator","Shortcut","DropdownMenu"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/input.js

@@ -1,2 +1,2 @@
-import{a as H}from"./chunk-EYZYDUS2.js";import{a as C}from"./chunk-MF2QITTY.js";import{a as d}from"./chunk-SBVSECWW.js";import"./chunk-NZ6DRFAL.js";import{a as b}from"./chunk-PFXFESEN.js";import{CheckCircleIcon as L}from"@phosphor-icons/react/CheckCircle";import{WarningIcon as E}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as W}from"@phosphor-icons/react/WarningDiamond";import A from"clsx";import{createContext as N,forwardRef as g,useContext as V,useRef as k}from"react";import{jsx as t,jsxs as M}from"react/jsx-runtime";var m=g(({children:e,className:n,...r},i)=>{let o=!!e,a=k(null);return o?t(y,{className:n,forwardedRef:i,innerRef:a,...r,children:e}):t(y,{...r,className:n,forwardedRef:i,innerRef:a,children:t(f,{...r})})});m.displayName="Input";var f=g(({"aria-invalid":e,className:n,validation:r,...i},o)=>{let{"aria-invalid":a,forwardedRef:s,innerRef:c,validation:I,...l}=V(P),p=I??r,x=(typeof p=="function"?p():p)||void 0,u=a??e??p==="error",v={...l,...i,type:i.type??l.type??"text"};return t("input",{"aria-invalid":u,"data-validation":x,className:b("placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden",n),ref:C(o,s,c),...v})});f.displayName="InputCapture";var P=N({validation:void 0,innerRef:{current:null}}),y=({"aria-invalid":e,"aria-disabled":n,children:r,className:i,disabled:o,forwardedRef:a,innerRef:s,style:c,type:I,validation:l,...p})=>{let u=e!=null&&e!=="false"?"error":typeof l=="function"?l():l,v=e??u==="error";return t(P.Provider,{value:{"aria-invalid":e,"aria-disabled":n,disabled:o,type:I,validation:u,...p,forwardedRef:a,innerRef:s},children:M("div",{"aria-invalid":v,"aria-disabled":o??n,"data-validation":u||void 0,className:b("pointer-coarse:text-base h-9 text-sm","bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-hidden focus-within:ring-4 focus-visible:outline-hidden focus-visible:ring-4","aria-disabled:opacity-50","has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-5","border-form text-strong has-focus-visible:border-accent-600 has-focus-visible:ring-focus-accent","data-validation-success:border-success-600 has-focus-visible:data-validation-success:border-success-600 has-focus-visible:data-validation-success:ring-focus-success","data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:ring-focus-warning","data-validation-error:border-danger-600 has-focus-visible:data-validation-error:border-danger-600 has-focus-visible:data-validation-error:ring-focus-danger","autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]",i),onClick:()=>{s?.current?.focus()},onKeyDown:()=>{s?.current!==document.activeElement&&s?.current?.focus()},style:c,children:[r,t(T,{name:p.name,validation:u})]})})};y.displayName="InputContainer";var T=({name:e,validation:n})=>{switch(n){case"error":return M("div",{className:"text-danger-600 pointer-events-none order-last select-none",children:[t("span",{className:"sr-only",children:A("The value entered for the",e,"input has failed validation.")}),t(d,{svg:t(E,{"aria-hidden":!0,weight:"fill"})})]});case"success":return t("div",{className:"text-success-600 pointer-events-none order-last select-none",children:t(d,{svg:t(L,{weight:"fill"})})});case"warning":return t("div",{className:"text-warning-600 pointer-events-none order-last select-none",children:t(d,{svg:t(W,{weight:"fill"})})});default:return null}};T.displayName="ValidationFeedback";import{EyeIcon as O}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as j}from"@phosphor-icons/react/EyeClosed";import{forwardRef as B,useEffect as F,useState as _}from"react";import{jsx as h,jsxs as w}from"react/jsx-runtime";var R=B(({onValueVisibilityChange:e,showValue:n=!1,...r},i)=>{let[o,a]=_(n),s=o?"text":"password",c=o?O:j;return F(()=>{a(n)},[n]),w(m,{type:s,ref:i,...r,children:[h(f,{}),w("button",{type:"button",tabIndex:-1,className:"text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0",onClick:()=>{a(!o),e?.(!o)},children:[w("span",{className:"sr-only",children:["Turn password visibility ",o?"off":"on"]}),h(d,{svg:h(c,{"aria-hidden":!0})})]})]})});R.displayName="PasswordInput";export{m as Input,f as InputCapture,R as PasswordInput,H as isInput};
+import{a as H}from"./chunk-EYZYDUS2.js";import{a as C}from"./chunk-HKSO72E5.js";import{a as d}from"./chunk-SBVSECWW.js";import"./chunk-NZ6DRFAL.js";import{a as b}from"./chunk-PFXFESEN.js";import{CheckCircleIcon as L}from"@phosphor-icons/react/CheckCircle";import{WarningIcon as E}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as W}from"@phosphor-icons/react/WarningDiamond";import A from"clsx";import{createContext as N,forwardRef as g,useContext as V,useRef as k}from"react";import{jsx as t,jsxs as M}from"react/jsx-runtime";var m=g(({children:e,className:n,...r},i)=>{let o=!!e,a=k(null);return o?t(y,{className:n,forwardedRef:i,innerRef:a,...r,children:e}):t(y,{...r,className:n,forwardedRef:i,innerRef:a,children:t(f,{...r})})});m.displayName="Input";var f=g(({"aria-invalid":e,className:n,validation:r,...i},o)=>{let{"aria-invalid":a,forwardedRef:s,innerRef:c,validation:I,...l}=V(P),p=I??r,x=(typeof p=="function"?p():p)||void 0,u=a??e??p==="error",v={...l,...i,type:i.type??l.type??"text"};return t("input",{"aria-invalid":u,"data-validation":x,className:b("placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden",n),ref:C(o,s,c),...v})});f.displayName="InputCapture";var P=N({validation:void 0,innerRef:{current:null}}),y=({"aria-invalid":e,"aria-disabled":n,children:r,className:i,disabled:o,forwardedRef:a,innerRef:s,style:c,type:I,validation:l,...p})=>{let u=e!=null&&e!=="false"?"error":typeof l=="function"?l():l,v=e??u==="error";return t(P.Provider,{value:{"aria-invalid":e,"aria-disabled":n,disabled:o,type:I,validation:u,...p,forwardedRef:a,innerRef:s},children:M("div",{"aria-invalid":v,"aria-disabled":o??n,"data-validation":u||void 0,className:b("pointer-coarse:text-base h-9 text-sm","bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-hidden focus-within:ring-4 focus-visible:outline-hidden focus-visible:ring-4","aria-disabled:opacity-50","has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-5","border-form text-strong has-focus-visible:border-accent-600 has-focus-visible:ring-focus-accent","data-validation-success:border-success-600 has-focus-visible:data-validation-success:border-success-600 has-focus-visible:data-validation-success:ring-focus-success","data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:ring-focus-warning","data-validation-error:border-danger-600 has-focus-visible:data-validation-error:border-danger-600 has-focus-visible:data-validation-error:ring-focus-danger","autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]",i),onClick:()=>{s?.current?.focus()},onKeyDown:()=>{s?.current!==document.activeElement&&s?.current?.focus()},style:c,children:[r,t(T,{name:p.name,validation:u})]})})};y.displayName="InputContainer";var T=({name:e,validation:n})=>{switch(n){case"error":return M("div",{className:"text-danger-600 pointer-events-none order-last select-none",children:[t("span",{className:"sr-only",children:A("The value entered for the",e,"input has failed validation.")}),t(d,{svg:t(E,{"aria-hidden":!0,weight:"fill"})})]});case"success":return t("div",{className:"text-success-600 pointer-events-none order-last select-none",children:t(d,{svg:t(L,{weight:"fill"})})});case"warning":return t("div",{className:"text-warning-600 pointer-events-none order-last select-none",children:t(d,{svg:t(W,{weight:"fill"})})});default:return null}};T.displayName="ValidationFeedback";import{EyeIcon as O}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as j}from"@phosphor-icons/react/EyeClosed";import{forwardRef as B,useEffect as F,useState as _}from"react";import{jsx as h,jsxs as w}from"react/jsx-runtime";var R=B(({onValueVisibilityChange:e,showValue:n=!1,...r},i)=>{let[o,a]=_(n),s=o?"text":"password",c=o?O:j;return F(()=>{a(n)},[n]),w(m,{type:s,ref:i,...r,children:[h(f,{}),w("button",{type:"button",tabIndex:-1,className:"text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0",onClick:()=>{a(!o),e?.(!o)},children:[w("span",{className:"sr-only",children:["Turn password visibility ",o?"off":"on"]}),h(d,{svg:h(c,{"aria-hidden":!0})})]})]})});R.displayName="PasswordInput";export{m as Input,f as InputCapture,R as PasswordInput,H as isInput};
 //# sourceMappingURL=input.js.map

package/dist/label.js

@@ -1,2 +1,2 @@
-import{a as t}from"./chunk-PFXFESEN.js";import{forwardRef as f}from"react";import{jsx as b}from"react/jsx-runtime";var a=f(({"aria-disabled":o,children:r,className:l,disabled:s,onMouseDown:d,...p},i)=>b("label",{"aria-disabled":s??o,className:t("text-strong cursor-pointer text-sm peer-disabled:cursor-default has-disabled:cursor-default aria-disabled:cursor-default",l),onMouseDown:e=>{e.target.closest("button, input, select, textarea")||(d?.(e),!e.defaultPrevented&&e.detail>1&&e.preventDefault())},ref:i,...p,children:r}));a.displayName="Label";export{a as Label};
+import{a as t}from"./chunk-PFXFESEN.js";import{forwardRef as i}from"react";import{jsx as n}from"react/jsx-runtime";var a=i(({"aria-disabled":o,children:r,className:l,disabled:s,onMouseDown:d,...p},f)=>n("label",{"aria-disabled":s??o,className:t("text-strong cursor-pointer text-sm peer-disabled:cursor-default has-disabled:cursor-default aria-disabled:cursor-default font-sans",l),onMouseDown:e=>{e.target.closest("button, input, select, textarea")||(d?.(e),!e.defaultPrevented&&e.detail>1&&e.preventDefault())},ref:f,...p,children:r}));a.displayName="Label";export{a as Label};
 //# sourceMappingURL=label.js.map

package/dist/label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/label/label.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype LabelProps = ComponentPropsWithoutRef<\"label\"> & {\n\t/**\n\t * If set, the label will appear disabled.\n\t */\n\tdisabled?: boolean;\n};\n\n/**\n * A Label represents a caption for an item in a user interface. It is used to\n * provide a description or title for a form control, such as an input field,\n * checkbox, radio button, etc. The label is typically displayed next to the\n * form control and helps users understand its purpose.\n *\n * @see https://mantle.ngrok.com/components/label#api-label\n *\n * @example\n * ```tsx\n * <Label htmlFor=\"name\">\n *   Name: <Input type=\"text\" id=\"name\" />\n * </Label>\n *\n * <div className=\"flex items-center gap-2\">\n *   <Label htmlFor=\"name-2\">Name:</Label>\n *   <Input type=\"text\" id=\"name-2\" />\n * </div>\n * ```\n */\nconst Label = forwardRef<ComponentRef<\"label\">, LabelProps>(\n\t(\n\t\t{ \"aria-disabled\": _ariaDisabled, children, className, disabled, onMouseDown, ...props },\n\t\tref,\n\t) => (\n\t\t// biome-ignore lint/a11y/noLabelWithoutControl: this is a composable label component\n\t\t<label\n\t\t\taria-disabled={disabled ?? _ariaDisabled}\n\t\t\tclassName={cx(\n\t\t\t\t\"text-strong cursor-pointer text-sm peer-disabled:cursor-default has-disabled:cursor-default aria-disabled:cursor-default\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonMouseDown={(event) => {\n\t\t\t\t// only prevent text selection if clicking inside the label itself\n\t\t\t\tconst target = event.target as HTMLElement;\n\t\t\t\tif (target.closest(\"button, input, select, textarea\")) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonMouseDown?.(event);\n\n\t\t\t\t// prevent text selection when double clicking label\n\t\t\t\tif (!event.defaultPrevented && event.detail > 1) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t}}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</label>\n\t),\n);\nLabel.displayName = \"Label\";\n\nexport {\n\t//\n\tLabel,\n};\n"],"mappings":"wCAAA,OAAS,cAAAA,MAAkB,QAqCzB,cAAAC,MAAA,oBANF,IAAMC,EAAQC,EACb,CACC,CAAE,gBAAiBC,EAAe,SAAAC,EAAU,UAAAC,EAAW,SAAAC,EAAU,YAAAC,EAAa,GAAGC,CAAM,EACvFC,IAGAT,EAAC,SACA,gBAAeM,GAAYH,EAC3B,UAAWO,EACV,2HACAL,CACD,EACA,YAAcM,GAAU,CAERA,EAAM,OACV,QAAQ,iCAAiC,IAIpDJ,IAAcI,CAAK,EAGf,CAACA,EAAM,kBAAoBA,EAAM,OAAS,GAC7CA,EAAM,eAAe,EAEvB,EACA,IAAKF,EACJ,GAAGD,EAEH,SAAAJ,EACF,CAEF,EACAH,EAAM,YAAc","names":["forwardRef","jsx","Label","forwardRef","_ariaDisabled","children","className","disabled","onMouseDown","props","ref","cx","event"]}
+{"version":3,"sources":["../src/components/label/label.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype LabelProps = ComponentPropsWithoutRef<\"label\"> & {\n\t/**\n\t * If set, the label will appear disabled.\n\t */\n\tdisabled?: boolean;\n};\n\n/**\n * A Label represents a caption for an item in a user interface. It is used to\n * provide a description or title for a form control, such as an input field,\n * checkbox, radio button, etc. The label is typically displayed next to the\n * form control and helps users understand its purpose.\n *\n * @see https://mantle.ngrok.com/components/label#api-label\n *\n * @example\n * ```tsx\n * <Label htmlFor=\"name\">\n *   Name: <Input type=\"text\" id=\"name\" />\n * </Label>\n *\n * <div className=\"flex items-center gap-2\">\n *   <Label htmlFor=\"name-2\">Name:</Label>\n *   <Input type=\"text\" id=\"name-2\" />\n * </div>\n * ```\n */\nconst Label = forwardRef<ComponentRef<\"label\">, LabelProps>(\n\t(\n\t\t{ \"aria-disabled\": _ariaDisabled, children, className, disabled, onMouseDown, ...props },\n\t\tref,\n\t) => (\n\t\t// biome-ignore lint/a11y/noLabelWithoutControl: this is a composable label component\n\t\t<label\n\t\t\taria-disabled={disabled ?? _ariaDisabled}\n\t\t\tclassName={cx(\n\t\t\t\t\"text-strong cursor-pointer text-sm peer-disabled:cursor-default has-disabled:cursor-default aria-disabled:cursor-default font-sans\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonMouseDown={(event) => {\n\t\t\t\t// only prevent text selection if clicking inside the label itself\n\t\t\t\tconst target = event.target as HTMLElement;\n\t\t\t\tif (target.closest(\"button, input, select, textarea\")) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonMouseDown?.(event);\n\n\t\t\t\t// prevent text selection when double clicking label\n\t\t\t\tif (!event.defaultPrevented && event.detail > 1) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t}}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</label>\n\t),\n);\nLabel.displayName = \"Label\";\n\nexport {\n\t//\n\tLabel,\n};\n"],"mappings":"wCAAA,OAAS,cAAAA,MAAkB,QAqCzB,cAAAC,MAAA,oBANF,IAAMC,EAAQC,EACb,CACC,CAAE,gBAAiBC,EAAe,SAAAC,EAAU,UAAAC,EAAW,SAAAC,EAAU,YAAAC,EAAa,GAAGC,CAAM,EACvFC,IAGAT,EAAC,SACA,gBAAeM,GAAYH,EAC3B,UAAWO,EACV,qIACAL,CACD,EACA,YAAcM,GAAU,CAERA,EAAM,OACV,QAAQ,iCAAiC,IAIpDJ,IAAcI,CAAK,EAGf,CAACA,EAAM,kBAAoBA,EAAM,OAAS,GAC7CA,EAAM,eAAe,EAEvB,EACA,IAAKF,EACJ,GAAGD,EAEH,SAAAJ,EACF,CAEF,EACAH,EAAM,YAAc","names":["forwardRef","jsx","Label","forwardRef","_ariaDisabled","children","className","disabled","onMouseDown","props","ref","cx","event"]}

package/dist/mantle.css

@@ -57,58 +57,6 @@
 	font-style: italic;
 }
 
-@custom-variant light (&:where(.light, .light *, [data-theme="light"], [data-applied-theme="light"]));
-@custom-variant dark (&:where(.dark, .dark *, [data-theme="dark"], [data-applied-theme="dark"]));
-@custom-variant high-contrast (&:where(.light-high-contrast, .light-high-contrast *, [data-theme="light-high-contrast"], [data-applied-theme="light-high-contrast"]));
-@custom-variant dark-high-contrast (&:where(.dark-high-contrast, .dark-high-contrast *, [data-theme="dark-high-contrast"], [data-applied-theme="dark-high-contrast"]));
-
-@custom-variant aria-collapsed (&[aria-expanded="false"]);
-@custom-variant aria-invalid (&[aria-invalid="true"]);
-@custom-variant aria-unchecked (&[aria-checked="false"]);
-
-@custom-variant data-active-item (&[data-active-item~="true"]);
-@custom-variant data-disabled (&[data-disabled]);
-@custom-variant data-drag-over (&[data-drag-over="true"]);
-@custom-variant data-highlighted (&[data-highlighted]);
-@custom-variant data-orientation-horizontal (&[data-orientation="horizontal"]);
-@custom-variant data-orientation-vertical (&[data-orientation="vertical"]);
-@custom-variant data-side-bottom (&[data-side="bottom"]);
-@custom-variant data-side-left (&[data-side="left"]);
-@custom-variant data-side-right (&[data-side="right"]);
-@custom-variant data-side-top (&[data-side="top"]);
-@custom-variant data-state-active (&[data-state~=active]);
-@custom-variant data-state-checked (&[data-state~=checked]);
-@custom-variant data-state-closed (&[data-state~=closed]);
-@custom-variant data-state-idle (&[data-state~=idle]);
-@custom-variant data-state-inactive (&[data-state~=inactive]);
-@custom-variant data-state-indeterminate (&[data-state~=indeterminate]);
-@custom-variant data-state-open (&[data-state~=open]);
-@custom-variant data-state-pending (&[data-state~=pending]);
-@custom-variant data-state-selected (&[data-state~=selected]);
-@custom-variant data-state-submitting (&[data-state~=submitting]);
-@custom-variant data-state-unchecked (&[data-state~=unchecked]);
-@custom-variant data-validation-error (&[data-validation="error"]);
-@custom-variant data-validation-success (&[data-validation="success"]);
-@custom-variant data-validation-warning (&[data-validation="warning"]);
-
-@custom-variant where (:where(&));
-
-@custom-variant hover-hover {
-	@media (hover: hover) {
-		& {
-			@slot;
-		}
-	}
-}
-
-@custom-variant hover-none {
-	@media (hover: none) {
-		& {
-			@slot;
-		}
-	}
-}
-
 @theme {
 	--color-white: oklch(100% 0 0);
 	--color-black: oklch(0% 0 0);
@@ -116,8 +64,185 @@
 	--color-static-black: oklch(0% 0 0);
 	--color-ff00ff: oklch(0.70188 0.35257 328.35);
 	--color-ff00ff: color(display-p3 0.94164 0 0.99869);
+
+	/* Semantic color aliases - reference base colors defined in theme-specific :root blocks */
+	--color-accent-50: var(--color-blue-50);
+	--color-accent-100: var(--color-blue-100);
+	--color-accent-200: var(--color-blue-200);
+	--color-accent-300: var(--color-blue-300);
+	--color-accent-400: var(--color-blue-400);
+	--color-accent-500: var(--color-blue-500);
+	--color-accent-600: var(--color-blue-600);
+	--color-accent-700: var(--color-blue-700);
+	--color-accent-800: var(--color-blue-800);
+	--color-accent-900: var(--color-blue-900);
+	--color-accent-950: var(--color-blue-950);
+
+	/* info === accent */
+	--color-info-50: var(--color-accent-50);
+	--color-info-100: var(--color-accent-100);
+	--color-info-200: var(--color-accent-200);
+	--color-info-300: var(--color-accent-300);
+	--color-info-400: var(--color-accent-400);
+	--color-info-500: var(--color-accent-500);
+	--color-info-600: var(--color-accent-600);
+	--color-info-700: var(--color-accent-700);
+	--color-info-800: var(--color-accent-800);
+	--color-info-900: var(--color-accent-900);
+	--color-info-950: var(--color-accent-950);
+
+	--color-danger-50: var(--color-red-50);
+	--color-danger-100: var(--color-red-100);
+	--color-danger-200: var(--color-red-200);
+	--color-danger-300: var(--color-red-300);
+	--color-danger-400: var(--color-red-400);
+	--color-danger-500: var(--color-red-500);
+	--color-danger-600: var(--color-red-600);
+	--color-danger-700: var(--color-red-700);
+	--color-danger-800: var(--color-red-800);
+	--color-danger-900: var(--color-red-900);
+	--color-danger-950: var(--color-red-950);
+
+	--color-warning-50: var(--color-amber-50);
+	--color-warning-100: var(--color-amber-100);
+	--color-warning-200: var(--color-amber-200);
+	--color-warning-300: var(--color-amber-300);
+	--color-warning-400: var(--color-amber-400);
+	--color-warning-500: var(--color-amber-500);
+	--color-warning-600: var(--color-amber-600);
+	--color-warning-700: var(--color-amber-700);
+	--color-warning-800: var(--color-amber-800);
+	--color-warning-900: var(--color-amber-900);
+	--color-warning-950: var(--color-amber-950);
+
+	--color-success-50: var(--color-green-50);
+	--color-success-100: var(--color-green-100);
+	--color-success-200: var(--color-green-200);
+	--color-success-300: var(--color-green-300);
+	--color-success-400: var(--color-green-400);
+	--color-success-500: var(--color-green-500);
+	--color-success-600: var(--color-green-600);
+	--color-success-700: var(--color-green-700);
+	--color-success-800: var(--color-green-800);
+	--color-success-900: var(--color-green-900);
+	--color-success-950: var(--color-green-950);
+
+	/* Semantic tokens - reference values defined in theme-specific :root blocks */
+	--background-color-base: var(--background-color-base);
+	--background-color-card: var(--background-color-card);
+	--background-color-popover: var(--background-color-popover);
+	--background-color-dialog: var(--background-color-dialog);
+	--background-color-base-hover: var(--background-color-base-hover);
+	--background-color-card-hover: var(--background-color-card-hover);
+	--background-color-popover-hover: var(--background-color-popover-hover);
+	--background-color-dialog-hover: var(--background-color-dialog-hover);
+	--background-color-form: var(--background-color-form);
+	--background-color-form-hover: var(--background-color-form-hover);
+	--background-color-form-active: var(--background-color-form-active);
+	--background-color-overlay: var(--background-color-overlay);
+
+	--border-color-base: var(--border-color-base);
+	--border-color-card: var(--border-color-card);
+	--border-color-popover: var(--border-color-popover);
+	--border-color-dialog: var(--border-color-dialog);
+	--border-color-base-muted: var(--border-color-base-muted);
+	--border-color-card-muted: var(--border-color-card-muted);
+	--border-color-popover-muted: var(--border-color-popover-muted);
+	--border-color-dialog-muted: var(--border-color-dialog-muted);
+	--border-color-form: var(--border-color-form);
+
+	--divide-color-card: var(--border-color-card);
+	--divide-color-card-muted: var(--border-color-card-muted);
+
+	--text-color-strong: var(--text-color-strong);
+	--text-color-body: var(--text-color-body);
+	--text-color-muted: var(--text-color-muted);
+	--text-color-placeholder: var(--text-color-placeholder);
+	--text-color-on-filled: var(--text-color-on-filled);
+
+	--background-color-tooltip: #000;
+	--text-color-tooltip: #fff;
+
+	--background-color-filled-neutral: var(--background-color-filled-neutral);
+	--background-color-filled-accent: var(--background-color-filled-accent);
+	--background-color-filled-danger: var(--background-color-filled-danger);
+	--background-color-filled-warning: var(--background-color-filled-warning);
+	--background-color-filled-success: var(--background-color-filled-success);
+
+	--background-color-filled-neutral-hover: var(--background-color-filled-neutral-hover);
+	--background-color-filled-accent-hover: var(--background-color-filled-accent-hover);
+	--background-color-filled-danger-hover: var(--background-color-filled-danger-hover);
+	--background-color-filled-warning-hover: var(--background-color-filled-warning-hover);
+	--background-color-filled-success-hover: var(--background-color-filled-success-hover);
+
+	--background-color-filled-neutral-active: var(--background-color-filled-neutral-active);
+	--background-color-filled-accent-active: var(--background-color-filled-accent-active);
+	--background-color-filled-danger-active: var(--background-color-filled-danger-active);
+	--background-color-filled-warning-active: var(--background-color-filled-warning-active);
+	--background-color-filled-success-active: var(--background-color-filled-success-active);
+
+	--ring-color-focus-neutral: var(--ring-color-focus-neutral);
+	--ring-color-focus-accent: var(--ring-color-focus-accent);
+	--ring-color-focus-danger: var(--ring-color-focus-danger);
+	--ring-color-focus-warning: var(--ring-color-focus-warning);
+	--ring-color-focus-success: var(--ring-color-focus-success);
+
+	/* Shadow tokens - reference theme-specific shadow color and opacity values */
+	--shadow-sm: 0px 1px 2px 0 --alpha(var(--shadow-color) / var(--shadow-first-opacity));
+	--shadow:
+		0px 1px 2px -1px --alpha(var(--shadow-color) / var(--shadow-second-opacity)),
+		0px 1px 3px 0px --alpha(var(--shadow-color) / var(--shadow-second-opacity));
+	--shadow-md:
+		0px 2px 13px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)),
+		0px 2px 4px -2px --alpha(var(--shadow-color) / var(--shadow-second-opacity)),
+		0px 4px 6px -1px --alpha(var(--shadow-color) / var(--shadow-second-opacity));
+	--shadow-lg:
+		0px 1px 13px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)),
+		0px 4px 6px -4px --alpha(var(--shadow-color) / var(--shadow-second-opacity)),
+		0px 10px 15px -3px --alpha(var(--shadow-color) / var(--shadow-second-opacity));
+	--shadow-xl:
+		0px 0px 15px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)),
+		0px 8px 10px -6px --alpha(var(--shadow-color) / var(--shadow-second-opacity)),
+		0px 20px 25px -5px --alpha(var(--shadow-color) / var(--shadow-second-opacity));
+	--shadow-2xl:
+		0px 0px 15px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)),
+		0px 11px 10px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)),
+		0px 17px 25px 2px --alpha(var(--shadow-color) / var(--shadow-second-opacity));
+	--shadow-inner: inset 0px 2px 4px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity));
 }
 
+@theme inline {
+	/* Static values that never change across themes */
+	--font-sans: "Roobert", ui-sans-serif, system-ui, sans-serif;
+	--font-mono:
+		"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
+		Courier New, monospace;
+	--font-family: "Family", "Georgia", serif;
+	--font-body: var(--font-sans);
+
+	/* Fluid typography */
+	--text-lg: clamp(1.075rem, 0.525rem + 0.75vw, 1.125rem);
+	--text-xl: clamp(1.1rem, 0.8rem + 0.75vw, 1.25rem);
+	--text-2xl: clamp(1.2rem, 0.9rem + 0.75vw, 1.5rem);
+	--text-3xl: clamp(1.5rem, 1.275rem + 0.75vw, 1.875rem);
+	--text-4xl: clamp(1.8rem, 1.65rem + 0.75vw, 2.25rem);
+	--text-5xl: clamp(2.4rem, 2.4rem + 0.75vw, 3rem);
+	--text-6xl: clamp(3rem, 3.15rem + 0.75vw, 3.75rem);
+	--text-7xl: clamp(3.6rem, 3.9rem + 0.75vw, 4.5rem);
+	--text-8xl: clamp(4.8rem, 5.4rem + 0.75vw, 6rem);
+	--text-9xl: clamp(6.4rem, 7.4rem + 0.75vw, 8rem);
+
+	--breakpoint-2xs: 22.5rem;
+	--breakpoint-xs: 30rem;
+
+	--text-mono: 0.8125rem;
+	--text-mono--line-height: 1.25rem;
+	--text-size-inherit: inherit;
+}
+
+/**
+MARK: LIGHT DEFS
+*/
 :root,
 :root.light,
 :root[data-theme="light"],
@@ -236,6 +361,9 @@
 	--navigation-shadow: --alpha(var(--shadow-color) / 10%);
 }
 
+/**
+MARK: DARK DEFS
+*/
 :root.dark,
 :root[data-theme="dark"],
 :root[data-applied-theme="dark"] {
@@ -574,6 +702,9 @@
 	--navigation-shadow: --alpha(var(--shadow-color) / 40%);
 }
 
+/**
+MARK: LIGHT HICON DEFS
+*/
 :root.light-high-contrast,
 :root[data-theme="light-high-contrast"],
 :root[data-applied-theme="light-high-contrast"] {
@@ -874,6 +1005,9 @@
 	--navigation-shadow: --alpha(var(--shadow-color) / 30%);
 }
 
+/**
+MARK: DARK HICON DEFS
+*/
 :root.dark-high-contrast,
 :root[data-theme="dark-high-contrast"],
 :root[data-applied-theme="dark-high-contrast"] {
@@ -1175,166 +1309,6 @@
 	--navigation-shadow: #000;
 }
 
-@theme inline {
-	--font-sans: "Roobert", ui-sans-serif, system-ui, sans-serif;
-	--font-mono:
-		"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
-		Courier New, monospace;
-	--font-family: "Family", "Georgia", serif;
-	--font-body: var(--font-sans);
-
-	/* Fluid typography */
-	--text-lg: clamp(1.075rem, 0.525rem + 0.75vw, 1.125rem);
-	--text-xl: clamp(1.1rem, 0.8rem + 0.75vw, 1.25rem);
-	--text-2xl: clamp(1.2rem, 0.9rem + 0.75vw, 1.5rem);
-	--text-3xl: clamp(1.5rem, 1.275rem + 0.75vw, 1.875rem);
-	--text-4xl: clamp(1.8rem, 1.65rem + 0.75vw, 2.25rem);
-	--text-5xl: clamp(2.4rem, 2.4rem + 0.75vw, 3rem);
-	--text-6xl: clamp(3rem, 3.15rem + 0.75vw, 3.75rem);
-	--text-7xl: clamp(3.6rem, 3.9rem + 0.75vw, 4.5rem);
-	--text-8xl: clamp(4.8rem, 5.4rem + 0.75vw, 6rem);
-	--text-9xl: clamp(6.4rem, 7.4rem + 0.75vw, 8rem);
-
-	--breakpoint-2xs: 22.5rem;
-	--breakpoint-xs: 30rem;
-
-	--text-mono: 0.8125rem;
-	--text-mono--line-height: 1.25rem;
-	--text-size-inherit: inherit;
-
-	--shadow-sm: 0px 1px 2px 0 --alpha(var(--shadow-color) / var(--shadow-first-opacity));
-	--shadow:
-		0px 1px 2px -1px --alpha(var(--shadow-color) / var(--shadow-second-opacity)),
-		0px 1px 3px 0px --alpha(var(--shadow-color) / var(--shadow-second-opacity));
-	--shadow-md:
-		0px 2px 13px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)),
-		0px 2px 4px -2px --alpha(var(--shadow-color) / var(--shadow-second-opacity)),
-		0px 4px 6px -1px --alpha(var(--shadow-color) / var(--shadow-second-opacity));
-	--shadow-lg:
-		0px 1px 13px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)),
-		0px 4px 6px -4px --alpha(var(--shadow-color) / var(--shadow-second-opacity)),
-		0px 10px 15px -3px --alpha(var(--shadow-color) / var(--shadow-second-opacity));
-	--shadow-xl:
-		0px 0px 15px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)),
-		0px 8px 10px -6px --alpha(var(--shadow-color) / var(--shadow-second-opacity)),
-		0px 20px 25px -5px --alpha(var(--shadow-color) / var(--shadow-second-opacity));
-	--shadow-2xl:
-		0px 0px 15px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)),
-		0px 11px 10px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)),
-		0px 17px 25px 2px --alpha(var(--shadow-color) / var(--shadow-second-opacity));
-	--shadow-inner: inset 0px 2px 4px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity));
-
-	--color-accent-50: var(--color-blue-50);
-	--color-accent-100: var(--color-blue-100);
-	--color-accent-200: var(--color-blue-200);
-	--color-accent-300: var(--color-blue-300);
-	--color-accent-400: var(--color-blue-400);
-	--color-accent-500: var(--color-blue-500);
-	--color-accent-600: var(--color-blue-600);
-	--color-accent-700: var(--color-blue-700);
-	--color-accent-800: var(--color-blue-800);
-	--color-accent-900: var(--color-blue-900);
-	--color-accent-950: var(--color-blue-950);
-
-	--color-danger-50: var(--color-red-50);
-	--color-danger-100: var(--color-red-100);
-	--color-danger-200: var(--color-red-200);
-	--color-danger-300: var(--color-red-300);
-	--color-danger-400: var(--color-red-400);
-	--color-danger-500: var(--color-red-500);
-	--color-danger-600: var(--color-red-600);
-	--color-danger-700: var(--color-red-700);
-	--color-danger-800: var(--color-red-800);
-	--color-danger-900: var(--color-red-900);
-	--color-danger-950: var(--color-red-950);
-
-	--color-warning-50: var(--color-amber-50);
-	--color-warning-100: var(--color-amber-100);
-	--color-warning-200: var(--color-amber-200);
-	--color-warning-300: var(--color-amber-300);
-	--color-warning-400: var(--color-amber-400);
-	--color-warning-500: var(--color-amber-500);
-	--color-warning-600: var(--color-amber-600);
-	--color-warning-700: var(--color-amber-700);
-	--color-warning-800: var(--color-amber-800);
-	--color-warning-900: var(--color-amber-900);
-	--color-warning-950: var(--color-amber-950);
-
-	--color-success-50: var(--color-green-50);
-	--color-success-100: var(--color-green-100);
-	--color-success-200: var(--color-green-200);
-	--color-success-300: var(--color-green-300);
-	--color-success-400: var(--color-green-400);
-	--color-success-500: var(--color-green-500);
-	--color-success-600: var(--color-green-600);
-	--color-success-700: var(--color-green-700);
-	--color-success-800: var(--color-green-800);
-	--color-success-900: var(--color-green-900);
-	--color-success-950: var(--color-green-950);
-
-	--background-color-base: var(--background-color-base);
-	--background-color-card: var(--background-color-card);
-	--background-color-popover: var(--background-color-popover);
-	--background-color-dialog: var(--background-color-dialog);
-	--background-color-base-hover: var(--background-color-base-hover);
-	--background-color-card-hover: var(--background-color-card-hover);
-	--background-color-popover-hover: var(--background-color-popover-hover);
-	--background-color-dialog-hover: var(--background-color-dialog-hover);
-	--background-color-form: var(--background-color-form);
-	--background-color-form-hover: var(--background-color-form-hover);
-	--background-color-form-active: var(--background-color-form-active);
-	--background-color-overlay: var(--background-color-overlay);
-
-	--border-color-base: var(--border-color-base);
-	--border-color-card: var(--border-color-card);
-	--border-color-popover: var(--border-color-popover);
-	--border-color-dialog: var(--border-color-dialog);
-	--border-color-base-muted: var(--border-color-base-muted);
-	--border-color-card-muted: var(--border-color-card-muted);
-	--border-color-popover-muted: var(--border-color-popover-muted);
-	--border-color-dialog-muted: var(--border-color-dialog-muted);
-	--border-color-form: var(--border-color-form);
-
-	--divide-color-card: var(--border-color-card);
-	--divide-color-card-muted: var(--border-color-card-muted);
-
-	--text-color-strong: var(--text-color-strong);
-	--text-color-body: var(--text-color-body);
-	--text-color-muted: var(--text-color-muted);
-	--text-color-placeholder: var(--text-color-placeholder);
-	--text-color-on-filled: var(--text-color-on-filled);
-
-	/* Tooltip */
-	--background-color-tooltip: #000;
-	--text-color-tooltip: #fff;
-
-	/* Theme tokens */
-	--background-color-filled-neutral: var(--background-color-filled-neutral);
-	--background-color-filled-accent: var(--background-color-filled-accent);
-	--background-color-filled-danger: var(--background-color-filled-danger);
-	--background-color-filled-warning: var(--background-color-filled-warning);
-	--background-color-filled-success: var(--background-color-filled-success);
-
-	--background-color-filled-neutral-hover: var(--background-color-filled-neutral-hover);
-	--background-color-filled-accent-hover: var(--background-color-filled-accent-hover);
-	--background-color-filled-danger-hover: var(--background-color-filled-danger-hover);
-	--background-color-filled-warning-hover: var(--background-color-filled-warning-hover);
-	--background-color-filled-success-hover: var(--background-color-filled-success-hover);
-
-	--background-color-filled-neutral-active: var(--background-color-filled-neutral-active);
-	--background-color-filled-accent-active: var(--background-color-filled-accent-active);
-	--background-color-filled-danger-active: var(--background-color-filled-danger-active);
-	--background-color-filled-warning-active: var(--background-color-filled-warning-active);
-	--background-color-filled-success-active: var(--background-color-filled-success-active);
-
-	/* Focus tokens */
-	--ring-color-focus-neutral: var(--ring-color-focus-neutral);
-	--ring-color-focus-accent: var(--ring-color-focus-accent);
-	--ring-color-focus-danger: var(--ring-color-focus-danger);
-	--ring-color-focus-warning: var(--ring-color-focus-warning);
-	--ring-color-focus-success: var(--ring-color-focus-success);
-}
-
 @layer base {
 	button:not(:disabled),
 	[role="button"]:not(:disabled) {

package/dist/pagination.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ComponentProps } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
-import { B as ButtonGroup } from './button-group-7oT-O90J.js';
+import { B as ButtonGroup } from './button-group-BFnqgdtl.js';
 import { Select } from './select.js';
 import 'class-variance-authority/types';
 import './variant-props-oDo2u-We.js';
@@ -123,7 +123,7 @@ declare const CursorPagination: {
      * />
      * ```
      */
-    readonly Buttons: react.ForwardRefExoticComponent<Omit<CursorButtonsProps, "ref"> & react.RefAttributes<HTMLFieldSetElement>>;
+    readonly Buttons: react.ForwardRefExoticComponent<Omit<CursorButtonsProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
     /**
      * A select input for changing the number of items per page when using cursor-based pagination.
      *

package/dist/pagination.js

@@ -1,2 +1,2 @@
-import{a as p}from"./chunk-ERCBHCUY.js";import{b as v}from"./chunk-LURP5WQR.js";import"./chunk-MF2QITTY.js";import{a as b}from"./chunk-Y7RHMF43.js";import{c as m}from"./chunk-ZCTK5X4D.js";import"./chunk-SK2YHT6N.js";import"./chunk-BKNA2REZ.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import{a as z}from"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import{a as P}from"./chunk-PFXFESEN.js";import{CaretLeftIcon as U}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as j}from"@phosphor-icons/react/CaretRight";import{createContext as k,forwardRef as c,useContext as y,useState as A}from"react";import f from"tiny-invariant";import{jsx as s,jsxs as l}from"react/jsx-runtime";var S=k(void 0),x=c(({className:r,children:e,defaultPageSize:a,...t},i)=>{let[o,n]=A(a);return s(S.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:n},children:s("div",{className:P("inline-flex items-center justify-between gap-2",r),ref:i,...t,children:e})})});x.displayName="CursorPagination";var h=c(({hasNextPage:r,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>l(b,{appearance:"panel",ref:o,...i,children:[s(m,{appearance:"ghost",disabled:!e,icon:s(U,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(v,{orientation:"vertical",className:"min-h-5"}),s(m,{appearance:"ghost",disabled:!r,icon:s(j,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));h.displayName="CursorButtons";var E=[5,10,20,50,100],N=c(({className:r,pageSizes:e=E,onChangePageSize:a,...t},i)=>{let o=y(S);return f(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),f(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),f(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),l(p.Root,{defaultValue:`${o.pageSize}`,onValueChange:n=>{let g=Number.parseInt(n,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(p.Trigger,{ref:i,className:P("w-auto min-w-36",r),value:o.pageSize,...t,children:s(p.Value,{})}),s(p.Content,{width:"trigger",children:e.map(n=>l(p.Item,{value:`${n}`,children:[n," per page"]},n))})]})});N.displayName="CursorPageSizeSelect";function O({asChild:r=!1,className:e,...a}){let t=y(S);return f(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),l(r?z:"span",{className:P("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}O.displayName="CursorPageSizeValue";var F={Root:x,Buttons:h,PageSizeSelect:N,PageSizeValue:O};import{useEffect as T,useState as V}from"react";function W({listSize:r,pageSize:e}){let[a,t]=V(1),[i,o]=V(e);T(()=>{o(e),t(1)},[e]),T(()=>{t(1)},[r]);let n=Math.ceil(r/i),g=(a-1)*i,C=a>1,d=a<n;function B(u){let L=Math.max(1,Math.min(u,n));t(L)}function R(){d&&t(u=>Math.min(u+1,n))}function w(){C&&t(u=>Math.max(u-1,1))}function I(u){o(u),t(1)}function M(){t(n)}function G(){t(1)}return{currentPage:a,goToFirstPage:G,goToLastPage:M,goToPage:B,hasNextPage:d,hasPreviousPage:C,nextPage:R,offset:g,pageSize:i,previousPage:w,setPageSize:I,totalPages:n}}function $(r,e){return r.slice(e.offset,e.offset+e.pageSize)}export{F as CursorPagination,$ as getOffsetPaginatedSlice,W as useOffsetPagination};
+import{a as p}from"./chunk-KVXXQCAI.js";import{b as v}from"./chunk-LURP5WQR.js";import"./chunk-HKSO72E5.js";import{a as b}from"./chunk-OHPGAB7U.js";import{c as m}from"./chunk-U32WN4A7.js";import"./chunk-QWZXK2IF.js";import"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import{a as z}from"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import{a as P}from"./chunk-PFXFESEN.js";import{CaretLeftIcon as U}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as j}from"@phosphor-icons/react/CaretRight";import{createContext as k,forwardRef as c,useContext as y,useState as A}from"react";import f from"tiny-invariant";import{jsx as s,jsxs as l}from"react/jsx-runtime";var S=k(void 0),x=c(({className:r,children:e,defaultPageSize:a,...t},i)=>{let[o,n]=A(a);return s(S.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:n},children:s("div",{className:P("inline-flex items-center justify-between gap-2",r),ref:i,...t,children:e})})});x.displayName="CursorPagination";var h=c(({hasNextPage:r,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>l(b,{appearance:"panel",ref:o,...i,children:[s(m,{appearance:"ghost",disabled:!e,icon:s(U,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(v,{orientation:"vertical",className:"min-h-5"}),s(m,{appearance:"ghost",disabled:!r,icon:s(j,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));h.displayName="CursorButtons";var E=[5,10,20,50,100],N=c(({className:r,pageSizes:e=E,onChangePageSize:a,...t},i)=>{let o=y(S);return f(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),f(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),f(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),l(p.Root,{defaultValue:`${o.pageSize}`,onValueChange:n=>{let g=Number.parseInt(n,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(p.Trigger,{ref:i,className:P("w-auto min-w-36",r),value:o.pageSize,...t,children:s(p.Value,{})}),s(p.Content,{width:"trigger",children:e.map(n=>l(p.Item,{value:`${n}`,children:[n," per page"]},n))})]})});N.displayName="CursorPageSizeSelect";function O({asChild:r=!1,className:e,...a}){let t=y(S);return f(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),l(r?z:"span",{className:P("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}O.displayName="CursorPageSizeValue";var F={Root:x,Buttons:h,PageSizeSelect:N,PageSizeValue:O};import{useEffect as T,useState as V}from"react";function W({listSize:r,pageSize:e}){let[a,t]=V(1),[i,o]=V(e);T(()=>{o(e),t(1)},[e]),T(()=>{t(1)},[r]);let n=Math.ceil(r/i),g=(a-1)*i,C=a>1,d=a<n;function B(u){let L=Math.max(1,Math.min(u,n));t(L)}function R(){d&&t(u=>Math.min(u+1,n))}function w(){C&&t(u=>Math.max(u-1,1))}function I(u){o(u),t(1)}function M(){t(n)}function G(){t(1)}return{currentPage:a,goToFirstPage:G,goToLastPage:M,goToPage:B,hasNextPage:d,hasPreviousPage:C,nextPage:R,offset:g,pageSize:i,previousPage:w,setPageSize:I,totalPages:n}}function $(r,e){return r.slice(e.offset,e.offset+e.pageSize)}export{F as CursorPagination,$ as getOffsetPaginatedSlice,W as useOffsetPagination};
 //# sourceMappingURL=pagination.js.map

package/dist/select.js

@@ -1,2 +1,2 @@
-import{a as e}from"./chunk-ERCBHCUY.js";import"./chunk-LURP5WQR.js";import"./chunk-MF2QITTY.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import"./chunk-PFXFESEN.js";export{e as Select};
+import{a as e}from"./chunk-KVXXQCAI.js";import"./chunk-LURP5WQR.js";import"./chunk-HKSO72E5.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import"./chunk-PFXFESEN.js";export{e as Select};
 //# sourceMappingURL=select.js.map

package/dist/sheet.js

@@ -1,2 +1,2 @@
-import{a as u,b as v,c as S,d as m,e as p,f as d,g as h,h as f}from"./chunk-NQZYWYVH.js";import{d as c}from"./chunk-A3JO5HCY.js";import"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import{c as y}from"./chunk-ZCTK5X4D.js";import"./chunk-BKNA2REZ.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import{a}from"./chunk-PFXFESEN.js";import{XIcon as W}from"@phosphor-icons/react/X";import{cva as E}from"class-variance-authority";import{forwardRef as s}from"react";import{jsx as o,jsxs as z}from"react/jsx-runtime";var P=u;P.displayName="Sheet";var C=v;C.displayName="SheetTrigger";var g=m;g.displayName="SheetClose";var N=S;N.displayName="SheetPortal";var b=s(({className:e,...t},i)=>o(p,{className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-40 backdrop-blur-xs",e),...t,ref:i}));b.displayName=p.displayName;var V=E("bg-dialog border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in",{variants:{side:{left:"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r",right:"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l"}},defaultVariants:{side:"right"}}),x=s(({children:e,className:t,onInteractOutside:i,onPointerDownOutside:r,preferredWidth:l="sm:max-w-[30rem]",side:B="right",...O},A)=>z(N,{children:[o(b,{}),o(d,{className:a(V({side:B}),l,t),onInteractOutside:n=>{c(n),i?.(n)},onPointerDownOutside:n=>{c(n),r?.(n)},ref:A,...O,children:e})]}));x.displayName=d.displayName;var T=({size:e="md",type:t="button",label:i="Close Sheet",appearance:r="ghost",...l})=>o(m,{asChild:!0,children:o(y,{appearance:r,icon:o(W,{}),label:i,size:e,type:t,...l})});T.displayName="SheetCloseIconButton";var R=({className:e,...t})=>o("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t});R.displayName="SheetBody";var H=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4","has-[.icon-button]:pr-4",e),...t});H.displayName="SheetHeader";var D=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5",e),...t});D.displayName="SheetFooter";var L=s(({className:e,...t},i)=>o(h,{ref:i,className:a("text-strong flex-1 truncate text-lg font-medium",e),...t}));L.displayName=h.displayName;var M=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex items-center justify-between gap-2",t),...i,ref:r,children:e}));M.displayName="SheetTitleGroup";var I=s(({className:e,...t},i)=>o(f,{ref:i,className:a("text-body text-sm",e),...t}));I.displayName=f.displayName;var w=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex h-full items-center gap-2",t),...i,ref:r,children:e}));w.displayName="SheetActions";var k={Root:P,Actions:w,Body:R,Close:g,CloseIconButton:T,Content:x,Description:I,Footer:D,Header:H,Title:L,TitleGroup:M,Trigger:C};export{k as Sheet};
+import{a as u,b as v,c as S,d as m,e as p,f as d,g as h,h as f}from"./chunk-NQZYWYVH.js";import{d as c}from"./chunk-TS7XNZ62.js";import"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import{c as y}from"./chunk-U32WN4A7.js";import"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import{a}from"./chunk-PFXFESEN.js";import{XIcon as W}from"@phosphor-icons/react/X";import{cva as E}from"class-variance-authority";import{forwardRef as s}from"react";import{jsx as o,jsxs as z}from"react/jsx-runtime";var P=u;P.displayName="Sheet";var C=v;C.displayName="SheetTrigger";var g=m;g.displayName="SheetClose";var N=S;N.displayName="SheetPortal";var b=s(({className:e,...t},i)=>o(p,{className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-40 backdrop-blur-xs",e),...t,ref:i}));b.displayName=p.displayName;var V=E("bg-dialog border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in",{variants:{side:{left:"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r",right:"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l"}},defaultVariants:{side:"right"}}),x=s(({children:e,className:t,onInteractOutside:i,onPointerDownOutside:r,preferredWidth:l="sm:max-w-[30rem]",side:B="right",...O},A)=>z(N,{children:[o(b,{}),o(d,{className:a(V({side:B}),l,t),onInteractOutside:n=>{c(n),i?.(n)},onPointerDownOutside:n=>{c(n),r?.(n)},ref:A,...O,children:e})]}));x.displayName=d.displayName;var T=({size:e="md",type:t="button",label:i="Close Sheet",appearance:r="ghost",...l})=>o(m,{asChild:!0,children:o(y,{appearance:r,icon:o(W,{}),label:i,size:e,type:t,...l})});T.displayName="SheetCloseIconButton";var R=({className:e,...t})=>o("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t});R.displayName="SheetBody";var H=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4","has-[.icon-button]:pr-4",e),...t});H.displayName="SheetHeader";var D=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5",e),...t});D.displayName="SheetFooter";var L=s(({className:e,...t},i)=>o(h,{ref:i,className:a("text-strong flex-1 truncate text-lg font-medium",e),...t}));L.displayName=h.displayName;var M=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex items-center justify-between gap-2",t),...i,ref:r,children:e}));M.displayName="SheetTitleGroup";var I=s(({className:e,...t},i)=>o(f,{ref:i,className:a("text-body text-sm",e),...t}));I.displayName=f.displayName;var w=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex h-full items-center gap-2",t),...i,ref:r,children:e}));w.displayName="SheetActions";var k={Root:P,Actions:w,Body:R,Close:g,CloseIconButton:T,Content:x,Description:I,Footer:D,Header:H,Title:L,TitleGroup:M,Trigger:C};export{k as Sheet};
 //# sourceMappingURL=sheet.js.map