@ngrok/mantle 0.68.7 → 0.69.1

package/README.md

@@ -48,8 +48,6 @@ Mantle ships runtime components from `@ngrok/mantle`, while build-time and serve
 
 This keeps Vite/Shiki/parser dependencies out of frontend installs that only need Mantle's runtime UI package.
 
-For a concrete service implementation, see [`apps/highlight-server`](../../apps/highlight-server/README.md), a Bun + Hono syntax-highlighting API that preloads Shiki and serves highlighted HTML for server-side use cases.
-
 ### Vite + MDX
 
 ```ts
@@ -70,6 +68,24 @@ const result = await highlighter.highlight({
 });
 ```
 
+## Scaffolding a New Component
+
+If you're contributing a new mantle component and use [Claude Code](https://claude.com/claude-code), run the `/scaffold-component` slash command to scaffold one end-to-end (component files, package.json export, docs page, route, navigation entry, and changeset):
+
+```
+/scaffold-component <component-name>
+```
+
+See [`.claude/commands/scaffold-component.md`](https://github.com/ngrok-oss/mantle/blob/main/.claude/commands/scaffold-component.md) for the full step-by-step reference — it's also useful if you'd rather scaffold by hand.
+
+To validate that an existing component's docs, JSDoc, and scaffold wiring match the conventions (and auto-fix common drift), run `/audit-component`:
+
+```
+/audit-component <component-name>
+```
+
+Omit the name (or pass `all`) to sweep every component. See [`.claude/commands/audit-component.md`](https://github.com/ngrok-oss/mantle/blob/main/.claude/commands/audit-component.md) for the full checklist.
+
 ## Git Hooks
 
 Pre-commit hooks run automatically via [husky](https://typicode.github.io/husky/) and [lint-staged](https://github.com/lint-staged/lint-staged). On every commit, staged files are formatted with oxfmt and linted with oxlint.

package/dist/accordion.d.ts

@@ -11,6 +11,17 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  * @see https://mantle.ngrok.com/components/accordion
  *
  * @example
+ * Composition:
+ * ```
+ * Accordion.Root
+ * ├── Accordion.Item
+ * │   ├── Accordion.Heading
+ * │   │   └── Accordion.Trigger
+ * │   │       └── Accordion.TriggerIcon
+ * │   └── Accordion.Content
+ * ```
+ *
+ * @example
  * ```tsx
  * <Accordion.Root type="single" collapsible>
  *   <Accordion.Item value="item-1">

package/dist/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":[],"sources":["../src/components/accordion/accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { type ComponentPropsWithoutRef, type ComponentRef, forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon, type IconProps } from \"../icon/icon.js\";\n\n/**\n * A vertically stacked set of interactive headings that each reveal a section of content.\n * The root component that contains all accordion items.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Root>\n>(({ className, ...props }, ref) => (\n\t<AccordionPrimitive.Root ref={ref} className={cx(\"w-full space-y-2.5\", className)} {...props} />\n));\nRoot.displayName = \"Accordion\";\n\n/**\n * Contains all the parts of a collapsible section.\n * A single accordion item that can be expanded or collapsed.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-item\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Item = AccordionPrimitive.Item;\nItem.displayName = \"AccordionItem\";\n\n/**\n * Wraps an AccordionTrigger.\n * Contains the accordion trigger and provides proper heading semantics.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-heading\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Heading = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Header>\n>(({ className, ...props }, ref) => (\n\t<AccordionPrimitive.Header\n\t\tref={ref}\n\t\tclassName={cx(\"flex items-center gap-2\", className)}\n\t\t{...props}\n\t/>\n));\nHeading.displayName = \"AccordionHeading\";\n\n/**\n * Toggles the collapsed state of its associated item.\n * The interactive element that expands or collapses the accordion content.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<\"button\">,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n\t<AccordionPrimitive.Trigger\n\t\tref={ref}\n\t\tclassName={cx(\"group flex items-center gap-1.5\", className)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</AccordionPrimitive.Trigger>\n));\nTrigger.displayName = \"AccordionTrigger\";\n\n/**\n * An icon that indicates the expanded/collapsed state of the accordion trigger.\n * Rotates based on the accordion item state to provide visual feedback.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger-icon\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst TriggerIcon = ({ className, ...props }: Omit<IconProps, \"svg\">) => (\n\t<Icon\n\t\t{...props}\n\t\tsvg={<CaretDownIcon weight=\"fill\" />}\n\t\tclassName={cx(\"group-data-[state=open]:rotate-0 -rotate-90\", className)}\n\t/>\n);\nTriggerIcon.displayName = \"AccordionTriggerIcon\";\n\n/**\n * Contains the collapsible content for an item.\n * The content area that is revealed when the accordion item is expanded.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-content\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n\t<AccordionPrimitive.Content\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"data-state-closed:animate-accordion-up data-state-open:animate-accordion-down overflow-hidden *:first:mt-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</AccordionPrimitive.Content>\n));\nContent.displayName = \"AccordionContent\";\n\n/**\n * A vertically stacked set of interactive headings that each reveal a section of content.\n *\n * @see https://mantle.ngrok.com/components/accordion\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Accordion = {\n\t/**\n\t * A vertically stacked set of interactive headings that each reveal a section of content.\n\t * The root component that contains all accordion items.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the collapsible content for an item.\n\t * The content area that is revealed when the accordion item is expanded.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Wraps an AccordionTrigger.\n\t * Contains the accordion trigger and provides proper heading semantics.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-heading\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tHeading,\n\t/**\n\t * Contains all the parts of a collapsible section.\n\t * A single accordion item that can be expanded or collapsed.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * Toggles the collapsed state of its associated item.\n\t * The interactive element that expands or collapses the accordion content.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * An icon that indicates the expanded/collapsed state of the accordion trigger.\n\t * Rotates based on the accordion item state to provide visual feedback.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger-icon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tTriggerIcon,\n} as const;\n\nexport {\n\t//,\n\tAccordion,\n};\n"],"mappings":"8PA+BA,MAAM,EAAO,GAGV,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAmB,KAApB,CAA8B,MAAK,UAAW,EAAG,qBAAsB,EAAU,CAAE,GAAI,EAAS,CAAA,CAC/F,CACF,EAAK,YAAc,YAyBnB,MAAM,EAAO,EAAmB,KAChC,EAAK,YAAc,gBAyBnB,MAAM,EAAU,GAGb,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAmB,OAApB,CACM,MACL,UAAW,EAAG,0BAA2B,EAAU,CACnD,GAAI,EACH,CAAA,CACD,CACF,EAAQ,YAAc,mBAyBtB,MAAM,EAAU,GAGb,CAAE,YAAW,WAAU,GAAG,GAAS,IACrC,EAAC,EAAmB,QAApB,CACM,MACL,UAAW,EAAG,kCAAmC,EAAU,CAC3D,GAAI,EAEH,WAC2B,CAAA,CAC5B,CACF,EAAQ,YAAc,mBAyBtB,MAAM,GAAe,CAAE,YAAW,GAAG,KACpC,EAAC,EAAD,CACC,GAAI,EACJ,IAAK,EAAC,EAAD,CAAe,OAAO,OAAS,CAAA,CACpC,UAAW,EAAG,8CAA+C,EAAU,CACtE,CAAA,CAEH,EAAY,YAAc,uBAyB1B,MAAM,EAAU,GAGb,CAAE,YAAW,WAAU,GAAG,GAAS,IACrC,EAAC,EAAmB,QAApB,CACM,MACL,UAAW,EACV,6GACA,EACA,CACD,GAAI,EAEH,WAC2B,CAAA,CAC5B,CACF,EAAQ,YAAc,mBAwBtB,MAAM,EAAY,CAwBjB,OAwBA,UAwBA,UAwBA,OAwBA,UAwBA,cACA"}
+{"version":3,"file":"accordion.js","names":[],"sources":["../src/components/accordion/accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { type ComponentPropsWithoutRef, type ComponentRef, forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon, type IconProps } from \"../icon/icon.js\";\n\n/**\n * A vertically stacked set of interactive headings that each reveal a section of content.\n * The root component that contains all accordion items.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Root>\n>(({ className, ...props }, ref) => (\n\t<AccordionPrimitive.Root ref={ref} className={cx(\"w-full space-y-2.5\", className)} {...props} />\n));\nRoot.displayName = \"Accordion\";\n\n/**\n * Contains all the parts of a collapsible section.\n * A single accordion item that can be expanded or collapsed.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-item\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Item = AccordionPrimitive.Item;\nItem.displayName = \"AccordionItem\";\n\n/**\n * Wraps an AccordionTrigger.\n * Contains the accordion trigger and provides proper heading semantics.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-heading\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Heading = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Header>\n>(({ className, ...props }, ref) => (\n\t<AccordionPrimitive.Header\n\t\tref={ref}\n\t\tclassName={cx(\"flex items-center gap-2\", className)}\n\t\t{...props}\n\t/>\n));\nHeading.displayName = \"AccordionHeading\";\n\n/**\n * Toggles the collapsed state of its associated item.\n * The interactive element that expands or collapses the accordion content.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<\"button\">,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n\t<AccordionPrimitive.Trigger\n\t\tref={ref}\n\t\tclassName={cx(\"group flex items-center gap-1.5\", className)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</AccordionPrimitive.Trigger>\n));\nTrigger.displayName = \"AccordionTrigger\";\n\n/**\n * An icon that indicates the expanded/collapsed state of the accordion trigger.\n * Rotates based on the accordion item state to provide visual feedback.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger-icon\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst TriggerIcon = ({ className, ...props }: Omit<IconProps, \"svg\">) => (\n\t<Icon\n\t\t{...props}\n\t\tsvg={<CaretDownIcon weight=\"fill\" />}\n\t\tclassName={cx(\"group-data-[state=open]:rotate-0 -rotate-90\", className)}\n\t/>\n);\nTriggerIcon.displayName = \"AccordionTriggerIcon\";\n\n/**\n * Contains the collapsible content for an item.\n * The content area that is revealed when the accordion item is expanded.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-content\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n\t<AccordionPrimitive.Content\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"data-state-closed:animate-accordion-up data-state-open:animate-accordion-down overflow-hidden *:first:mt-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</AccordionPrimitive.Content>\n));\nContent.displayName = \"AccordionContent\";\n\n/**\n * A vertically stacked set of interactive headings that each reveal a section of content.\n *\n * @see https://mantle.ngrok.com/components/accordion\n *\n * @example\n * Composition:\n * ```\n * Accordion.Root\n * ├── Accordion.Item\n * │   ├── Accordion.Heading\n * │   │   └── Accordion.Trigger\n * │   │       └── Accordion.TriggerIcon\n * │   └── Accordion.Content\n * ```\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Accordion = {\n\t/**\n\t * A vertically stacked set of interactive headings that each reveal a section of content.\n\t * The root component that contains all accordion items.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the collapsible content for an item.\n\t * The content area that is revealed when the accordion item is expanded.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Wraps an AccordionTrigger.\n\t * Contains the accordion trigger and provides proper heading semantics.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-heading\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tHeading,\n\t/**\n\t * Contains all the parts of a collapsible section.\n\t * A single accordion item that can be expanded or collapsed.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * Toggles the collapsed state of its associated item.\n\t * The interactive element that expands or collapses the accordion content.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * An icon that indicates the expanded/collapsed state of the accordion trigger.\n\t * Rotates based on the accordion item state to provide visual feedback.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger-icon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tTriggerIcon,\n} as const;\n\nexport {\n\t//,\n\tAccordion,\n};\n"],"mappings":"8PA+BA,MAAM,EAAO,GAGV,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAmB,KAApB,CAA8B,MAAK,UAAW,EAAG,qBAAsB,EAAU,CAAE,GAAI,EAAS,CAAA,CAC/F,CACF,EAAK,YAAc,YAyBnB,MAAM,EAAO,EAAmB,KAChC,EAAK,YAAc,gBAyBnB,MAAM,EAAU,GAGb,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAmB,OAApB,CACM,MACL,UAAW,EAAG,0BAA2B,EAAU,CACnD,GAAI,EACH,CAAA,CACD,CACF,EAAQ,YAAc,mBAyBtB,MAAM,EAAU,GAGb,CAAE,YAAW,WAAU,GAAG,GAAS,IACrC,EAAC,EAAmB,QAApB,CACM,MACL,UAAW,EAAG,kCAAmC,EAAU,CAC3D,GAAI,EAEH,WAC2B,CAAA,CAC5B,CACF,EAAQ,YAAc,mBAyBtB,MAAM,GAAe,CAAE,YAAW,GAAG,KACpC,EAAC,EAAD,CACC,GAAI,EACJ,IAAK,EAAC,EAAD,CAAe,OAAO,OAAS,CAAA,CACpC,UAAW,EAAG,8CAA+C,EAAU,CACtE,CAAA,CAEH,EAAY,YAAc,uBAyB1B,MAAM,EAAU,GAGb,CAAE,YAAW,WAAU,GAAG,GAAS,IACrC,EAAC,EAAmB,QAApB,CACM,MACL,UAAW,EACV,6GACA,EACA,CACD,GAAI,EAEH,WAC2B,CAAA,CAC5B,CACF,EAAQ,YAAc,mBAmCtB,MAAM,EAAY,CAwBjB,OAwBA,UAwBA,UAwBA,OAwBA,UAwBA,cACA"}

package/dist/alert-dialog.d.ts

@@ -73,6 +73,22 @@ type AlertDialogIconProps = Omit<SvgAttributes, "children"> & {
  * @see https://mantle.ngrok.com/components/alert-dialog
  *
  * @example
+ * Composition:
+ * ```
+ * AlertDialog.Root
+ * ├── AlertDialog.Trigger
+ * └── AlertDialog.Content
+ *     ├── AlertDialog.Icon
+ *     └── AlertDialog.Body
+ *         ├── AlertDialog.Header
+ *         │   ├── AlertDialog.Title
+ *         │   └── AlertDialog.Description
+ *         └── AlertDialog.Footer
+ *             ├── AlertDialog.Cancel
+ *             └── AlertDialog.Action
+ * ```
+ *
+ * @example
  * ```tsx
  * <AlertDialog.Root priority="danger">
  *   <AlertDialog.Trigger asChild>

package/dist/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","names":["AlertDialogPrimitive.Root","AlertDialogPrimitive.Trigger","AlertDialogPrimitive.Portal","AlertDialogPrimitive.Overlay","AlertDialogPrimitive.Content","AlertDialogPrimitive.Title","AlertDialogPrimitive.Description","AlertDialogPrimitive.Close"],"sources":["../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Button, type ButtonPriority, type ButtonProps } from \"../button/button.js\";\nimport * as AlertDialogPrimitive from \"../dialog/primitive.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst priorities = [\"info\", \"danger\"] as const;\ntype Priority = (typeof priorities)[number];\n\ntype AlertDialogContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertDialogContext = createContext<AlertDialogContextValue | null>(null);\n\nfunction useAlertDialogContext() {\n\tconst context = useContext(AlertDialogContext);\n\tinvariant(context, \"AlertDialog child component used outside of AlertDialog parent!\");\n\treturn context;\n}\n\ntype AlertDialogProps = ComponentProps<typeof AlertDialogPrimitive.Root> & {\n\t/**\n\t * Indicates the importance or impact level of the AlertDialog, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n};\n\n/**\n * A modal dialog that interrupts the user with important content and expects a\n * response.\n * The root stateful component for the Alert Dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogroot\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nfunction Root({ priority, ...props }: AlertDialogProps) {\n\tconst context: AlertDialogContextValue = useMemo(() => ({ priority }), [priority]);\n\n\treturn (\n\t\t<AlertDialogContext.Provider value={context}>\n\t\t\t<AlertDialogPrimitive.Root {...props} />\n\t\t</AlertDialogContext.Provider>\n\t);\n}\nRoot.displayName = \"AlertDialog\";\n\n/**\n * A button that opens the Alert Dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtrigger\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Trigger = AlertDialogPrimitive.Trigger;\nTrigger.displayName = \"AlertDialogTrigger\";\n\n/**\n * The portal for the Alert Dialog.\n *\n * @private\n */\nconst AlertDialogPortal = AlertDialogPrimitive.Portal;\nAlertDialogPortal.displayName = \"AlertDialogPortal\";\n\n/**\n * A layer that covers the inert portion of the view when the dialog is open.\n *\n * @private\n */\nconst AlertDialogOverlay = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Overlay\n\t\tclassName={cx(\n\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 bg-overlay fixed inset-0 z-50 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t\tref={ref}\n\t/>\n));\nAlertDialogOverlay.displayName = \"AlertDialogOverlay\";\n\ntype AlertDialogContentProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `AlertDialogContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `AlertDialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `AlertDialogContent`\n\t *\n\t * @default `max-w-md`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The popover alert dialog container.\n *\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcontent\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Content>,\n\tAlertDialogContentProps\n>(({ className, preferredWidth = \"max-w-md\", ...props }, ref) => (\n\t<AlertDialogPortal>\n\t\t<AlertDialogOverlay />\n\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t<AlertDialogPrimitive.Content\n\t\t\t\tdata-mantle-modal-content\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start\",\n\t\t\t\t\t\"outline-hidden focus-within:outline-hidden\",\n\t\t\t\t\t\"p-6\",\n\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\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\tpreferredWidth,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t</AlertDialogPortal>\n));\nContent.displayName = \"AlertDialogContent\";\n\n/**\n * Contains the main content of the alert dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogbody\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Body = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn <Component className={cx(\"flex-1 space-y-4\", className)} ref={ref} {...props} />;\n\t},\n);\nBody.displayName = \"AlertDialogBody\";\n\n/**\n * Contains the header content of the dialog, including the title and description.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogheader\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Header = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\"flex flex-col space-y-2 text-center sm:text-start\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nHeader.displayName = \"AlertDialogHeader\";\n\n/**\n * Contains the footer content of the dialog, including the action and cancel buttons.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogfooter\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Footer = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nFooter.displayName = \"AlertDialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * Alternatively, you can provide `aria-label` or `aria-labelledby` to\n * `AlertDialogContent` and exclude this component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtitle\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong text-center text-lg font-medium sm:text-start\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"AlertDialogTitle\";\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 * Alternatively, you can provide `aria-describedby` to `AlertDialogContent` and\n * exclude this component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogdescription\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-body text-center text-sm font-normal sm:text-start\", className)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = \"AlertDialogDescription\";\n\n/**\n * A button that confirms the Alert Dialog action.\n * Will default to appearance=\"filled\", as well as the priority color from the `AlertDialog`.\n * Does not close the alert dialog by default.\n *\n * These buttons should be distinguished visually from the AlertDialogCancel button.\n *\n * Composes around the mantle Button component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogaction\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Action = forwardRef<ComponentRef<\"button\">, ButtonProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\tappearance = \"filled\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useAlertDialogContext();\n\t\tlet buttonPriority: NonNullable<ButtonPriority> = \"default\";\n\t\tif (ctx.priority === \"danger\") {\n\t\t\tbuttonPriority = \"danger\";\n\t\t}\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\t//\n\t\t\t\tappearance={appearance}\n\t\t\t\tpriority={buttonPriority}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAction.displayName = \"AlertDialogAction\";\n\n/**\n * A button that closes the dialog and cancels the action.\n * Will default to appearance=\"outlined\" and priority=\"neutral\".\n *\n * This button should be distinguished visually from AlertDialogAction buttons.\n *\n * Composes around the mantle Button component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcancel\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Cancel = forwardRef<ComponentRef<\"button\">, ButtonProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\tappearance = \"outlined\",\n\t\t\tclassName,\n\t\t\tpriority = \"neutral\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<AlertDialogPrimitive.Close asChild>\n\t\t\t<Button\n\t\t\t\tappearance={appearance}\n\t\t\t\tclassName={cx(\"mt-2 sm:mt-0\", className)}\n\t\t\t\tpriority={priority}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</AlertDialogPrimitive.Close>\n\t),\n);\nCancel.displayName = \"AlertDialogCancel\";\n\ntype AlertDialogIconProps = Omit<SvgAttributes, \"children\"> & {\n\tsvg?: ReactNode;\n};\n\n/**\n * An icon that visually represents the priority of the AlertDialog.\n *\n * Defaults to a warning icon for danger priority and an info icon for info\n * priority with the appropriate color.\n *\n * Can be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogicon\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, AlertDialogIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertDialogContext();\n\t\tconst defaultColor = ctx.priority === \"danger\" ? \"text-danger-600\" : \"text-accent-600\";\n\t\tconst defaultIcon = ctx.priority === \"danger\" ? <WarningIcon /> : <InfoIcon />;\n\n\t\treturn (\n\t\t\t<SvgOnly\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"size-12 sm:size-7\", defaultColor, className)}\n\t\t\t\tsvg={svg ?? defaultIcon}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nIcon.displayName = \"AlertDialogIcon\";\n\n/**\n * A button that closes the Alert Dialog. (Unstyled)\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogclose\n *\n * @example\n * ```tsx\n * <AlertDialog.Close asChild>\n *   <AlertDialog.Action\n *     type=\"button\"\n *     onClick={() => doThing()}\n *   >\n *     Do thing and close\n *   </AlertDialog.Action>\n * </AlertDialog.Close>\n */\nconst Close = AlertDialogPrimitive.Close;\nClose.displayName = \"AlertDialogClose\";\n\n/**\n * A modal dialog that interrupts the user with important content and expects a\n * response.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst AlertDialog = {\n\t/**\n\t * A modal dialog that interrupts the user with important content and expects a response.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Root priority=\"danger\">\n\t *   <AlertDialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Show Alert Dialog\n\t *     </Button>\n\t *   </AlertDialog.Trigger>\n\t *   <AlertDialog.Content>\n\t *     <AlertDialog.Icon />\n\t *     <AlertDialog.Body>\n\t *       <AlertDialog.Header>\n\t *         <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *         <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t *       </AlertDialog.Header>\n\t *       <AlertDialog.Footer>\n\t *         <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *         <AlertDialog.Action>Continue</AlertDialog.Action>\n\t *       </AlertDialog.Footer>\n\t *     </AlertDialog.Body>\n\t *   </AlertDialog.Content>\n\t * </AlertDialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A button that confirms the Alert Dialog action.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogaction\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *   <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tAction,\n\t/**\n\t * Contains the main content of the alert dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t *   <AlertDialog.Icon />\n\t *   <AlertDialog.Body>\n\t *     <AlertDialog.Header>\n\t *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t *     </AlertDialog.Header>\n\t *     <AlertDialog.Footer>\n\t *       <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *       <AlertDialog.Action>Continue</AlertDialog.Action>\n\t *     </AlertDialog.Footer>\n\t *   </AlertDialog.Body>\n\t * </AlertDialog.Content>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog and cancels the action.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcancel\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *   <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tCancel,\n\t/**\n\t * A button that closes the Alert Dialog. (Unstyled)\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Close asChild>\n\t *   <AlertDialog.Action\n\t *     type=\"button\"\n\t *     onClick={() => doThing()}\n\t *   >\n\t *     Do thing and close\n\t *   </AlertDialog.Action>\n\t * </AlertDialog.Close>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The popover alert dialog container.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t *   <AlertDialog.Icon />\n\t *   <AlertDialog.Body>\n\t *     <AlertDialog.Header>\n\t *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t *     </AlertDialog.Header>\n\t *     <AlertDialog.Footer>\n\t *       <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *       <AlertDialog.Action>Continue</AlertDialog.Action>\n\t *     </AlertDialog.Footer>\n\t *   </AlertDialog.Body>\n\t * </AlertDialog.Content>\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/alert-dialog#alertdialogdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including the action and cancel buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *   <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and description.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * An icon that visually represents the priority of the AlertDialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogicon\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t *   <AlertDialog.Icon />\n\t *   <AlertDialog.Body>\n\t *     <AlertDialog.Header>\n\t *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t *     </AlertDialog.Header>\n\t *   </AlertDialog.Body>\n\t * </AlertDialog.Content>\n\t * ```\n\t */\n\tIcon,\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/alert-dialog#alertdialogtitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the Alert Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Trigger asChild>\n\t *   <Button type=\"button\" appearance=\"outlined\">\n\t *     Show Alert Dialog\n\t *   </Button>\n\t * </AlertDialog.Trigger>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tAlertDialog,\n};\n"],"mappings":"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"}
+{"version":3,"file":"alert-dialog.js","names":["AlertDialogPrimitive.Root","AlertDialogPrimitive.Trigger","AlertDialogPrimitive.Portal","AlertDialogPrimitive.Overlay","AlertDialogPrimitive.Content","AlertDialogPrimitive.Title","AlertDialogPrimitive.Description","AlertDialogPrimitive.Close"],"sources":["../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Button, type ButtonPriority, type ButtonProps } from \"../button/button.js\";\nimport * as AlertDialogPrimitive from \"../dialog/primitive.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst priorities = [\"info\", \"danger\"] as const;\ntype Priority = (typeof priorities)[number];\n\ntype AlertDialogContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertDialogContext = createContext<AlertDialogContextValue | null>(null);\n\nfunction useAlertDialogContext() {\n\tconst context = useContext(AlertDialogContext);\n\tinvariant(context, \"AlertDialog child component used outside of AlertDialog parent!\");\n\treturn context;\n}\n\ntype AlertDialogProps = ComponentProps<typeof AlertDialogPrimitive.Root> & {\n\t/**\n\t * Indicates the importance or impact level of the AlertDialog, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n};\n\n/**\n * A modal dialog that interrupts the user with important content and expects a\n * response.\n * The root stateful component for the Alert Dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogroot\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nfunction Root({ priority, ...props }: AlertDialogProps) {\n\tconst context: AlertDialogContextValue = useMemo(() => ({ priority }), [priority]);\n\n\treturn (\n\t\t<AlertDialogContext.Provider value={context}>\n\t\t\t<AlertDialogPrimitive.Root {...props} />\n\t\t</AlertDialogContext.Provider>\n\t);\n}\nRoot.displayName = \"AlertDialog\";\n\n/**\n * A button that opens the Alert Dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtrigger\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Trigger = AlertDialogPrimitive.Trigger;\nTrigger.displayName = \"AlertDialogTrigger\";\n\n/**\n * The portal for the Alert Dialog.\n *\n * @private\n */\nconst AlertDialogPortal = AlertDialogPrimitive.Portal;\nAlertDialogPortal.displayName = \"AlertDialogPortal\";\n\n/**\n * A layer that covers the inert portion of the view when the dialog is open.\n *\n * @private\n */\nconst AlertDialogOverlay = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Overlay\n\t\tclassName={cx(\n\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 bg-overlay fixed inset-0 z-50 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t\tref={ref}\n\t/>\n));\nAlertDialogOverlay.displayName = \"AlertDialogOverlay\";\n\ntype AlertDialogContentProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `AlertDialogContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `AlertDialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `AlertDialogContent`\n\t *\n\t * @default `max-w-md`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The popover alert dialog container.\n *\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcontent\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Content>,\n\tAlertDialogContentProps\n>(({ className, preferredWidth = \"max-w-md\", ...props }, ref) => (\n\t<AlertDialogPortal>\n\t\t<AlertDialogOverlay />\n\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t<AlertDialogPrimitive.Content\n\t\t\t\tdata-mantle-modal-content\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start\",\n\t\t\t\t\t\"outline-hidden focus-within:outline-hidden\",\n\t\t\t\t\t\"p-6\",\n\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\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\tpreferredWidth,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t</AlertDialogPortal>\n));\nContent.displayName = \"AlertDialogContent\";\n\n/**\n * Contains the main content of the alert dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogbody\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Body = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn <Component className={cx(\"flex-1 space-y-4\", className)} ref={ref} {...props} />;\n\t},\n);\nBody.displayName = \"AlertDialogBody\";\n\n/**\n * Contains the header content of the dialog, including the title and description.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogheader\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Header = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\"flex flex-col space-y-2 text-center sm:text-start\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nHeader.displayName = \"AlertDialogHeader\";\n\n/**\n * Contains the footer content of the dialog, including the action and cancel buttons.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogfooter\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Footer = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nFooter.displayName = \"AlertDialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * Alternatively, you can provide `aria-label` or `aria-labelledby` to\n * `AlertDialogContent` and exclude this component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtitle\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong text-center text-lg font-medium sm:text-start\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"AlertDialogTitle\";\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 * Alternatively, you can provide `aria-describedby` to `AlertDialogContent` and\n * exclude this component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogdescription\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-body text-center text-sm font-normal sm:text-start\", className)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = \"AlertDialogDescription\";\n\n/**\n * A button that confirms the Alert Dialog action.\n * Will default to appearance=\"filled\", as well as the priority color from the `AlertDialog`.\n * Does not close the alert dialog by default.\n *\n * These buttons should be distinguished visually from the AlertDialogCancel button.\n *\n * Composes around the mantle Button component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogaction\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Action = forwardRef<ComponentRef<\"button\">, ButtonProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\tappearance = \"filled\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useAlertDialogContext();\n\t\tlet buttonPriority: NonNullable<ButtonPriority> = \"default\";\n\t\tif (ctx.priority === \"danger\") {\n\t\t\tbuttonPriority = \"danger\";\n\t\t}\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\t//\n\t\t\t\tappearance={appearance}\n\t\t\t\tpriority={buttonPriority}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAction.displayName = \"AlertDialogAction\";\n\n/**\n * A button that closes the dialog and cancels the action.\n * Will default to appearance=\"outlined\" and priority=\"neutral\".\n *\n * This button should be distinguished visually from AlertDialogAction buttons.\n *\n * Composes around the mantle Button component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcancel\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Cancel = forwardRef<ComponentRef<\"button\">, ButtonProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\tappearance = \"outlined\",\n\t\t\tclassName,\n\t\t\tpriority = \"neutral\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<AlertDialogPrimitive.Close asChild>\n\t\t\t<Button\n\t\t\t\tappearance={appearance}\n\t\t\t\tclassName={cx(\"mt-2 sm:mt-0\", className)}\n\t\t\t\tpriority={priority}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</AlertDialogPrimitive.Close>\n\t),\n);\nCancel.displayName = \"AlertDialogCancel\";\n\ntype AlertDialogIconProps = Omit<SvgAttributes, \"children\"> & {\n\tsvg?: ReactNode;\n};\n\n/**\n * An icon that visually represents the priority of the AlertDialog.\n *\n * Defaults to a warning icon for danger priority and an info icon for info\n * priority with the appropriate color.\n *\n * Can be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogicon\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, AlertDialogIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertDialogContext();\n\t\tconst defaultColor = ctx.priority === \"danger\" ? \"text-danger-600\" : \"text-accent-600\";\n\t\tconst defaultIcon = ctx.priority === \"danger\" ? <WarningIcon /> : <InfoIcon />;\n\n\t\treturn (\n\t\t\t<SvgOnly\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"size-12 sm:size-7\", defaultColor, className)}\n\t\t\t\tsvg={svg ?? defaultIcon}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nIcon.displayName = \"AlertDialogIcon\";\n\n/**\n * A button that closes the Alert Dialog. (Unstyled)\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogclose\n *\n * @example\n * ```tsx\n * <AlertDialog.Close asChild>\n *   <AlertDialog.Action\n *     type=\"button\"\n *     onClick={() => doThing()}\n *   >\n *     Do thing and close\n *   </AlertDialog.Action>\n * </AlertDialog.Close>\n */\nconst Close = AlertDialogPrimitive.Close;\nClose.displayName = \"AlertDialogClose\";\n\n/**\n * A modal dialog that interrupts the user with important content and expects a\n * response.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog\n *\n * @example\n * Composition:\n * ```\n * AlertDialog.Root\n * ├── AlertDialog.Trigger\n * └── AlertDialog.Content\n *     ├── AlertDialog.Icon\n *     └── AlertDialog.Body\n *         ├── AlertDialog.Header\n *         │   ├── AlertDialog.Title\n *         │   └── AlertDialog.Description\n *         └── AlertDialog.Footer\n *             ├── AlertDialog.Cancel\n *             └── AlertDialog.Action\n * ```\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst AlertDialog = {\n\t/**\n\t * A modal dialog that interrupts the user with important content and expects a response.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Root priority=\"danger\">\n\t *   <AlertDialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Show Alert Dialog\n\t *     </Button>\n\t *   </AlertDialog.Trigger>\n\t *   <AlertDialog.Content>\n\t *     <AlertDialog.Icon />\n\t *     <AlertDialog.Body>\n\t *       <AlertDialog.Header>\n\t *         <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *         <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t *       </AlertDialog.Header>\n\t *       <AlertDialog.Footer>\n\t *         <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *         <AlertDialog.Action>Continue</AlertDialog.Action>\n\t *       </AlertDialog.Footer>\n\t *     </AlertDialog.Body>\n\t *   </AlertDialog.Content>\n\t * </AlertDialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A button that confirms the Alert Dialog action.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogaction\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *   <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tAction,\n\t/**\n\t * Contains the main content of the alert dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t *   <AlertDialog.Icon />\n\t *   <AlertDialog.Body>\n\t *     <AlertDialog.Header>\n\t *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t *     </AlertDialog.Header>\n\t *     <AlertDialog.Footer>\n\t *       <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *       <AlertDialog.Action>Continue</AlertDialog.Action>\n\t *     </AlertDialog.Footer>\n\t *   </AlertDialog.Body>\n\t * </AlertDialog.Content>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog and cancels the action.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcancel\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *   <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tCancel,\n\t/**\n\t * A button that closes the Alert Dialog. (Unstyled)\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Close asChild>\n\t *   <AlertDialog.Action\n\t *     type=\"button\"\n\t *     onClick={() => doThing()}\n\t *   >\n\t *     Do thing and close\n\t *   </AlertDialog.Action>\n\t * </AlertDialog.Close>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The popover alert dialog container.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t *   <AlertDialog.Icon />\n\t *   <AlertDialog.Body>\n\t *     <AlertDialog.Header>\n\t *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t *     </AlertDialog.Header>\n\t *     <AlertDialog.Footer>\n\t *       <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *       <AlertDialog.Action>Continue</AlertDialog.Action>\n\t *     </AlertDialog.Footer>\n\t *   </AlertDialog.Body>\n\t * </AlertDialog.Content>\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/alert-dialog#alertdialogdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including the action and cancel buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *   <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and description.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * An icon that visually represents the priority of the AlertDialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogicon\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t *   <AlertDialog.Icon />\n\t *   <AlertDialog.Body>\n\t *     <AlertDialog.Header>\n\t *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t *     </AlertDialog.Header>\n\t *   </AlertDialog.Body>\n\t * </AlertDialog.Content>\n\t * ```\n\t */\n\tIcon,\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/alert-dialog#alertdialogtitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the Alert Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Trigger asChild>\n\t *   <Button type=\"button\" appearance=\"outlined\">\n\t *     Show Alert Dialog\n\t *   </Button>\n\t * </AlertDialog.Trigger>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tAlertDialog,\n};\n"],"mappings":"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"}

