@ngrok/mantle 0.51.1 → 0.51.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/accordion.d.ts +151 -138
  2. package/dist/accordion.js +1 -1
  3. package/dist/accordion.js.map +1 -1
  4. package/dist/dialog.js.map +1 -1
  5. package/package.json +5 -5
package/dist/accordion.d.ts CHANGED
@@ -7,13 +7,12 @@ import './types-BuKAGhC-.js';
7
7
 
8
8
  /**
9
9
  * A vertically stacked set of interactive headings that each reveal a section of content.
10
- * The root component that contains all accordion items.
11
10
  *
12
- * @see https://mantle.ngrok.com/components/accordion#api-accordion
11
+ * @see https://mantle.ngrok.com/components/accordion
13
12
  *
14
13
  * @example
15
14
  * ```tsx
16
- * <Accordion type="single" collapsible>
15
+ * <Accordion.Root type="single" collapsible>
17
16
  * <Accordion.Item value="item-1">
18
17
  * <Accordion.Heading>
19
18
  * <Accordion.Trigger>
@@ -25,143 +24,157 @@ import './types-BuKAGhC-.js';
25
24
  * Yes. It adheres to the WAI-ARIA design pattern.
26
25
  * </Accordion.Content>
27
26
  * </Accordion.Item>
28
- * </Accordion>
27
+ * </Accordion.Root>
29
28
  * ```
30
29
  */
