@ngrok/mantle 0.63.2 → 0.64.1

package/dist/split-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/split-button/split-button.tsx"],"sourcesContent":["import { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { forwardRef, type ComponentProps, type ComponentRef, type ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Button } from \"../button/button.js\";\nimport { IconButton } from \"../button/icon-button.js\";\nimport { DropdownMenu } from \"../dropdown-menu/dropdown-menu.js\";\nimport { Icon } from \"../icon/icon.js\";\n\ntype RootProps = ComponentProps<typeof DropdownMenu.Root> & ComponentProps<\"div\">;\n\nconst Root = forwardRef<ComponentRef<\"div\">, RootProps>(\n\t({ className, children, dir, open, defaultOpen, onOpenChange, modal, ...props }, ref) => {\n\t\treturn (\n\t\t\t<DropdownMenu.Root\n\t\t\t\tdir={dir}\n\t\t\t\topen={open}\n\t\t\t\tdefaultOpen={defaultOpen}\n\t\t\t\tonOpenChange={onOpenChange}\n\t\t\t\tmodal={modal}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"split-button\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex flex-row [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px [&>*:focus]:relative [&>*:focus]:z-10 [&>*:hover]:relative [&>*:hover]:z-10 *:active:scale-100!\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</DropdownMenu.Root>\n\t\t);\n\t},\n);\nRoot.displayName = \"SplitButton\";\n\ntype PrimaryActionProps = Omit<ComponentProps<typeof Button>, \"appearance\" | \"type\" | \"priority\"> &\n\tPick<ComponentProps<\"button\">, \"type\">;\n\nconst PrimaryAction = forwardRef<ComponentRef<\"button\">, PrimaryActionProps>(\n\t({ type = \"button\", ...props }, ref) => {\n\t\treturn <Button appearance=\"outlined\" priority=\"neutral\" ref={ref} type={type} {...props} />;\n\t},\n);\nPrimaryAction.displayName = \"SplitButtonPrimaryAction\";\n\ntype MenuTriggerProps = Omit<\n\tComponentProps<typeof IconButton>,\n\t\"appearance\" | \"size\" | \"asChild\" | \"icon\"\n> &\n\tPick<ComponentProps<\"button\">, \"type\"> & {\n\t\ticon?: ReactNode;\n\t};\n\nconst MenuTrigger = forwardRef<ComponentRef<\"button\">, MenuTriggerProps>(\n\t({ icon, type = \"button\", ...props }, ref) => {\n\t\treturn (\n\t\t\t<DropdownMenu.Trigger asChild className=\"group\">\n\t\t\t\t<IconButton\n\t\t\t\t\ticon={\n\t\t\t\t\t\ticon ?? (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\tsvg={\n\t\t\t\t\t\t\t\t\t<CaretDownIcon\n\t\t\t\t\t\t\t\t\t\tweight=\"bold\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"size-4 group-data-[state=open]:-rotate-180 transition-transform ease-out duration-150\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tappearance=\"outlined\"\n\t\t\t\t\tref={ref}\n\t\t\t\t\ttype={type}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</DropdownMenu.Trigger>\n\t\t);\n\t},\n);\nMenuTrigger.displayName = \"SplitButtonMenuTrigger\";\n\nconst MenuContent = forwardRef<\n\tComponentRef<typeof DropdownMenu.Content>,\n\tComponentProps<typeof DropdownMenu.Content>\n>(({ align = \"end\", ...props }, ref) => {\n\treturn <DropdownMenu.Content align={align} ref={ref} {...props} />;\n});\nMenuContent.displayName = \"SplitButtonMenuContent\";\n\nconst MenuItem = forwardRef<\n\tComponentRef<typeof DropdownMenu.Item>,\n\tComponentProps<typeof DropdownMenu.Item>\n>(({ className, ...props }, ref) => {\n\treturn (\n\t\t<DropdownMenu.Item className={cx(\"justify-between gap-4\", className)} ref={ref} {...props} />\n\t);\n});\nMenuItem.displayName = \"SplitButtonMenuItem\";\n\n/**\n * A button group which provides a default action with one click while revealing\n * related alternatives through a dropdown menu. Best for when users typically\n * want one action but occasionally need variants.\n *\n * @see https://mantle.ngrok.com/components/split-button#api-split-button\n *\n * @example\n * ```tsx\n * <SplitButton.Root>\n *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n *     Copy page\n *   </SplitButton.PrimaryAction>\n *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n *   <SplitButton.MenuContent>\n *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n *       Copy page\n *       <Icon svg={<CopyIcon />} />\n *     </SplitButton.MenuItem>\n *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n *       <a href={markdownUrl} target=\"_blank\">\n *         View as Markdown\n *         <Icon svg={<FileTextIcon />} />\n *       </a>\n *     </SplitButton.MenuItem>\n *   </SplitButton.MenuContent>\n * </SplitButton.Root>\n * ```\n */\nconst SplitButton = {\n\t/**\n\t * A button group which provides a default action with one click while revealing\n\t * related alternatives through a dropdown menu. Best for when users typically\n\t * want one action but occasionally need variants.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#api-split-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The most common action users can trigger with a single click.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#api-split-button-primary-action\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tPrimaryAction,\n\t/**\n\t * The button that opens the split button dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#api-split-button-menu-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuTrigger,\n\t/**\n\t * The container for the split button dropdown menu content. Appears in a\n\t * portal with scrolling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#api-split-button-menu-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuContent,\n\t/**\n\t * A standard item in the split button dropdown menu that can be selected or\n\t * activated.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#api-split-button-menu-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuItem,\n} as const;\n\nexport { SplitButton };\n"],"mappings":"2WAAA,OAAS,iBAAAA,MAAqB,kCAC9B,OAAS,cAAAC,MAA0E,QAmB/E,cAAAC,MAAA,oBAVJ,IAAMC,EAAOC,EACZ,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,IAAAC,EAAK,KAAAC,EAAM,YAAAC,EAAa,aAAAC,EAAc,MAAAC,EAAO,GAAGC,CAAM,EAAGC,IAE/EX,EAACY,EAAa,KAAb,CACA,IAAKP,EACL,KAAMC,EACN,YAAaC,EACb,aAAcC,EACd,MAAOC,EAEP,SAAAT,EAAC,OACA,YAAU,eACV,UAAWa,EACV,sQACAV,CACD,EACA,IAAKQ,EACJ,GAAGD,EAEH,SAAAN,EACF,EACD,CAGH,EACAH,EAAK,YAAc,cAKnB,IAAMa,EAAgBZ,EACrB,CAAC,CAAE,KAAAa,EAAO,SAAU,GAAGL,CAAM,EAAGC,IACxBX,EAACgB,EAAA,CAAO,WAAW,WAAW,SAAS,UAAU,IAAKL,EAAK,KAAMI,EAAO,GAAGL,EAAO,CAE3F,EACAI,EAAc,YAAc,2BAU5B,IAAMG,EAAcf,EACnB,CAAC,CAAE,KAAAgB,EAAM,KAAAH,EAAO,SAAU,GAAGL,CAAM,EAAGC,IAEpCX,EAACY,EAAa,QAAb,CAAqB,QAAO,GAAC,UAAU,QACvC,SAAAZ,EAACmB,EAAA,CACA,KACCD,GACClB,EAACoB,EAAA,CACA,IACCpB,EAACqB,EAAA,CACA,OAAO,OACP,UAAU,wFACX,EAEF,EAGF,WAAW,WACX,IAAKV,EACL,KAAMI,EACL,GAAGL,EACL,EACD,CAGH,EACAO,EAAY,YAAc,yBAE1B,IAAMK,EAAcpB,EAGlB,CAAC,CAAE,MAAAqB,EAAQ,MAAO,GAAGb,CAAM,EAAGC,IACxBX,EAACY,EAAa,QAAb,CAAqB,MAAOW,EAAO,IAAKZ,EAAM,GAAGD,EAAO,CAChE,EACDY,EAAY,YAAc,yBAE1B,IAAME,EAAWtB,EAGf,CAAC,CAAE,UAAAC,EAAW,GAAGO,CAAM,EAAGC,IAE1BX,EAACY,EAAa,KAAb,CAAkB,UAAWC,EAAG,wBAAyBV,CAAS,EAAG,IAAKQ,EAAM,GAAGD,EAAO,CAE5F,EACDc,EAAS,YAAc,sBA+BvB,IAAMC,EAAc,CA8BnB,KAAAxB,EA4BA,cAAAa,EA4BA,YAAAG,EA6BA,YAAAK,EA6BA,SAAAE,CACD","names":["CaretDownIcon","forwardRef","jsx","Root","forwardRef","className","children","dir","open","defaultOpen","onOpenChange","modal","props","ref","DropdownMenu","cx","PrimaryAction","type","Button","MenuTrigger","icon","IconButton","Icon","CaretDownIcon","MenuContent","align","MenuItem","SplitButton"]}
+{"version":3,"sources":["../src/components/split-button/split-button.tsx"],"sourcesContent":["import { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { forwardRef, type ComponentProps, type ComponentRef, type ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Button } from \"../button/button.js\";\nimport { IconButton } from \"../button/icon-button.js\";\nimport { DropdownMenu } from \"../dropdown-menu/dropdown-menu.js\";\nimport { Icon } from \"../icon/icon.js\";\n\ntype RootProps = ComponentProps<typeof DropdownMenu.Root> & ComponentProps<\"div\">;\n\nconst Root = forwardRef<ComponentRef<\"div\">, RootProps>(\n\t({ className, children, dir, open, defaultOpen, onOpenChange, modal, ...props }, ref) => {\n\t\treturn (\n\t\t\t<DropdownMenu.Root\n\t\t\t\tdir={dir}\n\t\t\t\topen={open}\n\t\t\t\tdefaultOpen={defaultOpen}\n\t\t\t\tonOpenChange={onOpenChange}\n\t\t\t\tmodal={modal}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"split-button\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex flex-row [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px [&>*:focus]:relative [&>*:focus]:z-10 [&>*:hover]:relative [&>*:hover]:z-10 *:active:scale-100!\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</DropdownMenu.Root>\n\t\t);\n\t},\n);\nRoot.displayName = \"SplitButton\";\n\ntype PrimaryActionProps = Omit<ComponentProps<typeof Button>, \"appearance\" | \"type\" | \"priority\"> &\n\tPick<ComponentProps<\"button\">, \"type\">;\n\nconst PrimaryAction = forwardRef<ComponentRef<\"button\">, PrimaryActionProps>(\n\t({ type = \"button\", ...props }, ref) => {\n\t\treturn <Button appearance=\"outlined\" priority=\"neutral\" ref={ref} type={type} {...props} />;\n\t},\n);\nPrimaryAction.displayName = \"SplitButtonPrimaryAction\";\n\ntype MenuTriggerProps = Omit<\n\tComponentProps<typeof IconButton>,\n\t\"appearance\" | \"size\" | \"asChild\" | \"icon\"\n> &\n\tPick<ComponentProps<\"button\">, \"type\"> & {\n\t\ticon?: ReactNode;\n\t};\n\nconst MenuTrigger = forwardRef<ComponentRef<\"button\">, MenuTriggerProps>(\n\t({ icon, type = \"button\", ...props }, ref) => {\n\t\treturn (\n\t\t\t<DropdownMenu.Trigger asChild className=\"group\">\n\t\t\t\t<IconButton\n\t\t\t\t\ticon={\n\t\t\t\t\t\ticon ?? (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\tsvg={\n\t\t\t\t\t\t\t\t\t<CaretDownIcon\n\t\t\t\t\t\t\t\t\t\tweight=\"bold\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"size-4 group-data-[state=open]:-rotate-180 transition-transform ease-out duration-150\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tappearance=\"outlined\"\n\t\t\t\t\tref={ref}\n\t\t\t\t\ttype={type}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</DropdownMenu.Trigger>\n\t\t);\n\t},\n);\nMenuTrigger.displayName = \"SplitButtonMenuTrigger\";\n\nconst MenuContent = forwardRef<\n\tComponentRef<typeof DropdownMenu.Content>,\n\tComponentProps<typeof DropdownMenu.Content>\n>(({ align = \"end\", ...props }, ref) => {\n\treturn <DropdownMenu.Content align={align} ref={ref} {...props} />;\n});\nMenuContent.displayName = \"SplitButtonMenuContent\";\n\nconst MenuItem = forwardRef<\n\tComponentRef<typeof DropdownMenu.Item>,\n\tComponentProps<typeof DropdownMenu.Item>\n>(({ className, ...props }, ref) => {\n\treturn (\n\t\t<DropdownMenu.Item className={cx(\"justify-between gap-4\", className)} ref={ref} {...props} />\n\t);\n});\nMenuItem.displayName = \"SplitButtonMenuItem\";\n\n/**\n * A button group which provides a default action with one click while revealing\n * related alternatives through a dropdown menu. Best for when users typically\n * want one action but occasionally need variants.\n *\n * @see https://mantle.ngrok.com/components/split-button#splitbuttonroot\n *\n * @example\n * ```tsx\n * <SplitButton.Root>\n *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n *     Copy page\n *   </SplitButton.PrimaryAction>\n *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n *   <SplitButton.MenuContent>\n *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n *       Copy page\n *       <Icon svg={<CopyIcon />} />\n *     </SplitButton.MenuItem>\n *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n *       <a href={markdownUrl} target=\"_blank\">\n *         View as Markdown\n *         <Icon svg={<FileTextIcon />} />\n *       </a>\n *     </SplitButton.MenuItem>\n *   </SplitButton.MenuContent>\n * </SplitButton.Root>\n * ```\n */\nconst SplitButton = {\n\t/**\n\t * A button group which provides a default action with one click while revealing\n\t * related alternatives through a dropdown menu. Best for when users typically\n\t * want one action but occasionally need variants.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The most common action users can trigger with a single click.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonprimaryaction\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tPrimaryAction,\n\t/**\n\t * The button that opens the split button dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenutrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuTrigger,\n\t/**\n\t * The container for the split button dropdown menu content. Appears in a\n\t * portal with scrolling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenucontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuContent,\n\t/**\n\t * A standard item in the split button dropdown menu that can be selected or\n\t * activated.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenuitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuItem,\n} as const;\n\nexport { SplitButton };\n"],"mappings":"2WAAA,OAAS,iBAAAA,MAAqB,kCAC9B,OAAS,cAAAC,MAA0E,QAmB/E,cAAAC,MAAA,oBAVJ,IAAMC,EAAOC,EACZ,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,IAAAC,EAAK,KAAAC,EAAM,YAAAC,EAAa,aAAAC,EAAc,MAAAC,EAAO,GAAGC,CAAM,EAAGC,IAE/EX,EAACY,EAAa,KAAb,CACA,IAAKP,EACL,KAAMC,EACN,YAAaC,EACb,aAAcC,EACd,MAAOC,EAEP,SAAAT,EAAC,OACA,YAAU,eACV,UAAWa,EACV,sQACAV,CACD,EACA,IAAKQ,EACJ,GAAGD,EAEH,SAAAN,EACF,EACD,CAGH,EACAH,EAAK,YAAc,cAKnB,IAAMa,EAAgBZ,EACrB,CAAC,CAAE,KAAAa,EAAO,SAAU,GAAGL,CAAM,EAAGC,IACxBX,EAACgB,EAAA,CAAO,WAAW,WAAW,SAAS,UAAU,IAAKL,EAAK,KAAMI,EAAO,GAAGL,EAAO,CAE3F,EACAI,EAAc,YAAc,2BAU5B,IAAMG,EAAcf,EACnB,CAAC,CAAE,KAAAgB,EAAM,KAAAH,EAAO,SAAU,GAAGL,CAAM,EAAGC,IAEpCX,EAACY,EAAa,QAAb,CAAqB,QAAO,GAAC,UAAU,QACvC,SAAAZ,EAACmB,EAAA,CACA,KACCD,GACClB,EAACoB,EAAA,CACA,IACCpB,EAACqB,EAAA,CACA,OAAO,OACP,UAAU,wFACX,EAEF,EAGF,WAAW,WACX,IAAKV,EACL,KAAMI,EACL,GAAGL,EACL,EACD,CAGH,EACAO,EAAY,YAAc,yBAE1B,IAAMK,EAAcpB,EAGlB,CAAC,CAAE,MAAAqB,EAAQ,MAAO,GAAGb,CAAM,EAAGC,IACxBX,EAACY,EAAa,QAAb,CAAqB,MAAOW,EAAO,IAAKZ,EAAM,GAAGD,EAAO,CAChE,EACDY,EAAY,YAAc,yBAE1B,IAAME,EAAWtB,EAGf,CAAC,CAAE,UAAAC,EAAW,GAAGO,CAAM,EAAGC,IAE1BX,EAACY,EAAa,KAAb,CAAkB,UAAWC,EAAG,wBAAyBV,CAAS,EAAG,IAAKQ,EAAM,GAAGD,EAAO,CAE5F,EACDc,EAAS,YAAc,sBA+BvB,IAAMC,EAAc,CA8BnB,KAAAxB,EA4BA,cAAAa,EA4BA,YAAAG,EA6BA,YAAAK,EA6BA,SAAAE,CACD","names":["CaretDownIcon","forwardRef","jsx","Root","forwardRef","className","children","dir","open","defaultOpen","onOpenChange","modal","props","ref","DropdownMenu","cx","PrimaryAction","type","Button","MenuTrigger","icon","IconButton","Icon","CaretDownIcon","MenuContent","align","MenuItem","SplitButton"]}

