@ngrok/mantle 0.70.0 → 0.70.1

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 (147) hide show
  1. package/dist/accordion.d.ts +2 -2
  2. package/dist/accordion.js +1 -1
  3. package/dist/accordion.js.map +1 -1
  4. package/dist/alert-dialog.d.ts +3 -3
  5. package/dist/alert-dialog.js +1 -1
  6. package/dist/alert-dialog.js.map +1 -1
  7. package/dist/alert.d.ts +1 -1
  8. package/dist/alert.js +1 -1
  9. package/dist/alert.js.map +1 -1
  10. package/dist/anchor-2stEauOz.js +2 -0
  11. package/dist/anchor-2stEauOz.js.map +1 -0
  12. package/dist/anchor.js +1 -1
  13. package/dist/badge.js +1 -1
  14. package/dist/badge.js.map +1 -1
  15. package/dist/{button-BKykcpgJ.js → button-GokecthL.js} +2 -2
  16. package/dist/{button-BKykcpgJ.js.map → button-GokecthL.js.map} +1 -1
  17. package/dist/button-POMJ-20y.js +2 -0
  18. package/dist/button-POMJ-20y.js.map +1 -0
  19. package/dist/button.d.ts +1 -1
  20. package/dist/button.js +1 -1
  21. package/dist/calendar.js +1 -1
  22. package/dist/calendar.js.map +1 -1
  23. package/dist/card.js +1 -1
  24. package/dist/card.js.map +1 -1
  25. package/dist/checkbox.js +1 -1
  26. package/dist/checkbox.js.map +1 -1
  27. package/dist/code-block.d.ts +1 -1
  28. package/dist/code-block.js +1 -1
  29. package/dist/code-block.js.map +1 -1
  30. package/dist/code.d.ts +2 -2
  31. package/dist/code.js +1 -1
  32. package/dist/code.js.map +1 -1
  33. package/dist/combobox.js +1 -1
  34. package/dist/combobox.js.map +1 -1
  35. package/dist/command.d.ts +2 -2
  36. package/dist/command.js +1 -1
  37. package/dist/command.js.map +1 -1
  38. package/dist/data-table.d.ts +1 -1
  39. package/dist/data-table.js +1 -1
  40. package/dist/data-table.js.map +1 -1
  41. package/dist/description-list.js +1 -1
  42. package/dist/description-list.js.map +1 -1
  43. package/dist/dialog-MiS_Q-ge.js +2 -0
  44. package/dist/dialog-MiS_Q-ge.js.map +1 -0
  45. package/dist/dialog.d.ts +2 -2
  46. package/dist/dialog.js +1 -1
  47. package/dist/{dropdown-menu-BwQDoun1.d.ts → dropdown-menu-C9f9Y8Ov.d.ts} +2 -2
  48. package/dist/dropdown-menu-Ff97BIJe.js +2 -0
  49. package/dist/dropdown-menu-Ff97BIJe.js.map +1 -0
  50. package/dist/dropdown-menu.d.ts +1 -1
  51. package/dist/dropdown-menu.js +1 -1
  52. package/dist/empty.d.ts +5 -3
  53. package/dist/empty.js +1 -1
  54. package/dist/empty.js.map +1 -1
  55. package/dist/flag.js +1 -1
  56. package/dist/flag.js.map +1 -1
  57. package/dist/hover-card.d.ts +9 -1
  58. package/dist/hover-card.js +1 -1
  59. package/dist/hover-card.js.map +1 -1
  60. package/dist/{icon-C7Dje_lR.d.ts → icon-C0YAAaLZ.d.ts} +2 -2
  61. package/dist/icon-bWc5yC3-.js +2 -0
  62. package/dist/{icon-BMH0fD_b.js.map → icon-bWc5yC3-.js.map} +1 -1
  63. package/dist/{icon-button-CxxVPiKp.js → icon-button-ZKN0sRIJ.js} +2 -2
  64. package/dist/{icon-button-CxxVPiKp.js.map → icon-button-ZKN0sRIJ.js.map} +1 -1
  65. package/dist/icon.d.ts +3 -3
  66. package/dist/icon.js +1 -1
  67. package/dist/icons.d.ts +1 -1
  68. package/dist/{index-DFBA9X1i.d.ts → index-DU3SQJ46.d.ts} +4 -3
  69. package/dist/{index-A354MgUP.d.ts → index-ddHz7L9f.d.ts} +4 -4
  70. package/dist/input.d.ts +1 -1
  71. package/dist/input.js +1 -1
  72. package/dist/input.js.map +1 -1
  73. package/dist/kbd-B0wWeV_0.js +2 -0
  74. package/dist/{kbd-GS-e4ICt.js.map → kbd-B0wWeV_0.js.map} +1 -1
  75. package/dist/kbd.js +1 -1
  76. package/dist/label.js +1 -1
  77. package/dist/label.js.map +1 -1
  78. package/dist/main.js +1 -1
  79. package/dist/main.js.map +1 -1
  80. package/dist/media-object.js +1 -1
  81. package/dist/media-object.js.map +1 -1
  82. package/dist/multi-select.js +1 -1
  83. package/dist/pagination.d.ts +1 -1
  84. package/dist/pagination.js +1 -1
  85. package/dist/pagination.js.map +1 -1
  86. package/dist/popover.d.ts +12 -0
  87. package/dist/popover.js +1 -1
  88. package/dist/popover.js.map +1 -1
  89. package/dist/{primitive-pggbsddf.js → primitive-tXm_8n_t.js} +2 -2
  90. package/dist/{primitive-pggbsddf.js.map → primitive-tXm_8n_t.js.map} +1 -1
  91. package/dist/progress.js +1 -1
  92. package/dist/progress.js.map +1 -1
  93. package/dist/radio-group.js +1 -1
  94. package/dist/radio-group.js.map +1 -1
  95. package/dist/select-LJmfG--I.js +2 -0
  96. package/dist/select-LJmfG--I.js.map +1 -0
  97. package/dist/select.js +1 -1
  98. package/dist/separator-DyOGgFCs.js +2 -0
  99. package/dist/separator-DyOGgFCs.js.map +1 -0
  100. package/dist/separator.js +1 -1
  101. package/dist/sheet.js +1 -1
  102. package/dist/sheet.js.map +1 -1
  103. package/dist/skeleton.js +1 -1
  104. package/dist/skeleton.js.map +1 -1
  105. package/dist/skip-to-main-link.js +1 -1
  106. package/dist/skip-to-main-link.js.map +1 -1
  107. package/dist/split-button.d.ts +1 -1
  108. package/dist/split-button.js +1 -1
  109. package/dist/{svg-only-DnZldAY9.js → svg-only-7gYlsX8f.js} +2 -2
  110. package/dist/{svg-only-DnZldAY9.js.map → svg-only-7gYlsX8f.js.map} +1 -1
  111. package/dist/{svg-only-B-xzpaiu.d.ts → svg-only-BnnbLx6R.d.ts} +2 -2
  112. package/dist/switch.js +1 -1
  113. package/dist/switch.js.map +1 -1
  114. package/dist/table-12T25gGa.js +2 -0
  115. package/dist/table-12T25gGa.js.map +1 -0
  116. package/dist/table.js +1 -1
  117. package/dist/tabs.js +1 -1
  118. package/dist/tabs.js.map +1 -1
  119. package/dist/text-area.js +1 -1
  120. package/dist/text-area.js.map +1 -1
  121. package/dist/toast-CGnquSKO.js +2 -0
  122. package/dist/toast-CGnquSKO.js.map +1 -0
  123. package/dist/toast.d.ts +1 -1
  124. package/dist/toast.js +1 -1
  125. package/dist/tooltip.d.ts +9 -2
  126. package/dist/tooltip.js.map +1 -1
  127. package/dist/types-DEYyl5LX.d.ts +30 -0
  128. package/package.json +1 -1
  129. package/dist/anchor-BtIZueBA.js +0 -2
  130. package/dist/anchor-BtIZueBA.js.map +0 -1
  131. package/dist/button-DdrxOnUb.js +0 -2
  132. package/dist/button-DdrxOnUb.js.map +0 -1
  133. package/dist/dialog-Cw3E0Wr9.js +0 -2
  134. package/dist/dialog-Cw3E0Wr9.js.map +0 -1
  135. package/dist/dropdown-menu-Bfi9ODPB.js +0 -2
  136. package/dist/dropdown-menu-Bfi9ODPB.js.map +0 -1
  137. package/dist/icon-BMH0fD_b.js +0 -2
  138. package/dist/kbd-GS-e4ICt.js +0 -2
  139. package/dist/select-BPzMl3gm.js +0 -2
  140. package/dist/select-BPzMl3gm.js.map +0 -1
  141. package/dist/separator-Yk9hMn8E.js +0 -2
  142. package/dist/separator-Yk9hMn8E.js.map +0 -1
  143. package/dist/table-BMGcRJlk.js +0 -2
  144. package/dist/table-BMGcRJlk.js.map +0 -1
  145. package/dist/toast-BhAyUXKL.js +0 -2
  146. package/dist/toast-BhAyUXKL.js.map +0 -1
  147. package/dist/types-zKzi66a6.d.ts +0 -9
