@ngrok/mantle 0.70.0 → 0.70.1

package/dist/popover.d.ts

@@ -5,7 +5,19 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 /**
  * A floating overlay that displays rich content in a portal, triggered by a button.
  *
+ * `Popover` is a non-modal dialog by default: focus moves into the content
+ * when it opens, `Escape` closes and returns focus to the trigger, clicking
+ * outside dismisses, and the page (body and any scroll containers) continues
+ * to scroll normally. Pass `modal` on `Popover.Root` to trap focus inside
+ * the content, block interaction with the rest of the page, and lock body
+ * scroll while the popover is open. Use a `Popover` when the floating
+ * content must be interactive — forms, action menus, filters, settings.
+ * Prefer `Tooltip` for short, non-interactive labels on controls, or
+ * `HoverCard` for a sighted-only preview of content that already lives
+ * behind a link.
+ *
  * @see https://mantle.ngrok.com/components/popover
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  *
  * @example
  * Composition:

package/dist/popover.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";import*as r from"@radix-ui/react-popover";const i=r.Root;i.displayName=`Popover`;const a=r.Trigger;a.displayName=`PopoverTrigger`;const o=r.Anchor;o.displayName=`PopoverAnchor`;const s=r.Close;s.displayName=`PopoverClose`;const c=t(({align:t=`center`,className:i,onClick:a,preferredWidth:o=`max-w-72`,sideOffset:s=4,...c},l)=>n(r.Portal,{children:n(r.Content,{align:t,className:e(`text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-hidden`,o,i),onClick:e=>{e.stopPropagation(),a?.(e)},ref:l,sideOffset:s,...c})}));c.displayName=`PopoverContent`;const l={Root:i,Anchor:o,Close:s,Content:c,Trigger:a};export{l as Popover};
+import{t as e}from"./cx-D1HYnpvA.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";import*as r from"@radix-ui/react-popover";const i=r.Root;i.displayName=`Popover`;const a=r.Trigger;a.displayName=`PopoverTrigger`;const o=r.Anchor;o.displayName=`PopoverAnchor`;const s=r.Close;s.displayName=`PopoverClose`;const c=t(({align:t=`center`,className:i,onClick:a,preferredWidth:o=`max-w-72`,sideOffset:s=4,...c},l)=>n(r.Portal,{children:n(r.Content,{align:t,"data-slot":`popover-content`,className:e(`text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-hidden`,o,i),onClick:e=>{e.stopPropagation(),a?.(e)},ref:l,sideOffset:s,...c})}));c.displayName=`PopoverContent`;const l={Root:i,Anchor:o,Close:s,Content:c,Trigger:a};export{l as Popover};
 //# sourceMappingURL=popover.js.map

package/dist/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":[],"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverroot\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Root = PopoverPrimitive.Root;\nRoot.displayName = \"Popover\";\n\n/**\n * The trigger button that opens the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovertrigger\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Trigger = PopoverPrimitive.Trigger;\nTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\n *\n * @see https://mantle.ngrok.com/components/popover#popoveranchor\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Anchor asChild>\n *     <div>Anchor element</div>\n *   </Popover.Anchor>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Anchor = PopoverPrimitive.Anchor;\nAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverclose\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *     <Popover.Close asChild>\n *       <Button type=\"button\">Close</Button>\n *     </Popover.Close>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Close = PopoverPrimitive.Close;\nClose.displayName = \"PopoverClose\";\n\ntype PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Popover`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `PopoverContent`\n\t *\n\t * @default `max-w-72`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The content to render inside the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovercontent\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, PopoverContentProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\talign = \"center\",\n\t\t\tclassName,\n\t\t\tonClick,\n\t\t\tpreferredWidth = \"max-w-72\",\n\t\t\tsideOffset = 4,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\talign={align}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-hidden\",\n\t\t\t\t\tpreferredWidth,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t\t * of the PopoverContent\n\t\t\t\t\t */\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</PopoverPrimitive.Portal>\n\t),\n);\nContent.displayName = \"PopoverContent\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/popover\n *\n * @example\n * Composition:\n * ```\n * Popover.Root\n * ├── Popover.Trigger\n * ├── Popover.Anchor\n * └── Popover.Content\n *     └── Popover.Close\n * ```\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Popover = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the popover.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button>Open popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <p>This is the popover content.</p>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoveranchor\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Anchor asChild>\n\t *     <div>Position relative to this element</div>\n\t *   </Popover.Anchor>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <p>This popover is positioned relative to the anchor.</p>\n\t *     <Popover.Close asChild>\n\t *       <Button type=\"button\">Close</Button>\n\t *     </Popover.Close>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tAnchor,\n\t/**\n\t * A button that closes an open popover. Can be placed anywhere within the popover content.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Settings</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"flex items-center justify-between\">\n\t *       <Text>Settings Panel</Text>\n\t *       <Popover.Close asChild>\n\t *         <Button type=\"button\" appearance=\"ghost\" size=\"sm\">✕</Button>\n\t *       </Popover.Close>\n\t *     </div>\n\t *     <Text>Configure your preferences here.</Text>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The content to render inside the popover. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovercontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Show Info</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content side=\"top\" align=\"center\">\n\t *     <div className=\"space-y-2\">\n\t *       <Text weight=\"strong\">Additional Information</Text>\n\t *       <Text>This is the content inside the popover.</Text>\n\t *       <Button type=\"button\" size=\"sm\">Action</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the popover when clicked or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovertrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Options\n\t *     </Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"space-y-2\">\n\t *       <Button type=\"button\" variant=\"ghost\">Edit</Button>\n\t *       <Button type=\"button\" variant=\"ghost\">Delete</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tPopover,\n};\n"],"mappings":"0JAyBA,MAAM,EAAO,EAAiB,KAC9B,EAAK,YAAc,UAqBnB,MAAM,EAAU,EAAiB,QACjC,EAAQ,YAAc,iBAwBtB,MAAM,EAAS,EAAiB,OAChC,EAAO,YAAc,gBAwBrB,MAAM,EAAQ,EAAiB,MAC/B,EAAM,YAAc,eAiCpB,MAAM,EAAU,GAEd,CAEC,QAAQ,SACR,YACA,UACA,iBAAiB,WACjB,aAAa,EACb,GAAG,GAEJ,IAEA,EAAC,EAAiB,OAAlB,CAAA,SACC,EAAC,EAAiB,QAAlB,CACQ,QACP,UAAW,EACV,qaACA,EACA,EACA,CACD,QAAU,GAAU,CAKnB,EAAM,iBAAiB,CACvB,IAAU,EAAM,EAEZ,MACO,aACZ,GAAI,EACH,CAAA,CACuB,CAAA,CAE3B,CACD,EAAQ,YAAc,iBA+BtB,MAAM,EAAU,CAkBf,OAwBA,SAwBA,QAsBA,UAuBA,UACA"}
+{"version":3,"file":"popover.js","names":[],"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverroot\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Root = PopoverPrimitive.Root;\nRoot.displayName = \"Popover\";\n\n/**\n * The trigger button that opens the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovertrigger\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Trigger = PopoverPrimitive.Trigger;\nTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\n *\n * @see https://mantle.ngrok.com/components/popover#popoveranchor\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Anchor asChild>\n *     <div>Anchor element</div>\n *   </Popover.Anchor>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Anchor = PopoverPrimitive.Anchor;\nAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverclose\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *     <Popover.Close asChild>\n *       <Button type=\"button\">Close</Button>\n *     </Popover.Close>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Close = PopoverPrimitive.Close;\nClose.displayName = \"PopoverClose\";\n\ntype PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Popover`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `PopoverContent`\n\t *\n\t * @default `max-w-72`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The content to render inside the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovercontent\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, PopoverContentProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\talign = \"center\",\n\t\t\tclassName,\n\t\t\tonClick,\n\t\t\tpreferredWidth = \"max-w-72\",\n\t\t\tsideOffset = 4,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\talign={align}\n\t\t\t\tdata-slot=\"popover-content\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-hidden\",\n\t\t\t\t\tpreferredWidth,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t\t * of the PopoverContent\n\t\t\t\t\t */\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</PopoverPrimitive.Portal>\n\t),\n);\nContent.displayName = \"PopoverContent\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n *\n * `Popover` is a non-modal dialog by default: focus moves into the content\n * when it opens, `Escape` closes and returns focus to the trigger, clicking\n * outside dismisses, and the page (body and any scroll containers) continues\n * to scroll normally. Pass `modal` on `Popover.Root` to trap focus inside\n * the content, block interaction with the rest of the page, and lock body\n * scroll while the popover is open. Use a `Popover` when the floating\n * content must be interactive — forms, action menus, filters, settings.\n * Prefer `Tooltip` for short, non-interactive labels on controls, or\n * `HoverCard` for a sighted-only preview of content that already lives\n * behind a link.\n *\n * @see https://mantle.ngrok.com/components/popover\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n *\n * @example\n * Composition:\n * ```\n * Popover.Root\n * ├── Popover.Trigger\n * ├── Popover.Anchor\n * └── Popover.Content\n *     └── Popover.Close\n * ```\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Popover = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the popover.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button>Open popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <p>This is the popover content.</p>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoveranchor\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Anchor asChild>\n\t *     <div>Position relative to this element</div>\n\t *   </Popover.Anchor>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <p>This popover is positioned relative to the anchor.</p>\n\t *     <Popover.Close asChild>\n\t *       <Button type=\"button\">Close</Button>\n\t *     </Popover.Close>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tAnchor,\n\t/**\n\t * A button that closes an open popover. Can be placed anywhere within the popover content.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Settings</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"flex items-center justify-between\">\n\t *       <Text>Settings Panel</Text>\n\t *       <Popover.Close asChild>\n\t *         <Button type=\"button\" appearance=\"ghost\" size=\"sm\">✕</Button>\n\t *       </Popover.Close>\n\t *     </div>\n\t *     <Text>Configure your preferences here.</Text>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The content to render inside the popover. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovercontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Show Info</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content side=\"top\" align=\"center\">\n\t *     <div className=\"space-y-2\">\n\t *       <Text weight=\"strong\">Additional Information</Text>\n\t *       <Text>This is the content inside the popover.</Text>\n\t *       <Button type=\"button\" size=\"sm\">Action</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the popover when clicked or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovertrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Options\n\t *     </Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"space-y-2\">\n\t *       <Button type=\"button\" variant=\"ghost\">Edit</Button>\n\t *       <Button type=\"button\" variant=\"ghost\">Delete</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tPopover,\n};\n"],"mappings":"0JAyBA,MAAM,EAAO,EAAiB,KAC9B,EAAK,YAAc,UAqBnB,MAAM,EAAU,EAAiB,QACjC,EAAQ,YAAc,iBAwBtB,MAAM,EAAS,EAAiB,OAChC,EAAO,YAAc,gBAwBrB,MAAM,EAAQ,EAAiB,MAC/B,EAAM,YAAc,eAiCpB,MAAM,EAAU,GAEd,CAEC,QAAQ,SACR,YACA,UACA,iBAAiB,WACjB,aAAa,EACb,GAAG,GAEJ,IAEA,EAAC,EAAiB,OAAlB,CAAA,SACC,EAAC,EAAiB,QAAlB,CACQ,QACP,YAAU,kBACV,UAAW,EACV,qaACA,EACA,EACA,CACD,QAAU,GAAU,CAKnB,EAAM,iBAAiB,CACvB,IAAU,EAAM,EAEZ,MACO,aACZ,GAAI,EACH,CAAA,CACuB,CAAA,CAE3B,CACD,EAAQ,YAAc,iBA2CtB,MAAM,EAAU,CAkBf,OAwBA,SAwBA,QAsBA,UAuBA,UACA"}

package/dist/{primitive-pggbsddf.js → primitive-tXm_8n_t.js}

@@ -1,2 +1,2 @@
-import{t as e}from"./booleanish-CBGdPL3Q.js";import{t}from"./slot-D_ZUrdEW.js";import{i as n}from"./toast-BhAyUXKL.js";import{createContext as r,forwardRef as i,useContext as a,useEffect as o,useState as s}from"react";import{jsx as c}from"react/jsx-runtime";import*as l from"@radix-ui/react-dialog";const u=r({hasDescription:!1,setHasDescription:()=>{}});function d(e){let[t,n]=s(!1);return c(u.Provider,{value:{hasDescription:t,setHasDescription:n},children:c(l.Root,{...e})})}d.displayName=`DialogPrimitiveRoot`;const f=l.Trigger;f.displayName=`DialogPrimitiveTrigger`;const p=l.Portal;p.displayName=`DialogPrimitivePortal`;const m=l.Close;m.displayName=`DialogPrimitiveClose`;const h=i((e,t)=>c(l.Overlay,{"data-overlay":!0,ref:t,...e}));h.displayName=`DialogPrimitiveOverlay`;const g=i(({onEscapeKeyDown:e,onInteractOutside:t,onPointerDownOutside:r,...i},o)=>{let s=a(u);return c(l.Content,{ref:o,onEscapeKeyDown:t=>{b(t),e?.(t)},onInteractOutside:e=>{n(e),t?.(e)},onPointerDownOutside:e=>{n(e),r?.(e)},...s.hasDescription?{}:{"aria-describedby":void 0},...i})});g.displayName=`DialogPrimitiveContent`;const _=l.Title,v=i(({asChild:e,children:n,...r},i)=>{let s=a(u);o(()=>(s.setHasDescription(!0),()=>s.setHasDescription(!1)),[s]);let d=e?t:`div`;return c(l.Description,{ref:i,asChild:!0,children:c(d,{...r,children:n})})});v.displayName=`DialogPrimitiveDescription`;function y(e){return e instanceof HTMLElement?e.hasAttribute(`data-overlay`):!1}function b(t){if(!w(t.currentTarget))return;let n=t.currentTarget,r=n instanceof Document?n.activeElement:n.ownerDocument?.activeElement??null,i=x(t.target)??x(r),a=i?S(i):null;i!=null&&e(i.getAttribute(`aria-expanded`))&&a!=null&&n.contains(i)&&n.contains(a)&&(a.getAttribute(`data-open`)===`true`||a.getAttribute(`data-state`)===`open`)&&t.preventDefault()}function x(e){return C(e)?e.closest(`[aria-expanded='true'][aria-controls]`):null}function S(e){let t=e.getAttribute(`aria-controls`);if(!t)return null;let n=e.ownerDocument.getElementById(t);return n instanceof HTMLElement?n:null}function C(e){return e instanceof HTMLElement}function w(e){return e instanceof Node&&`querySelector`in e}export{p as a,f as c,h as i,y as l,g as n,d as o,v as r,_ as s,m as t};
-//# sourceMappingURL=primitive-pggbsddf.js.map
+import{t as e}from"./booleanish-CBGdPL3Q.js";import{t}from"./slot-D_ZUrdEW.js";import{i as n}from"./toast-CGnquSKO.js";import{createContext as r,forwardRef as i,useContext as a,useEffect as o,useState as s}from"react";import{jsx as c}from"react/jsx-runtime";import*as l from"@radix-ui/react-dialog";const u=r({hasDescription:!1,setHasDescription:()=>{}});function d(e){let[t,n]=s(!1);return c(u.Provider,{value:{hasDescription:t,setHasDescription:n},children:c(l.Root,{...e})})}d.displayName=`DialogPrimitiveRoot`;const f=l.Trigger;f.displayName=`DialogPrimitiveTrigger`;const p=l.Portal;p.displayName=`DialogPrimitivePortal`;const m=l.Close;m.displayName=`DialogPrimitiveClose`;const h=i((e,t)=>c(l.Overlay,{"data-overlay":!0,ref:t,...e}));h.displayName=`DialogPrimitiveOverlay`;const g=i(({onEscapeKeyDown:e,onInteractOutside:t,onPointerDownOutside:r,...i},o)=>{let s=a(u);return c(l.Content,{ref:o,onEscapeKeyDown:t=>{b(t),e?.(t)},onInteractOutside:e=>{n(e),t?.(e)},onPointerDownOutside:e=>{n(e),r?.(e)},...s.hasDescription?{}:{"aria-describedby":void 0},...i})});g.displayName=`DialogPrimitiveContent`;const _=l.Title,v=i(({asChild:e,children:n,...r},i)=>{let s=a(u);o(()=>(s.setHasDescription(!0),()=>s.setHasDescription(!1)),[s]);let d=e?t:`div`;return c(l.Description,{ref:i,asChild:!0,children:c(d,{...r,children:n})})});v.displayName=`DialogPrimitiveDescription`;function y(e){return e instanceof HTMLElement?e.hasAttribute(`data-overlay`):!1}function b(t){if(!w(t.currentTarget))return;let n=t.currentTarget,r=n instanceof Document?n.activeElement:n.ownerDocument?.activeElement??null,i=x(t.target)??x(r),a=i?S(i):null;i!=null&&e(i.getAttribute(`aria-expanded`))&&a!=null&&n.contains(i)&&n.contains(a)&&(a.getAttribute(`data-open`)===`true`||a.getAttribute(`data-state`)===`open`)&&t.preventDefault()}function x(e){return C(e)?e.closest(`[aria-expanded='true'][aria-controls]`):null}function S(e){let t=e.getAttribute(`aria-controls`);if(!t)return null;let n=e.ownerDocument.getElementById(t);return n instanceof HTMLElement?n:null}function C(e){return e instanceof HTMLElement}function w(e){return e instanceof Node&&`querySelector`in e}export{p as a,f as c,h as i,y as l,g as n,d as o,v as r,_ as s,m as t};
+//# sourceMappingURL=primitive-tXm_8n_t.js.map