package/dist/{svg-only-Bj2yffO4.d.ts → svg-only-Cp8Mu_sh.d.ts}

@@ -12,7 +12,7 @@ type SvgOnlyProps = Omit<SvgAttributes, "children"> & {
  * Accepts a single SVG icon element and decorates it with `shrink-0` class.
  * You probably want to use the `Icon` component instead.
  *
- * @see https://mantle.ngrok.com/components/icon#api-svg-only
+ * @see https://mantle.ngrok.com/components/icon
  *
  * @example
  * ```tsx

package/dist/switch.d.ts

@@ -4,7 +4,7 @@ import * as _radix_ui_react_switch from '@radix-ui/react-switch';
 /**
  * A form control that allows the user to toggle between checked and not checked.
  *
- * @see https://mantle.ngrok.com/components/switch#api-switch
+ * @see https://mantle.ngrok.com/components/switch
  *
  * @example
  * ```tsx

package/dist/switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/switch/switch.tsx"],"sourcesContent":["import { Root as SwitchPrimitiveRoot, Thumb as SwitchPrimitiveThumb } from \"@radix-ui/react-switch\";\nimport clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype SwitchProps = ComponentPropsWithoutRef<typeof SwitchPrimitiveRoot> & {\n\t/**\n\t * Makes the switch immutable, meaning the user can not edit the control.\n\t */\n\treadOnly?: boolean;\n};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n *\n * @see https://mantle.ngrok.com/components/switch#api-switch\n *\n * @example\n * ```tsx\n * <form>\n *   <Label htmlFor=\"airplane-mode\" className=\"flex items-center gap-2\">\n *     Airplane Mode\n *     <Switch name=\"airplane-mode\" id=\"airplane-mode\" />\n *   </Label>\n * </form>\n * ```\n */\nconst Switch = forwardRef<ComponentRef<typeof SwitchPrimitiveRoot>, SwitchProps>(\n\t({ \"aria-readonly\": _ariaReadOnly, className, readOnly: _readOnly, onClick, ...props }, ref) => {\n\t\tconst readOnly = parseBooleanish(_readOnly ?? _ariaReadOnly);\n\n\t\treturn (\n\t\t\t<SwitchPrimitiveRoot\n\t\t\t\taria-readonly={readOnly}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full outline-hidden\",\n\t\t\t\t\t\"disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"data-state-checked:bg-blue-500 data-state-unchecked:bg-gray-400\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SwitchPrimitiveThumb\n\t\t\t\t\tclassName={clsx(\n\t\t\t\t\t\t\"pointer-events-none block size-4 rounded-full bg-[#fff] shadow-md ring-0 transition-transform\",\n\t\t\t\t\t\t\"data-state-checked:translate-x-4.5 data-state-unchecked:translate-x-0.5\",\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t</SwitchPrimitiveRoot>\n\t\t);\n\t},\n);\nSwitch.displayName = \"Switch\";\n\nexport {\n\t//\n\tSwitch,\n};\n"],"mappings":"gFAAA,OAAS,QAAQA,EAAqB,SAASC,MAA4B,yBAC3E,OAAOC,MAAU,OACjB,OAAS,cAAAC,MAAkB,QAoDvB,cAAAC,MAAA,oBAzBJ,IAAMC,EAASC,EACd,CAAC,CAAE,gBAAiBC,EAAe,UAAAC,EAAW,SAAUC,EAAW,QAAAC,EAAS,GAAGC,CAAM,EAAGC,IAAQ,CAC/F,IAAMC,EAAWC,EAAgBL,GAAaF,CAAa,EAE3D,OACCH,EAACW,EAAA,CACA,gBAAeF,EACf,UAAWG,EACV,4FACA,8CACA,oHACA,kEACAR,CACD,EACA,QAAUS,GAAU,CACnB,GAAIJ,EAAU,CACbI,EAAM,eAAe,EACrBA,EAAM,gBAAgB,EACtB,MACD,CACAP,IAAUO,CAAK,CAChB,EACA,IAAKL,EACJ,GAAGD,EAEJ,SAAAP,EAACc,EAAA,CACA,UAAWC,EACV,gGACA,yEACD,EACD,EACD,CAEF,CACD,EACAd,EAAO,YAAc","names":["SwitchPrimitiveRoot","SwitchPrimitiveThumb","clsx","forwardRef","jsx","Switch","forwardRef","_ariaReadOnly","className","_readOnly","onClick","props","ref","readOnly","parseBooleanish","SwitchPrimitiveRoot","cx","event","SwitchPrimitiveThumb","clsx"]}
+{"version":3,"sources":["../src/components/switch/switch.tsx"],"sourcesContent":["import { Root as SwitchPrimitiveRoot, Thumb as SwitchPrimitiveThumb } from \"@radix-ui/react-switch\";\nimport clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype SwitchProps = ComponentPropsWithoutRef<typeof SwitchPrimitiveRoot> & {\n\t/**\n\t * Makes the switch immutable, meaning the user can not edit the control.\n\t */\n\treadOnly?: boolean;\n};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n *\n * @see https://mantle.ngrok.com/components/switch\n *\n * @example\n * ```tsx\n * <form>\n *   <Label htmlFor=\"airplane-mode\" className=\"flex items-center gap-2\">\n *     Airplane Mode\n *     <Switch name=\"airplane-mode\" id=\"airplane-mode\" />\n *   </Label>\n * </form>\n * ```\n */\nconst Switch = forwardRef<ComponentRef<typeof SwitchPrimitiveRoot>, SwitchProps>(\n\t({ \"aria-readonly\": _ariaReadOnly, className, readOnly: _readOnly, onClick, ...props }, ref) => {\n\t\tconst readOnly = parseBooleanish(_readOnly ?? _ariaReadOnly);\n\n\t\treturn (\n\t\t\t<SwitchPrimitiveRoot\n\t\t\t\taria-readonly={readOnly}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full outline-hidden\",\n\t\t\t\t\t\"disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"data-state-checked:bg-blue-500 data-state-unchecked:bg-gray-400\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SwitchPrimitiveThumb\n\t\t\t\t\tclassName={clsx(\n\t\t\t\t\t\t\"pointer-events-none block size-4 rounded-full bg-[#fff] shadow-md ring-0 transition-transform\",\n\t\t\t\t\t\t\"data-state-checked:translate-x-4.5 data-state-unchecked:translate-x-0.5\",\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t</SwitchPrimitiveRoot>\n\t\t);\n\t},\n);\nSwitch.displayName = \"Switch\";\n\nexport {\n\t//\n\tSwitch,\n};\n"],"mappings":"gFAAA,OAAS,QAAQA,EAAqB,SAASC,MAA4B,yBAC3E,OAAOC,MAAU,OACjB,OAAS,cAAAC,MAAkB,QAoDvB,cAAAC,MAAA,oBAzBJ,IAAMC,EAASC,EACd,CAAC,CAAE,gBAAiBC,EAAe,UAAAC,EAAW,SAAUC,EAAW,QAAAC,EAAS,GAAGC,CAAM,EAAGC,IAAQ,CAC/F,IAAMC,EAAWC,EAAgBL,GAAaF,CAAa,EAE3D,OACCH,EAACW,EAAA,CACA,gBAAeF,EACf,UAAWG,EACV,4FACA,8CACA,oHACA,kEACAR,CACD,EACA,QAAUS,GAAU,CACnB,GAAIJ,EAAU,CACbI,EAAM,eAAe,EACrBA,EAAM,gBAAgB,EACtB,MACD,CACAP,IAAUO,CAAK,CAChB,EACA,IAAKL,EACJ,GAAGD,EAEJ,SAAAP,EAACc,EAAA,CACA,UAAWC,EACV,gGACA,yEACD,EACD,EACD,CAEF,CACD,EACAd,EAAO,YAAc","names":["SwitchPrimitiveRoot","SwitchPrimitiveThumb","clsx","forwardRef","jsx","Switch","forwardRef","_ariaReadOnly","className","_readOnly","onClick","props","ref","readOnly","parseBooleanish","SwitchPrimitiveRoot","cx","event","SwitchPrimitiveThumb","clsx"]}

package/dist/table.d.ts

@@ -43,7 +43,7 @@ declare const Table: {
     /**
      * The body section of the table. Encapsulates a set of table rows comprising the body of a table's main data.
      *
-     * @see https://mantle.ngrok.com/components/table#api-table-body
+     * @see https://mantle.ngrok.com/components/table#tablebody
      *
      * @example
      * ```tsx
@@ -82,7 +82,7 @@ declare const Table: {
     /**
      * An optional caption that specifies the caption (or title) of a table, providing an accessible description.
      *
-     * @see https://mantle.ngrok.com/components/table#api-table-caption
+     * @see https://mantle.ngrok.com/components/table#tablecaption
      *
      * @example
      * ```tsx
@@ -121,7 +121,7 @@ declare const Table: {
     /**
      * A cell that contains data and may be used as a child of a table row.
      *
-     * @see https://mantle.ngrok.com/components/table#api-table-cell
+     * @see https://mantle.ngrok.com/components/table#tablecell
      *
      * @example
      * ```tsx
@@ -160,7 +160,7 @@ declare const Table: {
     /**
      * A structured way to display data in rows and columns. The API matches the HTML table element 1:1.
      *
-     * @see https://mantle.ngrok.com/components/table#api-table-element
+     * @see https://mantle.ngrok.com/components/table#tableelement
      *
      * @example
      * ```tsx
@@ -199,7 +199,7 @@ declare const Table: {
     /**
      * The foot section of a table. Encapsulates a set of table rows comprising the foot with summary information.
      *
-     * @see https://mantle.ngrok.com/components/table#api-table-foot
+     * @see https://mantle.ngrok.com/components/table#tablefoot
      *
      * @example
      * ```tsx
@@ -238,7 +238,7 @@ declare const Table: {
     /**
      * The head section of a table. Contains the table's column headers information.
      *
-     * @see https://mantle.ngrok.com/components/table#api-table-header
+     * @see https://mantle.ngrok.com/components/table#tableheader
      *
      * @example
      * ```tsx
@@ -277,7 +277,7 @@ declare const Table: {
     /**
      * A cell that defines the header of a group of table cells as a child of a table row.
      *
-     * @see https://mantle.ngrok.com/components/table#api-table-header
+     * @see https://mantle.ngrok.com/components/table#tableheader
      *
      * @example
      * ```tsx
@@ -316,7 +316,7 @@ declare const Table: {
     /**
      * The root container element for all tables. Provides styling and additional functionality like horizontal overflow detection.
      *
-     * @see https://mantle.ngrok.com/components/table#api-table-root
+     * @see https://mantle.ngrok.com/components/table#tableroot
      *
      * @example
      * ```tsx
@@ -355,7 +355,7 @@ declare const Table: {
     /**
      * Defines a row of cells in a table. Contains a mix of table cells and table headers.
      *
-     * @see https://mantle.ngrok.com/components/table#api-table-row
+     * @see https://mantle.ngrok.com/components/table#tablerow
      *
      * @example
      * ```tsx

package/dist/table.js

@@ -1,2 +1,2 @@
-import{a as e}from"./chunk-5M264XXH.js";import"./chunk-HKSO72E5.js";import"./chunk-PFXFESEN.js";export{e as Table};
+import{a as e}from"./chunk-RED6SFAV.js";import"./chunk-HKSO72E5.js";import"./chunk-PFXFESEN.js";export{e as Table};
 //# sourceMappingURL=table.js.map

package/dist/tabs.d.ts

@@ -30,7 +30,7 @@ declare const Tabs: {
      * The root container of the tabs component that provides context for all tab components.
      * A set of layered sections of content—known as tab panels—that are displayed one at a time.
      *
-     * @see https://mantle.ngrok.com/components/tabs#api-tabs-root
+     * @see https://mantle.ngrok.com/components/tabs#tabsroot
      *
      * @example
      * ```tsx
@@ -57,7 +57,7 @@ declare const Tabs: {
      * Contains the content associated with each trigger.
      * The content panel that displays when its corresponding tab trigger is active.
      *
-     * @see https://mantle.ngrok.com/components/tabs#api-tabs-content
+     * @see https://mantle.ngrok.com/components/tabs#tabscontent
      *
      * @example
      * ```tsx
@@ -76,7 +76,7 @@ declare const Tabs: {
      * Contains the triggers that are aligned along the edge of the active content.
      * The container for tab triggers that provides the visual layout for tab navigation.
      *
-     * @see https://mantle.ngrok.com/components/tabs#api-tabs-list
+     * @see https://mantle.ngrok.com/components/tabs#tabslist
      *
      * @example
      * ```tsx
@@ -93,7 +93,7 @@ declare const Tabs: {
      * The button that activates its associated content.
      * A clickable tab trigger that switches between different tab content panels.
      *
-     * @see https://mantle.ngrok.com/components/tabs#api-tabs-trigger
+     * @see https://mantle.ngrok.com/components/tabs#tabstrigger
      *
      * @example
      * ```tsx
@@ -110,7 +110,7 @@ declare const Tabs: {
      * A badge component that can be used inside tab triggers to display additional information.
      * Typically used to show counts or status indicators within tab headers.
      *
-     * @see https://mantle.ngrok.com/components/tabs#api-tab-badge
+     * @see https://mantle.ngrok.com/components/tabs#tabsbadge
      *
      * @example
      * ```tsx

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/tabs/tabs.tsx"],"sourcesContent":["import {\n\tContent as TabsPrimitiveContent,\n\tList as TabsPrimitiveList,\n\tRoot as TabsPrimitiveRoot,\n\tTrigger as TabsPrimitiveTrigger,\n} from \"@radix-ui/react-tabs\";\nimport { cva } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport type { ComponentPropsWithoutRef, ComponentRef, HTMLAttributes } from \"react\";\nimport {\n\tChildren,\n\tcloneElement,\n\tcreateContext,\n\tforwardRef,\n\tisValidElement,\n\tuseContext,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\ntype Appearance = \"classic\" | \"pill\";\n\ntype TabsStateContextValue = {\n\torientation: Orientation;\n\tappearance: Appearance;\n};\n\nconst TabsStateContext = createContext<TabsStateContextValue>({\n\torientation: \"horizontal\",\n\tappearance: \"classic\",\n});\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n * The root component that provides context for all tab components.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<typeof TabsPrimitiveRoot>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveRoot> & {\n\t\t/**\n\t\t * The appearance of the tabs. Classic appearance shows the tab\n\t\t * list with an underline; pill appearance shows each tab as a pill.\n\t\t * @default \"classic\"\n\t\t */\n\t\tappearance?: \"classic\" | \"pill\";\n\t}\n>(({ className, children, orientation = \"horizontal\", appearance = \"classic\", ...props }, ref) => (\n\t<TabsPrimitiveRoot\n\t\tclassName={cx(\"flex gap-4\", orientation === \"horizontal\" ? \"flex-col\" : \"flex-row\", className)}\n\t\torientation={orientation}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t<TabsStateContext.Provider value={{ orientation, appearance }}>\n\t\t\t{children}\n\t\t</TabsStateContext.Provider>\n\t</TabsPrimitiveRoot>\n));\nRoot.displayName = \"Tabs\";\n\n/**\n * Variants for the List component\n */\nconst listVariants = cva(\"flex border-gray-200\", {\n\tvariants: {\n\t\torientation: {\n\t\t\thorizontal: \"flex-row items-center\",\n\t\t\tvertical: \"flex-col items-end gap-3.5 self-stretch\",\n\t\t} as const satisfies Record<Orientation, string>,\n\t\tappearance: {\n\t\t\tclassic: \"\",\n\t\t\tpill: \"\",\n\t\t} as const satisfies Record<Appearance, string>,\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\torientation: \"horizontal\",\n\t\t\tappearance: \"pill\",\n\t\t\tclassName: \"gap-1\",\n\t\t},\n\t\t{\n\t\t\torientation: \"horizontal\",\n\t\t\tappearance: \"classic\",\n\t\t\tclassName: \"gap-6 border-b\",\n\t\t},\n\t\t{\n\t\t\torientation: \"vertical\",\n\t\t\tappearance: \"classic\",\n\t\t\tclassName: \"border-r\",\n\t\t},\n\t],\n});\n\n/**\n * Contains the triggers that are aligned along the edge of the active content.\n * The container for tab triggers that provides the visual layout for tab navigation.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs-list\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst List = forwardRef<\n\tComponentRef<typeof TabsPrimitiveList>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveList>\n>(({ className, ...props }, ref) => {\n\tconst { orientation, appearance } = useContext(TabsStateContext);\n\n\treturn (\n\t\t<TabsPrimitiveList\n\t\t\taria-orientation={orientation}\n\t\t\tclassName={cx(listVariants({ orientation, appearance }), className)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nList.displayName = \"TabsList\";\n\ntype TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitiveTrigger>;\n\n/**\n * Variants for the TabsTriggerDecoration component\n */\nconst triggerDecorationVariants = cva(\"absolute z-0\", {\n\tvariants: {\n\t\torientation: {\n\t\t\thorizontal: \"-bottom-px left-0 right-0 h-0.75\",\n\t\t\tvertical: \"-right-px bottom-0 top-0 w-0.75\",\n\t\t} as const satisfies Record<Orientation, string>,\n\t\tappearance: {\n\t\t\tclassic: \"group-data-state-active/tab-trigger:bg-blue-600\",\n\t\t\tpill: \"hidden\",\n\t\t} as const satisfies Record<Appearance, string>,\n\t},\n});\n\nconst TabsTriggerDecoration = () => {\n\tconst { orientation, appearance } = useContext(TabsStateContext);\n\n\treturn (\n\t\t<span aria-hidden className={clsx(triggerDecorationVariants({ orientation, appearance }))} />\n\t);\n};\nTabsTriggerDecoration.displayName = \"TabsTriggerDecoration\";\n\n/**\n * Variants for the Trigger component\n */\nconst triggerVariants = cva(\n\tcx(\n\t\t\"group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600\",\n\t\t\"ring-focus-accent outline-hidden\",\n\t\t\"aria-disabled:cursor-default aria-disabled:opacity-50\",\n\t\t\"focus-visible:ring-4\",\n\t\t\"[&>svg]:shrink-0 [&>svg]:size-5\",\n\t\t\"not-aria-disabled:hover:text-gray-900\",\n\t),\n\t{\n\t\tvariants: {\n\t\t\torientation: {\n\t\t\t\thorizontal: \"rounded-tl-md rounded-tr-md\",\n\t\t\t\tvertical: \"rounded-bl-md rounded-tl-md pr-3\",\n\t\t\t} as const satisfies Record<Orientation, string>,\n\t\t\tappearance: {\n\t\t\t\tclassic: cx(\n\t\t\t\t\t\"not-aria-disabled:hover:data-state-active:text-blue-600\",\n\t\t\t\t\t\"data-state-active:text-blue-600\",\n\t\t\t\t),\n\t\t\t\tpill: cx(\n\t\t\t\t\t\"not-aria-disabled:hover:data-state-active:text-blue-700\",\n\t\t\t\t\t\"not-aria-disabled:hover:data-state-active:bg-accent-500/20\",\n\t\t\t\t\t\"data-state-active:text-blue-700\",\n\t\t\t\t\t\"data-state-active:bg-accent-500/20\",\n\t\t\t\t\t\"rounded-full py-2 px-3\",\n\t\t\t\t),\n\t\t\t} as const satisfies Record<Appearance, string>,\n\t\t},\n\t},\n);\n\n/**\n * The button that activates its associated content.\n * A clickable tab trigger that switches between different tab content panels.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs-trigger\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Trigger = forwardRef<ComponentRef<typeof TabsPrimitiveTrigger>, TabsTriggerProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst { orientation, appearance } = useContext(TabsStateContext);\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled);\n\n\t\tconst tabsTriggerProps = {\n\t\t\t\"aria-disabled\": _ariaDisabled ?? _disabled,\n\t\t\tclassName: cx(triggerVariants({ orientation, appearance }), className),\n\t\t\tdisabled,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<TabsTriggerProps>(singleChild),\n\t\t\t\t\"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\tconst cloneProps = disabled\n\t\t\t\t? /**\n\t\t\t\t\t * When disabled, prevent anchor/link children from being clickable by\n\t\t\t\t\t * removing their href/to props!\n\t\t\t\t\t * This is necessary because `<a>` doesn't support the `disabled`\n\t\t\t\t\t * attribute and would be navigable. We could use `pointer-events-none`\n\t\t\t\t\t * instead, but don't by default because it would also prevent tooltip\n\t\t\t\t\t * interactions, which may be surprising.\n\t\t\t\t\t */\n\t\t\t\t\t{ href: undefined, to: undefined }\n\t\t\t\t: /**\n\t\t\t\t\t * when NOT disabled, allow keyboard navigation to the trigger,\n\t\t\t\t\t * even for asChild anchors/links\n\t\t\t\t\t */\n\t\t\t\t\t{ tabIndex: 0 };\n\n\t\t\treturn (\n\t\t\t\t<TabsPrimitiveTrigger asChild {...tabsTriggerProps} ref={ref}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tdisabled ? <button type=\"button\" /> : singleChild,\n\t\t\t\t\t\tcloneProps,\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<TabsTriggerDecoration />\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</TabsPrimitiveTrigger>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<TabsPrimitiveTrigger ref={ref} {...tabsTriggerProps}>\n\t\t\t\t<TabsTriggerDecoration />\n\t\t\t\t{children}\n\t\t\t</TabsPrimitiveTrigger>\n\t\t);\n\t},\n);\nTrigger.displayName = \"TabsTrigger\";\n\n/**\n * A badge component that can be used inside tab triggers to display additional information.\n * Typically used to show counts or status indicators within tab headers.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tab-badge\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">\n *       Account <Tabs.Badge>5</Tabs.Badge>\n *     </Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n * </Tabs.Root>\n * ```\n */\nconst Badge = ({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"rounded-full bg-gray-500/20 px-1.5 text-xs font-medium text-gray-600\",\n\t\t\t\"group-data-state-active/tab-trigger:bg-blue-500/20 group-data-state-active/tab-trigger:text-blue-700 group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-blue-700\",\n\t\t\t\"group-hover/tab-trigger:group-enabled/tab-trigger:text-gray-700\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</span>\n);\nBadge.displayName = \"TabBadge\";\n\n/**\n * Contains the content associated with each trigger.\n * The content panel that displays when its corresponding tab trigger is active.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs-content\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TabsPrimitiveContent>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveContent>\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitiveContent\n\t\tref={ref}\n\t\tclassName={cx(\"focus-visible:ring-focus-accent outline-hidden focus-visible:ring-4\", className)}\n\t\t{...props}\n\t/>\n));\nContent.displayName = \"TabsContent\";\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n * The root component that provides context for all tab components.\n *\n * @see https://mantle.ngrok.com/components/tabs\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Tabs = {\n\t/**\n\t * The root container of the tabs component that provides context for all tab components.\n\t * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t *   <Tabs.Content value=\"account\">\n\t *     <p>Make changes to your account here.</p>\n\t *   </Tabs.Content>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the content associated with each trigger.\n\t * The content panel that displays when its corresponding tab trigger is active.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *   </Tabs.List>\n\t *   <Tabs.Content value=\"account\">\n\t *     <p>Make changes to your account here.</p>\n\t *   </Tabs.Content>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Contains the triggers that are aligned along the edge of the active content.\n\t * The container for tab triggers that provides the visual layout for tab navigation.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-list\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tList,\n\t/**\n\t * The button that activates its associated content.\n\t * A clickable tab trigger that switches between different tab content panels.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * A badge component that can be used inside tab triggers to display additional information.\n\t * Typically used to show counts or status indicators within tab headers.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tab-badge\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">\n\t *       Account <Tabs.Badge>5</Tabs.Badge>\n\t *     </Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tBadge,\n} as const;\n\nexport {\n\t//\n\tTabs,\n};\n"],"mappings":"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","names":["TabsPrimitiveContent","TabsPrimitiveList","TabsPrimitiveRoot","TabsPrimitiveTrigger","cva","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","invariant","Fragment","jsx","jsxs","TabsStateContext","createContext","Root","forwardRef","className","children","orientation","appearance","props","ref","TabsPrimitiveRoot","cx","listVariants","cva","List","useContext","TabsPrimitiveList","triggerDecorationVariants","TabsTriggerDecoration","clsx","triggerVariants","Trigger","_ariaDisabled","asChild","_disabled","disabled","parseBooleanish","tabsTriggerProps","singleChild","Children","invariant","isValidElement","grandchildren","TabsPrimitiveTrigger","cloneElement","Badge","Content","TabsPrimitiveContent","Tabs"]}
+{"version":3,"sources":["../src/components/tabs/tabs.tsx"],"sourcesContent":["import {\n\tContent as TabsPrimitiveContent,\n\tList as TabsPrimitiveList,\n\tRoot as TabsPrimitiveRoot,\n\tTrigger as TabsPrimitiveTrigger,\n} from \"@radix-ui/react-tabs\";\nimport { cva } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport type { ComponentPropsWithoutRef, ComponentRef, HTMLAttributes } from \"react\";\nimport {\n\tChildren,\n\tcloneElement,\n\tcreateContext,\n\tforwardRef,\n\tisValidElement,\n\tuseContext,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\ntype Appearance = \"classic\" | \"pill\";\n\ntype TabsStateContextValue = {\n\torientation: Orientation;\n\tappearance: Appearance;\n};\n\nconst TabsStateContext = createContext<TabsStateContextValue>({\n\torientation: \"horizontal\",\n\tappearance: \"classic\",\n});\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n * The root component that provides context for all tab components.\n *\n * @see https://mantle.ngrok.com/components/tabs#tabsroot\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<typeof TabsPrimitiveRoot>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveRoot> & {\n\t\t/**\n\t\t * The appearance of the tabs. Classic appearance shows the tab\n\t\t * list with an underline; pill appearance shows each tab as a pill.\n\t\t * @default \"classic\"\n\t\t */\n\t\tappearance?: \"classic\" | \"pill\";\n\t}\n>(({ className, children, orientation = \"horizontal\", appearance = \"classic\", ...props }, ref) => (\n\t<TabsPrimitiveRoot\n\t\tclassName={cx(\"flex gap-4\", orientation === \"horizontal\" ? \"flex-col\" : \"flex-row\", className)}\n\t\torientation={orientation}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t<TabsStateContext.Provider value={{ orientation, appearance }}>\n\t\t\t{children}\n\t\t</TabsStateContext.Provider>\n\t</TabsPrimitiveRoot>\n));\nRoot.displayName = \"Tabs\";\n\n/**\n * Variants for the List component\n */\nconst listVariants = cva(\"flex border-gray-200\", {\n\tvariants: {\n\t\torientation: {\n\t\t\thorizontal: \"flex-row items-center\",\n\t\t\tvertical: \"flex-col items-end gap-3.5 self-stretch\",\n\t\t} as const satisfies Record<Orientation, string>,\n\t\tappearance: {\n\t\t\tclassic: \"\",\n\t\t\tpill: \"\",\n\t\t} as const satisfies Record<Appearance, string>,\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\torientation: \"horizontal\",\n\t\t\tappearance: \"pill\",\n\t\t\tclassName: \"gap-1\",\n\t\t},\n\t\t{\n\t\t\torientation: \"horizontal\",\n\t\t\tappearance: \"classic\",\n\t\t\tclassName: \"gap-6 border-b\",\n\t\t},\n\t\t{\n\t\t\torientation: \"vertical\",\n\t\t\tappearance: \"classic\",\n\t\t\tclassName: \"border-r\",\n\t\t},\n\t],\n});\n\n/**\n * Contains the triggers that are aligned along the edge of the active content.\n * The container for tab triggers that provides the visual layout for tab navigation.\n *\n * @see https://mantle.ngrok.com/components/tabs#tabslist\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst List = forwardRef<\n\tComponentRef<typeof TabsPrimitiveList>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveList>\n>(({ className, ...props }, ref) => {\n\tconst { orientation, appearance } = useContext(TabsStateContext);\n\n\treturn (\n\t\t<TabsPrimitiveList\n\t\t\taria-orientation={orientation}\n\t\t\tclassName={cx(listVariants({ orientation, appearance }), className)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nList.displayName = \"TabsList\";\n\ntype TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitiveTrigger>;\n\n/**\n * Variants for the TabsTriggerDecoration component\n */\nconst triggerDecorationVariants = cva(\"absolute z-0\", {\n\tvariants: {\n\t\torientation: {\n\t\t\thorizontal: \"-bottom-px left-0 right-0 h-0.75\",\n\t\t\tvertical: \"-right-px bottom-0 top-0 w-0.75\",\n\t\t} as const satisfies Record<Orientation, string>,\n\t\tappearance: {\n\t\t\tclassic: \"group-data-state-active/tab-trigger:bg-blue-600\",\n\t\t\tpill: \"hidden\",\n\t\t} as const satisfies Record<Appearance, string>,\n\t},\n});\n\nconst TabsTriggerDecoration = () => {\n\tconst { orientation, appearance } = useContext(TabsStateContext);\n\n\treturn (\n\t\t<span aria-hidden className={clsx(triggerDecorationVariants({ orientation, appearance }))} />\n\t);\n};\nTabsTriggerDecoration.displayName = \"TabsTriggerDecoration\";\n\n/**\n * Variants for the Trigger component\n */\nconst triggerVariants = cva(\n\tcx(\n\t\t\"group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600\",\n\t\t\"ring-focus-accent outline-hidden\",\n\t\t\"aria-disabled:cursor-default aria-disabled:opacity-50\",\n\t\t\"focus-visible:ring-4\",\n\t\t\"[&>svg]:shrink-0 [&>svg]:size-5\",\n\t\t\"not-aria-disabled:hover:text-gray-900\",\n\t),\n\t{\n\t\tvariants: {\n\t\t\torientation: {\n\t\t\t\thorizontal: \"rounded-tl-md rounded-tr-md\",\n\t\t\t\tvertical: \"rounded-bl-md rounded-tl-md pr-3\",\n\t\t\t} as const satisfies Record<Orientation, string>,\n\t\t\tappearance: {\n\t\t\t\tclassic: cx(\n\t\t\t\t\t\"not-aria-disabled:hover:data-state-active:text-blue-600\",\n\t\t\t\t\t\"data-state-active:text-blue-600\",\n\t\t\t\t),\n\t\t\t\tpill: cx(\n\t\t\t\t\t\"not-aria-disabled:hover:data-state-active:text-blue-700\",\n\t\t\t\t\t\"not-aria-disabled:hover:data-state-active:bg-accent-500/20\",\n\t\t\t\t\t\"data-state-active:text-blue-700\",\n\t\t\t\t\t\"data-state-active:bg-accent-500/20\",\n\t\t\t\t\t\"rounded-full py-2 px-3\",\n\t\t\t\t),\n\t\t\t} as const satisfies Record<Appearance, string>,\n\t\t},\n\t},\n);\n\n/**\n * The button that activates its associated content.\n * A clickable tab trigger that switches between different tab content panels.\n *\n * @see https://mantle.ngrok.com/components/tabs#tabstrigger\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Trigger = forwardRef<ComponentRef<typeof TabsPrimitiveTrigger>, TabsTriggerProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst { orientation, appearance } = useContext(TabsStateContext);\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled);\n\n\t\tconst tabsTriggerProps = {\n\t\t\t\"aria-disabled\": _ariaDisabled ?? _disabled,\n\t\t\tclassName: cx(triggerVariants({ orientation, appearance }), className),\n\t\t\tdisabled,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<TabsTriggerProps>(singleChild),\n\t\t\t\t\"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\tconst cloneProps = disabled\n\t\t\t\t? /**\n\t\t\t\t\t * When disabled, prevent anchor/link children from being clickable by\n\t\t\t\t\t * removing their href/to props!\n\t\t\t\t\t * This is necessary because `<a>` doesn't support the `disabled`\n\t\t\t\t\t * attribute and would be navigable. We could use `pointer-events-none`\n\t\t\t\t\t * instead, but don't by default because it would also prevent tooltip\n\t\t\t\t\t * interactions, which may be surprising.\n\t\t\t\t\t */\n\t\t\t\t\t{ href: undefined, to: undefined }\n\t\t\t\t: /**\n\t\t\t\t\t * when NOT disabled, allow keyboard navigation to the trigger,\n\t\t\t\t\t * even for asChild anchors/links\n\t\t\t\t\t */\n\t\t\t\t\t{ tabIndex: 0 };\n\n\t\t\treturn (\n\t\t\t\t<TabsPrimitiveTrigger asChild {...tabsTriggerProps} ref={ref}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tdisabled ? <button type=\"button\" /> : singleChild,\n\t\t\t\t\t\tcloneProps,\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<TabsTriggerDecoration />\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</TabsPrimitiveTrigger>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<TabsPrimitiveTrigger ref={ref} {...tabsTriggerProps}>\n\t\t\t\t<TabsTriggerDecoration />\n\t\t\t\t{children}\n\t\t\t</TabsPrimitiveTrigger>\n\t\t);\n\t},\n);\nTrigger.displayName = \"TabsTrigger\";\n\n/**\n * A badge component that can be used inside tab triggers to display additional information.\n * Typically used to show counts or status indicators within tab headers.\n *\n * @see https://mantle.ngrok.com/components/tabs#tabsbadge\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">\n *       Account <Tabs.Badge>5</Tabs.Badge>\n *     </Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n * </Tabs.Root>\n * ```\n */\nconst Badge = ({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"rounded-full bg-gray-500/20 px-1.5 text-xs font-medium text-gray-600\",\n\t\t\t\"group-data-state-active/tab-trigger:bg-blue-500/20 group-data-state-active/tab-trigger:text-blue-700 group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-blue-700\",\n\t\t\t\"group-hover/tab-trigger:group-enabled/tab-trigger:text-gray-700\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</span>\n);\nBadge.displayName = \"TabBadge\";\n\n/**\n * Contains the content associated with each trigger.\n * The content panel that displays when its corresponding tab trigger is active.\n *\n * @see https://mantle.ngrok.com/components/tabs#tabscontent\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TabsPrimitiveContent>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveContent>\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitiveContent\n\t\tref={ref}\n\t\tclassName={cx(\"focus-visible:ring-focus-accent outline-hidden focus-visible:ring-4\", className)}\n\t\t{...props}\n\t/>\n));\nContent.displayName = \"TabsContent\";\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n * The root component that provides context for all tab components.\n *\n * @see https://mantle.ngrok.com/components/tabs\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Tabs = {\n\t/**\n\t * The root container of the tabs component that provides context for all tab components.\n\t * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#tabsroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t *   <Tabs.Content value=\"account\">\n\t *     <p>Make changes to your account here.</p>\n\t *   </Tabs.Content>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the content associated with each trigger.\n\t * The content panel that displays when its corresponding tab trigger is active.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#tabscontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *   </Tabs.List>\n\t *   <Tabs.Content value=\"account\">\n\t *     <p>Make changes to your account here.</p>\n\t *   </Tabs.Content>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Contains the triggers that are aligned along the edge of the active content.\n\t * The container for tab triggers that provides the visual layout for tab navigation.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#tabslist\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tList,\n\t/**\n\t * The button that activates its associated content.\n\t * A clickable tab trigger that switches between different tab content panels.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#tabstrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * A badge component that can be used inside tab triggers to display additional information.\n\t * Typically used to show counts or status indicators within tab headers.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#tabsbadge\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">\n\t *       Account <Tabs.Badge>5</Tabs.Badge>\n\t *     </Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tBadge,\n} as const;\n\nexport {\n\t//\n\tTabs,\n};\n"],"mappings":"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","names":["TabsPrimitiveContent","TabsPrimitiveList","TabsPrimitiveRoot","TabsPrimitiveTrigger","cva","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","invariant","Fragment","jsx","jsxs","TabsStateContext","createContext","Root","forwardRef","className","children","orientation","appearance","props","ref","TabsPrimitiveRoot","cx","listVariants","cva","List","useContext","TabsPrimitiveList","triggerDecorationVariants","TabsTriggerDecoration","clsx","triggerVariants","Trigger","_ariaDisabled","asChild","_disabled","disabled","parseBooleanish","tabsTriggerProps","singleChild","Children","invariant","isValidElement","grandchildren","TabsPrimitiveTrigger","cloneElement","Badge","Content","TabsPrimitiveContent","Tabs"]}

package/dist/text-area.d.ts

@@ -13,7 +13,7 @@ type Props = ComponentProps<"textarea"> & WithValidation & {
  * to enter a sizeable amount of free-form text, for example a comment on a
  * review or feedback form.
  *
- * @see https://mantle.ngrok.com/components/text-area#api-text-area
+ * @see https://mantle.ngrok.com/components/text-area
  *
  * @example
  * ```tsx

package/dist/text-area.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/text-area/text-area.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef, useRef, useState } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { WithValidation } from \"../input/types.js\";\n\ntype Props = ComponentProps<\"textarea\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The visual style of the textarea.\n\t\t */\n\t\tappearance?: \"monospaced\";\n\t};\n\n/**\n * A multi-line plain-text editing control, useful when you want to allow users\n * to enter a sizeable amount of free-form text, for example a comment on a\n * review or feedback form.\n *\n * @see https://mantle.ngrok.com/components/text-area#api-text-area\n *\n * @example\n * ```tsx\n * <form>\n *   <div>\n *     <Label htmlFor=\"feedback\">Feedback:</Label>\n *     <TextArea\n *       id=\"feedback\"\n *       name=\"feedback\"\n *       placeholder=\"Enter your feedback here\"\n *     />\n *   </div>\n * </form>\n * ```\n */\nconst TextArea = forwardRef<ComponentRef<\"textarea\">, Props>(\n\t(\n\t\t{\n\t\t\tappearance,\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tonDragEnter,\n\t\t\tonDragLeave,\n\t\t\tonDropCapture,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\t\tconst [isDragOver, setIsDragOver] = useState(false);\n\t\tconst innerRef = useRef<ComponentRef<\"textarea\">>(null);\n\n\t\treturn (\n\t\t\t<textarea\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\tappearance === \"monospaced\" &&\n\t\t\t\t\t\t\"pointer-coarse:text-[0.9375rem] font-mono text-[0.8125rem]\",\n\t\t\t\t\t\"border-input bg-form data-drag-over:border-dashed data-drag-over:ring-4 pointer-coarse:py-[calc(theme(spacing[2.5])-1px)] pointer-coarse:text-base flex min-h-24 w-full rounded-md border px-3 py-[calc(theme(spacing[2])-1px)] focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\t\t\"placeholder:text-placeholder data-drag-over:border-dashed\",\n\t\t\t\t\t\"border-form text-strong ring-focus-accent focus:border-accent-600 data-drag-over:border-accent-600\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:ring-focus-danger data-validation-error:focus-visible:border-danger-600 data-validation-error:data-drag-over:border-danger-600\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:ring-focus-success data-validation-success:focus-visible:border-success-600 data-validation-success:data-drag-over:border-success-600\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:ring-focus-warning data-validation-warning:focus-visible:border-warning-600 data-validation-warning:data-drag-over:border-warning-600\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-drag-over={isDragOver}\n\t\t\t\tonDragEnter={(event) => {\n\t\t\t\t\tsetIsDragOver(true);\n\t\t\t\t\tonDragEnter?.(event);\n\t\t\t\t}}\n\t\t\t\tonDragLeave={(event) => {\n\t\t\t\t\tsetIsDragOver(false);\n\t\t\t\t\tonDragLeave?.(event);\n\t\t\t\t}}\n\t\t\t\tonDropCapture={(event) => {\n\t\t\t\t\tsetIsDragOver(false);\n\t\t\t\t\tinnerRef.current?.focus();\n\t\t\t\t\tonDropCapture?.(event);\n\t\t\t\t}}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTextArea.displayName = \"TextArea\";\n\nexport {\n\t//,\n\tTextArea,\n};\n\nexport type {\n\t//,\n\tProps as TextAreaProps,\n};\n"],"mappings":"gFAGA,OAAS,cAAAA,EAAY,UAAAC,EAAQ,YAAAC,MAAgB,QA2D1C,cAAAC,MAAA,oBAzBH,IAAMC,EAAWC,EAChB,CACC,CACC,WAAAC,EACA,eAAgBC,EAChB,UAAAC,EACA,YAAAC,EACA,YAAAC,EACA,cAAAC,EACA,WAAYC,EACZ,GAAGC,CACJ,EACAC,IACI,CAEJ,IAAMC,EADYR,GAAgB,MAAQA,IAAiB,QAExD,QACA,OAAOK,GAAgB,WACtBA,EAAY,EACZA,EACEI,EAAcT,GAAgBQ,IAAe,QAC7C,CAACE,EAAYC,CAAa,EAAIC,EAAS,EAAK,EAC5CC,EAAWC,EAAiC,IAAI,EAEtD,OACClB,EAAC,YACA,eAAca,EACd,kBAAiBD,GAAc,OAC/B,UAAWO,EACVhB,IAAe,cACd,6DACD,qUACA,4DACA,qGACA,+LACA,2MACA,2MACAE,CACD,EACA,iBAAgBS,EAChB,YAAcM,GAAU,CACvBL,EAAc,EAAI,EAClBT,IAAcc,CAAK,CACpB,EACA,YAAcA,GAAU,CACvBL,EAAc,EAAK,EACnBR,IAAca,CAAK,CACpB,EACA,cAAgBA,GAAU,CACzBL,EAAc,EAAK,EACnBE,EAAS,SAAS,MAAM,EACxBT,IAAgBY,CAAK,CACtB,EACA,IAAKC,EAAYJ,EAAUN,CAAG,EAC7B,GAAGD,EACL,CAEF,CACD,EACAT,EAAS,YAAc","names":["forwardRef","useRef","useState","jsx","TextArea","forwardRef","appearance","_ariaInvalid","className","onDragEnter","onDragLeave","onDropCapture","_validation","props","ref","validation","ariaInvalid","isDragOver","setIsDragOver","useState","innerRef","useRef","cx","event","composeRefs"]}
+{"version":3,"sources":["../src/components/text-area/text-area.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef, useRef, useState } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { WithValidation } from \"../input/types.js\";\n\ntype Props = ComponentProps<\"textarea\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The visual style of the textarea.\n\t\t */\n\t\tappearance?: \"monospaced\";\n\t};\n\n/**\n * A multi-line plain-text editing control, useful when you want to allow users\n * to enter a sizeable amount of free-form text, for example a comment on a\n * review or feedback form.\n *\n * @see https://mantle.ngrok.com/components/text-area\n *\n * @example\n * ```tsx\n * <form>\n *   <div>\n *     <Label htmlFor=\"feedback\">Feedback:</Label>\n *     <TextArea\n *       id=\"feedback\"\n *       name=\"feedback\"\n *       placeholder=\"Enter your feedback here\"\n *     />\n *   </div>\n * </form>\n * ```\n */\nconst TextArea = forwardRef<ComponentRef<\"textarea\">, Props>(\n\t(\n\t\t{\n\t\t\tappearance,\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tonDragEnter,\n\t\t\tonDragLeave,\n\t\t\tonDropCapture,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\t\tconst [isDragOver, setIsDragOver] = useState(false);\n\t\tconst innerRef = useRef<ComponentRef<\"textarea\">>(null);\n\n\t\treturn (\n\t\t\t<textarea\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\tappearance === \"monospaced\" &&\n\t\t\t\t\t\t\"pointer-coarse:text-[0.9375rem] font-mono text-[0.8125rem]\",\n\t\t\t\t\t\"border-input bg-form data-drag-over:border-dashed data-drag-over:ring-4 pointer-coarse:py-[calc(theme(spacing[2.5])-1px)] pointer-coarse:text-base flex min-h-24 w-full rounded-md border px-3 py-[calc(theme(spacing[2])-1px)] focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\t\t\"placeholder:text-placeholder data-drag-over:border-dashed\",\n\t\t\t\t\t\"border-form text-strong ring-focus-accent focus:border-accent-600 data-drag-over:border-accent-600\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:ring-focus-danger data-validation-error:focus-visible:border-danger-600 data-validation-error:data-drag-over:border-danger-600\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:ring-focus-success data-validation-success:focus-visible:border-success-600 data-validation-success:data-drag-over:border-success-600\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:ring-focus-warning data-validation-warning:focus-visible:border-warning-600 data-validation-warning:data-drag-over:border-warning-600\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-drag-over={isDragOver}\n\t\t\t\tonDragEnter={(event) => {\n\t\t\t\t\tsetIsDragOver(true);\n\t\t\t\t\tonDragEnter?.(event);\n\t\t\t\t}}\n\t\t\t\tonDragLeave={(event) => {\n\t\t\t\t\tsetIsDragOver(false);\n\t\t\t\t\tonDragLeave?.(event);\n\t\t\t\t}}\n\t\t\t\tonDropCapture={(event) => {\n\t\t\t\t\tsetIsDragOver(false);\n\t\t\t\t\tinnerRef.current?.focus();\n\t\t\t\t\tonDropCapture?.(event);\n\t\t\t\t}}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTextArea.displayName = \"TextArea\";\n\nexport {\n\t//,\n\tTextArea,\n};\n\nexport type {\n\t//,\n\tProps as TextAreaProps,\n};\n"],"mappings":"gFAGA,OAAS,cAAAA,EAAY,UAAAC,EAAQ,YAAAC,MAAgB,QA2D1C,cAAAC,MAAA,oBAzBH,IAAMC,EAAWC,EAChB,CACC,CACC,WAAAC,EACA,eAAgBC,EAChB,UAAAC,EACA,YAAAC,EACA,YAAAC,EACA,cAAAC,EACA,WAAYC,EACZ,GAAGC,CACJ,EACAC,IACI,CAEJ,IAAMC,EADYR,GAAgB,MAAQA,IAAiB,QAExD,QACA,OAAOK,GAAgB,WACtBA,EAAY,EACZA,EACEI,EAAcT,GAAgBQ,IAAe,QAC7C,CAACE,EAAYC,CAAa,EAAIC,EAAS,EAAK,EAC5CC,EAAWC,EAAiC,IAAI,EAEtD,OACClB,EAAC,YACA,eAAca,EACd,kBAAiBD,GAAc,OAC/B,UAAWO,EACVhB,IAAe,cACd,6DACD,qUACA,4DACA,qGACA,+LACA,2MACA,2MACAE,CACD,EACA,iBAAgBS,EAChB,YAAcM,GAAU,CACvBL,EAAc,EAAI,EAClBT,IAAcc,CAAK,CACpB,EACA,YAAcA,GAAU,CACvBL,EAAc,EAAK,EACnBR,IAAca,CAAK,CACpB,EACA,cAAgBA,GAAU,CACzBL,EAAc,EAAK,EACnBE,EAAS,SAAS,MAAM,EACxBT,IAAgBY,CAAK,CACtB,EACA,IAAKC,EAAYJ,EAAUN,CAAG,EAC7B,GAAGD,EACL,CAEF,CACD,EACAT,EAAS,YAAc","names":["forwardRef","useRef","useState","jsx","TextArea","forwardRef","appearance","_ariaInvalid","className","onDragEnter","onDragLeave","onDropCapture","_validation","props","ref","validation","ariaInvalid","isDragOver","setIsDragOver","useState","innerRef","useRef","cx","event","composeRefs"]}

package/dist/theme.d.ts

@@ -11,7 +11,7 @@ type ThemeProviderProps = PropsWithChildren;
 /**
  * ThemeProvider is a React Context Provider that provides the current theme and a function to set the theme.
  *
- * @see https://mantle.ngrok.com/components/theme-provider#api-theme-provider
+ * @see https://mantle.ngrok.com/components/theme-provider#themeprovider
  *
  * @example
  * ```tsx
@@ -98,6 +98,12 @@ type InitialThemeProps = {
 };
 type UseInitialHtmlThemePropsOptions = {
     className?: string;
+    /**
+     * Theme cookie string for SSR theme resolution. Pass only the theme cookie
+     * pair (via {@link extractThemeCookie}) rather than the full raw `Cookie`
+     * header to avoid leaking sensitive cookies in serialized loader data.
+     */
+    ssrCookie?: string;
 };
 /**
  * useInitialHtmlThemeProps returns the initial props that should be applied to the <html> element to prevent react hydration errors.
@@ -123,6 +129,26 @@ type GetStoredThemeOptions = {
  * getStoredTheme({ cookie: "" }) // DEFAULT_THEME
  */
 declare function getStoredTheme({ cookie }: GetStoredThemeOptions): Theme;
+/**
+ * Extract just the mantle theme cookie from a raw `Cookie` header string.
+ *
+ * Use this in SSR loaders to safely pass the theme cookie to
+ * {@link useInitialHtmlThemeProps} without exposing the full `Cookie` header
+ * (which may contain HttpOnly/session cookies) in serialized loader data.
+ *
+ * @example
+ * ```ts
+ * // app/root.tsx loader
+ * export const loader = async ({ request }: Route.LoaderArgs) => {
+ *   const themeCookie = extractThemeCookie(request.headers.get("Cookie"));
+ *   return { themeCookie };
+ * };
+ * ```
+ *
+ * @param cookieHeader - The raw `Cookie` header string from the request, or null/undefined.
+ * @returns The `mantle-ui-theme=<value>` cookie string, or undefined if not found.
+ */
+declare function extractThemeCookie(cookieHeader: string | null | undefined): string | undefined;
 
 /**
  * @fileoverview Helpers for preloading ngrok brand fonts from the CDN.
@@ -180,4 +206,4 @@ declare const PreloadCoreFonts: {
     displayName: string;
 };
 
-export { MantleThemeHeadContent, PreloadCoreFonts, ResolvedTheme, Theme, ThemeProvider, assetsCdnOrigin, fontHref, getStoredTheme, preventWrongThemeFlashScriptContent, readThemeFromHtmlElement, useAppliedTheme, useInitialHtmlThemeProps, useTheme };
+export { MantleThemeHeadContent, PreloadCoreFonts, ResolvedTheme, Theme, ThemeProvider, assetsCdnOrigin, extractThemeCookie, fontHref, getStoredTheme, preventWrongThemeFlashScriptContent, readThemeFromHtmlElement, useAppliedTheme, useInitialHtmlThemeProps, useTheme };

package/dist/theme.js

@@ -1,2 +1,2 @@
-import{a as e,b as m,c as t,d as o,e as r,f as s,g as h,h as T,i as n,j as l,k as d,l as p,m as i,n as a,o as f,p as v,q as x}from"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-PFXFESEN.js";export{T as $resolvedTheme,s as $theme,f as MantleThemeHeadContent,t as PreloadCoreFonts,l as ThemeProvider,e as assetsCdnOrigin,m as fontHref,x as getStoredTheme,n as isResolvedTheme,h as isTheme,a as preventWrongThemeFlashScriptContent,p as readThemeFromHtmlElement,o as resolvedThemes,r as themes,i as useAppliedTheme,v as useInitialHtmlThemeProps,d as useTheme};
+import{a as e,b as m,c as t,d as o,e as r,f as h,g as s,h as T,i as n,j as l,k as d,l as i,m as p,n as a,o as f,p as v,q as x,r as C}from"./chunk-HF3KJHO3.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-PFXFESEN.js";export{T as $resolvedTheme,h as $theme,f as MantleThemeHeadContent,t as PreloadCoreFonts,l as ThemeProvider,e as assetsCdnOrigin,C as extractThemeCookie,m as fontHref,x as getStoredTheme,n as isResolvedTheme,s as isTheme,a as preventWrongThemeFlashScriptContent,i as readThemeFromHtmlElement,o as resolvedThemes,r as themes,p as useAppliedTheme,v as useInitialHtmlThemeProps,d as useTheme};
 //# sourceMappingURL=theme.js.map

package/dist/toast.d.ts

@@ -4,7 +4,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as ToastPrimitive from 'sonner';
 import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
 import { W as WithStyleProps } from './with-style-props-VnLWm0Yd.js';
-import { a as SvgOnlyProps } from './svg-only-Bj2yffO4.js';
+import { a as SvgOnlyProps } from './svg-only-Cp8Mu_sh.js';
 import './types-BuKAGhC-.js';
 
 type ToasterPrimitiveProps = ComponentProps<typeof ToastPrimitive.Toaster>;
@@ -22,7 +22,7 @@ type ToasterProps = WithStyleProps & Pick<ToasterPrimitiveProps, "containerAriaL
  * Only one `<Toaster />` should be rendered in an app a time, preferably at the
  * root level of the app.
  *
- * @see https://mantle.ngrok.com/components/toast#api-toaster
+ * @see https://mantle.ngrok.com/components/toast#toaster
  *
  * @example
  * ```tsx
@@ -53,7 +53,7 @@ type MakeToastOptions = {
  * Create a toast. Provide a `<Toast.Root>` component as the `children` to be rendered
  * inside the `<Toaster />` section.
  *
- * @see https://mantle.ngrok.com/components/toast#api-make-toast
+ * @see https://mantle.ngrok.com/components/toast#maketoast
  *
  * @example
  * ```tsx
@@ -106,7 +106,7 @@ declare const Toast: {
     /**
      * A succinct message with a priority that is displayed temporarily.
      *
-     * @see https://mantle.ngrok.com/components/toast#api-toast-root
+     * @see https://mantle.ngrok.com/components/toast#toastroot
      *
      * @example
      * ```tsx
@@ -121,7 +121,7 @@ declare const Toast: {
     /**
      * A button that dismisses the toast when clicked.
      *
-     * @see https://mantle.ngrok.com/components/toast#api-toast-action
+     * @see https://mantle.ngrok.com/components/toast#toastaction
      *
      * @example
      * ```tsx
@@ -136,7 +136,7 @@ declare const Toast: {
     /**
      * An icon that visually represents the priority of the toast.
      *
-     * @see https://mantle.ngrok.com/components/toast#api-toast-icon
+     * @see https://mantle.ngrok.com/components/toast#toasticon
      *
      * @example
      * ```tsx
@@ -150,7 +150,7 @@ declare const Toast: {
     /**
      * The message content of the toast.
      *
-     * @see https://mantle.ngrok.com/components/toast#api-toast-message
+     * @see https://mantle.ngrok.com/components/toast#toastmessage
      *
      * @example
      * ```tsx

package/dist/toast.js

@@ -1,2 +1,2 @@
-import{a as o,b as t,c as r}from"./chunk-TS7XNZ62.js";import"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import"./chunk-PFXFESEN.js";export{r as Toast,o as Toaster,t as makeToast};
+import{a as o,b as t,c as r}from"./chunk-EIEPGCIG.js";import"./chunk-HF3KJHO3.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-IVQ626TU.js";import"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import"./chunk-PFXFESEN.js";export{r as Toast,o as Toaster,t as makeToast};
 //# sourceMappingURL=toast.js.map

package/dist/tooltip.d.ts

@@ -7,7 +7,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
  * Wraps your app to provide global functionality to your tooltips.
  * Only one instance of this component should be rendered in your app, preferably at the root.
  *
- * @see https://mantle.ngrok.com/components/tooltip#tooltip-provider
+ * @see https://mantle.ngrok.com/components/tooltip#tooltipprovider
  *
  * @example
  * ```tsx
@@ -25,7 +25,7 @@ declare const TooltipProvider: {
  * This is the root, stateful component that manages the open/closed state of the tooltip.
  * Will throw if you have not wrapped your app in a `TooltipProvider`.
  *
- * @see https://mantle.ngrok.com/components/tooltip#tooltip-root
+ * @see https://mantle.ngrok.com/components/tooltip#tooltiproot
  *
  * @example
  * ```tsx
@@ -48,7 +48,7 @@ declare namespace Root {
 /**
  * The trigger button that opens the tooltip.
  *
- * @see https://mantle.ngrok.com/components/tooltip#tooltip-trigger
+ * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger
  *
  * @example
  * ```tsx
@@ -95,7 +95,7 @@ declare const Tooltip: {
      * This is the root, stateful component that manages the open/closed state of the tooltip.
      * Will throw if you have not wrapped your app in a `TooltipProvider`.
      *
-     * @see https://mantle.ngrok.com/components/tooltip#tooltip-root
+     * @see https://mantle.ngrok.com/components/tooltip#tooltiproot
      *
      * @example
      * ```tsx
@@ -115,7 +115,7 @@ declare const Tooltip: {
     /**
      * The content to render inside the tooltip.
      *
-     * @see https://mantle.ngrok.com/components/tooltip#tooltip-content
+     * @see https://mantle.ngrok.com/components/tooltip#tooltipcontent
      *
      * @example
      * ```tsx
@@ -135,7 +135,7 @@ declare const Tooltip: {
     /**
      * The trigger button that opens the tooltip.
      *
-     * @see https://mantle.ngrok.com/components/tooltip#tooltip-trigger
+     * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger
      *
      * @example
      * ```tsx

package/dist/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * Wraps your app to provide global functionality to your tooltips.\n * Only one instance of this component should be rendered in your app, preferably at the root.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltip-provider\n *\n * @example\n * ```tsx\n * <TooltipProvider>\n *   <App />\n * </TooltipProvider>\n * ```\n */\nconst TooltipProvider = ({\n\tdelayDuration = 0,\n\t...props\n}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => (\n\t<TooltipPrimitive.Provider\n\t\tdata-slot=\"tooltip-provider\"\n\t\tdelayDuration={delayDuration ?? 0}\n\t\t{...props}\n\t/>\n);\nTooltipProvider.displayName = \"Tooltip.Provider\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * This is the root, stateful component that manages the open/closed state of the tooltip.\n * Will throw if you have not wrapped your app in a `TooltipProvider`.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltip-root\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Root(props: ComponentProps<typeof TooltipPrimitive.Root>) {\n\treturn <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\nRoot.displayName = \"Tooltip.Root\";\n\n/**\n * The trigger button that opens the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltip-trigger\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Trigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {\n\treturn <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\nTrigger.displayName = \"Tooltip.Trigger\";\n\n/**\n * The content to render inside the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltip-content\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TooltipPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ children, className, sideOffset = 4, ...props }, ref) => (\n\t<TooltipPrimitive.Portal>\n\t\t<TooltipPrimitive.Content\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-tooltip text-tooltip animate-in fade-in-0 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 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 z-50 max-w-72 overflow-visible wrap-break-word rounded-md px-3 py-1.5 text-sm font-sans shadow\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"tooltip-content\"\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<TooltipPrimitive.Arrow asChild>\n\t\t\t\t<div className=\"bg-tooltip z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs\" />\n\t\t\t</TooltipPrimitive.Arrow>\n\t\t</TooltipPrimitive.Content>\n\t</TooltipPrimitive.Portal>\n));\nContent.displayName = \"Tooltip.Content\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * This is the root, stateful component that manages the open/closed state of the tooltip.\n * Will throw if you have not wrapped your app in a `TooltipProvider`.\n *\n * @see https://mantle.ngrok.com/components/tooltip\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Tooltip = {\n\t/**\n\t * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n\t * This is the root, stateful component that manages the open/closed state of the tooltip.\n\t * Will throw if you have not wrapped your app in a `TooltipProvider`.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltip-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The content to render inside the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltip-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltip-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tTooltip,\n\tTooltipProvider,\n};\n"],"mappings":"wCAAA,UAAYA,MAAsB,0BAClC,OAAS,cAAAC,MAAkB,QAqB1B,cAAAC,EAkFC,QAAAC,MAlFD,oBAJD,IAAMC,EAAkB,CAAC,CACxB,cAAAC,EAAgB,EAChB,GAAGC,CACJ,IACCJ,EAAkB,WAAjB,CACA,YAAU,mBACV,cAAeG,GAAiB,EAC/B,GAAGC,EACL,EAEDF,EAAgB,YAAc,mBAuB9B,SAASG,EAAKD,EAAqD,CAClE,OAAOJ,EAAkB,OAAjB,CAAsB,YAAU,UAAW,GAAGI,EAAO,CAC9D,CACAC,EAAK,YAAc,eAqBnB,SAASC,EAAQF,EAAwD,CACxE,OAAOJ,EAAkB,UAAjB,CAAyB,YAAU,kBAAmB,GAAGI,EAAO,CACzE,CACAE,EAAQ,YAAc,kBAqBtB,IAAMC,EAAUC,EAGd,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,WAAAC,EAAa,EAAG,GAAGP,CAAM,EAAGQ,IACrDZ,EAAkB,SAAjB,CACA,SAAAC,EAAkB,UAAjB,CACA,UAAWY,EACV,sYACAH,CACD,EACA,YAAU,kBACV,IAAKE,EACL,WAAYD,EACX,GAAGP,EAEH,UAAAK,EACDT,EAAkB,QAAjB,CAAuB,QAAO,GAC9B,SAAAA,EAAC,OAAI,UAAU,6EAA6E,EAC7F,GACD,EACD,CACA,EACDO,EAAQ,YAAc,kBAuBtB,IAAMO,EAAU,CAsBf,KAAAT,EAoBA,QAAAE,EAoBA,QAAAD,CACD","names":["TooltipPrimitive","forwardRef","jsx","jsxs","TooltipProvider","delayDuration","props","Root","Trigger","Content","forwardRef","children","className","sideOffset","ref","cx","Tooltip"]}
+{"version":3,"sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * Wraps your app to provide global functionality to your tooltips.\n * Only one instance of this component should be rendered in your app, preferably at the root.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltipprovider\n *\n * @example\n * ```tsx\n * <TooltipProvider>\n *   <App />\n * </TooltipProvider>\n * ```\n */\nconst TooltipProvider = ({\n\tdelayDuration = 0,\n\t...props\n}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => (\n\t<TooltipPrimitive.Provider\n\t\tdata-slot=\"tooltip-provider\"\n\t\tdelayDuration={delayDuration ?? 0}\n\t\t{...props}\n\t/>\n);\nTooltipProvider.displayName = \"Tooltip.Provider\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * This is the root, stateful component that manages the open/closed state of the tooltip.\n * Will throw if you have not wrapped your app in a `TooltipProvider`.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltiproot\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Root(props: ComponentProps<typeof TooltipPrimitive.Root>) {\n\treturn <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\nRoot.displayName = \"Tooltip.Root\";\n\n/**\n * The trigger button that opens the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Trigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {\n\treturn <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\nTrigger.displayName = \"Tooltip.Trigger\";\n\n/**\n * The content to render inside the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltipcontent\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TooltipPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ children, className, sideOffset = 4, ...props }, ref) => (\n\t<TooltipPrimitive.Portal>\n\t\t<TooltipPrimitive.Content\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-tooltip text-tooltip animate-in fade-in-0 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 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 z-50 max-w-72 overflow-visible wrap-break-word rounded-md px-3 py-1.5 text-sm font-sans shadow\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"tooltip-content\"\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<TooltipPrimitive.Arrow asChild>\n\t\t\t\t<div className=\"bg-tooltip z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs\" />\n\t\t\t</TooltipPrimitive.Arrow>\n\t\t</TooltipPrimitive.Content>\n\t</TooltipPrimitive.Portal>\n));\nContent.displayName = \"Tooltip.Content\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * This is the root, stateful component that manages the open/closed state of the tooltip.\n * Will throw if you have not wrapped your app in a `TooltipProvider`.\n *\n * @see https://mantle.ngrok.com/components/tooltip\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Tooltip = {\n\t/**\n\t * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n\t * This is the root, stateful component that manages the open/closed state of the tooltip.\n\t * Will throw if you have not wrapped your app in a `TooltipProvider`.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltiproot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The content to render inside the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltipcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tTooltip,\n\tTooltipProvider,\n};\n"],"mappings":"wCAAA,UAAYA,MAAsB,0BAClC,OAAS,cAAAC,MAAkB,QAqB1B,cAAAC,EAkFC,QAAAC,MAlFD,oBAJD,IAAMC,EAAkB,CAAC,CACxB,cAAAC,EAAgB,EAChB,GAAGC,CACJ,IACCJ,EAAkB,WAAjB,CACA,YAAU,mBACV,cAAeG,GAAiB,EAC/B,GAAGC,EACL,EAEDF,EAAgB,YAAc,mBAuB9B,SAASG,EAAKD,EAAqD,CAClE,OAAOJ,EAAkB,OAAjB,CAAsB,YAAU,UAAW,GAAGI,EAAO,CAC9D,CACAC,EAAK,YAAc,eAqBnB,SAASC,EAAQF,EAAwD,CACxE,OAAOJ,EAAkB,UAAjB,CAAyB,YAAU,kBAAmB,GAAGI,EAAO,CACzE,CACAE,EAAQ,YAAc,kBAqBtB,IAAMC,EAAUC,EAGd,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,WAAAC,EAAa,EAAG,GAAGP,CAAM,EAAGQ,IACrDZ,EAAkB,SAAjB,CACA,SAAAC,EAAkB,UAAjB,CACA,UAAWY,EACV,sYACAH,CACD,EACA,YAAU,kBACV,IAAKE,EACL,WAAYD,EACX,GAAGP,EAEH,UAAAK,EACDT,EAAkB,QAAjB,CAAuB,QAAO,GAC9B,SAAAA,EAAC,OAAI,UAAU,6EAA6E,EAC7F,GACD,EACD,CACA,EACDO,EAAQ,YAAc,kBAuBtB,IAAMO,EAAU,CAsBf,KAAAT,EAoBA,QAAAE,EAoBA,QAAAD,CACD","names":["TooltipPrimitive","forwardRef","jsx","jsxs","TooltipProvider","delayDuration","props","Root","Trigger","Content","forwardRef","children","className","sideOffset","ref","cx","Tooltip"]}