@@ -1 +1 @@
1
- {"version":3,"file":"description-list.js","names":[],"sources":["../src/components/description-list/description-list.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } 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 DescriptionListProps = ComponentProps<\"dl\"> & WithAsChild;\n\n/**\n * A semantically correct description list built on the HTML `<dl>` element.\n * Renders a list of label/value pairs with alternating row backgrounds,\n * commonly used in detail views to display metadata about a resource.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistroot\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\n *\n * @example\n * ```tsx\n * <DescriptionList.Root>\n * <DescriptionList.Item>\n * <DescriptionList.Label>Name</DescriptionList.Label>\n * <DescriptionList.Value>my-api-key</DescriptionList.Value>\n * </DescriptionList.Item>\n * </DescriptionList.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"dl\">, DescriptionListProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dl\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card grid grid-cols-[auto_1fr] gap-x-4 [&>*:nth-child(odd)]:bg-neutral-500/5 p-1\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\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 = \"DescriptionList\";\n\ntype DescriptionListItemProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A wrapper that groups a `DescriptionList.Label` and `DescriptionList.Value`\n * pair. Renders as a `<div>` inside the `<dl>` with a subgrid layout that\n * inherits column tracks from the root.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistitem\n *\n * @example\n * ```tsx\n * <DescriptionList.Item>\n * <DescriptionList.Label>ID</DescriptionList.Label>\n * <DescriptionList.Value>aigk_2fKm9x8Hn3...</DescriptionList.Value>\n * </DescriptionList.Item>\n * ```\n */\nconst Item = forwardRef<ComponentRef<\"div\">, DescriptionListItemProps>(\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(\"rounded-sm col-span-full grid grid-cols-subgrid items-center\", 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);\nItem.displayName = \"DescriptionListItem\";\n\ntype DescriptionListLabelProps = ComponentProps<\"dt\"> & WithAsChild;\n\n/**\n * The label for a description list item. Renders as a `<dt>` element.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistlabel\n *\n * @example\n * ```tsx\n * <DescriptionList.Label>Name</DescriptionList.Label>\n * ```\n */\nconst Label = forwardRef<ComponentRef<\"dt\">, DescriptionListLabelProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dt\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"text-muted text-sm font-sans font-medium min-w-36 p-2\", 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);\nLabel.displayName = \"DescriptionListLabel\";\n\ntype DescriptionListValueProps = ComponentProps<\"dd\"> & WithAsChild;\n\n/**\n * The value for a description list item. Renders as a `<dd>` element.\n * Compose any content inside — the component is intentionally \"dumb\" and\n * imposes no layout on its children.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistvalue\n *\n * @example\n * ```tsx\n * <DescriptionList.Value>\n * aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n * </DescriptionList.Value>\n * ```\n */\nconst Value = forwardRef<ComponentRef<\"dd\">, DescriptionListValueProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dd\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"text-body font-mono text-mono py-2 px-3\", 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);\nValue.displayName = \"DescriptionListValue\";\n\n/**\n * A semantically correct description list built on the HTML `<dl>` element.\n * Renders a list of label/value pairs with alternating row backgrounds,\n * commonly used in detail views to display metadata about a resource\n * (e.g., API keys, secrets, domains).\n *\n * Compose with `DescriptionList.Item`, `DescriptionList.Label`, and\n * `DescriptionList.Value` as direct children.\n *\n * @see https://mantle.ngrok.com/components/description-list\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\n *\n * @example\n * Composition:\n * ```\n * DescriptionList.Root\n * └── DescriptionList.Item\n * ├── DescriptionList.Label\n * └── DescriptionList.Value\n * ```\n *\n * @example\n * ```tsx\n * <DescriptionList.Root>\n * <DescriptionList.Item>\n * <DescriptionList.Label>Name</DescriptionList.Label>\n * <DescriptionList.Value>my-api-key</DescriptionList.Value>\n * </DescriptionList.Item>\n * <DescriptionList.Item>\n * <DescriptionList.Label>ID</DescriptionList.Label>\n * <DescriptionList.Value>\n * aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n * </DescriptionList.Value>\n * </DescriptionList.Item>\n * </DescriptionList.Root>\n * ```\n */\nconst DescriptionList = {\n\t/**\n\t * The root container for a description list. Renders a `<dl>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Root>\n\t * <DescriptionList.Item>\n\t * <DescriptionList.Label>Name</DescriptionList.Label>\n\t * <DescriptionList.Value>my-api-key</DescriptionList.Value>\n\t * </DescriptionList.Item>\n\t * </DescriptionList.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A wrapper that groups a label/value pair. Renders a `<div>` with a default\n\t * subgrid layout.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Item>\n\t * <DescriptionList.Label>ID</DescriptionList.Label>\n\t * <DescriptionList.Value>aigk_2fKm9x8Hn3...</DescriptionList.Value>\n\t * </DescriptionList.Item>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * The label for a description list item. Renders a `<dt>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistlabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Label>Name</DescriptionList.Label>\n\t * ```\n\t */\n\tLabel,\n\t/**\n\t * The value for a description list item. Renders a `<dd>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistvalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Value>\n\t * aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n\t * </DescriptionList.Value>\n\t * ```\n\t */\n\tValue,\n} as const;\n\nexport {\n\t//,\n\tDescriptionList,\n};\n\nexport type {\n\t//,\n\tDescriptionListProps,\n};\n"],"mappings":"kJA0BA,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,KAGlC,CACM,MACL,UAAW,EACV,iKACA,EACA,CACD,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAK,YAAc,kBAmBnB,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,UAAW,EAAG,+DAAgE,EAAU,CACxF,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAK,YAAc,sBAcnB,MAAM,EAAQ,GACZ,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,KAGlC,CACM,MACL,UAAW,EAAG,wDAAyD,EAAU,CACjF,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAM,YAAc,uBAkBpB,MAAM,EAAQ,GACZ,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,KAGlC,CACM,MACL,UAAW,EAAG,0CAA2C,EAAU,CACnE,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAM,YAAc,uBAuCpB,MAAM,EAAkB,CAgBvB,OAeA,OAWA,QAaA,QACA"}
1
+ {"version":3,"file":"description-list.js","names":[],"sources":["../src/components/description-list/description-list.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } 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 DescriptionListProps = ComponentProps<\"dl\"> & WithAsChild;\n\n/**\n * A semantically correct description list built on the HTML `<dl>` element.\n * Renders a list of label/value pairs with alternating row backgrounds,\n * commonly used in detail views to display metadata about a resource.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistroot\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\n *\n * @example\n * ```tsx\n * <DescriptionList.Root>\n * <DescriptionList.Item>\n * <DescriptionList.Label>Name</DescriptionList.Label>\n * <DescriptionList.Value>my-api-key</DescriptionList.Value>\n * </DescriptionList.Item>\n * </DescriptionList.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"dl\">, DescriptionListProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dl\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"description-list\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card grid grid-cols-[auto_1fr] gap-x-4 [&>*:nth-child(odd)]:bg-neutral-500/5 p-1\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\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 = \"DescriptionList\";\n\ntype DescriptionListItemProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A wrapper that groups a `DescriptionList.Label` and `DescriptionList.Value`\n * pair. Renders as a `<div>` inside the `<dl>` with a subgrid layout that\n * inherits column tracks from the root.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistitem\n *\n * @example\n * ```tsx\n * <DescriptionList.Item>\n * <DescriptionList.Label>ID</DescriptionList.Label>\n * <DescriptionList.Value>aigk_2fKm9x8Hn3...</DescriptionList.Value>\n * </DescriptionList.Item>\n * ```\n */\nconst Item = forwardRef<ComponentRef<\"div\">, DescriptionListItemProps>(\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\tdata-slot=\"description-list-item\"\n\t\t\t\tclassName={cx(\"rounded-sm col-span-full grid grid-cols-subgrid items-center\", 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);\nItem.displayName = \"DescriptionListItem\";\n\ntype DescriptionListLabelProps = ComponentProps<\"dt\"> & WithAsChild;\n\n/**\n * The label for a description list item. Renders as a `<dt>` element.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistlabel\n *\n * @example\n * ```tsx\n * <DescriptionList.Label>Name</DescriptionList.Label>\n * ```\n */\nconst Label = forwardRef<ComponentRef<\"dt\">, DescriptionListLabelProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dt\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"description-list-label\"\n\t\t\t\tclassName={cx(\"text-muted text-sm font-sans font-medium min-w-36 p-2\", 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);\nLabel.displayName = \"DescriptionListLabel\";\n\ntype DescriptionListValueProps = ComponentProps<\"dd\"> & WithAsChild;\n\n/**\n * The value for a description list item. Renders as a `<dd>` element.\n * Compose any content inside — the component is intentionally \"dumb\" and\n * imposes no layout on its children.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistvalue\n *\n * @example\n * ```tsx\n * <DescriptionList.Value>\n * aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n * </DescriptionList.Value>\n * ```\n */\nconst Value = forwardRef<ComponentRef<\"dd\">, DescriptionListValueProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dd\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"description-list-value\"\n\t\t\t\tclassName={cx(\"text-body font-mono text-mono py-2 px-3\", 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);\nValue.displayName = \"DescriptionListValue\";\n\n/**\n * A semantically correct description list built on the HTML `<dl>` element.\n * Renders a list of label/value pairs with alternating row backgrounds,\n * commonly used in detail views to display metadata about a resource\n * (e.g., API keys, secrets, domains).\n *\n * Compose with `DescriptionList.Item`, `DescriptionList.Label`, and\n * `DescriptionList.Value` as direct children.\n *\n * @see https://mantle.ngrok.com/components/description-list\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\n *\n * @example\n * Composition:\n * ```\n * DescriptionList.Root\n * └── DescriptionList.Item\n * ├── DescriptionList.Label\n * └── DescriptionList.Value\n * ```\n *\n * @example\n * ```tsx\n * <DescriptionList.Root>\n * <DescriptionList.Item>\n * <DescriptionList.Label>Name</DescriptionList.Label>\n * <DescriptionList.Value>my-api-key</DescriptionList.Value>\n * </DescriptionList.Item>\n * <DescriptionList.Item>\n * <DescriptionList.Label>ID</DescriptionList.Label>\n * <DescriptionList.Value>\n * aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n * </DescriptionList.Value>\n * </DescriptionList.Item>\n * </DescriptionList.Root>\n * ```\n */\nconst DescriptionList = {\n\t/**\n\t * The root container for a description list. Renders a `<dl>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Root>\n\t * <DescriptionList.Item>\n\t * <DescriptionList.Label>Name</DescriptionList.Label>\n\t * <DescriptionList.Value>my-api-key</DescriptionList.Value>\n\t * </DescriptionList.Item>\n\t * </DescriptionList.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A wrapper that groups a label/value pair. Renders a `<div>` with a default\n\t * subgrid layout.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Item>\n\t * <DescriptionList.Label>ID</DescriptionList.Label>\n\t * <DescriptionList.Value>aigk_2fKm9x8Hn3...</DescriptionList.Value>\n\t * </DescriptionList.Item>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * The label for a description list item. Renders a `<dt>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistlabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Label>Name</DescriptionList.Label>\n\t * ```\n\t */\n\tLabel,\n\t/**\n\t * The value for a description list item. Renders a `<dd>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistvalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Value>\n\t * aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n\t * </DescriptionList.Value>\n\t * ```\n\t */\n\tValue,\n} as const;\n\nexport {\n\t//,\n\tDescriptionList,\n};\n\nexport type {\n\t//,\n\tDescriptionListProps,\n};\n"],"mappings":"kJA0BA,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,KAGlC,CACM,MACL,YAAU,mBACV,UAAW,EACV,iKACA,EACA,CACD,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAK,YAAc,kBAmBnB,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,YAAU,wBACV,UAAW,EAAG,+DAAgE,EAAU,CACxF,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAK,YAAc,sBAcnB,MAAM,EAAQ,GACZ,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,KAGlC,CACM,MACL,YAAU,yBACV,UAAW,EAAG,wDAAyD,EAAU,CACjF,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAM,YAAc,uBAkBpB,MAAM,EAAQ,GACZ,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,KAGlC,CACM,MACL,YAAU,yBACV,UAAW,EAAG,0CAA2C,EAAU,CACnE,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAM,YAAc,uBAuCpB,MAAM,EAAkB,CAgBvB,OAeA,OAWA,QAaA,QACA"}
@@ -0,0 +1,2 @@
1
+ import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-button-ZKN0sRIJ.js";import{a as n,c as r,i,n as a,o,r as s,s as c,t as l}from"./primitive-tXm_8n_t.js";import{forwardRef as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{XIcon as p}from"@phosphor-icons/react/X";const m=o;m.displayName=`Dialog`;const h=u((e,t)=>d(r,{ref:t,"data-slot":`dialog-trigger`,...e}));h.displayName=`DialogTrigger`;const g=n;g.displayName=`DialogPortal`;const _=u((e,t)=>d(l,{ref:t,"data-slot":`dialog-close`,...e}));_.displayName=`DialogClose`;const v=u(({className:t,...n},r)=>d(i,{ref:r,"data-slot":`dialog-overlay`,className:e(`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`,t),...n}));v.displayName=`DialogOverlay`;const y=u(({children:t,className:n,preferredWidth:r=`max-w-lg`,...i},o)=>f(g,{children:[d(v,{}),d(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:d(a,{"data-mantle-modal-content":!0,"data-slot":`dialog-content`,className:e(`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`,r,n),ref:o,...i,children:t})})]}));y.displayName=`DialogContent`;const b=({className:t,children:n,...r})=>d(`div`,{"data-slot":`dialog-header`,className:e(`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`,t),...r,children:n});b.displayName=`DialogHeader`;const x=({size:e=`md`,type:n=`button`,label:r=`Close Dialog`,appearance:i=`ghost`,...a})=>d(l,{asChild:!0,children:d(t,{appearance:i,"data-slot":`dialog-close-icon-button`,icon:d(p,{}),label:r,size:e,type:n,...a})});x.displayName=`DialogCloseIconButton`;const S=({className:t,...n})=>d(`div`,{"data-slot":`dialog-body`,className:e(`scrollbar text-body flex-1 overflow-y-auto p-6`,t),...n});S.displayName=`DialogBody`;const C=({className:t,...n})=>d(`div`,{"data-slot":`dialog-footer`,className:e(`border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4`,t),...n});C.displayName=`DialogFooter`;const w=u(({className:t,...n},r)=>d(c,{ref:r,"data-slot":`dialog-title`,className:e(`text-strong truncate text-lg font-medium`,t),...n}));w.displayName=`DialogTitle`;const T=u(({className:t,...n},r)=>d(s,{ref:r,"data-slot":`dialog-description`,className:e(`text-muted`,t),...n}));T.displayName=`DialogDescription`;const E={Root:m,Body:S,Close:_,CloseIconButton:x,Content:y,Description:T,Footer:C,Header:b,Overlay:v,Portal:g,Title:w,Trigger:h};export{E as t};
2
+ //# sourceMappingURL=dialog-MiS_Q-ge.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dialog-MiS_Q-ge.js","names":["DialogPrimitive.Root","DialogPrimitive.Trigger","DialogPrimitive.Portal","DialogPrimitive.Close","DialogPrimitive.Overlay","DialogPrimitive.Content","DialogPrimitive.Title","DialogPrimitive.Description"],"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport * as DialogPrimitive from \"./primitive.js\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the Dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogroot\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Root = DialogPrimitive.Root;\nRoot.displayName = \"Dialog\";\n\n/**\n * A button that opens the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogtrigger\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Trigger>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>\n>((props, ref) => <DialogPrimitive.Trigger ref={ref} data-slot=\"dialog-trigger\" {...props} />);\nTrigger.displayName = \"DialogTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPortal\";\n\nconst Close = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Close>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Close>\n>((props, ref) => <DialogPrimitive.Close ref={ref} data-slot=\"dialog-close\" {...props} />);\nClose.displayName = \"DialogClose\";\n\nconst Overlay = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tdata-slot=\"dialog-overlay\"\n\t\tclassName={cx(\n\t\t\t\"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\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nOverlay.displayName = \"DialogOverlay\";\n\ntype ContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `Dialog.Content` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Dialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `Dialog.Content`\n\t *\n\t * @default `max-w-lg`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The container for the dialog content.\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogcontent\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ContentProps>(\n\t({ children, className, preferredWidth = \"max-w-lg\", ...props }, ref) => (\n\t\t<Portal>\n\t\t\t<Overlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tdata-mantle-modal-content\n\t\t\t\t\tdata-slot=\"dialog-content\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full flex-1 flex-col\",\n\t\t\t\t\t\t\"outline-hidden focus-within:outline-hidden\",\n\t\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\t\t\t\t\t\t\"data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\t\tpreferredWidth,\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</Portal>\n\t),\n);\nContent.displayName = \"DialogContent\";\n\n/**\n * Contains the header content of the dialog, including the title and close button.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogheader\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Header = ({ className, children, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tdata-slot=\"dialog-header\"\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nHeader.displayName = \"DialogHeader\";\n\ntype CloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the dialog when clicked.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogcloseiconbutton\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst CloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: CloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\tdata-slot=\"dialog-close-icon-button\"\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</DialogPrimitive.Close>\n);\nCloseIconButton.displayName = \"DialogCloseIconButton\";\n\n/**\n * Contains the main content of the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogbody\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Body = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tdata-slot=\"dialog-body\"\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\n);\nBody.displayName = \"DialogBody\";\n\n/**\n * Contains the footer content of the dialog, including action buttons.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogfooter\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Footer = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tdata-slot=\"dialog-footer\"\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nFooter.displayName = \"DialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogtitle\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tdata-slot=\"dialog-title\"\n\t\tclassName={cx(\"text-strong truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"DialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogdescription\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tdata-slot=\"dialog-description\"\n\t\tclassName={cx(\"text-muted\", className)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = \"DialogDescription\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n *\n * @see https://mantle.ngrok.com/components/dialog\n *\n * @example\n * Composition:\n * ```\n * Dialog.Root\n * ├── Dialog.Trigger\n * └── Dialog.Content\n * ├── Dialog.Header\n * │ ├── Dialog.Title\n * │ ├── Dialog.Description\n * │ └── Dialog.CloseIconButton\n * ├── Dialog.Body\n * └── Dialog.Footer\n * └── Dialog.Close\n * ```\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Dialog = {\n\t/**\n\t * A window overlaid on either the primary window or another dialog window.\n\t * The root stateful component for the Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the main content of the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * An icon button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogcloseiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tCloseIconButton,\n\t/**\n\t * The container for the dialog content.\n\t * Renders on top of the overlay and is centered in the viewport.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * An accessible description to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including action buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and close button.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The overlay backdrop for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-reference\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Portal>\n\t * <Dialog.Overlay />\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tOverlay,\n\t/**\n\t * The portal container for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-reference\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Portal>\n\t * <Dialog.Overlay />\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * An accessible name to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogtitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tDialog,\n};\n"],"mappings":"sSAsCA,MAAM,EAAOA,EACb,EAAK,YAAc,SAgCnB,MAAM,EAAU,GAGb,EAAO,IAAQ,EAACC,EAAD,CAA8B,MAAK,YAAU,iBAAiB,GAAI,EAAS,CAAA,CAAC,CAC9F,EAAQ,YAAc,gBAEtB,MAAM,EAASC,EACf,EAAO,YAAc,eAErB,MAAM,EAAQ,GAGX,EAAO,IAAQ,EAACC,EAAD,CAA4B,MAAK,YAAU,eAAe,GAAI,EAAS,CAAA,CAAC,CAC1F,EAAM,YAAc,cAEpB,MAAM,EAAU,GAGb,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CACM,MACL,YAAU,iBACV,UAAW,EACV,iKACA,EACA,CACD,GAAI,EACH,CAAA,CACD,CACF,EAAQ,YAAc,gBA6CtB,MAAM,EAAU,GACd,CAAE,WAAU,YAAW,iBAAiB,WAAY,GAAG,GAAS,IAChE,EAAC,EAAD,CAAA,SAAA,CACC,EAAC,EAAD,EAAW,CAAA,CACX,EAAC,MAAD,CAAK,UAAU,+DACd,EAACC,EAAD,CACC,4BAAA,GACA,YAAU,iBACV,UAAW,EACV,yCACA,6CACA,wFACA,2KACA,EACA,EACA,CACI,MACL,GAAI,EAEH,WACwB,CAAA,CACrB,CAAA,CACE,CAAA,CAAA,CAEV,CACD,EAAQ,YAAc,gBAgCtB,MAAM,GAAU,CAAE,YAAW,WAAU,GAAG,KACzC,EAAC,MAAD,CACC,YAAU,gBACV,UAAW,EACV,+GACA,0BACA,EACA,CACD,GAAI,EAEH,WACI,CAAA,CAEP,EAAO,YAAc,eAkCrB,MAAM,GAAmB,CACxB,OAAO,KACP,OAAO,SACP,QAAQ,eACR,aAAa,QACb,GAAG,KAEH,EAACF,EAAD,CAAuB,QAAA,YACtB,EAAC,EAAD,CACa,aACZ,YAAU,2BACV,KAAM,EAAC,EAAD,EAAS,CAAA,CACR,QACD,OACA,OACN,GAAI,EACH,CAAA,CACqB,CAAA,CAEzB,EAAgB,YAAc,wBAgC9B,MAAM,GAAQ,CAAE,YAAW,GAAG,KAC7B,EAAC,MAAD,CACC,YAAU,cACV,UAAW,EAAG,iDAAkD,EAAU,CAC1E,GAAI,EACH,CAAA,CAEH,EAAK,YAAc,aAgCnB,MAAM,GAAU,CAAE,YAAW,GAAG,KAC/B,EAAC,MAAD,CACC,YAAU,gBACV,UAAW,EACV,8EACA,EACA,CACD,GAAI,EACH,CAAA,CAEH,EAAO,YAAc,eAgCrB,MAAM,EAAQ,GAGX,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACG,EAAD,CACM,MACL,YAAU,eACV,UAAW,EAAG,2CAA4C,EAAU,CACpE,GAAI,EACH,CAAA,CACD,CACF,EAAM,YAAc,cAkCpB,MAAM,EAAc,GAGjB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CACM,MACL,YAAU,qBACV,UAAW,EAAG,aAAc,EAAU,CACtC,GAAI,EACH,CAAA,CACD,CACF,EAAY,YAAc,oBA+C1B,MAAM,EAAS,CAgCd,OA+BA,OA+BA,QA+BA,kBAgCA,UA+BA,cA+BA,SA+BA,SAkCA,UAkCA,SA+BA,QA+BA,UACA"}
package/dist/dialog.d.ts CHANGED
@@ -152,7 +152,7 @@ declare const Dialog: {
152
152
  * </Dialog.Root>
153
153
  * ```
154
154
  */
155
- readonly Close: _$react.ForwardRefExoticComponent<_$_radix_ui_react_dialog0.DialogCloseProps & _$react.RefAttributes<HTMLButtonElement>>;
155
+ readonly Close: _$react.ForwardRefExoticComponent<Omit<_$_radix_ui_react_dialog0.DialogCloseProps & _$react.RefAttributes<HTMLButtonElement>, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
156
156
  /**
157
157
  * An icon button that closes the dialog when clicked.
158
158
  *
@@ -470,7 +470,7 @@ declare const Dialog: {
470
470
  * </Dialog.Root>
471
471
  * ```
472
472
  */
473
- readonly Trigger: _$react.ForwardRefExoticComponent<_$_radix_ui_react_dialog0.DialogTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
473
+ readonly Trigger: _$react.ForwardRefExoticComponent<Omit<_$_radix_ui_react_dialog0.DialogTriggerProps & _$react.RefAttributes<HTMLButtonElement>, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
474
474
  };
475
475
  //#endregion
476
476
  export { Dialog, isDialogOverlayTarget };