31
- declare const Root: react.ForwardRefExoticComponent<ComponentPropsWithoutRef<react.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & react.RefAttributes<HTMLDivElement>>> & react.RefAttributes<HTMLDivElement>>;
32
- /**
33
- * Contains all the parts of a collapsible section.
34
- * A single accordion item that can be expanded or collapsed.
35
- *
36
- * @see https://mantle.ngrok.com/components/accordion#api-accordion-item
37
- *
38
- * @example
39
- * ```tsx
40
- * <Accordion type="single" collapsible>
41
- * <Accordion.Item value="item-1">
42
- * <Accordion.Heading>
43
- * <Accordion.Trigger>
44
- * <Accordion.TriggerIcon />
45
- * Is it accessible?
46
- * </Accordion.Trigger>
47
- * </Accordion.Heading>
48
- * <Accordion.Content>
49
- * Yes. It adheres to the WAI-ARIA design pattern.
50
- * </Accordion.Content>
51
- * </Accordion.Item>
52
- * </Accordion>
53
- * ```
54
- */
55
- declare const Item: react.ForwardRefExoticComponent<AccordionPrimitive.AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
56
- /**
57
- * Wraps an AccordionTrigger.
58
- * Contains the accordion trigger and provides proper heading semantics.
59
- *
60
- * @see https://mantle.ngrok.com/components/accordion#api-accordion-heading
61
- *
62
- * @example
63
- * ```tsx
64
- * <Accordion type="single" collapsible>
65
- * <Accordion.Item value="item-1">
66
- * <Accordion.Heading>
67
- * <Accordion.Trigger>
68
- * <Accordion.TriggerIcon />
69
- * Is it accessible?
70
- * </Accordion.Trigger>
71
- * </Accordion.Heading>
72
- * <Accordion.Content>
73
- * Yes. It adheres to the WAI-ARIA design pattern.
74
- * </Accordion.Content>
75
- * </Accordion.Item>
76
- * </Accordion>
77
- * ```
78
- */
79
- declare const Heading: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionHeaderProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
80
- /**
81
- * Toggles the collapsed state of its associated item.
82
- * The interactive element that expands or collapses the accordion content.
83
- *
84
- * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger
85
- *
86
- * @example
87
- * ```tsx
88
- * <Accordion type="single" collapsible>
89
- * <Accordion.Item value="item-1">
90
- * <Accordion.Heading>
91
- * <Accordion.Trigger>
92
- * <Accordion.TriggerIcon />
93
- * Is it accessible?
94
- * </Accordion.Trigger>
95
- * </Accordion.Heading>
96
- * <Accordion.Content>
97
- * Yes. It adheres to the WAI-ARIA design pattern.
98
- * </Accordion.Content>
99
- * </Accordion.Item>
100
- * </Accordion>
101
- * ```
102
- */
103
- declare const Trigger: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
104
- /**
105
- * An icon that indicates the expanded/collapsed state of the accordion trigger.
106
- * Rotates based on the accordion item state to provide visual feedback.
107
- *
108
- * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger-icon
109
- *
110
- * @example
111
- * ```tsx
112
- * <Accordion type="single" collapsible>
113
- * <Accordion.Item value="item-1">
114
- * <Accordion.Heading>
115
- * <Accordion.Trigger>
116
- * <Accordion.TriggerIcon />
117
- * Is it accessible?
118
- * </Accordion.Trigger>
119
- * </Accordion.Heading>
120
- * <Accordion.Content>
121
- * Yes. It adheres to the WAI-ARIA design pattern.
122
- * </Accordion.Content>
123
- * </Accordion.Item>
124
- * </Accordion>
125
- * ```
126
- */
127
- declare const TriggerIcon: {
128
- ({ className, ...props }: Omit<IconProps, "svg">): react_jsx_runtime.JSX.Element;
129
- displayName: string;
130
- };
131
- /**
132
- * Contains the collapsible content for an item.
133
- * The content area that is revealed when the accordion item is expanded.
134
- *
135
- * @see https://mantle.ngrok.com/components/accordion#api-accordion-content
136
- *
137
- * @example
138
- * ```tsx
139
- * <Accordion type="single" collapsible>
140
- * <Accordion.Item value="item-1">
141
- * <Accordion.Heading>
142
- * <Accordion.Trigger>
143
- * <Accordion.TriggerIcon />
144
- * Is it accessible?
145
- * </Accordion.Trigger>
146
- * </Accordion.Heading>
147
- * <Accordion.Content>
148
- * Yes. It adheres to the WAI-ARIA design pattern.
149
- * </Accordion.Content>
150
- * </Accordion.Item>
151
- * </Accordion>
152
- * ```
153
- */
154
- declare const Content: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
155
- /**
156
- * An accordion namespace object that contains the accordion components.
157
- */
158
- declare const Accordion: typeof Root & {
159
- Root: typeof Root;
160
- Content: typeof Content;
161
- Heading: typeof Heading;
162
- Item: typeof Item;
163
- Trigger: typeof Trigger;
164
- TriggerIcon: typeof TriggerIcon;
30
+ declare const Accordion: {
31
+ /**
32
+ * A vertically stacked set of interactive headings that each reveal a section of content.
33
+ * The root component that contains all accordion items.
34
+ *
35
+ * @see https://mantle.ngrok.com/components/accordion#api-accordion
36
+ *
37
+ * @example
38
+ * ```tsx
39
+ * <Accordion.Root type="single" collapsible>
40
+ * <Accordion.Item value="item-1">
41
+ * <Accordion.Heading>
42
+ * <Accordion.Trigger>
43
+ * <Accordion.TriggerIcon />
44
+ * Is it accessible?
45
+ * </Accordion.Trigger>
46
+ * </Accordion.Heading>
47
+ * <Accordion.Content>
48
+ * Yes. It adheres to the WAI-ARIA design pattern.
49
+ * </Accordion.Content>
50
+ * </Accordion.Item>
51
+ * </Accordion.Root>
52
+ * ```
53
+ */
54
+ readonly Root: react.ForwardRefExoticComponent<ComponentPropsWithoutRef<react.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & react.RefAttributes<HTMLDivElement>>> & react.RefAttributes<HTMLDivElement>>;
55
+ /**
56
+ * Contains the collapsible content for an item.
57
+ * The content area that is revealed when the accordion item is expanded.
58
+ *
59
+ * @see https://mantle.ngrok.com/components/accordion#api-accordion-content
60
+ *
61
+ * @example
62
+ * ```tsx
63
+ * <Accordion.Root type="single" collapsible>
64
+ * <Accordion.Item value="item-1">
65
+ * <Accordion.Heading>
66
+ * <Accordion.Trigger>
67
+ * <Accordion.TriggerIcon />
68
+ * Is it accessible?
69
+ * </Accordion.Trigger>
70
+ * </Accordion.Heading>
71
+ * <Accordion.Content>
72
+ * Yes. It adheres to the WAI-ARIA design pattern.
73
+ * </Accordion.Content>
74
+ * </Accordion.Item>
75
+ * </Accordion.Root>
76
+ * ```
77
+ */
78
+ readonly Content: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
79
+ /**
80
+ * Wraps an AccordionTrigger.
81
+ * Contains the accordion trigger and provides proper heading semantics.
82
+ *
83
+ * @see https://mantle.ngrok.com/components/accordion#api-accordion-heading
84
+ *
85
+ * @example
86
+ * ```tsx
87
+ * <Accordion.Root type="single" collapsible>
88
+ * <Accordion.Item value="item-1">
89
+ * <Accordion.Heading>
90
+ * <Accordion.Trigger>
91
+ * <Accordion.TriggerIcon />
92
+ * Is it accessible?
93
+ * </Accordion.Trigger>
94
+ * </Accordion.Heading>
95
+ * <Accordion.Content>
96
+ * Yes. It adheres to the WAI-ARIA design pattern.
97
+ * </Accordion.Content>
98
+ * </Accordion.Item>
99
+ * </Accordion.Root>
100
+ * ```
101
+ */
102
+ readonly Heading: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionHeaderProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
103
+ /**
104
+ * Contains all the parts of a collapsible section.
105
+ * A single accordion item that can be expanded or collapsed.
106
+ *
107
+ * @see https://mantle.ngrok.com/components/accordion#api-accordion-item
108
+ *
109
+ * @example
110
+ * ```tsx
111
+ * <Accordion.Root type="single" collapsible>
112
+ * <Accordion.Item value="item-1">
113
+ * <Accordion.Heading>
114
+ * <Accordion.Trigger>
115
+ * <Accordion.TriggerIcon />
116
+ * Is it accessible?
117
+ * </Accordion.Trigger>
118
+ * </Accordion.Heading>
119
+ * <Accordion.Content>
120
+ * Yes. It adheres to the WAI-ARIA design pattern.
121
+ * </Accordion.Content>
122
+ * </Accordion.Item>
123
+ * </Accordion.Root>
124
+ * ```
125
+ */
126
+ readonly Item: react.ForwardRefExoticComponent<AccordionPrimitive.AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
127
+ /**
128
+ * Toggles the collapsed state of its associated item.
129
+ * The interactive element that expands or collapses the accordion content.
130
+ *
131
+ * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger
132
+ *
133
+ * @example
134
+ * ```tsx
135
+ * <Accordion.Root type="single" collapsible>
136
+ * <Accordion.Item value="item-1">
137
+ * <Accordion.Heading>
138
+ * <Accordion.Trigger>
139
+ * <Accordion.TriggerIcon />
140
+ * Is it accessible?
141
+ * </Accordion.Trigger>
142
+ * </Accordion.Heading>
143
+ * <Accordion.Content>
144
+ * Yes. It adheres to the WAI-ARIA design pattern.
145
+ * </Accordion.Content>
146
+ * </Accordion.Item>
147
+ * </Accordion.Root>
148
+ * ```
149
+ */
150
+ readonly Trigger: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
151
+ /**
152
+ * An icon that indicates the expanded/collapsed state of the accordion trigger.
153
+ * Rotates based on the accordion item state to provide visual feedback.
154
+ *
155
+ * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger-icon
156
+ *
157
+ * @example
158
+ * ```tsx
159
+ * <Accordion.Root type="single" collapsible>
160
+ * <Accordion.Item value="item-1">
161
+ * <Accordion.Heading>
162
+ * <Accordion.Trigger>
163
+ * <Accordion.TriggerIcon />
164
+ * Is it accessible?
165
+ * </Accordion.Trigger>
166
+ * </Accordion.Heading>
167
+ * <Accordion.Content>
168
+ * Yes. It adheres to the WAI-ARIA design pattern.
169
+ * </Accordion.Content>
170
+ * </Accordion.Item>
171
+ * </Accordion.Root>
172
+ * ```
173
+ */
174
+ readonly TriggerIcon: {
175
+ ({ className, ...props }: Omit<IconProps, "svg">): react_jsx_runtime.JSX.Element;
176
+ displayName: string;
177
+ };
165
178
  };
166
179
 
167
180
  export { Accordion };
package/dist/accordion.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as d}from"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as n}from"./chunk-AZ56JGNY.js";import{CaretDownIcon as A}from"@phosphor-icons/react/CaretDown";import*as o from"@radix-ui/react-accordion";import{forwardRef as m}from"react";import{jsx as c}from"react/jsx-runtime";var a=m(({className:e,...t},i)=>c(o.Root,{ref:i,className:n("w-full space-y-2.5",e),...t}));a.displayName="Accordion";var s=o.Item;s.displayName="AccordionItem";var f=m(({className:e,...t},i)=>c(o.Header,{ref:i,className:n("flex items-center gap-2",e),...t}));f.displayName="AccordionHeading";var g=m(({className:e,children:t,...i},p)=>c(o.Trigger,{ref:p,className:n("group flex items-center gap-1.5",e),...i,children:t}));g.displayName="AccordionTrigger";var y=({className:e,...t})=>c(d,{...t,svg:c(A,{weight:"fill"}),className:n("group-data-state-open:rotate-0 -rotate-90",e)});y.displayName="AccordionTriggerIcon";var l=m(({className:e,children:t,...i},p)=>c(o.Content,{ref:p,className:n("data-state-closed:animate-accordion-up data-state-open:animate-accordion-down overflow-hidden pt-4",e),...i,children:t}));l.displayName="AccordionContent";var r=a;r.Root=a;r.Content=l;r.Heading=f;r.Item=s;r.Trigger=g;r.TriggerIcon=y;export{r as Accordion};
1
+ import{a}from"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as r}from"./chunk-AZ56JGNY.js";import{CaretDownIcon as A}from"@phosphor-icons/react/CaretDown";import*as o from"@radix-ui/react-accordion";import{forwardRef as c}from"react";import{jsx as n}from"react/jsx-runtime";var p=c(({className:e,...i},t)=>n(o.Root,{ref:t,className:r("w-full space-y-2.5",e),...i}));p.displayName="Accordion";var d=o.Item;d.displayName="AccordionItem";var s=c(({className:e,...i},t)=>n(o.Header,{ref:t,className:r("flex items-center gap-2",e),...i}));s.displayName="AccordionHeading";var f=c(({className:e,children:i,...t},m)=>n(o.Trigger,{ref:m,className:r("group flex items-center gap-1.5",e),...t,children:i}));f.displayName="AccordionTrigger";var g=({className:e,...i})=>n(a,{...i,svg:n(A,{weight:"fill"}),className:r("group-data-state-open:rotate-0 -rotate-90",e)});g.displayName="AccordionTriggerIcon";var l=c(({className:e,children:i,...t},m)=>n(o.Content,{ref:m,className:r("data-state-closed:animate-accordion-up data-state-open:animate-accordion-down overflow-hidden pt-4",e),...t,children:i}));l.displayName="AccordionContent";var P={Root:p,Content:l,Heading:s,Item:d,Trigger:f,TriggerIcon:g};export{P as Accordion};
2
2
  //# sourceMappingURL=accordion.js.map