package/dist/{primitive-pggbsddf.js.map → primitive-tXm_8n_t.js.map}

@@ -1 +1 @@
-{"version":3,"file":"primitive-pggbsddf.js","names":[],"sources":["../src/components/dialog/primitive.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseEffect,\n\tuseState,\n} from \"react\";\nimport { Slot } from \"../slot/index.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\n\ntype DialogPrimitiveContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;\n\ntype InternalDialogContextValue = {\n\thasDescription: boolean;\n\tsetHasDescription: (value: boolean) => void;\n};\n\nconst InternalDialogContext = createContext<InternalDialogContextValue>({\n\thasDescription: false,\n\tsetHasDescription: () => {},\n});\n\nfunction Root(props: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n\tconst [hasDescription, setHasDescription] = useState(false);\n\n\treturn (\n\t\t<InternalDialogContext.Provider value={{ hasDescription, setHasDescription }}>\n\t\t\t<DialogPrimitive.Root {...props} />\n\t\t</InternalDialogContext.Provider>\n\t);\n}\nRoot.displayName = \"DialogPrimitiveRoot\";\n\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogPrimitiveTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPrimitivePortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogPrimitiveClose\";\n\nconst Overlay = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>((props, ref) => (\n\t<DialogPrimitive.Overlay\n\t\t/**\n\t\t * Mark the overlay with a data attribute so we can target it, e.g. in\n\t\t * event handlers\n\t\t */\n\t\tdata-overlay\n\t\tref={ref}\n\t\t{...props}\n\t/>\n));\nOverlay.displayName = \"DialogPrimitiveOverlay\";\n\nconst Content = forwardRef<ComponentRef<\"div\">, DialogPrimitiveContentProps>(\n\t({ onEscapeKeyDown, onInteractOutside, onPointerDownOutside, ...props }, ref) => {\n\t\tconst ctx = useContext(InternalDialogContext);\n\n\t\treturn (\n\t\t\t<DialogPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tonEscapeKeyDown={(event) => {\n\t\t\t\t\tpreventCloseOnNestedPopupEscape(event);\n\t\t\t\t\tonEscapeKeyDown?.(event);\n\t\t\t\t}}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\n\t\t\t\t// If there's no description, we remove the default applied aria-describedby attribute from radix dialog\n\t\t\t\t{...(!ctx.hasDescription ? { \"aria-describedby\": undefined } : {})}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nContent.displayName = \"DialogPrimitiveContent\";\n\nconst Title = DialogPrimitive.Title;\n\n/**\n * An accessible description for the dialog primitive.\n * This is a low-level primitive used by higher-level dialog components.\n * Renders as a `div` by default, but can be changed to any other element using the `asChild` prop.\n */\nconst Description = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ asChild, children, ...props }, ref) => {\n\tconst ctx = useContext(InternalDialogContext);\n\n\tuseEffect(() => {\n\t\tctx.setHasDescription(true);\n\t\treturn () => ctx.setHasDescription(false);\n\t}, [ctx]);\n\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<DialogPrimitive.Description ref={ref} asChild>\n\t\t\t<Component {...props}>{children}</Component>\n\t\t</DialogPrimitive.Description>\n\t);\n});\nDescription.displayName = \"DialogPrimitiveDescription\";\n\n/**\n * Type guard to check if the event target is the overlay component\n */\nfunction isDialogOverlayTarget(target: EventTarget | null): boolean {\n\tif (target instanceof HTMLElement) {\n\t\treturn target.hasAttribute(\"data-overlay\");\n\t}\n\treturn false;\n}\n\nexport {\n\t//,\n\tRoot,\n\tTrigger,\n\tPortal,\n\tClose,\n\tOverlay,\n\tContent,\n\tDescription,\n\tTitle,\n\tisDialogOverlayTarget,\n};\n\n/**\n * Prevents the parent dialog/sheet/alert-dialog from closing on Escape when a\n * nested popup owner inside the same modal content is currently expanded.\n *\n * Flow:\n * - If focus is outside the nested popup owner, Escape closes the parent modal.\n * - If focus is inside the nested popup owner and its controlled popup is open,\n *   the first Escape closes only the nested popup and keeps the parent modal open.\n * - Once the nested popup has closed, a subsequent Escape closes the parent modal.\n */\nfunction preventCloseOnNestedPopupEscape(\n\tevent: Parameters<NonNullable<DialogPrimitiveContentProps[\"onEscapeKeyDown\"]>>[0],\n): void {\n\tif (!isParentNode(event.currentTarget)) {\n\t\treturn;\n\t}\n\n\tconst currentTarget = event.currentTarget;\n\tconst activeElement =\n\t\tcurrentTarget instanceof Document\n\t\t\t? currentTarget.activeElement\n\t\t\t: (currentTarget.ownerDocument?.activeElement ?? null);\n\n\tconst owner = getExpandedPopupOwner(event.target) ?? getExpandedPopupOwner(activeElement);\n\n\tconst popup = owner ? getControlledPopup(owner) : null;\n\n\tif (\n\t\towner != null &&\n\t\tparseBooleanish(owner.getAttribute(\"aria-expanded\")) &&\n\t\tpopup != null &&\n\t\tcurrentTarget.contains(owner) &&\n\t\tcurrentTarget.contains(popup) &&\n\t\t// Only block closing if the popup is actively open. Always-visible lists\n\t\t// without open/close state (e.g. cmdk) carry neither attribute and should\n\t\t// never block the dialog from closing.\n\t\t// - Ariakit sets `data-open=\"true\"` when its popover is open.\n\t\t// - Radix sets `data-state=\"open\"` when its popup is open.\n\t\t(popup.getAttribute(\"data-open\") === \"true\" || popup.getAttribute(\"data-state\") === \"open\")\n\t) {\n\t\tevent.preventDefault();\n\t}\n}\n\n/**\n * Finds the nearest expanded popup owner for a node using ARIA relationships.\n *\n * A matching owner must expose `aria-expanded=\"true\"` and `aria-controls`, which\n * lets nested controls like comboboxes and input-attached popovers signal that an\n * inner surface is currently open.\n */\nfunction getExpandedPopupOwner(node: EventTarget | null): HTMLElement | null {\n\tif (!isHTMLElement(node)) {\n\t\treturn null;\n\t}\n\n\tconst owner = node.closest<HTMLElement>(\"[aria-expanded='true'][aria-controls]\");\n\treturn owner;\n}\n\n/**\n * Resolves the popup element controlled by an expanded owner via `aria-controls`.\n */\nfunction getControlledPopup(owner: HTMLElement): HTMLElement | null {\n\tconst popupId = owner.getAttribute(\"aria-controls\");\n\tif (!popupId) {\n\t\treturn null;\n\t}\n\n\tconst popup = owner.ownerDocument.getElementById(popupId);\n\treturn popup instanceof HTMLElement ? popup : null;\n}\n\n/**\n * Narrows an event target to an HTMLElement so DOM traversal helpers can be used safely.\n */\nfunction isHTMLElement(value: EventTarget | null): value is HTMLElement {\n\treturn value instanceof HTMLElement;\n}\n\n/**\n * Narrows an event target to a queryable DOM parent node, such as an Element or Document.\n */\nfunction isParentNode(value: EventTarget | null): value is ParentNode & Node {\n\treturn value instanceof Node && \"querySelector\" in value;\n}\n"],"mappings":"2SAuBA,MAAM,EAAwB,EAA0C,CACvE,eAAgB,GAChB,sBAAyB,GACzB,CAAC,CAEF,SAAS,EAAK,EAA8D,CAC3E,GAAM,CAAC,EAAgB,GAAqB,EAAS,GAAM,CAE3D,OACC,EAAC,EAAsB,SAAvB,CAAgC,MAAO,CAAE,iBAAgB,oBAAmB,UAC3E,EAAC,EAAgB,KAAjB,CAAsB,GAAI,EAAS,CAAA,CACH,CAAA,CAGnC,EAAK,YAAc,sBAEnB,MAAM,EAAU,EAAgB,QAChC,EAAQ,YAAc,yBAEtB,MAAM,EAAS,EAAgB,OAC/B,EAAO,YAAc,wBAErB,MAAM,EAAQ,EAAgB,MAC9B,EAAM,YAAc,uBAEpB,MAAM,EAAU,GAGb,EAAO,IACT,EAAC,EAAgB,QAAjB,CAKC,eAAA,GACK,MACL,GAAI,EACH,CAAA,CACD,CACF,EAAQ,YAAc,yBAEtB,MAAM,EAAU,GACd,CAAE,kBAAiB,oBAAmB,uBAAsB,GAAG,GAAS,IAAQ,CAChF,IAAM,EAAM,EAAW,EAAsB,CAE7C,OACC,EAAC,EAAgB,QAAjB,CACM,MACL,gBAAkB,GAAU,CAC3B,EAAgC,EAAM,CACtC,IAAkB,EAAM,EAEzB,kBAAoB,GAAU,CAC7B,EAAgC,EAAM,CACtC,IAAoB,EAAM,EAE3B,qBAAuB,GAAU,CAChC,EAAgC,EAAM,CACtC,IAAuB,EAAM,EAG9B,GAAM,EAAI,eAAqD,EAAE,CAAtC,CAAE,mBAAoB,IAAA,GAAW,CAC5D,GAAI,EACH,CAAA,EAGJ,CACD,EAAQ,YAAc,yBAEtB,MAAM,EAAQ,EAAgB,MAOxB,EAAc,GAGjB,CAAE,UAAS,WAAU,GAAG,GAAS,IAAQ,CAC3C,IAAM,EAAM,EAAW,EAAsB,CAE7C,OACC,EAAI,kBAAkB,GAAK,KACd,EAAI,kBAAkB,GAAM,EACvC,CAAC,EAAI,CAAC,CAET,IAAM,EAAY,EAAU,EAAO,MAEnC,OACC,EAAC,EAAgB,YAAjB,CAAkC,MAAK,QAAA,YACtC,EAAC,EAAD,CAAW,GAAI,EAAQ,WAAqB,CAAA,CACf,CAAA,EAE9B,CACF,EAAY,YAAc,6BAK1B,SAAS,EAAsB,EAAqC,CAInE,OAHI,aAAkB,YACd,EAAO,aAAa,eAAe,CAEpC,GA0BR,SAAS,EACR,EACO,CACP,GAAI,CAAC,EAAa,EAAM,cAAc,CACrC,OAGD,IAAM,EAAgB,EAAM,cACtB,EACL,aAAyB,SACtB,EAAc,cACb,EAAc,eAAe,eAAiB,KAE7C,EAAQ,EAAsB,EAAM,OAAO,EAAI,EAAsB,EAAc,CAEnF,EAAQ,EAAQ,EAAmB,EAAM,CAAG,KAGjD,GAAS,MACT,EAAgB,EAAM,aAAa,gBAAgB,CAAC,EACpD,GAAS,MACT,EAAc,SAAS,EAAM,EAC7B,EAAc,SAAS,EAAM,GAM5B,EAAM,aAAa,YAAY,GAAK,QAAU,EAAM,aAAa,aAAa,GAAK,SAEpF,EAAM,gBAAgB,CAWxB,SAAS,EAAsB,EAA8C,CAM5E,OALK,EAAc,EAAK,CAIV,EAAK,QAAqB,wCAAwC,CAHxE,KAUT,SAAS,EAAmB,EAAwC,CACnE,IAAM,EAAU,EAAM,aAAa,gBAAgB,CACnD,GAAI,CAAC,EACJ,OAAO,KAGR,IAAM,EAAQ,EAAM,cAAc,eAAe,EAAQ,CACzD,OAAO,aAAiB,YAAc,EAAQ,KAM/C,SAAS,EAAc,EAAiD,CACvE,OAAO,aAAiB,YAMzB,SAAS,EAAa,EAAuD,CAC5E,OAAO,aAAiB,MAAQ,kBAAmB"}
+{"version":3,"file":"primitive-tXm_8n_t.js","names":[],"sources":["../src/components/dialog/primitive.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseEffect,\n\tuseState,\n} from \"react\";\nimport { Slot } from \"../slot/index.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\n\ntype DialogPrimitiveContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;\n\ntype InternalDialogContextValue = {\n\thasDescription: boolean;\n\tsetHasDescription: (value: boolean) => void;\n};\n\nconst InternalDialogContext = createContext<InternalDialogContextValue>({\n\thasDescription: false,\n\tsetHasDescription: () => {},\n});\n\nfunction Root(props: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n\tconst [hasDescription, setHasDescription] = useState(false);\n\n\treturn (\n\t\t<InternalDialogContext.Provider value={{ hasDescription, setHasDescription }}>\n\t\t\t<DialogPrimitive.Root {...props} />\n\t\t</InternalDialogContext.Provider>\n\t);\n}\nRoot.displayName = \"DialogPrimitiveRoot\";\n\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogPrimitiveTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPrimitivePortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogPrimitiveClose\";\n\nconst Overlay = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>((props, ref) => (\n\t<DialogPrimitive.Overlay\n\t\t/**\n\t\t * Mark the overlay with a data attribute so we can target it, e.g. in\n\t\t * event handlers\n\t\t */\n\t\tdata-overlay\n\t\tref={ref}\n\t\t{...props}\n\t/>\n));\nOverlay.displayName = \"DialogPrimitiveOverlay\";\n\nconst Content = forwardRef<ComponentRef<\"div\">, DialogPrimitiveContentProps>(\n\t({ onEscapeKeyDown, onInteractOutside, onPointerDownOutside, ...props }, ref) => {\n\t\tconst ctx = useContext(InternalDialogContext);\n\n\t\treturn (\n\t\t\t<DialogPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tonEscapeKeyDown={(event) => {\n\t\t\t\t\tpreventCloseOnNestedPopupEscape(event);\n\t\t\t\t\tonEscapeKeyDown?.(event);\n\t\t\t\t}}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\n\t\t\t\t// If there's no description, we remove the default applied aria-describedby attribute from radix dialog\n\t\t\t\t{...(!ctx.hasDescription ? { \"aria-describedby\": undefined } : {})}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nContent.displayName = \"DialogPrimitiveContent\";\n\nconst Title = DialogPrimitive.Title;\n\n/**\n * An accessible description for the dialog primitive.\n * This is a low-level primitive used by higher-level dialog components.\n * Renders as a `div` by default, but can be changed to any other element using the `asChild` prop.\n */\nconst Description = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ asChild, children, ...props }, ref) => {\n\tconst ctx = useContext(InternalDialogContext);\n\n\tuseEffect(() => {\n\t\tctx.setHasDescription(true);\n\t\treturn () => ctx.setHasDescription(false);\n\t}, [ctx]);\n\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<DialogPrimitive.Description ref={ref} asChild>\n\t\t\t<Component {...props}>{children}</Component>\n\t\t</DialogPrimitive.Description>\n\t);\n});\nDescription.displayName = \"DialogPrimitiveDescription\";\n\n/**\n * Type guard to check if the event target is the overlay component\n */\nfunction isDialogOverlayTarget(target: EventTarget | null): boolean {\n\tif (target instanceof HTMLElement) {\n\t\treturn target.hasAttribute(\"data-overlay\");\n\t}\n\treturn false;\n}\n\nexport {\n\t//,\n\tRoot,\n\tTrigger,\n\tPortal,\n\tClose,\n\tOverlay,\n\tContent,\n\tDescription,\n\tTitle,\n\tisDialogOverlayTarget,\n};\n\n/**\n * Prevents the parent dialog/sheet/alert-dialog from closing on Escape when a\n * nested popup owner inside the same modal content is currently expanded.\n *\n * Flow:\n * - If focus is outside the nested popup owner, Escape closes the parent modal.\n * - If focus is inside the nested popup owner and its controlled popup is open,\n *   the first Escape closes only the nested popup and keeps the parent modal open.\n * - Once the nested popup has closed, a subsequent Escape closes the parent modal.\n */\nfunction preventCloseOnNestedPopupEscape(\n\tevent: Parameters<NonNullable<DialogPrimitiveContentProps[\"onEscapeKeyDown\"]>>[0],\n): void {\n\tif (!isParentNode(event.currentTarget)) {\n\t\treturn;\n\t}\n\n\tconst currentTarget = event.currentTarget;\n\tconst activeElement =\n\t\tcurrentTarget instanceof Document\n\t\t\t? currentTarget.activeElement\n\t\t\t: (currentTarget.ownerDocument?.activeElement ?? null);\n\n\tconst owner = getExpandedPopupOwner(event.target) ?? getExpandedPopupOwner(activeElement);\n\n\tconst popup = owner ? getControlledPopup(owner) : null;\n\n\tif (\n\t\towner != null &&\n\t\tparseBooleanish(owner.getAttribute(\"aria-expanded\")) &&\n\t\tpopup != null &&\n\t\tcurrentTarget.contains(owner) &&\n\t\tcurrentTarget.contains(popup) &&\n\t\t// Only block closing if the popup is actively open. Always-visible lists\n\t\t// without open/close state (e.g. cmdk) carry neither attribute and should\n\t\t// never block the dialog from closing.\n\t\t// - Ariakit sets `data-open=\"true\"` when its popover is open.\n\t\t// - Radix sets `data-state=\"open\"` when its popup is open.\n\t\t(popup.getAttribute(\"data-open\") === \"true\" || popup.getAttribute(\"data-state\") === \"open\")\n\t) {\n\t\tevent.preventDefault();\n\t}\n}\n\n/**\n * Finds the nearest expanded popup owner for a node using ARIA relationships.\n *\n * A matching owner must expose `aria-expanded=\"true\"` and `aria-controls`, which\n * lets nested controls like comboboxes and input-attached popovers signal that an\n * inner surface is currently open.\n */\nfunction getExpandedPopupOwner(node: EventTarget | null): HTMLElement | null {\n\tif (!isHTMLElement(node)) {\n\t\treturn null;\n\t}\n\n\tconst owner = node.closest<HTMLElement>(\"[aria-expanded='true'][aria-controls]\");\n\treturn owner;\n}\n\n/**\n * Resolves the popup element controlled by an expanded owner via `aria-controls`.\n */\nfunction getControlledPopup(owner: HTMLElement): HTMLElement | null {\n\tconst popupId = owner.getAttribute(\"aria-controls\");\n\tif (!popupId) {\n\t\treturn null;\n\t}\n\n\tconst popup = owner.ownerDocument.getElementById(popupId);\n\treturn popup instanceof HTMLElement ? popup : null;\n}\n\n/**\n * Narrows an event target to an HTMLElement so DOM traversal helpers can be used safely.\n */\nfunction isHTMLElement(value: EventTarget | null): value is HTMLElement {\n\treturn value instanceof HTMLElement;\n}\n\n/**\n * Narrows an event target to a queryable DOM parent node, such as an Element or Document.\n */\nfunction isParentNode(value: EventTarget | null): value is ParentNode & Node {\n\treturn value instanceof Node && \"querySelector\" in value;\n}\n"],"mappings":"2SAuBA,MAAM,EAAwB,EAA0C,CACvE,eAAgB,GAChB,sBAAyB,GACzB,CAAC,CAEF,SAAS,EAAK,EAA8D,CAC3E,GAAM,CAAC,EAAgB,GAAqB,EAAS,GAAM,CAE3D,OACC,EAAC,EAAsB,SAAvB,CAAgC,MAAO,CAAE,iBAAgB,oBAAmB,UAC3E,EAAC,EAAgB,KAAjB,CAAsB,GAAI,EAAS,CAAA,CACH,CAAA,CAGnC,EAAK,YAAc,sBAEnB,MAAM,EAAU,EAAgB,QAChC,EAAQ,YAAc,yBAEtB,MAAM,EAAS,EAAgB,OAC/B,EAAO,YAAc,wBAErB,MAAM,EAAQ,EAAgB,MAC9B,EAAM,YAAc,uBAEpB,MAAM,EAAU,GAGb,EAAO,IACT,EAAC,EAAgB,QAAjB,CAKC,eAAA,GACK,MACL,GAAI,EACH,CAAA,CACD,CACF,EAAQ,YAAc,yBAEtB,MAAM,EAAU,GACd,CAAE,kBAAiB,oBAAmB,uBAAsB,GAAG,GAAS,IAAQ,CAChF,IAAM,EAAM,EAAW,EAAsB,CAE7C,OACC,EAAC,EAAgB,QAAjB,CACM,MACL,gBAAkB,GAAU,CAC3B,EAAgC,EAAM,CACtC,IAAkB,EAAM,EAEzB,kBAAoB,GAAU,CAC7B,EAAgC,EAAM,CACtC,IAAoB,EAAM,EAE3B,qBAAuB,GAAU,CAChC,EAAgC,EAAM,CACtC,IAAuB,EAAM,EAG9B,GAAM,EAAI,eAAqD,EAAE,CAAtC,CAAE,mBAAoB,IAAA,GAAW,CAC5D,GAAI,EACH,CAAA,EAGJ,CACD,EAAQ,YAAc,yBAEtB,MAAM,EAAQ,EAAgB,MAOxB,EAAc,GAGjB,CAAE,UAAS,WAAU,GAAG,GAAS,IAAQ,CAC3C,IAAM,EAAM,EAAW,EAAsB,CAE7C,OACC,EAAI,kBAAkB,GAAK,KACd,EAAI,kBAAkB,GAAM,EACvC,CAAC,EAAI,CAAC,CAET,IAAM,EAAY,EAAU,EAAO,MAEnC,OACC,EAAC,EAAgB,YAAjB,CAAkC,MAAK,QAAA,YACtC,EAAC,EAAD,CAAW,GAAI,EAAQ,WAAqB,CAAA,CACf,CAAA,EAE9B,CACF,EAAY,YAAc,6BAK1B,SAAS,EAAsB,EAAqC,CAInE,OAHI,aAAkB,YACd,EAAO,aAAa,eAAe,CAEpC,GA0BR,SAAS,EACR,EACO,CACP,GAAI,CAAC,EAAa,EAAM,cAAc,CACrC,OAGD,IAAM,EAAgB,EAAM,cACtB,EACL,aAAyB,SACtB,EAAc,cACb,EAAc,eAAe,eAAiB,KAE7C,EAAQ,EAAsB,EAAM,OAAO,EAAI,EAAsB,EAAc,CAEnF,EAAQ,EAAQ,EAAmB,EAAM,CAAG,KAGjD,GAAS,MACT,EAAgB,EAAM,aAAa,gBAAgB,CAAC,EACpD,GAAS,MACT,EAAc,SAAS,EAAM,EAC7B,EAAc,SAAS,EAAM,GAM5B,EAAM,aAAa,YAAY,GAAK,QAAU,EAAM,aAAa,aAAa,GAAK,SAEpF,EAAM,gBAAgB,CAWxB,SAAS,EAAsB,EAA8C,CAM5E,OALK,EAAc,EAAK,CAIV,EAAK,QAAqB,wCAAwC,CAHxE,KAUT,SAAS,EAAmB,EAAwC,CACnE,IAAM,EAAU,EAAM,aAAa,gBAAgB,CACnD,GAAI,CAAC,EACJ,OAAO,KAGR,IAAM,EAAQ,EAAM,cAAc,eAAe,EAAQ,CACzD,OAAO,aAAiB,YAAc,EAAQ,KAM/C,SAAS,EAAc,EAAiD,CACvE,OAAO,aAAiB,YAMzB,SAAS,EAAa,EAAuD,CAC5E,OAAO,aAAiB,MAAQ,kBAAmB"}