package/dist/dialog.js CHANGED
@@ -1 +1 @@
1
- import{l as e}from"./primitive-pggbsddf.js";import{t}from"./dialog-Cw3E0Wr9.js";export{t as Dialog,e as isDialogOverlayTarget};
1
+ import{l as e}from"./primitive-tXm_8n_t.js";import{t}from"./dialog-MiS_Q-ge.js";export{t as Dialog,e as isDialogOverlayTarget};
@@ -342,8 +342,8 @@ declare const DropdownMenu: {
342
342
  * </DropdownMenu.Root>
343
343
  * ```
344
344
  */
345
- readonly Trigger: _$react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
345
+ readonly Trigger: _$react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & _$react.RefAttributes<HTMLButtonElement>, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
346
346
  };
347
347
  //#endregion
348
348
  export { DropdownMenu as t };
349
- //# sourceMappingURL=dropdown-menu-BwQDoun1.d.ts.map
349
+ //# sourceMappingURL=dropdown-menu-C9f9Y8Ov.d.ts.map
@@ -0,0 +1,2 @@
1
+ import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-bWc5yC3-.js";import{n}from"./separator-DyOGgFCs.js";import{forwardRef as r}from"react";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{CaretRightIcon as o}from"@phosphor-icons/react/CaretRight";import{CheckIcon as s}from"@phosphor-icons/react/Check";import*as c from"@radix-ui/react-dropdown-menu";const l=c.Root;l.displayName=`DropdownMenu`;const u=r((e,t)=>i(c.Trigger,{ref:t,"data-slot":`dropdown-menu-trigger`,...e}));u.displayName=`DropdownMenuTrigger`;const d=r(({className:t,...n},r)=>i(c.Group,{ref:r,"data-slot":`dropdown-menu-group`,className:e(`space-y-px`,t),...n}));d.displayName=`DropdownMenuGroup`;const f=c.Portal;f.displayName=`DropdownMenuPortal`;const p=c.Sub;p.displayName=`DropdownMenuSub`;const m=r(({className:t,...n},r)=>i(c.RadioGroup,{ref:r,"data-slot":`dropdown-menu-radio-group`,className:e(`space-y-px`,t),...n}));m.displayName=`DropdownMenuRadioGroup`;const h=r(({className:n,inset:r,children:s,...l},u)=>a(c.SubTrigger,{"data-slot":`dropdown-menu-sub-trigger`,className:e(`focus:bg-accent data-state-open:bg-accent relative flex select-none items-center rounded-md py-1.5 pl-2 pr-9 text-sm outline-hidden`,`data-highlighted:bg-active-menu-item data-state-open:bg-active-menu-item`,`[&>svg]:size-5 [&_svg]:shrink-0`,r&&`pl-8`,n),ref:u,...l,children:[s,i(`span`,{className:`absolute right-2 flex items-center`,children:i(t,{svg:i(o,{weight:`bold`}),className:`size-4`})})]}));h.displayName=`DropdownMenuSubTrigger`;const g=r(({className:t,loop:n=!0,...r},a)=>i(f,{children:i(c.SubContent,{"data-slot":`dropdown-menu-sub-content`,className:e(`scrollbar`,`text-popover-foreground border-popover bg-popover p-1.25 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border shadow-xl space-y-px font-sans`,`my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)-16px)] overflow-auto`,t),loop:n,ref:a,...r})}));g.displayName=`DropdownMenuSubContent`;const _=r(({className:t,onClick:n,loop:r=!0,width:a,...o},s)=>i(f,{children:i(c.Content,{ref:s,"data-slot":`dropdown-menu-content`,className:e(`scrollbar`,`text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-32 overflow-hidden rounded-md border shadow-xl outline-hidden space-y-px font-sans`,`data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,`my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)-16px)] overflow-auto`,a===`trigger`&&`w-(--radix-dropdown-menu-trigger-width)`,t),loop:r,onClick:e=>{e.stopPropagation(),n?.(e)},...o})}));_.displayName=`DropdownMenuContent`;const v=r(({className:t,inset:n,...r},a)=>i(c.Item,{ref:a,"data-slot":`dropdown-menu-item`,className:e(`relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-strong text-sm font-normal outline-hidden transition-colors`,`data-highlighted:bg-active-menu-item`,`focus:bg-accent focus:text-accent-foreground`,`data-disabled:cursor-default data-disabled:opacity-50`,`[&>svg]:size-5 [&_svg]:shrink-0`,n&&`pl-8`,t),...r}));v.displayName=`DropdownMenuItem`;const y=r(({className:n,children:r,checked:o,...l},u)=>a(c.CheckboxItem,{ref:u,"data-slot":`dropdown-menu-checkbox-item`,className:e(`text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 pl-2 pr-9 text-sm font-normal outline-hidden`,`data-highlighted:bg-active-menu-item`,`aria-checked:bg-selected-menu-item`,`data-highlighted:aria-checked:bg-active-selected-menu-item!`,`[&>svg]:size-5 [&_svg]:shrink-0`,n),checked:o,...l,children:[i(`span`,{className:`absolute right-2 flex items-center`,children:i(c.ItemIndicator,{children:i(t,{svg:i(s,{weight:`bold`}),className:`size-4 text-accent-600`})})}),r]}));y.displayName=`DropdownMenuCheckboxItem`;const b=r(({className:n,children:r,...o},l)=>a(c.RadioItem,{"data-slot":`dropdown-menu-radio-item`,className:e(`group/dropdown-menu-radio-item`,`text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 px-2 text-sm font-normal outline-none`,`data-highlighted:bg-active-menu-item`,`aria-checked:bg-selected-menu-item aria-checked:pr-9`,`data-highlighted:aria-checked:bg-active-selected-menu-item!`,`[&>svg]:size-5 [&_svg]:shrink-0`,n),ref:l,...o,children:[i(`span`,{className:`absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex`,children:i(c.ItemIndicator,{children:i(t,{svg:i(s,{weight:`bold`}),className:`size-4 text-accent-600`})})}),r]}));b.displayName=`DropdownMenuRadioItem`;const x=r(({className:t,inset:n,...r},a)=>i(c.Label,{ref:a,"data-slot":`dropdown-menu-label`,className:e(`px-2 py-1.5 text-sm font-medium`,n&&`pl-8`,t),...r}));x.displayName=`DropdownMenuLabel`;const S=r(({className:t,...r},a)=>i(n,{ref:a,"data-slot":`dropdown-menu-separator`,className:e(`-mx-1.25 my-1 w-auto`,t),...r}));S.displayName=`DropdownMenuSeparator`;const C=({className:t,...n})=>i(`span`,{"data-slot":`dropdown-menu-shortcut`,className:e(`ml-auto text-xs tracking-widest opacity-60`,t),...n});C.displayName=`DropdownMenuShortcut`;const w={Root:l,CheckboxItem:y,Content:_,Group:d,Item:v,Label:x,RadioGroup:m,RadioItem:b,Separator:S,Shortcut:C,Sub:p,SubContent:g,SubTrigger:h,Trigger:u};export{w as t};
2
+ //# sourceMappingURL=dropdown-menu-Ff97BIJe.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dropdown-menu-Ff97BIJe.js","names":[],"sources":["../src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Separator } from \"../separator/separator.js\";\n\n/**\n * A menu of options or actions, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuroot\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n * <DropdownMenu.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Menu\n * </Button>\n * </DropdownMenu.Trigger>\n * <DropdownMenu.Content>\n * <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n * <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n * </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Root = DropdownMenuPrimitive.Root;\nRoot.displayName = \"DropdownMenu\";\n\n/**\n * The trigger button that opens the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenutrigger\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n * <DropdownMenu.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Menu\n * </Button>\n * </DropdownMenu.Trigger>\n * <DropdownMenu.Content>\n * <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n * </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Trigger>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>((props, ref) => (\n\t<DropdownMenuPrimitive.Trigger ref={ref} data-slot=\"dropdown-menu-trigger\" {...props} />\n));\nTrigger.displayName = \"DropdownMenuTrigger\";\n\nconst Group = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Group>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Group\n\t\tref={ref}\n\t\tdata-slot=\"dropdown-menu-group\"\n\t\tclassName={cx(\"space-y-px\", className)}\n\t\t{...props}\n\t/>\n));\nGroup.displayName = \"DropdownMenuGroup\";\n\n/**\n * The portal container for rendering dropdown content outside the normal DOM tree.\n */\nconst Portal = DropdownMenuPrimitive.Portal;\nPortal.displayName = \"DropdownMenuPortal\";\n\nconst Sub = DropdownMenuPrimitive.Sub;\nSub.displayName = \"DropdownMenuSub\";\n\nconst RadioGroup = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.RadioGroup>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup>\n>(({ className, ...props }, ref) => (\n\t<DropdownMenuPrimitive.RadioGroup\n\t\tref={ref}\n\t\tdata-slot=\"dropdown-menu-radio-group\"\n\t\tclassName={cx(\"space-y-px\", className)}\n\t\t{...props}\n\t/>\n));\nRadioGroup.displayName = \"DropdownMenuRadioGroup\";\n\n/**\n * A trigger for a dropdown menu sub-menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenusubtrigger\n */\nconst SubTrigger = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, children, ...props }, ref) => (\n\t<DropdownMenuPrimitive.SubTrigger\n\t\tdata-slot=\"dropdown-menu-sub-trigger\"\n\t\tclassName={cx(\n\t\t\t\"focus:bg-accent data-state-open:bg-accent relative flex select-none items-center rounded-md py-1.5 pl-2 pr-9 text-sm outline-hidden\",\n\t\t\t\"data-highlighted:bg-active-menu-item data-state-open:bg-active-menu-item\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t{children}\n\t\t<span className=\"absolute right-2 flex items-center\">\n\t\t\t<Icon svg={<CaretRightIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t</span>\n\t</DropdownMenuPrimitive.SubTrigger>\n));\nSubTrigger.displayName = \"DropdownMenuSubTrigger\";\n\n/**\n * The content container for a dropdown menu sub-menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenusubcontent\n */\nconst SubContent = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubContent>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, loop = true, ...props }, ref) => (\n\t<Portal>\n\t\t<DropdownMenuPrimitive.SubContent\n\t\t\tdata-slot=\"dropdown-menu-sub-content\"\n\t\t\tclassName={cx(\n\t\t\t\t\"scrollbar\",\n\t\t\t\t\"text-popover-foreground border-popover bg-popover p-1.25 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border shadow-xl space-y-px font-sans\",\n\t\t\t\t\"my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)-16px)] overflow-auto\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tloop={loop}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nSubContent.displayName = \"DropdownMenuSubContent\";\n\ntype DropdownMenuContentProps = ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {\n\t/**\n\t * Whether the DropdownMenuContent should match the width of the trigger or use the intrinsic content width.\n\t */\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The container for the dropdown menu content.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenucontent\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n * <DropdownMenu.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Menu\n * </Button>\n * </DropdownMenu.Trigger>\n * <DropdownMenu.Content>\n * <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n * <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n * </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Content>,\n\tDropdownMenuContentProps\n>(({ className, onClick, loop = true, width, ...props }, ref) => (\n\t<Portal>\n\t\t<DropdownMenuPrimitive.Content\n\t\t\tref={ref}\n\t\t\tdata-slot=\"dropdown-menu-content\"\n\t\t\tclassName={cx(\n\t\t\t\t\"scrollbar\",\n\t\t\t\t\"text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-32 overflow-hidden rounded-md border shadow-xl outline-hidden space-y-px font-sans\",\n\t\t\t\t\"data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\"my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)-16px)] overflow-auto\",\n\t\t\t\twidth === \"trigger\" && \"w-(--radix-dropdown-menu-trigger-width)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tloop={loop}\n\t\t\tonClick={(event) => {\n\t\t\t\t/**\n\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t * of the DropdownMenu\n\t\t\t\t */\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nContent.displayName = \"DropdownMenuContent\";\n\n/**\n * An item in the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuitem\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n * <DropdownMenu.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Menu\n * </Button>\n * </DropdownMenu.Trigger>\n * <DropdownMenu.Content>\n * <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n * <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n * </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Item = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Item>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Item\n\t\tref={ref}\n\t\tdata-slot=\"dropdown-menu-item\"\n\t\tclassName={cx(\n\t\t\t\"relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-strong text-sm font-normal outline-hidden transition-colors\",\n\t\t\t\"data-highlighted:bg-active-menu-item\",\n\t\t\t\"focus:bg-accent focus:text-accent-foreground\",\n\t\t\t\"data-disabled:cursor-default data-disabled:opacity-50\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nItem.displayName = \"DropdownMenuItem\";\n\n/**\n * A menu item with a checkbox that can be controlled or uncontrolled.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenucheckboxitem\n */\nconst CheckboxItem = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n\t<DropdownMenuPrimitive.CheckboxItem\n\t\tref={ref}\n\t\tdata-slot=\"dropdown-menu-checkbox-item\"\n\t\tclassName={cx(\n\t\t\t\"text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 pl-2 pr-9 text-sm font-normal outline-hidden\",\n\t\t\t\"data-highlighted:bg-active-menu-item\",\n\t\t\t\"aria-checked:bg-selected-menu-item\",\n\t\t\t\"data-highlighted:aria-checked:bg-active-selected-menu-item!\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tclassName,\n\t\t)}\n\t\tchecked={checked}\n\t\t{...props}\n\t>\n\t\t<span className=\"absolute right-2 flex items-center\">\n\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4 text-accent-600\" />\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t</span>\n\t\t{children}\n\t</DropdownMenuPrimitive.CheckboxItem>\n));\nCheckboxItem.displayName = \"DropdownMenuCheckboxItem\";\n\ntype DropdownMenuRadioItemProps = ComponentPropsWithoutRef<\n\ttypeof DropdownMenuPrimitive.RadioItem\n> & {\n\tname?: string;\n\tid?: string;\n};\n\n/**\n * A menu item with a radio button that can be controlled or uncontrolled.\n * Used within a RadioGroup to create a set of mutually exclusive options.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuradioitem\n */\nconst RadioItem = forwardRef<ComponentRef<\"input\">, DropdownMenuRadioItemProps>(\n\t({ className, children, ...props }, ref) => (\n\t\t<DropdownMenuPrimitive.RadioItem\n\t\t\tdata-slot=\"dropdown-menu-radio-item\"\n\t\t\tclassName={cx(\n\t\t\t\t\"group/dropdown-menu-radio-item\",\n\t\t\t\t\"text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 px-2 text-sm font-normal outline-none\",\n\t\t\t\t\"data-highlighted:bg-active-menu-item\",\n\t\t\t\t\"aria-checked:bg-selected-menu-item aria-checked:pr-9\",\n\t\t\t\t\"data-highlighted:aria-checked:bg-active-selected-menu-item!\",\n\t\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex\">\n\t\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4 text-accent-600\" />\n\t\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</DropdownMenuPrimitive.RadioItem>\n\t),\n);\nRadioItem.displayName = \"DropdownMenuRadioItem\";\n\n/**\n * A label for a group of dropdown menu items.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenulabel\n */\nconst Label = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Label\n\t\tref={ref}\n\t\tdata-slot=\"dropdown-menu-label\"\n\t\tclassName={cx(\"px-2 py-1.5 text-sm font-medium\", inset && \"pl-8\", className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = \"DropdownMenuLabel\";\n\n/**\n * A visual separator between dropdown menu items or groups.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuseparator\n */\nconst DropdownSeparator = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tdata-slot=\"dropdown-menu-separator\"\n\t\tclassName={cx(\"-mx-1.25 my-1 w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nDropdownSeparator.displayName = \"DropdownMenuSeparator\";\n\nconst Shortcut = ({ className, ...props }: ComponentProps<\"span\">) => {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"dropdown-menu-shortcut\"\n\t\t\tclassName={cx(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nShortcut.displayName = \"DropdownMenuShortcut\";\n\n/**\n * A menu of options or actions, triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu\n *\n * @example\n * Composition:\n * ```\n * DropdownMenu.Root\n * ├── DropdownMenu.Trigger\n * └── DropdownMenu.Content\n * ├── DropdownMenu.Group\n * │ ├── DropdownMenu.Label\n * │ ├── DropdownMenu.Item\n * │ │ └── DropdownMenu.Shortcut\n * │ ├── DropdownMenu.CheckboxItem\n * │ └── DropdownMenu.RadioGroup\n * │ └── DropdownMenu.RadioItem\n * ├── DropdownMenu.Separator\n * └── DropdownMenu.Sub\n * ├── DropdownMenu.SubTrigger\n * └── DropdownMenu.SubContent\n * ```\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n * <DropdownMenu.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Menu\n * </Button>\n * </DropdownMenu.Trigger>\n * <DropdownMenu.Content>\n * <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n * <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n * </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst DropdownMenu = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t * <DropdownMenu.Trigger asChild>\n\t * <Button>Open Menu</Button>\n\t * </DropdownMenu.Trigger>\n\t * <DropdownMenu.Content>\n\t * <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n\t * </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A checkbox item in the dropdown menu that can be toggled on and off.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenucheckboxitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t * <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t * <DropdownMenu.Content>\n\t * <DropdownMenu.CheckboxItem checked={true} onCheckedChange={setChecked}>\n\t * Show notifications\n\t * </DropdownMenu.CheckboxItem>\n\t * </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tCheckboxItem,\n\t/**\n\t * The container for the dropdown menu content. Appears in a portal with scrolling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenucontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t * <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t * <DropdownMenu.Content width=\"trigger\">\n\t * <DropdownMenu.Item>Edit</DropdownMenu.Item>\n\t * <DropdownMenu.Item>Delete</DropdownMenu.Item>\n\t * </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * A group container for organizing related dropdown menu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenugroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t * <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t * <DropdownMenu.Content>\n\t * <DropdownMenu.Group>\n\t * <DropdownMenu.Label>Account</DropdownMenu.Label>\n\t * <DropdownMenu.Item>Profile</DropdownMenu.Item>\n\t * <DropdownMenu.Item>Settings</DropdownMenu.Item>\n\t * </DropdownMenu.Group>\n\t * </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * A standard item in the dropdown menu that can be selected or activated.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t * <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t * <DropdownMenu.Content>\n\t * <DropdownMenu.Item onSelect={() => handleEdit()}>\n\t * Edit\n\t * </DropdownMenu.Item>\n\t * <DropdownMenu.Item disabled>\n\t * Delete\n\t * </DropdownMenu.Item>\n\t * </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * A label for grouping and describing sections within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenulabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t * <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t * <DropdownMenu.Content>\n\t * <DropdownMenu.Label>My Account</DropdownMenu.Label>\n\t * <DropdownMenu.Item>Profile</DropdownMenu.Item>\n\t * <DropdownMenu.Item>Settings</DropdownMenu.Item>\n\t * </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tLabel,\n\t/**\n\t * A radio group container for exclusive selection within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuradiogroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t * <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t * <DropdownMenu.Content>\n\t * <DropdownMenu.RadioGroup value={value} onValueChange={setValue}>\n\t * <DropdownMenu.RadioItem value=\"option1\">Option 1</DropdownMenu.RadioItem>\n\t * <DropdownMenu.RadioItem value=\"option2\">Option 2</DropdownMenu.RadioItem>\n\t * </DropdownMenu.RadioGroup>\n\t * </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRadioGroup,\n\t/**\n\t * A radio item in the dropdown menu where only one item in the group can be selected.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuradioitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t * <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t * <DropdownMenu.Content>\n\t * <DropdownMenu.RadioGroup value=\"small\" onValueChange={setSize}>\n\t * <DropdownMenu.RadioItem value=\"small\">Small</DropdownMenu.RadioItem>\n\t * <DropdownMenu.RadioItem value=\"medium\">Medium</DropdownMenu.RadioItem>\n\t * <DropdownMenu.RadioItem value=\"large\">Large</DropdownMenu.RadioItem>\n\t * </DropdownMenu.RadioGroup>\n\t * </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRadioItem,\n\t/**\n\t * A visual separator for dividing sections within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t * <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t * <DropdownMenu.Content>\n\t * <DropdownMenu.Item>Edit</DropdownMenu.Item>\n\t * <DropdownMenu.Item>Copy</DropdownMenu.Item>\n\t * <DropdownMenu.Separator />\n\t * <DropdownMenu.Item>Delete</DropdownMenu.Item>\n\t * </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSeparator: DropdownSeparator,\n\t/**\n\t * A keyboard shortcut indicator for dropdown menu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenushortcut\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t * <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t * <DropdownMenu.Content>\n\t * <DropdownMenu.Item>\n\t * Save\n\t * <DropdownMenu.Shortcut>⌘S</DropdownMenu.Shortcut>\n\t * </DropdownMenu.Item>\n\t * </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tShortcut,\n\t/**\n\t * A submenu container for creating nested dropdown menus.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenusub\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t * <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t * <DropdownMenu.Content>\n\t * <DropdownMenu.Sub>\n\t * <DropdownMenu.SubTrigger>More options</DropdownMenu.SubTrigger>\n\t * <DropdownMenu.SubContent>\n\t * <DropdownMenu.Item>Sub item 1</DropdownMenu.Item>\n\t * <DropdownMenu.Item>Sub item 2</DropdownMenu.Item>\n\t * </DropdownMenu.SubContent>\n\t * </DropdownMenu.Sub>\n\t * </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSub,\n\t/**\n\t * The content container for submenu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenusubcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t * <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t * <DropdownMenu.Content>\n\t * <DropdownMenu.Sub>\n\t * <DropdownMenu.SubTrigger>Export</DropdownMenu.SubTrigger>\n\t * <DropdownMenu.SubContent>\n\t * <DropdownMenu.Item>Export as PDF</DropdownMenu.Item>\n\t * <DropdownMenu.Item>Export as CSV</DropdownMenu.Item>\n\t * </DropdownMenu.SubContent>\n\t * </DropdownMenu.Sub>\n\t * </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSubContent,\n\t/**\n\t * The trigger item that opens a submenu when hovered or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenusubtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t * <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t * <DropdownMenu.Content>\n\t * <DropdownMenu.Sub>\n\t * <DropdownMenu.SubTrigger>Share</DropdownMenu.SubTrigger>\n\t * <DropdownMenu.SubContent>\n\t * <DropdownMenu.Item>Email</DropdownMenu.Item>\n\t * <DropdownMenu.Item>Copy link</DropdownMenu.Item>\n\t * </DropdownMenu.SubContent>\n\t * </DropdownMenu.Sub>\n\t * </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSubTrigger,\n\t/**\n\t * The trigger button that opens the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenutrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t * <DropdownMenu.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Menu\n\t * </Button>\n\t * </DropdownMenu.Trigger>\n\t * <DropdownMenu.Content>\n\t * <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n\t * </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tDropdownMenu,\n};\n"],"mappings":"6WA8BA,MAAM,EAAO,EAAsB,KACnC,EAAK,YAAc,eAqBnB,MAAM,EAAU,GAGb,EAAO,IACT,EAAC,EAAsB,QAAvB,CAAoC,MAAK,YAAU,wBAAwB,GAAI,EAAS,CAAA,CACvF,CACF,EAAQ,YAAc,sBAEtB,MAAM,EAAQ,GAGX,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAsB,MAAvB,CACM,MACL,YAAU,sBACV,UAAW,EAAG,aAAc,EAAU,CACtC,GAAI,EACH,CAAA,CACD,CACF,EAAM,YAAc,oBAKpB,MAAM,EAAS,EAAsB,OACrC,EAAO,YAAc,qBAErB,MAAM,EAAM,EAAsB,IAClC,EAAI,YAAc,kBAElB,MAAM,EAAa,GAGhB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAsB,WAAvB,CACM,MACL,YAAU,4BACV,UAAW,EAAG,aAAc,EAAU,CACtC,GAAI,EACH,CAAA,CACD,CACF,EAAW,YAAc,yBAOzB,MAAM,EAAa,GAKhB,CAAE,YAAW,QAAO,WAAU,GAAG,GAAS,IAC5C,EAAC,EAAsB,WAAvB,CACC,YAAU,4BACV,UAAW,EACV,sIACA,2EACA,kCACA,GAAS,OACT,EACA,CACI,MACL,GAAI,WAVL,CAYE,EACD,EAAC,OAAD,CAAM,UAAU,8CACf,EAAC,EAAD,CAAM,IAAK,EAAC,EAAD,CAAgB,OAAO,OAAS,CAAA,CAAE,UAAU,SAAW,CAAA,CAC5D,CAAA,CAC2B,GAClC,CACF,EAAW,YAAc,yBAOzB,MAAM,EAAa,GAGhB,CAAE,YAAW,OAAO,GAAM,GAAG,GAAS,IACxC,EAAC,EAAD,CAAA,SACC,EAAC,EAAsB,WAAvB,CACC,YAAU,4BACV,UAAW,EACV,YACA,ucACA,4FACA,EACA,CACK,OACD,MACL,GAAI,EACH,CAAA,CACM,CAAA,CACR,CACF,EAAW,YAAc,yBA6BzB,MAAM,EAAU,GAGb,CAAE,YAAW,UAAS,OAAO,GAAM,QAAO,GAAG,GAAS,IACxD,EAAC,EAAD,CAAA,SACC,EAAC,EAAsB,QAAvB,CACM,MACL,YAAU,wBACV,UAAW,EACV,YACA,yJACA,+TACA,4FACA,IAAU,WAAa,0CACvB,EACA,CACK,OACN,QAAU,GAAU,CAKnB,EAAM,iBAAiB,CACvB,IAAU,EAAM,EAEjB,GAAI,EACH,CAAA,CACM,CAAA,CACR,CACF,EAAQ,YAAc,sBAsBtB,MAAM,EAAO,GAKV,CAAE,YAAW,QAAO,GAAG,GAAS,IAClC,EAAC,EAAsB,KAAvB,CACM,MACL,YAAU,qBACV,UAAW,EACV,gJACA,uCACA,+CACA,wDACA,kCACA,GAAS,OACT,EACA,CACD,GAAI,EACH,CAAA,CACD,CACF,EAAK,YAAc,mBAOnB,MAAM,EAAe,GAGlB,CAAE,YAAW,WAAU,UAAS,GAAG,GAAS,IAC9C,EAAC,EAAsB,aAAvB,CACM,MACL,YAAU,8BACV,UAAW,EACV,oMACA,uCACA,qCACA,8DACA,kCACA,EACA,CACQ,UACT,GAAI,WAZL,CAcC,EAAC,OAAD,CAAM,UAAU,8CACf,EAAC,EAAsB,cAAvB,CAAA,SACC,EAAC,EAAD,CAAM,IAAK,EAAC,EAAD,CAAW,OAAO,OAAS,CAAA,CAAE,UAAU,yBAA2B,CAAA,CACxC,CAAA,CAChC,CAAA,CACN,EACmC,GACpC,CACF,EAAa,YAAc,2BAe3B,MAAM,EAAY,GAChB,CAAE,YAAW,WAAU,GAAG,GAAS,IACnC,EAAC,EAAsB,UAAvB,CACC,YAAU,2BACV,UAAW,EACV,iCACA,6LACA,uCACA,uDACA,8DACA,kCACA,EACA,CACI,MACL,GAAI,WAZL,CAcC,EAAC,OAAD,CAAM,UAAU,iGACf,EAAC,EAAsB,cAAvB,CAAA,SACC,EAAC,EAAD,CAAM,IAAK,EAAC,EAAD,CAAW,OAAO,OAAS,CAAA,CAAE,UAAU,yBAA2B,CAAA,CACxC,CAAA,CAChC,CAAA,CACN,EACgC,GAEnC,CACD,EAAU,YAAc,wBAOxB,MAAM,EAAQ,GAKX,CAAE,YAAW,QAAO,GAAG,GAAS,IAClC,EAAC,EAAsB,MAAvB,CACM,MACL,YAAU,sBACV,UAAW,EAAG,kCAAmC,GAAS,OAAQ,EAAU,CAC5E,GAAI,EACH,CAAA,CACD,CACF,EAAM,YAAc,oBAOpB,MAAM,EAAoB,GAGvB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAD,CACM,MACL,YAAU,0BACV,UAAW,EAAG,uBAAwB,EAAU,CAChD,GAAI,EACH,CAAA,CACD,CACF,EAAkB,YAAc,wBAEhC,MAAM,GAAY,CAAE,YAAW,GAAG,KAEhC,EAAC,OAAD,CACC,YAAU,yBACV,UAAW,EAAG,6CAA8C,EAAU,CACtE,GAAI,EACH,CAAA,CAGJ,EAAS,YAAc,uBAyCvB,MAAM,EAAe,CAkBpB,OAkBA,eAiBA,UAoBA,QAqBA,OAkBA,QAmBA,aAoBA,YAmBA,UAAW,EAmBX,WAsBA,MAsBA,aAsBA,aAoBA,UACA"}
@@ -1,2 +1,2 @@
1
- import { t as DropdownMenu } from "./dropdown-menu-BwQDoun1.js";
1
+ import { t as DropdownMenu } from "./dropdown-menu-C9f9Y8Ov.js";
2
2
  export { DropdownMenu };