package/dist/accordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"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 {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} 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 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>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Root>\n>(({ className, ...props }, ref) => (\n\t<AccordionPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cx(\"w-full space-y-2.5\", className)}\n\t\t{...props}\n\t/>\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 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>\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 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>\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 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>\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 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>\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 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>\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 pt-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 * An accordion namespace object that contains the accordion components.\n */\nconst Accordion = Root as typeof Root & {\n\tRoot: typeof Root;\n\tContent: typeof Content;\n\tHeading: typeof Heading;\n\tItem: typeof Item;\n\tTrigger: typeof Trigger;\n\tTriggerIcon: typeof TriggerIcon;\n};\nAccordion.Root = Root;\nAccordion.Content = Content;\nAccordion.Heading = Heading;\nAccordion.Item = Item;\nAccordion.Trigger = Trigger;\nAccordion.TriggerIcon = TriggerIcon;\n\nexport {\n\t//,\n\tAccordion,\n};\n"],"mappings":"4GAEA,OAAS,iBAAAA,MAAqB,kCAC9B,UAAYC,MAAwB,4BACpC,OAGC,cAAAC,MACM,QA+BN,cAAAC,MAAA,oBAJD,IAAMC,EAAOC,EAGX,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BL,EAAoB,OAAnB,CACA,IAAKK,EACL,UAAWC,EAAG,qBAAsBH,CAAS,EAC5C,GAAGC,EACL,CACA,EACDH,EAAK,YAAc,YAyBnB,IAAMM,EAA0B,OAChCA,EAAK,YAAc,gBAyBnB,IAAMC,EAAUN,EAGd,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BL,EAAoB,SAAnB,CACA,IAAKK,EACL,UAAWC,EAAG,0BAA2BH,CAAS,EACjD,GAAGC,EACL,CACA,EACDI,EAAQ,YAAc,mBAyBtB,IAAMC,EAAUP,EAGd,CAAC,CAAE,UAAAC,EAAW,SAAAO,EAAU,GAAGN,CAAM,EAAGC,IACrCL,EAAoB,UAAnB,CACA,IAAKK,EACL,UAAWC,EAAG,kCAAmCH,CAAS,EACzD,GAAGC,EAEH,SAAAM,EACF,CACA,EACDD,EAAQ,YAAc,mBAyBtB,IAAME,EAAc,CAAC,CAAE,UAAAR,EAAW,GAAGC,CAAM,IAC1CJ,EAACY,EAAA,CACC,GAAGR,EACJ,IAAKJ,EAACa,EAAA,CAAc,OAAO,OAAO,EAClC,UAAWP,EAAG,4CAA6CH,CAAS,EACrE,EAEDQ,EAAY,YAAc,uBAyB1B,IAAMG,EAAUZ,EAGd,CAAC,CAAE,UAAAC,EAAW,SAAAO,EAAU,GAAGN,CAAM,EAAGC,IACrCL,EAAoB,UAAnB,CACA,IAAKK,EACL,UAAWC,EACV,qGACAH,CACD,EACC,GAAGC,EAEH,SAAAM,EACF,CACA,EACDI,EAAQ,YAAc,mBAKtB,IAAMC,EAAYd,EAQlBc,EAAU,KAAOd,EACjBc,EAAU,QAAUD,EACpBC,EAAU,QAAUP,EACpBO,EAAU,KAAOR,EACjBQ,EAAU,QAAUN,EACpBM,EAAU,YAAcJ","names":["CaretDownIcon","AccordionPrimitive","forwardRef","jsx","Root","forwardRef","className","props","ref","cx","Item","Heading","Trigger","children","TriggerIcon","Icon","CaretDownIcon","Content","Accordion"]}
1
+ {"version":3,"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 {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} 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\n\t\tref={ref}\n\t\tclassName={cx(\"w-full space-y-2.5\", className)}\n\t\t{...props}\n\t/>\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 pt-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":"uGAEA,OAAS,iBAAAA,MAAqB,kCAC9B,UAAYC,MAAwB,4BACpC,OAGC,cAAAC,MACM,QA+BN,cAAAC,MAAA,oBAJD,IAAMC,EAAOC,EAGX,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BL,EAAoB,OAAnB,CACA,IAAKK,EACL,UAAWC,EAAG,qBAAsBH,CAAS,EAC5C,GAAGC,EACL,CACA,EACDH,EAAK,YAAc,YAyBnB,IAAMM,EAA0B,OAChCA,EAAK,YAAc,gBAyBnB,IAAMC,EAAUN,EAGd,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BL,EAAoB,SAAnB,CACA,IAAKK,EACL,UAAWC,EAAG,0BAA2BH,CAAS,EACjD,GAAGC,EACL,CACA,EACDI,EAAQ,YAAc,mBAyBtB,IAAMC,EAAUP,EAGd,CAAC,CAAE,UAAAC,EAAW,SAAAO,EAAU,GAAGN,CAAM,EAAGC,IACrCL,EAAoB,UAAnB,CACA,IAAKK,EACL,UAAWC,EAAG,kCAAmCH,CAAS,EACzD,GAAGC,EAEH,SAAAM,EACF,CACA,EACDD,EAAQ,YAAc,mBAyBtB,IAAME,EAAc,CAAC,CAAE,UAAAR,EAAW,GAAGC,CAAM,IAC1CJ,EAACY,EAAA,CACC,GAAGR,EACJ,IAAKJ,EAACa,EAAA,CAAc,OAAO,OAAO,EAClC,UAAWP,EAAG,4CAA6CH,CAAS,EACrE,EAEDQ,EAAY,YAAc,uBAyB1B,IAAMG,EAAUZ,EAGd,CAAC,CAAE,UAAAC,EAAW,SAAAO,EAAU,GAAGN,CAAM,EAAGC,IACrCL,EAAoB,UAAnB,CACA,IAAKK,EACL,UAAWC,EACV,qGACAH,CACD,EACC,GAAGC,EAEH,SAAAM,EACF,CACA,EACDI,EAAQ,YAAc,mBAwBtB,IAAMC,EAAY,CAwBjB,KAAAd,EAwBA,QAAAa,EAwBA,QAAAN,EAwBA,KAAAD,EAwBA,QAAAE,EAwBA,YAAAE,CACD","names":["CaretDownIcon","AccordionPrimitive","forwardRef","jsx","Root","forwardRef","className","props","ref","cx","Item","Heading","Trigger","children","TriggerIcon","Icon","CaretDownIcon","Content","Accordion"]}
package/dist/dialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n} from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\nimport * as DialogPrimitive from \"./primitive.js\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the Dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Button type=\"button\" appearance=\"outlined\">\n * Cancel\n * </Button>\n * <Button type=\"button\" appearance=\"filled\">\n * Save\n * </Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Root = DialogPrimitive.Root;\nRoot.displayName = \"Dialog\";\n\n/**\n * A button that opens the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogClose\";\n\nconst Overlay = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nOverlay.displayName = \"DialogOverlay\";\n\ntype ContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `Dialog.Content` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Dialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `Dialog.Content`\n\t *\n\t * @default `max-w-lg`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The container for the dialog content.\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-content\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Button type=\"button\" appearance=\"outlined\">\n * Cancel\n * </Button>\n * <Button type=\"button\" appearance=\"filled\">\n * Save\n * </Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ContentProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonInteractOutside,\n\t\t\tonPointerDownOutside,\n\t\t\tpreferredWidth = \"max-w-lg\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<Portal>\n\t\t\t<Overlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full flex-1 flex-col\",\n\t\t\t\t\t\t\"outline-hidden focus-within:outline-hidden\",\n\t\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\t\t\t\t\t\t\"data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\t\tpreferredWidth,\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</Portal>\n\t),\n);\nContent.displayName = \"DialogContent\";\n\n/**\n * Contains the header content of the dialog, including the title and close button.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-header\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Header = ({ className, children, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nHeader.displayName = \"DialogHeader\";\n\ntype CloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the dialog when clicked.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst CloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: CloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</DialogPrimitive.Close>\n);\nCloseIconButton.displayName = \"DialogCloseIconButton\";\n\n/**\n * Contains the main content of the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-body\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Body = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\n);\nBody.displayName = \"DialogBody\";\n\n/**\n * Contains the footer content of the dialog, including action buttons.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Button type=\"button\" appearance=\"outlined\">\n * Cancel\n * </Button>\n * <Button type=\"button\" appearance=\"filled\">\n * Save\n * </Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Footer = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nFooter.displayName = \"DialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-title\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"DialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-description\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>\n * This is an optional description.\n * </Dialog.Description>\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<\"p\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-muted\", className)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = \"DialogDescription\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n *\n * @see https://mantle.ngrok.com/components/dialog\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Button type=\"button\" appearance=\"outlined\">\n * Cancel\n * </Button>\n * <Button type=\"button\" appearance=\"filled\">\n * Save\n * </Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Dialog = {\n\t/**\n\t * A window overlaid on either the primary window or another dialog window.\n\t * The root stateful component for the Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Cancel\n\t * </Button>\n\t * <Button type=\"button\" appearance=\"filled\">\n\t * Save\n\t * </Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the main content of the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-close\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Confirm Action</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <Text>Are you sure you want to proceed?</Text>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"submit\">Confirm</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * An icon button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tCloseIconButton,\n\t/**\n\t * The container for the dialog content.\n\t * Renders on top of the overlay and is centered in the viewport.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Cancel\n\t * </Button>\n\t * <Button type=\"button\" appearance=\"filled\">\n\t * Save\n\t * </Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * An accessible description to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-description\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>\n\t * This is an optional description.\n\t * </Dialog.Description>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including action buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Cancel\n\t * </Button>\n\t * <Button type=\"button\" appearance=\"filled\">\n\t * Save\n\t * </Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and close button.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The overlay backdrop for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-overlay\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Portal>\n\t * <Dialog.Overlay />\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <Text>Dialog content here.</Text>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tOverlay,\n\t/**\n\t * The portal container for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-portal\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Portal>\n\t * <Dialog.Overlay />\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Portal Dialog</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <Text>This dialog is rendered in a portal.</Text>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * An accessible name to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-title\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport { Dialog };\n"],"mappings":"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","names":["XIcon","forwardRef","jsx","jsxs","Root","Trigger","Portal","Close","Overlay","forwardRef","className","props","ref","cx","Content","children","onInteractOutside","onPointerDownOutside","preferredWidth","event","preventCloseOnPromptInteraction","Header","CloseIconButton","size","type","label","appearance","IconButton","XIcon","Body","Footer","Title","Description","Dialog"]}
1
+ {"version":3,"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n} from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\nimport * as DialogPrimitive from \"./primitive.js\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the Dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Button type=\"button\" appearance=\"outlined\">\n * Cancel\n * </Button>\n * <Button type=\"button\" appearance=\"filled\">\n * Save\n * </Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Root = DialogPrimitive.Root;\nRoot.displayName = \"Dialog\";\n\n/**\n * A button that opens the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogClose\";\n\nconst Overlay = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nOverlay.displayName = \"DialogOverlay\";\n\ntype ContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `Dialog.Content` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Dialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `Dialog.Content`\n\t *\n\t * @default `max-w-lg`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The container for the dialog content.\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-content\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Button type=\"button\" appearance=\"outlined\">\n * Cancel\n * </Button>\n * <Button type=\"button\" appearance=\"filled\">\n * Save\n * </Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ContentProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonInteractOutside,\n\t\t\tonPointerDownOutside,\n\t\t\tpreferredWidth = \"max-w-lg\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<Portal>\n\t\t\t<Overlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full flex-1 flex-col\",\n\t\t\t\t\t\t\"outline-hidden focus-within:outline-hidden\",\n\t\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\t\t\t\t\t\t\"data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\t\tpreferredWidth,\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</Portal>\n\t),\n);\nContent.displayName = \"DialogContent\";\n\n/**\n * Contains the header content of the dialog, including the title and close button.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-header\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Header = ({ className, children, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nHeader.displayName = \"DialogHeader\";\n\ntype CloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the dialog when clicked.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst CloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: CloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</DialogPrimitive.Close>\n);\nCloseIconButton.displayName = \"DialogCloseIconButton\";\n\n/**\n * Contains the main content of the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-body\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Body = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\n);\nBody.displayName = \"DialogBody\";\n\n/**\n * Contains the footer content of the dialog, including action buttons.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Button type=\"button\" appearance=\"outlined\">\n * Cancel\n * </Button>\n * <Button type=\"button\" appearance=\"filled\">\n * Save\n * </Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Footer = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nFooter.displayName = \"DialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-title\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"DialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-description\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>\n * This is an optional description.\n * </Dialog.Description>\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<\"p\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-muted\", className)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = \"DialogDescription\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n *\n * @see https://mantle.ngrok.com/components/dialog\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Button type=\"button\" appearance=\"outlined\">\n * Cancel\n * </Button>\n * <Button type=\"button\" appearance=\"filled\">\n * Save\n * </Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Dialog = {\n\t/**\n\t * A window overlaid on either the primary window or another dialog window.\n\t * The root stateful component for the Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Cancel\n\t * </Button>\n\t * <Button type=\"button\" appearance=\"filled\">\n\t * Save\n\t * </Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the main content of the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-close\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Confirm Action</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <Text>Are you sure you want to proceed?</Text>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"submit\">Confirm</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * An icon button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tCloseIconButton,\n\t/**\n\t * The container for the dialog content.\n\t * Renders on top of the overlay and is centered in the viewport.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Cancel\n\t * </Button>\n\t * <Button type=\"button\" appearance=\"filled\">\n\t * Save\n\t * </Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * An accessible description to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-description\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>\n\t * This is an optional description.\n\t * </Dialog.Description>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including action buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Cancel\n\t * </Button>\n\t * <Button type=\"button\" appearance=\"filled\">\n\t * Save\n\t * </Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and close button.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The overlay backdrop for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-overlay\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Portal>\n\t * <Dialog.Overlay />\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <Text>Dialog content here.</Text>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tOverlay,\n\t/**\n\t * The portal container for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-portal\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Portal>\n\t * <Dialog.Overlay />\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Portal Dialog</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <Text>This dialog is rendered in a portal.</Text>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * An accessible name to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-title\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tDialog,\n};\n"],"mappings":"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","names":["XIcon","forwardRef","jsx","jsxs","Root","Trigger","Portal","Close","Overlay","forwardRef","className","props","ref","cx","Content","children","onInteractOutside","onPointerDownOutside","preferredWidth","event","preventCloseOnPromptInteraction","Header","CloseIconButton","size","type","label","appearance","IconButton","XIcon","Body","Footer","Title","Description","Dialog"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "mantle is ngrok's UI library and design system.",
4
4
  "author": "ngrok",
5
5
  "license": "MIT",
6
- "version": "0.51.1",
6
+ "version": "0.51.3",
7
7
  "homepage": "https://mantle.ngrok.com",
8
8
  "repository": {
9
9
  "type": "git",
@@ -43,10 +43,10 @@
43
43
  "class-variance-authority": "0.7.1",
44
44
  "clsx": "2.1.1",
45
45
  "prismjs": "1.30.0",
46
- "react-day-picker": "9.8.1",
46
+ "react-day-picker": "9.9.0",
47
47
  "sonner": "2.0.7",
48
48
  "tailwind-merge": "3.3.1",
49
- "tw-animate-css": "1.3.6",
49
+ "tw-animate-css": "1.3.7",
50
50
  "tiny-invariant": "1.3.3"
51
51
  },
52
52
  "devDependencies": {
@@ -58,12 +58,12 @@
58
58
  "@types/prismjs": "1.26.5",
59
59
  "@types/react": "18.3.23",
60
60
  "@types/react-dom": "18.3.7",
61
- "browserslist": "4.25.2",
61
+ "browserslist": "4.25.3",
62
62
  "date-fns": "4.1.0",
63
63
  "jsdom": "26.1.0",
64
64
  "react": "18.3.1",
65
65
  "react-dom": "18.3.1",
66
- "react-router": "7.8.0",
66
+ "react-router": "7.8.1",
67
67
  "tailwindcss": "4.1.12",
68
68
  "tsup": "8.5.0",
69
69
  "typescript": "5.9.2",