package/dist/progress.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{createContext as t,useContext as n,useId as r,useMemo as i}from"react";import a from"clsx";import{jsx as o,jsxs as s}from"react/jsx-runtime";import*as c from"@radix-ui/react-progress";function l(e,{min:t,max:n}){return Math.min(n,Math.max(t,e))}function u(e){return typeof e==`number`}function d(e,t){return u(e)&&!Number.isNaN(e)&&e<=t&&e>=0}function f(e){return u(e)&&!Number.isNaN(e)&&e>0}const p={max:100,strokeWidth:`0.25rem`,value:0},m=t(p),h=({children:t,className:n,max:r=100,strokeWidth:a=4,value:c,indeterminateRotationSpeed:l,...h})=>{let g=f(r)?r:100,_=d(c,g)?c:c==null?0:`indeterminate`,b=v(a??p.strokeWidth),x=u(_)?_:void 0,S=y(b),C=i(()=>({max:g,strokeWidth:b,value:_}),[g,b,_]);return o(m.Provider,{value:C,children:s(`svg`,{"aria-valuemax":g,"aria-valuemin":0,"aria-valuenow":x,className:e(`size-6 text-gray-200 dark:text-gray-300`,_===`indeterminate`&&[`animate-spin`,l??`animation-duration-[15s]`],n),"data-max":g,"data-min":0,"data-value":x,height:`100%`,role:`progressbar`,width:`100%`,...h,children:[o(`circle`,{className:`[r:var(--radius)]`,cx:`50%`,cy:`50%`,fill:`transparent`,stroke:`currentColor`,strokeWidth:b,style:{"--radius":S}}),t]})})};h.displayName=`ProgressDonut`;const g=({className:t,...i})=>{let c=r(),l=n(m)??p,u=(l.value===`indeterminate`?.6:l.value/l.max)*100,d=v(l.strokeWidth),f=y(d);return s(`g`,{className:e(`text-accent-600`,t),...i,children:[l.value===`indeterminate`&&o(`defs`,{children:s(`linearGradient`,{id:c,children:[o(`stop`,{className:`stop-opacity-100 stop-color-current`,offset:`0%`}),o(`stop`,{className:`stop-opacity-0 stop-color-current`,offset:`95%`})]})}),o(`circle`,{className:a(`[r:var(--radius)]`,`origin-center`),cx:`50%`,cy:`50%`,fill:`transparent`,pathLength:100,stroke:l.value===`indeterminate`?`url(#${c})`:`currentColor`,strokeDasharray:100,strokeDashoffset:100-u,strokeLinecap:`round`,strokeWidth:d,style:{"--radius":f},transform:`rotate(-90)`})]})};g.displayName=`ProgressDonutIndicator`;const _={Root:h,Indicator:g};function v(e){let t=4;return e==null?t:(t=typeof e==`number`?e:e.endsWith(`rem`)?Number(e.replace(`rem`,``))*16:Number(e),l(Number.isNaN(t)?4:t,{min:1,max:12}))}function y(e){return`calc(50% - ${e/2}px)`}const b=t({max:100,value:0});function x({className:t,children:n,max:r=100,value:a,...s}){let l=f(r)?r:100,p=d(a,l)?a:a==null?0:`indeterminate`,m=u(p)?p:void 0,h=i(()=>({max:l,value:p}),[l,p]);return o(b.Provider,{value:h,children:o(c.Root,{"data-slot":`progress`,className:e(`bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md`,t),value:m,max:l,...s,children:n})})}x.displayName=`Root`;function S({className:t,style:r,...i}){let a=n(b),{max:s}=a,l=(s-(a.value===`indeterminate`?0:a.value))/s*100;return o(c.Indicator,{"data-slot":`progress-indicator`,className:e(`bg-accent-600 h-full w-full flex-1 transition-all`,t),style:{...r,transform:`translateX(-${l}%)`},...i})}S.displayName=`Indicator`;const C={Root:x,Indicator:S};export{C as ProgressBar,_ as ProgressDonut};
+import{t as e}from"./cx-D1HYnpvA.js";import{createContext as t,useContext as n,useId as r,useMemo as i}from"react";import a from"clsx";import{jsx as o,jsxs as s}from"react/jsx-runtime";import*as c from"@radix-ui/react-progress";function l(e,{min:t,max:n}){return Math.min(n,Math.max(t,e))}function u(e){return typeof e==`number`}function d(e,t){return u(e)&&!Number.isNaN(e)&&e<=t&&e>=0}function f(e){return u(e)&&!Number.isNaN(e)&&e>0}const p={max:100,strokeWidth:`0.25rem`,value:0},m=t(p),h=({children:t,className:n,max:r=100,strokeWidth:a=4,value:c,indeterminateRotationSpeed:l,...h})=>{let g=f(r)?r:100,_=d(c,g)?c:c==null?0:`indeterminate`,b=v(a??p.strokeWidth),x=u(_)?_:void 0,S=y(b),C=i(()=>({max:g,strokeWidth:b,value:_}),[g,b,_]);return o(m.Provider,{value:C,children:s(`svg`,{"data-slot":`progress-donut`,"aria-valuemax":g,"aria-valuemin":0,"aria-valuenow":x,className:e(`size-6 text-gray-200 dark:text-gray-300`,_===`indeterminate`&&[`animate-spin`,l??`animation-duration-[15s]`],n),"data-max":g,"data-min":0,"data-value":x,height:`100%`,role:`progressbar`,width:`100%`,...h,children:[o(`circle`,{className:`[r:var(--radius)]`,cx:`50%`,cy:`50%`,fill:`transparent`,stroke:`currentColor`,strokeWidth:b,style:{"--radius":S}}),t]})})};h.displayName=`ProgressDonut`;const g=({className:t,...i})=>{let c=r(),l=n(m)??p,u=(l.value===`indeterminate`?.6:l.value/l.max)*100,d=v(l.strokeWidth),f=y(d);return s(`g`,{"data-slot":`progress-donut-indicator`,className:e(`text-accent-600`,t),...i,children:[l.value===`indeterminate`&&o(`defs`,{children:s(`linearGradient`,{id:c,children:[o(`stop`,{className:`stop-opacity-100 stop-color-current`,offset:`0%`}),o(`stop`,{className:`stop-opacity-0 stop-color-current`,offset:`95%`})]})}),o(`circle`,{className:a(`[r:var(--radius)]`,`origin-center`),cx:`50%`,cy:`50%`,fill:`transparent`,pathLength:100,stroke:l.value===`indeterminate`?`url(#${c})`:`currentColor`,strokeDasharray:100,strokeDashoffset:100-u,strokeLinecap:`round`,strokeWidth:d,style:{"--radius":f},transform:`rotate(-90)`})]})};g.displayName=`ProgressDonutIndicator`;const _={Root:h,Indicator:g};function v(e){let t=4;return e==null?t:(t=typeof e==`number`?e:e.endsWith(`rem`)?Number(e.replace(`rem`,``))*16:Number(e),l(Number.isNaN(t)?4:t,{min:1,max:12}))}function y(e){return`calc(50% - ${e/2}px)`}const b=t({max:100,value:0});function x({className:t,children:n,max:r=100,value:a,...s}){let l=f(r)?r:100,p=d(a,l)?a:a==null?0:`indeterminate`,m=u(p)?p:void 0,h=i(()=>({max:l,value:p}),[l,p]);return o(b.Provider,{value:h,children:o(c.Root,{"data-slot":`progress-bar`,className:e(`bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md`,t),value:m,max:l,...s,children:n})})}x.displayName=`Root`;function S({className:t,style:r,...i}){let a=n(b),{max:s}=a,l=(s-(a.value===`indeterminate`?0:a.value))/s*100;return o(c.Indicator,{"data-slot":`progress-bar-indicator`,className:e(`bg-accent-600 h-full w-full flex-1 transition-all`,t),style:{...r,transform:`translateX(-${l}%)`},...i})}S.displayName=`Indicator`;const C={Root:x,Indicator:S};export{C as ProgressBar,_ as ProgressDonut};
 //# sourceMappingURL=progress.js.map