@@ -1 +1 @@
1
- import{t as e}from"./dropdown-menu-Bfi9ODPB.js";export{e as DropdownMenu};
1
+ import{t as e}from"./dropdown-menu-Ff97BIJe.js";export{e as DropdownMenu};
package/dist/empty.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { t as SvgAttributes } from "./types-zKzi66a6.js";
1
+ import { t as SvgAttributes } from "./types-DEYyl5LX.js";
2
2
  import { t as WithAsChild } from "./as-child-CJ2vTesV.js";
3
3
  import { ComponentProps, HTMLAttributes, ReactNode } from "react";
4
4
  import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -61,10 +61,11 @@ declare const Empty: {
61
61
  */
62
62
  readonly Root: {
63
63
  ({
64
+ asChild,
64
65
  children,
65
66
  className,
66
67
  ...props
67
- }: ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
68
+ }: ComponentProps<"div"> & WithAsChild): _$react_jsx_runtime0.JSX.Element;
68
69
  displayName: string;
69
70
  };
70
71
  /**
@@ -171,10 +172,11 @@ declare const Empty: {
171
172
  */
172
173
  readonly Actions: {
173
174
  ({
175
+ asChild,
174
176
  children,
175
177
  className,
176
178
  ...props
177
- }: ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
179
+ }: ComponentProps<"div"> & WithAsChild): _$react_jsx_runtime0.JSX.Element;
178
180
  displayName: string;
179
181
  };
180
182
  };
package/dist/empty.js CHANGED
@@ -1,2 +1,2 @@
1
- import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./svg-only-DnZldAY9.js";import{t as n}from"./slot-D_ZUrdEW.js";import{jsx as r}from"react/jsx-runtime";const i=({children:t,className:n,...i})=>r(`div`,{className:e(`mx-auto flex max-w-lg flex-col items-center py-14 text-center`,n),...i,children:t});i.displayName=`Empty`;const a=({className:n,svg:i,...a})=>r(t,{className:e(`mb-2 size-16 text-muted`,n),svg:i,...a});a.displayName=`EmptyIcon`;const o=({asChild:t,children:i,className:a,...o})=>r(t?n:`h3`,{className:e(`text-strong text-xl font-medium`,a),...o,children:i});o.displayName=`EmptyTitle`;const s=({asChild:t,children:i,className:a,...o})=>r(t?n:`div`,{className:e(`text-body mt-1 space-y-4 text-sm`,a),...o,children:i});s.displayName=`EmptyDescription`;const c=({children:t,className:n,...i})=>r(`div`,{className:e(`mt-4 flex items-center gap-2`,n),...i,children:t});c.displayName=`EmptyActions`;const l={Root:i,Icon:a,Title:o,Description:s,Actions:c};export{l as Empty};
1
+ import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./svg-only-7gYlsX8f.js";import{t as n}from"./slot-D_ZUrdEW.js";import{jsx as r}from"react/jsx-runtime";const i=({asChild:t,children:i,className:a,...o})=>r(t?n:`div`,{"data-slot":`empty`,className:e(`mx-auto flex max-w-lg flex-col items-center py-14 text-center`,a),...o,children:i});i.displayName=`Empty`;const a=({className:n,svg:i,...a})=>r(t,{"data-slot":`empty-icon`,className:e(`mb-2 size-16 text-muted`,n),svg:i,...a});a.displayName=`EmptyIcon`;const o=({asChild:t,children:i,className:a,...o})=>r(t?n:`h3`,{"data-slot":`empty-title`,className:e(`text-strong text-xl font-medium`,a),...o,children:i});o.displayName=`EmptyTitle`;const s=({asChild:t,children:i,className:a,...o})=>r(t?n:`div`,{"data-slot":`empty-description`,className:e(`text-body mt-1 space-y-4 text-sm`,a),...o,children:i});s.displayName=`EmptyDescription`;const c=({asChild:t,children:i,className:a,...o})=>r(t?n:`div`,{"data-slot":`empty-actions`,className:e(`mt-4 flex items-center gap-2`,a),...o,children:i});c.displayName=`EmptyActions`;const l={Root:i,Icon:a,Title:o,Description:s,Actions:c};export{l as Empty};
2
2
  //# sourceMappingURL=empty.js.map
