@ngrok/mantle 0.63.2 → 0.64.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 (155) hide show
  1. package/dist/accordion.d.ts +1 -1
  2. package/dist/accordion.js +1 -1
  3. package/dist/accordion.js.map +1 -1
  4. package/dist/alert-dialog.d.ts +13 -13
  5. package/dist/alert-dialog.js +1 -1
  6. package/dist/alert-dialog.js.map +1 -1
  7. package/dist/alert.d.ts +7 -7
  8. package/dist/alert.js +1 -1
  9. package/dist/alert.js.map +1 -1
  10. package/dist/anchor.d.ts +1 -1
  11. package/dist/anchor.js +1 -1
  12. package/dist/anchor.js.map +1 -1
  13. package/dist/badge.d.ts +1 -1
  14. package/dist/badge.js +1 -1
  15. package/dist/badge.js.map +1 -1
  16. package/dist/{button-DQcrsUyD.d.ts → button-DLUUf_c-.d.ts} +1 -1
  17. package/dist/button.d.ts +2 -2
  18. package/dist/button.js +1 -1
  19. package/dist/calendar.js +1 -1
  20. package/dist/card.d.ts +5 -5
  21. package/dist/card.js +1 -1
  22. package/dist/card.js.map +1 -1
  23. package/dist/checkbox.d.ts +1 -1
  24. package/dist/checkbox.js.map +1 -1
  25. package/dist/{chunk-TS7XNZ62.js → chunk-5XDZE2OU.js} +2 -2
  26. package/dist/chunk-5XDZE2OU.js.map +1 -0
  27. package/dist/chunk-ADF5DAYG.js +2 -0
  28. package/dist/chunk-ADF5DAYG.js.map +1 -0
  29. package/dist/{chunk-U32WN4A7.js → chunk-CBRSMQ26.js} +2 -2
  30. package/dist/{chunk-U32WN4A7.js.map → chunk-CBRSMQ26.js.map} +1 -1
  31. package/dist/{chunk-NQZYWYVH.js → chunk-ELZLLG6G.js} +2 -2
  32. package/dist/{chunk-73DPYKW5.js → chunk-HLRTYX4G.js} +2 -2
  33. package/dist/chunk-HLRTYX4G.js.map +1 -0
  34. package/dist/{chunk-SBVSECWW.js → chunk-IVQ626TU.js} +2 -2
  35. package/dist/chunk-IVQ626TU.js.map +1 -0
  36. package/dist/chunk-LB366VCO.js +2 -0
  37. package/dist/chunk-LB366VCO.js.map +1 -0
  38. package/dist/{chunk-LURP5WQR.js → chunk-MLXONRJD.js} +2 -2
  39. package/dist/chunk-MLXONRJD.js.map +1 -0
  40. package/dist/{chunk-3ESTDWHQ.js → chunk-QK3NV2Q3.js} +2 -2
  41. package/dist/chunk-QK3NV2Q3.js.map +1 -0
  42. package/dist/{chunk-5M264XXH.js → chunk-RED6SFAV.js} +1 -1
  43. package/dist/chunk-RED6SFAV.js.map +1 -0
  44. package/dist/{chunk-NZ6DRFAL.js → chunk-SBQHQ2SJ.js} +1 -1
  45. package/dist/chunk-SBQHQ2SJ.js.map +1 -0
  46. package/dist/{chunk-QWZXK2IF.js → chunk-W5A5HSFE.js} +2 -2
  47. package/dist/{chunk-QWZXK2IF.js.map → chunk-W5A5HSFE.js.map} +1 -1
  48. package/dist/{chunk-KVXXQCAI.js → chunk-ZS2HEB67.js} +2 -2
  49. package/dist/chunk-ZS2HEB67.js.map +1 -0
  50. package/dist/code-block.d.ts +9 -9
  51. package/dist/code-block.js +2 -2
  52. package/dist/code-block.js.map +1 -1
  53. package/dist/code.d.ts +1 -1
  54. package/dist/code.js.map +1 -1
  55. package/dist/combobox.d.ts +8 -8
  56. package/dist/combobox.js +1 -1
  57. package/dist/combobox.js.map +1 -1
  58. package/dist/command.d.ts +18 -21
  59. package/dist/command.js +1 -1
  60. package/dist/command.js.map +1 -1
  61. package/dist/data-table.d.ts +13 -13
  62. package/dist/data-table.js +1 -1
  63. package/dist/data-table.js.map +1 -1
  64. package/dist/description-list.d.ts +4 -4
  65. package/dist/description-list.js +1 -1
  66. package/dist/description-list.js.map +1 -1
  67. package/dist/dialog.d.ts +13 -13
  68. package/dist/dialog.js +1 -1
  69. package/dist/dropdown-menu.d.ts +14 -14
  70. package/dist/dropdown-menu.js +1 -1
  71. package/dist/flag.d.ts +1 -1
  72. package/dist/flag.js.map +1 -1
  73. package/dist/hooks.d.ts +2 -2
  74. package/dist/hooks.js +1 -1
  75. package/dist/hooks.js.map +1 -1
  76. package/dist/hover-card.d.ts +4 -4
  77. package/dist/hover-card.js.map +1 -1
  78. package/dist/{icon-CkvpQ4BK.d.ts → icon-DXTMiV1L.d.ts} +1 -1
  79. package/dist/{icon-button-D4BTvC7F.d.ts → icon-button-CT71Ti9V.d.ts} +1 -1
  80. package/dist/icon.d.ts +2 -2
  81. package/dist/icon.js +1 -1
  82. package/dist/icons.d.ts +20 -2
  83. package/dist/icons.js +1 -1
  84. package/dist/icons.js.map +1 -1
  85. package/dist/input.d.ts +3 -3
  86. package/dist/input.js +1 -1
  87. package/dist/input.js.map +1 -1
  88. package/dist/label.d.ts +1 -1
  89. package/dist/label.js.map +1 -1
  90. package/dist/media-object.d.ts +3 -3
  91. package/dist/media-object.js +1 -1
  92. package/dist/media-object.js.map +1 -1
  93. package/dist/pagination.d.ts +6 -6
  94. package/dist/pagination.js +1 -1
  95. package/dist/pagination.js.map +1 -1
  96. package/dist/popover.d.ts +5 -5
  97. package/dist/popover.js.map +1 -1
  98. package/dist/radio-group.d.ts +11 -11
  99. package/dist/radio-group.js +1 -1
  100. package/dist/radio-group.js.map +1 -1
  101. package/dist/sandboxed-on-click.d.ts +2 -2
  102. package/dist/sandboxed-on-click.js +1 -1
  103. package/dist/sandboxed-on-click.js.map +1 -1
  104. package/dist/select.d.ts +8 -8
  105. package/dist/select.js +1 -1
  106. package/dist/separator.d.ts +2 -2
  107. package/dist/separator.js +1 -1
  108. package/dist/sheet.d.ts +13 -13
  109. package/dist/sheet.js +1 -1
  110. package/dist/sheet.js.map +1 -1
  111. package/dist/skeleton.d.ts +1 -1
  112. package/dist/skeleton.js +1 -1
  113. package/dist/skeleton.js.map +1 -1
  114. package/dist/slider.d.ts +75 -0
  115. package/dist/slider.js +2 -0
  116. package/dist/slider.js.map +1 -0
  117. package/dist/slot.d.ts +1 -1
  118. package/dist/slot.js +1 -1
  119. package/dist/split-button.d.ts +8 -8
  120. package/dist/split-button.js +1 -1
  121. package/dist/split-button.js.map +1 -1
  122. package/dist/{svg-only-Bj2yffO4.d.ts → svg-only-Cp8Mu_sh.d.ts} +1 -1
  123. package/dist/switch.d.ts +1 -1
  124. package/dist/switch.js.map +1 -1
  125. package/dist/table.d.ts +9 -9
  126. package/dist/table.js +1 -1
  127. package/dist/tabs.d.ts +5 -5
  128. package/dist/tabs.js.map +1 -1
  129. package/dist/text-area.d.ts +1 -1
  130. package/dist/text-area.js.map +1 -1
  131. package/dist/theme.d.ts +28 -2
  132. package/dist/theme.js +1 -1
  133. package/dist/toast.d.ts +7 -7
  134. package/dist/toast.js +1 -1
  135. package/dist/tooltip.d.ts +6 -6
  136. package/dist/tooltip.js.map +1 -1
  137. package/package.json +11 -12
  138. package/dist/auto-scroll-to-hash.d.ts +0 -70
  139. package/dist/auto-scroll-to-hash.js +0 -2
  140. package/dist/auto-scroll-to-hash.js.map +0 -1
  141. package/dist/chunk-3ESTDWHQ.js.map +0 -1
  142. package/dist/chunk-5M264XXH.js.map +0 -1
  143. package/dist/chunk-73DPYKW5.js.map +0 -1
  144. package/dist/chunk-KVXXQCAI.js.map +0 -1
  145. package/dist/chunk-LURP5WQR.js.map +0 -1
  146. package/dist/chunk-NZ6DRFAL.js.map +0 -1
  147. package/dist/chunk-ODDNPNLN.js +0 -2
  148. package/dist/chunk-ODDNPNLN.js.map +0 -1
  149. package/dist/chunk-SBVSECWW.js.map +0 -1
  150. package/dist/chunk-SMYI7SUP.js +0 -2
  151. package/dist/chunk-SMYI7SUP.js.map +0 -1
  152. package/dist/chunk-TS7XNZ62.js.map +0 -1
  153. package/dist/chunk-ZYMZVPDT.js +0 -2
  154. package/dist/chunk-ZYMZVPDT.js.map +0 -1
  155. /package/dist/{chunk-NQZYWYVH.js.map → chunk-ELZLLG6G.js.map} +0 -0