package/dist/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":["defaultMax","ProgressContext","Root","Indicator","clsx"],"sources":["../src/components/progress/math.ts","../src/components/progress/progress-donut.tsx","../src/components/progress/progress-bar.tsx"],"sourcesContent":["/**\n * Clamp a value between a minimum and maximum value.\n */\nfunction clamp(value: number, { min, max }: { min: number; max: number }): number {\n\treturn Math.min(max, Math.max(min, value));\n}\n\n/**\n * Check if a value is a number.\n */\nfunction isNumber(value: unknown): value is number {\n\treturn typeof value === \"number\";\n}\n\n/**\n * Check if a value is a valid number within the range of 0 to `max`.\n */\nfunction isValidValueNumber(value: unknown, max: number): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;\n}\n\n/**\n * Check if a value is a valid number greater than 0.\n */\nfunction isValidMaxNumber(value: unknown): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value > 0;\n}\n\nexport {\n\t//,\n\tclamp,\n\tisNumber,\n\tisValidValueNumber,\n\tisValidMaxNumber,\n};\n","import clsx from \"clsx\";\nimport { createContext, useContext, useId, useMemo } from \"react\";\nimport type { CSSProperties, ComponentProps, HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { clamp, isNumber, isValidMaxNumber, isValidValueNumber } from \"./math.js\";\nimport type { ValueType } from \"./types.js\";\n\ntype RemValue = `${number}rem`;\ntype StrokeWidth = number | RemValue;\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tstrokeWidth: StrokeWidth;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tstrokeWidth: \"0.25rem\",\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext = createContext<ProgressContextValue>(defaultContextValue);\n\ntype SvgAttributes = Omit<\n\tHTMLAttributes<SVGElement>,\n\t\"viewBox\" | \"role\" | \"aria-valuemax\" | \"aria-valuemin\" | \"aria-valuenow\" | \"width\" | \"height\"\n>;\n\ntype Props = SvgAttributes & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The width of the progress bar stroke.\n\t * Note, we clamp the stroke width to a minimum of 1px and max of 12px since\n\t * it is proportional to the viewbox size (0 0 32 32).\n\t *\n\t * @default 0.25rem (4px)\n\t */\n\tstrokeWidth?: StrokeWidth;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate.\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n\t/**\n\t * Controls the rotation speed of the indeterminate spinner state.\n\t *\n\t * Accepts a Tailwind `animation-duration-*` utility (e.g. `animation-duration-[2s]`).\n\t *\n\t * This prop is applied in addition to `animate-spin` to control the speed of the indeterminate spinner.\n\t * @default `animation-duration-[15s]`\n\t */\n\tindeterminateRotationSpeed?: `animation-duration-${string}`;\n};\n\n/**\n * A simple circular progress bar which shows the completion progress of a task.\n *\n * The indicator color is inherited via `currentColor`. Override the default\n * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst Root = ({\n\tchildren,\n\tclassName,\n\tmax: _max = defaultMax,\n\tstrokeWidth: _strokeWidth = 4,\n\tvalue: _value,\n\tindeterminateRotationSpeed,\n\t...props\n}: Props) => {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max) ? _value : _value == null ? 0 : \"indeterminate\"\n\t) satisfies ValueType;\n\tconst strokeWidthPx = deriveStrokeWidthPx(_strokeWidth ?? defaultContextValue.strokeWidth);\n\tconst valueNow = isNumber(value) ? value : undefined;\n\tconst radius = calcRadius(strokeWidthPx);\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tstrokeWidth: strokeWidthPx,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, strokeWidthPx, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t{/* biome-ignore lint/a11y/useFocusableInteractive: progress bars don't need to be focusable */}\n\t\t\t<svg\n\t\t\t\taria-valuemax={max}\n\t\t\t\taria-valuemin={0}\n\t\t\t\taria-valuenow={valueNow}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"size-6 text-gray-200 dark:text-gray-300\",\n\t\t\t\t\tvalue === \"indeterminate\" && [\n\t\t\t\t\t\t\"animate-spin\",\n\t\t\t\t\t\t// Default duration only if consumer hasn't set one.\n\t\t\t\t\t\t// Without this guard, both our `[15s]` and consumer overrides (e.g. `[2s]`)\n\t\t\t\t\t\t// end up in the DOM. Since tw-animate-css utilities aren't currently deduped by\n\t\t\t\t\t\t// tailwind-merge, whichever class Tailwind happened to emit last wins,\n\t\t\t\t\t\t// which isn't reliable.\n\t\t\t\t\t\tindeterminateRotationSpeed ?? \"animation-duration-[15s]\",\n\t\t\t\t\t],\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-max={max}\n\t\t\t\tdata-min={0}\n\t\t\t\tdata-value={valueNow}\n\t\t\t\theight=\"100%\"\n\t\t\t\t// biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: this is a radial progress bar, which is possible by SVG\n\t\t\t\trole=\"progressbar\"\n\t\t\t\twidth=\"100%\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<circle\n\t\t\t\t\tclassName=\"[r:var(--radius)]\"\n\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</svg>\n\t\t</ProgressContext.Provider>\n\t);\n};\nRoot.displayName = \"ProgressDonut\";\n\n/**\n * Length (value) of the progress indicator tail when the progress bar is indeterminate.\n */\nconst indeterminateTailPercent = 0.6;\n\ntype ProgressDonutIndicatorProps = Omit<ComponentProps<\"g\">, \"children\">;\n\n/**\n * The indicator for the circular progress bar.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst Indicator = ({ className, ...props }: ProgressDonutIndicatorProps) => {\n\tconst gradientId = useId();\n\tconst ctx = useContext(ProgressContext) ?? defaultContextValue;\n\tconst percentage =\n\t\t(ctx.value === \"indeterminate\" ? indeterminateTailPercent : ctx.value / ctx.max) * 100;\n\tconst strokeWidthPx = deriveStrokeWidthPx(ctx.strokeWidth);\n\tconst radius = calcRadius(strokeWidthPx);\n\n\treturn (\n\t\t<g className={cx(\"text-accent-600\", className)} {...props}>\n\t\t\t{ctx.value === \"indeterminate\" && (\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient id={gradientId}>\n\t\t\t\t\t\t<stop className=\"stop-opacity-100 stop-color-current\" offset=\"0%\" />\n\t\t\t\t\t\t<stop className=\"stop-opacity-0 stop-color-current\" offset=\"95%\" />\n\t\t\t\t\t</linearGradient>\n\t\t\t\t</defs>\n\t\t\t)}\n\t\t\t<circle\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"[r:var(--radius)]\", // set the circle radius to be the value of the calc'd CSS variable set on the style\n\t\t\t\t\t\"origin-center\",\n\t\t\t\t)}\n\t\t\t\tcx=\"50%\"\n\t\t\t\tcy=\"50%\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\tpathLength={100}\n\t\t\t\tstroke={ctx.value === \"indeterminate\" ? `url(#${gradientId})` : \"currentColor\"}\n\t\t\t\tstrokeDasharray={100}\n\t\t\t\tstrokeDashoffset={100 - percentage}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\ttransform=\"rotate(-90)\" // rotate -90 degrees so it starts from the top\n\t\t\t/>\n\t\t</g>\n\t);\n};\nIndicator.displayName = \"ProgressDonutIndicator\";\n\n/**\n * A simple circular progress bar which shows the completion progress of a task.\n *\n * The indicator color is inherited via `currentColor`. Override the default\n * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n *\n * @see https://mantle.ngrok.com/components/progress\n *\n * @example\n * Composition:\n * ```\n * ProgressDonut.Root\n * └── ProgressDonut.Indicator\n * ```\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst ProgressDonut = {\n\t/**\n\t * A simple circular progress bar which shows the completion progress of a task.\n\t *\n\t * The indicator color is inherited via `currentColor`. Override the default\n\t * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-donut-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator />\n\t * </ProgressDonut.Root>\n\t *\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n\t * </ProgressDonut.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The indicator for the circular progress bar.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator />\n\t * </ProgressDonut.Root>\n\t *\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n\t * </ProgressDonut.Root>\n\t * ```\n\t */\n\tIndicator,\n} as const;\n\nexport {\n\t//,\n\tProgressDonut,\n};\n\n/**\n * Derive the stroke width in pixels as a number value or pixels/rem from a string value.\n * Note, this function clamps the stroke width to a minimum of 1 and max of 12 since\n * it is proportional to the viewbox size (0 0 32 32).\n *\n * @example\n * ```tsx\n * const strokeWidth1 = deriveStrokeWidthPx(8);\n * // Returns: 8\n *\n * const strokeWidth2 = deriveStrokeWidthPx(\"0.5rem\");\n * // Returns: 8 (0.5 * 16)\n *\n * const strokeWidth3 = deriveStrokeWidthPx(20);\n * // Returns: 12 (clamped to maximum)\n * ```\n */\nexport function deriveStrokeWidthPx(strokeWidth: number | string | undefined | null): number {\n\tlet value = 4;\n\tif (strokeWidth == null) {\n\t\treturn value;\n\t}\n\n\tif (typeof strokeWidth === \"number\") {\n\t\tvalue = strokeWidth;\n\t} else if (strokeWidth.endsWith(\"rem\")) {\n\t\tvalue = Number(strokeWidth.replace(\"rem\", \"\")) * 16;\n\t} else {\n\t\tvalue = Number(strokeWidth);\n\t}\n\n\tconst stroke = Number.isNaN(value) ? 4 : value;\n\treturn clamp(stroke, { min: 1, max: 12 });\n}\n\n/**\n * Calculate the radius of the progress donut and indicator based on the stroke\n * width in pixels.\n */\nfunction calcRadius(strokeWidthPx: number) {\n\treturn `calc(50% - ${strokeWidthPx / 2}px)` as const;\n}\n","\"use client\";\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\n\nimport { type ComponentProps, createContext, useContext, useMemo } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { isNumber, isValidMaxNumber, isValidValueNumber } from \"./math.js\";\nimport type { ValueType } from \"./types.js\";\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext = createContext<ProgressContextValue>(defaultContextValue);\n\ntype RootProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate. (for now there is no visual difference than 0)\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n};\n\n/**\n * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n *\n * A horizontal progress bar that shows the completion progress of a task.\n * Use this component for linear progress indication.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-bar\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * <ProgressBar.Root value={75} max={100}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Indeterminate progress\n * <ProgressBar.Root value=\"indeterminate\">\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n * ```\n */\nfunction Root({ className, children, max: _max = defaultMax, value: _value, ...props }: RootProps) {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max) ? _value : _value == null ? 0 : \"indeterminate\"\n\t) satisfies ValueType;\n\n\tconst valueNow = isNumber(value) ? value : undefined;\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t<ProgressPrimitive.Root\n\t\t\t\tdata-slot=\"progress\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tvalue={valueNow}\n\t\t\t\tmax={max}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</ProgressPrimitive.Root>\n\t\t</ProgressContext.Provider>\n\t);\n}\nRoot.displayName = \"Root\";\n\ntype IndicatorProps = ComponentProps<typeof ProgressPrimitive.Indicator>;\n\n/**\n * Displays the progress indicator, which visually represents the completion progress of a task.\n *\n * The visual indicator that shows the actual progress within the progress bar.\n * This component should be used inside a ProgressBar.Root component.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Custom styled indicator\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator className=\"bg-success-600\" />\n * </ProgressBar.Root>\n * ```\n */\nfunction Indicator({ className, style, ...props }: IndicatorProps) {\n\tconst ctx = useContext(ProgressContext);\n\tconst { max } = ctx;\n\tconst value = ctx.value === \"indeterminate\" ? 0 : ctx.value;\n\tconst translatePercent = ((max - value) / max) * 100;\n\n\treturn (\n\t\t<ProgressPrimitive.Indicator\n\t\t\tdata-slot=\"progress-indicator\"\n\t\t\tclassName={cx(\"bg-accent-600 h-full w-full flex-1 transition-all\", className)}\n\t\t\tstyle={{ ...style, transform: `translateX(-${translatePercent}%)` }}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nIndicator.displayName = \"Indicator\";\n\n/**\n * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n *\n * A horizontal progress bar that shows the completion progress of a task.\n * Use this component for linear progress indication.\n *\n * @see https://mantle.ngrok.com/components/progress\n *\n * @example\n * Composition:\n * ```\n * ProgressBar.Root\n * └── ProgressBar.Indicator\n * ```\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * <ProgressBar.Root value={75} max={100}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Indeterminate progress\n * <ProgressBar.Root value=\"indeterminate\">\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n * ```\n */\nconst ProgressBar = {\n\t/**\n\t * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n\t *\n\t * A horizontal progress bar that shows the completion progress of a task.\n\t * Use this component for linear progress indication.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-bar\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * <ProgressBar.Root value={75} max={100}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * // Indeterminate progress\n\t * <ProgressBar.Root value=\"indeterminate\">\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Displays the progress indicator, which visually represents the completion progress of a task.\n\t *\n\t * The visual indicator that shows the actual progress within the progress bar.\n\t * This component should be used inside a ProgressBar.Root component.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * // Custom styled indicator\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator className=\"bg-success-600\" />\n\t * </ProgressBar.Root>\n\t * ```\n\t */\n\tIndicator,\n} as const;\n\nexport {\n\t//,\n\tProgressBar,\n};\n"],"mappings":"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"}
+{"version":3,"file":"progress.js","names":["defaultMax","ProgressContext","Root","Indicator","clsx"],"sources":["../src/components/progress/math.ts","../src/components/progress/progress-donut.tsx","../src/components/progress/progress-bar.tsx"],"sourcesContent":["/**\n * Clamp a value between a minimum and maximum value.\n */\nfunction clamp(value: number, { min, max }: { min: number; max: number }): number {\n\treturn Math.min(max, Math.max(min, value));\n}\n\n/**\n * Check if a value is a number.\n */\nfunction isNumber(value: unknown): value is number {\n\treturn typeof value === \"number\";\n}\n\n/**\n * Check if a value is a valid number within the range of 0 to `max`.\n */\nfunction isValidValueNumber(value: unknown, max: number): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;\n}\n\n/**\n * Check if a value is a valid number greater than 0.\n */\nfunction isValidMaxNumber(value: unknown): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value > 0;\n}\n\nexport {\n\t//,\n\tclamp,\n\tisNumber,\n\tisValidValueNumber,\n\tisValidMaxNumber,\n};\n","import clsx from \"clsx\";\nimport { createContext, useContext, useId, useMemo } from \"react\";\nimport type { CSSProperties, ComponentProps, HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { clamp, isNumber, isValidMaxNumber, isValidValueNumber } from \"./math.js\";\nimport type { ValueType } from \"./types.js\";\n\ntype RemValue = `${number}rem`;\ntype StrokeWidth = number | RemValue;\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tstrokeWidth: StrokeWidth;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tstrokeWidth: \"0.25rem\",\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext = createContext<ProgressContextValue>(defaultContextValue);\n\ntype SvgAttributes = Omit<\n\tHTMLAttributes<SVGElement>,\n\t\"viewBox\" | \"role\" | \"aria-valuemax\" | \"aria-valuemin\" | \"aria-valuenow\" | \"width\" | \"height\"\n>;\n\ntype Props = SvgAttributes & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The width of the progress bar stroke.\n\t * Note, we clamp the stroke width to a minimum of 1px and max of 12px since\n\t * it is proportional to the viewbox size (0 0 32 32).\n\t *\n\t * @default 0.25rem (4px)\n\t */\n\tstrokeWidth?: StrokeWidth;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate.\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n\t/**\n\t * Controls the rotation speed of the indeterminate spinner state.\n\t *\n\t * Accepts a Tailwind `animation-duration-*` utility (e.g. `animation-duration-[2s]`).\n\t *\n\t * This prop is applied in addition to `animate-spin` to control the speed of the indeterminate spinner.\n\t * @default `animation-duration-[15s]`\n\t */\n\tindeterminateRotationSpeed?: `animation-duration-${string}`;\n};\n\n/**\n * A simple circular progress bar which shows the completion progress of a task.\n *\n * The indicator color is inherited via `currentColor`. Override the default\n * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst Root = ({\n\tchildren,\n\tclassName,\n\tmax: _max = defaultMax,\n\tstrokeWidth: _strokeWidth = 4,\n\tvalue: _value,\n\tindeterminateRotationSpeed,\n\t...props\n}: Props) => {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max) ? _value : _value == null ? 0 : \"indeterminate\"\n\t) satisfies ValueType;\n\tconst strokeWidthPx = deriveStrokeWidthPx(_strokeWidth ?? defaultContextValue.strokeWidth);\n\tconst valueNow = isNumber(value) ? value : undefined;\n\tconst radius = calcRadius(strokeWidthPx);\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tstrokeWidth: strokeWidthPx,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, strokeWidthPx, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t{/* biome-ignore lint/a11y/useFocusableInteractive: progress bars don't need to be focusable */}\n\t\t\t<svg\n\t\t\t\tdata-slot=\"progress-donut\"\n\t\t\t\taria-valuemax={max}\n\t\t\t\taria-valuemin={0}\n\t\t\t\taria-valuenow={valueNow}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"size-6 text-gray-200 dark:text-gray-300\",\n\t\t\t\t\tvalue === \"indeterminate\" && [\n\t\t\t\t\t\t\"animate-spin\",\n\t\t\t\t\t\t// Default duration only if consumer hasn't set one.\n\t\t\t\t\t\t// Without this guard, both our `[15s]` and consumer overrides (e.g. `[2s]`)\n\t\t\t\t\t\t// end up in the DOM. Since tw-animate-css utilities aren't currently deduped by\n\t\t\t\t\t\t// tailwind-merge, whichever class Tailwind happened to emit last wins,\n\t\t\t\t\t\t// which isn't reliable.\n\t\t\t\t\t\tindeterminateRotationSpeed ?? \"animation-duration-[15s]\",\n\t\t\t\t\t],\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-max={max}\n\t\t\t\tdata-min={0}\n\t\t\t\tdata-value={valueNow}\n\t\t\t\theight=\"100%\"\n\t\t\t\t// biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: this is a radial progress bar, which is possible by SVG\n\t\t\t\trole=\"progressbar\"\n\t\t\t\twidth=\"100%\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<circle\n\t\t\t\t\tclassName=\"[r:var(--radius)]\"\n\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</svg>\n\t\t</ProgressContext.Provider>\n\t);\n};\nRoot.displayName = \"ProgressDonut\";\n\n/**\n * Length (value) of the progress indicator tail when the progress bar is indeterminate.\n */\nconst indeterminateTailPercent = 0.6;\n\ntype ProgressDonutIndicatorProps = Omit<ComponentProps<\"g\">, \"children\">;\n\n/**\n * The indicator for the circular progress bar.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst Indicator = ({ className, ...props }: ProgressDonutIndicatorProps) => {\n\tconst gradientId = useId();\n\tconst ctx = useContext(ProgressContext) ?? defaultContextValue;\n\tconst percentage =\n\t\t(ctx.value === \"indeterminate\" ? indeterminateTailPercent : ctx.value / ctx.max) * 100;\n\tconst strokeWidthPx = deriveStrokeWidthPx(ctx.strokeWidth);\n\tconst radius = calcRadius(strokeWidthPx);\n\n\treturn (\n\t\t<g data-slot=\"progress-donut-indicator\" className={cx(\"text-accent-600\", className)} {...props}>\n\t\t\t{ctx.value === \"indeterminate\" && (\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient id={gradientId}>\n\t\t\t\t\t\t<stop className=\"stop-opacity-100 stop-color-current\" offset=\"0%\" />\n\t\t\t\t\t\t<stop className=\"stop-opacity-0 stop-color-current\" offset=\"95%\" />\n\t\t\t\t\t</linearGradient>\n\t\t\t\t</defs>\n\t\t\t)}\n\t\t\t<circle\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"[r:var(--radius)]\", // set the circle radius to be the value of the calc'd CSS variable set on the style\n\t\t\t\t\t\"origin-center\",\n\t\t\t\t)}\n\t\t\t\tcx=\"50%\"\n\t\t\t\tcy=\"50%\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\tpathLength={100}\n\t\t\t\tstroke={ctx.value === \"indeterminate\" ? `url(#${gradientId})` : \"currentColor\"}\n\t\t\t\tstrokeDasharray={100}\n\t\t\t\tstrokeDashoffset={100 - percentage}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\ttransform=\"rotate(-90)\" // rotate -90 degrees so it starts from the top\n\t\t\t/>\n\t\t</g>\n\t);\n};\nIndicator.displayName = \"ProgressDonutIndicator\";\n\n/**\n * A simple circular progress bar which shows the completion progress of a task.\n *\n * The indicator color is inherited via `currentColor`. Override the default\n * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n *\n * @see https://mantle.ngrok.com/components/progress\n *\n * @example\n * Composition:\n * ```\n * ProgressDonut.Root\n * └── ProgressDonut.Indicator\n * ```\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst ProgressDonut = {\n\t/**\n\t * A simple circular progress bar which shows the completion progress of a task.\n\t *\n\t * The indicator color is inherited via `currentColor`. Override the default\n\t * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-donut-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator />\n\t * </ProgressDonut.Root>\n\t *\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n\t * </ProgressDonut.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The indicator for the circular progress bar.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator />\n\t * </ProgressDonut.Root>\n\t *\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n\t * </ProgressDonut.Root>\n\t * ```\n\t */\n\tIndicator,\n} as const;\n\nexport {\n\t//,\n\tProgressDonut,\n};\n\n/**\n * Derive the stroke width in pixels as a number value or pixels/rem from a string value.\n * Note, this function clamps the stroke width to a minimum of 1 and max of 12 since\n * it is proportional to the viewbox size (0 0 32 32).\n *\n * @example\n * ```tsx\n * const strokeWidth1 = deriveStrokeWidthPx(8);\n * // Returns: 8\n *\n * const strokeWidth2 = deriveStrokeWidthPx(\"0.5rem\");\n * // Returns: 8 (0.5 * 16)\n *\n * const strokeWidth3 = deriveStrokeWidthPx(20);\n * // Returns: 12 (clamped to maximum)\n * ```\n */\nexport function deriveStrokeWidthPx(strokeWidth: number | string | undefined | null): number {\n\tlet value = 4;\n\tif (strokeWidth == null) {\n\t\treturn value;\n\t}\n\n\tif (typeof strokeWidth === \"number\") {\n\t\tvalue = strokeWidth;\n\t} else if (strokeWidth.endsWith(\"rem\")) {\n\t\tvalue = Number(strokeWidth.replace(\"rem\", \"\")) * 16;\n\t} else {\n\t\tvalue = Number(strokeWidth);\n\t}\n\n\tconst stroke = Number.isNaN(value) ? 4 : value;\n\treturn clamp(stroke, { min: 1, max: 12 });\n}\n\n/**\n * Calculate the radius of the progress donut and indicator based on the stroke\n * width in pixels.\n */\nfunction calcRadius(strokeWidthPx: number) {\n\treturn `calc(50% - ${strokeWidthPx / 2}px)` as const;\n}\n","\"use client\";\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\n\nimport { type ComponentProps, createContext, useContext, useMemo } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { isNumber, isValidMaxNumber, isValidValueNumber } from \"./math.js\";\nimport type { ValueType } from \"./types.js\";\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext = createContext<ProgressContextValue>(defaultContextValue);\n\ntype RootProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate. (for now there is no visual difference than 0)\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n};\n\n/**\n * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n *\n * A horizontal progress bar that shows the completion progress of a task.\n * Use this component for linear progress indication.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-bar\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * <ProgressBar.Root value={75} max={100}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Indeterminate progress\n * <ProgressBar.Root value=\"indeterminate\">\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n * ```\n */\nfunction Root({ className, children, max: _max = defaultMax, value: _value, ...props }: RootProps) {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max) ? _value : _value == null ? 0 : \"indeterminate\"\n\t) satisfies ValueType;\n\n\tconst valueNow = isNumber(value) ? value : undefined;\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t<ProgressPrimitive.Root\n\t\t\t\tdata-slot=\"progress-bar\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tvalue={valueNow}\n\t\t\t\tmax={max}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</ProgressPrimitive.Root>\n\t\t</ProgressContext.Provider>\n\t);\n}\nRoot.displayName = \"Root\";\n\ntype IndicatorProps = ComponentProps<typeof ProgressPrimitive.Indicator>;\n\n/**\n * Displays the progress indicator, which visually represents the completion progress of a task.\n *\n * The visual indicator that shows the actual progress within the progress bar.\n * This component should be used inside a ProgressBar.Root component.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Custom styled indicator\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator className=\"bg-success-600\" />\n * </ProgressBar.Root>\n * ```\n */\nfunction Indicator({ className, style, ...props }: IndicatorProps) {\n\tconst ctx = useContext(ProgressContext);\n\tconst { max } = ctx;\n\tconst value = ctx.value === \"indeterminate\" ? 0 : ctx.value;\n\tconst translatePercent = ((max - value) / max) * 100;\n\n\treturn (\n\t\t<ProgressPrimitive.Indicator\n\t\t\tdata-slot=\"progress-bar-indicator\"\n\t\t\tclassName={cx(\"bg-accent-600 h-full w-full flex-1 transition-all\", className)}\n\t\t\tstyle={{ ...style, transform: `translateX(-${translatePercent}%)` }}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nIndicator.displayName = \"Indicator\";\n\n/**\n * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n *\n * A horizontal progress bar that shows the completion progress of a task.\n * Use this component for linear progress indication.\n *\n * @see https://mantle.ngrok.com/components/progress\n *\n * @example\n * Composition:\n * ```\n * ProgressBar.Root\n * └── ProgressBar.Indicator\n * ```\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * <ProgressBar.Root value={75} max={100}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Indeterminate progress\n * <ProgressBar.Root value=\"indeterminate\">\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n * ```\n */\nconst ProgressBar = {\n\t/**\n\t * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n\t *\n\t * A horizontal progress bar that shows the completion progress of a task.\n\t * Use this component for linear progress indication.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-bar\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * <ProgressBar.Root value={75} max={100}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * // Indeterminate progress\n\t * <ProgressBar.Root value=\"indeterminate\">\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Displays the progress indicator, which visually represents the completion progress of a task.\n\t *\n\t * The visual indicator that shows the actual progress within the progress bar.\n\t * This component should be used inside a ProgressBar.Root component.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * // Custom styled indicator\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator className=\"bg-success-600\" />\n\t * </ProgressBar.Root>\n\t * ```\n\t */\n\tIndicator,\n} as const;\n\nexport {\n\t//,\n\tProgressBar,\n};\n"],"mappings":"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"}