package/dist/empty.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"empty.js","names":[],"sources":["../src/components/empty/empty.tsx"],"sourcesContent":["import type { ComponentProps, HTMLAttributes, ReactNode } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\n\n/**\n * The root container for an empty state. Centers content horizontally\n * with consistent vertical padding and max-width.\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n * <Empty.Icon svg={<GhostIcon />} />\n * <Empty.Title>No results found</Empty.Title>\n * <Empty.Description>Try adjusting your search or filters.</Empty.Description>\n * <Empty.Actions>\n * <Button>Clear filters</Button>\n * </Empty.Actions>\n * </Empty.Root>\n * ```\n */\nconst Root = ({ children, className, ...props }: ComponentProps<\"div\">) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={cx(\"mx-auto flex max-w-lg flex-col items-center py-14 text-center\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\nRoot.displayName = \"Empty\";\n\ntype EmptyIconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * A single SVG icon element.\n\t */\n\tsvg: ReactNode;\n};\n\n/**\n * Renders a large icon for the empty state. Pass a single SVG icon element\n * via the `svg` prop (e.g. from `@phosphor-icons/react`).\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n * <Empty.Icon svg={<GhostIcon />} />\n * <Empty.Title>No endpoints yet</Empty.Title>\n * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n * <Empty.Actions>\n * <Button>Create endpoint</Button>\n * </Empty.Actions>\n * </Empty.Root>\n * ```\n */\nconst Icon = ({ className, svg, ...props }: EmptyIconProps) => {\n\treturn <SvgOnly className={cx(\"mb-2 size-16 text-muted\", className)} svg={svg} {...props} />;\n};\nIcon.displayName = \"EmptyIcon\";\n\n/**\n * The heading text for the empty state. Renders as an `h3` by default. Use the\n * `asChild` prop to render as a different heading level (e.g. `h1`, `h2`).\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n * <Empty.Icon svg={<GhostIcon />} />\n * <Empty.Title>No endpoints yet</Empty.Title>\n * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n * <Empty.Actions>\n * <Button>Create endpoint</Button>\n * </Empty.Actions>\n * </Empty.Root>\n *\n * <Empty.Title asChild>\n * <h2>No results found</h2>\n * </Empty.Title>\n * ```\n */\nconst Title = ({\n\tasChild,\n\tchildren,\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLHeadingElement> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"h3\";\n\n\treturn (\n\t\t<Comp className={cx(\"text-strong text-xl font-medium\", className)} {...props}>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n};\nTitle.displayName = \"EmptyTitle\";\n\n/**\n * Supporting descriptive text below the title. Renders as a `div` with\n * `space-y-4` so multiple paragraphs can be placed inside. Use the `asChild`\n * prop to render as a different element.\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n * <Empty.Icon svg={<GhostIcon />} />\n * <Empty.Title>No endpoints yet</Empty.Title>\n * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n * <Empty.Actions>\n * <Button>Create endpoint</Button>\n * </Empty.Actions>\n * </Empty.Root>\n *\n * <Empty.Description>\n * <p>Something went wrong.</p>\n * <p>Please try again in a few minutes.</p>\n * </Empty.Description>\n * ```\n */\nconst Description = ({\n\tasChild,\n\tchildren,\n\tclassName,\n\t...props\n}: ComponentProps<\"div\"> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Comp className={cx(\"text-body mt-1 space-y-4 text-sm\", className)} {...props}>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n};\nDescription.displayName = \"EmptyDescription\";\n\n/**\n * A container for action buttons or links in the empty state.\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n * <Empty.Icon svg={<GhostIcon />} />\n * <Empty.Title>No endpoints yet</Empty.Title>\n * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n * <Empty.Actions>\n * <Button>Create endpoint</Button>\n * <Button appearance=\"outlined\">Go back</Button>\n * </Empty.Actions>\n * </Empty.Root>\n * ```\n */\nconst Actions = ({ children, className, ...props }: ComponentProps<\"div\">) => {\n\treturn (\n\t\t<div className={cx(\"mt-4 flex items-center gap-2\", className)} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\nActions.displayName = \"EmptyActions\";\n\n/**\n * Compound component for rendering empty states. Use with `Empty.Root`,\n * `Empty.Icon`, `Empty.Title`, `Empty.Description`, and `Empty.Actions`.\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * Composition:\n * ```\n * Empty.Root\n * ├── Empty.Icon\n * ├── Empty.Title\n * ├── Empty.Description\n * └── Empty.Actions\n * ```\n *\n * @example\n * ```tsx\n * <Empty.Root>\n * <Empty.Icon svg={<GhostIcon />} />\n * <Empty.Title>No endpoints yet</Empty.Title>\n * <Empty.Description>\n * Create your first endpoint to get started.\n * </Empty.Description>\n * <Empty.Actions>\n * <Button>Create endpoint</Button>\n * </Empty.Actions>\n * </Empty.Root>\n * ```\n */\nconst Empty = {\n\t/**\n\t * The root container for an empty state. Centers content vertically and\n\t * horizontally with consistent padding and max-width.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t * <Empty.Icon svg={<GhostIcon />} />\n\t * <Empty.Title>No endpoints yet</Empty.Title>\n\t * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t * <Empty.Actions>\n\t * <Button>Create endpoint</Button>\n\t * </Empty.Actions>\n\t * </Empty.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Renders a large icon for the empty state. Pass a single SVG icon element\n\t * via the `svg` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t * <Empty.Icon svg={<GhostIcon />} />\n\t * <Empty.Title>No endpoints yet</Empty.Title>\n\t * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t * <Empty.Actions>\n\t * <Button>Create endpoint</Button>\n\t * </Empty.Actions>\n\t * </Empty.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The heading text for the empty state. Renders as an `h3` by default.\n\t * Use `asChild` to render as a different heading level.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t * <Empty.Icon svg={<GhostIcon />} />\n\t * <Empty.Title>No endpoints yet</Empty.Title>\n\t * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t * <Empty.Actions>\n\t * <Button>Create endpoint</Button>\n\t * </Empty.Actions>\n\t * </Empty.Root>\n\t *\n\t * <Empty.Title asChild>\n\t * <h2>No results found</h2>\n\t * </Empty.Title>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * Supporting descriptive text below the title. Renders as a `div` with\n\t * `space-y-4` for multiple paragraphs. Use `asChild` to render as a\n\t * different element.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t * <Empty.Icon svg={<GhostIcon />} />\n\t * <Empty.Title>No endpoints yet</Empty.Title>\n\t * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t * <Empty.Actions>\n\t * <Button>Create endpoint</Button>\n\t * </Empty.Actions>\n\t * </Empty.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * A container for action buttons or links in the empty state.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t * <Empty.Icon svg={<GhostIcon />} />\n\t * <Empty.Title>No endpoints yet</Empty.Title>\n\t * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t * <Empty.Actions>\n\t * <Button>Create endpoint</Button>\n\t * </Empty.Actions>\n\t * </Empty.Root>\n\t * ```\n\t */\n\tActions,\n} as const;\n\nexport {\n\t//,\n\tEmpty,\n};\n"],"mappings":"0JAyBA,MAAM,GAAQ,CAAE,WAAU,YAAW,GAAG,KAEtC,EAAC,MAAD,CACC,UAAW,EAAG,gEAAiE,EAAU,CACzF,GAAI,EAEH,WACI,CAAA,CAGR,EAAK,YAAc,QA2BnB,MAAM,GAAQ,CAAE,YAAW,MAAK,GAAG,KAC3B,EAAC,EAAD,CAAS,UAAW,EAAG,0BAA2B,EAAU,CAAO,MAAK,GAAI,EAAS,CAAA,CAE7F,EAAK,YAAc,YAwBnB,MAAM,GAAS,CACd,UACA,WACA,YACA,GAAG,KAKF,EAHY,EAAU,EAAO,KAG7B,CAAM,UAAW,EAAG,kCAAmC,EAAU,CAAE,GAAI,EACrE,WACK,CAAA,CAGT,EAAM,YAAc,aA0BpB,MAAM,GAAe,CACpB,UACA,WACA,YACA,GAAG,KAKF,EAHY,EAAU,EAAO,MAG7B,CAAM,UAAW,EAAG,mCAAoC,EAAU,CAAE,GAAI,EACtE,WACK,CAAA,CAGT,EAAY,YAAc,mBAoB1B,MAAM,GAAW,CAAE,WAAU,YAAW,GAAG,KAEzC,EAAC,MAAD,CAAK,UAAW,EAAG,+BAAgC,EAAU,CAAE,GAAI,EACjE,WACI,CAAA,CAGR,EAAQ,YAAc,eAgCtB,MAAM,EAAQ,CAmBb,OAmBA,OAuBA,QAoBA,cAkBA,UACA"}
1
+ {"version":3,"file":"empty.js","names":[],"sources":["../src/components/empty/empty.tsx"],"sourcesContent":["import type { ComponentProps, HTMLAttributes, ReactNode } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\n\n/**\n * The root container for an empty state. Centers content horizontally\n * with consistent vertical padding and max-width.\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n * <Empty.Icon svg={<GhostIcon />} />\n * <Empty.Title>No results found</Empty.Title>\n * <Empty.Description>Try adjusting your search or filters.</Empty.Description>\n * <Empty.Actions>\n * <Button>Clear filters</Button>\n * </Empty.Actions>\n * </Empty.Root>\n * ```\n */\nconst Root = ({ asChild, children, className, ...props }: ComponentProps<\"div\"> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"empty\"\n\t\t\tclassName={cx(\"mx-auto flex max-w-lg flex-col items-center py-14 text-center\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n};\nRoot.displayName = \"Empty\";\n\ntype EmptyIconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * A single SVG icon element.\n\t */\n\tsvg: ReactNode;\n};\n\n/**\n * Renders a large icon for the empty state. Pass a single SVG icon element\n * via the `svg` prop (e.g. from `@phosphor-icons/react`).\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n * <Empty.Icon svg={<GhostIcon />} />\n * <Empty.Title>No endpoints yet</Empty.Title>\n * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n * <Empty.Actions>\n * <Button>Create endpoint</Button>\n * </Empty.Actions>\n * </Empty.Root>\n * ```\n */\nconst Icon = ({ className, svg, ...props }: EmptyIconProps) => {\n\treturn (\n\t\t<SvgOnly\n\t\t\tdata-slot=\"empty-icon\"\n\t\t\tclassName={cx(\"mb-2 size-16 text-muted\", className)}\n\t\t\tsvg={svg}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nIcon.displayName = \"EmptyIcon\";\n\n/**\n * The heading text for the empty state. Renders as an `h3` by default. Use the\n * `asChild` prop to render as a different heading level (e.g. `h1`, `h2`).\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n * <Empty.Icon svg={<GhostIcon />} />\n * <Empty.Title>No endpoints yet</Empty.Title>\n * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n * <Empty.Actions>\n * <Button>Create endpoint</Button>\n * </Empty.Actions>\n * </Empty.Root>\n *\n * <Empty.Title asChild>\n * <h2>No results found</h2>\n * </Empty.Title>\n * ```\n */\nconst Title = ({\n\tasChild,\n\tchildren,\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLHeadingElement> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"h3\";\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"empty-title\"\n\t\t\tclassName={cx(\"text-strong text-xl font-medium\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n};\nTitle.displayName = \"EmptyTitle\";\n\n/**\n * Supporting descriptive text below the title. Renders as a `div` with\n * `space-y-4` so multiple paragraphs can be placed inside. Use the `asChild`\n * prop to render as a different element.\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n * <Empty.Icon svg={<GhostIcon />} />\n * <Empty.Title>No endpoints yet</Empty.Title>\n * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n * <Empty.Actions>\n * <Button>Create endpoint</Button>\n * </Empty.Actions>\n * </Empty.Root>\n *\n * <Empty.Description>\n * <p>Something went wrong.</p>\n * <p>Please try again in a few minutes.</p>\n * </Empty.Description>\n * ```\n */\nconst Description = ({\n\tasChild,\n\tchildren,\n\tclassName,\n\t...props\n}: ComponentProps<\"div\"> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"empty-description\"\n\t\t\tclassName={cx(\"text-body mt-1 space-y-4 text-sm\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n};\nDescription.displayName = \"EmptyDescription\";\n\n/**\n * A container for action buttons or links in the empty state.\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n * <Empty.Icon svg={<GhostIcon />} />\n * <Empty.Title>No endpoints yet</Empty.Title>\n * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n * <Empty.Actions>\n * <Button>Create endpoint</Button>\n * <Button appearance=\"outlined\">Go back</Button>\n * </Empty.Actions>\n * </Empty.Root>\n * ```\n */\nconst Actions = ({\n\tasChild,\n\tchildren,\n\tclassName,\n\t...props\n}: ComponentProps<\"div\"> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"empty-actions\"\n\t\t\tclassName={cx(\"mt-4 flex items-center gap-2\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n};\nActions.displayName = \"EmptyActions\";\n\n/**\n * Compound component for rendering empty states. Use with `Empty.Root`,\n * `Empty.Icon`, `Empty.Title`, `Empty.Description`, and `Empty.Actions`.\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * Composition:\n * ```\n * Empty.Root\n * ├── Empty.Icon\n * ├── Empty.Title\n * ├── Empty.Description\n * └── Empty.Actions\n * ```\n *\n * @example\n * ```tsx\n * <Empty.Root>\n * <Empty.Icon svg={<GhostIcon />} />\n * <Empty.Title>No endpoints yet</Empty.Title>\n * <Empty.Description>\n * Create your first endpoint to get started.\n * </Empty.Description>\n * <Empty.Actions>\n * <Button>Create endpoint</Button>\n * </Empty.Actions>\n * </Empty.Root>\n * ```\n */\nconst Empty = {\n\t/**\n\t * The root container for an empty state. Centers content vertically and\n\t * horizontally with consistent padding and max-width.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t * <Empty.Icon svg={<GhostIcon />} />\n\t * <Empty.Title>No endpoints yet</Empty.Title>\n\t * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t * <Empty.Actions>\n\t * <Button>Create endpoint</Button>\n\t * </Empty.Actions>\n\t * </Empty.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Renders a large icon for the empty state. Pass a single SVG icon element\n\t * via the `svg` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t * <Empty.Icon svg={<GhostIcon />} />\n\t * <Empty.Title>No endpoints yet</Empty.Title>\n\t * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t * <Empty.Actions>\n\t * <Button>Create endpoint</Button>\n\t * </Empty.Actions>\n\t * </Empty.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The heading text for the empty state. Renders as an `h3` by default.\n\t * Use `asChild` to render as a different heading level.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t * <Empty.Icon svg={<GhostIcon />} />\n\t * <Empty.Title>No endpoints yet</Empty.Title>\n\t * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t * <Empty.Actions>\n\t * <Button>Create endpoint</Button>\n\t * </Empty.Actions>\n\t * </Empty.Root>\n\t *\n\t * <Empty.Title asChild>\n\t * <h2>No results found</h2>\n\t * </Empty.Title>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * Supporting descriptive text below the title. Renders as a `div` with\n\t * `space-y-4` for multiple paragraphs. Use `asChild` to render as a\n\t * different element.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t * <Empty.Icon svg={<GhostIcon />} />\n\t * <Empty.Title>No endpoints yet</Empty.Title>\n\t * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t * <Empty.Actions>\n\t * <Button>Create endpoint</Button>\n\t * </Empty.Actions>\n\t * </Empty.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * A container for action buttons or links in the empty state.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t * <Empty.Icon svg={<GhostIcon />} />\n\t * <Empty.Title>No endpoints yet</Empty.Title>\n\t * <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t * <Empty.Actions>\n\t * <Button>Create endpoint</Button>\n\t * </Empty.Actions>\n\t * </Empty.Root>\n\t * ```\n\t */\n\tActions,\n} as const;\n\nexport {\n\t//,\n\tEmpty,\n};\n"],"mappings":"0JAyBA,MAAM,GAAQ,CAAE,UAAS,WAAU,YAAW,GAAG,KAI/C,EAHY,EAAU,EAAO,MAG7B,CACC,YAAU,QACV,UAAW,EAAG,gEAAiE,EAAU,CACzF,GAAI,EAEH,WACK,CAAA,CAGT,EAAK,YAAc,QA2BnB,MAAM,GAAQ,CAAE,YAAW,MAAK,GAAG,KAEjC,EAAC,EAAD,CACC,YAAU,aACV,UAAW,EAAG,0BAA2B,EAAU,CAC9C,MACL,GAAI,EACH,CAAA,CAGJ,EAAK,YAAc,YAwBnB,MAAM,GAAS,CACd,UACA,WACA,YACA,GAAG,KAKF,EAHY,EAAU,EAAO,KAG7B,CACC,YAAU,cACV,UAAW,EAAG,kCAAmC,EAAU,CAC3D,GAAI,EAEH,WACK,CAAA,CAGT,EAAM,YAAc,aA0BpB,MAAM,GAAe,CACpB,UACA,WACA,YACA,GAAG,KAKF,EAHY,EAAU,EAAO,MAG7B,CACC,YAAU,oBACV,UAAW,EAAG,mCAAoC,EAAU,CAC5D,GAAI,EAEH,WACK,CAAA,CAGT,EAAY,YAAc,mBAoB1B,MAAM,GAAW,CAChB,UACA,WACA,YACA,GAAG,KAKF,EAHY,EAAU,EAAO,MAG7B,CACC,YAAU,gBACV,UAAW,EAAG,+BAAgC,EAAU,CACxD,GAAI,EAEH,WACK,CAAA,CAGT,EAAQ,YAAc,eAgCtB,MAAM,EAAQ,CAmBb,OAmBA,OAuBA,QAoBA,cAkBA,UACA"}
package/dist/flag.js CHANGED
@@ -1,2 +1,2 @@
1
- import{t as e}from"./cx-D1HYnpvA.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{cva as r}from"class-variance-authority";const i=r(``,{variants:{size:{s:`rounded-[0.0625rem]`,m:`rounded-[0.09375rem]`,l:`rounded-xs`}}}),a=r(``,{variants:{size:{s:`w-4 h-3`,m:`w-5 h-3.75`,l:`w-8 h-6`}}});function o({className:r,code:o,size:s=`l`,loading:c=`lazy`,...l}){let u=i({size:s});return n(`div`,{className:e(`flag relative overflow-hidden`,u,a({size:s}),r),...l,children:[t(`div`,{"aria-hidden":!0,className:e(`absolute inset-0 border border-[#000]/10`,u)}),t(`img`,{className:`h-full w-full block object-cover`,src:`https://assets.ngrok.com/flags/${s}/${o}.svg`,alt:`flag for ${o}`,loading:c})]})}o.displayName=`Flag`;const s=`004.008.010.016.016.020.024.028.031.032.040.044.048.050.051.052.056.060.064.068.070.072.074.076.084.086.090.092.096.100.104.108.112.116.120.124.132.136.140.144.148.152.156.158.162.166.170.174.178.180.184.188.191.192.196.203.204.208.212.214.218.222.226.231.232.233.234.238.239.242.246.248.250.254.258.260.262.266.268.270.275.276.288.292.296.300.304.308.312.316.320.324.328.332.334.336.340.344.348.352.356.360.364.368.372.376.380.384.388.392.398.400.404.408.410.414.417.418.422.426.428.430.434.438.440.442.446.450.454.458.462.466.470.474.478.480.484.492.496.498.499.500.504.508.512.516.520.524.528.531.533.534.540.548.554.558.562.566.570.574.578.580.581.583.584.585.586.591.598.600.604.608.612.616.620.624.626.630.634.638.642.643.646.652.654.659.660.662.663.666.670.674.678.682.686.688.690.694.702.703.704.705.706.710.716.724.728.729.732.740.744.748.752.756.760.762.764.768.772.776.780.784.788.792.795.796.798.800.804.807.818.831.832.833.834.836.840.850.854.858.860.862.876.882.887.894.ABW.AD.AE.AF.AFG.AFRUN.AG.AGO.AI.AIA.AL.ALA.ALB.AM.AMS.AND.AO.AQ.AR.ARE.ARG.ARM.AS.ASM.AT.ATA.ATF.ATG.AU.AUS.AUT.AW.AX.AZ.AZE.BA.BB.BD.BDI.BE.BEL.BEN.BF.BFA.BG.BGD.BGR.BH.BHR.BHS.BI.BIH.BJ.BL.BLM.BLR.BLZ.BM.BMU.BN.BO.BOL.BQ-BO.BQ-SA.BQ-SE.BR.BRA.BRB.BRN.BS.BT.BTN.BV.BVT.BW.BWA.BY.BZ.CA.CAF.CAN.CC.CCK.CD.CF.CG.CH.CHE.CHL.CHN.CI.CIV.CK.CL.CM.CMR.CN.CO.COD.COG.COK.COL.COM.CPV.CR.CRI.CU.CUB.CUW.CV.CW.CX.CXR.CY.CYM.CYP.CZ.CZE.DE.DEU.DJ.DJI.DK.DM.DMA.DNK.DO.DOM.EC.ECU.EE.EG.EGY.EH.ER.ERI.ES.ESH.ESP.EST.ET.ETH.EU.FI.FIN.FJ.FJI.FK.FLK.FM.FO.FR.FRA.FRO.FSM.GA.GAB.GB-ENG.GB-NIR.GB-SCT.GB-UKM.GB-WLS.GB.GBR.GD.GE.GEO.GF.GG.GGY.GH.GHA.GI.GIB.GIN.GL.GLP.GM.GMB.GN.GNB.GNQ.GP.GQ.GR.GRC.GRD.GRL.GS.GT.GTM.GU.GUF.GUM.GUY.GW.GY.HK.HKG.HM.HMD.HN.HND.HR.HRV.HT.HTI.HU.HUN.ID.IDN.IE.IL.IM.IMN.IN.IND.IO.IOT.IQ.IR.IRL.IRN.IRQ.IS.ISL.ISR.IT.ITA.JAM.JE.JEY.JM.JO.JOR.JP.JPN.KAZ.KE.KEN.KG.KGZ.KH.KHM.KI.KIR.KM.KN-SK.KNA.KOR.KP.KR.KW.KWT.KY.KZ.LA.LAO.LB.LBN.LBR.LBY.LC.LCA.LI.LIE.LK.LKA.LR.LS.LSO.LT.LTU.LU.LUX.LV.LVA.LY.MA.MAC.MAF.MAR.MC.MCO.MD.MDA.MDG.MDV.ME.MEX.MF.MG.MH.MHL.MK.MKD.ML.MLI.MLT.MM.MMR.MN.MNE.MNG.MNP.MO.MOZ.MP.MQ.MR.MRT.MS.MSR.MT.MTQ.MU.MUS.MV.MW.MWI.MX.MY.MYS.MZ.NA.NAM.NC.NCL.NE.NER.NF.NFK.NG.NGA.NI.NIC.NIU.NL.NLD.NO.NOR.NP.NPL.NR.NRU.NU.NZ.NZL.OM.OMN.PA.PAK.PAN.PCN.PE.PER.PF.PG.PH.PHL.PK.PL.PLW.PM.PN.PNG.POL.PR.PRI.PRK.PRT.PRY.PS.PSE.PT.PW.PY.PYF.QA.QAT.RAINBOW.RE.REU.RO.ROU.RS.RU.RUS.RW.RWA.SA.SAU.SB.SC.SD.SDN.SE.SEN.SG.SGP.SGS.SH.SHN.SI.SJ.SJM.SK.SL.SLB.SLE.SLV.SM.SMR.SN.SO.SOM.SPM.SR.SRB.SS.SSD.ST.STP.SUR.SV.SVK.SVN.SWE.SWZ.SX.SXM.SY.SYC.SYR.SZ.TC.TCA.TCD.TD.TF.TG.TGO.TH.THA.TJ.TJK.TK.TKL.TKM.TL.TLS.TM.TN.TO.TON.TR.TT.TTO.TUN.TUR.TUV.TV.TW.TWN.TZ.TZA.UA.UG.UGA.UKR.UM.UMI.UNASUR.URY.US.USA.UY.UZ.UZB.VA.VAT.VC.VCT.VE.VEN.VG.VGB.VI.VIR.VN.VNM.VU.VUT.WF.WLF.WS.WSM.YE.YEM.ZA.ZAF.ZM.ZMB.ZW.ZWE`.split(`.`);function c(e){return s.includes(e)}export{o as Flag,s as countryCodes,c as isCountryCode};
1
+ import{t as e}from"./cx-D1HYnpvA.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{cva as r}from"class-variance-authority";const i=r(``,{variants:{size:{s:`rounded-[0.0625rem]`,m:`rounded-[0.09375rem]`,l:`rounded-xs`}}}),a=r(``,{variants:{size:{s:`w-4 h-3`,m:`w-5 h-3.75`,l:`w-8 h-6`}}});function o({className:r,code:o,size:s=`l`,loading:c=`lazy`,...l}){let u=i({size:s});return n(`div`,{"data-slot":`flag`,className:e(`flag relative overflow-hidden`,u,a({size:s}),r),...l,children:[t(`div`,{"aria-hidden":!0,className:e(`absolute inset-0 border border-[#000]/10`,u)}),t(`img`,{className:`h-full w-full block object-cover`,src:`https://assets.ngrok.com/flags/${s}/${o}.svg`,alt:`flag for ${o}`,loading:c})]})}o.displayName=`Flag`;const s=`004.008.010.016.016.020.024.028.031.032.040.044.048.050.051.052.056.060.064.068.070.072.074.076.084.086.090.092.096.100.104.108.112.116.120.124.132.136.140.144.148.152.156.158.162.166.170.174.178.180.184.188.191.192.196.203.204.208.212.214.218.222.226.231.232.233.234.238.239.242.246.248.250.254.258.260.262.266.268.270.275.276.288.292.296.300.304.308.312.316.320.324.328.332.334.336.340.344.348.352.356.360.364.368.372.376.380.384.388.392.398.400.404.408.410.414.417.418.422.426.428.430.434.438.440.442.446.450.454.458.462.466.470.474.478.480.484.492.496.498.499.500.504.508.512.516.520.524.528.531.533.534.540.548.554.558.562.566.570.574.578.580.581.583.584.585.586.591.598.600.604.608.612.616.620.624.626.630.634.638.642.643.646.652.654.659.660.662.663.666.670.674.678.682.686.688.690.694.702.703.704.705.706.710.716.724.728.729.732.740.744.748.752.756.760.762.764.768.772.776.780.784.788.792.795.796.798.800.804.807.818.831.832.833.834.836.840.850.854.858.860.862.876.882.887.894.ABW.AD.AE.AF.AFG.AFRUN.AG.AGO.AI.AIA.AL.ALA.ALB.AM.AMS.AND.AO.AQ.AR.ARE.ARG.ARM.AS.ASM.AT.ATA.ATF.ATG.AU.AUS.AUT.AW.AX.AZ.AZE.BA.BB.BD.BDI.BE.BEL.BEN.BF.BFA.BG.BGD.BGR.BH.BHR.BHS.BI.BIH.BJ.BL.BLM.BLR.BLZ.BM.BMU.BN.BO.BOL.BQ-BO.BQ-SA.BQ-SE.BR.BRA.BRB.BRN.BS.BT.BTN.BV.BVT.BW.BWA.BY.BZ.CA.CAF.CAN.CC.CCK.CD.CF.CG.CH.CHE.CHL.CHN.CI.CIV.CK.CL.CM.CMR.CN.CO.COD.COG.COK.COL.COM.CPV.CR.CRI.CU.CUB.CUW.CV.CW.CX.CXR.CY.CYM.CYP.CZ.CZE.DE.DEU.DJ.DJI.DK.DM.DMA.DNK.DO.DOM.EC.ECU.EE.EG.EGY.EH.ER.ERI.ES.ESH.ESP.EST.ET.ETH.EU.FI.FIN.FJ.FJI.FK.FLK.FM.FO.FR.FRA.FRO.FSM.GA.GAB.GB-ENG.GB-NIR.GB-SCT.GB-UKM.GB-WLS.GB.GBR.GD.GE.GEO.GF.GG.GGY.GH.GHA.GI.GIB.GIN.GL.GLP.GM.GMB.GN.GNB.GNQ.GP.GQ.GR.GRC.GRD.GRL.GS.GT.GTM.GU.GUF.GUM.GUY.GW.GY.HK.HKG.HM.HMD.HN.HND.HR.HRV.HT.HTI.HU.HUN.ID.IDN.IE.IL.IM.IMN.IN.IND.IO.IOT.IQ.IR.IRL.IRN.IRQ.IS.ISL.ISR.IT.ITA.JAM.JE.JEY.JM.JO.JOR.JP.JPN.KAZ.KE.KEN.KG.KGZ.KH.KHM.KI.KIR.KM.KN-SK.KNA.KOR.KP.KR.KW.KWT.KY.KZ.LA.LAO.LB.LBN.LBR.LBY.LC.LCA.LI.LIE.LK.LKA.LR.LS.LSO.LT.LTU.LU.LUX.LV.LVA.LY.MA.MAC.MAF.MAR.MC.MCO.MD.MDA.MDG.MDV.ME.MEX.MF.MG.MH.MHL.MK.MKD.ML.MLI.MLT.MM.MMR.MN.MNE.MNG.MNP.MO.MOZ.MP.MQ.MR.MRT.MS.MSR.MT.MTQ.MU.MUS.MV.MW.MWI.MX.MY.MYS.MZ.NA.NAM.NC.NCL.NE.NER.NF.NFK.NG.NGA.NI.NIC.NIU.NL.NLD.NO.NOR.NP.NPL.NR.NRU.NU.NZ.NZL.OM.OMN.PA.PAK.PAN.PCN.PE.PER.PF.PG.PH.PHL.PK.PL.PLW.PM.PN.PNG.POL.PR.PRI.PRK.PRT.PRY.PS.PSE.PT.PW.PY.PYF.QA.QAT.RAINBOW.RE.REU.RO.ROU.RS.RU.RUS.RW.RWA.SA.SAU.SB.SC.SD.SDN.SE.SEN.SG.SGP.SGS.SH.SHN.SI.SJ.SJM.SK.SL.SLB.SLE.SLV.SM.SMR.SN.SO.SOM.SPM.SR.SRB.SS.SSD.ST.STP.SUR.SV.SVK.SVN.SWE.SWZ.SX.SXM.SY.SYC.SYR.SZ.TC.TCA.TCD.TD.TF.TG.TGO.TH.THA.TJ.TJK.TK.TKL.TKM.TL.TLS.TM.TN.TO.TON.TR.TT.TTO.TUN.TUR.TUV.TV.TW.TWN.TZ.TZA.UA.UG.UGA.UKR.UM.UMI.UNASUR.URY.US.USA.UY.UZ.UZB.VA.VAT.VC.VCT.VE.VEN.VG.VGB.VI.VIR.VN.VNM.VU.VUT.WF.WLF.WS.WSM.YE.YEM.ZA.ZAF.ZM.ZMB.ZW.ZWE`.split(`.`);function c(e){return s.includes(e)}export{o as Flag,s as countryCodes,c as isCountryCode};
2
2
  //# sourceMappingURL=flag.js.map