package/dist/alert.d.ts

@@ -44,6 +44,17 @@ type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "icon">> & {
  * @see https://mantle.ngrok.com/components/alert
  *
  * @example
+ * Composition:
+ * ```
+ * Alert.Root
+ * ├── Alert.Icon
+ * └── Alert.Content
+ *     ├── Alert.Title
+ *     ├── Alert.Description
+ *     └── Alert.DismissIconButton
+ * ```
+ *
+ * @example
  * ```tsx
  * <Alert priority="info">
  *   <AlertIcon />

package/dist/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":[],"sources":["../src/components/alert/alert.tsx"],"sourcesContent":["import { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { MegaphoneIcon } from \"@phosphor-icons/react/Megaphone\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport { XIcon } from \"@phosphor-icons/react/X\";\nimport { cva } from \"class-variance-authority\";\nimport type { ComponentProps, ComponentRef, HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, forwardRef, useContext, useMemo } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { $cssProperties, type WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"important\",\n\t\"info\",\n\t// \"neutral\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\nconst appearances = [\"banner\", \"default\"] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype AlertContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertContext = createContext<AlertContextValue | null>(null);\n\nfunction useAlertContext() {\n\tconst context = useContext(AlertContext);\n\tinvariant(context, \"useAlertContext hook used outside of Alert parent!\");\n\treturn context;\n}\n\nconst alertVariants = cva(\n\t\"relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * The priority of the Alert. Indicates the importance or impact level of the Alert,\n\t\t\t * affecting its color and styling to communicate its purpose to the user.\n\t\t\t */\n\t\t\tpriority: {\n\t\t\t\tdanger:\n\t\t\t\t\t\"border-danger-500/50 bg-danger-500/10 text-danger-700 [&_code]:bg-danger-500/10 [&_code]:border-danger-500/20 [&_code]:text-danger-900\",\n\t\t\t\timportant:\n\t\t\t\t\t\"border-important-500/50 bg-important-500/10 text-important-700 [&_code]:bg-important-500/10 [&_code]:border-important-500/20 [&_code]:text-important-900\",\n\t\t\t\tinfo: \"border-info-500/50 bg-info-500/10 text-info-700 [&_code]:bg-info-500/10 [&_code]:border-info-500/20 [&_code]:text-info-900\",\n\t\t\t\t// neutral: \"border-neutral-500/50 bg-neutral-500/10 text-neutral-700\",\n\t\t\t\tsuccess:\n\t\t\t\t\t\"border-success-500/50 bg-success-500/10 text-success-700 [&_code]:bg-success-500/10 [&_code]:border-success-500/20 [&_code]:text-success-900\",\n\t\t\t\twarning:\n\t\t\t\t\t\"border-warning-500/50 bg-warning-500/10 text-warning-700 [&_code]:bg-warning-500/10 [&_code]:border-warning-500/20 [&_code]:text-warning-900\",\n\t\t\t} as const satisfies Record<Priority, string>,\n\t\t\t/**\n\t\t\t * Controls the visual style of the Alert.\n\t\t\t * - \"default\" provides standard rounded corners and borders.\n\t\t\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t\t\t *\n\t\t\t * @default \"default\"\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tbanner: \"border-x-0 border-t-0 rounded-none z-50 sticky\",\n\t\t\t\tdefault: \"\",\n\t\t\t} as const satisfies Record<Appearance, string>,\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"important\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"info\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"success\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"warning\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t],\n\t},\n);\n\ntype AlertProps = ComponentProps<\"div\"> & {\n\t/**\n\t * Indicates the importance or impact level of the Alert, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n\t/**\n\t * Controls the visual style of the Alert.\n\t * - \"default\" provides standard rounded corners and borders.\n\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t *\n\t * @default \"default\"\n\t */\n\tappearance?: Appearance;\n};\n\n/**\n * Displays a callout for user attention. Root container for all Alert sub-components.\n *\n * @see https://mantle.ngrok.com/components/alert#alertroot\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *      <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, AlertProps>(\n\t({ appearance = \"default\", className, priority, ...props }, ref) => {\n\t\tconst context: AlertContextValue = useMemo(() => ({ priority }), [priority]);\n\n\t\treturn (\n\t\t\t<AlertContext.Provider value={context}>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(alertVariants({ appearance, priority }), className)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</AlertContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"Alert\";\n\ntype AlertIconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * An optional icon that renders in place of the default icon for the Alert priority.\n\t */\n\tsvg?: ReactNode;\n};\n\n/**\n * Default `<AlertIcon>` icons for each priority.\n */\nconst defaultIcons = {\n\tdanger: <WarningIcon />,\n\timportant: <MegaphoneIcon mirrored />,\n\tinfo: <InfoIcon />,\n\t// neutral: <BellRinging />,\n\tsuccess: <CheckCircleIcon />,\n\twarning: <WarningDiamondIcon />,\n} as const satisfies Record<Priority, ReactNode>;\n\n/**\n * An optional icon that visually represents the priority of the Alert.\n *\n * The default rendered icon be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alerticon\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, AlertIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertContext();\n\t\tconst defaultIcon = defaultIcons[ctx.priority];\n\n\t\treturn (\n\t\t\t<SvgOnly ref={ref} className={cx(\"size-5\", className)} svg={svg ?? defaultIcon} {...props} />\n\t\t);\n\t},\n);\nIcon.displayName = \"AlertIcon\";\n\n/**\n * The container for the content slot of an alert. Place the title and description as direct children.\n *\n * @see https://mantle.ngrok.com/components/alert#alertcontent\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"min-w-0 flex-1 has-data-alert-dismiss:pr-6\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nContent.displayName = \"AlertContent\";\n\ntype AlertTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of an alert. Default renders as an h5 element, use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/alert#alerttitle\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Title = forwardRef<HTMLHeadingElement, AlertTitleProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"h5\";\n\n\t\treturn <Component ref={ref} className={cx(\"font-medium\", className)} {...props} />;\n\t},\n);\nTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The optional description of an alert.\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/alert#alertdescription\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n * ```\n */\nconst Description = forwardRef<ComponentRef<\"div\">, AlertDescriptionProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn <Component ref={ref} className={cx(\"text-sm\", className)} {...props} />;\n\t},\n);\nDescription.displayName = \"AlertDescription\";\n\nconst dismissTextColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-700)`;\n\nconst dismissHoverColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-800)`;\n\nconst dismissHoverBgColor = <T extends Priority = Priority>(priority: T) =>\n\t`color-mix(in oklab, var(--color-${priority}-500) 10%, transparent)`;\n\ntype AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">> & {\n\t/**\n\t * An optional icon to render inside the dismiss button. Defaults to an X icon.\n\t */\n\ticon?: ReactNode;\n};\n\nconst DismissIconButton = ({\n\tsize = \"sm\",\n\ttype = \"button\",\n\tlabel = \"Dismiss Alert\",\n\tappearance = \"ghost\",\n\tclassName,\n\ticon = <XIcon />,\n\tstyle,\n\t...props\n}: AlertDismissIconButtonProps) => {\n\tconst ctx = useAlertContext();\n\treturn (\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={icon}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\tdata-alert-dismiss\n\t\t\tclassName={cx(\n\t\t\t\t\"right-1.5 top-1.5 absolute\",\n\t\t\t\t\"text-(--alert-dismiss-icon-color)\",\n\t\t\t\t\"not-disabled:hover:bg-(--alert-dismiss-hover-bg) not-disabled:hover:text-(--alert-dismiss-icon-hover-color)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\ttype={type}\n\t\t\tstyle={$cssProperties({\n\t\t\t\t...style,\n\t\t\t\t\"--alert-dismiss-icon-color\": dismissTextColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-icon-hover-color\": dismissHoverColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-hover-bg\": dismissHoverBgColor(ctx.priority),\n\t\t\t})}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nDismissIconButton.displayName = \"AlertDismissIconButton\";\n\n/**\n * Displays a callout for user attention.\n *\n * @see https://mantle.ngrok.com/components/alert\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *      <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Alert = {\n\t/**\n\t * The root container of the alert component.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for the content slot of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The optional description of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * An optional dismiss button that can be used to close the alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdismissiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.DismissIconButton />\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDismissIconButton,\n\t/**\n\t * An optional icon that visually represents the priority of the Alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerticon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The title of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerttitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tAlert,\n};\n"],"mappings":"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"}
+{"version":3,"file":"alert.js","names":[],"sources":["../src/components/alert/alert.tsx"],"sourcesContent":["import { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { MegaphoneIcon } from \"@phosphor-icons/react/Megaphone\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport { XIcon } from \"@phosphor-icons/react/X\";\nimport { cva } from \"class-variance-authority\";\nimport type { ComponentProps, ComponentRef, HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, forwardRef, useContext, useMemo } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { $cssProperties, type WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"important\",\n\t\"info\",\n\t// \"neutral\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\nconst appearances = [\"banner\", \"default\"] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype AlertContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertContext = createContext<AlertContextValue | null>(null);\n\nfunction useAlertContext() {\n\tconst context = useContext(AlertContext);\n\tinvariant(context, \"useAlertContext hook used outside of Alert parent!\");\n\treturn context;\n}\n\nconst alertVariants = cva(\n\t\"relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * The priority of the Alert. Indicates the importance or impact level of the Alert,\n\t\t\t * affecting its color and styling to communicate its purpose to the user.\n\t\t\t */\n\t\t\tpriority: {\n\t\t\t\tdanger:\n\t\t\t\t\t\"border-danger-500/50 bg-danger-500/10 text-danger-700 [&_code]:bg-danger-500/10 [&_code]:border-danger-500/20 [&_code]:text-danger-900\",\n\t\t\t\timportant:\n\t\t\t\t\t\"border-important-500/50 bg-important-500/10 text-important-700 [&_code]:bg-important-500/10 [&_code]:border-important-500/20 [&_code]:text-important-900\",\n\t\t\t\tinfo: \"border-info-500/50 bg-info-500/10 text-info-700 [&_code]:bg-info-500/10 [&_code]:border-info-500/20 [&_code]:text-info-900\",\n\t\t\t\t// neutral: \"border-neutral-500/50 bg-neutral-500/10 text-neutral-700\",\n\t\t\t\tsuccess:\n\t\t\t\t\t\"border-success-500/50 bg-success-500/10 text-success-700 [&_code]:bg-success-500/10 [&_code]:border-success-500/20 [&_code]:text-success-900\",\n\t\t\t\twarning:\n\t\t\t\t\t\"border-warning-500/50 bg-warning-500/10 text-warning-700 [&_code]:bg-warning-500/10 [&_code]:border-warning-500/20 [&_code]:text-warning-900\",\n\t\t\t} as const satisfies Record<Priority, string>,\n\t\t\t/**\n\t\t\t * Controls the visual style of the Alert.\n\t\t\t * - \"default\" provides standard rounded corners and borders.\n\t\t\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t\t\t *\n\t\t\t * @default \"default\"\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tbanner: \"border-x-0 border-t-0 rounded-none z-50 sticky\",\n\t\t\t\tdefault: \"\",\n\t\t\t} as const satisfies Record<Appearance, string>,\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"important\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"info\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"success\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"warning\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t],\n\t},\n);\n\ntype AlertProps = ComponentProps<\"div\"> & {\n\t/**\n\t * Indicates the importance or impact level of the Alert, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n\t/**\n\t * Controls the visual style of the Alert.\n\t * - \"default\" provides standard rounded corners and borders.\n\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t *\n\t * @default \"default\"\n\t */\n\tappearance?: Appearance;\n};\n\n/**\n * Displays a callout for user attention. Root container for all Alert sub-components.\n *\n * @see https://mantle.ngrok.com/components/alert#alertroot\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *      <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, AlertProps>(\n\t({ appearance = \"default\", className, priority, ...props }, ref) => {\n\t\tconst context: AlertContextValue = useMemo(() => ({ priority }), [priority]);\n\n\t\treturn (\n\t\t\t<AlertContext.Provider value={context}>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(alertVariants({ appearance, priority }), className)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</AlertContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"Alert\";\n\ntype AlertIconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * An optional icon that renders in place of the default icon for the Alert priority.\n\t */\n\tsvg?: ReactNode;\n};\n\n/**\n * Default `<AlertIcon>` icons for each priority.\n */\nconst defaultIcons = {\n\tdanger: <WarningIcon />,\n\timportant: <MegaphoneIcon mirrored />,\n\tinfo: <InfoIcon />,\n\t// neutral: <BellRinging />,\n\tsuccess: <CheckCircleIcon />,\n\twarning: <WarningDiamondIcon />,\n} as const satisfies Record<Priority, ReactNode>;\n\n/**\n * An optional icon that visually represents the priority of the Alert.\n *\n * The default rendered icon be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alerticon\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, AlertIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertContext();\n\t\tconst defaultIcon = defaultIcons[ctx.priority];\n\n\t\treturn (\n\t\t\t<SvgOnly ref={ref} className={cx(\"size-5\", className)} svg={svg ?? defaultIcon} {...props} />\n\t\t);\n\t},\n);\nIcon.displayName = \"AlertIcon\";\n\n/**\n * The container for the content slot of an alert. Place the title and description as direct children.\n *\n * @see https://mantle.ngrok.com/components/alert#alertcontent\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"min-w-0 flex-1 has-data-alert-dismiss:pr-6\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nContent.displayName = \"AlertContent\";\n\ntype AlertTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of an alert. Default renders as an h5 element, use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/alert#alerttitle\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Title = forwardRef<HTMLHeadingElement, AlertTitleProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"h5\";\n\n\t\treturn <Component ref={ref} className={cx(\"font-medium\", className)} {...props} />;\n\t},\n);\nTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The optional description of an alert.\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/alert#alertdescription\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n * ```\n */\nconst Description = forwardRef<ComponentRef<\"div\">, AlertDescriptionProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn <Component ref={ref} className={cx(\"text-sm\", className)} {...props} />;\n\t},\n);\nDescription.displayName = \"AlertDescription\";\n\nconst dismissTextColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-700)`;\n\nconst dismissHoverColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-800)`;\n\nconst dismissHoverBgColor = <T extends Priority = Priority>(priority: T) =>\n\t`color-mix(in oklab, var(--color-${priority}-500) 10%, transparent)`;\n\ntype AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">> & {\n\t/**\n\t * An optional icon to render inside the dismiss button. Defaults to an X icon.\n\t */\n\ticon?: ReactNode;\n};\n\nconst DismissIconButton = ({\n\tsize = \"sm\",\n\ttype = \"button\",\n\tlabel = \"Dismiss Alert\",\n\tappearance = \"ghost\",\n\tclassName,\n\ticon = <XIcon />,\n\tstyle,\n\t...props\n}: AlertDismissIconButtonProps) => {\n\tconst ctx = useAlertContext();\n\treturn (\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={icon}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\tdata-alert-dismiss\n\t\t\tclassName={cx(\n\t\t\t\t\"right-1.5 top-1.5 absolute\",\n\t\t\t\t\"text-(--alert-dismiss-icon-color)\",\n\t\t\t\t\"not-disabled:hover:bg-(--alert-dismiss-hover-bg) not-disabled:hover:text-(--alert-dismiss-icon-hover-color)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\ttype={type}\n\t\t\tstyle={$cssProperties({\n\t\t\t\t...style,\n\t\t\t\t\"--alert-dismiss-icon-color\": dismissTextColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-icon-hover-color\": dismissHoverColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-hover-bg\": dismissHoverBgColor(ctx.priority),\n\t\t\t})}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nDismissIconButton.displayName = \"AlertDismissIconButton\";\n\n/**\n * Displays a callout for user attention.\n *\n * @see https://mantle.ngrok.com/components/alert\n *\n * @example\n * Composition:\n * ```\n * Alert.Root\n * ├── Alert.Icon\n * └── Alert.Content\n *     ├── Alert.Title\n *     ├── Alert.Description\n *     └── Alert.DismissIconButton\n * ```\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *      <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Alert = {\n\t/**\n\t * The root container of the alert component.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for the content slot of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The optional description of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * An optional dismiss button that can be used to close the alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdismissiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.DismissIconButton />\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDismissIconButton,\n\t/**\n\t * An optional icon that visually represents the priority of the Alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerticon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The title of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerttitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tAlert,\n};\n"],"mappings":"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"}

package/dist/card.d.ts

@@ -12,6 +12,16 @@ type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;
  * @see https://mantle.ngrok.com/components/card
  *
  * @example
+ * Composition:
+ * ```
+ * Card.Root
+ * ├── Card.Header
+ * │   └── Card.Title
+ * ├── Card.Body
+ * └── Card.Footer
+ * ```
+ *
+ * @example
  * ```tsx
  * <Card.Root>
  *   <Card.Body>

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../src/components/card/card.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype CardProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A container that can be used to display content in a box resembling a\n * physical card. The root component of the all Card components.\n *\n * @see https://mantle.ngrok.com/components/card#cardroot\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"border-card bg-card relative rounded-md border\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"Card\";\n\n/**\n * The main content of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#cardbody\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Body = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"p-6 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nBody.displayName = \"CardBody\";\n\n/**\n * The footer container of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#cardfooter\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Footer = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"px-6 py-3 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nFooter.displayName = \"CardFooter\";\n\n/**\n * The header container of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#cardheader\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Header = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"px-6 py-3 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nHeader.displayName = \"CardHeader\";\n\ntype CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of a card. Usually composed as a direct child of a `Card.Header`\n * component.\n * Renders as an `h3` element by default, but can be changed to any other\n * element by using the `asChild` prop. It is preferred to use a heading element\n * (h1-h6) for accessibility reasons.\n *\n * @see https://mantle.ngrok.com/components/card#cardtitle\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Title = forwardRef<HTMLHeadingElement, CardTitleProps>(\n\t({ className, asChild, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"h3\";\n\t\treturn (\n\t\t\t<Comp ref={ref} className={cx(\"text-strong text-base font-medium\", className)} {...props} />\n\t\t);\n\t},\n);\nTitle.displayName = \"CardTitle\";\n\n/**\n * A container that can be used to display content in a box resembling a\n * physical card.\n *\n * @see https://mantle.ngrok.com/components/card\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Card = {\n\t/**\n\t * A container that can be used to display content in a box resembling a physical card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t * </Card.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The main content of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t * </Card.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The footer container of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Header>\n\t *     <Card.Title>Card Title Here</Card.Title>\n\t *   </Card.Header>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t *   <Card.Footer>\n\t *     <p>Card footer</p>\n\t *   </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * The header container of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Header>\n\t *     <Card.Title>Card Title Here</Card.Title>\n\t *   </Card.Header>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t *   <Card.Footer>\n\t *     <p>Card footer</p>\n\t *   </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The title of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardtitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Header>\n\t *     <Card.Title>Card Title Here</Card.Title>\n\t *   </Card.Header>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t *   <Card.Footer>\n\t *     <p>Card footer</p>\n\t *   </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tCard,\n};\n\nexport type {\n\t//,\n\tCardProps,\n\tCardTitleProps,\n};\n"],"mappings":"kJAmCA,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,UAAW,EAAG,iDAAkD,EAAU,CAC1E,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAK,YAAc,OA4BnB,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,UAAW,EAAG,kDAAmD,EAAU,CAC3E,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAK,YAAc,WAsBnB,MAAM,EAAS,GACb,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,UAAW,EAAG,wDAAyD,EAAU,CACjF,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAO,YAAc,aAsBrB,MAAM,EAAS,GACb,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,UAAW,EAAG,wDAAyD,EAAU,CACjF,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAO,YAAc,aA4BrB,MAAM,EAAQ,GACZ,CAAE,YAAW,UAAS,GAAG,GAAS,IAGjC,EAFY,EAAU,EAAO,KAE7B,CAAW,MAAK,UAAW,EAAG,oCAAqC,EAAU,CAAE,GAAI,EAAS,CAAA,CAG9F,CACD,EAAM,YAAc,YA6BpB,MAAM,EAAO,CAeZ,OAeA,OAqBA,SAqBA,SAqBA,QACA"}
+{"version":3,"file":"card.js","names":[],"sources":["../src/components/card/card.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype CardProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A container that can be used to display content in a box resembling a\n * physical card. The root component of the all Card components.\n *\n * @see https://mantle.ngrok.com/components/card#cardroot\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"border-card bg-card relative rounded-md border\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"Card\";\n\n/**\n * The main content of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#cardbody\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Body = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"p-6 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nBody.displayName = \"CardBody\";\n\n/**\n * The footer container of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#cardfooter\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Footer = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"px-6 py-3 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nFooter.displayName = \"CardFooter\";\n\n/**\n * The header container of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#cardheader\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Header = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"px-6 py-3 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nHeader.displayName = \"CardHeader\";\n\ntype CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of a card. Usually composed as a direct child of a `Card.Header`\n * component.\n * Renders as an `h3` element by default, but can be changed to any other\n * element by using the `asChild` prop. It is preferred to use a heading element\n * (h1-h6) for accessibility reasons.\n *\n * @see https://mantle.ngrok.com/components/card#cardtitle\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Title = forwardRef<HTMLHeadingElement, CardTitleProps>(\n\t({ className, asChild, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"h3\";\n\t\treturn (\n\t\t\t<Comp ref={ref} className={cx(\"text-strong text-base font-medium\", className)} {...props} />\n\t\t);\n\t},\n);\nTitle.displayName = \"CardTitle\";\n\n/**\n * A container that can be used to display content in a box resembling a\n * physical card.\n *\n * @see https://mantle.ngrok.com/components/card\n *\n * @example\n * Composition:\n * ```\n * Card.Root\n * ├── Card.Header\n * │   └── Card.Title\n * ├── Card.Body\n * └── Card.Footer\n * ```\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Card = {\n\t/**\n\t * A container that can be used to display content in a box resembling a physical card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t * </Card.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The main content of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t * </Card.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The footer container of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Header>\n\t *     <Card.Title>Card Title Here</Card.Title>\n\t *   </Card.Header>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t *   <Card.Footer>\n\t *     <p>Card footer</p>\n\t *   </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * The header container of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Header>\n\t *     <Card.Title>Card Title Here</Card.Title>\n\t *   </Card.Header>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t *   <Card.Footer>\n\t *     <p>Card footer</p>\n\t *   </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The title of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardtitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Header>\n\t *     <Card.Title>Card Title Here</Card.Title>\n\t *   </Card.Header>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t *   <Card.Footer>\n\t *     <p>Card footer</p>\n\t *   </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tCard,\n};\n\nexport type {\n\t//,\n\tCardProps,\n\tCardTitleProps,\n};\n"],"mappings":"kJAmCA,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,UAAW,EAAG,iDAAkD,EAAU,CAC1E,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAK,YAAc,OA4BnB,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,UAAW,EAAG,kDAAmD,EAAU,CAC3E,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAK,YAAc,WAsBnB,MAAM,EAAS,GACb,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,UAAW,EAAG,wDAAyD,EAAU,CACjF,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAO,YAAc,aAsBrB,MAAM,EAAS,GACb,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,UAAW,EAAG,wDAAyD,EAAU,CACjF,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAO,YAAc,aA4BrB,MAAM,EAAQ,GACZ,CAAE,YAAW,UAAS,GAAG,GAAS,IAGjC,EAFY,EAAU,EAAO,KAE7B,CAAW,MAAK,UAAW,EAAG,oCAAqC,EAAU,CAAE,GAAI,EAAS,CAAA,CAG9F,CACD,EAAM,YAAc,YAuCpB,MAAM,EAAO,CAeZ,OAeA,OAqBA,SAqBA,SAqBA,QACA"}

package/dist/checkbox.d.ts

@@ -19,7 +19,7 @@ type CheckedState = boolean | "indeterminate";
  * </form>
  * ```
  */
-declare const Checkbox: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | "defaultChecked" | "checked"> & WithValidation & {
+declare const Checkbox: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "defaultChecked" | "type" | "checked"> & WithValidation & {
   /**
    * The controlled checked state of the checkbox. Must be used in conjunction with onChange.
    */