package/dist/radio-group.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{t as n}from"./is-input-Bh1rQhX3.js";import{Children as r,cloneElement as i,createContext as a,forwardRef as o,isValidElement as s,useContext as c,useRef as l}from"react";import u from"clsx";import{Fragment as d,jsx as f}from"react/jsx-runtime";import{Radio as p,RadioGroup as m}from"@headlessui/react";const h=o((e,t)=>f(m,{...e,ref:t}));h.displayName=`RadioGroup`;const g=a({autofocus:!1,checked:!1,disabled:!1,focus:!1,hover:!1}),_=o(({children:t,className:n,...r},i)=>f(p,{className:e(`group/radio cursor-pointer aria-disabled:cursor-default [&_label]:cursor-inherit flex gap-2 py-1 text-sm focus:outline-hidden`,n),as:`div`,...r,ref:i,children:e=>f(g.Provider,{value:e,children:t})}));_.displayName=`RadioItem`;const v=({checked:t,disabled:n,focus:r,hover:i})=>f(`span`,{className:e(`border-form flex size-4 items-center justify-center rounded-full border shrink-0`,n&&`cursor-default opacity-50`,t&&`border-accent-600 bg-accent-600`,r&&!n&&`border-accent-600 ring-focus-accent ring-4`,i&&`border-accent-600`),children:t&&f(`span`,{className:`size-2 rounded-full bg-white shrink-0`})}),y=({children:t,className:n,...r})=>{let i=c(g);return f(`div`,{className:e(`radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0`,n),...r,children:t==null?f(v,{...i}):typeof t==`function`?t(i):t})};y.displayName=`RadioIndicator`;const b=o(({className:e,...t},n)=>f(h,{className:u(`-space-y-px`,e),...t,ref:n}));b.displayName=`RadioGroupList`;const x=o(({children:t,className:n,...r},i)=>f(p,{as:`div`,className:e(`group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md`,`aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600`,`aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600`,`has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2`,n),ref:i,...r,children:e=>f(d,{children:f(g.Provider,{value:e,children:t})})}));x.displayName=`RadioListItem`;const S=o(({children:e,className:t,...n},r)=>f(p,{as:`div`,className:u(`group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md`,`aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600`,`aria-checked:z-1 aria-checked:border-accent-600/50 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-600 high-contrast:aria-checked:border-accent-600`,t),...n,ref:r,children:t=>f(d,{children:f(g.Provider,{value:t,children:e})})}));S.displayName=`RadioCard`;const C=({asChild:e=!1,children:n,className:r,...i})=>{let a=c(g);return f(e?t:`div`,{className:u(`min-w-0 flex-1`,a.disabled&&`opacity-50`,r),...i,children:n})};C.displayName=`RadioItemContent`;const w=o(({className:e,...t},n)=>f(h,{className:u(`flex flex-row flex-nowrap -space-x-px`,e),...t,ref:n}));w.displayName=`RadioButtonGroup`;const T=o(({children:t,className:n,...r},i)=>f(p,{as:`div`,className:e(`group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm`,`h-9`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md`,`not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600 aria-disabled:opacity-50`,`aria-checked:z-1 aria-checked:border-accent-600/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600`,`has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2`,n),ref:i,...r,children:e=>f(d,{children:f(g.Provider,{value:e,children:t})})}));T.displayName=`RadioButton`;const E=({children:e,onClick:t,onKeyDown:a,...o})=>{let u=l(null),d=c(g),p=r.only(e),m=d.disabled||!d.checked;return f(`div`,{role:`none`,ref:u,onKeyDown:e=>{if(d.disabled){e.stopPropagation(),e.preventDefault();return}switch(e.key){case`Enter`:case`Tab`:break;default:e.stopPropagation()}a?.(e)},onClick:e=>{if(d.disabled){e.stopPropagation(),e.preventDefault();return}let r=e.target;n(r)&&window.requestAnimationFrame(()=>{r.focus()}),t?.(e)},...o,children:s(p)?i(p,{disabled:d.disabled||p.props.disabled,tabIndex:m?-1:p.props.tabIndex}):null})};E.displayName=`RadioInputSandbox`;const D={Button:T,ButtonGroup:w,Card:S,Indicator:y,InputSandbox:E,Item:_,ItemContent:C,List:b,ListItem:x,Root:h};export{D as RadioGroup};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{t as n}from"./is-input-Bh1rQhX3.js";import{Children as r,cloneElement as i,createContext as a,forwardRef as o,isValidElement as s,useContext as c,useRef as l}from"react";import u from"clsx";import{Fragment as d,jsx as f}from"react/jsx-runtime";import{Radio as p,RadioGroup as m}from"@headlessui/react";const h=o((e,t)=>f(m,{"data-slot":`radio-group`,...e,ref:t}));h.displayName=`RadioGroup`;const g=a({autofocus:!1,checked:!1,disabled:!1,focus:!1,hover:!1}),_=o(({children:t,className:n,...r},i)=>f(p,{"data-slot":`radio-group-item`,className:e(`group/radio cursor-pointer aria-disabled:cursor-default [&_label]:cursor-inherit flex gap-2 py-1 text-sm focus:outline-hidden`,n),as:`div`,...r,ref:i,children:e=>f(g.Provider,{value:e,children:t})}));_.displayName=`RadioItem`;const v=({checked:t,disabled:n,focus:r,hover:i})=>f(`span`,{className:e(`border-form flex size-4 items-center justify-center rounded-full border shrink-0`,n&&`cursor-default opacity-50`,t&&`border-accent-600 bg-accent-600`,r&&!n&&`border-accent-600 ring-focus-accent ring-4`,i&&`border-accent-600`),children:t&&f(`span`,{className:`size-2 rounded-full bg-white shrink-0`})}),y=({children:t,className:n,...r})=>{let i=c(g);return f(`div`,{"data-slot":`radio-group-indicator`,className:e(`radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0`,n),...r,children:t==null?f(v,{...i}):typeof t==`function`?t(i):t})};y.displayName=`RadioIndicator`;const b=o(({className:e,...t},n)=>f(h,{"data-slot":`radio-group-list`,className:u(`-space-y-px`,e),...t,ref:n}));b.displayName=`RadioGroupList`;const x=o(({children:t,className:n,...r},i)=>f(p,{as:`div`,"data-slot":`radio-group-list-item`,className:e(`group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md`,`aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600`,`aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600`,`has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2`,n),ref:i,...r,children:e=>f(d,{children:f(g.Provider,{value:e,children:t})})}));x.displayName=`RadioListItem`;const S=o(({children:e,className:t,...n},r)=>f(p,{as:`div`,"data-slot":`radio-group-card`,className:u(`group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md`,`aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600`,`aria-checked:z-1 aria-checked:border-accent-600/50 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-600 high-contrast:aria-checked:border-accent-600`,t),...n,ref:r,children:t=>f(d,{children:f(g.Provider,{value:t,children:e})})}));S.displayName=`RadioCard`;const C=({asChild:e=!1,children:n,className:r,...i})=>{let a=c(g);return f(e?t:`div`,{"data-slot":`radio-group-item-content`,className:u(`min-w-0 flex-1`,a.disabled&&`opacity-50`,r),...i,children:n})};C.displayName=`RadioItemContent`;const w=o(({className:e,...t},n)=>f(h,{"data-slot":`radio-group-button-group`,className:u(`flex flex-row flex-nowrap -space-x-px`,e),...t,ref:n}));w.displayName=`RadioButtonGroup`;const T=o(({children:t,className:n,...r},i)=>f(p,{as:`div`,"data-slot":`radio-group-button`,className:e(`group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm`,`h-9`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md`,`not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600 aria-disabled:opacity-50`,`aria-checked:z-1 aria-checked:border-accent-600/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600`,`has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2`,n),ref:i,...r,children:e=>f(d,{children:f(g.Provider,{value:e,children:t})})}));T.displayName=`RadioButton`;const E=({children:e,onClick:t,onKeyDown:a,...o})=>{let u=l(null),d=c(g),p=r.only(e),m=d.disabled||!d.checked;return f(`div`,{role:`none`,"data-slot":`radio-group-input-sandbox`,ref:u,onKeyDown:e=>{if(d.disabled){e.stopPropagation(),e.preventDefault();return}switch(e.key){case`Enter`:case`Tab`:break;default:e.stopPropagation()}a?.(e)},onClick:e=>{if(d.disabled){e.stopPropagation(),e.preventDefault();return}let r=e.target;n(r)&&window.requestAnimationFrame(()=>{r.focus()}),t?.(e)},...o,children:s(p)?i(p,{disabled:d.disabled||p.props.disabled,tabIndex:m?-1:p.props.tabIndex}):null})};E.displayName=`RadioInputSandbox`;const D={Button:T,ButtonGroup:w,Card:S,Indicator:y,InputSandbox:E,Item:_,ItemContent:C,List:b,ListItem:x,Root:h};export{D as RadioGroup};
 //# sourceMappingURL=radio-group.js.map