package/dist/flag.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"flag.js","names":[],"sources":["../src/components/flag/flag.tsx","../src/components/flag/country-code.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport type { ComponentProps } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { CountryCode } from \"./country-code.js\";\n\nconst cdnOrigin = \"https://assets.ngrok.com\";\n\nconst sizes = [\"s\", \"m\", \"l\"] as const;\ntype Size = (typeof sizes)[number];\n\ntype Props = Omit<ComponentProps<\"div\">, \"children\"> & {\n\t/**\n\t * The country code for the flag to display\n\t * @example \"US\"\n\t */\n\tcode: CountryCode;\n\t/**\n\t * The size of flag to render, \"s\", \"m\", or \"l\"\n\t * @default \"l\"\n\t */\n\tsize?: Size;\n\t/**\n\t * A string providing a hint to the user agent as to how to best schedule the loading of the image to optimize page performance.\n\t * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading\n\t * @default \"lazy\"\n\t */\n\tloading?: ComponentProps<\"img\">[\"loading\"];\n};\n\nconst borderRadiusVariants = cva(\"\", {\n\tvariants: {\n\t\tsize: {\n\t\t\ts: \"rounded-[0.0625rem]\",\n\t\t\tm: \"rounded-[0.09375rem]\",\n\t\t\tl: \"rounded-xs\",\n\t\t} as const satisfies Record<Size, string>,\n\t},\n});\n\nconst sizingVariants = cva(\"\", {\n\tvariants: {\n\t\tsize: {\n\t\t\ts: \"w-4 h-3\",\n\t\t\tm: \"w-5 h-3.75\",\n\t\t\tl: \"w-8 h-6\",\n\t\t} as const satisfies Record<Size, string>,\n\t},\n});\n\n/**\n * A flag component that displays a flag based on the provided country code.\n * Inspired by [react-flagpack](https://flagpack.xyz/docs/development/react).\n *\n * @see https://mantle.ngrok.com/components/flag#flag\n *\n * @example\n * ```tsx\n * <Flag code=\"US\" />\n * <Flag code=\"JP\" size=\"m\" loading=\"eager\" />\n * <Flag code=\"CA\" size=\"s\" loading=\"lazy\" />\n * <Flag code=\"GB\" size=\"l\" />\n * ```\n */\nfunction Flag({\n\t//,\n\tclassName,\n\tcode,\n\tsize = \"l\",\n\tloading = \"lazy\",\n\t...props\n}: Props) {\n\tconst borderRadius = borderRadiusVariants({ size });\n\tconst sizing = sizingVariants({ size });\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx(\"flag relative overflow-hidden\", borderRadius, sizing, className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div aria-hidden className={cx(\"absolute inset-0 border border-[#000]/10\", borderRadius)} />\n\t\t\t<img\n\t\t\t\tclassName=\"h-full w-full block object-cover\"\n\t\t\t\tsrc={`${cdnOrigin}/flags/${size}/${code}.svg`}\n\t\t\t\talt={`flag for ${code}`}\n\t\t\t\tloading={loading}\n\t\t\t/>\n\t\t</div>\n\t);\n}\nFlag.displayName = \"Flag\";\n\nexport {\n\t//,\n\tFlag,\n};\n\nexport type {\n\t//,\n\tProps as FlagProps,\n};\n","/** All valid values for a flag\n * @see https://www.flagpack.xyz/docs/flag-index\n */\nconst countryCodes = [\n\t\"004\",\n\t\"008\",\n\t\"010\",\n\t\"016\",\n\t\"016\",\n\t\"020\",\n\t\"024\",\n\t\"028\",\n\t\"031\",\n\t\"032\",\n\t\"040\",\n\t\"044\",\n\t\"048\",\n\t\"050\",\n\t\"051\",\n\t\"052\",\n\t\"056\",\n\t\"060\",\n\t\"064\",\n\t\"068\",\n\t\"070\",\n\t\"072\",\n\t\"074\",\n\t\"076\",\n\t\"084\",\n\t\"086\",\n\t\"090\",\n\t\"092\",\n\t\"096\",\n\t\"100\",\n\t\"104\",\n\t\"108\",\n\t\"112\",\n\t\"116\",\n\t\"120\",\n\t\"124\",\n\t\"132\",\n\t\"136\",\n\t\"140\",\n\t\"144\",\n\t\"148\",\n\t\"152\",\n\t\"156\",\n\t\"158\",\n\t\"162\",\n\t\"166\",\n\t\"170\",\n\t\"174\",\n\t\"178\",\n\t\"180\",\n\t\"184\",\n\t\"188\",\n\t\"191\",\n\t\"192\",\n\t\"196\",\n\t\"203\",\n\t\"204\",\n\t\"208\",\n\t\"212\",\n\t\"214\",\n\t\"218\",\n\t\"222\",\n\t\"226\",\n\t\"231\",\n\t\"232\",\n\t\"233\",\n\t\"234\",\n\t\"238\",\n\t\"239\",\n\t\"242\",\n\t\"246\",\n\t\"248\",\n\t\"250\",\n\t\"254\",\n\t\"258\",\n\t\"260\",\n\t\"262\",\n\t\"266\",\n\t\"268\",\n\t\"270\",\n\t\"275\",\n\t\"276\",\n\t\"288\",\n\t\"292\",\n\t\"296\",\n\t\"300\",\n\t\"304\",\n\t\"308\",\n\t\"312\",\n\t\"316\",\n\t\"320\",\n\t\"324\",\n\t\"328\",\n\t\"332\",\n\t\"334\",\n\t\"336\",\n\t\"340\",\n\t\"344\",\n\t\"348\",\n\t\"352\",\n\t\"356\",\n\t\"360\",\n\t\"364\",\n\t\"368\",\n\t\"372\",\n\t\"376\",\n\t\"380\",\n\t\"384\",\n\t\"388\",\n\t\"392\",\n\t\"398\",\n\t\"400\",\n\t\"404\",\n\t\"408\",\n\t\"410\",\n\t\"414\",\n\t\"417\",\n\t\"418\",\n\t\"422\",\n\t\"426\",\n\t\"428\",\n\t\"430\",\n\t\"434\",\n\t\"438\",\n\t\"440\",\n\t\"442\",\n\t\"446\",\n\t\"450\",\n\t\"454\",\n\t\"458\",\n\t\"462\",\n\t\"466\",\n\t\"470\",\n\t\"474\",\n\t\"478\",\n\t\"480\",\n\t\"484\",\n\t\"492\",\n\t\"496\",\n\t\"498\",\n\t\"499\",\n\t\"500\",\n\t\"504\",\n\t\"508\",\n\t\"512\",\n\t\"516\",\n\t\"520\",\n\t\"524\",\n\t\"528\",\n\t\"531\",\n\t\"533\",\n\t\"534\",\n\t\"540\",\n\t\"548\",\n\t\"554\",\n\t\"558\",\n\t\"562\",\n\t\"566\",\n\t\"570\",\n\t\"574\",\n\t\"578\",\n\t\"580\",\n\t\"581\",\n\t\"583\",\n\t\"584\",\n\t\"585\",\n\t\"586\",\n\t\"591\",\n\t\"598\",\n\t\"600\",\n\t\"604\",\n\t\"608\",\n\t\"612\",\n\t\"616\",\n\t\"620\",\n\t\"624\",\n\t\"626\",\n\t\"630\",\n\t\"634\",\n\t\"638\",\n\t\"642\",\n\t\"643\",\n\t\"646\",\n\t\"652\",\n\t\"654\",\n\t\"659\",\n\t\"660\",\n\t\"662\",\n\t\"663\",\n\t\"666\",\n\t\"670\",\n\t\"674\",\n\t\"678\",\n\t\"682\",\n\t\"686\",\n\t\"688\",\n\t\"690\",\n\t\"694\",\n\t\"702\",\n\t\"703\",\n\t\"704\",\n\t\"705\",\n\t\"706\",\n\t\"710\",\n\t\"716\",\n\t\"724\",\n\t\"728\",\n\t\"729\",\n\t\"732\",\n\t\"740\",\n\t\"744\",\n\t\"748\",\n\t\"752\",\n\t\"756\",\n\t\"760\",\n\t\"762\",\n\t\"764\",\n\t\"768\",\n\t\"772\",\n\t\"776\",\n\t\"780\",\n\t\"784\",\n\t\"788\",\n\t\"792\",\n\t\"795\",\n\t\"796\",\n\t\"798\",\n\t\"800\",\n\t\"804\",\n\t\"807\",\n\t\"818\",\n\t\"831\",\n\t\"832\",\n\t\"833\",\n\t\"834\",\n\t\"836\",\n\t\"840\",\n\t\"850\",\n\t\"854\",\n\t\"858\",\n\t\"860\",\n\t\"862\",\n\t\"876\",\n\t\"882\",\n\t\"887\",\n\t\"894\",\n\t\"ABW\",\n\t\"AD\",\n\t\"AE\",\n\t\"AF\",\n\t\"AFG\",\n\t\"AFRUN\",\n\t\"AG\",\n\t\"AGO\",\n\t\"AI\",\n\t\"AIA\",\n\t\"AL\",\n\t\"ALA\",\n\t\"ALB\",\n\t\"AM\",\n\t\"AMS\",\n\t\"AND\",\n\t\"AO\",\n\t\"AQ\",\n\t\"AR\",\n\t\"ARE\",\n\t\"ARG\",\n\t\"ARM\",\n\t\"AS\",\n\t\"ASM\",\n\t\"AT\",\n\t\"ATA\",\n\t\"ATF\",\n\t\"ATG\",\n\t\"AU\",\n\t\"AUS\",\n\t\"AUT\",\n\t\"AW\",\n\t\"AX\",\n\t\"AZ\",\n\t\"AZE\",\n\t\"BA\",\n\t\"BB\",\n\t\"BD\",\n\t\"BDI\",\n\t\"BE\",\n\t\"BEL\",\n\t\"BEN\",\n\t\"BF\",\n\t\"BFA\",\n\t\"BG\",\n\t\"BGD\",\n\t\"BGR\",\n\t\"BH\",\n\t\"BHR\",\n\t\"BHS\",\n\t\"BI\",\n\t\"BIH\",\n\t\"BJ\",\n\t\"BL\",\n\t\"BLM\",\n\t\"BLR\",\n\t\"BLZ\",\n\t\"BM\",\n\t\"BMU\",\n\t\"BN\",\n\t\"BO\",\n\t\"BOL\",\n\t\"BQ-BO\",\n\t\"BQ-SA\",\n\t\"BQ-SE\",\n\t\"BR\",\n\t\"BRA\",\n\t\"BRB\",\n\t\"BRN\",\n\t\"BS\",\n\t\"BT\",\n\t\"BTN\",\n\t\"BV\",\n\t\"BVT\",\n\t\"BW\",\n\t\"BWA\",\n\t\"BY\",\n\t\"BZ\",\n\t\"CA\",\n\t\"CAF\",\n\t\"CAN\",\n\t\"CC\",\n\t\"CCK\",\n\t\"CD\",\n\t\"CF\",\n\t\"CG\",\n\t\"CH\",\n\t\"CHE\",\n\t\"CHL\",\n\t\"CHN\",\n\t\"CI\",\n\t\"CIV\",\n\t\"CK\",\n\t\"CL\",\n\t\"CM\",\n\t\"CMR\",\n\t\"CN\",\n\t\"CO\",\n\t\"COD\",\n\t\"COG\",\n\t\"COK\",\n\t\"COL\",\n\t\"COM\",\n\t\"CPV\",\n\t\"CR\",\n\t\"CRI\",\n\t\"CU\",\n\t\"CUB\",\n\t\"CUW\",\n\t\"CV\",\n\t\"CW\",\n\t\"CX\",\n\t\"CXR\",\n\t\"CY\",\n\t\"CYM\",\n\t\"CYP\",\n\t\"CZ\",\n\t\"CZE\",\n\t\"DE\",\n\t\"DEU\",\n\t\"DJ\",\n\t\"DJI\",\n\t\"DK\",\n\t\"DM\",\n\t\"DMA\",\n\t\"DNK\",\n\t\"DO\",\n\t\"DOM\",\n\t\"EC\",\n\t\"ECU\",\n\t\"EE\",\n\t\"EG\",\n\t\"EGY\",\n\t\"EH\",\n\t\"ER\",\n\t\"ERI\",\n\t\"ES\",\n\t\"ESH\",\n\t\"ESP\",\n\t\"EST\",\n\t\"ET\",\n\t\"ETH\",\n\t\"EU\",\n\t\"FI\",\n\t\"FIN\",\n\t\"FJ\",\n\t\"FJI\",\n\t\"FK\",\n\t\"FLK\",\n\t\"FM\",\n\t\"FO\",\n\t\"FR\",\n\t\"FRA\",\n\t\"FRO\",\n\t\"FSM\",\n\t\"GA\",\n\t\"GAB\",\n\t\"GB-ENG\",\n\t\"GB-NIR\",\n\t\"GB-SCT\",\n\t\"GB-UKM\",\n\t\"GB-WLS\",\n\t\"GB\",\n\t\"GBR\",\n\t\"GD\",\n\t\"GE\",\n\t\"GEO\",\n\t\"GF\",\n\t\"GG\",\n\t\"GGY\",\n\t\"GH\",\n\t\"GHA\",\n\t\"GI\",\n\t\"GIB\",\n\t\"GIN\",\n\t\"GL\",\n\t\"GLP\",\n\t\"GM\",\n\t\"GMB\",\n\t\"GN\",\n\t\"GNB\",\n\t\"GNQ\",\n\t\"GP\",\n\t\"GQ\",\n\t\"GR\",\n\t\"GRC\",\n\t\"GRD\",\n\t\"GRL\",\n\t\"GS\",\n\t\"GT\",\n\t\"GTM\",\n\t\"GU\",\n\t\"GUF\",\n\t\"GUM\",\n\t\"GUY\",\n\t\"GW\",\n\t\"GY\",\n\t\"HK\",\n\t\"HKG\",\n\t\"HM\",\n\t\"HMD\",\n\t\"HN\",\n\t\"HND\",\n\t\"HR\",\n\t\"HRV\",\n\t\"HT\",\n\t\"HTI\",\n\t\"HU\",\n\t\"HUN\",\n\t\"ID\",\n\t\"IDN\",\n\t\"IE\",\n\t\"IL\",\n\t\"IM\",\n\t\"IMN\",\n\t\"IN\",\n\t\"IND\",\n\t\"IO\",\n\t\"IOT\",\n\t\"IQ\",\n\t\"IR\",\n\t\"IRL\",\n\t\"IRN\",\n\t\"IRQ\",\n\t\"IS\",\n\t\"ISL\",\n\t\"ISR\",\n\t\"IT\",\n\t\"ITA\",\n\t\"JAM\",\n\t\"JE\",\n\t\"JEY\",\n\t\"JM\",\n\t\"JO\",\n\t\"JOR\",\n\t\"JP\",\n\t\"JPN\",\n\t\"KAZ\",\n\t\"KE\",\n\t\"KEN\",\n\t\"KG\",\n\t\"KGZ\",\n\t\"KH\",\n\t\"KHM\",\n\t\"KI\",\n\t\"KIR\",\n\t\"KM\",\n\t\"KN-SK\",\n\t\"KNA\",\n\t\"KOR\",\n\t\"KP\",\n\t\"KR\",\n\t\"KW\",\n\t\"KWT\",\n\t\"KY\",\n\t\"KZ\",\n\t\"LA\",\n\t\"LAO\",\n\t\"LB\",\n\t\"LBN\",\n\t\"LBR\",\n\t\"LBY\",\n\t\"LC\",\n\t\"LCA\",\n\t\"LI\",\n\t\"LIE\",\n\t\"LK\",\n\t\"LKA\",\n\t\"LR\",\n\t\"LS\",\n\t\"LSO\",\n\t\"LT\",\n\t\"LTU\",\n\t\"LU\",\n\t\"LUX\",\n\t\"LV\",\n\t\"LVA\",\n\t\"LY\",\n\t\"MA\",\n\t\"MAC\",\n\t\"MAF\",\n\t\"MAR\",\n\t\"MC\",\n\t\"MCO\",\n\t\"MD\",\n\t\"MDA\",\n\t\"MDG\",\n\t\"MDV\",\n\t\"ME\",\n\t\"MEX\",\n\t\"MF\",\n\t\"MG\",\n\t\"MH\",\n\t\"MHL\",\n\t\"MK\",\n\t\"MKD\",\n\t\"ML\",\n\t\"MLI\",\n\t\"MLT\",\n\t\"MM\",\n\t\"MMR\",\n\t\"MN\",\n\t\"MNE\",\n\t\"MNG\",\n\t\"MNP\",\n\t\"MO\",\n\t\"MOZ\",\n\t\"MP\",\n\t\"MQ\",\n\t\"MR\",\n\t\"MRT\",\n\t\"MS\",\n\t\"MSR\",\n\t\"MT\",\n\t\"MTQ\",\n\t\"MU\",\n\t\"MUS\",\n\t\"MV\",\n\t\"MW\",\n\t\"MWI\",\n\t\"MX\",\n\t\"MY\",\n\t\"MYS\",\n\t\"MZ\",\n\t\"NA\",\n\t\"NAM\",\n\t\"NC\",\n\t\"NCL\",\n\t\"NE\",\n\t\"NER\",\n\t\"NF\",\n\t\"NFK\",\n\t\"NG\",\n\t\"NGA\",\n\t\"NI\",\n\t\"NIC\",\n\t\"NIU\",\n\t\"NL\",\n\t\"NLD\",\n\t\"NO\",\n\t\"NOR\",\n\t\"NP\",\n\t\"NPL\",\n\t\"NR\",\n\t\"NRU\",\n\t\"NU\",\n\t\"NZ\",\n\t\"NZL\",\n\t\"OM\",\n\t\"OMN\",\n\t\"PA\",\n\t\"PAK\",\n\t\"PAN\",\n\t\"PCN\",\n\t\"PE\",\n\t\"PER\",\n\t\"PF\",\n\t\"PG\",\n\t\"PH\",\n\t\"PHL\",\n\t\"PK\",\n\t\"PL\",\n\t\"PLW\",\n\t\"PM\",\n\t\"PN\",\n\t\"PNG\",\n\t\"POL\",\n\t\"PR\",\n\t\"PRI\",\n\t\"PRK\",\n\t\"PRT\",\n\t\"PRY\",\n\t\"PS\",\n\t\"PSE\",\n\t\"PT\",\n\t\"PW\",\n\t\"PY\",\n\t\"PYF\",\n\t\"QA\",\n\t\"QAT\",\n\t\"RAINBOW\",\n\t\"RE\",\n\t\"REU\",\n\t\"RO\",\n\t\"ROU\",\n\t\"RS\",\n\t\"RU\",\n\t\"RUS\",\n\t\"RW\",\n\t\"RWA\",\n\t\"SA\",\n\t\"SAU\",\n\t\"SB\",\n\t\"SC\",\n\t\"SD\",\n\t\"SDN\",\n\t\"SE\",\n\t\"SEN\",\n\t\"SG\",\n\t\"SGP\",\n\t\"SGS\",\n\t\"SH\",\n\t\"SHN\",\n\t\"SI\",\n\t\"SJ\",\n\t\"SJM\",\n\t\"SK\",\n\t\"SL\",\n\t\"SLB\",\n\t\"SLE\",\n\t\"SLV\",\n\t\"SM\",\n\t\"SMR\",\n\t\"SN\",\n\t\"SO\",\n\t\"SOM\",\n\t\"SPM\",\n\t\"SR\",\n\t\"SRB\",\n\t\"SS\",\n\t\"SSD\",\n\t\"ST\",\n\t\"STP\",\n\t\"SUR\",\n\t\"SV\",\n\t\"SVK\",\n\t\"SVN\",\n\t\"SWE\",\n\t\"SWZ\",\n\t\"SX\",\n\t\"SXM\",\n\t\"SY\",\n\t\"SYC\",\n\t\"SYR\",\n\t\"SZ\",\n\t\"TC\",\n\t\"TCA\",\n\t\"TCD\",\n\t\"TD\",\n\t\"TF\",\n\t\"TG\",\n\t\"TGO\",\n\t\"TH\",\n\t\"THA\",\n\t\"TJ\",\n\t\"TJK\",\n\t\"TK\",\n\t\"TKL\",\n\t\"TKM\",\n\t\"TL\",\n\t\"TLS\",\n\t\"TM\",\n\t\"TN\",\n\t\"TO\",\n\t\"TON\",\n\t\"TR\",\n\t\"TT\",\n\t\"TTO\",\n\t\"TUN\",\n\t\"TUR\",\n\t\"TUV\",\n\t\"TV\",\n\t\"TW\",\n\t\"TWN\",\n\t\"TZ\",\n\t\"TZA\",\n\t\"UA\",\n\t\"UG\",\n\t\"UGA\",\n\t\"UKR\",\n\t\"UM\",\n\t\"UMI\",\n\t\"UNASUR\",\n\t\"URY\",\n\t\"US\",\n\t\"USA\",\n\t\"UY\",\n\t\"UZ\",\n\t\"UZB\",\n\t\"VA\",\n\t\"VAT\",\n\t\"VC\",\n\t\"VCT\",\n\t\"VE\",\n\t\"VEN\",\n\t\"VG\",\n\t\"VGB\",\n\t\"VI\",\n\t\"VIR\",\n\t\"VN\",\n\t\"VNM\",\n\t\"VU\",\n\t\"VUT\",\n\t\"WF\",\n\t\"WLF\",\n\t\"WS\",\n\t\"WSM\",\n\t\"YE\",\n\t\"YEM\",\n\t\"ZA\",\n\t\"ZAF\",\n\t\"ZM\",\n\t\"ZMB\",\n\t\"ZW\",\n\t\"ZWE\",\n] as const;\ntype CountryCode = (typeof countryCodes)[number];\n\n/**\n * Type Predicate: check if the given value is a valid country code\n */\nfunction isCountryCode(value: unknown): value is CountryCode {\n\treturn countryCodes.includes(value as CountryCode);\n}\n\nexport {\n\t//,\n\tisCountryCode,\n\tcountryCodes,\n};\n\nexport type {\n\t//,\n\tCountryCode,\n};\n"],"mappings":"sIAKA,MAwBM,EAAuB,EAAI,GAAI,CACpC,SAAU,CACT,KAAM,CACL,EAAG,sBACH,EAAG,uBACH,EAAG,aACH,CACD,CACD,CAAC,CAEI,EAAiB,EAAI,GAAI,CAC9B,SAAU,CACT,KAAM,CACL,EAAG,UACH,EAAG,aACH,EAAG,UACH,CACD,CACD,CAAC,CAgBF,SAAS,EAAK,CAEb,YACA,OACA,OAAO,IACP,UAAU,OACV,GAAG,GACM,CACT,IAAM,EAAe,EAAqB,CAAE,OAAM,CAAC,CAGnD,OACC,EAAC,MAAD,CACC,UAAW,EAAG,gCAAiC,EAJlC,EAAe,CAAE,OAAM,CAAC,CAIgC,EAAU,CAC/E,GAAI,WAFL,CAIC,EAAC,MAAD,CAAK,cAAA,GAAY,UAAW,EAAG,2CAA4C,EAAa,CAAI,CAAA,CAC5F,EAAC,MAAD,CACC,UAAU,mCACV,IAAK,kCAAsB,EAAK,GAAG,EAAK,MACxC,IAAK,YAAY,IACR,UACR,CAAA,CACG,GAGR,EAAK,YAAc,OCtFnB,MAAM,EAAe,kvFAgvBpB,CAMD,SAAS,EAAc,EAAsC,CAC5D,OAAO,EAAa,SAAS,EAAqB"}
1
+ {"version":3,"file":"flag.js","names":[],"sources":["../src/components/flag/flag.tsx","../src/components/flag/country-code.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport type { ComponentProps } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { CountryCode } from \"./country-code.js\";\n\nconst cdnOrigin = \"https://assets.ngrok.com\";\n\nconst sizes = [\"s\", \"m\", \"l\"] as const;\ntype Size = (typeof sizes)[number];\n\ntype Props = Omit<ComponentProps<\"div\">, \"children\"> & {\n\t/**\n\t * The country code for the flag to display\n\t * @example \"US\"\n\t */\n\tcode: CountryCode;\n\t/**\n\t * The size of flag to render, \"s\", \"m\", or \"l\"\n\t * @default \"l\"\n\t */\n\tsize?: Size;\n\t/**\n\t * A string providing a hint to the user agent as to how to best schedule the loading of the image to optimize page performance.\n\t * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading\n\t * @default \"lazy\"\n\t */\n\tloading?: ComponentProps<\"img\">[\"loading\"];\n};\n\nconst borderRadiusVariants = cva(\"\", {\n\tvariants: {\n\t\tsize: {\n\t\t\ts: \"rounded-[0.0625rem]\",\n\t\t\tm: \"rounded-[0.09375rem]\",\n\t\t\tl: \"rounded-xs\",\n\t\t} as const satisfies Record<Size, string>,\n\t},\n});\n\nconst sizingVariants = cva(\"\", {\n\tvariants: {\n\t\tsize: {\n\t\t\ts: \"w-4 h-3\",\n\t\t\tm: \"w-5 h-3.75\",\n\t\t\tl: \"w-8 h-6\",\n\t\t} as const satisfies Record<Size, string>,\n\t},\n});\n\n/**\n * A flag component that displays a flag based on the provided country code.\n * Inspired by [react-flagpack](https://flagpack.xyz/docs/development/react).\n *\n * @see https://mantle.ngrok.com/components/flag#flag\n *\n * @example\n * ```tsx\n * <Flag code=\"US\" />\n * <Flag code=\"JP\" size=\"m\" loading=\"eager\" />\n * <Flag code=\"CA\" size=\"s\" loading=\"lazy\" />\n * <Flag code=\"GB\" size=\"l\" />\n * ```\n */\nfunction Flag({\n\t//,\n\tclassName,\n\tcode,\n\tsize = \"l\",\n\tloading = \"lazy\",\n\t...props\n}: Props) {\n\tconst borderRadius = borderRadiusVariants({ size });\n\tconst sizing = sizingVariants({ size });\n\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"flag\"\n\t\t\tclassName={cx(\"flag relative overflow-hidden\", borderRadius, sizing, className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div aria-hidden className={cx(\"absolute inset-0 border border-[#000]/10\", borderRadius)} />\n\t\t\t<img\n\t\t\t\tclassName=\"h-full w-full block object-cover\"\n\t\t\t\tsrc={`${cdnOrigin}/flags/${size}/${code}.svg`}\n\t\t\t\talt={`flag for ${code}`}\n\t\t\t\tloading={loading}\n\t\t\t/>\n\t\t</div>\n\t);\n}\nFlag.displayName = \"Flag\";\n\nexport {\n\t//,\n\tFlag,\n};\n\nexport type {\n\t//,\n\tProps as FlagProps,\n};\n","/** All valid values for a flag\n * @see https://www.flagpack.xyz/docs/flag-index\n */\nconst countryCodes = [\n\t\"004\",\n\t\"008\",\n\t\"010\",\n\t\"016\",\n\t\"016\",\n\t\"020\",\n\t\"024\",\n\t\"028\",\n\t\"031\",\n\t\"032\",\n\t\"040\",\n\t\"044\",\n\t\"048\",\n\t\"050\",\n\t\"051\",\n\t\"052\",\n\t\"056\",\n\t\"060\",\n\t\"064\",\n\t\"068\",\n\t\"070\",\n\t\"072\",\n\t\"074\",\n\t\"076\",\n\t\"084\",\n\t\"086\",\n\t\"090\",\n\t\"092\",\n\t\"096\",\n\t\"100\",\n\t\"104\",\n\t\"108\",\n\t\"112\",\n\t\"116\",\n\t\"120\",\n\t\"124\",\n\t\"132\",\n\t\"136\",\n\t\"140\",\n\t\"144\",\n\t\"148\",\n\t\"152\",\n\t\"156\",\n\t\"158\",\n\t\"162\",\n\t\"166\",\n\t\"170\",\n\t\"174\",\n\t\"178\",\n\t\"180\",\n\t\"184\",\n\t\"188\",\n\t\"191\",\n\t\"192\",\n\t\"196\",\n\t\"203\",\n\t\"204\",\n\t\"208\",\n\t\"212\",\n\t\"214\",\n\t\"218\",\n\t\"222\",\n\t\"226\",\n\t\"231\",\n\t\"232\",\n\t\"233\",\n\t\"234\",\n\t\"238\",\n\t\"239\",\n\t\"242\",\n\t\"246\",\n\t\"248\",\n\t\"250\",\n\t\"254\",\n\t\"258\",\n\t\"260\",\n\t\"262\",\n\t\"266\",\n\t\"268\",\n\t\"270\",\n\t\"275\",\n\t\"276\",\n\t\"288\",\n\t\"292\",\n\t\"296\",\n\t\"300\",\n\t\"304\",\n\t\"308\",\n\t\"312\",\n\t\"316\",\n\t\"320\",\n\t\"324\",\n\t\"328\",\n\t\"332\",\n\t\"334\",\n\t\"336\",\n\t\"340\",\n\t\"344\",\n\t\"348\",\n\t\"352\",\n\t\"356\",\n\t\"360\",\n\t\"364\",\n\t\"368\",\n\t\"372\",\n\t\"376\",\n\t\"380\",\n\t\"384\",\n\t\"388\",\n\t\"392\",\n\t\"398\",\n\t\"400\",\n\t\"404\",\n\t\"408\",\n\t\"410\",\n\t\"414\",\n\t\"417\",\n\t\"418\",\n\t\"422\",\n\t\"426\",\n\t\"428\",\n\t\"430\",\n\t\"434\",\n\t\"438\",\n\t\"440\",\n\t\"442\",\n\t\"446\",\n\t\"450\",\n\t\"454\",\n\t\"458\",\n\t\"462\",\n\t\"466\",\n\t\"470\",\n\t\"474\",\n\t\"478\",\n\t\"480\",\n\t\"484\",\n\t\"492\",\n\t\"496\",\n\t\"498\",\n\t\"499\",\n\t\"500\",\n\t\"504\",\n\t\"508\",\n\t\"512\",\n\t\"516\",\n\t\"520\",\n\t\"524\",\n\t\"528\",\n\t\"531\",\n\t\"533\",\n\t\"534\",\n\t\"540\",\n\t\"548\",\n\t\"554\",\n\t\"558\",\n\t\"562\",\n\t\"566\",\n\t\"570\",\n\t\"574\",\n\t\"578\",\n\t\"580\",\n\t\"581\",\n\t\"583\",\n\t\"584\",\n\t\"585\",\n\t\"586\",\n\t\"591\",\n\t\"598\",\n\t\"600\",\n\t\"604\",\n\t\"608\",\n\t\"612\",\n\t\"616\",\n\t\"620\",\n\t\"624\",\n\t\"626\",\n\t\"630\",\n\t\"634\",\n\t\"638\",\n\t\"642\",\n\t\"643\",\n\t\"646\",\n\t\"652\",\n\t\"654\",\n\t\"659\",\n\t\"660\",\n\t\"662\",\n\t\"663\",\n\t\"666\",\n\t\"670\",\n\t\"674\",\n\t\"678\",\n\t\"682\",\n\t\"686\",\n\t\"688\",\n\t\"690\",\n\t\"694\",\n\t\"702\",\n\t\"703\",\n\t\"704\",\n\t\"705\",\n\t\"706\",\n\t\"710\",\n\t\"716\",\n\t\"724\",\n\t\"728\",\n\t\"729\",\n\t\"732\",\n\t\"740\",\n\t\"744\",\n\t\"748\",\n\t\"752\",\n\t\"756\",\n\t\"760\",\n\t\"762\",\n\t\"764\",\n\t\"768\",\n\t\"772\",\n\t\"776\",\n\t\"780\",\n\t\"784\",\n\t\"788\",\n\t\"792\",\n\t\"795\",\n\t\"796\",\n\t\"798\",\n\t\"800\",\n\t\"804\",\n\t\"807\",\n\t\"818\",\n\t\"831\",\n\t\"832\",\n\t\"833\",\n\t\"834\",\n\t\"836\",\n\t\"840\",\n\t\"850\",\n\t\"854\",\n\t\"858\",\n\t\"860\",\n\t\"862\",\n\t\"876\",\n\t\"882\",\n\t\"887\",\n\t\"894\",\n\t\"ABW\",\n\t\"AD\",\n\t\"AE\",\n\t\"AF\",\n\t\"AFG\",\n\t\"AFRUN\",\n\t\"AG\",\n\t\"AGO\",\n\t\"AI\",\n\t\"AIA\",\n\t\"AL\",\n\t\"ALA\",\n\t\"ALB\",\n\t\"AM\",\n\t\"AMS\",\n\t\"AND\",\n\t\"AO\",\n\t\"AQ\",\n\t\"AR\",\n\t\"ARE\",\n\t\"ARG\",\n\t\"ARM\",\n\t\"AS\",\n\t\"ASM\",\n\t\"AT\",\n\t\"ATA\",\n\t\"ATF\",\n\t\"ATG\",\n\t\"AU\",\n\t\"AUS\",\n\t\"AUT\",\n\t\"AW\",\n\t\"AX\",\n\t\"AZ\",\n\t\"AZE\",\n\t\"BA\",\n\t\"BB\",\n\t\"BD\",\n\t\"BDI\",\n\t\"BE\",\n\t\"BEL\",\n\t\"BEN\",\n\t\"BF\",\n\t\"BFA\",\n\t\"BG\",\n\t\"BGD\",\n\t\"BGR\",\n\t\"BH\",\n\t\"BHR\",\n\t\"BHS\",\n\t\"BI\",\n\t\"BIH\",\n\t\"BJ\",\n\t\"BL\",\n\t\"BLM\",\n\t\"BLR\",\n\t\"BLZ\",\n\t\"BM\",\n\t\"BMU\",\n\t\"BN\",\n\t\"BO\",\n\t\"BOL\",\n\t\"BQ-BO\",\n\t\"BQ-SA\",\n\t\"BQ-SE\",\n\t\"BR\",\n\t\"BRA\",\n\t\"BRB\",\n\t\"BRN\",\n\t\"BS\",\n\t\"BT\",\n\t\"BTN\",\n\t\"BV\",\n\t\"BVT\",\n\t\"BW\",\n\t\"BWA\",\n\t\"BY\",\n\t\"BZ\",\n\t\"CA\",\n\t\"CAF\",\n\t\"CAN\",\n\t\"CC\",\n\t\"CCK\",\n\t\"CD\",\n\t\"CF\",\n\t\"CG\",\n\t\"CH\",\n\t\"CHE\",\n\t\"CHL\",\n\t\"CHN\",\n\t\"CI\",\n\t\"CIV\",\n\t\"CK\",\n\t\"CL\",\n\t\"CM\",\n\t\"CMR\",\n\t\"CN\",\n\t\"CO\",\n\t\"COD\",\n\t\"COG\",\n\t\"COK\",\n\t\"COL\",\n\t\"COM\",\n\t\"CPV\",\n\t\"CR\",\n\t\"CRI\",\n\t\"CU\",\n\t\"CUB\",\n\t\"CUW\",\n\t\"CV\",\n\t\"CW\",\n\t\"CX\",\n\t\"CXR\",\n\t\"CY\",\n\t\"CYM\",\n\t\"CYP\",\n\t\"CZ\",\n\t\"CZE\",\n\t\"DE\",\n\t\"DEU\",\n\t\"DJ\",\n\t\"DJI\",\n\t\"DK\",\n\t\"DM\",\n\t\"DMA\",\n\t\"DNK\",\n\t\"DO\",\n\t\"DOM\",\n\t\"EC\",\n\t\"ECU\",\n\t\"EE\",\n\t\"EG\",\n\t\"EGY\",\n\t\"EH\",\n\t\"ER\",\n\t\"ERI\",\n\t\"ES\",\n\t\"ESH\",\n\t\"ESP\",\n\t\"EST\",\n\t\"ET\",\n\t\"ETH\",\n\t\"EU\",\n\t\"FI\",\n\t\"FIN\",\n\t\"FJ\",\n\t\"FJI\",\n\t\"FK\",\n\t\"FLK\",\n\t\"FM\",\n\t\"FO\",\n\t\"FR\",\n\t\"FRA\",\n\t\"FRO\",\n\t\"FSM\",\n\t\"GA\",\n\t\"GAB\",\n\t\"GB-ENG\",\n\t\"GB-NIR\",\n\t\"GB-SCT\",\n\t\"GB-UKM\",\n\t\"GB-WLS\",\n\t\"GB\",\n\t\"GBR\",\n\t\"GD\",\n\t\"GE\",\n\t\"GEO\",\n\t\"GF\",\n\t\"GG\",\n\t\"GGY\",\n\t\"GH\",\n\t\"GHA\",\n\t\"GI\",\n\t\"GIB\",\n\t\"GIN\",\n\t\"GL\",\n\t\"GLP\",\n\t\"GM\",\n\t\"GMB\",\n\t\"GN\",\n\t\"GNB\",\n\t\"GNQ\",\n\t\"GP\",\n\t\"GQ\",\n\t\"GR\",\n\t\"GRC\",\n\t\"GRD\",\n\t\"GRL\",\n\t\"GS\",\n\t\"GT\",\n\t\"GTM\",\n\t\"GU\",\n\t\"GUF\",\n\t\"GUM\",\n\t\"GUY\",\n\t\"GW\",\n\t\"GY\",\n\t\"HK\",\n\t\"HKG\",\n\t\"HM\",\n\t\"HMD\",\n\t\"HN\",\n\t\"HND\",\n\t\"HR\",\n\t\"HRV\",\n\t\"HT\",\n\t\"HTI\",\n\t\"HU\",\n\t\"HUN\",\n\t\"ID\",\n\t\"IDN\",\n\t\"IE\",\n\t\"IL\",\n\t\"IM\",\n\t\"IMN\",\n\t\"IN\",\n\t\"IND\",\n\t\"IO\",\n\t\"IOT\",\n\t\"IQ\",\n\t\"IR\",\n\t\"IRL\",\n\t\"IRN\",\n\t\"IRQ\",\n\t\"IS\",\n\t\"ISL\",\n\t\"ISR\",\n\t\"IT\",\n\t\"ITA\",\n\t\"JAM\",\n\t\"JE\",\n\t\"JEY\",\n\t\"JM\",\n\t\"JO\",\n\t\"JOR\",\n\t\"JP\",\n\t\"JPN\",\n\t\"KAZ\",\n\t\"KE\",\n\t\"KEN\",\n\t\"KG\",\n\t\"KGZ\",\n\t\"KH\",\n\t\"KHM\",\n\t\"KI\",\n\t\"KIR\",\n\t\"KM\",\n\t\"KN-SK\",\n\t\"KNA\",\n\t\"KOR\",\n\t\"KP\",\n\t\"KR\",\n\t\"KW\",\n\t\"KWT\",\n\t\"KY\",\n\t\"KZ\",\n\t\"LA\",\n\t\"LAO\",\n\t\"LB\",\n\t\"LBN\",\n\t\"LBR\",\n\t\"LBY\",\n\t\"LC\",\n\t\"LCA\",\n\t\"LI\",\n\t\"LIE\",\n\t\"LK\",\n\t\"LKA\",\n\t\"LR\",\n\t\"LS\",\n\t\"LSO\",\n\t\"LT\",\n\t\"LTU\",\n\t\"LU\",\n\t\"LUX\",\n\t\"LV\",\n\t\"LVA\",\n\t\"LY\",\n\t\"MA\",\n\t\"MAC\",\n\t\"MAF\",\n\t\"MAR\",\n\t\"MC\",\n\t\"MCO\",\n\t\"MD\",\n\t\"MDA\",\n\t\"MDG\",\n\t\"MDV\",\n\t\"ME\",\n\t\"MEX\",\n\t\"MF\",\n\t\"MG\",\n\t\"MH\",\n\t\"MHL\",\n\t\"MK\",\n\t\"MKD\",\n\t\"ML\",\n\t\"MLI\",\n\t\"MLT\",\n\t\"MM\",\n\t\"MMR\",\n\t\"MN\",\n\t\"MNE\",\n\t\"MNG\",\n\t\"MNP\",\n\t\"MO\",\n\t\"MOZ\",\n\t\"MP\",\n\t\"MQ\",\n\t\"MR\",\n\t\"MRT\",\n\t\"MS\",\n\t\"MSR\",\n\t\"MT\",\n\t\"MTQ\",\n\t\"MU\",\n\t\"MUS\",\n\t\"MV\",\n\t\"MW\",\n\t\"MWI\",\n\t\"MX\",\n\t\"MY\",\n\t\"MYS\",\n\t\"MZ\",\n\t\"NA\",\n\t\"NAM\",\n\t\"NC\",\n\t\"NCL\",\n\t\"NE\",\n\t\"NER\",\n\t\"NF\",\n\t\"NFK\",\n\t\"NG\",\n\t\"NGA\",\n\t\"NI\",\n\t\"NIC\",\n\t\"NIU\",\n\t\"NL\",\n\t\"NLD\",\n\t\"NO\",\n\t\"NOR\",\n\t\"NP\",\n\t\"NPL\",\n\t\"NR\",\n\t\"NRU\",\n\t\"NU\",\n\t\"NZ\",\n\t\"NZL\",\n\t\"OM\",\n\t\"OMN\",\n\t\"PA\",\n\t\"PAK\",\n\t\"PAN\",\n\t\"PCN\",\n\t\"PE\",\n\t\"PER\",\n\t\"PF\",\n\t\"PG\",\n\t\"PH\",\n\t\"PHL\",\n\t\"PK\",\n\t\"PL\",\n\t\"PLW\",\n\t\"PM\",\n\t\"PN\",\n\t\"PNG\",\n\t\"POL\",\n\t\"PR\",\n\t\"PRI\",\n\t\"PRK\",\n\t\"PRT\",\n\t\"PRY\",\n\t\"PS\",\n\t\"PSE\",\n\t\"PT\",\n\t\"PW\",\n\t\"PY\",\n\t\"PYF\",\n\t\"QA\",\n\t\"QAT\",\n\t\"RAINBOW\",\n\t\"RE\",\n\t\"REU\",\n\t\"RO\",\n\t\"ROU\",\n\t\"RS\",\n\t\"RU\",\n\t\"RUS\",\n\t\"RW\",\n\t\"RWA\",\n\t\"SA\",\n\t\"SAU\",\n\t\"SB\",\n\t\"SC\",\n\t\"SD\",\n\t\"SDN\",\n\t\"SE\",\n\t\"SEN\",\n\t\"SG\",\n\t\"SGP\",\n\t\"SGS\",\n\t\"SH\",\n\t\"SHN\",\n\t\"SI\",\n\t\"SJ\",\n\t\"SJM\",\n\t\"SK\",\n\t\"SL\",\n\t\"SLB\",\n\t\"SLE\",\n\t\"SLV\",\n\t\"SM\",\n\t\"SMR\",\n\t\"SN\",\n\t\"SO\",\n\t\"SOM\",\n\t\"SPM\",\n\t\"SR\",\n\t\"SRB\",\n\t\"SS\",\n\t\"SSD\",\n\t\"ST\",\n\t\"STP\",\n\t\"SUR\",\n\t\"SV\",\n\t\"SVK\",\n\t\"SVN\",\n\t\"SWE\",\n\t\"SWZ\",\n\t\"SX\",\n\t\"SXM\",\n\t\"SY\",\n\t\"SYC\",\n\t\"SYR\",\n\t\"SZ\",\n\t\"TC\",\n\t\"TCA\",\n\t\"TCD\",\n\t\"TD\",\n\t\"TF\",\n\t\"TG\",\n\t\"TGO\",\n\t\"TH\",\n\t\"THA\",\n\t\"TJ\",\n\t\"TJK\",\n\t\"TK\",\n\t\"TKL\",\n\t\"TKM\",\n\t\"TL\",\n\t\"TLS\",\n\t\"TM\",\n\t\"TN\",\n\t\"TO\",\n\t\"TON\",\n\t\"TR\",\n\t\"TT\",\n\t\"TTO\",\n\t\"TUN\",\n\t\"TUR\",\n\t\"TUV\",\n\t\"TV\",\n\t\"TW\",\n\t\"TWN\",\n\t\"TZ\",\n\t\"TZA\",\n\t\"UA\",\n\t\"UG\",\n\t\"UGA\",\n\t\"UKR\",\n\t\"UM\",\n\t\"UMI\",\n\t\"UNASUR\",\n\t\"URY\",\n\t\"US\",\n\t\"USA\",\n\t\"UY\",\n\t\"UZ\",\n\t\"UZB\",\n\t\"VA\",\n\t\"VAT\",\n\t\"VC\",\n\t\"VCT\",\n\t\"VE\",\n\t\"VEN\",\n\t\"VG\",\n\t\"VGB\",\n\t\"VI\",\n\t\"VIR\",\n\t\"VN\",\n\t\"VNM\",\n\t\"VU\",\n\t\"VUT\",\n\t\"WF\",\n\t\"WLF\",\n\t\"WS\",\n\t\"WSM\",\n\t\"YE\",\n\t\"YEM\",\n\t\"ZA\",\n\t\"ZAF\",\n\t\"ZM\",\n\t\"ZMB\",\n\t\"ZW\",\n\t\"ZWE\",\n] as const;\ntype CountryCode = (typeof countryCodes)[number];\n\n/**\n * Type Predicate: check if the given value is a valid country code\n */\nfunction isCountryCode(value: unknown): value is CountryCode {\n\treturn countryCodes.includes(value as CountryCode);\n}\n\nexport {\n\t//,\n\tisCountryCode,\n\tcountryCodes,\n};\n\nexport type {\n\t//,\n\tCountryCode,\n};\n"],"mappings":"sIAKA,MAwBM,EAAuB,EAAI,GAAI,CACpC,SAAU,CACT,KAAM,CACL,EAAG,sBACH,EAAG,uBACH,EAAG,aACH,CACD,CACD,CAAC,CAEI,EAAiB,EAAI,GAAI,CAC9B,SAAU,CACT,KAAM,CACL,EAAG,UACH,EAAG,aACH,EAAG,UACH,CACD,CACD,CAAC,CAgBF,SAAS,EAAK,CAEb,YACA,OACA,OAAO,IACP,UAAU,OACV,GAAG,GACM,CACT,IAAM,EAAe,EAAqB,CAAE,OAAM,CAAC,CAGnD,OACC,EAAC,MAAD,CACC,YAAU,OACV,UAAW,EAAG,gCAAiC,EALlC,EAAe,CAAE,OAAM,CAAC,CAKgC,EAAU,CAC/E,GAAI,WAHL,CAKC,EAAC,MAAD,CAAK,cAAA,GAAY,UAAW,EAAG,2CAA4C,EAAa,CAAI,CAAA,CAC5F,EAAC,MAAD,CACC,UAAU,mCACV,IAAK,kCAAsB,EAAK,GAAG,EAAK,MACxC,IAAK,YAAY,IACR,UACR,CAAA,CACG,GAGR,EAAK,YAAc,OCvFnB,MAAM,EAAe,kvFAgvBpB,CAMD,SAAS,EAAc,EAAsC,CAC5D,OAAO,EAAa,SAAS,EAAqB"}
@@ -7,6 +7,14 @@ import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
7
7
  /**
8
8
  * A floating card that appears when a user hovers over a trigger element.
9
9
  *
10
+ * `HoverCard` is intended primarily for sighted users — it is not a
11
+ * reliably discoverable path for keyboard or screen reader users, since it
12
+ * opens on pointer hover. Use it for supplemental previews of content that
13
+ * is already available through another accessible path (typically the
14
+ * underlying link). Prefer `Popover` when the floating content must be
15
+ * reachable by all users, or `Tooltip` for short, non-interactive labels on
16
+ * controls.
17
+ *
10
18
  * @see https://mantle.ngrok.com/components/hover-card
11
19
  *
12
20
  * @example
@@ -121,7 +129,7 @@ declare const HoverCard: {
121
129
  * </HoverCard.Root>
122
130
  * ```
123
131
  */
