@ngrok/mantle 0.59.0 → 0.60.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/dist/alert-dialog.js +1 -1
  2. package/dist/alert-dialog.js.map +1 -1
  3. package/dist/alert.js +1 -1
  4. package/dist/alert.js.map +1 -1
  5. package/dist/anchor.js +1 -1
  6. package/dist/anchor.js.map +1 -1
  7. package/dist/badge.js +1 -1
  8. package/dist/badge.js.map +1 -1
  9. package/dist/button.js +1 -1
  10. package/dist/calendar.js +1 -1
  11. package/dist/calendar.js.map +1 -1
  12. package/dist/card.js +1 -1
  13. package/dist/card.js.map +1 -1
  14. package/dist/{chunk-GPMVEDRP.js → chunk-4IX2UWKO.js} +2 -2
  15. package/dist/chunk-BRV6XRNS.js +2 -0
  16. package/dist/chunk-BRV6XRNS.js.map +1 -0
  17. package/dist/chunk-DRVKSKOI.js +2 -0
  18. package/dist/chunk-DRVKSKOI.js.map +1 -0
  19. package/dist/{chunk-5QSZM7K4.js → chunk-EVAIBP32.js} +2 -2
  20. package/dist/chunk-OE4YWO7O.js +2 -0
  21. package/dist/chunk-OE4YWO7O.js.map +1 -0
  22. package/dist/chunk-UKS7NFNC.js +2 -0
  23. package/dist/chunk-UKS7NFNC.js.map +1 -0
  24. package/dist/chunk-UNFO4DZV.js +2 -0
  25. package/dist/chunk-UNFO4DZV.js.map +1 -0
  26. package/dist/chunk-YKYEISYH.js +2 -0
  27. package/dist/chunk-YKYEISYH.js.map +1 -0
  28. package/dist/code-block.d.ts +1 -1
  29. package/dist/code-block.js +1 -1
  30. package/dist/code-block.js.map +1 -1
  31. package/dist/combobox.js +1 -1
  32. package/dist/combobox.js.map +1 -1
  33. package/dist/command.js +1 -1
  34. package/dist/command.js.map +1 -1
  35. package/dist/data-table.js +1 -1
  36. package/dist/data-table.js.map +1 -1
  37. package/dist/dialog.js +1 -1
  38. package/dist/dropdown-menu.js +1 -1
  39. package/dist/dropdown-menu.js.map +1 -1
  40. package/dist/media-object.js +1 -1
  41. package/dist/media-object.js.map +1 -1
  42. package/dist/pagination.js +1 -1
  43. package/dist/pagination.js.map +1 -1
  44. package/dist/radio-group.d.ts +3 -3
  45. package/dist/radio-group.js +1 -1
  46. package/dist/radio-group.js.map +1 -1
  47. package/dist/sandboxed-on-click.js +1 -1
  48. package/dist/sandboxed-on-click.js.map +1 -1
  49. package/dist/select.js +1 -1
  50. package/dist/separator.js +1 -1
  51. package/dist/sheet.js +1 -1
  52. package/dist/sheet.js.map +1 -1
  53. package/dist/skeleton.js +1 -1
  54. package/dist/skeleton.js.map +1 -1
  55. package/dist/slot.d.ts +20 -0
  56. package/dist/slot.js +2 -0
  57. package/dist/slot.js.map +1 -0
  58. package/dist/toast.js +1 -1
  59. package/dist/tooltip.d.ts +7 -7
  60. package/dist/tooltip.js.map +1 -1
  61. package/package.json +8 -3
  62. package/dist/chunk-4DVFVPF2.js +0 -2
  63. package/dist/chunk-4DVFVPF2.js.map +0 -1
  64. package/dist/chunk-BWGCYXLX.js +0 -2
  65. package/dist/chunk-BWGCYXLX.js.map +0 -1
  66. package/dist/chunk-QXNUFNG4.js +0 -2
  67. package/dist/chunk-QXNUFNG4.js.map +0 -1
  68. package/dist/chunk-VIKPHWPP.js +0 -2
  69. package/dist/chunk-VIKPHWPP.js.map +0 -1
  70. package/dist/chunk-WY3TZBNK.js +0 -2
  71. package/dist/chunk-WY3TZBNK.js.map +0 -1
  72. /package/dist/{chunk-GPMVEDRP.js.map → chunk-4IX2UWKO.js.map} +0 -0
  73. /package/dist/{chunk-5QSZM7K4.js.map → chunk-EVAIBP32.js.map} +0 -0
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n} from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * Wraps your app to provide global functionality to your tooltips.\n * Only one instance of this component should be rendered in your app, preferably at the root.\n *\n * @see https://mantle.ngrok.com/tooltip#tooltip-provider\n *\n * @example\n * ```tsx\n * <TooltipProvider>\n * <App />\n * </TooltipProvider>\n * ```\n */\nconst TooltipProvider = ({\n\tdelayDuration = 0,\n\t...props\n}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => (\n\t<TooltipPrimitive.Provider\n\t\tdata-slot=\"tooltip-provider\"\n\t\tdelayDuration={delayDuration ?? 0}\n\t\t{...props}\n\t/>\n);\nTooltipProvider.displayName = \"Tooltip.Provider\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * This is the root, stateful component that manages the open/closed state of the tooltip.\n * Will throw if you have not wrapped your app in a `TooltipProvider`.\n *\n * @see https://mantle.ngrok.com/tooltip#tooltip-root\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n * <Tooltip.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Hover me\n * </Button>\n * </Tooltip.Trigger>\n * <Tooltip.Content>\n * This is a tooltip\n * </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Root(props: ComponentProps<typeof TooltipPrimitive.Root>) {\n\treturn <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\nRoot.displayName = \"Tooltip.Root\";\n\n/**\n * The trigger button that opens the tooltip.\n *\n * @see https://mantle.ngrok.com/tooltip#tooltip-trigger\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n * <Tooltip.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Hover me\n * </Button>\n * </Tooltip.Trigger>\n * <Tooltip.Content>\n * This is a tooltip\n * </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Trigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {\n\treturn <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\nTrigger.displayName = \"Tooltip.Trigger\";\n\n/**\n * The content to render inside the tooltip.\n *\n * @see https://mantle.ngrok.com/tooltip#tooltip-content\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n * <Tooltip.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Hover me\n * </Button>\n * </Tooltip.Trigger>\n * <Tooltip.Content>\n * This is a tooltip\n * </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TooltipPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ children, className, sideOffset = 4, ...props }, ref) => (\n\t<TooltipPrimitive.Portal>\n\t\t<TooltipPrimitive.Content\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-tooltip text-tooltip animate-in fade-in-0 zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 z-50 max-w-72 overflow-visible wrap-break-word rounded-md px-3 py-1.5 text-sm font-sans shadow\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"tooltip-content\"\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<TooltipPrimitive.Arrow asChild>\n\t\t\t\t<div className=\"bg-tooltip z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs\" />\n\t\t\t</TooltipPrimitive.Arrow>\n\t\t</TooltipPrimitive.Content>\n\t</TooltipPrimitive.Portal>\n));\nContent.displayName = \"Tooltip.Content\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * This is the root, stateful component that manages the open/closed state of the tooltip.\n * Will throw if you have not wrapped your app in a `TooltipProvider`.\n *\n * @see https://mantle.ngrok.com/tooltip\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n * <Tooltip.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Hover me\n * </Button>\n * </Tooltip.Trigger>\n * <Tooltip.Content>\n * This is a tooltip\n * </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Tooltip = {\n\t/**\n\t * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n\t * This is the root, stateful component that manages the open/closed state of the tooltip.\n\t * Will throw if you have not wrapped your app in a `TooltipProvider`.\n\t *\n\t * @see https://mantle.ngrok.com/tooltip#tooltip-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t * <Tooltip.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Hover me\n\t * </Button>\n\t * </Tooltip.Trigger>\n\t * <Tooltip.Content>\n\t * This is a tooltip\n\t * </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The content to render inside the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/tooltip#tooltip-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t * <Tooltip.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Hover me\n\t * </Button>\n\t * </Tooltip.Trigger>\n\t * <Tooltip.Content>\n\t * This is a tooltip\n\t * </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/tooltip#tooltip-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t * <Tooltip.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Hover me\n\t * </Button>\n\t * </Tooltip.Trigger>\n\t * <Tooltip.Content>\n\t * This is a tooltip\n\t * </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tTooltip,\n\tTooltipProvider,\n};\n"],"mappings":"wCAAA,UAAYA,MAAsB,0BAClC,OAAS,cAAAC,MAAkB,QAyB1B,cAAAC,EAkFC,QAAAC,MAlFD,oBAJD,IAAMC,EAAkB,CAAC,CACxB,cAAAC,EAAgB,EAChB,GAAGC,CACJ,IACCJ,EAAkB,WAAjB,CACA,YAAU,mBACV,cAAeG,GAAiB,EAC/B,GAAGC,EACL,EAEDF,EAAgB,YAAc,mBAuB9B,SAASG,EAAKD,EAAqD,CAClE,OAAOJ,EAAkB,OAAjB,CAAsB,YAAU,UAAW,GAAGI,EAAO,CAC9D,CACAC,EAAK,YAAc,eAqBnB,SAASC,EAAQF,EAAwD,CACxE,OAAOJ,EAAkB,UAAjB,CAAyB,YAAU,kBAAmB,GAAGI,EAAO,CACzE,CACAE,EAAQ,YAAc,kBAqBtB,IAAMC,EAAUC,EAGd,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,WAAAC,EAAa,EAAG,GAAGP,CAAM,EAAGQ,IACrDZ,EAAkB,SAAjB,CACA,SAAAC,EAAkB,UAAjB,CACA,UAAWY,EACV,sYACAH,CACD,EACA,YAAU,kBACV,IAAKE,EACL,WAAYD,EACX,GAAGP,EAEH,UAAAK,EACDT,EAAkB,QAAjB,CAAuB,QAAO,GAC9B,SAAAA,EAAC,OAAI,UAAU,6EAA6E,EAC7F,GACD,EACD,CACA,EACDO,EAAQ,YAAc,kBAuBtB,IAAMO,EAAU,CAsBf,KAAAT,EAoBA,QAAAE,EAoBA,QAAAD,CACD","names":["TooltipPrimitive","forwardRef","jsx","jsxs","TooltipProvider","delayDuration","props","Root","Trigger","Content","forwardRef","children","className","sideOffset","ref","cx","Tooltip"]}
1
+ {"version":3,"sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n} from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * Wraps your app to provide global functionality to your tooltips.\n * Only one instance of this component should be rendered in your app, preferably at the root.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltip-provider\n *\n * @example\n * ```tsx\n * <TooltipProvider>\n * <App />\n * </TooltipProvider>\n * ```\n */\nconst TooltipProvider = ({\n\tdelayDuration = 0,\n\t...props\n}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => (\n\t<TooltipPrimitive.Provider\n\t\tdata-slot=\"tooltip-provider\"\n\t\tdelayDuration={delayDuration ?? 0}\n\t\t{...props}\n\t/>\n);\nTooltipProvider.displayName = \"Tooltip.Provider\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * This is the root, stateful component that manages the open/closed state of the tooltip.\n * Will throw if you have not wrapped your app in a `TooltipProvider`.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltip-root\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n * <Tooltip.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Hover me\n * </Button>\n * </Tooltip.Trigger>\n * <Tooltip.Content>\n * This is a tooltip\n * </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Root(props: ComponentProps<typeof TooltipPrimitive.Root>) {\n\treturn <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\nRoot.displayName = \"Tooltip.Root\";\n\n/**\n * The trigger button that opens the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltip-trigger\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n * <Tooltip.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Hover me\n * </Button>\n * </Tooltip.Trigger>\n * <Tooltip.Content>\n * This is a tooltip\n * </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Trigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {\n\treturn <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\nTrigger.displayName = \"Tooltip.Trigger\";\n\n/**\n * The content to render inside the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltip-content\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n * <Tooltip.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Hover me\n * </Button>\n * </Tooltip.Trigger>\n * <Tooltip.Content>\n * This is a tooltip\n * </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TooltipPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ children, className, sideOffset = 4, ...props }, ref) => (\n\t<TooltipPrimitive.Portal>\n\t\t<TooltipPrimitive.Content\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-tooltip text-tooltip animate-in fade-in-0 zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 z-50 max-w-72 overflow-visible wrap-break-word rounded-md px-3 py-1.5 text-sm font-sans shadow\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"tooltip-content\"\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<TooltipPrimitive.Arrow asChild>\n\t\t\t\t<div className=\"bg-tooltip z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs\" />\n\t\t\t</TooltipPrimitive.Arrow>\n\t\t</TooltipPrimitive.Content>\n\t</TooltipPrimitive.Portal>\n));\nContent.displayName = \"Tooltip.Content\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * This is the root, stateful component that manages the open/closed state of the tooltip.\n * Will throw if you have not wrapped your app in a `TooltipProvider`.\n *\n * @see https://mantle.ngrok.com/components/tooltip\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n * <Tooltip.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Hover me\n * </Button>\n * </Tooltip.Trigger>\n * <Tooltip.Content>\n * This is a tooltip\n * </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Tooltip = {\n\t/**\n\t * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n\t * This is the root, stateful component that manages the open/closed state of the tooltip.\n\t * Will throw if you have not wrapped your app in a `TooltipProvider`.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltip-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t * <Tooltip.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Hover me\n\t * </Button>\n\t * </Tooltip.Trigger>\n\t * <Tooltip.Content>\n\t * This is a tooltip\n\t * </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The content to render inside the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltip-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t * <Tooltip.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Hover me\n\t * </Button>\n\t * </Tooltip.Trigger>\n\t * <Tooltip.Content>\n\t * This is a tooltip\n\t * </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltip-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t * <Tooltip.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Hover me\n\t * </Button>\n\t * </Tooltip.Trigger>\n\t * <Tooltip.Content>\n\t * This is a tooltip\n\t * </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tTooltip,\n\tTooltipProvider,\n};\n"],"mappings":"wCAAA,UAAYA,MAAsB,0BAClC,OAAS,cAAAC,MAAkB,QAyB1B,cAAAC,EAkFC,QAAAC,MAlFD,oBAJD,IAAMC,EAAkB,CAAC,CACxB,cAAAC,EAAgB,EAChB,GAAGC,CACJ,IACCJ,EAAkB,WAAjB,CACA,YAAU,mBACV,cAAeG,GAAiB,EAC/B,GAAGC,EACL,EAEDF,EAAgB,YAAc,mBAuB9B,SAASG,EAAKD,EAAqD,CAClE,OAAOJ,EAAkB,OAAjB,CAAsB,YAAU,UAAW,GAAGI,EAAO,CAC9D,CACAC,EAAK,YAAc,eAqBnB,SAASC,EAAQF,EAAwD,CACxE,OAAOJ,EAAkB,UAAjB,CAAyB,YAAU,kBAAmB,GAAGI,EAAO,CACzE,CACAE,EAAQ,YAAc,kBAqBtB,IAAMC,EAAUC,EAGd,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,WAAAC,EAAa,EAAG,GAAGP,CAAM,EAAGQ,IACrDZ,EAAkB,SAAjB,CACA,SAAAC,EAAkB,UAAjB,CACA,UAAWY,EACV,sYACAH,CACD,EACA,YAAU,kBACV,IAAKE,EACL,WAAYD,EACX,GAAGP,EAEH,UAAAK,EACDT,EAAkB,QAAjB,CAAuB,QAAO,GAC9B,SAAAA,EAAC,OAAI,UAAU,6EAA6E,EAC7F,GACD,EACD,CACA,EACDO,EAAQ,YAAc,kBAuBtB,IAAMO,EAAU,CAsBf,KAAAT,EAoBA,QAAAE,EAoBA,QAAAD,CACD","names":["TooltipPrimitive","forwardRef","jsx","jsxs","TooltipProvider","delayDuration","props","Root","Trigger","Content","forwardRef","children","className","sideOffset","ref","cx","Tooltip"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "mantle is ngrok's UI library and design system.",
4
4
  "author": "ngrok",
5
5
  "license": "MIT",
6
- "version": "0.59.0",
6
+ "version": "0.60.0",
7
7
  "homepage": "https://mantle.ngrok.com",
8
8
  "repository": {
9
9
  "type": "git",
@@ -63,9 +63,9 @@
63
63
  "happy-dom": "20.0.10",
64
64
  "react": "18.3.1",
65
65
  "react-dom": "18.3.1",
66
- "react-router": "7.9.5",
66
+ "react-router": "7.9.6",
67
67
  "tailwindcss": "4.1.17",
68
- "tsup": "8.5.0",
68
+ "tsup": "8.5.1",
69
69
  "typescript": "5.9.3",
70
70
  "@cfg/tsconfig": "1.0.0"
71
71
  },
@@ -279,6 +279,11 @@
279
279
  "import": "./dist/skeleton.js",
280
280
  "types": "./dist/skeleton.d.ts"
281
281
  },