package/dist/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","names":["HeadlessRadioGroup","HeadlessRadio","clsx"],"sources":["../src/components/radio-group/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { Radio as HeadlessRadio, RadioGroup as HeadlessRadioGroup } from \"@headlessui/react\";\nimport type {\n\tRadioGroupProps as HeadlessRadioGroupProps,\n\tRadioProps as HeadlessRadioProps,\n} from \"@headlessui/react\";\nimport clsx from \"clsx\";\nimport {\n\tChildren,\n\tcloneElement,\n\tcreateContext,\n\tforwardRef,\n\tisValidElement,\n\tuseContext,\n\tuseRef,\n} from \"react\";\nimport type { ComponentRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { isInput } from \"../input/is-input.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype RadioGroupProps = PropsWithChildren<Omit<HeadlessRadioGroupProps, \"as\" | \"children\">>;\n\n/**\n * A group of radio items. It manages the state of the children radios. Unstyled and simple.\n * Used as the root component for grouping related radio items where only one can be selected.\n *\n * @see https://mantle.ngrok.com/components/radio-group#radiogrouproot\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <RadioGroup.Item value=\"option1\">\n *     <RadioGroup.Indicator />\n *     <span>Option 1</span>\n *   </RadioGroup.Item>\n *   <RadioGroup.Item value=\"option2\">\n *     <RadioGroup.Indicator />\n *     <span>Option 2</span>\n *   </RadioGroup.Item>\n * </RadioGroup>\n * ```\n */\nconst Root = forwardRef<ComponentRef<typeof HeadlessRadioGroup>, RadioGroupProps>((props, ref) => (\n\t<HeadlessRadioGroup {...props} ref={ref} />\n));\nRoot.displayName = \"RadioGroup\";\n\n/**\n * The shape of the radio state context.\n */\ntype RadioStateContextValue = {\n\tautofocus: boolean;\n\tchecked: boolean;\n\tdisabled: boolean;\n\tfocus: boolean;\n\thover: boolean;\n};\n\n/**\n * The radio state. It's used to pass the state of the radio to its children components.\n * It's used internally by the radio components to manage the state/style of the radio items.\n * Used in place of css classes to avoid specificity issues and slightly improve performance.\n */\nconst RadioStateContext = createContext<RadioStateContextValue>({\n\tautofocus: false,\n\tchecked: false,\n\tdisabled: false,\n\tfocus: false,\n\thover: false,\n});\n\ntype RadioItemProps = Omit<HeadlessRadioProps, \"children\"> & PropsWithChildren;\n\n/**\n * A simple radio item that can be used inside a radio group. The \"conventional\" use-case.\n * Must be a child of `RadioGroup`.\n *\n * @see https://mantle.ngrok.com/components/radio-group#radiogroupitem\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <RadioGroup.Item value=\"option1\">\n *     <RadioGroup.Indicator />\n *     <span>Option 1</span>\n *   </RadioGroup.Item>\n * </RadioGroup>\n * ```\n */\nconst Item = forwardRef<ComponentRef<\"div\">, RadioItemProps>(\n\t({ children, className, ...props }, ref) => (\n\t\t<HeadlessRadio\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio cursor-pointer aria-disabled:cursor-default [&_label]:cursor-inherit flex gap-2 py-1 text-sm focus:outline-hidden\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tas=\"div\"\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{(ctx) => <RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>}\n\t\t</HeadlessRadio>\n\t),\n);\nItem.displayName = \"RadioItem\";\n\ntype RadioIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n\tchildren?: ReactNode | ((context: RadioStateContextValue) => ReactNode);\n};\n\n/**\n * The default radio indicator.\n * @private\n */\nconst DefaultRadioIndicator = ({ checked, disabled, focus, hover }: RadioStateContextValue) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"border-form flex size-4 items-center justify-center rounded-full border shrink-0\",\n\t\t\tdisabled && \"cursor-default opacity-50\",\n\t\t\tchecked && \"border-accent-600 bg-accent-600\",\n\t\t\tfocus && !disabled && \"border-accent-600 ring-focus-accent ring-4\",\n\t\t\thover && \"border-accent-600\",\n\t\t)}\n\t>\n\t\t{checked && <span className=\"size-2 rounded-full bg-white shrink-0\" />}\n\t</span>\n);\n\n/**\n * The selection indicator for any radio item.\n * Use it as a child of `RadioGroup.Item`, `RadioGroup.ListItem`, or `RadioGroup.Card`.\n * By default, it's a circle that changes color when checked.\n * You can customize the indicator by passing children:\n * - a different component\n * - a render-props function that receives the radio state context and should return a component.\n *\n * @see https://mantle.ngrok.com/components/radio-group#radiogroupindicator\n *\n * @example\n * ```tsx\n * <RadioGroup.Item value=\"option1\">\n *   <RadioGroup.Indicator />\n *   <span>Option 1</span>\n * </RadioGroup.Item>\n * ```\n */\nconst Indicator = ({ children, className, ...props }: RadioIndicatorProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx(\n\t\t\t\t\"radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children == null ? (\n\t\t\t\t<DefaultRadioIndicator {...ctx} />\n\t\t\t) : typeof children === \"function\" ? (\n\t\t\t\tchildren(ctx)\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</div>\n\t);\n};\nIndicator.displayName = \"RadioIndicator\";\n\n/**\n * A group of radio list items. Use RadioGroup.ListItem as direct children.\n */\nconst List = forwardRef<ComponentRef<typeof Root>, RadioGroupProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn <Root className={clsx(\"-space-y-px\", className)} {...props} ref={ref} />;\n\t},\n);\nList.displayName = \"RadioGroupList\";\n\ntype RadioListItemProps = RadioItemProps;\n\n/**\n * A radio list item that is used inside a `RadioGroup.List`.\n */\nconst ListItem = forwardRef<ComponentRef<\"div\">, RadioListItemProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm\",\n\t\t\t\t\t\"cursor-pointer aria-disabled:cursor-default focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\t\"aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\t\tclassName,\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{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nListItem.displayName = \"RadioListItem\";\n\ntype RadioItemContentProps = HTMLAttributes<HTMLDivElement> & WithAsChild;\n\ntype RadioCardProps = RadioItemProps;\n\n/**\n * A radio card item. Use it as a child of `RadioGroup`\n */\nconst Card = forwardRef<ComponentRef<\"div\">, RadioCardProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm\",\n\t\t\t\t\t\"cursor-pointer aria-disabled:cursor-default focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\t\"aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-600/50 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-600 high-contrast:aria-checked:border-accent-600\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nCard.displayName = \"RadioCard\";\n\n/**\n * The content of any radio item. Use it to wrap any labels, descriptions, or content of a radio item.\n * Use it as a child of `RadioGroup.Item`, `RadioGroup.ListItem`, or `RadioGroup.Card`.\n */\nconst ItemContent = ({ asChild = false, children, className, ...props }: RadioItemContentProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={clsx(\"min-w-0 flex-1\", ctx.disabled && \"opacity-50\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\nItemContent.displayName = \"RadioItemContent\";\n\n/**\n * An inline group of radio buttons. Use RadioGroup.Button as direct children.\n */\nconst ButtonGroup = forwardRef<ComponentRef<typeof Root>, RadioGroupProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<Root\n\t\t\t\tclassName={clsx(\"flex flex-row flex-nowrap -space-x-px\", className)}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t);\n\t},\n);\nButtonGroup.displayName = \"RadioButtonGroup\";\n\ntype RadioButtonProps = RadioItemProps;\n\n/**\n * A radio button that is used inside a `RadioGroup.ButtonGroup`.\n */\nconst Button = forwardRef<ComponentRef<\"div\">, RadioButtonProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm\",\n\t\t\t\t\t\"h-9\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"cursor-pointer aria-disabled:cursor-default focus:outline-hidden\",\n\t\t\t\t\t\"first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md\",\n\t\t\t\t\t\"not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600 aria-disabled:opacity-50\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-600/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\t\tclassName,\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{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nButton.displayName = \"RadioButton\";\n\ntype RadioInputSandboxProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * A sandbox container for input elements composed within radio group items.\n * It prevents the default behavior of the radio group when clicking on the input element or accepting keyboard input.\n */\nconst InputSandbox = ({ children, onClick, onKeyDown, ...props }: RadioInputSandboxProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst ctx = useContext(RadioStateContext);\n\n\tconst singleChild = Children.only(children);\n\n\t// Prevent the child input from receiving focus when the parent radio group item is disabled or unchecked.\n\tconst shouldPreventTabIndex = ctx.disabled || !ctx.checked;\n\n\treturn (\n\t\t<div\n\t\t\trole=\"none\"\n\t\t\tref={ref}\n\t\t\tonKeyDown={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tswitch (event.key) {\n\t\t\t\t\tcase \"Enter\":\n\t\t\t\t\tcase \"Tab\":\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t}\n\t\t\t\tonKeyDown?.(event);\n\t\t\t}}\n\t\t\tonClick={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst target = event.target;\n\t\t\t\tif (isInput(target)) {\n\t\t\t\t\twindow.requestAnimationFrame(() => {\n\t\t\t\t\t\ttarget.focus();\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t>\n\t\t\t{isValidElement<HTMLInputElement>(singleChild)\n\t\t\t\t? cloneElement(singleChild, {\n\t\t\t\t\t\tdisabled: ctx.disabled || singleChild.props.disabled,\n\t\t\t\t\t\ttabIndex: shouldPreventTabIndex ? -1 : singleChild.props.tabIndex,\n\t\t\t\t\t})\n\t\t\t\t: null}\n\t\t</div>\n\t);\n};\nInputSandbox.displayName = \"RadioInputSandbox\";\n\n/**\n * A group of radio items. It manages the state of the children radios.\n *\n * @see https://mantle.ngrok.com/components/radio-group#radiogrouproot\n *\n * @example\n * Composition:\n * ```\n * # Default radios\n * RadioGroup.Root\n * └── RadioGroup.Item\n *     ├── RadioGroup.Indicator\n *     └── RadioGroup.ItemContent\n *\n * # List layout with descriptions\n * RadioGroup.List\n * └── RadioGroup.ListItem\n *     ├── RadioGroup.Indicator\n *     └── RadioGroup.ItemContent\n *\n * # Segmented button group\n * RadioGroup.ButtonGroup\n * └── RadioGroup.Button\n *\n * # Card-style radios\n * RadioGroup.Root\n * └── RadioGroup.Card\n *     └── RadioGroup.Indicator\n * ```\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <RadioGroup.Item value=\"option1\">\n *     <RadioGroup.Indicator />\n *     <span>Option 1</span>\n *   </RadioGroup.Item>\n *   <RadioGroup.Item value=\"option2\">\n *     <RadioGroup.Indicator />\n *     <span>Option 2</span>\n *   </RadioGroup.Item>\n * </RadioGroup>\n * ```\n */\nconst RadioGroup = {\n\t/**\n\t * A radio button that is used inside a RadioGroup.ButtonGroup for inline grouped radio options.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"option1\">\n\t *   <RadioGroup.ButtonGroup>\n\t *     <RadioGroup.Button value=\"option1\">Option 1</RadioGroup.Button>\n\t *     <RadioGroup.Button value=\"option2\">Option 2</RadioGroup.Button>\n\t *     <RadioGroup.Button value=\"option3\">Option 3</RadioGroup.Button>\n\t *   </RadioGroup.ButtonGroup>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tButton,\n\t/**\n\t * An inline group of radio buttons. Use RadioGroup.Button as direct children for horizontal radio layouts.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupbuttongroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"small\">\n\t *   <Label htmlFor=\"size-group\">Size</Label>\n\t *   <RadioGroup.ButtonGroup>\n\t *     <RadioGroup.Button value=\"small\">Small</RadioGroup.Button>\n\t *     <RadioGroup.Button value=\"medium\">Medium</RadioGroup.Button>\n\t *     <RadioGroup.Button value=\"large\">Large</RadioGroup.Button>\n\t *   </RadioGroup.ButtonGroup>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tButtonGroup,\n\t/**\n\t * A radio card item with enhanced styling. Use it as a child of RadioGroup for card-based radio options.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupcard\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"basic\">\n\t *   <div className=\"space-y-3\">\n\t *     <RadioGroup.Card value=\"basic\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text weight=\"strong\">Basic Plan</Text>\n\t *         <Text>$10/month</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.Card>\n\t *     <RadioGroup.Card value=\"pro\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text weight=\"strong\">Pro Plan</Text>\n\t *         <Text>$25/month</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.Card>\n\t *   </div>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tCard,\n\t/**\n\t * The selection indicator for any radio item. Shows the checked state with customizable appearance.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupindicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Item value=\"option1\">\n\t *   <RadioGroup.Indicator />\n\t *   <span>Option 1</span>\n\t * </RadioGroup.Item>\n\t * ```\n\t */\n\tIndicator,\n\t/**\n\t * A sandbox container for input elements composed within radio group items. Prevents default radio behavior.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupinputsandbox\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"custom\">\n\t *   <RadioGroup.Item value=\"custom\">\n\t *     <RadioGroup.Indicator />\n\t *     <RadioGroup.ItemContent>\n\t *       <Text>Custom amount</Text>\n\t *       <RadioGroup.InputSandbox>\n\t *         <Input type=\"number\" placeholder=\"Enter amount\" />\n\t *       </RadioGroup.InputSandbox>\n\t *     </RadioGroup.ItemContent>\n\t *   </RadioGroup.Item>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tInputSandbox,\n\t/**\n\t * A simple radio item that can be used inside a radio group. The conventional use-case for basic radio options.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Item value=\"option1\">\n\t *   <RadioGroup.Indicator />\n\t *   <span>Option 1</span>\n\t * </RadioGroup.Item>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * The content wrapper for any radio item. Use it to wrap labels, descriptions, or content of a radio item.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupitemcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"option1\">\n\t *   <RadioGroup.Item value=\"option1\">\n\t *     <RadioGroup.Indicator />\n\t *     <RadioGroup.ItemContent>\n\t *       <Text weight=\"strong\">Option 1</Text>\n\t *       <Text size=\"sm\">Description for option 1</Text>\n\t *     </RadioGroup.ItemContent>\n\t *   </RadioGroup.Item>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tItemContent,\n\t/**\n\t * A group of radio list items with connected borders. Use RadioGroup.ListItem as direct children.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogrouplist\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"option1\">\n\t *   <RadioGroup.List>\n\t *     <RadioGroup.ListItem value=\"option1\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text>Option 1</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.ListItem>\n\t *     <RadioGroup.ListItem value=\"option2\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text>Option 2</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.ListItem>\n\t *   </RadioGroup.List>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tList,\n\t/**\n\t * A radio list item that is used inside a RadioGroup.List for connected list-style radio options.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogrouplistitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"item1\">\n\t *   <RadioGroup.List>\n\t *     <RadioGroup.ListItem value=\"item1\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text>List Item 1</Text>\n\t *         <Text size=\"sm\" className=\"text-muted\">First option</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.ListItem>\n\t *     <RadioGroup.ListItem value=\"item2\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text>List Item 2</Text>\n\t *         <Text size=\"sm\" className=\"text-muted\">Second option</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.ListItem>\n\t *   </RadioGroup.List>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tListItem,\n\t/**\n\t * The root radio group component. Manages the state of the children radios where only one can be selected.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogrouproot\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root value={value} onValueChange={setValue}>\n\t *   <RadioGroup.Item value=\"option1\">\n\t *     <RadioGroup.Indicator />\n\t *     <span>Option 1</span>\n\t *   </RadioGroup.Item>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tRoot,\n} as const;\n\nexport {\n\t//\n\tRadioGroup,\n};\n"],"mappings":"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"}
+{"version":3,"file":"radio-group.js","names":["HeadlessRadioGroup","HeadlessRadio","clsx"],"sources":["../src/components/radio-group/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { Radio as HeadlessRadio, RadioGroup as HeadlessRadioGroup } from \"@headlessui/react\";\nimport type {\n\tRadioGroupProps as HeadlessRadioGroupProps,\n\tRadioProps as HeadlessRadioProps,\n} from \"@headlessui/react\";\nimport clsx from \"clsx\";\nimport {\n\tChildren,\n\tcloneElement,\n\tcreateContext,\n\tforwardRef,\n\tisValidElement,\n\tuseContext,\n\tuseRef,\n} from \"react\";\nimport type { ComponentRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { isInput } from \"../input/is-input.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype RadioGroupProps = PropsWithChildren<Omit<HeadlessRadioGroupProps, \"as\" | \"children\">>;\n\n/**\n * A group of radio items. It manages the state of the children radios. Unstyled and simple.\n * Used as the root component for grouping related radio items where only one can be selected.\n *\n * @see https://mantle.ngrok.com/components/radio-group#radiogrouproot\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <RadioGroup.Item value=\"option1\">\n *     <RadioGroup.Indicator />\n *     <span>Option 1</span>\n *   </RadioGroup.Item>\n *   <RadioGroup.Item value=\"option2\">\n *     <RadioGroup.Indicator />\n *     <span>Option 2</span>\n *   </RadioGroup.Item>\n * </RadioGroup>\n * ```\n */\nconst Root = forwardRef<ComponentRef<typeof HeadlessRadioGroup>, RadioGroupProps>((props, ref) => (\n\t<HeadlessRadioGroup data-slot=\"radio-group\" {...props} ref={ref} />\n));\nRoot.displayName = \"RadioGroup\";\n\n/**\n * The shape of the radio state context.\n */\ntype RadioStateContextValue = {\n\tautofocus: boolean;\n\tchecked: boolean;\n\tdisabled: boolean;\n\tfocus: boolean;\n\thover: boolean;\n};\n\n/**\n * The radio state. It's used to pass the state of the radio to its children components.\n * It's used internally by the radio components to manage the state/style of the radio items.\n * Used in place of css classes to avoid specificity issues and slightly improve performance.\n */\nconst RadioStateContext = createContext<RadioStateContextValue>({\n\tautofocus: false,\n\tchecked: false,\n\tdisabled: false,\n\tfocus: false,\n\thover: false,\n});\n\ntype RadioItemProps = Omit<HeadlessRadioProps, \"children\"> & PropsWithChildren;\n\n/**\n * A simple radio item that can be used inside a radio group. The \"conventional\" use-case.\n * Must be a child of `RadioGroup`.\n *\n * @see https://mantle.ngrok.com/components/radio-group#radiogroupitem\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <RadioGroup.Item value=\"option1\">\n *     <RadioGroup.Indicator />\n *     <span>Option 1</span>\n *   </RadioGroup.Item>\n * </RadioGroup>\n * ```\n */\nconst Item = forwardRef<ComponentRef<\"div\">, RadioItemProps>(\n\t({ children, className, ...props }, ref) => (\n\t\t<HeadlessRadio\n\t\t\tdata-slot=\"radio-group-item\"\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio cursor-pointer aria-disabled:cursor-default [&_label]:cursor-inherit flex gap-2 py-1 text-sm focus:outline-hidden\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tas=\"div\"\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{(ctx) => <RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>}\n\t\t</HeadlessRadio>\n\t),\n);\nItem.displayName = \"RadioItem\";\n\ntype RadioIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n\tchildren?: ReactNode | ((context: RadioStateContextValue) => ReactNode);\n};\n\n/**\n * The default radio indicator.\n * @private\n */\nconst DefaultRadioIndicator = ({ checked, disabled, focus, hover }: RadioStateContextValue) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"border-form flex size-4 items-center justify-center rounded-full border shrink-0\",\n\t\t\tdisabled && \"cursor-default opacity-50\",\n\t\t\tchecked && \"border-accent-600 bg-accent-600\",\n\t\t\tfocus && !disabled && \"border-accent-600 ring-focus-accent ring-4\",\n\t\t\thover && \"border-accent-600\",\n\t\t)}\n\t>\n\t\t{checked && <span className=\"size-2 rounded-full bg-white shrink-0\" />}\n\t</span>\n);\n\n/**\n * The selection indicator for any radio item.\n * Use it as a child of `RadioGroup.Item`, `RadioGroup.ListItem`, or `RadioGroup.Card`.\n * By default, it's a circle that changes color when checked.\n * You can customize the indicator by passing children:\n * - a different component\n * - a render-props function that receives the radio state context and should return a component.\n *\n * @see https://mantle.ngrok.com/components/radio-group#radiogroupindicator\n *\n * @example\n * ```tsx\n * <RadioGroup.Item value=\"option1\">\n *   <RadioGroup.Indicator />\n *   <span>Option 1</span>\n * </RadioGroup.Item>\n * ```\n */\nconst Indicator = ({ children, className, ...props }: RadioIndicatorProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"radio-group-indicator\"\n\t\t\tclassName={cx(\n\t\t\t\t\"radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children == null ? (\n\t\t\t\t<DefaultRadioIndicator {...ctx} />\n\t\t\t) : typeof children === \"function\" ? (\n\t\t\t\tchildren(ctx)\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</div>\n\t);\n};\nIndicator.displayName = \"RadioIndicator\";\n\n/**\n * A group of radio list items. Use RadioGroup.ListItem as direct children.\n */\nconst List = forwardRef<ComponentRef<typeof Root>, RadioGroupProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<Root\n\t\t\t\tdata-slot=\"radio-group-list\"\n\t\t\t\tclassName={clsx(\"-space-y-px\", className)}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t);\n\t},\n);\nList.displayName = \"RadioGroupList\";\n\ntype RadioListItemProps = RadioItemProps;\n\n/**\n * A radio list item that is used inside a `RadioGroup.List`.\n */\nconst ListItem = forwardRef<ComponentRef<\"div\">, RadioListItemProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tdata-slot=\"radio-group-list-item\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm\",\n\t\t\t\t\t\"cursor-pointer aria-disabled:cursor-default focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\t\"aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\t\tclassName,\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{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nListItem.displayName = \"RadioListItem\";\n\ntype RadioItemContentProps = HTMLAttributes<HTMLDivElement> & WithAsChild;\n\ntype RadioCardProps = RadioItemProps;\n\n/**\n * A radio card item. Use it as a child of `RadioGroup`\n */\nconst Card = forwardRef<ComponentRef<\"div\">, RadioCardProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tdata-slot=\"radio-group-card\"\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm\",\n\t\t\t\t\t\"cursor-pointer aria-disabled:cursor-default focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\t\"aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-600/50 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-600 high-contrast:aria-checked:border-accent-600\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nCard.displayName = \"RadioCard\";\n\n/**\n * The content of any radio item. Use it to wrap any labels, descriptions, or content of a radio item.\n * Use it as a child of `RadioGroup.Item`, `RadioGroup.ListItem`, or `RadioGroup.Card`.\n */\nconst ItemContent = ({ asChild = false, children, className, ...props }: RadioItemContentProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tdata-slot=\"radio-group-item-content\"\n\t\t\tclassName={clsx(\"min-w-0 flex-1\", ctx.disabled && \"opacity-50\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\nItemContent.displayName = \"RadioItemContent\";\n\n/**\n * An inline group of radio buttons. Use RadioGroup.Button as direct children.\n */\nconst ButtonGroup = forwardRef<ComponentRef<typeof Root>, RadioGroupProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<Root\n\t\t\t\tdata-slot=\"radio-group-button-group\"\n\t\t\t\tclassName={clsx(\"flex flex-row flex-nowrap -space-x-px\", className)}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t);\n\t},\n);\nButtonGroup.displayName = \"RadioButtonGroup\";\n\ntype RadioButtonProps = RadioItemProps;\n\n/**\n * A radio button that is used inside a `RadioGroup.ButtonGroup`.\n */\nconst Button = forwardRef<ComponentRef<\"div\">, RadioButtonProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tdata-slot=\"radio-group-button\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm\",\n\t\t\t\t\t\"h-9\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"cursor-pointer aria-disabled:cursor-default focus:outline-hidden\",\n\t\t\t\t\t\"first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md\",\n\t\t\t\t\t\"not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600 aria-disabled:opacity-50\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-600/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\t\tclassName,\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{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nButton.displayName = \"RadioButton\";\n\ntype RadioInputSandboxProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * A sandbox container for input elements composed within radio group items.\n * It prevents the default behavior of the radio group when clicking on the input element or accepting keyboard input.\n */\nconst InputSandbox = ({ children, onClick, onKeyDown, ...props }: RadioInputSandboxProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst ctx = useContext(RadioStateContext);\n\n\tconst singleChild = Children.only(children);\n\n\t// Prevent the child input from receiving focus when the parent radio group item is disabled or unchecked.\n\tconst shouldPreventTabIndex = ctx.disabled || !ctx.checked;\n\n\treturn (\n\t\t<div\n\t\t\trole=\"none\"\n\t\t\tdata-slot=\"radio-group-input-sandbox\"\n\t\t\tref={ref}\n\t\t\tonKeyDown={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tswitch (event.key) {\n\t\t\t\t\tcase \"Enter\":\n\t\t\t\t\tcase \"Tab\":\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t}\n\t\t\t\tonKeyDown?.(event);\n\t\t\t}}\n\t\t\tonClick={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst target = event.target;\n\t\t\t\tif (isInput(target)) {\n\t\t\t\t\twindow.requestAnimationFrame(() => {\n\t\t\t\t\t\ttarget.focus();\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t>\n\t\t\t{isValidElement<HTMLInputElement>(singleChild)\n\t\t\t\t? cloneElement(singleChild, {\n\t\t\t\t\t\tdisabled: ctx.disabled || singleChild.props.disabled,\n\t\t\t\t\t\ttabIndex: shouldPreventTabIndex ? -1 : singleChild.props.tabIndex,\n\t\t\t\t\t})\n\t\t\t\t: null}\n\t\t</div>\n\t);\n};\nInputSandbox.displayName = \"RadioInputSandbox\";\n\n/**\n * A group of radio items. It manages the state of the children radios.\n *\n * @see https://mantle.ngrok.com/components/radio-group#radiogrouproot\n *\n * @example\n * Composition:\n * ```\n * # Default radios\n * RadioGroup.Root\n * └── RadioGroup.Item\n *     ├── RadioGroup.Indicator\n *     └── RadioGroup.ItemContent\n *\n * # List layout with descriptions\n * RadioGroup.List\n * └── RadioGroup.ListItem\n *     ├── RadioGroup.Indicator\n *     └── RadioGroup.ItemContent\n *\n * # Segmented button group\n * RadioGroup.ButtonGroup\n * └── RadioGroup.Button\n *\n * # Card-style radios\n * RadioGroup.Root\n * └── RadioGroup.Card\n *     └── RadioGroup.Indicator\n * ```\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <RadioGroup.Item value=\"option1\">\n *     <RadioGroup.Indicator />\n *     <span>Option 1</span>\n *   </RadioGroup.Item>\n *   <RadioGroup.Item value=\"option2\">\n *     <RadioGroup.Indicator />\n *     <span>Option 2</span>\n *   </RadioGroup.Item>\n * </RadioGroup>\n * ```\n */\nconst RadioGroup = {\n\t/**\n\t * A radio button that is used inside a RadioGroup.ButtonGroup for inline grouped radio options.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"option1\">\n\t *   <RadioGroup.ButtonGroup>\n\t *     <RadioGroup.Button value=\"option1\">Option 1</RadioGroup.Button>\n\t *     <RadioGroup.Button value=\"option2\">Option 2</RadioGroup.Button>\n\t *     <RadioGroup.Button value=\"option3\">Option 3</RadioGroup.Button>\n\t *   </RadioGroup.ButtonGroup>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tButton,\n\t/**\n\t * An inline group of radio buttons. Use RadioGroup.Button as direct children for horizontal radio layouts.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupbuttongroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"small\">\n\t *   <Label htmlFor=\"size-group\">Size</Label>\n\t *   <RadioGroup.ButtonGroup>\n\t *     <RadioGroup.Button value=\"small\">Small</RadioGroup.Button>\n\t *     <RadioGroup.Button value=\"medium\">Medium</RadioGroup.Button>\n\t *     <RadioGroup.Button value=\"large\">Large</RadioGroup.Button>\n\t *   </RadioGroup.ButtonGroup>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tButtonGroup,\n\t/**\n\t * A radio card item with enhanced styling. Use it as a child of RadioGroup for card-based radio options.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupcard\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"basic\">\n\t *   <div className=\"space-y-3\">\n\t *     <RadioGroup.Card value=\"basic\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text weight=\"strong\">Basic Plan</Text>\n\t *         <Text>$10/month</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.Card>\n\t *     <RadioGroup.Card value=\"pro\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text weight=\"strong\">Pro Plan</Text>\n\t *         <Text>$25/month</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.Card>\n\t *   </div>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tCard,\n\t/**\n\t * The selection indicator for any radio item. Shows the checked state with customizable appearance.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupindicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Item value=\"option1\">\n\t *   <RadioGroup.Indicator />\n\t *   <span>Option 1</span>\n\t * </RadioGroup.Item>\n\t * ```\n\t */\n\tIndicator,\n\t/**\n\t * A sandbox container for input elements composed within radio group items. Prevents default radio behavior.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupinputsandbox\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"custom\">\n\t *   <RadioGroup.Item value=\"custom\">\n\t *     <RadioGroup.Indicator />\n\t *     <RadioGroup.ItemContent>\n\t *       <Text>Custom amount</Text>\n\t *       <RadioGroup.InputSandbox>\n\t *         <Input type=\"number\" placeholder=\"Enter amount\" />\n\t *       </RadioGroup.InputSandbox>\n\t *     </RadioGroup.ItemContent>\n\t *   </RadioGroup.Item>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tInputSandbox,\n\t/**\n\t * A simple radio item that can be used inside a radio group. The conventional use-case for basic radio options.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Item value=\"option1\">\n\t *   <RadioGroup.Indicator />\n\t *   <span>Option 1</span>\n\t * </RadioGroup.Item>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * The content wrapper for any radio item. Use it to wrap labels, descriptions, or content of a radio item.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupitemcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"option1\">\n\t *   <RadioGroup.Item value=\"option1\">\n\t *     <RadioGroup.Indicator />\n\t *     <RadioGroup.ItemContent>\n\t *       <Text weight=\"strong\">Option 1</Text>\n\t *       <Text size=\"sm\">Description for option 1</Text>\n\t *     </RadioGroup.ItemContent>\n\t *   </RadioGroup.Item>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tItemContent,\n\t/**\n\t * A group of radio list items with connected borders. Use RadioGroup.ListItem as direct children.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogrouplist\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"option1\">\n\t *   <RadioGroup.List>\n\t *     <RadioGroup.ListItem value=\"option1\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text>Option 1</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.ListItem>\n\t *     <RadioGroup.ListItem value=\"option2\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text>Option 2</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.ListItem>\n\t *   </RadioGroup.List>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tList,\n\t/**\n\t * A radio list item that is used inside a RadioGroup.List for connected list-style radio options.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogrouplistitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"item1\">\n\t *   <RadioGroup.List>\n\t *     <RadioGroup.ListItem value=\"item1\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text>List Item 1</Text>\n\t *         <Text size=\"sm\" className=\"text-muted\">First option</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.ListItem>\n\t *     <RadioGroup.ListItem value=\"item2\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text>List Item 2</Text>\n\t *         <Text size=\"sm\" className=\"text-muted\">Second option</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.ListItem>\n\t *   </RadioGroup.List>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tListItem,\n\t/**\n\t * The root radio group component. Manages the state of the children radios where only one can be selected.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogrouproot\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root value={value} onValueChange={setValue}>\n\t *   <RadioGroup.Item value=\"option1\">\n\t *     <RadioGroup.Indicator />\n\t *     <span>Option 1</span>\n\t *   </RadioGroup.Item>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tRoot,\n} as const;\n\nexport {\n\t//\n\tRadioGroup,\n};\n"],"mappings":"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"}