124
- readonly Trigger: _$react.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & _$react.RefAttributes<HTMLAnchorElement>>;
132
+ readonly Trigger: _$react.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardTriggerProps & _$react.RefAttributes<HTMLAnchorElement>, "ref"> & _$react.RefAttributes<HTMLAnchorElement>>;
125
133
  };
126
134
  //#endregion
127
135
  export { HoverCard };
@@ -1,2 +1,2 @@
1
- import{t as e}from"./cx-D1HYnpvA.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";import*as r from"@radix-ui/react-hover-card";const i=({closeDelay:e=300,openDelay:t=100,...i})=>n(r.Root,{closeDelay:e,openDelay:t,...i});i.displayName=`HoverCard`;const a=r.Trigger;a.displayName=`HoverCardTrigger`;const o=r.Portal;o.displayName=`HoverCardPortal`;const s=t(({className:t,onClick:i,align:a=`center`,sideOffset:s=4,...c},l)=>n(o,{children:n(r.Content,{ref:l,align:a,sideOffset:s,className:e(`bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden`,`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2`,t),onClick:e=>{e.stopPropagation(),i?.(e)},...c})}));s.displayName=r.Content.displayName;const c={Root:i,Content:s,Portal:o,Trigger:a};export{c as HoverCard};
1
+ import{t as e}from"./cx-D1HYnpvA.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";import*as r from"@radix-ui/react-hover-card";const i=({closeDelay:e=300,openDelay:t=100,...i})=>n(r.Root,{closeDelay:e,openDelay:t,...i});i.displayName=`HoverCard`;const a=t((e,t)=>n(r.Trigger,{ref:t,"data-slot":`hover-card-trigger`,...e}));a.displayName=`HoverCardTrigger`;const o=r.Portal;o.displayName=`HoverCardPortal`;const s=t(({className:t,onClick:i,align:a=`center`,sideOffset:s=4,...c},l)=>n(o,{children:n(r.Content,{ref:l,"data-slot":`hover-card-content`,align:a,sideOffset:s,className:e(`bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden`,`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2`,t),onClick:e=>{e.stopPropagation(),i?.(e)},...c})}));s.displayName=r.Content.displayName;const c={Root:i,Content:s,Portal:o,Trigger:a};export{c as HoverCard};
2
2
  //# sourceMappingURL=hover-card.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"hover-card.js","names":[],"sources":["../src/components/hover-card/hover-card.tsx"],"sourcesContent":["\"use client\";\n\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating card that appears when a user hovers over a trigger element.\n * This is the root, stateful component that manages the open/closed state of the hover card.\n *\n * @see https://mantle.ngrok.com/components/hover-card#hovercardroot\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n * <HoverCard.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Hover me\n * </Button>\n * </HoverCard.Trigger>\n * <HoverCard.Content>\n * <p>This is the hover card content.</p>\n * </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Root = ({\n\tcloseDelay = 300,\n\topenDelay = 100,\n\t...props\n}: ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>) => (\n\t<HoverCardPrimitive.Root closeDelay={closeDelay} openDelay={openDelay} {...props} />\n);\nRoot.displayName = \"HoverCard\";\n\n/**\n * The trigger element that opens the hover card when hovered.\n *\n * @see https://mantle.ngrok.com/components/hover-card#hovercardtrigger\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n * <HoverCard.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Hover me\n * </Button>\n * </HoverCard.Trigger>\n * <HoverCard.Content>\n * <p>This is the hover card content.</p>\n * </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Trigger = HoverCardPrimitive.Trigger;\nTrigger.displayName = \"HoverCardTrigger\";\n\n/**\n * The portal for a HoverCard. Should be rendered as a child of the `HoverCard` component.\n * Renders a portal that the `HoverCard.Content` is rendered into.\n *\n * You likely don't need to use this component directly, as it is used internally by the `HoverCard.Content` component.\n */\nconst Portal = HoverCardPrimitive.Portal;\nPortal.displayName = \"HoverCardPortal\";\n\n/**\n * The content to render inside the hover card.\n *\n * @see https://mantle.ngrok.com/components/hover-card#hovercardcontent\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n * <HoverCard.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Hover me\n * </Button>\n * </HoverCard.Trigger>\n * <HoverCard.Content>\n * <p>This is the hover card content.</p>\n * </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof HoverCardPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, onClick, align = \"center\", sideOffset = 4, ...props }, ref) => (\n\t<Portal>\n\t\t<HoverCardPrimitive.Content\n\t\t\tref={ref}\n\t\t\talign={align}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden\",\n\t\t\t\t\"data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonClick={(event) => {\n\t\t\t\t/**\n\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t */\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nContent.displayName = HoverCardPrimitive.Content.displayName;\n\n/**\n * A floating card that appears when a user hovers over a trigger element.\n *\n * @see https://mantle.ngrok.com/components/hover-card\n *\n * @example\n * Composition:\n * ```\n * HoverCard.Root\n * ├── HoverCard.Trigger\n * └── HoverCard.Content\n * ```\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n * <HoverCard.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Hover me\n * </Button>\n * </HoverCard.Trigger>\n * <HoverCard.Content>\n * <p>This is the hover card content.</p>\n * </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst HoverCard = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the hover card.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#hovercardroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t * <HoverCard.Trigger asChild>\n\t * <Button>Hover me</Button>\n\t * </HoverCard.Trigger>\n\t * <HoverCard.Content>\n\t * <p>This is the hover card content.</p>\n\t * </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The content to render inside the hover card. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#hovercardcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t * <HoverCard.Trigger asChild>\n\t * <Button type=\"button\" variant=\"link\">@username</Button>\n\t * </HoverCard.Trigger>\n\t * <HoverCard.Content side=\"top\">\n\t * <div className=\"space-y-2\">\n\t * <Text weight=\"strong\">User Profile</Text>\n\t * <Text>Additional information about the user.</Text>\n\t * <Button type=\"button\" size=\"sm\">Follow</Button>\n\t * </div>\n\t * </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The portal container for rendering hover card content outside the normal DOM tree.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#api-reference\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t * <HoverCard.Trigger asChild>\n\t * <Text>Hover over me</Text>\n\t * </HoverCard.Trigger>\n\t * <HoverCard.Portal>\n\t * <HoverCard.Content>\n\t * <Text>This content is rendered in a portal.</Text>\n\t * </HoverCard.Content>\n\t * </HoverCard.Portal>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * The trigger element that opens the hover card when hovered.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#hovercardtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t * <HoverCard.Trigger asChild>\n\t * <Button type=\"button\" variant=\"ghost\">\n\t * Hover for details\n\t * </Button>\n\t * </HoverCard.Trigger>\n\t * <HoverCard.Content>\n\t * <div className=\"space-y-1\">\n\t * <Text weight=\"strong\">Quick Info</Text>\n\t * <Text>This appears when you hover over the trigger.</Text>\n\t * </div>\n\t * </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tHoverCard,\n};\n"],"mappings":"6JA2BA,MAAM,GAAQ,CACb,aAAa,IACb,YAAY,IACZ,GAAG,KAEH,EAAC,EAAmB,KAApB,CAAqC,aAAuB,YAAW,GAAI,EAAS,CAAA,CAErF,EAAK,YAAc,YAqBnB,MAAM,EAAU,EAAmB,QACnC,EAAQ,YAAc,mBAQtB,MAAM,EAAS,EAAmB,OAClC,EAAO,YAAc,kBAqBrB,MAAM,EAAU,GAGb,CAAE,YAAW,UAAS,QAAQ,SAAU,aAAa,EAAG,GAAG,GAAS,IACtE,EAAC,EAAD,CAAA,SACC,EAAC,EAAmB,QAApB,CACM,MACE,QACK,aACZ,UAAW,EACV,qFACA,+TACA,EACA,CACD,QAAU,GAAU,CAInB,EAAM,iBAAiB,CACvB,IAAU,EAAM,EAEjB,GAAI,EACH,CAAA,CACM,CAAA,CACR,CACF,EAAQ,YAAc,EAAmB,QAAQ,YA6BjD,MAAM,EAAY,CAkBjB,OAsBA,UAoBA,SAuBA,UACA"}
