@ngrok/mantle 0.66.1 → 0.66.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.
- package/dist/alert-dialog.d.ts +4 -4
- package/dist/alert-dialog.js +1 -1
- package/dist/alert-dialog.js.map +1 -1
- package/dist/{browser-only-jrBUqioz.js → browser-only-QPyyfLaB.js} +1 -1
- package/dist/{browser-only-jrBUqioz.js.map → browser-only-QPyyfLaB.js.map} +1 -1
- package/dist/browser-only.js +1 -1
- package/dist/{button-CKL-3sIr.d.ts → button-Ba6S4LFn.d.ts} +4 -4
- package/dist/button.d.ts +2 -2
- package/dist/code-block.d.ts +7 -7
- package/dist/code-block.js +8 -3
- package/dist/code-block.js.map +1 -1
- package/dist/command.js +1 -1
- package/dist/data-table.d.ts +1 -1
- package/dist/dialog-BvatpCbF.js +2 -0
- package/dist/dialog-BvatpCbF.js.map +1 -0
- package/dist/dialog.js +1 -1
- package/dist/hooks.js +1 -1
- package/dist/icons.js +1 -1
- package/dist/{index-ViSCOUrU.d.ts → index-CMbK9igL.d.ts} +2 -2
- package/dist/{index-DWqhfw9n.d.ts → index-aG53Gdqx.d.ts} +4 -4
- package/dist/input.d.ts +1 -1
- package/dist/multi-select.js +1 -1
- package/dist/multi-select.js.map +1 -1
- package/dist/pagination.d.ts +1 -1
- package/dist/primitive-BA0vXlCv.js +2 -0
- package/dist/primitive-BA0vXlCv.js.map +1 -0
- package/dist/sheet.js +1 -1
- package/dist/sheet.js.map +1 -1
- package/dist/split-button.d.ts +1 -1
- package/dist/theme-provider-CtpgDac5.js +2 -0
- package/dist/theme-provider-CtpgDac5.js.map +1 -0
- package/dist/theme.d.ts +51 -4
- package/dist/theme.js +1 -1
- package/dist/{toast-B4gxB8U0.js → toast-C2h4Wdq_.js} +2 -2
- package/dist/{toast-B4gxB8U0.js.map → toast-C2h4Wdq_.js.map} +1 -1
- package/dist/toast.js +1 -1
- package/dist/{use-matches-media-query-BxTQ5f4i.js → use-matches-media-query-CojcYxlA.js} +1 -1
- package/dist/{use-matches-media-query-BxTQ5f4i.js.map → use-matches-media-query-CojcYxlA.js.map} +1 -1
- package/dist/{use-prefers-reduced-motion-BPlsKyCJ.js → use-prefers-reduced-motion-BiG6QGkf.js} +2 -2
- package/dist/{use-prefers-reduced-motion-BPlsKyCJ.js.map → use-prefers-reduced-motion-BiG6QGkf.js.map} +1 -1
- package/package.json +1 -1
- package/dist/dialog-CGBjHvo_.js +0 -2
- package/dist/dialog-CGBjHvo_.js.map +0 -1
- package/dist/primitive-W5Izf14l.js +0 -2
- package/dist/primitive-W5Izf14l.js.map +0 -1
- package/dist/theme-provider-CbzLgte1.js +0 -2
- package/dist/theme-provider-CbzLgte1.js.map +0 -1
package/dist/alert-dialog.d.ts
CHANGED
|
@@ -147,7 +147,7 @@ declare const AlertDialog: {
|
|
|
147
147
|
* ```
|
|
148
148
|
*/
|
|
149
149
|
readonly Action: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
|
|
150
|
-
appearance?: "link" | "
|
|
150
|
+
appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
|
|
151
151
|
isLoading?: boolean | null | undefined;
|
|
152
152
|
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
153
153
|
} & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
|
|
@@ -157,7 +157,7 @@ declare const AlertDialog: {
|
|
|
157
157
|
asChild: true;
|
|
158
158
|
type?: ComponentProps<"button">["type"];
|
|
159
159
|
}, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
|
|
160
|
-
appearance?: "link" | "
|
|
160
|
+
appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
|
|
161
161
|
isLoading?: boolean | null | undefined;
|
|
162
162
|
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
163
163
|
} & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
|
|
@@ -204,7 +204,7 @@ declare const AlertDialog: {
|
|
|
204
204
|
* ```
|
|
205
205
|
*/
|
|
206
206
|
readonly Cancel: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
|
|
207
|
-
appearance?: "link" | "
|
|
207
|
+
appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
|
|
208
208
|
isLoading?: boolean | null | undefined;
|
|
209
209
|
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
210
210
|
} & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
|
|
@@ -214,7 +214,7 @@ declare const AlertDialog: {
|
|
|
214
214
|
asChild: true;
|
|
215
215
|
type?: ComponentProps<"button">["type"];
|
|
216
216
|
}, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
|
|
217
|
-
appearance?: "link" | "
|
|
217
|
+
appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
|
|
218
218
|
isLoading?: boolean | null | undefined;
|
|
219
219
|
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
220
220
|
} & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
|
package/dist/alert-dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{t as e}from"./cx-bKromGBh.js";import{t}from"./svg-only-BVLlbQ4e.js";import{t as n}from"./slot-DdnjeV2n.js";import{t as r}from"./button-CRRPesae.js";import{a as i,c as a,i as o,n as s,o as c,r as l,s as u,t as d}from"./primitive-
|
|
1
|
+
import{t as e}from"./cx-bKromGBh.js";import{t}from"./svg-only-BVLlbQ4e.js";import{t as n}from"./slot-DdnjeV2n.js";import{t as r}from"./button-CRRPesae.js";import{a as i,c as a,i as o,n as s,o as c,r as l,s as u,t as d}from"./primitive-BA0vXlCv.js";import{createContext as f,forwardRef as p,useContext as m,useMemo as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{InfoIcon as y}from"@phosphor-icons/react/Info";import{WarningIcon as b}from"@phosphor-icons/react/Warning";const x=f(null);function S(){let e=m(x);return g(e,`AlertDialog child component used outside of AlertDialog parent!`),e}function C({priority:e,...t}){let n=h(()=>({priority:e}),[e]);return _(x.Provider,{value:n,children:_(c,{...t})})}C.displayName=`AlertDialog`;const w=a;w.displayName=`AlertDialogTrigger`;const T=i;T.displayName=`AlertDialogPortal`;const E=p(({className:t,...n},r)=>_(o,{className:e(`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`,t),...n,ref:r}));E.displayName=`AlertDialogOverlay`;const D=p(({className:t,preferredWidth:n=`max-w-md`,...r},i)=>v(T,{children:[_(E,{}),_(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:_(s,{"data-mantle-modal-content":!0,ref:i,className:e(`flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start`,`outline-hidden focus-within:outline-hidden`,`p-6`,`border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200`,`data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,n,t),...r})})]}));D.displayName=`AlertDialogContent`;const O=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{className:e(`flex-1 space-y-4`,r),ref:a,...i}));O.displayName=`AlertDialogBody`;const k=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{className:e(`flex flex-col space-y-2 text-center sm:text-start`,r),ref:a,...i}));k.displayName=`AlertDialogHeader`;const A=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{className:e(`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2`,r),ref:a,...i}));A.displayName=`AlertDialogFooter`;const j=p(({className:t,...n},r)=>_(u,{ref:r,className:e(`text-strong text-center text-lg font-medium sm:text-start`,t),...n}));j.displayName=`AlertDialogTitle`;const M=p(({className:t,...n},r)=>_(l,{ref:r,className:e(`text-body text-center text-sm font-normal sm:text-start`,t),...n}));M.displayName=`AlertDialogDescription`;const N=p(({appearance:e=`filled`,...t},n)=>{let i=S(),a=`default`;return i.priority===`danger`&&(a=`danger`),_(r,{appearance:e,priority:a,ref:n,...t})});N.displayName=`AlertDialogAction`;const P=p(({appearance:t=`outlined`,className:n,priority:i=`neutral`,...a},o)=>_(d,{asChild:!0,children:_(r,{appearance:t,className:e(`mt-2 sm:mt-0`,n),priority:i,ref:o,...a})}));P.displayName=`AlertDialogCancel`;const F=p(({className:n,svg:r,...i},a)=>{let o=S(),s=o.priority===`danger`?`text-danger-600`:`text-accent-600`,c=o.priority===`danger`?_(b,{}):_(y,{});return _(t,{ref:a,className:e(`size-12 sm:size-7`,s,n),svg:r??c,...i})});F.displayName=`AlertDialogIcon`;const I=d;I.displayName=`AlertDialogClose`;const L={Root:C,Action:N,Body:O,Cancel:P,Close:I,Content:D,Description:M,Footer:A,Header:k,Icon:F,Title:j,Trigger:w};export{L as AlertDialog};
|
|
2
2
|
//# sourceMappingURL=alert-dialog.js.map
|
package/dist/alert-dialog.js.map
CHANGED
|
@@ -1 +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\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.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>(\n\t(\n\t\t{ className, onInteractOutside, onPointerDownOutside, preferredWidth = \"max-w-md\", ...props },\n\t\tref,\n\t) => (\n\t\t<AlertDialogPortal>\n\t\t\t<AlertDialogOverlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<AlertDialogPrimitive.Content\n\t\t\t\t\tdata-mantle-modal-content\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(\n\t\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\t\"outline-hidden focus-within:outline-hidden\",\n\t\t\t\t\t\t\"p-6\",\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\t{...props}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</AlertDialogPortal>\n\t),\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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"}
|
|
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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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import{useSyncExternalStore as e}from"react";function t(){return e(n,()=>!0,()=>!1)}function n(){return()=>{}}function r({children:e,fallback:n=null}){return t()?e():n}function i(){return typeof window<`u`&&typeof document<`u`}export{i as n,t as r,r as t};
|
|
2
|
-
//# sourceMappingURL=browser-only-
|
|
2
|
+
//# sourceMappingURL=browser-only-QPyyfLaB.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"browser-only-
|
|
1
|
+
{"version":3,"file":"browser-only-QPyyfLaB.js","names":[],"sources":["../src/hooks/use-is-hydrated.tsx","../src/components/browser-only/browser-only.tsx"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\n\n/**\n * React hook that returns whether the component tree has been hydrated\n * on the client.\n *\n * Uses `useSyncExternalStore` to ensure the value is consistent between\n * server and client rendering, preventing hydration mismatches.\n *\n * - On the server, it always returns `false`.\n * - On the client (after hydration), it returns `true`.\n *\n * @see https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store\n *\n * @returns {boolean} `true` once hydration has occurred on the client,\n * otherwise `false`.\n *\n * @example\n * const isHydrated = useIsHydrated();\n *\n * if (!isHydrated) {\n * return <span style={{ visibility: \"hidden\" }}>Loading…</span>;\n * }\n *\n * return <span>Ready!</span>;\n */\nfunction useIsHydrated() {\n\treturn useSyncExternalStore(\n\t\temptySubscribe,\n\t\t() => true,\n\t\t() => false,\n\t);\n}\n\nexport {\n\t//,\n\tuseIsHydrated,\n};\n\n/**\n * No-op subscription function required by `useSyncExternalStore`.\n *\n * Since hydration state never changes after mount, this effectively\n * does nothing.\n *\n * @private\n */\nfunction emptySubscribe() {\n\treturn () => {};\n}\n","import type { ReactNode } from \"react\";\nimport { useIsHydrated } from \"../../hooks/use-is-hydrated.js\";\n\ntype Props = {\n\t/**\n\t * Children must be a render function so that evaluation is deferred\n\t * until after hydration has occurred.\n\t */\n\tchildren: () => ReactNode;\n\t/**\n\t * Optional fallback to render on the server (and during hydration)\n\t * before the client-only children are mounted.\n\t * Ideally, this should be the same dimensions as the eventual children\n\t * to avoid layout shift.\n\t */\n\tfallback?: ReactNode;\n};\n\n/**\n * A wrapper component that ensures its children only render in the browser,\n * after hydration has completed.\n *\n * This is useful for components that rely on browser-only APIs\n * (e.g. `window`, `document`, `localStorage`, media queries) or that\n * cannot safely be rendered during server-side rendering (SSR).\n *\n * - On the server, and during the initial hydration pass,\n * the `fallback` is rendered.\n * - On the client, after hydration, the `children` render function is called.\n *\n * @see https://mantle.ngrok.com/components/browser-only\n *\n * @example\n * ```tsx\n * <BrowserOnly fallback={<div style={{ height: 200 }} />} >\n * {() => <ExpensiveChart />}\n * </BrowserOnly>\n * ```\n *\n * @see useIsHydrated\n */\nfunction BrowserOnly({ children, fallback = null }: Props) {\n\treturn useIsHydrated() ? children() : fallback;\n}\n\n/**\n * Detects whether DOM APIs are available.\n *\n * @description\n * Returns `true` when running in a windowed browser context where both\n * `window` and a real `document` exist. This will be `false` in SSR/Node.\n *\n * Note: Test environments that provide a DOM shim (e.g. JSDOM) will return `true`.\n *\n * @returns {boolean} `true` if DOM APIs are available; otherwise `false`.\n *\n * @example\n * if (canUseDOM()) {\n * localStorage.setItem(\"foo\", \"bar\");\n * }\n */\nfunction canUseDOM(): boolean {\n\treturn typeof window !== \"undefined\" && typeof document !== \"undefined\";\n}\n\nexport {\n\t//,\n\tcanUseDOM,\n\tBrowserOnly,\n};\n"],"mappings":"6CA0BA,SAAS,GAAgB,CACxB,OAAO,EACN,MACM,OACA,GACN,CAgBF,SAAS,GAAiB,CACzB,UAAa,GCPd,SAAS,EAAY,CAAE,WAAU,WAAW,MAAe,CAC1D,OAAO,GAAe,CAAG,GAAU,CAAG,EAmBvC,SAAS,GAAqB,CAC7B,OAAO,OAAO,OAAW,KAAe,OAAO,SAAa"}
|
package/dist/browser-only.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{n as e,t}from"./browser-only-
|
|
1
|
+
import{n as e,t}from"./browser-only-QPyyfLaB.js";export{t as BrowserOnly,e as canUseDOM};
|
|
@@ -7,7 +7,7 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
|
|
|
7
7
|
|
|
8
8
|
//#region src/components/button/button.d.ts
|
|
9
9
|
declare const buttonVariants: (props?: ({
|
|
10
|
-
appearance?: "link" | "
|
|
10
|
+
appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
|
|
11
11
|
isLoading?: boolean | null | undefined;
|
|
12
12
|
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
13
13
|
} & class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
@@ -91,7 +91,7 @@ type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
|
|
|
91
91
|
* ```
|
|
92
92
|
*/
|
|
93
93
|
declare const Button: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
|
|
94
|
-
appearance?: "link" | "
|
|
94
|
+
appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
|
|
95
95
|
isLoading?: boolean | null | undefined;
|
|
96
96
|
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
97
97
|
} & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
|
|
@@ -137,7 +137,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<react.ClassAttribute
|
|
|
137
137
|
*/
|
|
138
138
|
type?: ComponentProps<"button">["type"];
|
|
139
139
|
}, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
|
|
140
|
-
appearance?: "link" | "
|
|
140
|
+
appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
|
|
141
141
|
isLoading?: boolean | null | undefined;
|
|
142
142
|
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
143
143
|
} & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
|
|
@@ -172,4 +172,4 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<react.ClassAttribute
|
|
|
172
172
|
}, "ref">) & react.RefAttributes<HTMLButtonElement>>;
|
|
173
173
|
//#endregion
|
|
174
174
|
export { ButtonProps as n, Button as t };
|
|
175
|
-
//# sourceMappingURL=button-
|
|
175
|
+
//# sourceMappingURL=button-Ba6S4LFn.d.ts.map
|
package/dist/button.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { n as IconButtonProps, t as IconButton } from "./icon-button-2r6S3HVA.js";
|
|
2
|
-
import { n as ButtonProps, t as Button } from "./button-
|
|
3
|
-
import { n as ButtonGroupProps, t as ButtonGroup } from "./index-
|
|
2
|
+
import { n as ButtonProps, t as Button } from "./button-Ba6S4LFn.js";
|
|
3
|
+
import { n as ButtonGroupProps, t as ButtonGroup } from "./index-CMbK9igL.js";
|
|
4
4
|
export { Button, ButtonGroup, ButtonGroupProps, ButtonProps, IconButton, IconButtonProps };
|
package/dist/code-block.d.ts
CHANGED
|
@@ -27,7 +27,7 @@ declare const isSupportedLanguage: (value: unknown) => value is SupportedLanguag
|
|
|
27
27
|
* Formats a language name into a class name that Prism.js can understand.
|
|
28
28
|
* @default "language-sh"
|
|
29
29
|
*/
|
|
30
|
-
declare function formatLanguageClassName(language?: SupportedLanguage | undefined): "language-html" | "language-ruby" | "language-text" | "language-go" | "language-
|
|
30
|
+
declare function formatLanguageClassName(language?: SupportedLanguage | undefined): "language-html" | "language-ruby" | "language-text" | "language-go" | "language-py" | "language-plaintext" | "language-jsx" | "language-bash" | "language-cs" | "language-csharp" | "language-css" | "language-dotnet" | "language-java" | "language-javascript" | "language-js" | "language-json" | "language-markup" | "language-plain" | "language-python" | "language-rb" | "language-rust" | "language-sh" | "language-shell" | "language-ts" | "language-tsx" | "language-txt" | "language-typescript" | "language-xml" | "language-yaml" | "language-yml";
|
|
31
31
|
//#endregion
|
|
32
32
|
//#region src/components/code-block/indentation.d.ts
|
|
33
33
|
declare const indentations: readonly ["tabs", "spaces"];
|
|
@@ -349,11 +349,11 @@ declare const CodeBlock: {
|
|
|
349
349
|
* using `dangerouslySetInnerHTML`.
|
|
350
350
|
*
|
|
351
351
|
* Characters escaped:
|
|
352
|
-
* - \& => `&
|
|
353
|
-
* - \< => `<
|
|
354
|
-
* - \> => `>
|
|
355
|
-
* - \" => `"
|
|
356
|
-
* - \' => `'
|
|
352
|
+
* - \& => `&`;
|
|
353
|
+
* - \< => `<`;
|
|
354
|
+
* - \> => `>`;
|
|
355
|
+
* - \" => `"`;
|
|
356
|
+
* - \' => `'`;
|
|
357
357
|
*
|
|
358
358
|
* @param {string} value The raw string to be escaped.
|
|
359
359
|
*
|
|
@@ -370,7 +370,7 @@ type Primitive = string | number | boolean | undefined | null;
|
|
|
370
370
|
*/
|
|
371
371
|
declare function fmtCode(strings: TemplateStringsArray, ...values: Primitive[]): string;
|
|
372
372
|
//#endregion
|
|
373
|
-
//#region src/components/code-block/normalize.d.ts
|
|
373
|
+
//#region src/components/code-block/normalize-indentation.d.ts
|
|
374
374
|
type Options = {
|
|
375
375
|
/**
|
|
376
376
|
* The indentation type to use. Can be either "tabs" or "spaces".
|
package/dist/code-block.js
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import{t as e}from"./cx-bKromGBh.js";import{t}from"./icon-B5oNYYrJ.js";import{t as n}from"./booleanish-CBGdPL3Q.js";import{t as r}from"./slot-DdnjeV2n.js";import{t as i}from"./use-copy-to-clipboard-BEbQOKHc.js";import{t as a}from"./traffic-policy-file-QnF-2YkY.js";import{CaretDownIcon as o}from"@phosphor-icons/react/CaretDown";import{createContext as s,forwardRef as c,useContext as l,useEffect as u,useId as d,useMemo as f,useRef as p,useState as m}from"react";import h from"clsx";import g from"tiny-invariant";import{Fragment as _,jsx as v,jsxs as y}from"react/jsx-runtime";import{CheckIcon as b}from"@phosphor-icons/react/Check";import{CopyIcon as x}from"@phosphor-icons/react/Copy";import{FileTextIcon as S}from"@phosphor-icons/react/FileText";import{TerminalIcon as C}from"@phosphor-icons/react/Terminal";import w from"prismjs";import"prismjs/components/prism-bash.js";import"prismjs/components/prism-csharp.js";import"prismjs/components/prism-css.js";import"prismjs/components/prism-go.js";import"prismjs/components/prism-java.js";import"prismjs/components/prism-javascript.js";import"prismjs/components/prism-json.js";import"prismjs/components/prism-jsx.js";import"prismjs/components/prism-markup.js";import"prismjs/components/prism-python.js";import"prismjs/components/prism-ruby.js";import"prismjs/components/prism-rust.js";import"prismjs/components/prism-tsx.js";import"prismjs/components/prism-typescript.js";import"prismjs/components/prism-yaml.js";function T(e){let t
|
|
2
|
-
`).
|
|
3
|
-
`)}function
|
|
1
|
+
import{t as e}from"./cx-bKromGBh.js";import{t}from"./icon-B5oNYYrJ.js";import{t as n}from"./booleanish-CBGdPL3Q.js";import{t as r}from"./slot-DdnjeV2n.js";import{t as i}from"./use-copy-to-clipboard-BEbQOKHc.js";import{t as a}from"./traffic-policy-file-QnF-2YkY.js";import{CaretDownIcon as o}from"@phosphor-icons/react/CaretDown";import{createContext as s,forwardRef as c,useContext as l,useEffect as u,useId as d,useMemo as f,useRef as p,useState as m}from"react";import h from"clsx";import g from"tiny-invariant";import{Fragment as _,jsx as v,jsxs as y}from"react/jsx-runtime";import{CheckIcon as b}from"@phosphor-icons/react/Check";import{CopyIcon as x}from"@phosphor-icons/react/Copy";import{FileTextIcon as S}from"@phosphor-icons/react/FileText";import{TerminalIcon as C}from"@phosphor-icons/react/Terminal";import w from"prismjs";import"prismjs/components/prism-bash.js";import"prismjs/components/prism-csharp.js";import"prismjs/components/prism-css.js";import"prismjs/components/prism-go.js";import"prismjs/components/prism-java.js";import"prismjs/components/prism-javascript.js";import"prismjs/components/prism-json.js";import"prismjs/components/prism-jsx.js";import"prismjs/components/prism-markup.js";import"prismjs/components/prism-python.js";import"prismjs/components/prism-ruby.js";import"prismjs/components/prism-rust.js";import"prismjs/components/prism-tsx.js";import"prismjs/components/prism-typescript.js";import"prismjs/components/prism-yaml.js";function T(e){let t=-1;for(let n=0;n<e.length;n++){let r=e[n];if(r===`&`||r===`<`||r===`>`||r===`"`||r===`'`){t=n;break}}if(t===-1)return e;let n=e.slice(0,t);for(let r=t;r<e.length;r++){let t=e[r];switch(t){case`&`:n+=`&`;break;case`<`:n+=`<`;break;case`>`:n+=`>`;break;case`"`:n+=`"`;break;case`'`:n+=`'`;break;default:n+=t}}return n}const E=[`tabs`,`spaces`];function D(e){return E.includes(e)}function O(e,t){return t||(j(e)?`tabs`:(M(e),`spaces`))}const k=new Set([`csharp`,`css`,`go`,`html`,`java`,`javascript`,`js`,`jsx`,`ts`,`tsx`,`typescript`,`xml`]),A=new Set([`python`,`py`,`yaml`,`yml`,`ruby`,`rb`]);function j(e){return k.has(e)}function M(e){return A.has(e)}function N(e,...t){if(!ee(e)||!Array.isArray(t))throw Error("It looks like you tried to call `fmtCode` as a function. Make sure to use it as a tagged template.\n Example: fmtCode`SELECT * FROM users`, not fmtCode('SELECT * FROM users')");let n=String.raw({raw:e},...t),r=P(n),i=n.trim().split(`
|
|
2
|
+
`),a=Array(i.length);for(let e=0;e<i.length;e++){let t=i[e];t!=null&&(a[e]=F(t)?t:t.slice(r))}return a.join(`
|
|
3
|
+
`)}function P(e){let t=1/0,n=0,r=!0;for(let i=0;i<e.length;i++){let a=e[i];if(r){if(a===` `||a===` `){n+=1;continue}if(a===`
|
|
4
|
+
`||a===`\r`){n=0;continue}if(n<t&&(t=n,t===0))return 0;r=!1;continue}(a===`
|
|
5
|
+
`||a===`\r`)&&(r=!0,n=0)}return t===1/0?0:t}function ee(e){return Array.isArray(e)&&`raw`in e&&Array.isArray(e.raw)}function F(e){let t=e[0];return t!=null&&t!==` `&&t!==` `}function I(e,t){let n=t?.indentation??`spaces`,r=e.replace(/\r\n?/g,`
|
|
6
|
+
`),i=r.trim();if(i===``)return``;let a=P(r),o=i.split(`
|
|
7
|
+
`),s=Array(o.length);for(let e=0;e<o.length;e++){let t=o[e];t!=null&&(s[e]=te(ne(t)?t:t.slice(a),n))}return s.join(`
|
|
8
|
+
`)}function te(e,t){let n=0;for(;n<e.length;){let t=e[n];if(t!==` `&&t!==` `)break;n+=1}if(n===0||n===e.length)return e;let r=e.slice(0,n);return(t===`spaces`?r.replace(/\t/g,` `):r.replace(/ {2}/g,` `))+e.slice(n)}function ne(e){let t=e[0];return t!=null&&t!==` `&&t!==` `}const L=`bash.cs.csharp.css.dotnet.go.html.java.javascript.js.json.jsx.markup.plain.plaintext.py.python.rb.ruby.rust.sh.shell.text.ts.tsx.txt.typescript.xml.yaml.yml`.split(`.`),R=new Set(L);function z(e){if(!e)return`sh`;let t=e.trim().slice(e.indexOf(`-`)+1);return B(t)?t:`sh`}const B=e=>typeof e==`string`&&R.has(e);function V(e=`sh`){return`language-${e??`sh`}`}const H=new Map;function re(e,t){return`${e}\u0000${t}`}function ie(e,t,n){let r=re(e,t),i=H.get(r);if(i!=null)return H.delete(r),H.set(r,i),i;let a=w.highlight(t,n,e);if(H.set(r,a),H.size>100){let e=H.keys().next().value;e!=null&&H.delete(e)}return a}const U=s({codeId:void 0,copyText:``,hasCodeExpander:!1,isCodeExpanded:!1,registerCodeId:()=>{},setCopyText:()=>{},setHasCodeExpander:()=>{},setIsCodeExpanded:()=>{},unregisterCodeId:()=>{}}),W=c(({asChild:t=!1,className:n,...i},a)=>{let[o,s]=m(``),[c,l]=m(!1),[u,d]=m(!1),[p,h]=m(void 0),_=f(()=>({codeId:p,copyText:o,hasCodeExpander:c,isCodeExpanded:u,registerCodeId:e=>{h(t=>(g(t==null,`You can only render a single CodeBlockCode within a CodeBlock.`),e))},setCopyText:s,setHasCodeExpander:l,setIsCodeExpanded:d,unregisterCodeId:e=>{h(t=>{g(t===e,`You can only render a single CodeBlockCode within a CodeBlock.`)})}}),[p,o,c,u]),y=t?r:`div`;return v(U.Provider,{value:_,children:v(y,{"data-slot":`code-block`,className:e(`text-mono overflow-hidden rounded-md border border-gray-300 bg-gray-50 font-mono`,`[&_svg]:shrink-0`,n),ref:a,...i})})});W.displayName=`CodeBlock`;const G=c(({asChild:t=!1,className:n,...i},a)=>v(t?r:`div`,{className:e(`relative`,n),ref:a,...i}));G.displayName=`CodeBlockBody`;const K=c(({className:t,highlightLines:n,indentation:r,language:i=`text`,showLineNumbers:a,style:o,tabIndex:s,value:c,...p},_)=>{let y=d(),{hasCodeExpander:b,isCodeExpanded:x,registerCodeId:S,setCopyText:C,unregisterCodeId:E}=l(U),D=O(i,r),k=f(()=>I(c,{indentation:D}),[c,D]),A=f(()=>T(k),[k]),[j,M]=m(()=>A);u(()=>{let e=w.languages[i];g(e,`CodeBlock does not support the language "${i}". The syntax highlighter does not have a grammar for this language. The supported languages are: ${L.join(`, `)}.`),M(ie(i,k,e))},[k,i]),u(()=>{C(k)},[k,C]),u(()=>(S(y),()=>{E(y)}),[y,S,E]);let N=V(i);return v(`pre`,{"aria-expanded":b?x:void 0,className:e(`scrollbar overflow-x-auto overflow-y-hidden p-4 pr-14`,`text-mono m-0 font-mono`,`aria-collapsed:max-h-[13.6rem]`,N,t),"data-lang":i,id:y,ref:_,style:{...o,tabSize:2,MozTabSize:2},tabIndex:s??-1,...p,children:v(`code`,{className:h(`text-size-inherit`,N),dangerouslySetInnerHTML:{__html:j},suppressHydrationWarning:!0})})});K.displayName=`CodeBlockCode`;const q=c(({asChild:t=!1,className:n,...i},a)=>v(t?r:`div`,{className:e(`flex items-center gap-1 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700`,n),ref:a,...i}));q.displayName=`CodeBlockHeader`;const J=c(({asChild:t=!1,className:n,...i},a)=>v(t?r:`h3`,{ref:a,className:e(`text-mono m-0 font-mono font-normal`,n),...i}));J.displayName=`CodeBlockTitle`;const Y=c(({asChild:n=!1,className:a,onCopy:o,onCopyError:s,onClick:c,...d},f)=>{let{copyText:h}=l(U),[,g]=i(),[S,C]=m(!1),w=p(void 0);return u(()=>()=>{w.current!=null&&clearTimeout(w.current)},[]),y(n?r:`button`,{type:`button`,className:e(`focus-visible:border-accent-600 focus-visible:ring-focus-accent absolute right-2.5 top-2.5 z-10 flex size-7 items-center justify-center rounded border border-gray-300 bg-gray-50 shadow-[-1rem_0_0.75rem_-0.375rem_var(--color-gray-50),1rem_0_0_-0.25rem_var(--color-gray-50)] hover:border-gray-400 hover:bg-gray-200 focus-visible:outline-hidden focus-visible:ring-4`,S&&`bg-filled-success text-on-filled hover:bg-filled-success focus:bg-filled-success focus-visible:border-success-600 focus-visible:ring-focus-success w-auto gap-1 border-transparent pl-2 pr-1.5 hover:border-transparent`,a),ref:f,onClick:async e=>{try{if(c?.(e),e.defaultPrevented){w.current!=null&&clearTimeout(w.current);return}await g(h),o?.(h),C(!0),w.current!=null&&clearTimeout(w.current),w.current=setTimeout(()=>{C(!1)},2e3)}catch(e){s?.(e)}},...d,children:[v(`span`,{className:`sr-only`,children:`Copy code`}),S?y(_,{children:[`Copied`,v(t,{svg:v(b,{weight:`bold`}),className:`size-4`})]}):v(t,{svg:v(x,{}),className:`-ml-px`})]})});Y.displayName=`CodeBlockCopyButton`;const X=c(({asChild:n=!1,className:i,onClick:a,...s},c)=>{let{codeId:d,isCodeExpanded:f,setIsCodeExpanded:p,setHasCodeExpander:m}=l(U);return u(()=>(m(!0),()=>{m(!1)}),[m]),y(n?r:`button`,{...s,"aria-controls":d,"aria-expanded":f,className:e(`flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-gray-50 px-4 py-2 font-sans text-gray-700 hover:bg-gray-100`,i),ref:c,type:`button`,onClick:e=>{p(e=>!e),a?.(e)},children:[f?`Show less`:`Show more`,` `,v(t,{svg:v(o,{weight:`bold`}),className:e(`size-4`,f&&`rotate-180`,`transition-all duration-150`)})]})});X.displayName=`CodeBlockExpanderButton`;function Z({className:e,preset:n,svg:r,...i}){let o=r;if(n!=null)switch(n){case`file`:o=v(S,{weight:`fill`});break;case`cli`:o=v(C,{weight:`fill`});break;case`traffic-policy`:o=v(a,{});break}return v(t,{className:e,svg:o,...i})}Z.displayName=`CodeBlockIcon`;const ae={Root:W,Body:G,Code:K,CopyButton:Y,ExpanderButton:X,Header:q,Icon:Z,Title:J},Q={collapsible:!1,disableCopy:!1,indentation:void 0,mode:void 0,title:void 0};function oe(e){let t=e?.trim()??``;if(!t)return Q;let n={},r=ce(t);for(let e of r){let t=e.indexOf(`=`),r=t===-1?e:e.slice(0,t),i=t===-1?void 0:e.slice(t+1);r&&(n[r]=se(i)??!0)}try{let e=$(n);return{...Q,...e}}catch{return Q}}function se(e){return e?.trim().replace(/^"(.*)"$/,`$1`)}function ce(e){let t=e?.trim()??``,n=[],r=``,i=!1;for(let e of t)e===` `&&!i?r&&=(n.push(r),``):(e===`"`&&(i=!i),r+=e);return r&&n.push(r),n}function le(e){return e===`cli`||e===`file`||e===`traffic-policy`}function $(e){let{collapsible:t=Q.collapsible,disableCopy:r=Q.disableCopy,indentation:i=Q.indentation,mode:a=Q.mode,title:o=Q.title}=e;return{collapsible:typeof t==`string`||typeof t==`boolean`?n(t):Q.collapsible,disableCopy:typeof r==`string`||typeof r==`boolean`?n(r):Q.disableCopy,indentation:D(i)?i:Q.indentation,mode:le(a)?a:Q.mode,title:typeof o==`string`?o.trim():Q.title}}export{ae as CodeBlock,Q as defaultMeta,T as escapeHtml,N as fmtCode,V as formatLanguageClassName,B as isSupportedLanguage,I as normalizeIndentation,z as parseLanguage,oe as parseMetastring,L as supportedLanguages};
|
|
4
9
|
//# sourceMappingURL=code-block.js.map
|