package/dist/select-LJmfG--I.js

@@ -0,0 +1,2 @@
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-bWc5yC3-.js";import{t as n}from"./compose-refs-DFIaEnQH.js";import{n as r}from"./separator-DyOGgFCs.js";import{CaretDownIcon as i}from"@phosphor-icons/react/CaretDown";import{createContext as a,forwardRef as o,useContext as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{CheckIcon as u}from"@phosphor-icons/react/Check";import{CaretUpIcon as d}from"@phosphor-icons/react/CaretUp";import*as f from"@radix-ui/react-select";const p=a({}),m=o(({"aria-invalid":e,children:t,id:n,validation:r,onBlur:i,onValueChange:a,onChange:o,...s},l)=>c(f.Root,{...s,onValueChange:e=>{o?.(e),a?.(e)},children:c(p.Provider,{value:{"aria-invalid":e,id:n,validation:r,onBlur:i,ref:l},children:t})}));m.displayName=`Select`;const h=o(({className:t,...n},r)=>c(f.Group,{ref:r,"data-slot":`select-group`,className:e(`space-y-px`,t),...n}));h.displayName=`SelectGroup`;const g=f.Value;g.displayName=`SelectValue`;const _=o(({"aria-invalid":r,className:a,children:o,id:u,validation:d,...m},h)=>{let g=s(p),_=g[`aria-invalid`]??r,v=_!=null&&_!==`false`,y=g.validation??d,b=v?`error`:typeof y==`function`?y():y,x=_??b===`error`,S=g.id??u;return l(f.Trigger,{"aria-invalid":x,"data-slot":`select-trigger`,className:e(`h-9 text-sm`,`border-form bg-form text-strong font-sans placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left`,`hover:border-neutral-400`,`focus:outline-hidden focus:ring-4 aria-expanded:ring-4`,`focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger`,a),"data-validation":b||void 0,id:S,ref:n(h,g.ref),...m,children:[o,c(f.Icon,{asChild:!0,children:c(t,{svg:c(i,{weight:`bold`}),className:`size-4`})})]})});_.displayName=`SelectTrigger`;const v=o(({className:n,...r},i)=>c(f.ScrollUpButton,{ref:i,className:e(`flex cursor-default items-center justify-center py-1`,n),...r,children:c(t,{svg:c(d,{weight:`bold`}),className:`size-4`})}));v.displayName=`SelectScrollUpButton`;const y=o(({className:n,...r},a)=>c(f.ScrollDownButton,{ref:a,className:e(`flex cursor-default items-center justify-center py-1`,n),...r,children:c(t,{svg:c(i,{weight:`bold`}),className:`size-4`})}));y.displayName=`SelectScrollDownButton`;const b=o(({className:t,children:n,position:r=`popper`,width:i=`trigger`,...a},o)=>c(f.Portal,{children:l(f.Content,{ref:o,"data-slot":`select-content`,className:e(`border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md`,`bg-popover font-sans`,r===`popper`&&`data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-(--radix-select-content-available-height)`,i===`trigger`&&`w-(--radix-select-trigger-width)`,t),position:r,...a,children:[c(v,{}),c(f.Viewport,{className:e(`p-1 space-y-px`,r===`popper`&&`h-(--radix-select-trigger-height) w-full`),children:n}),c(y,{})]})}));b.displayName=`SelectContent`;const x=o(({className:t,...n},r)=>c(f.Label,{ref:r,"data-slot":`select-label`,className:e(`px-2 py-1.5 text-sm font-medium`,t),...n}));x.displayName=`SelectLabel`;const S=o(({className:n,children:r,icon:i,...a},o)=>l(f.Item,{ref:o,"data-slot":`select-item`,className:e(`relative flex gap-2 w-full cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-8 text-strong text-sm outline-hidden`,`focus:bg-active-menu-item`,`data-disabled:pointer-events-none data-disabled:opacity-50`,`data-state-checked:bg-selected-menu-item`,`focus:data-state-checked:bg-active-selected-menu-item`,n),...a,children:[i&&c(t,{svg:i}),c(f.ItemText,{children:r}),c(f.ItemIndicator,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:c(t,{svg:c(u,{weight:`bold`}),className:`size-4 text-accent-600`})})]}));S.displayName=`SelectItem`;const C=o(({className:t,...n},i)=>c(r,{ref:i,"data-slot":`select-separator`,className:e(`-mx-1 my-1 h-px w-auto`,t),...n}));C.displayName=`SelectSeparator`;const w={Root:m,Content:b,Group:h,Item:S,Label:x,Separator:C,Trigger:_,Value:g};export{w as t};
+//# sourceMappingURL=select-LJmfG--I.js.map