1
+ {"version":3,"file":"hover-card.js","names":[],"sources":["../src/components/hover-card/hover-card.tsx"],"sourcesContent":["\"use client\";\n\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating card that appears when a user hovers over a trigger element.\n * This is the root, stateful component that manages the open/closed state of the hover card.\n *\n * @see https://mantle.ngrok.com/components/hover-card#hovercardroot\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n * <HoverCard.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Hover me\n * </Button>\n * </HoverCard.Trigger>\n * <HoverCard.Content>\n * <p>This is the hover card content.</p>\n * </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Root = ({\n\tcloseDelay = 300,\n\topenDelay = 100,\n\t...props\n}: ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>) => (\n\t<HoverCardPrimitive.Root closeDelay={closeDelay} openDelay={openDelay} {...props} />\n);\nRoot.displayName = \"HoverCard\";\n\n/**\n * The trigger element that opens the hover card when hovered.\n *\n * @see https://mantle.ngrok.com/components/hover-card#hovercardtrigger\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n * <HoverCard.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Hover me\n * </Button>\n * </HoverCard.Trigger>\n * <HoverCard.Content>\n * <p>This is the hover card content.</p>\n * </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<typeof HoverCardPrimitive.Trigger>,\n\tComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger>\n>((props, ref) => (\n\t<HoverCardPrimitive.Trigger ref={ref} data-slot=\"hover-card-trigger\" {...props} />\n));\nTrigger.displayName = \"HoverCardTrigger\";\n\n/**\n * The portal for a HoverCard. Should be rendered as a child of the `HoverCard` component.\n * Renders a portal that the `HoverCard.Content` is rendered into.\n *\n * You likely don't need to use this component directly, as it is used internally by the `HoverCard.Content` component.\n */\nconst Portal = HoverCardPrimitive.Portal;\nPortal.displayName = \"HoverCardPortal\";\n\n/**\n * The content to render inside the hover card.\n *\n * @see https://mantle.ngrok.com/components/hover-card#hovercardcontent\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n * <HoverCard.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Hover me\n * </Button>\n * </HoverCard.Trigger>\n * <HoverCard.Content>\n * <p>This is the hover card content.</p>\n * </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof HoverCardPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, onClick, align = \"center\", sideOffset = 4, ...props }, ref) => (\n\t<Portal>\n\t\t<HoverCardPrimitive.Content\n\t\t\tref={ref}\n\t\t\tdata-slot=\"hover-card-content\"\n\t\t\talign={align}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden\",\n\t\t\t\t\"data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonClick={(event) => {\n\t\t\t\t/**\n\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t */\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nContent.displayName = HoverCardPrimitive.Content.displayName;\n\n/**\n * A floating card that appears when a user hovers over a trigger element.\n *\n * `HoverCard` is intended primarily for sighted users — it is not a\n * reliably discoverable path for keyboard or screen reader users, since it\n * opens on pointer hover. Use it for supplemental previews of content that\n * is already available through another accessible path (typically the\n * underlying link). Prefer `Popover` when the floating content must be\n * reachable by all users, or `Tooltip` for short, non-interactive labels on\n * controls.\n *\n * @see https://mantle.ngrok.com/components/hover-card\n *\n * @example\n * Composition:\n * ```\n * HoverCard.Root\n * ├── HoverCard.Trigger\n * └── HoverCard.Content\n * ```\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n * <HoverCard.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Hover me\n * </Button>\n * </HoverCard.Trigger>\n * <HoverCard.Content>\n * <p>This is the hover card content.</p>\n * </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst HoverCard = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the hover card.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#hovercardroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t * <HoverCard.Trigger asChild>\n\t * <Button>Hover me</Button>\n\t * </HoverCard.Trigger>\n\t * <HoverCard.Content>\n\t * <p>This is the hover card content.</p>\n\t * </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The content to render inside the hover card. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#hovercardcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t * <HoverCard.Trigger asChild>\n\t * <Button type=\"button\" variant=\"link\">@username</Button>\n\t * </HoverCard.Trigger>\n\t * <HoverCard.Content side=\"top\">\n\t * <div className=\"space-y-2\">\n\t * <Text weight=\"strong\">User Profile</Text>\n\t * <Text>Additional information about the user.</Text>\n\t * <Button type=\"button\" size=\"sm\">Follow</Button>\n\t * </div>\n\t * </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The portal container for rendering hover card content outside the normal DOM tree.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#api-reference\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t * <HoverCard.Trigger asChild>\n\t * <Text>Hover over me</Text>\n\t * </HoverCard.Trigger>\n\t * <HoverCard.Portal>\n\t * <HoverCard.Content>\n\t * <Text>This content is rendered in a portal.</Text>\n\t * </HoverCard.Content>\n\t * </HoverCard.Portal>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * The trigger element that opens the hover card when hovered.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#hovercardtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t * <HoverCard.Trigger asChild>\n\t * <Button type=\"button\" variant=\"ghost\">\n\t * Hover for details\n\t * </Button>\n\t * </HoverCard.Trigger>\n\t * <HoverCard.Content>\n\t * <div className=\"space-y-1\">\n\t * <Text weight=\"strong\">Quick Info</Text>\n\t * <Text>This appears when you hover over the trigger.</Text>\n\t * </div>\n\t * </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tHoverCard,\n};\n"],"mappings":"6JA2BA,MAAM,GAAQ,CACb,aAAa,IACb,YAAY,IACZ,GAAG,KAEH,EAAC,EAAmB,KAApB,CAAqC,aAAuB,YAAW,GAAI,EAAS,CAAA,CAErF,EAAK,YAAc,YAqBnB,MAAM,EAAU,GAGb,EAAO,IACT,EAAC,EAAmB,QAApB,CAAiC,MAAK,YAAU,qBAAqB,GAAI,EAAS,CAAA,CACjF,CACF,EAAQ,YAAc,mBAQtB,MAAM,EAAS,EAAmB,OAClC,EAAO,YAAc,kBAqBrB,MAAM,EAAU,GAGb,CAAE,YAAW,UAAS,QAAQ,SAAU,aAAa,EAAG,GAAG,GAAS,IACtE,EAAC,EAAD,CAAA,SACC,EAAC,EAAmB,QAApB,CACM,MACL,YAAU,qBACH,QACK,aACZ,UAAW,EACV,qFACA,+TACA,EACA,CACD,QAAU,GAAU,CAInB,EAAM,iBAAiB,CACvB,IAAU,EAAM,EAEjB,GAAI,EACH,CAAA,CACM,CAAA,CACR,CACF,EAAQ,YAAc,EAAmB,QAAQ,YAqCjD,MAAM,EAAY,CAkBjB,OAsBA,UAoBA,SAuBA,UACA"}