package/dist/anchor.d.ts CHANGED
@@ -43,7 +43,7 @@ type AnchorProps = Omit<ComponentProps<"a">, "rel"> & WithAsChild & {
43
43
  * @note If you need to link to an internal application route, prefer using the
44
44
  * [`react-router` `<Link>`](https://reactrouter.com/en/main/components/link)
45
45
  *
46
- * @see https://mantle.ngrok.com/components/anchor#api-anchor
46
+ * @see https://mantle.ngrok.com/components/anchor
47
47
  *
48
48
  * @example
49
49
  * ```tsx
package/dist/anchor.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as n}from"./chunk-SBVSECWW.js";import{a as c}from"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import{a as m}from"./chunk-PFXFESEN.js";import{Children as C,cloneElement as v,forwardRef as N,isValidElement as b}from"react";import x from"tiny-invariant";import{Fragment as P,jsx as o,jsxs as d}from"react/jsx-runtime";var f=r=>m("cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent",r),u=N(({asChild:r,children:t,className:a,rel:l,icon:e,iconPlacement:s="start",...g},R)=>{let y=h(l),p={className:f(a),ref:R,rel:y,...g};if(r){let i=C.only(t);x(b(i),"When using `asChild`, Anchor must be passed a single child as a JSX tag.");let A=i.props?.children;return o(c,{...p,children:v(i,{},d(P,{children:[e&&s==="start"&&o(n,{className:"inline-block mr-1.5",svg:e}),A,e&&s==="end"&&o(n,{className:"inline-block ml-1.5",svg:e})]}))})}return d("a",{...p,children:[e&&s==="start"&&o(n,{className:"inline-block mr-1.5",svg:e}),t,e&&s==="end"&&o(n,{className:"inline-block ml-1.5",svg:e})]})});u.displayName="Anchor";function h(r){return Array.isArray(r)?[...new Set(r)].map(l=>l?.trim()).filter(Boolean).sort().join(" ")||void 0:r?.trim()||void 0}export{u as Anchor,f as anchorClassNames,h as resolveRel};
1
+ import{a as n}from"./chunk-IVQ626TU.js";import{a as c}from"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import{a as m}from"./chunk-PFXFESEN.js";import{Children as C,cloneElement as v,forwardRef as N,isValidElement as b}from"react";import x from"tiny-invariant";import{Fragment as P,jsx as o,jsxs as d}from"react/jsx-runtime";var f=r=>m("cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent",r),u=N(({asChild:r,children:t,className:a,rel:l,icon:e,iconPlacement:s="start",...g},R)=>{let y=h(l),p={className:f(a),ref:R,rel:y,...g};if(r){let i=C.only(t);x(b(i),"When using `asChild`, Anchor must be passed a single child as a JSX tag.");let A=i.props?.children;return o(c,{...p,children:v(i,{},d(P,{children:[e&&s==="start"&&o(n,{className:"inline-block mr-1.5",svg:e}),A,e&&s==="end"&&o(n,{className:"inline-block ml-1.5",svg:e})]}))})}return d("a",{...p,children:[e&&s==="start"&&o(n,{className:"inline-block mr-1.5",svg:e}),t,e&&s==="end"&&o(n,{className:"inline-block ml-1.5",svg:e})]})});u.displayName="Anchor";function h(r){return Array.isArray(r)?[...new Set(r)].map(l=>l?.trim()).filter(Boolean).sort().join(" ")||void 0:r?.trim()||void 0}export{u as Anchor,f as anchorClassNames,h as resolveRel};
2
2
  //# sourceMappingURL=anchor.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/anchor/anchor.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Slot } from \"../slot/index.js\";\nimport type { Rel } from \"./types.js\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className?: string) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<ComponentProps<\"a\">, \"rel\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * An icon to render inside the anchor\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\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];\n\t};\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router` `<Link>`](https://reactrouter.com/en/main/components/link)\n *\n * @see https://mantle.ngrok.com/components/anchor#api-anchor\n *\n * @example\n * ```tsx\n * <Anchor href=\"https://ngrok.com/\">ngrok.com</Anchor>\n *\n * <Anchor href=\"https://ngrok.com/docs\" target=\"_blank\" icon={<Book />}>\n * ngrok docs\n * </Anchor>\n * ```\n */\nconst Anchor = forwardRef<ComponentRef<\"a\">, AnchorProps>(\n\t(\n\t\t{ asChild, children, className, rel: propRel, icon, iconPlacement = \"start\", ...props },\n\t\tref,\n\t) => {\n\t\tconst rel = resolveRel(propRel);\n\t\tconst componentProps = {\n\t\t\tclassName: anchorClassNames(className),\n\t\t\tref,\n\t\t\trel,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<AnchorProps>(singleChild),\n\t\t\t\t\"When using `asChild`, Anchor must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\treturn (\n\t\t\t\t<Slot {...componentProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tsingleChild,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && iconPlacement === \"start\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block mr-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t\t{icon && iconPlacement === \"end\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block ml-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<a {...componentProps}>\n\t\t\t\t{icon && iconPlacement === \"start\" && <Icon className=\"inline-block mr-1.5\" svg={icon} />}\n\t\t\t\t{children}\n\t\t\t\t{icon && iconPlacement === \"end\" && <Icon className=\"inline-block ml-1.5\" svg={icon} />}\n\t\t\t</a>\n\t\t);\n\t},\n);\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(\n\trel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[],\n) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.sort()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\treturn rel?.trim() || undefined;\n}\n\nexport {\n\t//,\n\tAnchor,\n\tanchorClassNames,\n\tresolveRel,\n};\n\nexport type {\n\t//,\n\tAnchorProps,\n};\n"],"mappings":"oJACA,OAAS,YAAAA,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QACnE,OAAOC,MAAe,iBAmFhB,mBAAAC,EAEE,OAAAC,EAFF,QAAAC,MAAA,oBAzEN,IAAMC,EAAoBC,GACzBC,EACC,kJACAD,CACD,EA2CKE,EAASC,EACd,CACC,CAAE,QAAAC,EAAS,SAAAC,EAAU,UAAAL,EAAW,IAAKM,EAAS,KAAAC,EAAM,cAAAC,EAAgB,QAAS,GAAGC,CAAM,EACtFC,IACI,CACJ,IAAMC,EAAMC,EAAWN,CAAO,EACxBO,EAAiB,CACtB,UAAWd,EAAiBC,CAAS,EACrC,IAAAU,EACA,IAAAC,EACA,GAAGF,CACJ,EAEA,GAAIL,EAAS,CACZ,IAAMU,EAAcC,EAAS,KAAKV,CAAQ,EAC1CW,EACCC,EAA4BH,CAAW,EACvC,0EACD,EACA,IAAMI,EAAgBJ,EAAY,OAAO,SAEzC,OACCjB,EAACsB,EAAA,CAAM,GAAGN,EACR,SAAAO,EACAN,EACA,CAAC,EACDhB,EAAAF,EAAA,CACE,UAAAW,GAAQC,IAAkB,SAC1BX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,EAEjDW,EACAX,GAAQC,IAAkB,OAC1BX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,GAEnD,CACD,EACD,CAEF,CAEA,OACCT,EAAC,KAAG,GAAGe,EACL,UAAAN,GAAQC,IAAkB,SAAWX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,EACtFF,EACAE,GAAQC,IAAkB,OAASX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,GACtF,CAEF,CACD,EACAL,EAAO,YAAc,SAOrB,SAASU,EACRD,EACC,CACD,OAAI,MAAM,QAAQA,CAAG,EAEL,CAAC,GADE,IAAI,IAAIA,CAAG,CACD,EAC1B,IAAKW,GAASA,GAAM,KAAK,CAAC,EAC1B,OAAO,OAAO,EACd,KAAK,EACL,KAAK,GAAG,GACO,OAGXX,GAAK,KAAK,GAAK,MACvB","names":["Children","cloneElement","forwardRef","isValidElement","invariant","Fragment","jsx","jsxs","anchorClassNames","className","cx","Anchor","forwardRef","asChild","children","propRel","icon","iconPlacement","props","ref","rel","resolveRel","componentProps","singleChild","Children","invariant","isValidElement","grandchildren","Slot","cloneElement","Icon","item"]}
1
+ {"version":3,"sources":["../src/components/anchor/anchor.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Slot } from \"../slot/index.js\";\nimport type { Rel } from \"./types.js\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className?: string) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<ComponentProps<\"a\">, \"rel\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * An icon to render inside the anchor\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\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];\n\t};\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router` `<Link>`](https://reactrouter.com/en/main/components/link)\n *\n * @see https://mantle.ngrok.com/components/anchor\n *\n * @example\n * ```tsx\n * <Anchor href=\"https://ngrok.com/\">ngrok.com</Anchor>\n *\n * <Anchor href=\"https://ngrok.com/docs\" target=\"_blank\" icon={<Book />}>\n * ngrok docs\n * </Anchor>\n * ```\n */\nconst Anchor = forwardRef<ComponentRef<\"a\">, AnchorProps>(\n\t(\n\t\t{ asChild, children, className, rel: propRel, icon, iconPlacement = \"start\", ...props },\n\t\tref,\n\t) => {\n\t\tconst rel = resolveRel(propRel);\n\t\tconst componentProps = {\n\t\t\tclassName: anchorClassNames(className),\n\t\t\tref,\n\t\t\trel,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<AnchorProps>(singleChild),\n\t\t\t\t\"When using `asChild`, Anchor must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\treturn (\n\t\t\t\t<Slot {...componentProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tsingleChild,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && iconPlacement === \"start\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block mr-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t\t{icon && iconPlacement === \"end\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block ml-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<a {...componentProps}>\n\t\t\t\t{icon && iconPlacement === \"start\" && <Icon className=\"inline-block mr-1.5\" svg={icon} />}\n\t\t\t\t{children}\n\t\t\t\t{icon && iconPlacement === \"end\" && <Icon className=\"inline-block ml-1.5\" svg={icon} />}\n\t\t\t</a>\n\t\t);\n\t},\n);\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(\n\trel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[],\n) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.sort()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\treturn rel?.trim() || undefined;\n}\n\nexport {\n\t//,\n\tAnchor,\n\tanchorClassNames,\n\tresolveRel,\n};\n\nexport type {\n\t//,\n\tAnchorProps,\n};\n"],"mappings":"oJACA,OAAS,YAAAA,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QACnE,OAAOC,MAAe,iBAmFhB,mBAAAC,EAEE,OAAAC,EAFF,QAAAC,MAAA,oBAzEN,IAAMC,EAAoBC,GACzBC,EACC,kJACAD,CACD,EA2CKE,EAASC,EACd,CACC,CAAE,QAAAC,EAAS,SAAAC,EAAU,UAAAL,EAAW,IAAKM,EAAS,KAAAC,EAAM,cAAAC,EAAgB,QAAS,GAAGC,CAAM,EACtFC,IACI,CACJ,IAAMC,EAAMC,EAAWN,CAAO,EACxBO,EAAiB,CACtB,UAAWd,EAAiBC,CAAS,EACrC,IAAAU,EACA,IAAAC,EACA,GAAGF,CACJ,EAEA,GAAIL,EAAS,CACZ,IAAMU,EAAcC,EAAS,KAAKV,CAAQ,EAC1CW,EACCC,EAA4BH,CAAW,EACvC,0EACD,EACA,IAAMI,EAAgBJ,EAAY,OAAO,SAEzC,OACCjB,EAACsB,EAAA,CAAM,GAAGN,EACR,SAAAO,EACAN,EACA,CAAC,EACDhB,EAAAF,EAAA,CACE,UAAAW,GAAQC,IAAkB,SAC1BX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,EAEjDW,EACAX,GAAQC,IAAkB,OAC1BX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,GAEnD,CACD,EACD,CAEF,CAEA,OACCT,EAAC,KAAG,GAAGe,EACL,UAAAN,GAAQC,IAAkB,SAAWX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,EACtFF,EACAE,GAAQC,IAAkB,OAASX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,GACtF,CAEF,CACD,EACAL,EAAO,YAAc,SAOrB,SAASU,EACRD,EACC,CACD,OAAI,MAAM,QAAQA,CAAG,EAEL,CAAC,GADE,IAAI,IAAIA,CAAG,CACD,EAC1B,IAAKW,GAASA,GAAM,KAAK,CAAC,EAC1B,OAAO,OAAO,EACd,KAAK,EACL,KAAK,GAAG,GACO,OAGXX,GAAK,KAAK,GAAK,MACvB","names":["Children","cloneElement","forwardRef","isValidElement","invariant","Fragment","jsx","jsxs","anchorClassNames","className","cx","Anchor","forwardRef","asChild","children","propRel","icon","iconPlacement","props","ref","rel","resolveRel","componentProps","singleChild","Children","invariant","isValidElement","grandchildren","Slot","cloneElement","Icon","item"]}
package/dist/badge.d.ts CHANGED
@@ -23,7 +23,7 @@ type BadgeProps = ComponentProps<"span"> & WithAsChild & {
23
23
  * A Badge is a non-interactive component used to highlight important
24
24
  * information or to visually indicate the status of an item.
25
25
  *
26
- * @see https://mantle.ngrok.com/components/badge#api
26
+ * @see https://mantle.ngrok.com/components/badge
27
27
  *
28
28
  * @example
29
29
  * ```tsx
package/dist/badge.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as d}from"./chunk-ODDNPNLN.js";import{a as o}from"./chunk-NZ6DRFAL.js";import{a as c}from"./chunk-PFXFESEN.js";import{Children as C,cloneElement as h,isValidElement as k}from"react";import s from"tiny-invariant";import{Fragment as P,jsx as n,jsxs as m}from"react/jsx-runtime";var u=({appearance:t,asChild:e=!1,children:l,className:b,color:i="neutral",icon:r,...g})=>{let x=B(i,t),f=N(i,t),p=c("inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs font-sans",r&&"ps-1",x,f,b);if(e){let a=C.only(l);s(k(a),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let y=a.props?.children;return n(d,{className:p,...g,children:h(a,{},m(P,{children:[r&&n(o,{className:"size-4",svg:r}),y]}))})}return m("span",{className:p,...g,children:[r&&n(o,{className:"size-4",svg:r}),l]})};u.displayName="Badge";var w={amber:"bg-amber-500/20",blue:"bg-blue-500/20",cyan:"bg-cyan-500/20",emerald:"bg-emerald-500/20",fuchsia:"bg-fuchsia-500/20",gray:"bg-gray-500/20",green:"bg-green-500/20",indigo:"bg-indigo-500/20",lime:"bg-lime-500/20",orange:"bg-orange-500/20",pink:"bg-pink-500/20",purple:"bg-purple-500/20",red:"bg-red-500/20",rose:"bg-rose-500/20",sky:"bg-sky-500/20",teal:"bg-teal-500/20",violet:"bg-violet-500/20",yellow:"bg-yellow-500/20",accent:"bg-accent-500/20",danger:"bg-danger-500/20",info:"bg-info-500/20",neutral:"bg-neutral-500/20",success:"bg-success-500/20",warning:"bg-warning-500/20"};function B(t,e){if(e==="muted")return w[t];s(!1,`Invalid appearance: ${String(e)}`)}var v={amber:"text-amber-700",blue:"text-blue-700",cyan:"text-cyan-700",emerald:"text-emerald-700",fuchsia:"text-fuchsia-700",gray:"text-gray-700",green:"text-green-700",indigo:"text-indigo-700",lime:"text-lime-700",orange:"text-orange-700",pink:"text-pink-700",purple:"text-purple-700",red:"text-red-700",rose:"text-rose-700",sky:"text-sky-700",teal:"text-teal-700",violet:"text-violet-700",yellow:"text-yellow-700",accent:"text-accent-700",danger:"text-danger-700",info:"text-info-700",neutral:"text-neutral-700",success:"text-success-700",warning:"text-warning-700"};function N(t,e){if(e==="muted")return v[t];s(!1,`Invalid appearance: ${String(e)}`)}export{u as Badge};
1
+ import{a as d}from"./chunk-ADF5DAYG.js";import{a as o}from"./chunk-SBQHQ2SJ.js";import{a as c}from"./chunk-PFXFESEN.js";import{Children as C,cloneElement as h,isValidElement as k}from"react";import s from"tiny-invariant";import{Fragment as P,jsx as n,jsxs as m}from"react/jsx-runtime";var u=({appearance:t,asChild:e=!1,children:l,className:b,color:i="neutral",icon:r,...g})=>{let x=B(i,t),f=N(i,t),p=c("inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs font-sans",r&&"ps-1",x,f,b);if(e){let a=C.only(l);s(k(a),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let y=a.props?.children;return n(d,{className:p,...g,children:h(a,{},m(P,{children:[r&&n(o,{className:"size-4",svg:r}),y]}))})}return m("span",{className:p,...g,children:[r&&n(o,{className:"size-4",svg:r}),l]})};u.displayName="Badge";var w={amber:"bg-amber-500/20",blue:"bg-blue-500/20",cyan:"bg-cyan-500/20",emerald:"bg-emerald-500/20",fuchsia:"bg-fuchsia-500/20",gray:"bg-gray-500/20",green:"bg-green-500/20",indigo:"bg-indigo-500/20",lime:"bg-lime-500/20",orange:"bg-orange-500/20",pink:"bg-pink-500/20",purple:"bg-purple-500/20",red:"bg-red-500/20",rose:"bg-rose-500/20",sky:"bg-sky-500/20",teal:"bg-teal-500/20",violet:"bg-violet-500/20",yellow:"bg-yellow-500/20",accent:"bg-accent-500/20",danger:"bg-danger-500/20",info:"bg-info-500/20",neutral:"bg-neutral-500/20",success:"bg-success-500/20",warning:"bg-warning-500/20"};function B(t,e){if(e==="muted")return w[t];s(!1,`Invalid appearance: ${String(e)}`)}var v={amber:"text-amber-700",blue:"text-blue-700",cyan:"text-cyan-700",emerald:"text-emerald-700",fuchsia:"text-fuchsia-700",gray:"text-gray-700",green:"text-green-700",indigo:"text-indigo-700",lime:"text-lime-700",orange:"text-orange-700",pink:"text-pink-700",purple:"text-purple-700",red:"text-red-700",rose:"text-rose-700",sky:"text-sky-700",teal:"text-teal-700",violet:"text-violet-700",yellow:"text-yellow-700",accent:"text-accent-700",danger:"text-danger-700",info:"text-info-700",neutral:"text-neutral-700",success:"text-success-700",warning:"text-warning-700"};function N(t,e){if(e==="muted")return v[t];s(!1,`Invalid appearance: ${String(e)}`)}export{u as Badge};
2
2
  //# sourceMappingURL=badge.js.map
package/dist/badge.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import { Children, type ComponentProps, type ReactNode, cloneElement, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { Color } from \"../../utils/color/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst appearances = [\"muted\" /*\"strong\" */] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype BadgeProps = ComponentProps<\"span\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The color variant of the badge. Accepts named colors and functional colors from the mantle color palette.\n\t\t */\n\t\tcolor?: Color;\n\t\t/**\n\t\t * The icon to render inside the badge.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The visual style of the badge.\n\t\t */\n\t\tappearance: Appearance;\n\t};\n\n/**\n * A Badge is a non-interactive component used to highlight important\n * information or to visually indicate the status of an item.\n *\n * @see https://mantle.ngrok.com/components/badge#api\n *\n * @example\n * ```tsx\n * <Badge appearance=\"muted\" color=\"success\">\n * Succeeded\n * </Badge>\n * ```\n */\nconst Badge = ({\n\tappearance,\n\tasChild = false,\n\tchildren,\n\tclassName,\n\tcolor = \"neutral\",\n\ticon,\n\t...props\n}: BadgeProps) => {\n\tconst bgColor = computeBgColor(color, appearance);\n\tconst textColor = computeTextColor(color, appearance);\n\n\tconst badgeClasses = cx(\n\t\t\"inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs font-sans\",\n\t\ticon && \"ps-1\",\n\t\tbgColor,\n\t\ttextColor,\n\t\tclassName,\n\t);\n\n\tif (asChild) {\n\t\tconst singleChild = Children.only(children);\n\t\tinvariant(\n\t\t\tisValidElement<BadgeProps>(singleChild),\n\t\t\t\"When using `asChild`, Badge must be passed a single child as a JSX tag.\",\n\t\t);\n\t\tconst grandchildren = singleChild.props?.children;\n\n\t\treturn (\n\t\t\t<Slot className={badgeClasses} {...props}>\n\t\t\t\t{cloneElement(\n\t\t\t\t\tsingleChild,\n\t\t\t\t\t{},\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t</>,\n\t\t\t\t)}\n\t\t\t</Slot>\n\t\t);\n\t}\n\n\treturn (\n\t\t<span className={badgeClasses} {...props}>\n\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t{children}\n\t\t</span>\n\t);\n};\nBadge.displayName = \"Badge\";\n\n// MARK: - Exports\n\nexport {\n\t//,\n\tBadge,\n};\n\nexport type {\n\t//,\n\tBadgeProps,\n};\n\n// MARK: - Private\n\nconst mutedBgColorLookup = {\n\tamber: \"bg-amber-500/20\",\n\tblue: \"bg-blue-500/20\",\n\tcyan: \"bg-cyan-500/20\",\n\temerald: \"bg-emerald-500/20\",\n\tfuchsia: \"bg-fuchsia-500/20\",\n\tgray: \"bg-gray-500/20\",\n\tgreen: \"bg-green-500/20\",\n\tindigo: \"bg-indigo-500/20\",\n\tlime: \"bg-lime-500/20\",\n\torange: \"bg-orange-500/20\",\n\tpink: \"bg-pink-500/20\",\n\tpurple: \"bg-purple-500/20\",\n\tred: \"bg-red-500/20\",\n\trose: \"bg-rose-500/20\",\n\tsky: \"bg-sky-500/20\",\n\tteal: \"bg-teal-500/20\",\n\tviolet: \"bg-violet-500/20\",\n\tyellow: \"bg-yellow-500/20\",\n\taccent: \"bg-accent-500/20\",\n\tdanger: \"bg-danger-500/20\",\n\tinfo: \"bg-info-500/20\",\n\tneutral: \"bg-neutral-500/20\",\n\tsuccess: \"bg-success-500/20\",\n\twarning: \"bg-warning-500/20\",\n} satisfies Record<Color, string>;\n\nfunction computeBgColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn mutedBgColorLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n\nconst textColorMutedLookup = {\n\tamber: \"text-amber-700\",\n\tblue: \"text-blue-700\",\n\tcyan: \"text-cyan-700\",\n\temerald: \"text-emerald-700\",\n\tfuchsia: \"text-fuchsia-700\",\n\tgray: \"text-gray-700\",\n\tgreen: \"text-green-700\",\n\tindigo: \"text-indigo-700\",\n\tlime: \"text-lime-700\",\n\torange: \"text-orange-700\",\n\tpink: \"text-pink-700\",\n\tpurple: \"text-purple-700\",\n\tred: \"text-red-700\",\n\trose: \"text-rose-700\",\n\tsky: \"text-sky-700\",\n\tteal: \"text-teal-700\",\n\tviolet: \"text-violet-700\",\n\tyellow: \"text-yellow-700\",\n\taccent: \"text-accent-700\",\n\tdanger: \"text-danger-700\",\n\tinfo: \"text-info-700\",\n\tneutral: \"text-neutral-700\",\n\tsuccess: \"text-success-700\",\n\twarning: \"text-warning-700\",\n} satisfies Record<Color, string>;\n\nfunction computeTextColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn textColorMutedLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n"],"mappings":"wHAAA,OAAS,YAAAA,EAA+C,gBAAAC,EAAc,kBAAAC,MAAsB,QAC5F,OAAOC,MAAe,iBAwEjB,mBAAAC,EACU,OAAAC,EADV,QAAAC,MAAA,oBAjCL,IAAMC,EAAQ,CAAC,CACd,WAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,UAAAC,EACA,MAAAC,EAAQ,UACR,KAAAC,EACA,GAAGC,CACJ,IAAkB,CACjB,IAAMC,EAAUC,EAAeJ,EAAOJ,CAAU,EAC1CS,EAAYC,EAAiBN,EAAOJ,CAAU,EAE9CW,EAAeC,EACpB,mHACAP,GAAQ,OACRE,EACAE,EACAN,CACD,EAEA,GAAIF,EAAS,CACZ,IAAMY,EAAcC,EAAS,KAAKZ,CAAQ,EAC1Ca,EACCC,EAA2BH,CAAW,EACtC,yEACD,EACA,IAAMI,EAAgBJ,EAAY,OAAO,SAEzC,OACCK,EAACC,EAAA,CAAK,UAAWR,EAAe,GAAGL,EACjC,SAAAc,EACAP,EACA,CAAC,EACDQ,EAAAC,EAAA,CACE,UAAAjB,GAAQa,EAACK,EAAA,CAAQ,UAAU,SAAS,IAAKlB,EAAM,EAC/CY,GACF,CACD,EACD,CAEF,CAEA,OACCI,EAAC,QAAK,UAAWV,EAAe,GAAGL,EACjC,UAAAD,GAAQa,EAACK,EAAA,CAAQ,UAAU,SAAS,IAAKlB,EAAM,EAC/CH,GACF,CAEF,EACAH,EAAM,YAAc,QAgBpB,IAAMyB,EAAqB,CAC1B,MAAO,kBACP,KAAM,iBACN,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACN,MAAO,kBACP,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,IAAK,gBACL,KAAM,iBACN,IAAK,gBACL,KAAM,iBACN,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,QAAS,mBACV,EAEA,SAASC,EAAeC,EAAcC,EAAwB,CAC7D,GAAQA,IACF,QACJ,OAAOH,EAAmBE,CAAK,EAE/BE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAE/D,CAEA,IAAME,EAAuB,CAC5B,MAAO,iBACP,KAAM,gBACN,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,KAAM,gBACN,MAAO,iBACP,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,IAAK,eACL,KAAM,gBACN,IAAK,eACL,KAAM,gBACN,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,QAAS,kBACV,EAEA,SAASC,EAAiBJ,EAAcC,EAAwB,CAC/D,GAAQA,IACF,QACJ,OAAOE,EAAqBH,CAAK,EAEjCE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAE/D","names":["Children","cloneElement","isValidElement","invariant","Fragment","jsx","jsxs","Badge","appearance","asChild","children","className","color","icon","props","bgColor","computeBgColor","textColor","computeTextColor","badgeClasses","cx","singleChild","Children","invariant","isValidElement","grandchildren","jsx","Slot","cloneElement","jsxs","Fragment","SvgOnly","mutedBgColorLookup","computeBgColor","color","appearance","invariant","textColorMutedLookup","computeTextColor"]}
1
+ {"version":3,"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import { Children, type ComponentProps, type ReactNode, cloneElement, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { Color } from \"../../utils/color/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst appearances = [\"muted\" /*\"strong\" */] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype BadgeProps = ComponentProps<\"span\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The color variant of the badge. Accepts named colors and functional colors from the mantle color palette.\n\t\t */\n\t\tcolor?: Color;\n\t\t/**\n\t\t * The icon to render inside the badge.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The visual style of the badge.\n\t\t */\n\t\tappearance: Appearance;\n\t};\n\n/**\n * A Badge is a non-interactive component used to highlight important\n * information or to visually indicate the status of an item.\n *\n * @see https://mantle.ngrok.com/components/badge\n *\n * @example\n * ```tsx\n * <Badge appearance=\"muted\" color=\"success\">\n * Succeeded\n * </Badge>\n * ```\n */\nconst Badge = ({\n\tappearance,\n\tasChild = false,\n\tchildren,\n\tclassName,\n\tcolor = \"neutral\",\n\ticon,\n\t...props\n}: BadgeProps) => {\n\tconst bgColor = computeBgColor(color, appearance);\n\tconst textColor = computeTextColor(color, appearance);\n\n\tconst badgeClasses = cx(\n\t\t\"inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs font-sans\",\n\t\ticon && \"ps-1\",\n\t\tbgColor,\n\t\ttextColor,\n\t\tclassName,\n\t);\n\n\tif (asChild) {\n\t\tconst singleChild = Children.only(children);\n\t\tinvariant(\n\t\t\tisValidElement<BadgeProps>(singleChild),\n\t\t\t\"When using `asChild`, Badge must be passed a single child as a JSX tag.\",\n\t\t);\n\t\tconst grandchildren = singleChild.props?.children;\n\n\t\treturn (\n\t\t\t<Slot className={badgeClasses} {...props}>\n\t\t\t\t{cloneElement(\n\t\t\t\t\tsingleChild,\n\t\t\t\t\t{},\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t</>,\n\t\t\t\t)}\n\t\t\t</Slot>\n\t\t);\n\t}\n\n\treturn (\n\t\t<span className={badgeClasses} {...props}>\n\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t{children}\n\t\t</span>\n\t);\n};\nBadge.displayName = \"Badge\";\n\n// MARK: - Exports\n\nexport {\n\t//,\n\tBadge,\n};\n\nexport type {\n\t//,\n\tBadgeProps,\n};\n\n// MARK: - Private\n\nconst mutedBgColorLookup = {\n\tamber: \"bg-amber-500/20\",\n\tblue: \"bg-blue-500/20\",\n\tcyan: \"bg-cyan-500/20\",\n\temerald: \"bg-emerald-500/20\",\n\tfuchsia: \"bg-fuchsia-500/20\",\n\tgray: \"bg-gray-500/20\",\n\tgreen: \"bg-green-500/20\",\n\tindigo: \"bg-indigo-500/20\",\n\tlime: \"bg-lime-500/20\",\n\torange: \"bg-orange-500/20\",\n\tpink: \"bg-pink-500/20\",\n\tpurple: \"bg-purple-500/20\",\n\tred: \"bg-red-500/20\",\n\trose: \"bg-rose-500/20\",\n\tsky: \"bg-sky-500/20\",\n\tteal: \"bg-teal-500/20\",\n\tviolet: \"bg-violet-500/20\",\n\tyellow: \"bg-yellow-500/20\",\n\taccent: \"bg-accent-500/20\",\n\tdanger: \"bg-danger-500/20\",\n\tinfo: \"bg-info-500/20\",\n\tneutral: \"bg-neutral-500/20\",\n\tsuccess: \"bg-success-500/20\",\n\twarning: \"bg-warning-500/20\",\n} satisfies Record<Color, string>;\n\nfunction computeBgColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn mutedBgColorLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n\nconst textColorMutedLookup = {\n\tamber: \"text-amber-700\",\n\tblue: \"text-blue-700\",\n\tcyan: \"text-cyan-700\",\n\temerald: \"text-emerald-700\",\n\tfuchsia: \"text-fuchsia-700\",\n\tgray: \"text-gray-700\",\n\tgreen: \"text-green-700\",\n\tindigo: \"text-indigo-700\",\n\tlime: \"text-lime-700\",\n\torange: \"text-orange-700\",\n\tpink: \"text-pink-700\",\n\tpurple: \"text-purple-700\",\n\tred: \"text-red-700\",\n\trose: \"text-rose-700\",\n\tsky: \"text-sky-700\",\n\tteal: \"text-teal-700\",\n\tviolet: \"text-violet-700\",\n\tyellow: \"text-yellow-700\",\n\taccent: \"text-accent-700\",\n\tdanger: \"text-danger-700\",\n\tinfo: \"text-info-700\",\n\tneutral: \"text-neutral-700\",\n\tsuccess: \"text-success-700\",\n\twarning: \"text-warning-700\",\n} satisfies Record<Color, string>;\n\nfunction computeTextColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn textColorMutedLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n"],"mappings":"wHAAA,OAAS,YAAAA,EAA+C,gBAAAC,EAAc,kBAAAC,MAAsB,QAC5F,OAAOC,MAAe,iBAwEjB,mBAAAC,EACU,OAAAC,EADV,QAAAC,MAAA,oBAjCL,IAAMC,EAAQ,CAAC,CACd,WAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,UAAAC,EACA,MAAAC,EAAQ,UACR,KAAAC,EACA,GAAGC,CACJ,IAAkB,CACjB,IAAMC,EAAUC,EAAeJ,EAAOJ,CAAU,EAC1CS,EAAYC,EAAiBN,EAAOJ,CAAU,EAE9CW,EAAeC,EACpB,mHACAP,GAAQ,OACRE,EACAE,EACAN,CACD,EAEA,GAAIF,EAAS,CACZ,IAAMY,EAAcC,EAAS,KAAKZ,CAAQ,EAC1Ca,EACCC,EAA2BH,CAAW,EACtC,yEACD,EACA,IAAMI,EAAgBJ,EAAY,OAAO,SAEzC,OACCK,EAACC,EAAA,CAAK,UAAWR,EAAe,GAAGL,EACjC,SAAAc,EACAP,EACA,CAAC,EACDQ,EAAAC,EAAA,CACE,UAAAjB,GAAQa,EAACK,EAAA,CAAQ,UAAU,SAAS,IAAKlB,EAAM,EAC/CY,GACF,CACD,EACD,CAEF,CAEA,OACCI,EAAC,QAAK,UAAWV,EAAe,GAAGL,EACjC,UAAAD,GAAQa,EAACK,EAAA,CAAQ,UAAU,SAAS,IAAKlB,EAAM,EAC/CH,GACF,CAEF,EACAH,EAAM,YAAc,QAgBpB,IAAMyB,EAAqB,CAC1B,MAAO,kBACP,KAAM,iBACN,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACN,MAAO,kBACP,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,IAAK,gBACL,KAAM,iBACN,IAAK,gBACL,KAAM,iBACN,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,QAAS,mBACV,EAEA,SAASC,EAAeC,EAAcC,EAAwB,CAC7D,GAAQA,IACF,QACJ,OAAOH,EAAmBE,CAAK,EAE/BE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAE/D,CAEA,IAAME,EAAuB,CAC5B,MAAO,iBACP,KAAM,gBACN,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,KAAM,gBACN,MAAO,iBACP,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,IAAK,eACL,KAAM,gBACN,IAAK,eACL,KAAM,gBACN,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,QAAS,kBACV,EAEA,SAASC,EAAiBJ,EAAcC,EAAwB,CAC/D,GAAQA,IACF,QACJ,OAAOE,EAAqBH,CAAK,EAEjCE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAE/D","names":["Children","cloneElement","isValidElement","invariant","Fragment","jsx","jsxs","Badge","appearance","asChild","children","className","color","icon","props","bgColor","computeBgColor","textColor","computeTextColor","badgeClasses","cx","singleChild","Children","invariant","isValidElement","grandchildren","jsx","Slot","cloneElement","jsxs","Fragment","SvgOnly","mutedBgColorLookup","computeBgColor","color","appearance","invariant","textColorMutedLookup","computeTextColor"]}
@@ -80,7 +80,7 @@ type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
80
80
  * other assistive technology. Once activated, it then performs an action, such