package/dist/select-LJmfG--I.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-LJmfG--I.js","names":[],"sources":["../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { CaretUpIcon } from \"@phosphor-icons/react/CaretUp\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tFocusEvent,\n\tPropsWithChildren,\n\tReactNode,\n\tRef,\n\tSelectHTMLAttributes,\n} from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport type { WithValidation } from \"../input/types.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, \"aria-invalid\">;\ntype SelectContextType = WithValidation &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Ref for the trigger button.\n\t\t */\n\t\tref?: Ref<HTMLButtonElement>;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t} & Pick<ComponentProps<\"button\">, \"id\">;\n\nconst SelectContext = createContext<SelectContextType>({});\n\ntype SelectProps = PropsWithChildren & {\n\tautoComplete?: string;\n\tdefaultOpen?: boolean;\n\tdefaultValue?: string;\n\tdir?: \"ltr\" | \"rtl\";\n\tdisabled?: boolean;\n\tform?: string;\n\tid?: string;\n\tname?: string;\n\t/**\n\t * Event handler called when Select blurs.\n\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t */\n\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t/**\n\t * Event handler called when the value changes.\n\t * @deprecated Use `onValueChange` instead.\n\t */\n\tonChange?: (value: string) => void;\n\tonOpenChange?(open: boolean): void;\n\tonValueChange?(value: string): void;\n\topen?: boolean;\n\trequired?: boolean;\n\tvalue?: string;\n} & WithValidation &\n\tWithAriaInvalid;\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/select#selectroot\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Root = forwardRef<HTMLButtonElement, SelectProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tchildren,\n\t\t\tid,\n\t\t\tvalidation,\n\t\t\tonBlur,\n\t\t\tonValueChange,\n\t\t\tonChange,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<SelectPrimitive.Root\n\t\t\t\t{...props}\n\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\tonChange?.(value);\n\t\t\t\t\tonValueChange?.(value);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SelectContext.Provider\n\t\t\t\t\tvalue={{ \"aria-invalid\": _ariaInvalid, id, validation, onBlur, ref }}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectContext.Provider>\n\t\t\t</SelectPrimitive.Root>\n\t\t);\n\t},\n);\nRoot.displayName = \"Select\";\n\n/**\n * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n *\n * @see https://mantle.ngrok.com/components/select#selectgroup\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Group = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Group>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Group\n\t\tref={ref}\n\t\tdata-slot=\"select-group\"\n\t\tclassName={cx(\"space-y-px\", className)}\n\t\t{...props}\n\t/>\n));\nGroup.displayName = \"SelectGroup\";\n\n/**\n * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n *\n * @see https://mantle.ngrok.com/components/select#selectvalue\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Value = SelectPrimitive.Value;\nValue.displayName = \"SelectValue\";\n\ntype SelectTriggerProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &\n\tWithAriaInvalid &\n\tWithValidation;\n\n/**\n * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n *\n * @see https://mantle.ngrok.com/components/select#selecttrigger\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Trigger = forwardRef<ComponentRef<typeof SelectPrimitive.Trigger>, SelectTriggerProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": ariaInValidProp,\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tid: propId,\n\t\t\tvalidation: propValidation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(SelectContext);\n\t\tconst _ariaInvalid = ctx[\"aria-invalid\"] ?? ariaInValidProp;\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst _validation = ctx.validation ?? propValidation;\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 id = ctx.id ?? propId;\n\n\t\treturn (\n\t\t\t<SelectPrimitive.Trigger\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-slot=\"select-trigger\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"h-9 text-sm\",\n\t\t\t\t\t\"border-form bg-form text-strong font-sans placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left\",\n\t\t\t\t\t\"hover:border-neutral-400\",\n\t\t\t\t\t\"focus:outline-hidden focus:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tid={id}\n\t\t\t\tref={composeRefs(ref, ctx.ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<SelectPrimitive.Icon asChild>\n\t\t\t\t\t<Icon svg={<CaretDownIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t\t</SelectPrimitive.Icon>\n\t\t\t</SelectPrimitive.Trigger>\n\t\t);\n\t},\n);\nTrigger.displayName = \"SelectTrigger\";\n\n/**\n * The button that scrolls the select content up.\n * @private\n */\nconst SelectScrollUpButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollUpButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollUpButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<Icon svg={<CaretUpIcon weight=\"bold\" />} className=\"size-4\" />\n\t</SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = \"SelectScrollUpButton\";\n\n/**\n * The button that scrolls the select content down.\n * @private\n */\nconst SelectScrollDownButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollDownButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollDownButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<Icon svg={<CaretDownIcon weight=\"bold\" />} className=\"size-4\" />\n\t</SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = \"SelectScrollDownButton\";\n\ntype SelectContentProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n\t/**\n\t * The width of the content. Defaults to the width of the trigger.\n\t * If set to \"content\", the content will use the intrinsic content width; it will be the width of the longest/widest item.\n\t * @default \"trigger\"\n\t */\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The component that pops out when the select is open as a portal adjacent to the trigger button.\n * It contains a scrolling viewport of the select items.\n *\n * @see https://mantle.ngrok.com/components/select#selectcontent\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<typeof SelectPrimitive.Content>, SelectContentProps>(\n\t({ className, children, position = \"popper\", width = \"trigger\", ...props }, ref) => (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"select-content\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md\",\n\t\t\t\t\t\"bg-popover font-sans\",\n\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\"data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-(--radix-select-content-available-height)\",\n\t\t\t\t\twidth === \"trigger\" && \"w-(--radix-select-trigger-width)\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tposition={position}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectScrollUpButton />\n\t\t\t\t<SelectPrimitive.Viewport\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"p-1 space-y-px\",\n\t\t\t\t\t\tposition === \"popper\" && \"h-(--radix-select-trigger-height) w-full\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t\t<SelectScrollDownButton />\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t),\n);\nContent.displayName = \"SelectContent\";\n\n/**\n * Used to render the label of a group. It won't be focusable using arrow keys.\n *\n * @see https://mantle.ngrok.com/components/select#selectlabel\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Label = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label\n\t\tref={ref}\n\t\tdata-slot=\"select-label\"\n\t\tclassName={cx(\"px-2 py-1.5 text-sm font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = \"SelectLabel\";\n\ntype SelectItemProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {\n\ticon?: ReactNode;\n};\n\n/**\n * An option within a select menu. Similar to an html `<option>` element.\n * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.\n * Displays the children as the option's text.\n *\n * @see https://mantle.ngrok.com/components/select#selectitem\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Item = forwardRef<ComponentRef<typeof SelectPrimitive.Item>, SelectItemProps>(\n\t({ className, children, icon, ...props }, ref) => (\n\t\t<SelectPrimitive.Item\n\t\t\tref={ref}\n\t\t\tdata-slot=\"select-item\"\n\t\t\tclassName={cx(\n\t\t\t\t\"relative flex gap-2 w-full cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-8 text-strong text-sm outline-hidden\",\n\t\t\t\t\"focus:bg-active-menu-item\",\n\t\t\t\t\"data-disabled:pointer-events-none data-disabled:opacity-50\",\n\t\t\t\t\"data-state-checked:bg-selected-menu-item\",\n\t\t\t\t\"focus:data-state-checked:bg-active-selected-menu-item\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{icon && <Icon svg={icon} />}\n\t\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t\t<SelectPrimitive.ItemIndicator className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4 text-accent-600\" />\n\t\t\t</SelectPrimitive.ItemIndicator>\n\t\t</SelectPrimitive.Item>\n\t),\n);\nItem.displayName = \"SelectItem\";\n\n/**\n * Used to visually separate items or groups of items in the select content.\n *\n * @see https://mantle.ngrok.com/components/select#selectseparator\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst SelectSeparatorComponent = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tdata-slot=\"select-separator\"\n\t\tclassName={cx(\"-mx-1 my-1 h-px w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nSelectSeparatorComponent.displayName = \"SelectSeparator\";\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/select\n *\n * @example\n * Composition:\n * ```\n * Select.Root\n * ├── Select.Trigger\n * │   └── Select.Value\n * └── Select.Content\n *     ├── Select.Group\n *     │   ├── Select.Label\n *     │   └── Select.Item\n *     └── Select.Separator\n * ```\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Select = {\n\t/**\n\t * Displays a list of options for the user to pick from—triggered by a button.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The component that pops out when the select is open as a portal adjacent to the trigger button.\n\t * It contains a scrolling viewport of the select items.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n\t * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectgroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * An option within a select menu. Similar to an html `<option>` element.\n\t * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.\n\t * Displays the children as the option's text.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * Used to render the label of a group. It won't be focusable using arrow keys.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectlabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tLabel,\n\t/**\n\t * Used to visually separate items or groups of items in the select content.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tSeparator: SelectSeparatorComponent,\n\t/**\n\t * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selecttrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectvalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tValue,\n} as const;\n\nexport {\n\t//,\n\tSelect,\n};\n"],"mappings":"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"}

package/dist/select.js

@@ -1 +1 @@
-import{t as e}from"./select-BPzMl3gm.js";export{e as Select};
+import{t as e}from"./select-LJmfG--I.js";export{e as Select};

package/dist/separator-DyOGgFCs.js

@@ -0,0 +1,2 @@
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{createContext as n,forwardRef as r,useContext as i}from"react";import{jsx as a}from"react/jsx-runtime";const o=[`horizontal`,`vertical`],s=n({}),c=({className:n,children:r,asChild:i,...o})=>{let c=i?t:`div`;return a(s.Provider,{value:{orientation:`horizontal`},children:a(c,{"data-slot":`horizontal-separator-group`,"data-horizontal-separator-group":!0,className:e(`group flex items-center gap-2 [&_*:not([data-separator])]:shrink-0`,n),...o,children:r})})};c.displayName=`HorizontalSeparatorGroup`;const l=r(({asChild:n=!1,children:r,className:o,orientation:c,semantic:l=!1,...d},f)=>{let p=n?t:`div`,m=i(s).orientation??(u(c)?c:`horizontal`),h=l?{"aria-orientation":m===`vertical`?m:void 0,role:`separator`}:{role:`none`};return a(p,{"data-slot":`separator`,className:e(`separator`,`dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20`,m===`horizontal`?`h-px w-full group-data-horizontal-separator-group:flex-1`:`h-full w-px`,o),"data-orientation":m,"data-separator":!0,...h,ref:f,...n?{children:r}:{},...d})});l.displayName=`Separator`;function u(e){return typeof e==`string`&&o.includes(e)}export{l as n,c as t};
+//# sourceMappingURL=separator-DyOGgFCs.js.map