282
+ "./slot": {
283
+ "@ngrok/mantle/source": "./src/components/slot/index.ts",
284
+ "import": "./dist/slot.js",
285
+ "types": "./dist/slot.d.ts"
286
+ },
282
287
  "./switch": {
283
288
  "@ngrok/mantle/source": "./src/components/switch/index.ts",
284
289
  "import": "./dist/switch.js",
@@ -1,2 +0,0 @@
1
- import{a as i}from"./chunk-PFXFESEN.js";import{Slot as s}from"@radix-ui/react-slot";import{createContext as h,forwardRef as f,useContext as C}from"react";import{jsx as p}from"react/jsx-runtime";var g=["horizontal","vertical"],l=h({}),x=({className:t,children:a,asChild:e,...o})=>{let n=e?s:"div";return p(l.Provider,{value:{orientation:"horizontal"},children:p(n,{"data-horizontal-separator-group":!0,className:i("group flex items-center gap-2 [&_*:not([data-separator])]:shrink-0",t),...o,children:a})})};x.displayName="HorizontalSeparatorGroup";var y=f(({asChild:t=!1,children:a,className:e,orientation:o,semantic:n=!1,...c},m)=>{let d=t?s:"div",r=C(l).orientation??(S(o)?o:"horizontal"),u=n?{"aria-orientation":r==="vertical"?r:void 0,role:"separator"}:{role:"none"};return p(d,{className:i("separator","dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20",r==="horizontal"?"h-px w-full group-data-[horizontal-separator-group]:flex-1":"h-full w-px",e),"data-orientation":r,"data-separator":!0,...u,ref:m,...t?{children:a}:{},...c})});y.displayName="Separator";function S(t){return typeof t=="string"&&g.includes(t)}export{x as a,y as b};
2
- //# sourceMappingURL=chunk-4DVFVPF2.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/separator/separator.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ComponentProps, ComponentRef, HTMLAttributes } from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\nconst orientations = [\"horizontal\", \"vertical\"] as const;\ntype Orientation = (typeof orientations)[number];\n\ntype SeparatorGroupContextShape = {\n\torientation?: Orientation;\n};\n\nconst SeparatorGroupContext = createContext<SeparatorGroupContextShape>({});\n\n/**\n * A container to layout a group of horizontal separators and other children.\n * Overrides all children `Separator`s to be `orientation=\"horizontal\"`.\n *\n * @see https://mantle.ngrok.com/components/separator#api-horizontal-separator-group\n *\n * @example\n * ```tsx\n * <HorizontalSeparatorGroup>\n * <Separator />\n * <h3>ngrok mantle</h3>\n * <Separator />\n * </HorizontalSeparatorGroup>\n *\n * <HorizontalSeparatorGroup>\n * <h3>ngrok mantle</h3>\n * <Separator />\n * </HorizontalSeparatorGroup>\n *\n * <HorizontalSeparatorGroup>\n * <Separator />\n * <h3>ngrok mantle</h3>\n * </HorizontalSeparatorGroup>\n * ```\n */\nconst HorizontalSeparatorGroup = ({\n\tclassName,\n\tchildren,\n\tasChild,\n\t...props\n}: HTMLAttributes<HTMLDivElement> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<SeparatorGroupContext.Provider value={{ orientation: \"horizontal\" }}>\n\t\t\t<Comp\n\t\t\t\tdata-horizontal-separator-group\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group flex items-center gap-2 [&_*:not([data-separator])]:shrink-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Comp>\n\t\t</SeparatorGroupContext.Provider>\n\t);\n};\nHorizontalSeparatorGroup.displayName = \"HorizontalSeparatorGroup\";\n\ntype SeparatorProps = ComponentProps<\"div\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * Either `horizontal` or `vertical`.\n\t\t *\n\t\t * @default \"horizontal\"\n\t\t */\n\t\torientation?: Orientation;\n\t\t/**\n\t\t * If `true`, the separator will be rendered with all accessibility-related attributes and role=\"separator\".\n\t\t * If `false`, the separator is purely decorative and all accessibility-related attributes\n\t\t * are updated so that that the rendered element is removed from the accessibility tree.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsemantic?: boolean;\n\t};\n\n/**\n * Visually or semantically separates content.\n *\n * @see https://mantle.ngrok.com/components/separator#api-separator\n *\n * @example\n * ```tsx\n * <Separator className=\"my-4\" />\n *\n * <Separator className=\"my-4\" semantic />\n *\n * <div className=\"flex h-5 items-center gap-4 text-sm\">\n * Blog\n * <Separator orientation=\"vertical\" />\n * Docs\n * <Separator orientation=\"vertical\" />\n * Source\n * </div>\n * ```\n */\nconst Separator = forwardRef<ComponentRef<\"div\">, SeparatorProps>(\n\t(\n\t\t{\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\torientation: propOrientation,\n\t\t\tsemantic = false,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\tconst ctx = useContext(SeparatorGroupContext);\n\t\t// Prefer the orientation from the context if it's set, else fallback to the prop and then to \"horizontal\".\n\t\tconst orientation =\n\t\t\tctx.orientation ??\n\t\t\t(isOrientation(propOrientation) ? propOrientation : \"horizontal\");\n\t\t// `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical\n\t\tconst ariaOrientation =\n\t\t\torientation === \"vertical\" ? orientation : undefined;\n\t\tconst semanticProps = semantic\n\t\t\t? { \"aria-orientation\": ariaOrientation, role: \"separator\" }\n\t\t\t: { role: \"none\" };\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"separator\",\n\t\t\t\t\t\"dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20\",\n\t\t\t\t\torientation === \"horizontal\"\n\t\t\t\t\t\t? \"h-px w-full group-data-[horizontal-separator-group]:flex-1\"\n\t\t\t\t\t\t: \"h-full w-px\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-orientation={orientation}\n\t\t\t\tdata-separator\n\t\t\t\t{...semanticProps}\n\t\t\t\tref={ref}\n\t\t\t\t{...(asChild ? { children } : {})} // only pass children if asChild is true\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nSeparator.displayName = \"Separator\";\n\nexport {\n\t//,\n\tHorizontalSeparatorGroup,\n\tSeparator,\n};\n\nfunction isOrientation(value: unknown): value is Orientation {\n\treturn (\n\t\ttypeof value === \"string\" && orientations.includes(value as Orientation)\n\t);\n}\n"],"mappings":"wCAAA,OAAS,QAAAA,MAAY,uBAErB,OAAS,iBAAAC,EAAe,cAAAC,EAAY,cAAAC,MAAkB,QAgDnD,cAAAC,MAAA,oBA5CH,IAAMC,EAAe,CAAC,aAAc,UAAU,EAOxCC,EAAwBC,EAA0C,CAAC,CAAC,EA2BpEC,EAA2B,CAAC,CACjC,UAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CACJ,IAAoD,CACnD,IAAMC,EAAOF,EAAUG,EAAO,MAE9B,OACCV,EAACE,EAAsB,SAAtB,CAA+B,MAAO,CAAE,YAAa,YAAa,EAClE,SAAAF,EAACS,EAAA,CACA,kCAA+B,GAC/B,UAAWE,EACV,qEACAN,CACD,EACC,GAAGG,EAEH,SAAAF,EACF,EACD,CAEF,EACAF,EAAyB,YAAc,2BAwCvC,IAAMQ,EAAYC,EACjB,CACC,CACC,QAAAN,EAAU,GACV,SAAAD,EACA,UAAAD,EACA,YAAaS,EACb,SAAAC,EAAW,GACX,GAAGP,CACJ,EACAQ,IACI,CACJ,IAAMC,EAAYV,EAAUG,EAAO,MAG7BQ,EAFMC,EAAWjB,CAAqB,EAGvC,cACHkB,EAAcN,CAAe,EAAIA,EAAkB,cAI/CO,EAAgBN,EACnB,CAAE,mBAFJG,IAAgB,WAAaA,EAAc,OAEF,KAAM,WAAY,EACzD,CAAE,KAAM,MAAO,EAElB,OACClB,EAACiB,EAAA,CACA,UAAWN,EACV,YACA,wFACAO,IAAgB,aACb,6DACA,cACHb,CACD,EACA,mBAAkBa,EAClB,iBAAc,GACb,GAAGG,EACJ,IAAKL,EACJ,GAAIT,EAAU,CAAE,SAAAD,CAAS,EAAI,CAAC,EAC9B,GAAGE,EACL,CAEF,CACD,EACAI,EAAU,YAAc,YAQxB,SAASU,EAAcC,EAAsC,CAC5D,OACC,OAAOA,GAAU,UAAYC,EAAa,SAASD,CAAoB,CAEzE","names":["Slot","createContext","forwardRef","useContext","jsx","orientations","SeparatorGroupContext","createContext","HorizontalSeparatorGroup","className","children","asChild","props","Comp","Slot","cx","Separator","forwardRef","propOrientation","semantic","ref","Component","orientation","useContext","isOrientation","semanticProps","isOrientation","value","orientations"]}
@@ -1,2 +0,0 @@
1
- import{a as b}from"./chunk-3C5O3AQA.js";import{a as i}from"./chunk-2NIR7PCL.js";import{a as l}from"./chunk-PFXFESEN.js";import{CircleNotchIcon as V}from"@phosphor-icons/react/CircleNotch";import{Slot as C}from"@radix-ui/react-slot";import{cva as N}from"class-variance-authority";import p from"clsx";import{Children as k,cloneElement as E,forwardRef as S,isValidElement as w}from"react";import I from"tiny-invariant";import{Fragment as j,jsx as o,jsxs as u}from"react/jsx-runtime";var R=N("",{variants:{appearance:{filled:"bg-filled-accent text-on-filled focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover not-disabled:active:bg-filled-accent-active h-9 border border-transparent px-3 text-sm font-medium",ghost:"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border border-transparent px-3 text-sm font-medium",outlined:"border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:border-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border px-3 text-sm font-medium",link:"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent"},isLoading:{false:"",true:"opacity-50"},priority:{danger:"",default:"",neutral:""}},defaultVariants:{appearance:"outlined",isLoading:!1,priority:"default"},compoundVariants:[{appearance:"ghost",priority:"danger",class:"text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700 border-transparent"},{appearance:"outlined",priority:"danger",class:"border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:border-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700"},{appearance:"filled",priority:"danger",class:"bg-filled-danger focus-visible:border-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover not-disabled:active:bg-filled-danger-active border-transparent"},{appearance:"link",priority:"danger",class:"text-danger-600 focus-visible:ring-focus-danger"},{appearance:"ghost",priority:"neutral",class:"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent"},{appearance:"outlined",priority:"neutral",class:"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600"},{appearance:"filled",priority:"neutral",class:"bg-filled-neutral focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active border-transparent focus-visible:border-neutral-600"},{appearance:"link",priority:"neutral",class:"text-strong focus-visible:ring-focus-accent"}]}),A=S(({"aria-disabled":g,appearance:d="outlined",asChild:f,children:e,className:v,disabled:m,icon:h,iconPlacement:a="start",isLoading:r=!1,priority:x="default",type:y,...B},P)=>{let n=b(g??m??r),t=r?o(V,{className:"animate-spin"}):h,s=t&&d!=="link",c={"aria-disabled":n,className:l("inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md","focus:outline-hidden focus-visible:ring-4","disabled:cursor-default disabled:opacity-50","not-disabled:active:scale-[0.97]",R({appearance:d,priority:x,isLoading:r}),s&&a==="start"&&"ps-2.5",s&&a==="end"&&"pe-2.5",v),"data-disabled":n,"data-loading":r,disabled:n,ref:P,...B};return f?(I(w(e)&&k.only(e),"When using `asChild`, Button must be passed a single child as a JSX tag."),o(C,{...c,children:E(e,{},u(j,{children:[t&&o(i,{svg:t,className:p(a==="end"&&"order-last")}),e.props.children]}))})):u("button",{...c,type:y,children:[t&&o(i,{svg:t,className:p(a==="end"&&"order-last")}),e]})});A.displayName="Button";export{A as a};
2
- //# sourceMappingURL=chunk-BWGCYXLX.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/button/button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport type { VariantProps } from \"../../types/variant-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\n\nconst buttonVariants = cva(\"\", {\n\tvariants: {\n\t\t/**\n\t\t * Defines the visual style of the Button.\n\t\t */\n\t\tappearance: {\n\t\t\tfilled:\n\t\t\t\t\"bg-filled-accent text-on-filled focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover not-disabled:active:bg-filled-accent-active h-9 border border-transparent px-3 text-sm font-medium\",\n\t\t\tghost:\n\t\t\t\t\"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border border-transparent px-3 text-sm font-medium\",\n\t\t\toutlined:\n\t\t\t\t\"border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:border-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border px-3 text-sm font-medium\",\n\t\t\tlink: \"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent\",\n\t\t},\n\t\t/**\n\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t * replace any `icon` with a spinner, or add one if an icon wasn't given.\n\t\t * It will also disable user interaction with the button and set `disabled`.\n\t\t */\n\t\tisLoading: {\n\t\t\tfalse: \"\",\n\t\t\ttrue: \"opacity-50\",\n\t\t},\n\t\t/**\n\t\t * Indicates the importance or impact level of the button, affecting its\n\t\t * color and styling to communicate its purpose to the user\n\t\t */\n\t\tpriority: {\n\t\t\tdanger: \"\",\n\t\t\tdefault: \"\",\n\t\t\tneutral: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tappearance: \"outlined\",\n\t\tisLoading: false,\n\t\tpriority: \"default\",\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tappearance: \"ghost\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass:\n\t\t\t\t\"text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700 border-transparent\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"outlined\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass:\n\t\t\t\t\"border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:border-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"filled\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass:\n\t\t\t\t\"bg-filled-danger focus-visible:border-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover not-disabled:active:bg-filled-danger-active border-transparent\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"link\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass: \"text-danger-600 focus-visible:ring-focus-danger\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"ghost\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass:\n\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"outlined\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass:\n\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"filled\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass:\n\t\t\t\t\"bg-filled-neutral focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active border-transparent focus-visible:border-neutral-600\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"link\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass: \"text-strong focus-visible:ring-focus-accent\",\n\t\t},\n\t],\n});\n\ntype ButtonVariants = VariantProps<typeof buttonVariants>;\n\ntype ButtonAppearance = Pick<ButtonVariants, \"appearance\">[\"appearance\"];\ntype ButtonPriority = Pick<ButtonVariants, \"priority\">[\"priority\"];\n\n/**\n * The props for the `Button` component.\n */\ntype ButtonProps = ComponentProps<\"button\"> &\n\tButtonVariants & {\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present. If `state=\"pending\"`,\n\t\t * then the loading icon will also render on this side.\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ComponentProps<\"button\">[\"type\"];\n\t\t }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<ComponentProps<\"button\">[\"type\"], undefined>;\n\t\t }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n *\n * @see https://mantle.ngrok.com/components/button#api-button\n *\n * @example\n * ```tsx\n * <Button type=\"button\" appearance=\"filled\" priority=\"default\">\n * Click me\n * </Button>\n * ```\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance = \"outlined\",\n\t\t\tasChild,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\ticonPlacement = \"start\",\n\t\t\tisLoading = false,\n\t\t\tpriority = \"default\",\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? (\n\t\t\t<CircleNotchIcon className=\"animate-spin\" />\n\t\t) : (\n\t\t\tpropIcon\n\t\t);\n\n\t\t/**\n\t\t * If the button has an icon and is not a link, add padding-start or padding-end to the button depending on the icon placement.\n\t\t */\n\t\tconst hasSpecialIconPadding = icon && appearance !== \"link\";\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\tclassName: cx(\n\t\t\t\t\"inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md\",\n\t\t\t\t\"focus:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\"disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\"not-disabled:active:scale-[0.97]\",\n\t\t\t\tbuttonVariants({ appearance, priority, isLoading }),\n\t\t\t\thasSpecialIconPadding && iconPlacement === \"start\" && \"ps-2.5\",\n\t\t\t\thasSpecialIconPadding && iconPlacement === \"end\" && \"pe-2.5\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\t\"data-disabled\": disabled,\n\t\t\t\"data-loading\": isLoading,\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tinvariant(\n\t\t\t\tisValidElement(children) && Children.only(children),\n\t\t\t\t\"When using `asChild`, Button must be passed a single child as a JSX tag.\",\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\tsvg={icon}\n\t\t\t\t\t\t\t\t\tclassName={clsx(iconPlacement === \"end\" && \"order-last\")}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{children.props.children}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t{icon && (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tsvg={icon}\n\t\t\t\t\t\tclassName={clsx(iconPlacement === \"end\" && \"order-last\")}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport {\n\t//,\n\tButton,\n};\n\nexport type {\n\t//,\n\tButtonAppearance,\n\tButtonPriority,\n\tButtonProps,\n};\n"],"mappings":"wHAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BACpB,OAAOC,MAAU,OAEjB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QACnE,OAAOC,MAAe,iBA0MnB,OAwCG,YAAAC,EAxCH,OAAAC,EAwCG,QAAAC,MAxCH,oBApMH,IAAMC,EAAiBC,EAAI,GAAI,CAC9B,SAAU,CAIT,WAAY,CACX,OACC,+OACD,MACC,yPACD,SACC,2UACD,KAAM,mHACP,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAKA,SAAU,CACT,OAAQ,GACR,QAAS,GACT,QAAS,EACV,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,UAAW,GACX,SAAU,SACX,EACA,iBAAkB,CACjB,CACC,WAAY,QACZ,SAAU,SACV,MACC,oNACF,EACA,CACC,WAAY,WACZ,SAAU,SACV,MACC,sSACF,EACA,CACC,WAAY,SACZ,SAAU,SACV,MACC,2LACF,EACA,CACC,WAAY,OACZ,SAAU,SACV,MAAO,iDACR,EACA,CACC,WAAY,QACZ,SAAU,UACV,MACC,0MACF,EACA,CACC,WAAY,WACZ,SAAU,UACV,MACC,wWACF,EACA,CACC,WAAY,SACZ,SAAU,UACV,MACC,gMACF,EACA,CACC,WAAY,OACZ,SAAU,UACV,MAAO,6CACR,CACD,CACD,CAAC,EA0FKC,EAASC,EACd,CACC,CACC,gBAAiBC,EACjB,WAAAC,EAAa,WACb,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,cAAAC,EAAgB,QAChB,UAAAC,EAAY,GACZ,SAAAC,EAAW,UACX,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaG,CAAS,EAClEO,EAAOP,EACZd,EAACsB,EAAA,CAAgB,UAAU,eAAe,EAE1CV,EAMKW,EAAwBF,GAAQd,IAAe,OAE/CiB,EAAc,CACnB,gBAAiBL,EACjB,UAAWM,EACV,+EACA,4CACA,8CACA,mCACAvB,EAAe,CAAE,WAAAK,EAAY,SAAAQ,EAAU,UAAAD,CAAU,CAAC,EAClDS,GAAyBV,IAAkB,SAAW,SACtDU,GAAyBV,IAAkB,OAAS,SACpDH,CACD,EACA,gBAAiBS,EACjB,eAAgBL,EAChB,SAAAK,EACA,IAAAD,EACA,GAAGD,CACJ,EAEA,OAAIT,GACHkB,EACCC,EAAelB,CAAQ,GAAKmB,EAAS,KAAKnB,CAAQ,EAClD,0EACD,EAGCT,EAAC6B,EAAA,CAAM,GAAGL,EACR,SAAAM,EACArB,EACA,CAAC,EACDR,EAAAF,EAAA,CACE,UAAAsB,GACArB,EAAC+B,EAAA,CACA,IAAKV,EACL,UAAWW,EAAKnB,IAAkB,OAAS,YAAY,EACxD,EAEAJ,EAAS,MAAM,UACjB,CACD,EACD,GAKDR,EAAC,UAAQ,GAAGuB,EAAa,KAAMR,EAC7B,UAAAK,GACArB,EAAC+B,EAAA,CACA,IAAKV,EACL,UAAWW,EAAKnB,IAAkB,OAAS,YAAY,EACxD,EAEAJ,GACF,CAEF,CACD,EACAL,EAAO,YAAc","names":["CircleNotchIcon","Slot","cva","clsx","Children","cloneElement","forwardRef","isValidElement","invariant","Fragment","jsx","jsxs","buttonVariants","cva","Button","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","iconPlacement","isLoading","priority","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","hasSpecialIconPadding","buttonProps","cx","invariant","isValidElement","Children","Slot","cloneElement","Icon","clsx"]}
@@ -1,2 +0,0 @@
1
- import{a as l}from"./chunk-3C5O3AQA.js";import{a as d}from"./chunk-2NIR7PCL.js";import{a as r}from"./chunk-PFXFESEN.js";import{CircleNotchIcon as x}from"@phosphor-icons/react/CircleNotch";import{Slot as I}from"@radix-ui/react-slot";import{cva as C}from"class-variance-authority";import{clsx as H}from"clsx";import{Children as M,cloneElement as T,forwardRef as V,isValidElement as E}from"react";import N from"tiny-invariant";import{Fragment as z,jsx as t,jsxs as R}from"react/jsx-runtime";var A=H("icon-button","inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border","focus:outline-hidden focus-visible:ring-4","disabled:cursor-default disabled:opacity-50","not-disabled:active:scale-[0.97]"),L=C("",{variants:{appearance:{ghost:"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent",outlined:"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600"},isLoading:{false:"",true:"opacity-50"},size:{xs:"size-6",sm:"size-7",md:"size-9"}},defaultVariants:{appearance:"outlined",size:"md"}}),P=V(({"aria-disabled":c,appearance:u,asChild:b=!1,children:o,className:p,disabled:m,icon:f,isLoading:e=!1,label:v,size:a,type:h,...B},g)=>{let n=l(c??m??e),y=e?t(x,{className:"animate-spin"}):f,s={"aria-disabled":n,className:r(A,L({appearance:u,isLoading:e,size:a}),p),"data-disabled":n,"data-icon-button":!0,"data-loading":e,"data-size":a,disabled:n,ref:g,...B},i=R(z,{children:[t("span",{className:"sr-only",children:v}),t(d,{svg:y})]});return b?(N(E(o)&&M.only(o),"When using `asChild`, IconButton must be passed a single child as a JSX tag."),t(I,{...s,children:T(o,{},i)})):t("button",{...s,type:h,children:i})});P.displayName="IconButton";export{A as a,L as b,P as c};
2
- //# sourceMappingURL=chunk-QXNUFNG4.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/button/icon-button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { VariantProps, WithAsChild } from \"../../types/index.js\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\n\nconst baseIconButtonClasses = clsx(\n\t\"icon-button\",\n\t\"inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border\",\n\t\"focus:outline-hidden focus-visible:ring-4\",\n\t\"disabled:cursor-default disabled:opacity-50\",\n\t\"not-disabled:active:scale-[0.97]\",\n);\n\nconst iconButtonVariants = cva(\"\", {\n\tvariants: {\n\t\t/**\n\t\t * Defines the visual style of the Button.\n\t\t */\n\t\tappearance: {\n\t\t\tghost:\n\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t\toutlined:\n\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t},\n\t\t/**\n\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t * replace the `icon` with a spinner.\n\t\t * It will also disable user interaction with the button and set `aria-disabled`.\n\t\t */\n\t\tisLoading: {\n\t\t\tfalse: \"\",\n\t\t\ttrue: \"opacity-50\",\n\t\t},\n\t\t/**\n\t\t * The size of the IconButton.\n\t\t */\n\t\tsize: {\n\t\t\txs: \"size-6\",\n\t\t\tsm: \"size-7\",\n\t\t\tmd: \"size-9\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tappearance: \"outlined\",\n\t\tsize: \"md\",\n\t},\n});\n\ntype IconButtonVariants = VariantProps<typeof iconButtonVariants>;\n\n/**\n * The props for the `Button` component.\n */\ntype IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tWithAsChild &\n\tIconButtonVariants & {\n\t\t/**\n\t\t * The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.\n\t\t */\n\t\tlabel: string;\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon: ReactNode;\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t\t }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<\n\t\t\t\t\tButtonHTMLAttributes<HTMLButtonElement>[\"type\"],\n\t\t\t\t\tundefined\n\t\t\t\t>;\n\t\t }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n * Renders only a single icon as children with an accessible, screen-reader-only label.\n *\n * @see https://mantle.ngrok.com/components/button#api-icon-button\n *\n * @example\n * ```tsx\n * <IconButton\n * type=\"button\"\n * icon={<TrashIcon />}\n * label=\"Delete item\"\n * appearance=\"ghost\"\n * size=\"sm\"\n * />\n * ```\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\tisLoading = false,\n\t\t\tlabel,\n\t\t\tsize,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? (\n\t\t\t<CircleNotchIcon className=\"animate-spin\" />\n\t\t) : (\n\t\t\tpropIcon\n\t\t);\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\tclassName: cx(\n\t\t\t\tbaseIconButtonClasses,\n\t\t\t\ticonButtonVariants({ appearance, isLoading, size }),\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\t\"data-disabled\": disabled,\n\t\t\t\"data-icon-button\": true,\n\t\t\t\"data-loading\": isLoading,\n\t\t\t\"data-size\": size,\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tconst innerChildren = (\n\t\t\t<>\n\t\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t\t<Icon svg={icon} />\n\t\t\t</>\n\t\t);\n\n\t\tif (asChild) {\n\t\t\tinvariant(\n\t\t\t\tisValidElement(children) && Children.only(children),\n\t\t\t\t\"When using `asChild`, IconButton must be passed a single child as a JSX tag.\",\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{cloneElement(children, {}, innerChildren)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t{innerChildren}\n\t\t\t</button>\n\t\t);\n\t},\n);\nIconButton.displayName = \"IconButton\";\n\nexport {\n\t//,\n\tIconButton,\n\ticonButtonVariants,\n\tbaseIconButtonClasses,\n};\n\nexport type {\n\t//,\n\tIconButtonProps,\n};\n"],"mappings":"wHAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BACpB,OAAS,QAAAC,MAAY,OACrB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QAEnE,OAAOC,MAAe,iBAiKnB,OAsBA,YAAAC,EAtBA,OAAAC,EAsBA,QAAAC,MAtBA,oBA3JH,IAAMC,EAAwBC,EAC7B,cACA,8GACA,4CACA,8CACA,kCACD,EAEMC,EAAqBC,EAAI,GAAI,CAClC,SAAU,CAIT,WAAY,CACX,MACC,2MACD,SACC,wWACF,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAIA,KAAM,CACL,GAAI,SACJ,GAAI,SACJ,GAAI,QACL,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,KAAM,IACP,CACD,CAAC,EA8FKC,EAAaC,EAClB,CACC,CACC,gBAAiBC,EACjB,WAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EACA,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaE,CAAS,EAClEQ,EAAOR,EACZf,EAACwB,EAAA,CAAgB,UAAU,eAAe,EAE1CV,EAGKW,EAAc,CACnB,gBAAiBJ,EACjB,UAAWK,EACVxB,EACAE,EAAmB,CAAE,WAAAK,EAAY,UAAAM,EAAW,KAAAE,CAAK,CAAC,EAClDL,CACD,EACA,gBAAiBS,EACjB,mBAAoB,GACpB,eAAgBN,EAChB,YAAaE,EACb,SAAAI,EACA,IAAAD,EACA,GAAGD,CACJ,EAEMQ,EACL1B,EAAAF,EAAA,CACC,UAAAC,EAAC,QAAK,UAAU,UAAW,SAAAgB,EAAM,EACjChB,EAAC4B,EAAA,CAAK,IAAKL,EAAM,GAClB,EAGD,OAAIb,GACHmB,EACCC,EAAenB,CAAQ,GAAKoB,EAAS,KAAKpB,CAAQ,EAClD,8EACD,EAGCX,EAACgC,EAAA,CAAM,GAAGP,EACR,SAAAQ,EAAatB,EAAU,CAAC,EAAGgB,CAAa,EAC1C,GAKD3B,EAAC,UAAQ,GAAGyB,EAAa,KAAMP,EAC7B,SAAAS,EACF,CAEF,CACD,EACArB,EAAW,YAAc","names":["CircleNotchIcon","Slot","cva","clsx","Children","cloneElement","forwardRef","isValidElement","invariant","Fragment","jsx","jsxs","baseIconButtonClasses","clsx","iconButtonVariants","cva","IconButton","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","isLoading","label","size","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","buttonProps","cx","innerChildren","Icon","invariant","isValidElement","Children","Slot","cloneElement"]}
@@ -1,2 +0,0 @@
1
- import*as e from"@radix-ui/react-dialog";import{Slot as m}from"@radix-ui/react-slot";import{createContext as v,forwardRef as n,useContext as s,useEffect as D,useState as c}from"react";import{jsx as o}from"react/jsx-runtime";var l=v({hasDescription:!1,setHasDescription:()=>{}});function g(i){let[t,r]=c(!1);return o(l.Provider,{value:{hasDescription:t,setHasDescription:r},children:o(e.Root,{...i})})}g.displayName="DialogPrimitiveRoot";var f=e.Trigger;f.displayName="DialogPrimitiveTrigger";var P=e.Portal;P.displayName="DialogPrimitivePortal";var d=e.Close;d.displayName="DialogPrimitiveClose";var u=n((i,t)=>o(e.Overlay,{"data-overlay":!0,ref:t,...i}));u.displayName="DialogPrimitiveOverlay";var y=n((i,t)=>{let r=s(l);return o(e.Content,{ref:t,...r.hasDescription?{}:{"aria-describedby":void 0},...i})});y.displayName="DialogPrimitiveContent";var x=e.Title,C=n(({asChild:i,children:t,...r},p)=>{let a=s(l);return D(()=>(a.setHasDescription(!0),()=>a.setHasDescription(!1)),[a]),o(e.Description,{ref:p,asChild:!0,children:o(i?m:"div",{...r,children:t})})});C.displayName="DialogPrimitiveDescription";function T(i){return i instanceof HTMLElement?i.hasAttribute("data-overlay"):!1}export{g as a,f as b,P as c,d,u as e,y as f,x as g,C as h,T as i};
2
- //# sourceMappingURL=chunk-VIKPHWPP.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/dialog/primitive.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseEffect,\n\tuseState,\n} from \"react\";\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\n\t\t\tvalue={{ hasDescription, setHasDescription }}\n\t\t>\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\n/**\n * The main content container of the dialog primitive.\n * This is a low-level primitive used by higher-level dialog components.\n */\nconst Content = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>((props, ref) => {\n\tconst ctx = useContext(InternalDialogContext);\n\n\treturn (\n\t\t<DialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\t// If there's no description, we remove the default applied aria-describedby attribute from radix dialog\n\t\t\t{...(!ctx.hasDescription ? { \"aria-describedby\": undefined } : {})}\n\t\t\t{...props}\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"],"mappings":"AAEA,UAAYA,MAAqB,yBACjC,OAAS,QAAAC,MAAY,uBACrB,OAGC,iBAAAC,EACA,cAAAC,EACA,cAAAC,EACA,aAAAC,EACA,YAAAC,MACM,QAmBJ,cAAAC,MAAA,oBAZH,IAAMC,EAAwBN,EAA0C,CACvE,eAAgB,GAChB,kBAAmB,IAAM,CAAC,CAC3B,CAAC,EAED,SAASO,EAAKC,EAA8D,CAC3E,GAAM,CAACC,EAAgBC,CAAiB,EAAIN,EAAS,EAAK,EAE1D,OACCC,EAACC,EAAsB,SAAtB,CACA,MAAO,CAAE,eAAAG,EAAgB,kBAAAC,CAAkB,EAE3C,SAAAL,EAAiB,OAAhB,CAAsB,GAAGG,EAAO,EAClC,CAEF,CACAD,EAAK,YAAc,sBAEnB,IAAMI,EAA0B,UAChCA,EAAQ,YAAc,yBAEtB,IAAMC,EAAyB,SAC/BA,EAAO,YAAc,wBAErB,IAAMC,EAAwB,QAC9BA,EAAM,YAAc,uBAEpB,IAAMC,EAAUb,EAGd,CAACO,EAAOO,IACTV,EAAiB,UAAhB,CAKA,eAAY,GACZ,IAAKU,EACJ,GAAGP,EACL,CACA,EACDM,EAAQ,YAAc,yBAMtB,IAAME,EAAUf,EAGd,CAACO,EAAOO,IAAQ,CACjB,IAAME,EAAMf,EAAWI,CAAqB,EAE5C,OACCD,EAAiB,UAAhB,CACA,IAAKU,EAEJ,GAAKE,EAAI,eAAqD,CAAC,EAArC,CAAE,mBAAoB,MAAU,EAC1D,GAAGT,EACL,CAEF,CAAC,EACDQ,EAAQ,YAAc,yBAEtB,IAAME,EAAwB,QAOxBC,EAAclB,EAGlB,CAAC,CAAE,QAAAmB,EAAS,SAAAC,EAAU,GAAGb,CAAM,EAAGO,IAAQ,CAC3C,IAAME,EAAMf,EAAWI,CAAqB,EAE5C,OAAAH,EAAU,KACTc,EAAI,kBAAkB,EAAI,EACnB,IAAMA,EAAI,kBAAkB,EAAK,GACtC,CAACA,CAAG,CAAC,EAKPZ,EAAiB,cAAhB,CAA4B,IAAKU,EAAK,QAAO,GAC7C,SAAAV,EAJgBe,EAAUrB,EAAO,MAIhC,CAAW,GAAGS,EAAQ,SAAAa,EAAS,EACjC,CAEF,CAAC,EACDF,EAAY,YAAc,6BAK1B,SAASG,EAAsBC,EAAqC,CACnE,OAAIA,aAAkB,YACdA,EAAO,aAAa,cAAc,EAEnC,EACR","names":["DialogPrimitive","Slot","createContext","forwardRef","useContext","useEffect","useState","jsx","InternalDialogContext","Root","props","hasDescription","setHasDescription","Trigger","Portal","Close","Overlay","ref","Content","ctx","Title","Description","asChild","children","isDialogOverlayTarget","target"]}
@@ -1,2 +0,0 @@
1
- import{n as y}from"./chunk-VBNDWNIJ.js";import{a as p}from"./chunk-2NIR7PCL.js";import{a as n}from"./chunk-PFXFESEN.js";import{CheckCircleIcon as x}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as w}from"@phosphor-icons/react/Info";import{WarningIcon as A}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as I}from"@phosphor-icons/react/WarningDiamond";import{Slot as l}from"@radix-ui/react-slot";import{createContext as P,forwardRef as d,useContext as f}from"react";import*as c from"sonner";import{jsx as r,jsxs as k}from"react/jsx-runtime";var N=({className:t,containerAriaLabel:o,dir:e,duration_ms:s=4e3,position:i="top-center",style:a})=>{let m=y();return r(c.Toaster,{className:n("toaster overlay-prompt pointer-events-auto *:duration-200",t),containerAriaLabel:o,dir:e,duration:s,gap:12,position:i??"top-center",style:a,theme:m,toastOptions:{unstyled:!0}})};N.displayName="Toaster";var g=P("");function z(t,o){return c.toast.custom(e=>r(g.Provider,{value:e,children:t}),{duration:o?.duration_ms,...o?.id?{id:o.id}:{},unstyled:!0})}var T=P({priority:"info"}),v=d(({asChild:t,children:o,className:e,priority:s,...i},a)=>{let m=t?l:"div";return r(T.Provider,{value:{priority:s},children:k(m,{className:n("relative flex items-start gap-2 text-sm","p-3 pl-[0.9375rem]","bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg",e),ref:a,...i,children:[r(S,{priority:s}),o]})})});v.displayName="Toast";var h=d(({className:t,svg:o,...e},s)=>{let i=f(T);switch(i.priority){case"danger":return r(p,{className:n("text-danger-600",t),ref:s,svg:o??r(A,{weight:"fill"}),...e});case"warning":return r(p,{className:n("text-warning-600",t),ref:s,svg:o??r(I,{weight:"fill"}),...e});case"success":return r(p,{className:n("text-success-600",t),ref:s,svg:o??r(x,{weight:"fill"}),...e});case"info":return r(p,{className:n("text-accent-600",t),ref:s,svg:r(w,{weight:"fill"}),...e});default:throw new Error(`Unreachable Case: ${i.priority}`)}});h.displayName="ToastIcon";var C=d(({asChild:t,className:o,onClick:e,...s},i)=>{let a=f(g);return r(t?l:"button",{className:n("shrink-0","data-[icon-button]:-mr-0.5 data-[icon-button]:-mt-0.5 data-[icon-button]:rounded-xs",o),onClick:u=>{e?.(u),!u.defaultPrevented&&c.toast.dismiss(a)},ref:i,...s})});C.displayName="ToastAction";var b=d(({asChild:t,className:o,...e},s)=>r(t?l:"p",{className:n("text-strong flex-1 text-sm font-body",o),ref:s,...e}));b.displayName="ToastMessage";var F={Root:v,Action:C,Icon:h,Message:b};function U(t){t.target instanceof Element&&t.target.closest(".overlay-prompt")&&t.preventDefault()}var R={info:"bg-accent-600",warning:"bg-warning-600",success:"bg-success-600",danger:"bg-danger-600"};function S({className:t,priority:o,...e}){return r("div",{"aria-hidden":!0,className:n("z-1 absolute -inset-px right-auto w-1.5 rounded-l",R[o],t),...e})}export{N as a,z as b,F as c,U as d};
2
- //# sourceMappingURL=chunk-WY3TZBNK.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n} from \"react\";\nimport * as ToastPrimitive from \"sonner\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { WithStyleProps } from \"../../types/with-style-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon as IconComponent } from \"../icon/icon.js\";\nimport type { SvgOnlyProps } from \"../icon/svg-only.js\";\nimport { useAppliedTheme } from \"../theme/theme-provider.js\";\n\ntype ToasterPrimitiveProps = ComponentProps<typeof ToastPrimitive.Toaster>;\ntype ToasterPrimitiveTheme = ToasterPrimitiveProps[\"theme\"];\n\ntype ToasterProps = WithStyleProps &\n\tPick<ToasterPrimitiveProps, \"containerAriaLabel\" | \"dir\" | \"position\"> & {\n\t\t/**\n\t\t * Time in milliseconds that should elapse before automatically dismissing toasts.\n\t\t * When set here, this will be the default duration for all toasts.\n\t\t * @default 4000\n\t\t */\n\t\tduration_ms?: number;\n\t};\n\n/**\n * A container for displaying all toasts.\n *\n * Only one `<Toaster />` should be rendered in an app a time, preferably at the\n * root level of the app.\n *\n * @see https://mantle.ngrok.com/components/toast#api-toaster\n *\n * @example\n * ```tsx\n * <Toaster\n * position=\"top-right\"\n * duration_ms={5000}\n * />\n * ```\n */\nconst Toaster = ({\n\t//,\n\tclassName,\n\tcontainerAriaLabel,\n\tdir,\n\tduration_ms = 4000,\n\tposition = \"top-center\",\n\tstyle,\n}: ToasterProps) => {\n\tconst theme = useAppliedTheme();\n\n\treturn (\n\t\t<ToastPrimitive.Toaster\n\t\t\tclassName={cx(\n\t\t\t\t\"toaster overlay-prompt pointer-events-auto *:duration-200\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tcontainerAriaLabel={containerAriaLabel}\n\t\t\tdir={dir}\n\t\t\tduration={duration_ms}\n\t\t\tgap={12}\n\t\t\tposition={position ?? \"top-center\"}\n\t\t\tstyle={style}\n\t\t\ttheme={theme as ToasterPrimitiveTheme} // we have additional themes that are not in the sonner types, so we need to cast for now\n\t\t\ttoastOptions={{\n\t\t\t\tunstyled: true,\n\t\t\t}}\n\t\t/>\n\t);\n};\nToaster.displayName = \"Toaster\";\n\nconst ToastIdContext = createContext<string | number>(\"\");\n\ntype MakeToastOptions = {\n\t/**\n\t * Time in milliseconds that should elapse before automatically closing the toast.\n\t * Will default to the `<Toaster />`'s `duration_ms` if not provided.\n\t */\n\tduration_ms?: number;\n\t/**\n\t * An optional custom ID for this toast. If not given, a unique ID is provided for you.\n\t */\n\tid?: string;\n};\n\n/**\n * Create a toast. Provide a `<Toast.Root>` component as the `children` to be rendered\n * inside the `<Toaster />` section.\n *\n * @see https://mantle.ngrok.com/components/toast#api-make-toast\n *\n * @example\n * ```tsx\n * makeToast(\n * <Toast.Root priority=\"success\">\n * <Toast.Icon />\n * <Toast.Message>Operation completed successfully!</Toast.Message>\n * <Toast.Action>Dismiss</Toast.Action>\n * </Toast.Root>\n * );\n * ```\n */\nfunction makeToast(children: ReactNode, options?: MakeToastOptions) {\n\treturn ToastPrimitive.toast.custom(\n\t\t(toastId) => (\n\t\t\t<ToastIdContext.Provider value={toastId}>\n\t\t\t\t{children}\n\t\t\t</ToastIdContext.Provider>\n\t\t),\n\t\t{\n\t\t\t//\n\t\t\tduration: options?.duration_ms,\n\t\t\t// If a custom ID is provided, use it, else use the toastId provided by the sonner library\n\t\t\t// don't set an ID to `undefined` as it breaks the sonner library\n\t\t\t...(options?.id ? { id: options.id } : {}),\n\t\t\tunstyled: true,\n\t\t},\n\t);\n}\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"info\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\ntype ToastState = {\n\tpriority: Priority;\n};\n\nconst ToastStateContext = createContext<ToastState>({\n\tpriority: \"info\",\n});\n\ntype ToastProps = ComponentProps<\"div\"> &\n\tWithAsChild & {\n\t\tpriority: Priority;\n\t};\n\n/**\n * A succinct message with a priority that is displayed temporarily.\n * Toasts are used to provide feedback to the user without interrupting their workflow.\n *\n * @see https://mantle.ngrok.com/components/toast#api-toast\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"success\">\n * <Toast.Icon />\n * <Toast.Message>Changes saved successfully!</Toast.Message>\n * <Toast.Action>Undo</Toast.Action>\n * </Toast.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, ToastProps>(\n\t({ asChild, children, className, priority, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<ToastStateContext.Provider value={{ priority }}>\n\t\t\t\t<Component\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"relative flex items-start gap-2 text-sm\",\n\t\t\t\t\t\t\"p-3 pl-[0.9375rem]\",\n\t\t\t\t\t\t\"bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg\",\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Do not apply overflow-hidden because we want the priority bar accent\n\t\t\t\t\t\t * to overlap the toast border, else the border flows over the\n\t\t\t\t\t\t * priority bar.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<PriorityBarAccent priority={priority} />\n\t\t\t\t\t{children}\n\t\t\t\t</Component>\n\t\t\t</ToastStateContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"Toast\";\n\ntype ToastIconProps = Partial<SvgOnlyProps>;\n\n/**\n * An icon that visually represents the priority of the toast.\n * If you do not provide an icon, the default icon and color for the priority is used.\n *\n * @see https://mantle.ngrok.com/components/toast#api-toast-icon\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"warning\">\n * <Toast.Icon />\n * <Toast.Message>Warning message</Toast.Message>\n * </Toast.Root>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, ToastIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useContext(ToastStateContext);\n\n\t\tswitch (ctx.priority) {\n\t\t\tcase \"danger\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tclassName={cx(\"text-danger-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <WarningIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"warning\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tclassName={cx(\"text-warning-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <WarningDiamondIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"success\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tclassName={cx(\"text-success-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <CheckCircleIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"info\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\t//\n\t\t\t\t\t\tclassName={cx(\"text-accent-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={<InfoIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tdefault:\n\t\t\t\tthrow new Error(`Unreachable Case: ${ctx.priority}`);\n\t\t}\n\t},\n);\nIcon.displayName = \"ToastIcon\";\n\ntype ToastActionProps = ComponentProps<\"button\"> & WithAsChild;\n\n/**\n * A button that dismisses the toast when clicked.\n * You can prevent the toast from being dismissed `onClick` by calling `event.preventDefault()`\n *\n * @see https://mantle.ngrok.com/components/toast#api-toast-action\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"info\">\n * <Toast.Icon />\n * <Toast.Message>File uploaded successfully</Toast.Message>\n * <Toast.Action>View File</Toast.Action>\n * </Toast.Root>\n * ```\n */\nconst Action = forwardRef<ComponentRef<\"button\">, ToastActionProps>(\n\t({ asChild, className, onClick, ...props }, ref) => {\n\t\tconst ctx = useContext(ToastIdContext);\n\n\t\tconst Component = asChild ? Slot : \"button\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\n\t\t\t\t\t//,\n\t\t\t\t\t\"shrink-0\",\n\t\t\t\t\t// 👇 wiggle the bits so that icon buttons toast actions are aligned with the toast icon\n\t\t\t\t\t\"data-[icon-button]:-mr-0.5 data-[icon-button]:-mt-0.5 data-[icon-button]:rounded-xs\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tToastPrimitive.toast.dismiss(ctx);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAction.displayName = \"ToastAction\";\n\ntype ToastMessageProps = ComponentProps<\"p\"> & WithAsChild;\n\n/**\n * The message content of the toast.\n *\n * @see https://mantle.ngrok.com/components/toast#api-toast-message\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"success\">\n * <Toast.Icon />\n * <Toast.Message>Your changes have been saved</Toast.Message>\n * </Toast.Root>\n * ```\n */\nconst Message = forwardRef<ComponentRef<\"p\">, ToastMessageProps>(\n\t({ asChild, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"p\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\t//\n\t\t\t\tclassName={cx(\"text-strong flex-1 text-sm font-body\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nMessage.displayName = \"ToastMessage\";\n\n/**\n * A succinct message that is displayed temporarily. Toasts are used to provide\n * feedback to the user without interrupting their workflow.\n *\n * @see https://mantle.ngrok.com/components/toast\n *\n * @example\n * ```tsx\n * makeToast(\n * <Toast.Root priority=\"success\">\n * <Toast.Icon />\n * <Toast.Message>Operation completed successfully!</Toast.Message>\n * <Toast.Action>Dismiss</Toast.Action>\n * </Toast.Root>\n * );\n * ```\n */\nconst Toast = {\n\t/**\n\t * A succinct message with a priority that is displayed temporarily.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#api-toast-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"success\">\n\t * <Toast.Icon />\n\t * <Toast.Message>Changes saved successfully!</Toast.Message>\n\t * <Toast.Action>Undo</Toast.Action>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A button that dismisses the toast when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#api-toast-action\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"info\">\n\t * <Toast.Icon />\n\t * <Toast.Message>File uploaded successfully</Toast.Message>\n\t * <Toast.Action>View File</Toast.Action>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tAction,\n\t/**\n\t * An icon that visually represents the priority of the toast.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#api-toast-icon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"warning\">\n\t * <Toast.Icon />\n\t * <Toast.Message>Warning message</Toast.Message>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The message content of the toast.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#api-toast-message\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"success\">\n\t * <Toast.Icon />\n\t * <Toast.Message>Your changes have been saved</Toast.Message>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tMessage,\n} as const;\n\nexport {\n\t//,\n\tmakeToast,\n\tToast,\n\tToaster,\n};\n\nexport type {\n\t//,\n\tPriority,\n};\n\n/**\n * @private\n *\n * Allows any mantle floating prompt (e.g. toasts and notifications) to be interacted with\n * even when a modaled view (e.g. dialog, sheet, etc) is open and a focus trap is active.\n *\n * Without this, interacting with the prompt would close the modaled view.\n *\n * @example\n * ```tsx\n * <Dialog.Root onInteractOutside={preventCloseOnPromptInteraction}>\n * <Dialog.Content>\n * <p>Dialog content</p>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nexport function preventCloseOnPromptInteraction(\n\tevent: CustomEvent | PointerEvent | MouseEvent | TouchEvent | FocusEvent,\n) {\n\tif (!(event.target instanceof Element)) {\n\t\treturn;\n\t}\n\n\tif (event.target.closest(\".overlay-prompt\")) {\n\t\tevent.preventDefault();\n\t}\n}\n\nconst priorityBackgroundColor = {\n\tinfo: \"bg-accent-600\",\n\twarning: \"bg-warning-600\",\n\tsuccess: \"bg-success-600\",\n\tdanger: \"bg-danger-600\",\n} as const satisfies Record<Priority, string>;\n\ntype PriorityBarAccentProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n\tpriority: Priority;\n};\n\n/**\n * @private\n *\n * A colored bar that visually represents the priority of the toast.\n */\nfunction PriorityBarAccent({\n\tclassName,\n\tpriority,\n\t...props\n}: PriorityBarAccentProps) {\n\treturn (\n\t\t<div\n\t\t\taria-hidden\n\t\t\tclassName={cx(\n\t\t\t\t//\n\t\t\t\t\"z-1 absolute -inset-px right-auto w-1.5 rounded-l\",\n\t\t\t\tpriorityBackgroundColor[priority],\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":"wHAEA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,YAAAC,MAAgB,6BACzB,OAAS,eAAAC,MAAmB,gCAC5B,OAAS,sBAAAC,MAA0B,uCACnC,OAAS,QAAAC,MAAY,uBACrB,OAIC,iBAAAC,EACA,cAAAC,EACA,cAAAC,MACM,QACP,UAAYC,MAAoB,SAiD9B,cAAAC,EAgHE,QAAAC,MAhHF,oBAZF,IAAMC,EAAU,CAAC,CAEhB,UAAAC,EACA,mBAAAC,EACA,IAAAC,EACA,YAAAC,EAAc,IACd,SAAAC,EAAW,aACX,MAAAC,CACD,IAAoB,CACnB,IAAMC,EAAQC,EAAgB,EAE9B,OACCV,EAAgB,UAAf,CACA,UAAWW,EACV,4DACAR,CACD,EACA,mBAAoBC,EACpB,IAAKC,EACL,SAAUC,EACV,IAAK,GACL,SAAUC,GAAY,aACtB,MAAOC,EACP,MAAOC,EACP,aAAc,CACb,SAAU,EACX,EACD,CAEF,EACAP,EAAQ,YAAc,UAEtB,IAAMU,EAAiBC,EAA+B,EAAE,EA+BxD,SAASC,EAAUC,EAAqBC,EAA4B,CACnE,OAAsB,QAAM,OAC1BC,GACAjB,EAACY,EAAe,SAAf,CAAwB,MAAOK,EAC9B,SAAAF,EACF,EAED,CAEC,SAAUC,GAAS,YAGnB,GAAIA,GAAS,GAAK,CAAE,GAAIA,EAAQ,EAAG,EAAI,CAAC,EACxC,SAAU,EACX,CACD,CACD,CAeA,IAAME,EAAoBC,EAA0B,CACnD,SAAU,MACX,CAAC,EAsBKC,EAAOC,EACZ,CAAC,CAAE,QAAAC,EAAS,SAAAC,EAAU,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CAC9D,IAAMC,EAAYN,EAAUO,EAAO,MAEnC,OACCC,EAACZ,EAAkB,SAAlB,CAA2B,MAAO,CAAE,SAAAO,CAAS,EAC7C,SAAAM,EAACH,EAAA,CACA,UAAWI,EACV,0CACA,qBACA,4GAMAR,CACD,EACA,IAAKG,EACJ,GAAGD,EAEJ,UAAAI,EAACG,EAAA,CAAkB,SAAUR,EAAU,EACtCF,GACF,EACD,CAEF,CACD,EACAH,EAAK,YAAc,QAkBnB,IAAMc,EAAOb,EACZ,CAAC,CAAE,UAAAG,EAAW,IAAAW,EAAK,GAAGT,CAAM,EAAGC,IAAQ,CACtC,IAAMS,EAAMC,EAAWnB,CAAiB,EAExC,OAAQkB,EAAI,SAAU,CACrB,IAAK,SACJ,OACCN,EAACI,EAAA,CACA,UAAWF,EAAG,kBAAmBR,CAAS,EAC1C,IAAKG,EACL,IAAKQ,GAAOL,EAACQ,EAAA,CAAY,OAAO,OAAO,EACtC,GAAGZ,EACL,EAEF,IAAK,UACJ,OACCI,EAACI,EAAA,CACA,UAAWF,EAAG,mBAAoBR,CAAS,EAC3C,IAAKG,EACL,IAAKQ,GAAOL,EAACS,EAAA,CAAmB,OAAO,OAAO,EAC7C,GAAGb,EACL,EAEF,IAAK,UACJ,OACCI,EAACI,EAAA,CACA,UAAWF,EAAG,mBAAoBR,CAAS,EAC3C,IAAKG,EACL,IAAKQ,GAAOL,EAACU,EAAA,CAAgB,OAAO,OAAO,EAC1C,GAAGd,EACL,EAEF,IAAK,OACJ,OACCI,EAACI,EAAA,CAEA,UAAWF,EAAG,kBAAmBR,CAAS,EAC1C,IAAKG,EACL,IAAKG,EAACW,EAAA,CAAS,OAAO,OAAO,EAC5B,GAAGf,EACL,EAEF,QACC,MAAM,IAAI,MAAM,qBAAqBU,EAAI,QAAQ,EAAE,CACrD,CACD,CACD,EACAF,EAAK,YAAc,YAmBnB,IAAMQ,EAASrB,EACd,CAAC,CAAE,QAAAC,EAAS,UAAAE,EAAW,QAAAmB,EAAS,GAAGjB,CAAM,EAAGC,IAAQ,CACnD,IAAMS,EAAMC,EAAWO,CAAc,EAIrC,OACCd,EAHiBR,EAAUO,EAAO,SAGjC,CACA,UAAWG,EAEV,WAEA,sFACAR,CACD,EACA,QAAUqB,GAAU,CACnBF,IAAUE,CAAK,EACX,CAAAA,EAAM,kBAGK,QAAM,QAAQT,CAAG,CACjC,EACA,IAAKT,EACJ,GAAGD,EACL,CAEF,CACD,EACAgB,EAAO,YAAc,cAiBrB,IAAMI,EAAUzB,EACf,CAAC,CAAE,QAAAC,EAAS,UAAAE,EAAW,GAAGE,CAAM,EAAGC,IAIjCG,EAHiBR,EAAUO,EAAO,IAGjC,CAEA,UAAWG,EAAG,uCAAwCR,CAAS,EAC/D,IAAKG,EACJ,GAAGD,EACL,CAGH,EACAoB,EAAQ,YAAc,eAmBtB,IAAMC,EAAQ,CAeb,KAAA3B,EAeA,OAAAsB,EAcA,KAAAR,EAcA,QAAAY,CACD,EA+BO,SAASE,EACfC,EACC,CACKA,EAAM,kBAAkB,SAI1BA,EAAM,OAAO,QAAQ,iBAAiB,GACzCA,EAAM,eAAe,CAEvB,CAEA,IAAMC,EAA0B,CAC/B,KAAM,gBACN,QAAS,iBACT,QAAS,iBACT,OAAQ,eACT,EAWA,SAASC,EAAkB,CAC1B,UAAAC,EACA,SAAAC,EACA,GAAGC,CACJ,EAA2B,CAC1B,OACCC,EAAC,OACA,cAAW,GACX,UAAWC,EAEV,oDACAN,EAAwBG,CAAQ,EAChCD,CACD,EACC,GAAGE,EACL,CAEF","names":["CheckCircleIcon","InfoIcon","WarningIcon","WarningDiamondIcon","Slot","createContext","forwardRef","useContext","ToastPrimitive","jsx","jsxs","Toaster","className","containerAriaLabel","dir","duration_ms","position","style","theme","useAppliedTheme","cx","ToastIdContext","createContext","makeToast","children","options","toastId","ToastStateContext","createContext","Root","forwardRef","asChild","children","className","priority","props","ref","Component","Slot","jsx","jsxs","cx","PriorityBarAccent","Icon","svg","ctx","useContext","WarningIcon","WarningDiamondIcon","CheckCircleIcon","InfoIcon","Action","onClick","ToastIdContext","event","Message","Toast","preventCloseOnPromptInteraction","event","priorityBackgroundColor","PriorityBarAccent","className","priority","props","jsx","cx"]}