81
81
  * as submitting a form or opening a dialog.
82
82
  *
83
- * @see https://mantle.ngrok.com/components/button#api-button
83
+ * @see https://mantle.ngrok.com/components/button
84
84
  *
85
85
  * @example
86
86
  * ```tsx
package/dist/button.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- export { B as Button, a as ButtonProps } from './button-DQcrsUyD.js';
2
- export { I as IconButton, a as IconButtonProps } from './icon-button-D4BTvC7F.js';
1
+ export { B as Button, a as ButtonProps } from './button-DLUUf_c-.js';
2
+ export { I as IconButton, a as IconButtonProps } from './icon-button-CT71Ti9V.js';
3
3
  export { B as ButtonGroup, a as ButtonGroupProps } from './button-group-BFnqgdtl.js';
4
4
  import './deep-non-nullable-SmpSvoSd.js';
5
5
  import 'class-variance-authority';
package/dist/button.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as c}from"./chunk-OHPGAB7U.js";import{c as a}from"./chunk-U32WN4A7.js";import{a as b}from"./chunk-QWZXK2IF.js";import"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import"./chunk-PFXFESEN.js";export{b as Button,c as ButtonGroup,a as IconButton};
1
+ import{a as c}from"./chunk-OHPGAB7U.js";import{a as b}from"./chunk-W5A5HSFE.js";import{c as a}from"./chunk-CBRSMQ26.js";import"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-IVQ626TU.js";import"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import"./chunk-PFXFESEN.js";export{b as Button,c as ButtonGroup,a as IconButton};
2
2
  //# sourceMappingURL=button.js.map
package/dist/calendar.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a,b as o}from"./chunk-U32WN4A7.js";import"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import{a as r}from"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import{a as e}from"./chunk-PFXFESEN.js";import{CaretLeftIcon as p}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as f}from"@phosphor-icons/react/CaretRight";import{DayPicker as u}from"react-day-picker";import{jsx as t}from"react/jsx-runtime";function d({className:l,classNames:s,showOutsideDays:i=!1,...n}){return t(u,{animate:!1,components:{Chevron:c=>{let m=c.orientation==="left"?t(p,{}):t(f,{});return t(r,{svg:m,className:"size-4"})}},classNames:{root:e("isolate",l),button_next:e(a,o({appearance:"ghost",size:"sm"}),"absolute right-0"),button_previous:e(a,o({appearance:"ghost",size:"sm"}),"absolute left-0"),caption_label:"text-sm font-medium",day:e("overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md",n.mode==="range"?"first:has-aria-selected:rounded-l-md last:has-aria-selected:rounded-r-md":""),day_button:"day size-full rounded-md not-aria-selected:not-disabled:hover:bg-filled-accent/15",disabled:"text-muted opacity-50",hidden:"invisible",month:"space-y-4",month_caption:"flex justify-center pt-1 relative items-center",month_grid:"w-full border-collapse space-y-1",months:"flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative max-w-min",nav:"flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10",outside:"day-outside aria-selected:text-on-filled opacity-50 text-muted",range_end:"day-range-end [&:not(.day-range-start)]:rounded-l-none",range_middle:"day-range-middle not-disabled:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none not-disabled:aria-selected:hover:bg-filled-accent/25",range_start:"day-range-start [&:not(.day-range-end)]:rounded-r-none",selected:"not-disabled:bg-filled-accent text-on-filled not-disabled:hover:bg-filled-accent",today:"not-aria-selected:not-disabled:text-accent-600 font-medium not-aria-selected:not-disabled:bg-filled-accent/10 rounded-md",week:"flex w-full mt-1",weekday:"text-body w-7 text-[0.8rem] text-center font-normal",weekdays:"flex",...s},showOutsideDays:i,...n})}d.displayName="Calendar";export{d as Calendar};
1
+ import{a,b as o}from"./chunk-CBRSMQ26.js";import"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import{a as r}from"./chunk-IVQ626TU.js";import"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import{a as e}from"./chunk-PFXFESEN.js";import{CaretLeftIcon as p}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as f}from"@phosphor-icons/react/CaretRight";import{DayPicker as u}from"react-day-picker";import{jsx as t}from"react/jsx-runtime";function d({className:l,classNames:s,showOutsideDays:i=!1,...n}){return t(u,{animate:!1,components:{Chevron:c=>{let m=c.orientation==="left"?t(p,{}):t(f,{});return t(r,{svg:m,className:"size-4"})}},classNames:{root:e("isolate",l),button_next:e(a,o({appearance:"ghost",size:"sm"}),"absolute right-0"),button_previous:e(a,o({appearance:"ghost",size:"sm"}),"absolute left-0"),caption_label:"text-sm font-medium",day:e("overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md",n.mode==="range"?"first:has-aria-selected:rounded-l-md last:has-aria-selected:rounded-r-md":""),day_button:"day size-full rounded-md not-aria-selected:not-disabled:hover:bg-filled-accent/15",disabled:"text-muted opacity-50",hidden:"invisible",month:"space-y-4",month_caption:"flex justify-center pt-1 relative items-center",month_grid:"w-full border-collapse space-y-1",months:"flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative max-w-min",nav:"flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10",outside:"day-outside aria-selected:text-on-filled opacity-50 text-muted",range_end:"day-range-end [&:not(.day-range-start)]:rounded-l-none",range_middle:"day-range-middle not-disabled:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none not-disabled:aria-selected:hover:bg-filled-accent/25",range_start:"day-range-start [&:not(.day-range-end)]:rounded-r-none",selected:"not-disabled:bg-filled-accent text-on-filled not-disabled:hover:bg-filled-accent",today:"not-aria-selected:not-disabled:text-accent-600 font-medium not-aria-selected:not-disabled:bg-filled-accent/10 rounded-md",week:"flex w-full mt-1",weekday:"text-body w-7 text-[0.8rem] text-center font-normal",weekdays:"flex",...s},showOutsideDays:i,...n})}d.displayName="Calendar";export{d as Calendar};
2
2
  //# sourceMappingURL=calendar.js.map
package/dist/card.d.ts CHANGED
@@ -35,7 +35,7 @@ declare const Card: {
35
35
  /**
36
36
  * A container that can be used to display content in a box resembling a physical card.
37
37
  *
38
- * @see https://mantle.ngrok.com/components/card#api-card-root
38
+ * @see https://mantle.ngrok.com/components/card#cardroot
39
39
  *
40
40
  * @example
41
41
  * ```tsx
@@ -50,7 +50,7 @@ declare const Card: {
50
50
  /**
51
51
  * The main content of a card.
52
52
  *
53
- * @see https://mantle.ngrok.com/components/card#api-card-body
53
+ * @see https://mantle.ngrok.com/components/card#cardbody
54
54
  *
55
55
  * @example
56
56
  * ```tsx
@@ -65,7 +65,7 @@ declare const Card: {
65
65
  /**
66
66
  * The footer container of a card.
67
67
  *
68
- * @see https://mantle.ngrok.com/components/card#api-card-footer
68
+ * @see https://mantle.ngrok.com/components/card#cardfooter
69
69
  *
70
70
  * @example
71
71
  * ```tsx
@@ -86,7 +86,7 @@ declare const Card: {
86
86
  /**
87
87
  * The header container of a card.
88
88
  *
89
- * @see https://mantle.ngrok.com/components/card#api-card-header
89
+ * @see https://mantle.ngrok.com/components/card#cardheader
90
90
  *
91
91
  * @example
92
92
  * ```tsx
@@ -107,7 +107,7 @@ declare const Card: {
107
107
  /**
108
108
  * The title of a card.
109
109
  *
110
- * @see https://mantle.ngrok.com/components/card#api-card-title
110
+ * @see https://mantle.ngrok.com/components/card#cardtitle
111
111
  *
112
112
  * @example
113
113
  * ```tsx
package/dist/card.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as p}from"./chunk-ODDNPNLN.js";import{a as n}from"./chunk-PFXFESEN.js";import{forwardRef as s}from"react";import{jsx as a}from"react/jsx-runtime";var C=s(({asChild:o=!1,className:r,children:e,...t},d)=>a(o?p:"div",{ref:d,className:n("border-card bg-card relative rounded-md border",r),...t,children:e}));C.displayName="Card";var i=s(({asChild:o=!1,className:r,children:e,...t},d)=>a(o?p:"div",{ref:d,className:n("p-6 border-t border-card-muted first:border-t-0",r),...t,children:e}));i.displayName="CardBody";var f=s(({asChild:o=!1,className:r,children:e,...t},d)=>a(o?p:"div",{ref:d,className:n("px-6 py-3 border-t border-card-muted first:border-t-0",r),...t,children:e}));f.displayName="CardFooter";var l=s(({asChild:o=!1,className:r,children:e,...t},d)=>a(o?p:"div",{ref:d,className:n("px-6 py-3 border-t border-card-muted first:border-t-0",r),...t,children:e}));l.displayName="CardHeader";var c=s(({className:o,asChild:r,...e},t)=>a(r?p:"h3",{ref:t,className:n("text-strong text-base font-medium",o),...e}));c.displayName="CardTitle";var y={Root:C,Body:i,Footer:f,Header:l,Title:c};export{y as Card};
1
+ import{a as p}from"./chunk-ADF5DAYG.js";import{a as n}from"./chunk-PFXFESEN.js";import{forwardRef as s}from"react";import{jsx as a}from"react/jsx-runtime";var C=s(({asChild:o=!1,className:r,children:e,...t},d)=>a(o?p:"div",{ref:d,className:n("border-card bg-card relative rounded-md border",r),...t,children:e}));C.displayName="Card";var i=s(({asChild:o=!1,className:r,children:e,...t},d)=>a(o?p:"div",{ref:d,className:n("p-6 border-t border-card-muted first:border-t-0",r),...t,children:e}));i.displayName="CardBody";var f=s(({asChild:o=!1,className:r,children:e,...t},d)=>a(o?p:"div",{ref:d,className:n("px-6 py-3 border-t border-card-muted first:border-t-0",r),...t,children:e}));f.displayName="CardFooter";var l=s(({asChild:o=!1,className:r,children:e,...t},d)=>a(o?p:"div",{ref:d,className:n("px-6 py-3 border-t border-card-muted first:border-t-0",r),...t,children:e}));l.displayName="CardHeader";var c=s(({className:o,asChild:r,...e},t)=>a(r?p:"h3",{ref:t,className:n("text-strong text-base font-medium",o),...e}));c.displayName="CardTitle";var y={Root:C,Body:i,Footer:f,Header:l,Title:c};export{y as Card};
2
2
  //# sourceMappingURL=card.js.map
package/dist/card.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/card/card.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype CardProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A container that can be used to display content in a box resembling a\n * physical card. The root component of the all Card components.\n *\n * @see https://mantle.ngrok.com/components/card#api-card\n *\n * @example\n * ```tsx\n * <Card.Root>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n * <Card.Header>\n * <Card.Title>Card Title Here</Card.Title>\n * </Card.Header>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * <Card.Footer>\n * <p>Card footer</p>\n * </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"border-card bg-card relative rounded-md border\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"Card\";\n\n/**\n * The main content of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#api-card-body\n *\n * @example\n * ```tsx\n * <Card.Root>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n * <Card.Header>\n * <Card.Title>Card Title Here</Card.Title>\n * </Card.Header>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * <Card.Footer>\n * <p>Card footer</p>\n * </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Body = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"p-6 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nBody.displayName = \"CardBody\";\n\n/**\n * The footer container of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#api-card-footer\n *\n * @example\n * ```tsx\n * <Card.Root>\n * <Card.Header>\n * <Card.Title>Card Title Here</Card.Title>\n * </Card.Header>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * <Card.Footer>\n * <p>Card footer</p>\n * </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Footer = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"px-6 py-3 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nFooter.displayName = \"CardFooter\";\n\n/**\n * The header container of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#api-card-header\n *\n * @example\n * ```tsx\n * <Card.Root>\n * <Card.Header>\n * <Card.Title>Card Title Here</Card.Title>\n * </Card.Header>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * <Card.Footer>\n * <p>Card footer</p>\n * </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Header = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"px-6 py-3 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nHeader.displayName = \"CardHeader\";\n\ntype CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of a card. Usually composed as a direct child of a `Card.Header`\n * component.\n * Renders as an `h3` element by default, but can be changed to any other\n * element by using the `asChild` prop. It is preferred to use a heading element\n * (h1-h6) for accessibility reasons.\n *\n * @see https://mantle.ngrok.com/components/card#api-card-title\n *\n * @example\n * ```tsx\n * <Card.Root>\n * <Card.Header>\n * <Card.Title>Card Title Here</Card.Title>\n * </Card.Header>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * <Card.Footer>\n * <p>Card footer</p>\n * </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Title = forwardRef<HTMLHeadingElement, CardTitleProps>(\n\t({ className, asChild, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"h3\";\n\t\treturn (\n\t\t\t<Comp ref={ref} className={cx(\"text-strong text-base font-medium\", className)} {...props} />\n\t\t);\n\t},\n);\nTitle.displayName = \"CardTitle\";\n\n/**\n * A container that can be used to display content in a box resembling a\n * physical card.\n *\n * @see https://mantle.ngrok.com/components/card\n *\n * @example\n * ```tsx\n * <Card.Root>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n * <Card.Header>\n * <Card.Title>Card Title Here</Card.Title>\n * </Card.Header>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * <Card.Footer>\n * <p>Card footer</p>\n * </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Card = {\n\t/**\n\t * A container that can be used to display content in a box resembling a physical card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#api-card-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t * <Card.Body>\n\t * <p>Laborum in aute officia adipisicing elit velit.</p>\n\t * </Card.Body>\n\t * </Card.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The main content of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#api-card-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t * <Card.Body>\n\t * <p>Laborum in aute officia adipisicing elit velit.</p>\n\t * </Card.Body>\n\t * </Card.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The footer container of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#api-card-footer\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t * <Card.Header>\n\t * <Card.Title>Card Title Here</Card.Title>\n\t * </Card.Header>\n\t * <Card.Body>\n\t * <p>Laborum in aute officia adipisicing elit velit.</p>\n\t * </Card.Body>\n\t * <Card.Footer>\n\t * <p>Card footer</p>\n\t * </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * The header container of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#api-card-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t * <Card.Header>\n\t * <Card.Title>Card Title Here</Card.Title>\n\t * </Card.Header>\n\t * <Card.Body>\n\t * <p>Laborum in aute officia adipisicing elit velit.</p>\n\t * </Card.Body>\n\t * <Card.Footer>\n\t * <p>Card footer</p>\n\t * </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The title of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#api-card-title\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t * <Card.Header>\n\t * <Card.Title>Card Title Here</Card.Title>\n\t * </Card.Header>\n\t * <Card.Body>\n\t * <p>Laborum in aute officia adipisicing elit velit.</p>\n\t * </Card.Body>\n\t * <Card.Footer>\n\t * <p>Card footer</p>\n\t * </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tCard,\n};\n\nexport type {\n\t//,\n\tCardProps,\n\tCardTitleProps,\n};\n"],"mappings":"gFACA,OAAS,cAAAA,MAAkB,QAuCxB,cAAAC,MAAA,oBALH,IAAMC,EAAOC,EACZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,iDAAkDL,CAAS,EACxE,GAAGE,EAEH,SAAAD,EACF,CAGH,EACAJ,EAAK,YAAc,OA4BnB,IAAMS,EAAOR,EACZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,kDAAmDL,CAAS,EACzE,GAAGE,EAEH,SAAAD,EACF,CAGH,EACAK,EAAK,YAAc,WAsBnB,IAAMC,EAAST,EACd,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,wDAAyDL,CAAS,EAC/E,GAAGE,EAEH,SAAAD,EACF,CAGH,EACAM,EAAO,YAAc,aAsBrB,IAAMC,EAASV,EACd,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,wDAAyDL,CAAS,EAC/E,GAAGE,EAEH,SAAAD,EACF,CAGH,EACAO,EAAO,YAAc,aA4BrB,IAAMC,EAAQX,EACb,CAAC,CAAE,UAAAE,EAAW,QAAAD,EAAS,GAAGW,CAAM,EAAGP,IAGjCP,EAFYG,EAAUK,EAAO,KAE5B,CAAK,IAAKD,EAAK,UAAWE,EAAG,oCAAqCL,CAAS,EAAI,GAAGU,EAAO,CAG7F,EACAD,EAAM,YAAc,YA6BpB,IAAME,EAAO,CAeZ,KAAAd,EAeA,KAAAS,EAqBA,OAAAC,EAqBA,OAAAC,EAqBA,MAAAC,CACD","names":["forwardRef","jsx","Root","forwardRef","asChild","className","children","rest","ref","Slot","cx","Body","Footer","Header","Title","props","Card"]}
1
+ {"version":3,"sources":["../src/components/card/card.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype CardProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A container that can be used to display content in a box resembling a\n * physical card. The root component of the all Card components.\n *\n * @see https://mantle.ngrok.com/components/card#cardroot\n *\n * @example\n * ```tsx\n * <Card.Root>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n * <Card.Header>\n * <Card.Title>Card Title Here</Card.Title>\n * </Card.Header>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * <Card.Footer>\n * <p>Card footer</p>\n * </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"border-card bg-card relative rounded-md border\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"Card\";\n\n/**\n * The main content of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#cardbody\n *\n * @example\n * ```tsx\n * <Card.Root>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n * <Card.Header>\n * <Card.Title>Card Title Here</Card.Title>\n * </Card.Header>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * <Card.Footer>\n * <p>Card footer</p>\n * </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Body = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"p-6 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nBody.displayName = \"CardBody\";\n\n/**\n * The footer container of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#cardfooter\n *\n * @example\n * ```tsx\n * <Card.Root>\n * <Card.Header>\n * <Card.Title>Card Title Here</Card.Title>\n * </Card.Header>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * <Card.Footer>\n * <p>Card footer</p>\n * </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Footer = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"px-6 py-3 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nFooter.displayName = \"CardFooter\";\n\n/**\n * The header container of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#cardheader\n *\n * @example\n * ```tsx\n * <Card.Root>\n * <Card.Header>\n * <Card.Title>Card Title Here</Card.Title>\n * </Card.Header>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * <Card.Footer>\n * <p>Card footer</p>\n * </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Header = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"px-6 py-3 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nHeader.displayName = \"CardHeader\";\n\ntype CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of a card. Usually composed as a direct child of a `Card.Header`\n * component.\n * Renders as an `h3` element by default, but can be changed to any other\n * element by using the `asChild` prop. It is preferred to use a heading element\n * (h1-h6) for accessibility reasons.\n *\n * @see https://mantle.ngrok.com/components/card#cardtitle\n *\n * @example\n * ```tsx\n * <Card.Root>\n * <Card.Header>\n * <Card.Title>Card Title Here</Card.Title>\n * </Card.Header>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * <Card.Footer>\n * <p>Card footer</p>\n * </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Title = forwardRef<HTMLHeadingElement, CardTitleProps>(\n\t({ className, asChild, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"h3\";\n\t\treturn (\n\t\t\t<Comp ref={ref} className={cx(\"text-strong text-base font-medium\", className)} {...props} />\n\t\t);\n\t},\n);\nTitle.displayName = \"CardTitle\";\n\n/**\n * A container that can be used to display content in a box resembling a\n * physical card.\n *\n * @see https://mantle.ngrok.com/components/card\n *\n * @example\n * ```tsx\n * <Card.Root>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n * <Card.Header>\n * <Card.Title>Card Title Here</Card.Title>\n * </Card.Header>\n * <Card.Body>\n * <p>Laborum in aute officia adipisicing elit velit.</p>\n * </Card.Body>\n * <Card.Footer>\n * <p>Card footer</p>\n * </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Card = {\n\t/**\n\t * A container that can be used to display content in a box resembling a physical card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t * <Card.Body>\n\t * <p>Laborum in aute officia adipisicing elit velit.</p>\n\t * </Card.Body>\n\t * </Card.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The main content of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t * <Card.Body>\n\t * <p>Laborum in aute officia adipisicing elit velit.</p>\n\t * </Card.Body>\n\t * </Card.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The footer container of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t * <Card.Header>\n\t * <Card.Title>Card Title Here</Card.Title>\n\t * </Card.Header>\n\t * <Card.Body>\n\t * <p>Laborum in aute officia adipisicing elit velit.</p>\n\t * </Card.Body>\n\t * <Card.Footer>\n\t * <p>Card footer</p>\n\t * </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * The header container of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t * <Card.Header>\n\t * <Card.Title>Card Title Here</Card.Title>\n\t * </Card.Header>\n\t * <Card.Body>\n\t * <p>Laborum in aute officia adipisicing elit velit.</p>\n\t * </Card.Body>\n\t * <Card.Footer>\n\t * <p>Card footer</p>\n\t * </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The title of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardtitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t * <Card.Header>\n\t * <Card.Title>Card Title Here</Card.Title>\n\t * </Card.Header>\n\t * <Card.Body>\n\t * <p>Laborum in aute officia adipisicing elit velit.</p>\n\t * </Card.Body>\n\t * <Card.Footer>\n\t * <p>Card footer</p>\n\t * </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tCard,\n};\n\nexport type {\n\t//,\n\tCardProps,\n\tCardTitleProps,\n};\n"],"mappings":"gFACA,OAAS,cAAAA,MAAkB,QAuCxB,cAAAC,MAAA,oBALH,IAAMC,EAAOC,EACZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,iDAAkDL,CAAS,EACxE,GAAGE,EAEH,SAAAD,EACF,CAGH,EACAJ,EAAK,YAAc,OA4BnB,IAAMS,EAAOR,EACZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,kDAAmDL,CAAS,EACzE,GAAGE,EAEH,SAAAD,EACF,CAGH,EACAK,EAAK,YAAc,WAsBnB,IAAMC,EAAST,EACd,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,wDAAyDL,CAAS,EAC/E,GAAGE,EAEH,SAAAD,EACF,CAGH,EACAM,EAAO,YAAc,aAsBrB,IAAMC,EAASV,EACd,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,wDAAyDL,CAAS,EAC/E,GAAGE,EAEH,SAAAD,EACF,CAGH,EACAO,EAAO,YAAc,aA4BrB,IAAMC,EAAQX,EACb,CAAC,CAAE,UAAAE,EAAW,QAAAD,EAAS,GAAGW,CAAM,EAAGP,IAGjCP,EAFYG,EAAUK,EAAO,KAE5B,CAAK,IAAKD,EAAK,UAAWE,EAAG,oCAAqCL,CAAS,EAAI,GAAGU,EAAO,CAG7F,EACAD,EAAM,YAAc,YA6BpB,IAAME,EAAO,CAeZ,KAAAd,EAeA,KAAAS,EAqBA,OAAAC,EAqBA,OAAAC,EAqBA,MAAAC,CACD","names":["forwardRef","jsx","Root","forwardRef","asChild","className","children","rest","ref","Slot","cx","Body","Footer","Header","Title","props","Card"]}
@@ -6,7 +6,7 @@ type CheckedState = boolean | "indeterminate";
6
6
  * A form control that allows the user to toggle between checked and not checked.
7
7
  * Supports indeterminate state.
8
8
  *
9
- * @see https://mantle.ngrok.com/components/checkbox#api-checkbox
9
+ * @see https://mantle.ngrok.com/components/checkbox
10
10
  *
11
11
  * @example
12
12
  * ```tsx
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport clsx from \"clsx\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/index.js\";\nimport type { WithValidation } from \"../input/index.js\";\n\ntype CheckedState = boolean | \"indeterminate\";\n\nconst isIndeterminate = (checked: CheckedState | undefined): checked is \"indeterminate\" =>\n\tchecked === \"indeterminate\";\n\ntype Props = Omit<ComponentPropsWithoutRef<\"input\">, \"type\" | \"checked\" | \"defaultChecked\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The controlled checked state of the checkbox. Must be used in conjunction with onChange.\n\t\t */\n\t\tchecked?: CheckedState;\n\t\t/**\n\t\t * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n\t\t */\n\t\tdefaultChecked?: CheckedState;\n\t};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n * Supports indeterminate state.\n *\n * @see https://mantle.ngrok.com/components/checkbox#api-checkbox\n *\n * @example\n * ```tsx\n * <form>\n * <Label htmlFor=\"terms\" className=\"flex items-center gap-2\">\n * <Checkbox name=\"terms\" id=\"terms\" />\n * Accept terms and conditions\n * </Label>\n * </form>\n * ```\n */\nconst Checkbox = forwardRef<ComponentRef<\"input\">, Props>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tchecked: _checked,\n\t\t\tdefaultChecked: _defaultChecked,\n\t\t\tdefaultValue = \"on\",\n\t\t\tonClick,\n\t\t\treadOnly,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\t\tconst [defaultChecked] = useState(_defaultChecked);\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(_checked);\n\t\t\t}\n\t\t}, [_checked]);\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(defaultChecked);\n\t\t\t}\n\t\t}, [defaultChecked]);\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-checked={isIndeterminate(_checked) ? \"mixed\" : _checked}\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"bg-center bg-no-repeat focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"checked:border-accent-500 checked:bg-accent-500 checked:bg-checked-icon\",\n\t\t\t\t\t\"indeterminate:border-accent-500 indeterminate:bg-accent-500 indeterminate:bg-indeterminate-icon\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:checked:bg-success-500 data-validation-success:indeterminate:bg-success-500 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-500 data-validation-warning:indeterminate:bg-warning-500 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-500 data-validation-error:indeterminate:bg-danger-500 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"where:block where:size-4 where:p-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tchecked={isIndeterminate(_checked) ? undefined : _checked}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tdefaultChecked={isIndeterminate(defaultChecked) ? undefined : defaultChecked}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport {\n\t//,\n\tCheckbox,\n};\n"],"mappings":"oEAEA,OAAOA,MAAU,OACjB,OAAS,cAAAC,EAAY,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QA4ErD,cAAAC,MAAA,oBArEH,IAAMC,EAAmBC,GACxBA,IAAY,gBA8BPC,EAAWC,EAChB,CACC,CACC,eAAgBC,EAChB,UAAAC,EACA,QAASC,EACT,eAAgBC,EAChB,aAAAC,EAAe,KACf,QAAAC,EACA,SAAAC,EACA,WAAYC,EACZ,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAA8B,IAAI,EAC7C,CAACC,CAAc,EAAIC,EAASV,CAAe,EAE3CW,EADYd,GAAgB,MAAQA,IAAiB,QAExD,QACA,OAAOO,GAAgB,WACtBA,EAAY,EACZA,EACEQ,EAAcf,GAAgBc,IAAe,QAEnD,OAAAE,EAAU,IAAM,CACXN,EAAS,UACZA,EAAS,QAAQ,cAAgBd,EAAgBM,CAAQ,EAE3D,EAAG,CAACA,CAAQ,CAAC,EAEbc,EAAU,IAAM,CACXN,EAAS,UACZA,EAAS,QAAQ,cAAgBd,EAAgBgB,CAAc,EAEjE,EAAG,CAACA,CAAc,CAAC,EAGlBjB,EAAC,SACA,eAAcC,EAAgBM,CAAQ,EAAI,QAAUA,EACpD,eAAca,EACd,UAAWE,EACV,qIACA,8CACA,oHACA,0EACA,kGACA,mQACA,mQACA,oPACA,qCACAhB,CACD,EACA,QAASL,EAAgBM,CAAQ,EAAI,OAAYA,EACjD,kBAAiBY,GAAc,OAC/B,eAAgBlB,EAAgBgB,CAAc,EAAI,OAAYA,EAC9D,aAAcR,EACd,QAAUc,GAAU,CACnB,GAAIZ,EAAU,CACbY,EAAM,eAAe,EACrB,MACD,CACAb,IAAUa,CAAK,CAChB,EACA,SAAUZ,EACV,IAAKa,EAAYT,EAAUD,CAAG,EAC9B,KAAK,WACJ,GAAGD,EACL,CAEF,CACD,EACAV,EAAS,YAAc","names":["clsx","forwardRef","useEffect","useRef","useState","jsx","isIndeterminate","checked","Checkbox","forwardRef","_ariaInvalid","className","_checked","_defaultChecked","defaultValue","onClick","readOnly","_validation","props","ref","innerRef","useRef","defaultChecked","useState","validation","ariaInvalid","useEffect","clsx","event","composeRefs"]}
1
+ {"version":3,"sources":["../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport clsx from \"clsx\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/index.js\";\nimport type { WithValidation } from \"../input/index.js\";\n\ntype CheckedState = boolean | \"indeterminate\";\n\nconst isIndeterminate = (checked: CheckedState | undefined): checked is \"indeterminate\" =>\n\tchecked === \"indeterminate\";\n\ntype Props = Omit<ComponentPropsWithoutRef<\"input\">, \"type\" | \"checked\" | \"defaultChecked\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The controlled checked state of the checkbox. Must be used in conjunction with onChange.\n\t\t */\n\t\tchecked?: CheckedState;\n\t\t/**\n\t\t * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n\t\t */\n\t\tdefaultChecked?: CheckedState;\n\t};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n * Supports indeterminate state.\n *\n * @see https://mantle.ngrok.com/components/checkbox\n *\n * @example\n * ```tsx\n * <form>\n * <Label htmlFor=\"terms\" className=\"flex items-center gap-2\">\n * <Checkbox name=\"terms\" id=\"terms\" />\n * Accept terms and conditions\n * </Label>\n * </form>\n * ```\n */\nconst Checkbox = forwardRef<ComponentRef<\"input\">, Props>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tchecked: _checked,\n\t\t\tdefaultChecked: _defaultChecked,\n\t\t\tdefaultValue = \"on\",\n\t\t\tonClick,\n\t\t\treadOnly,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\t\tconst [defaultChecked] = useState(_defaultChecked);\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(_checked);\n\t\t\t}\n\t\t}, [_checked]);\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(defaultChecked);\n\t\t\t}\n\t\t}, [defaultChecked]);\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-checked={isIndeterminate(_checked) ? \"mixed\" : _checked}\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"bg-center bg-no-repeat focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"checked:border-accent-500 checked:bg-accent-500 checked:bg-checked-icon\",\n\t\t\t\t\t\"indeterminate:border-accent-500 indeterminate:bg-accent-500 indeterminate:bg-indeterminate-icon\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:checked:bg-success-500 data-validation-success:indeterminate:bg-success-500 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-500 data-validation-warning:indeterminate:bg-warning-500 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-500 data-validation-error:indeterminate:bg-danger-500 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"where:block where:size-4 where:p-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tchecked={isIndeterminate(_checked) ? undefined : _checked}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tdefaultChecked={isIndeterminate(defaultChecked) ? undefined : defaultChecked}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport {\n\t//,\n\tCheckbox,\n};\n"],"mappings":"oEAEA,OAAOA,MAAU,OACjB,OAAS,cAAAC,EAAY,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QA4ErD,cAAAC,MAAA,oBArEH,IAAMC,EAAmBC,GACxBA,IAAY,gBA8BPC,EAAWC,EAChB,CACC,CACC,eAAgBC,EAChB,UAAAC,EACA,QAASC,EACT,eAAgBC,EAChB,aAAAC,EAAe,KACf,QAAAC,EACA,SAAAC,EACA,WAAYC,EACZ,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAA8B,IAAI,EAC7C,CAACC,CAAc,EAAIC,EAASV,CAAe,EAE3CW,EADYd,GAAgB,MAAQA,IAAiB,QAExD,QACA,OAAOO,GAAgB,WACtBA,EAAY,EACZA,EACEQ,EAAcf,GAAgBc,IAAe,QAEnD,OAAAE,EAAU,IAAM,CACXN,EAAS,UACZA,EAAS,QAAQ,cAAgBd,EAAgBM,CAAQ,EAE3D,EAAG,CAACA,CAAQ,CAAC,EAEbc,EAAU,IAAM,CACXN,EAAS,UACZA,EAAS,QAAQ,cAAgBd,EAAgBgB,CAAc,EAEjE,EAAG,CAACA,CAAc,CAAC,EAGlBjB,EAAC,SACA,eAAcC,EAAgBM,CAAQ,EAAI,QAAUA,EACpD,eAAca,EACd,UAAWE,EACV,qIACA,8CACA,oHACA,0EACA,kGACA,mQACA,mQACA,oPACA,qCACAhB,CACD,EACA,QAASL,EAAgBM,CAAQ,EAAI,OAAYA,EACjD,kBAAiBY,GAAc,OAC/B,eAAgBlB,EAAgBgB,CAAc,EAAI,OAAYA,EAC9D,aAAcR,EACd,QAAUc,GAAU,CACnB,GAAIZ,EAAU,CACbY,EAAM,eAAe,EACrB,MACD,CACAb,IAAUa,CAAK,CAChB,EACA,SAAUZ,EACV,IAAKa,EAAYT,EAAUD,CAAG,EAC9B,KAAK,WACJ,GAAGD,EACL,CAEF,CACD,EACAV,EAAS,YAAc","names":["clsx","forwardRef","useEffect","useRef","useState","jsx","isIndeterminate","checked","Checkbox","forwardRef","_ariaInvalid","className","_checked","_defaultChecked","defaultValue","onClick","readOnly","_validation","props","ref","innerRef","useRef","defaultChecked","useState","validation","ariaInvalid","useEffect","clsx","event","composeRefs"]}
@@ -1,2 +1,2 @@
1
- import{m as y}from"./chunk-ZYMZVPDT.js";import{a as p}from"./chunk-SBVSECWW.js";import{a as d}from"./chunk-ODDNPNLN.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 I}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as N}from"@phosphor-icons/react/WarningDiamond";import{createContext as P,forwardRef as l,useContext as f}from"react";import*as c from"sonner";import{jsx as s,jsxs as k}from"react/jsx-runtime";var A=({className:t,containerAriaLabel:e,dir:o,duration_ms:r=4e3,position:i="top-center",style:a})=>{let m=y();return s(c.Toaster,{className:n("toaster overlay-prompt pointer-events-auto *:duration-200",t),containerAriaLabel:e,dir:o,duration:r,gap:12,position:i??"top-center",style:a,theme:m,toastOptions:{unstyled:!0}})};A.displayName="Toaster";var g=P("");function L(t,e){let o=e?.duration_ms;return typeof o=="number"&&o<=0&&(o=Number.POSITIVE_INFINITY),c.toast.custom(r=>s(g.Provider,{value:r,children:t}),{duration:o,...e?.id?{id:e.id}:{},unstyled:!0})}var T=P({priority:"info"}),v=l(({asChild:t,children:e,className:o,priority:r,...i},a)=>{let m=t?d:"div";return s(T.Provider,{value:{priority:r},children:k(m,{className:n("relative flex items-start gap-2 text-sm font-sans","p-3 pl-3.75","bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg",o),ref:a,...i,children:[s(S,{priority:r}),e]})})});v.displayName="Toast";var h=l(({className:t,svg:e,...o},r)=>{let i=f(T);switch(i.priority){case"danger":return s(p,{className:n("text-danger-600",t),ref:r,svg:e??s(I,{weight:"fill"}),...o});case"warning":return s(p,{className:n("text-warning-600",t),ref:r,svg:e??s(N,{weight:"fill"}),...o});case"success":return s(p,{className:n("text-success-600",t),ref:r,svg:e??s(x,{weight:"fill"}),...o});case"info":return s(p,{className:n("text-accent-600",t),ref:r,svg:s(w,{weight:"fill"}),...o});default:throw new Error(`Unreachable Case: ${i.priority}`)}});h.displayName="ToastIcon";var C=l(({asChild:t,className:e,onClick:o,...r},i)=>{let a=f(g);return s(t?d:"button",{className:n("shrink-0","data-icon-button:-mr-0.5 data-icon-button:-mt-0.5 data-icon-button:rounded-xs",e),onClick:u=>{o?.(u),!u.defaultPrevented&&c.toast.dismiss(a)},ref:i,...r})});C.displayName="ToastAction";var b=l(({asChild:t,className:e,...o},r)=>s(t?d:"p",{className:n("text-strong flex-1 text-sm font-body",e),ref:r,...o}));b.displayName="ToastMessage";var z={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:e,...o}){return s("div",{"aria-hidden":!0,className:n("z-1 absolute -inset-px right-auto w-1.5 rounded-l",R[e],t),...o})}export{A as a,L as b,z as c,U as d};
2
- //# sourceMappingURL=chunk-TS7XNZ62.js.map
1
+ import{m as y}from"./chunk-LB366VCO.js";import{a as p}from"./chunk-IVQ626TU.js";import{a as d}from"./chunk-ADF5DAYG.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 I}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as N}from"@phosphor-icons/react/WarningDiamond";import{createContext as P,forwardRef as l,useContext as f}from"react";import*as c from"sonner";import{jsx as s,jsxs as k}from"react/jsx-runtime";var A=({className:t,containerAriaLabel:e,dir:o,duration_ms:r=4e3,position:i="top-center",style:a})=>{let m=y();return s(c.Toaster,{className:n("toaster overlay-prompt pointer-events-auto *:duration-200",t),containerAriaLabel:e,dir:o,duration:r,gap:12,position:i??"top-center",style:a,theme:m,toastOptions:{unstyled:!0}})};A.displayName="Toaster";var g=P("");function L(t,e){let o=e?.duration_ms;return typeof o=="number"&&o<=0&&(o=Number.POSITIVE_INFINITY),c.toast.custom(r=>s(g.Provider,{value:r,children:t}),{duration:o,...e?.id?{id:e.id}:{},unstyled:!0})}var T=P({priority:"info"}),v=l(({asChild:t,children:e,className:o,priority:r,...i},a)=>{let m=t?d:"div";return s(T.Provider,{value:{priority:r},children:k(m,{className:n("relative flex items-start gap-2 text-sm font-sans","p-3 pl-3.75","bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg",o),ref:a,...i,children:[s(S,{priority:r}),e]})})});v.displayName="Toast";var h=l(({className:t,svg:e,...o},r)=>{let i=f(T);switch(i.priority){case"danger":return s(p,{className:n("text-danger-600",t),ref:r,svg:e??s(I,{weight:"fill"}),...o});case"warning":return s(p,{className:n("text-warning-600",t),ref:r,svg:e??s(N,{weight:"fill"}),...o});case"success":return s(p,{className:n("text-success-600",t),ref:r,svg:e??s(x,{weight:"fill"}),...o});case"info":return s(p,{className:n("text-accent-600",t),ref:r,svg:s(w,{weight:"fill"}),...o});default:throw new Error(`Unreachable Case: ${i.priority}`)}});h.displayName="ToastIcon";var C=l(({asChild:t,className:e,onClick:o,...r},i)=>{let a=f(g);return s(t?d:"button",{className:n("shrink-0","data-icon-button:-mr-0.5 data-icon-button:-mt-0.5 data-icon-button:rounded-xs",e),onClick:u=>{o?.(u),!u.defaultPrevented&&c.toast.dismiss(a)},ref:i,...r})});C.displayName="ToastAction";var b=l(({asChild:t,className:e,...o},r)=>s(t?d:"p",{className:n("text-strong flex-1 text-sm font-body",e),ref:r,...o}));b.displayName="ToastMessage";var z={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:e,...o}){return s("div",{"aria-hidden":!0,className:n("z-1 absolute -inset-px right-auto w-1.5 rounded-l",R[e],t),...o})}export{A as a,L as b,z as c,U as d};
2
+ //# sourceMappingURL=chunk-5XDZE2OU.js.map
@@ -0,0 +1 @@
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 {\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 { Slot } from \"../slot/index.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#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(\"toaster overlay-prompt pointer-events-auto *:duration-200\", className)}\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\t * You can keep the toast open until manually dismissed by passing a value <= 0 or Number.POSITIVE_INFINITY\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#maketoast\n *\n * @example\n * ```tsx\n * // Basic toast with auto-dismiss (default 4000ms, inherits from `<Toaster>`)\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 * // Toast that stays open until manually dismissed\n * makeToast(\n * <Toast.Root priority=\"warning\">\n * <Toast.Icon />\n * <Toast.Message>Action required</Toast.Message>\n * <Toast.Action>Dismiss</Toast.Action>\n * </Toast.Root>,\n * { duration_ms: Number.POSITIVE_INFINITY }\n * );\n * ```\n */\nfunction makeToast(children: ReactNode, options?: MakeToastOptions) {\n\tlet duration = options?.duration_ms;\n\tif (typeof duration === \"number\" && duration <= 0) {\n\t\tduration = Number.POSITIVE_INFINITY;\n\t}\n\n\treturn ToastPrimitive.toast.custom(\n\t\t(toastId) => <ToastIdContext.Provider value={toastId}>{children}</ToastIdContext.Provider>,\n\t\t{\n\t\t\t//\n\t\t\tduration,\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#toastroot\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 font-sans\",\n\t\t\t\t\t\t\"p-3 pl-3.75\",\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#toasticon\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#toastaction\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#toastmessage\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#toastroot\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#toastaction\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#toasticon\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#toastmessage\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({ className, priority, ...props }: 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":"gKAEA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,YAAAC,MAAgB,6BACzB,OAAS,eAAAC,MAAmB,gCAC5B,OAAS,sBAAAC,MAA0B,uCACnC,OAIC,iBAAAC,EACA,cAAAC,EACA,cAAAC,MACM,QACP,UAAYC,MAAoB,SAkD9B,cAAAC,EA2HE,QAAAC,MA3HF,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,EAAG,4DAA6DR,CAAS,EACpF,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,EA4CxD,SAASC,EAAUC,EAAqBC,EAA4B,CACnE,IAAIC,EAAWD,GAAS,YACxB,OAAI,OAAOC,GAAa,UAAYA,GAAY,IAC/CA,EAAW,OAAO,mBAGG,QAAM,OAC1BC,GAAYlB,EAACY,EAAe,SAAf,CAAwB,MAAOM,EAAU,SAAAH,EAAS,EAChE,CAEC,SAAAE,EAGA,GAAID,GAAS,GAAK,CAAE,GAAIA,EAAQ,EAAG,EAAI,CAAC,EACxC,SAAU,EACX,CACD,CACD,CAeA,IAAMG,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,oDACA,cACA,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,gFACAR,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,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAM,EAA2B,CACrF,OACCC,EAAC,OACA,cAAW,GACX,UAAWC,EAEV,oDACAN,EAAwBG,CAAQ,EAChCD,CACD,EACC,GAAGE,EACL,CAEF","names":["CheckCircleIcon","InfoIcon","WarningIcon","WarningDiamondIcon","createContext","forwardRef","useContext","ToastPrimitive","jsx","jsxs","Toaster","className","containerAriaLabel","dir","duration_ms","position","style","theme","useAppliedTheme","cx","ToastIdContext","createContext","makeToast","children","options","duration","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"]}
@@ -0,0 +1,2 @@
1
+ import{a as t}from"./chunk-PFXFESEN.js";import{Slot as s}from"@radix-ui/react-slot";import{Children as m,cloneElement as l,forwardRef as a,isValidElement as n}from"react";import{jsx as i}from"react/jsx-runtime";var f=a(function({children:o,className:p,...r},e){return n(o)?i(s,{ref:e,...r,children:l(o,{...o.props,className:t(p,o.props.className)})}):m.only(o)});export{f as a};
2
+ //# sourceMappingURL=chunk-ADF5DAYG.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/slot/slot.tsx"],"sourcesContent":["import { Slot as RadixSlot } from \"@radix-ui/react-slot\";\nimport { Children, type ComponentProps, cloneElement, forwardRef, isValidElement } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype Props = ComponentProps<typeof RadixSlot>;\n\n/**\n * Merges its props onto its immediate child. This is useful for creating\n * components that can be rendered as different elements. Automatically merges\n * className props using `cx` for proper Tailwind class handling.\n *\n * @see https://mantle.ngrok.com/components/slot\n *\n * @example\n * ```tsx\n * <Slot className=\"custom-class\">\n * <a href=\"/\">Home</a>\n * </Slot>\n * ```\n */\nconst Slot = forwardRef<HTMLElement, Props>(function Slot(\n\t{ children, className, ...props },\n\tforwardedRef,\n) {\n\tif (!isValidElement<{ className?: string }>(children)) {\n\t\treturn Children.only(children);\n\t}\n\n\treturn (\n\t\t<RadixSlot ref={forwardedRef} {...props}>\n\t\t\t{cloneElement(children, {\n\t\t\t\t...children.props,\n\t\t\t\t/**\n\t\t\t\t * ClassName merge precedence (highest → lowest):\n\t\t\t\t *\n\t\t\t\t * 1. Child element’s own `className` ← most specific / closest to the DOM\n\t\t\t\t * 2. Slot’s `className` ← passed from the parent component\n\t\t\t\t * 3. Component’s internal base styles ← applied earlier inside the component\n\t\t\t\t *\n\t\t\t\t * We intentionally merge in this order so the child can fully override\n\t\t\t\t * parent + base styles when using `asChild`, preserving the “most specific wins”\n\t\t\t\t * behavior while still letting the component define sensible defaults.\n\t\t\t\t */\n\t\t\t\tclassName: cx(className, children.props.className),\n\t\t\t})}\n\t\t</RadixSlot>\n\t);\n});\n\nexport {\n\t//,\n\tSlot,\n};\n"],"mappings":"wCAAA,OAAS,QAAQA,MAAiB,uBAClC,OAAS,YAAAC,EAA+B,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QA4BtF,cAAAC,MAAA,oBATF,IAAMC,EAAOC,EAA+B,SAC3C,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAM,EAChCC,EACC,CACD,OAAKC,EAAuCJ,CAAQ,EAKnDH,EAACQ,EAAA,CAAU,IAAKF,EAAe,GAAGD,EAChC,SAAAI,EAAaN,EAAU,CACvB,GAAGA,EAAS,MAYZ,UAAWO,EAAGN,EAAWD,EAAS,MAAM,SAAS,CAClD,CAAC,EACF,EApBOQ,EAAS,KAAKR,CAAQ,CAsB/B,CAAC","names":["RadixSlot","Children","cloneElement","forwardRef","isValidElement","jsx","Slot","forwardRef","children","className","props","forwardedRef","isValidElement","RadixSlot","cloneElement","cx","Children"]}
@@ -1,2 +1,2 @@
1
- import{a as c}from"./chunk-OP6JMBKJ.js";import{a as l}from"./chunk-SBVSECWW.js";import{a as u}from"./chunk-ODDNPNLN.js";import{a}from"./chunk-PFXFESEN.js";import{CircleNotchIcon as I}from"@phosphor-icons/react/CircleNotch";import{cva as C}from"class-variance-authority";import{Children as H,cloneElement as M,forwardRef as T,isValidElement as V}from"react";import E from"tiny-invariant";import{Fragment as P,jsx as t,jsxs as z}from"react/jsx-runtime";var N=a("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-97 ease-out transition-transform duration-150"),A=C(N,{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:hover:border-accent-600 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"}}),L=T(({"aria-disabled":b,appearance:s,asChild:p=!1,children:o,className:m,disabled:f,icon:v,isLoading:e=!1,label:h,size:i,type:B,...g},y)=>{let n=c(b??f??e),x=e?t(I,{className:"animate-spin"}):v,r={"aria-disabled":n,className:a(A({appearance:s,isLoading:e,size:i}),m),"data-appearance":s,"data-disabled":n,"data-icon-button":!0,"data-loading":e,"data-size":i,disabled:n,ref:y,...g},d=z(P,{children:[t("span",{className:"sr-only",children:h}),t(l,{svg:x})]});return p?(E(V(o)&&H.only(o),"When using `asChild`, IconButton must be passed a single child as a JSX tag."),t(u,{...r,children:M(o,{},d)})):t("button",{...r,type:B,children:d})});L.displayName="IconButton";export{N as a,A as b,L as c};
2
- //# sourceMappingURL=chunk-U32WN4A7.js.map
1
+ import{a as c}from"./chunk-OP6JMBKJ.js";import{a as l}from"./chunk-IVQ626TU.js";import{a as u}from"./chunk-ADF5DAYG.js";import{a}from"./chunk-PFXFESEN.js";import{CircleNotchIcon as I}from"@phosphor-icons/react/CircleNotch";import{cva as C}from"class-variance-authority";import{Children as H,cloneElement as M,forwardRef as T,isValidElement as V}from"react";import E from"tiny-invariant";import{Fragment as P,jsx as t,jsxs as z}from"react/jsx-runtime";var N=a("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-97 ease-out transition-transform duration-150"),A=C(N,{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:hover:border-accent-600 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"}}),L=T(({"aria-disabled":b,appearance:s,asChild:p=!1,children:o,className:m,disabled:f,icon:v,isLoading:e=!1,label:h,size:i,type:B,...g},y)=>{let n=c(b??f??e),x=e?t(I,{className:"animate-spin"}):v,r={"aria-disabled":n,className:a(A({appearance:s,isLoading:e,size:i}),m),"data-appearance":s,"data-disabled":n,"data-icon-button":!0,"data-loading":e,"data-size":i,disabled:n,ref:y,...g},d=z(P,{children:[t("span",{className:"sr-only",children:h}),t(l,{svg:x})]});return p?(E(V(o)&&H.only(o),"When using `asChild`, IconButton must be passed a single child as a JSX tag."),t(u,{...r,children:M(o,{},d)})):t("button",{...r,type:B,children:d})});L.displayName="IconButton";export{N as a,A as b,L as c};
2
+ //# sourceMappingURL=chunk-CBRSMQ26.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/button/icon-button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { cva } from \"class-variance-authority\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } 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\";\nimport { Slot } from \"../slot/index.js\";\n\nconst baseIconButtonClasses = cx(\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-97 ease-out transition-transform duration-150\",\n);\n\nconst iconButtonVariants = cva(baseIconButtonClasses, {\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:hover:border-accent-600 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<ButtonHTMLAttributes<HTMLButtonElement>[\"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 * 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 ? <CircleNotchIcon className=\"animate-spin\" /> : propIcon;\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\tclassName: cx(iconButtonVariants({ appearance, isLoading, size }), className),\n\t\t\t\"data-appearance\": appearance,\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 <Slot {...buttonProps}>{cloneElement(children, {}, innerChildren)}</Slot>;\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\tbaseIconButtonClasses,\n\t//,\n\tIconButton,\n\ticonButtonVariants,\n};\n\nexport type {\n\t//,\n\tIconButtonProps,\n};\n"],"mappings":"2JAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,OAAAC,MAAW,2BAEpB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QACnE,OAAOC,MAAe,iBA8JK,OAgBxB,YAAAC,EAhBwB,OAAAC,EAgBxB,QAAAC,MAhBwB,oBAvJ3B,IAAMC,EAAwBC,EAC7B,cACA,8GACA,4CACA,8CACA,yEACD,EAEMC,EAAqBC,EAAIH,EAAuB,CACrD,SAAU,CAIT,WAAY,CACX,MACC,2MACD,SACC,2ZACF,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,EA2FKI,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,EAAYf,EAACwB,EAAA,CAAgB,UAAU,eAAe,EAAKV,EAElEW,EAAc,CACnB,gBAAiBJ,EACjB,UAAWlB,EAAGC,EAAmB,CAAE,WAAAK,EAAY,UAAAM,EAAW,KAAAE,CAAK,CAAC,EAAGL,CAAS,EAC5E,kBAAmBH,EACnB,gBAAiBY,EACjB,mBAAoB,GACpB,eAAgBN,EAChB,YAAaE,EACb,SAAAI,EACA,IAAAD,EACA,GAAGD,CACJ,EAEMO,EACLzB,EAAAF,EAAA,CACC,UAAAC,EAAC,QAAK,UAAU,UAAW,SAAAgB,EAAM,EACjChB,EAAC2B,EAAA,CAAK,IAAKJ,EAAM,GAClB,EAGD,OAAIb,GACHkB,EACCC,EAAelB,CAAQ,GAAKmB,EAAS,KAAKnB,CAAQ,EAClD,8EACD,EAEOX,EAAC+B,EAAA,CAAM,GAAGN,EAAc,SAAAO,EAAarB,EAAU,CAAC,EAAGe,CAAa,EAAE,GAIzE1B,EAAC,UAAQ,GAAGyB,EAAa,KAAMP,EAC7B,SAAAQ,EACF,CAEF,CACD,EACApB,EAAW,YAAc","names":["CircleNotchIcon","cva","Children","cloneElement","forwardRef","isValidElement","invariant","Fragment","jsx","jsxs","baseIconButtonClasses","cx","iconButtonVariants","cva","IconButton","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","isLoading","label","size","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","buttonProps","innerChildren","Icon","invariant","isValidElement","Children","Slot","cloneElement"]}
1
+ {"version":3,"sources":["../src/components/button/icon-button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { cva } from \"class-variance-authority\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } 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\";\nimport { Slot } from \"../slot/index.js\";\n\nconst baseIconButtonClasses = cx(\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-97 ease-out transition-transform duration-150\",\n);\n\nconst iconButtonVariants = cva(baseIconButtonClasses, {\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:hover:border-accent-600 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<ButtonHTMLAttributes<HTMLButtonElement>[\"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 * Renders only a single icon as children with an accessible, screen-reader-only label.\n *\n * @see https://mantle.ngrok.com/components/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 ? <CircleNotchIcon className=\"animate-spin\" /> : propIcon;\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\tclassName: cx(iconButtonVariants({ appearance, isLoading, size }), className),\n\t\t\t\"data-appearance\": appearance,\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 <Slot {...buttonProps}>{cloneElement(children, {}, innerChildren)}</Slot>;\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\tbaseIconButtonClasses,\n\t//,\n\tIconButton,\n\ticonButtonVariants,\n};\n\nexport type {\n\t//,\n\tIconButtonProps,\n};\n"],"mappings":"2JAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,OAAAC,MAAW,2BAEpB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QACnE,OAAOC,MAAe,iBA8JK,OAgBxB,YAAAC,EAhBwB,OAAAC,EAgBxB,QAAAC,MAhBwB,oBAvJ3B,IAAMC,EAAwBC,EAC7B,cACA,8GACA,4CACA,8CACA,yEACD,EAEMC,EAAqBC,EAAIH,EAAuB,CACrD,SAAU,CAIT,WAAY,CACX,MACC,2MACD,SACC,2ZACF,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,EA2FKI,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,EAAYf,EAACwB,EAAA,CAAgB,UAAU,eAAe,EAAKV,EAElEW,EAAc,CACnB,gBAAiBJ,EACjB,UAAWlB,EAAGC,EAAmB,CAAE,WAAAK,EAAY,UAAAM,EAAW,KAAAE,CAAK,CAAC,EAAGL,CAAS,EAC5E,kBAAmBH,EACnB,gBAAiBY,EACjB,mBAAoB,GACpB,eAAgBN,EAChB,YAAaE,EACb,SAAAI,EACA,IAAAD,EACA,GAAGD,CACJ,EAEMO,EACLzB,EAAAF,EAAA,CACC,UAAAC,EAAC,QAAK,UAAU,UAAW,SAAAgB,EAAM,EACjChB,EAAC2B,EAAA,CAAK,IAAKJ,EAAM,GAClB,EAGD,OAAIb,GACHkB,EACCC,EAAelB,CAAQ,GAAKmB,EAAS,KAAKnB,CAAQ,EAClD,8EACD,EAEOX,EAAC+B,EAAA,CAAM,GAAGN,EAAc,SAAAO,EAAarB,EAAU,CAAC,EAAGe,CAAa,EAAE,GAIzE1B,EAAC,UAAQ,GAAGyB,EAAa,KAAMP,EAC7B,SAAAQ,EACF,CAEF,CACD,EACApB,EAAW,YAAc","names":["CircleNotchIcon","cva","Children","cloneElement","forwardRef","isValidElement","invariant","Fragment","jsx","jsxs","baseIconButtonClasses","cx","iconButtonVariants","cva","IconButton","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","isLoading","label","size","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","buttonProps","innerChildren","Icon","invariant","isValidElement","Children","Slot","cloneElement"]}
@@ -1,2 +1,2 @@
1
- import{a as s}from"./chunk-ODDNPNLN.js";import*as e from"@radix-ui/react-dialog";import{createContext as v,forwardRef as n,useContext as p,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=p(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},m)=>{let a=p(l);return D(()=>(a.setHasDescription(!0),()=>a.setHasDescription(!1)),[a]),o(e.Description,{ref:m,asChild:!0,children:o(i?s:"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-NQZYWYVH.js.map
1
+ import{a as s}from"./chunk-ADF5DAYG.js";import*as e from"@radix-ui/react-dialog";import{createContext as v,forwardRef as n,useContext as p,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=p(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},m)=>{let a=p(l);return D(()=>(a.setHasDescription(!0),()=>a.setHasDescription(!1)),[a]),o(e.Description,{ref:m,asChild:!0,children:o(i?s:"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-ELZLLG6G.js.map
@@ -1,2 +1,2 @@
1
- import{a as f,b as P,c as D,d as m,e as u,f as v,g as y,h as C}from"./chunk-NQZYWYVH.js";import{d as p}from"./chunk-TS7XNZ62.js";import{c as g}from"./chunk-U32WN4A7.js";import{a}from"./chunk-PFXFESEN.js";import{XIcon as k}from"@phosphor-icons/react/X";import{forwardRef as r}from"react";import{jsx as e,jsxs as F}from"react/jsx-runtime";var x=f;x.displayName="Dialog";var N=P;N.displayName="DialogTrigger";var d=D;d.displayName="DialogPortal";var b=m;b.displayName="DialogClose";var c=r(({className:o,...t},i)=>e(u,{ref:i,className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs",o),...t}));c.displayName="DialogOverlay";var h=r(({children:o,className:t,onInteractOutside:i,onPointerDownOutside:l,preferredWidth:s="max-w-lg",...W},z)=>F(d,{children:[e(c,{}),e("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:e(v,{className:a("flex max-h-full w-full flex-1 flex-col","outline-hidden focus-within:outline-hidden","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","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",s,t),onInteractOutside:n=>{p(n),i?.(n)},onPointerDownOutside:n=>{p(n),l?.(n)},ref:z,...W,children:o})})]}));h.displayName="DialogContent";var R=({className:o,children:t,...i})=>e("div",{className:a("border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4","has-[.icon-button]:pr-4",o),...i,children:t});R.displayName="DialogHeader";var w=({size:o="md",type:t="button",label:i="Close Dialog",appearance:l="ghost",...s})=>e(m,{asChild:!0,children:e(g,{appearance:l,icon:e(k,{}),label:i,size:o,type:t,...s})});w.displayName="DialogCloseIconButton";var I=({className:o,...t})=>e("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...t});I.displayName="DialogBody";var B=({className:o,...t})=>e("div",{className:a("border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4",o),...t});B.displayName="DialogFooter";var O=r(({className:o,...t},i)=>e(y,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...t}));O.displayName="DialogTitle";var T=r(({className:o,...t},i)=>e(C,{ref:i,className:a("text-muted",o),...t}));T.displayName="DialogDescription";var E={Root:x,Body:I,Close:b,CloseIconButton:w,Content:h,Description:T,Footer:B,Header:R,Overlay:c,Portal:d,Title:O,Trigger:N};export{E as a};
2
- //# sourceMappingURL=chunk-73DPYKW5.js.map
1
+ import{a as f,b as P,c as D,d as m,e as u,f as v,g as y,h as C}from"./chunk-ELZLLG6G.js";import{d as p}from"./chunk-5XDZE2OU.js";import{c as g}from"./chunk-CBRSMQ26.js";import{a}from"./chunk-PFXFESEN.js";import{XIcon as k}from"@phosphor-icons/react/X";import{forwardRef as r}from"react";import{jsx as e,jsxs as F}from"react/jsx-runtime";var x=f;x.displayName="Dialog";var N=P;N.displayName="DialogTrigger";var d=D;d.displayName="DialogPortal";var b=m;b.displayName="DialogClose";var c=r(({className:o,...t},i)=>e(u,{ref:i,className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs",o),...t}));c.displayName="DialogOverlay";var h=r(({children:o,className:t,onInteractOutside:i,onPointerDownOutside:l,preferredWidth:s="max-w-lg",...W},z)=>F(d,{children:[e(c,{}),e("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:e(v,{className:a("flex max-h-full w-full flex-1 flex-col","outline-hidden focus-within:outline-hidden","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","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",s,t),onInteractOutside:n=>{p(n),i?.(n)},onPointerDownOutside:n=>{p(n),l?.(n)},ref:z,...W,children:o})})]}));h.displayName="DialogContent";var R=({className:o,children:t,...i})=>e("div",{className:a("border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4","has-[.icon-button]:pr-4",o),...i,children:t});R.displayName="DialogHeader";var w=({size:o="md",type:t="button",label:i="Close Dialog",appearance:l="ghost",...s})=>e(m,{asChild:!0,children:e(g,{appearance:l,icon:e(k,{}),label:i,size:o,type:t,...s})});w.displayName="DialogCloseIconButton";var I=({className:o,...t})=>e("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...t});I.displayName="DialogBody";var B=({className:o,...t})=>e("div",{className:a("border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4",o),...t});B.displayName="DialogFooter";var O=r(({className:o,...t},i)=>e(y,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...t}));O.displayName="DialogTitle";var T=r(({className:o,...t},i)=>e(C,{ref:i,className:a("text-muted",o),...t}));T.displayName="DialogDescription";var E={Root:x,Body:I,Close:b,CloseIconButton:w,Content:h,Description:T,Footer:B,Header:R,Overlay:c,Portal:d,Title:O,Trigger:N};export{E as a};
2
+ //# sourceMappingURL=chunk-HLRTYX4G.js.map