@ngrok/mantle 0.21.3 → 0.21.4
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.js +1 -1
- package/dist/alert-dialog.js.map +1 -1
- package/dist/alert.d.ts +98 -14
- package/dist/alert.js +1 -1
- package/dist/alert.js.map +1 -1
- package/package.json +1 -1
package/dist/alert-dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as d,b as f,c as D,d as
|
|
1
|
+
import{a as d,b as f,c as D,d as p,e as A,f as y,g as u,h as P}from"./chunk-PBARMKNJ.js";import{g}from"./chunk-5WFRLY2G.js";import"./chunk-DOTYPWKO.js";import"./chunk-D3XF6J5A.js";import{b as m}from"./chunk-PJLA4NRO.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-DJGIRPRQ.js";import{a as c}from"./chunk-HDPLH5HC.js";import{a as r}from"./chunk-AZ56JGNY.js";import{Info as F}from"@phosphor-icons/react/Info";import{Warning as H}from"@phosphor-icons/react/Warning";import{createContext as S,forwardRef as s,useContext as V,useMemo as j}from"react";import k from"tiny-invariant";import{jsx as o,jsxs as G}from"react/jsx-runtime";var v=S(null);function C(){let t=V(v);return k(t,"AlertDialog child component used outside of AlertDialog parent!"),t}function x({priority:t,...e}){let i=j(()=>({priority:t}),[t]);return o(v.Provider,{value:i,children:o(d,{...e})})}x.displayName="AlertDialog";var M=f,q=D,N=s(({className:t,...e},i)=>o(A,{className:r("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-sm",t),...e,ref:i}));N.displayName="AlertDialogOverlay";var R=s(({className:t,onInteractOutside:e,onPointerDownOutside:i,...a},l)=>G(q,{children:[o(N,{}),o("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:o(y,{ref:l,className:r("flex w-full max-w-md flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start","outline-none focus-within:outline-none","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",t),onInteractOutside:n=>{g(n),e?.(n)},onPointerDownOutside:n=>{g(n),i?.(n)},...a})})]}));R.displayName="AlertDialogContent";var b=({className:t,...e})=>o("div",{className:r("flex-1 space-y-4",t),...e});b.displayName="AlertDialogBody";var h=({className:t,...e})=>o("div",{className:r("flex flex-col space-y-2 text-center sm:text-start",t),...e});h.displayName="AlertDialogHeader";var O=({className:t,...e})=>o("div",{className:r("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",t),...e});O.displayName="AlertDialogFooter";var B=s(({className:t,...e},i)=>o(u,{ref:i,className:r("text-strong text-center text-lg font-medium sm:text-start",t),...e}));B.displayName="AlertDialogTitle";var I=s(({className:t,...e},i)=>o(P,{ref:i,className:r("text-body text-center text-sm font-normal sm:text-start",t),...e}));I.displayName="AlertDialogDescription";var T=s(({appearance:t="filled",...e},i)=>{let a=C(),l="default";return a.priority==="danger"&&(l="danger"),o(m,{appearance:t,priority:l,ref:i,...e})});T.displayName="AlertDialogAction";var w=s(({appearance:t="outlined",className:e,priority:i="neutral",...a},l)=>o(p,{asChild:!0,children:o(m,{appearance:t,className:r("mt-2 sm:mt-0",e),priority:i,ref:l,...a})}));w.displayName="AlertDialogCancel";var z=s(({className:t,svg:e,...i},a)=>{let l=C(),n=l.priority==="danger"?"text-danger-600":"text-accent-600",W=l.priority==="danger"?o(H,{}):o(F,{});return o(c,{ref:a,className:r("size-12 sm:size-7",n,t),svg:e??W,...i})});z.displayName="AlertDialogIcon";var E=p;export{x as AlertDialog,T as AlertDialogAction,b as AlertDialogBody,w as AlertDialogCancel,E as AlertDialogClose,R as AlertDialogContent,I as AlertDialogDescription,O as AlertDialogFooter,h as AlertDialogHeader,z as AlertDialogIcon,B as AlertDialogTitle,M as AlertDialogTrigger};
|
|
2
2
|
//# sourceMappingURL=alert-dialog.js.map
|
package/dist/alert-dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Info } from \"@phosphor-icons/react/Info\";\nimport { Warning } 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} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport {\n\tButton,\n\ttype ButtonPriority,\n\ttype ButtonProps,\n} 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 { 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(\n\t\tcontext,\n\t\t\"AlertDialog child component used outside of AlertDialog parent!\",\n\t);\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 * The root component for the Alert Dialog\n */\nfunction AlertDialog({ priority, ...props }: AlertDialogProps) {\n\treturn (\n\t\t<AlertDialogContext.Provider value={{ priority }}>\n\t\t\t<AlertDialogPrimitive.Root {...props} />\n\t\t</AlertDialogContext.Provider>\n\t);\n}\nAlertDialog.displayName = \"AlertDialog\";\n\n/**\n * A button that opens the Alert Dialog.\n */\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger;\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal;\n\n/**\n * A layer that covers the inert portion of the view when the dialog is open.\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-sm\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t\tref={ref}\n\t/>\n));\nAlertDialogOverlay.displayName = \"AlertDialogOverlay\";\n\n/**\n * The popover alert dialog container.\n *\n * Renders on top of the overlay and is centered in the viewport.\n */\nconst AlertDialogContent = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, onInteractOutside, onPointerDownOutside, ...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\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"flex w-full max-w-md flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start\",\n\t\t\t\t\t\"outline-none focus-within:outline-none\",\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\tclassName,\n\t\t\t\t)}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t</AlertDialogPortal>\n));\nAlertDialogContent.displayName = \"AlertDialogContent\";\n\n/**\n * Contains the main content of the dialog.\n */\nconst AlertDialogBody = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div className={cx(\"flex-1 space-y-4\", className)} {...props} />\n);\nAlertDialogBody.displayName = \"AlertDialogBody\";\n\n/**\n * Contains the header content of the dialog, including the title and description.\n */\nconst AlertDialogHeader = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"flex flex-col space-y-2 text-center sm:text-start\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nAlertDialogHeader.displayName = \"AlertDialogHeader\";\n\n/**\n * Contains the footer content of the dialog, including the action and cancel buttons.\n */\nconst AlertDialogFooter = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nAlertDialogFooter.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 */\nconst AlertDialogTitle = 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(\n\t\t\t\"text-strong text-center text-lg font-medium sm:text-start\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nAlertDialogTitle.displayName = \"AlertDialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n *\n * Alternatively, you can provide `aria-describedby` to `AlertDialogContent` and\n * exclude this component.\n */\nconst AlertDialogDescription = 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(\n\t\t\t\"text-body text-center text-sm font-normal sm:text-start\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nAlertDialogDescription.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 */\nconst AlertDialogAction = 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);\nAlertDialogAction.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 */\nconst AlertDialogCancel = 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);\nAlertDialogCancel.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 */\nconst AlertDialogIcon = forwardRef<ComponentRef<\"svg\">, AlertDialogIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertDialogContext();\n\t\tconst defaultColor =\n\t\t\tctx.priority === \"danger\" ? \"text-danger-600\" : \"text-accent-600\";\n\t\tconst defaultIcon = ctx.priority === \"danger\" ? <Warning /> : <Info />;\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);\nAlertDialogIcon.displayName = \"AlertDialogIcon\";\n\n/**\n * A button that closes the Alert Dialog. (Unstyled)\n */\nconst AlertDialogClose = AlertDialogPrimitive.Close;\n\nexport {\n\t//,\n\tAlertDialog,\n\tAlertDialogAction,\n\tAlertDialogBody,\n\tAlertDialogCancel,\n\tAlertDialogClose,\n\tAlertDialogContent,\n\tAlertDialogDescription,\n\tAlertDialogFooter,\n\tAlertDialogHeader,\n\tAlertDialogIcon,\n\tAlertDialogTitle,\n\tAlertDialogTrigger,\n};\n"],"mappings":"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","names":["Info","Warning","createContext","forwardRef","useContext","invariant","jsx","jsxs","AlertDialogContext","createContext","useAlertDialogContext","context","useContext","invariant","AlertDialog","priority","props","jsx","Root","AlertDialogTrigger","Trigger","AlertDialogPortal","Portal","AlertDialogOverlay","forwardRef","className","ref","Overlay","cx","AlertDialogContent","onInteractOutside","onPointerDownOutside","jsxs","Content","event","preventCloseOnPromptInteraction","AlertDialogBody","AlertDialogHeader","AlertDialogFooter","AlertDialogTitle","Title","AlertDialogDescription","Description","AlertDialogAction","appearance","ctx","buttonPriority","Button","AlertDialogCancel","Close","AlertDialogIcon","svg","defaultColor","defaultIcon","Warning","Info","SvgOnly","AlertDialogClose"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Info } from \"@phosphor-icons/react/Info\";\nimport { Warning } 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 { cx } from \"../../utils/cx/cx.js\";\nimport {\n\tButton,\n\ttype ButtonPriority,\n\ttype ButtonProps,\n} 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 { 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(\n\t\tcontext,\n\t\t\"AlertDialog child component used outside of AlertDialog parent!\",\n\t);\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 * The root component for the Alert Dialog\n */\nfunction AlertDialog({ priority, ...props }: AlertDialogProps) {\n\tconst context: AlertDialogContextValue = useMemo(\n\t\t() => ({ priority }),\n\t\t[priority],\n\t);\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}\nAlertDialog.displayName = \"AlertDialog\";\n\n/**\n * A button that opens the Alert Dialog.\n */\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger;\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal;\n\n/**\n * A layer that covers the inert portion of the view when the dialog is open.\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-sm\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t\tref={ref}\n\t/>\n));\nAlertDialogOverlay.displayName = \"AlertDialogOverlay\";\n\n/**\n * The popover alert dialog container.\n *\n * Renders on top of the overlay and is centered in the viewport.\n */\nconst AlertDialogContent = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, onInteractOutside, onPointerDownOutside, ...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\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"flex w-full max-w-md flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start\",\n\t\t\t\t\t\"outline-none focus-within:outline-none\",\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\tclassName,\n\t\t\t\t)}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t</AlertDialogPortal>\n));\nAlertDialogContent.displayName = \"AlertDialogContent\";\n\n/**\n * Contains the main content of the dialog.\n */\nconst AlertDialogBody = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div className={cx(\"flex-1 space-y-4\", className)} {...props} />\n);\nAlertDialogBody.displayName = \"AlertDialogBody\";\n\n/**\n * Contains the header content of the dialog, including the title and description.\n */\nconst AlertDialogHeader = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"flex flex-col space-y-2 text-center sm:text-start\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nAlertDialogHeader.displayName = \"AlertDialogHeader\";\n\n/**\n * Contains the footer content of the dialog, including the action and cancel buttons.\n */\nconst AlertDialogFooter = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nAlertDialogFooter.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 */\nconst AlertDialogTitle = 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(\n\t\t\t\"text-strong text-center text-lg font-medium sm:text-start\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nAlertDialogTitle.displayName = \"AlertDialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n *\n * Alternatively, you can provide `aria-describedby` to `AlertDialogContent` and\n * exclude this component.\n */\nconst AlertDialogDescription = 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(\n\t\t\t\"text-body text-center text-sm font-normal sm:text-start\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nAlertDialogDescription.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 */\nconst AlertDialogAction = 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);\nAlertDialogAction.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 */\nconst AlertDialogCancel = 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);\nAlertDialogCancel.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 */\nconst AlertDialogIcon = forwardRef<ComponentRef<\"svg\">, AlertDialogIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertDialogContext();\n\t\tconst defaultColor =\n\t\t\tctx.priority === \"danger\" ? \"text-danger-600\" : \"text-accent-600\";\n\t\tconst defaultIcon = ctx.priority === \"danger\" ? <Warning /> : <Info />;\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);\nAlertDialogIcon.displayName = \"AlertDialogIcon\";\n\n/**\n * A button that closes the Alert Dialog. (Unstyled)\n */\nconst AlertDialogClose = AlertDialogPrimitive.Close;\n\nexport {\n\t//,\n\tAlertDialog,\n\tAlertDialogAction,\n\tAlertDialogBody,\n\tAlertDialogCancel,\n\tAlertDialogClose,\n\tAlertDialogContent,\n\tAlertDialogDescription,\n\tAlertDialogFooter,\n\tAlertDialogHeader,\n\tAlertDialogIcon,\n\tAlertDialogTitle,\n\tAlertDialogTrigger,\n};\n"],"mappings":"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","names":["Info","Warning","createContext","forwardRef","useContext","useMemo","invariant","jsx","jsxs","AlertDialogContext","createContext","useAlertDialogContext","context","useContext","invariant","AlertDialog","priority","props","useMemo","jsx","Root","AlertDialogTrigger","Trigger","AlertDialogPortal","Portal","AlertDialogOverlay","forwardRef","className","ref","Overlay","cx","AlertDialogContent","onInteractOutside","onPointerDownOutside","jsxs","Content","event","preventCloseOnPromptInteraction","AlertDialogBody","AlertDialogHeader","AlertDialogFooter","AlertDialogTitle","Title","AlertDialogDescription","Description","AlertDialogAction","appearance","ctx","buttonPriority","Button","AlertDialogCancel","Close","AlertDialogIcon","svg","defaultColor","defaultIcon","Warning","Info","SvgOnly","AlertDialogClose"]}
|
package/dist/alert.d.ts
CHANGED
|
@@ -1,26 +1,110 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { HTMLAttributes } from 'react';
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import { ComponentProps, HTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
import { W as WithAsChild } from './as-child-Cvu56SuO.js';
|
|
4
|
+
import { S as SvgAttributes } from './types-BuKAGhC-.js';
|
|
6
5
|
|
|
6
|
+
declare const priorities: readonly ["danger", "info", "success", "warning"];
|
|
7
|
+
type Priority = (typeof priorities)[number];
|
|
8
|
+
type AlertProps = ComponentProps<"div"> & {
|
|
9
|
+
/**
|
|
10
|
+
* Indicates the importance or impact level of the Alert, affecting its
|
|
11
|
+
* color and styling to communicate its purpose to the user.
|
|
12
|
+
*/
|
|
13
|
+
priority: Priority;
|
|
14
|
+
};
|
|
7
15
|
/**
|
|
8
|
-
* Displays a callout for user attention.
|
|
16
|
+
* Displays a callout for user attention. Root container for all Alert sub-components.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* <Alert priority="info">
|
|
20
|
+
* <AlertIcon />
|
|
21
|
+
* <AlertContent>
|
|
22
|
+
* <AlertTitle>Alert Title</AlertTitle>
|
|
23
|
+
* <AlertDescription>
|
|
24
|
+
* Alert description text.
|
|
25
|
+
* </AlertDescription>
|
|
26
|
+
* </AlertContent>
|
|
27
|
+
* </Alert>
|
|
28
|
+
*
|
|
29
|
+
* @see https://mantle.ngrok.com/components/alert
|
|
9
30
|
*/
|
|
10
|
-
declare const Alert: react.ForwardRefExoticComponent<
|
|
11
|
-
|
|
12
|
-
|
|
31
|
+
declare const Alert: react.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
32
|
+
type AlertIconProps = Omit<SvgAttributes, "children"> & {
|
|
33
|
+
/**
|
|
34
|
+
* An optional icon that renders in place of the default icon for the Alert priority.
|
|
35
|
+
*/
|
|
36
|
+
svg?: ReactNode;
|
|
37
|
+
};
|
|
38
|
+
/**
|
|
39
|
+
* An optional icon that visually represents the priority of the Alert.
|
|
40
|
+
*
|
|
41
|
+
* The default rendered icon be overridden with a custom icon using the `svg` prop.
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* <Alert priority="info">
|
|
45
|
+
* <AlertIcon />
|
|
46
|
+
* <AlertContent>
|
|
47
|
+
* <AlertTitle>Alert Title</AlertTitle>
|
|
48
|
+
* <AlertDescription>
|
|
49
|
+
* Alert description text.
|
|
50
|
+
* </AlertDescription>
|
|
51
|
+
* </AlertContent>
|
|
52
|
+
* </Alert>
|
|
53
|
+
*
|
|
54
|
+
* @see https://mantle.ngrok.com/components/alert
|
|
55
|
+
*/
|
|
56
|
+
declare const AlertIcon: react.ForwardRefExoticComponent<Omit<AlertIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
13
57
|
/**
|
|
14
58
|
* The container for the content slot of an alert. Place the title and description as direct children.
|
|
59
|
+
*
|
|
60
|
+
* @example
|
|
61
|
+
* <Alert priority="info">
|
|
62
|
+
* <AlertIcon />
|
|
63
|
+
* <AlertContent>
|
|
64
|
+
* <AlertTitle>Alert Title</AlertTitle>
|
|
65
|
+
* <AlertDescription>
|
|
66
|
+
* Alert description text.
|
|
67
|
+
* </AlertDescription>
|
|
68
|
+
* </AlertContent>
|
|
69
|
+
* </Alert>
|
|
70
|
+
*
|
|
71
|
+
* @see https://mantle.ngrok.com/components/alert
|
|
15
72
|
*/
|
|
16
|
-
declare const AlertContent: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
|
|
73
|
+
declare const AlertContent: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
17
74
|
/**
|
|
18
|
-
* The title of an alert.
|
|
75
|
+
* The title of an alert. Default renders as an h5 element, use asChild to render something else.
|
|
76
|
+
*
|
|
77
|
+
* @example
|
|
78
|
+
* <Alert priority="info">
|
|
79
|
+
* <AlertIcon />
|
|
80
|
+
* <AlertContent>
|
|
81
|
+
* <AlertTitle>Alert Title</AlertTitle>
|
|
82
|
+
* <AlertDescription>
|
|
83
|
+
* Alert description text.
|
|
84
|
+
* </AlertDescription>
|
|
85
|
+
* </AlertContent>
|
|
86
|
+
* </Alert>
|
|
87
|
+
*
|
|
88
|
+
* @see https://mantle.ngrok.com/components/alert
|
|
19
89
|
*/
|
|
20
|
-
declare const AlertTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & react.RefAttributes<
|
|
90
|
+
declare const AlertTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & react.RefAttributes<HTMLHeadingElement>>;
|
|
91
|
+
type AlertDescriptionProps = ComponentProps<"p"> & WithAsChild;
|
|
21
92
|
/**
|
|
22
|
-
* The description of an alert.
|
|
93
|
+
* The optional description of an alert. Default renders as an p element, use asChild to render something else.
|
|
94
|
+
*
|
|
95
|
+
* @example
|
|
96
|
+
* <Alert priority="info">
|
|
97
|
+
* <AlertIcon />
|
|
98
|
+
* <AlertContent>
|
|
99
|
+
* <AlertTitle>Alert Title</AlertTitle>
|
|
100
|
+
* <AlertDescription>
|
|
101
|
+
* Alert description text.
|
|
102
|
+
* </AlertDescription>
|
|
103
|
+
* </AlertContent>
|
|
104
|
+
* </Alert>
|
|
105
|
+
*
|
|
106
|
+
* @see https://mantle.ngrok.com/components/alert
|
|
23
107
|
*/
|
|
24
|
-
declare const AlertDescription: react.ForwardRefExoticComponent<
|
|
108
|
+
declare const AlertDescription: react.ForwardRefExoticComponent<Omit<AlertDescriptionProps, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
|
|
25
109
|
|
|
26
|
-
export { Alert, AlertContent, AlertDescription, AlertTitle };
|
|
110
|
+
export { Alert, AlertContent, AlertDescription, AlertIcon, AlertTitle };
|
package/dist/alert.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"./chunk-AZ56JGNY.js";import{cva as
|
|
1
|
+
import{a as p}from"./chunk-HDPLH5HC.js";import{a as s}from"./chunk-AZ56JGNY.js";import{CheckCircle as g}from"@phosphor-icons/react/CheckCircle";import{Info as y}from"@phosphor-icons/react/Info";import{Warning as x}from"@phosphor-icons/react/Warning";import{WarningDiamond as v}from"@phosphor-icons/react/WarningDiamond";import{Slot as a}from"@radix-ui/react-slot";import{cva as P}from"class-variance-authority";import{createContext as b,forwardRef as l,useContext as N,useMemo as R}from"react";import h from"tiny-invariant";import{jsx as r}from"react/jsx-runtime";var c=b(null);function w(){let t=N(c);return h(t,"useAlertContext hook used outside of Alert parent!"),t}var T=P("relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm",{variants:{priority:{danger:"border-danger-500/50 bg-danger-500/10 text-danger-700",info:"border-accent-500/50 bg-accent-500/10 text-accent-700",success:"border-success-500/50 bg-success-500/10 text-success-700",warning:"border-warning-500/50 bg-warning-500/10 text-warning-700"}}}),m=l(({className:t,priority:e,...o},n)=>{let i=R(()=>({priority:e}),[e]);return r(c.Provider,{value:i,children:r("div",{ref:n,className:s(T({priority:e}),t),...o})})});m.displayName="Alert";var I={danger:r(x,{}),info:r(y,{}),success:r(g,{}),warning:r(v,{})},d=l(({className:t,svg:e,...o},n)=>{let i=w(),C=I[i.priority];return r(p,{ref:n,className:s("size-5",t),svg:e??C,...o})});d.displayName="AlertIcon";var f=l(({className:t,...e},o)=>r("div",{ref:o,className:s("min-w-0 flex-1",t),...e}));f.displayName="AlertContent";var A=l(({asChild:t=!1,className:e,...o},n)=>r(t?a:"h5",{ref:n,className:s("font-medium",e),...o}));A.displayName="AlertTitle";var u=l(({asChild:t=!1,className:e,...o},n)=>r(t?a:"p",{ref:n,className:s("text-sm",e),...o}));u.displayName="AlertDescription";export{m as Alert,f as AlertContent,u as AlertDescription,d as AlertIcon,A as AlertTitle};
|
|
2
2
|
//# sourceMappingURL=alert.js.map
|
package/dist/alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/alert/alert.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../src/components/alert/alert.tsx"],"sourcesContent":["import { CheckCircle } from \"@phosphor-icons/react/CheckCircle\";\nimport { Info } from \"@phosphor-icons/react/Info\";\nimport { Warning } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamond } from \"@phosphor-icons/react/WarningDiamond\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport type {\n\tComponentProps,\n\tComponentRef,\n\tHTMLAttributes,\n\tReactNode,\n} from \"react\";\nimport { createContext, forwardRef, useContext, useMemo } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"info\",\n\t// \"neutral\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\ntype AlertContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertContext = createContext<AlertContextValue | null>(null);\n\nfunction useAlertContext() {\n\tconst context = useContext(AlertContext);\n\tinvariant(context, \"useAlertContext hook used outside of Alert parent!\");\n\treturn context;\n}\n\nconst alertVariants = cva(\n\t\"relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * The priority of the Alert. Indicates the importance or impact level of the Alert,\n\t\t\t * affecting its color and styling to communicate its purpose to the user.\n\t\t\t */\n\t\t\tpriority: {\n\t\t\t\tdanger: \"border-danger-500/50 bg-danger-500/10 text-danger-700\",\n\t\t\t\tinfo: \"border-accent-500/50 bg-accent-500/10 text-accent-700\",\n\t\t\t\t// neutral: \"border-neutral-500/50 bg-neutral-500/10 text-neutral-700\",\n\t\t\t\tsuccess: \"border-success-500/50 bg-success-500/10 text-success-700\",\n\t\t\t\twarning: \"border-warning-500/50 bg-warning-500/10 text-warning-700\",\n\t\t\t} as const satisfies Record<Priority, string>,\n\t\t},\n\t},\n);\n\ntype AlertProps = ComponentProps<\"div\"> & {\n\t/**\n\t * Indicates the importance or impact level of the Alert, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n};\n\n/**\n * Displays a callout for user attention. Root container for all Alert sub-components.\n *\n * @example\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *\n * @see https://mantle.ngrok.com/components/alert\n */\nconst Alert = forwardRef<ComponentRef<\"div\">, AlertProps>(\n\t({ className, priority, ...props }, ref) => {\n\t\tconst context: AlertContextValue = useMemo(\n\t\t\t() => ({ priority }),\n\t\t\t[priority],\n\t\t);\n\n\t\treturn (\n\t\t\t<AlertContext.Provider value={context}>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(alertVariants({ priority }), className)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</AlertContext.Provider>\n\t\t);\n\t},\n);\nAlert.displayName = \"Alert\";\n\ntype AlertIconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * An optional icon that renders in place of the default icon for the Alert priority.\n\t */\n\tsvg?: ReactNode;\n};\n\n/**\n * Default `<AlertIcon>` icons for each priority.\n */\nconst defaultIcons = {\n\tdanger: <Warning />,\n\tinfo: <Info />,\n\t// neutral: <BellRinging />,\n\tsuccess: <CheckCircle />,\n\twarning: <WarningDiamond />,\n} as const satisfies Record<Priority, ReactNode>;\n\n/**\n * An optional icon that visually represents the priority of the Alert.\n *\n * The default rendered icon be overridden with a custom icon using the `svg` prop.\n *\n * @example\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *\n * @see https://mantle.ngrok.com/components/alert\n */\nconst AlertIcon = forwardRef<ComponentRef<\"svg\">, AlertIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertContext();\n\t\tconst defaultIcon = defaultIcons[ctx.priority];\n\n\t\treturn (\n\t\t\t<SvgOnly\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"size-5\", className)}\n\t\t\t\tsvg={svg ?? defaultIcon}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAlertIcon.displayName = \"AlertIcon\";\n\n/**\n * The container for the content slot of an alert. Place the title and description as direct children.\n *\n * @example\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *\n * @see https://mantle.ngrok.com/components/alert\n */\nconst AlertContent = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ className, ...props }, ref) => (\n\t\t<div ref={ref} className={cx(\"min-w-0 flex-1\", className)} {...props} />\n\t),\n);\nAlertContent.displayName = \"AlertContent\";\n\ntype AlertTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of an alert. Default renders as an h5 element, use asChild to render something else.\n *\n * @example\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *\n * @see https://mantle.ngrok.com/components/alert\n */\nconst AlertTitle = forwardRef<HTMLHeadingElement, AlertTitleProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"h5\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"font-medium\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAlertTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = ComponentProps<\"p\"> & WithAsChild;\n\n/**\n * The optional description of an alert. Default renders as an p element, use asChild to render something else.\n *\n * @example\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *\n * @see https://mantle.ngrok.com/components/alert\n */\nconst AlertDescription = forwardRef<ComponentRef<\"p\">, AlertDescriptionProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"p\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"text-sm\", className)} {...props} />\n\t\t);\n\t},\n);\nAlertDescription.displayName = \"AlertDescription\";\n\nexport {\n\t//,\n\tAlert,\n\tAlertContent,\n\tAlertDescription,\n\tAlertIcon,\n\tAlertTitle,\n};\n"],"mappings":"gFAAA,OAAS,eAAAA,MAAmB,oCAC5B,OAAS,QAAAC,MAAY,6BACrB,OAAS,WAAAC,MAAe,gCACxB,OAAS,kBAAAC,MAAsB,uCAC/B,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BAOpB,OAAS,iBAAAC,EAAe,cAAAC,EAAY,cAAAC,EAAY,WAAAC,MAAe,QAC/D,OAAOC,MAAe,iBAgFlB,cAAAC,MAAA,oBA5DJ,IAAMC,EAAeC,EAAwC,IAAI,EAEjE,SAASC,GAAkB,CAC1B,IAAMC,EAAUC,EAAWJ,CAAY,EACvC,OAAAK,EAAUF,EAAS,oDAAoD,EAChEA,CACR,CAEA,IAAMG,EAAgBC,EACrB,+DACA,CACC,SAAU,CAKT,SAAU,CACT,OAAQ,wDACR,KAAM,wDAEN,QAAS,2DACT,QAAS,0DACV,CACD,CACD,CACD,EA0BMC,EAAQC,EACb,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CAC3C,IAAMV,EAA6BW,EAClC,KAAO,CAAE,SAAAH,CAAS,GAClB,CAACA,CAAQ,CACV,EAEA,OACCI,EAACf,EAAa,SAAb,CAAsB,MAAOG,EAC7B,SAAAY,EAAC,OACA,IAAKF,EACL,UAAWG,EAAGV,EAAc,CAAE,SAAAK,CAAS,CAAC,EAAGD,CAAS,EACnD,GAAGE,EACL,EACD,CAEF,CACD,EACAJ,EAAM,YAAc,QAYpB,IAAMS,EAAe,CACpB,OAAQF,EAACG,EAAA,EAAQ,EACjB,KAAMH,EAACI,EAAA,EAAK,EAEZ,QAASJ,EAACK,EAAA,EAAY,EACtB,QAASL,EAACM,EAAA,EAAe,CAC1B,EAoBMC,EAAYb,EACjB,CAAC,CAAE,UAAAC,EAAW,IAAAa,EAAK,GAAGX,CAAM,EAAGC,IAAQ,CACtC,IAAMW,EAAMtB,EAAgB,EACtBuB,EAAcR,EAAaO,EAAI,QAAQ,EAE7C,OACCT,EAACW,EAAA,CACA,IAAKb,EACL,UAAWG,EAAG,SAAUN,CAAS,EACjC,IAAKa,GAAOE,EACX,GAAGb,EACL,CAEF,CACD,EACAU,EAAU,YAAc,YAkBxB,IAAMK,EAAelB,EACpB,CAAC,CAAE,UAAAC,EAAW,GAAGE,CAAM,EAAGC,IACzBE,EAAC,OAAI,IAAKF,EAAK,UAAWG,EAAG,iBAAkBN,CAAS,EAAI,GAAGE,EAAO,CAExE,EACAe,EAAa,YAAc,eAoB3B,IAAMC,EAAanB,EAClB,CAAC,CAAE,QAAAoB,EAAU,GAAO,UAAAnB,EAAW,GAAGE,CAAM,EAAGC,IAIzCE,EAHiBc,EAAUC,EAAO,KAGjC,CACA,IAAKjB,EACL,UAAWG,EAAG,cAAeN,CAAS,EACrC,GAAGE,EACL,CAGH,EACAgB,EAAW,YAAc,aAoBzB,IAAMG,EAAmBtB,EACxB,CAAC,CAAE,QAAAoB,EAAU,GAAO,UAAAnB,EAAW,GAAGE,CAAM,EAAGC,IAIzCE,EAHiBc,EAAUC,EAAO,IAGjC,CAAU,IAAKjB,EAAK,UAAWG,EAAG,UAAWN,CAAS,EAAI,GAAGE,EAAO,CAGxE,EACAmB,EAAiB,YAAc","names":["CheckCircle","Info","Warning","WarningDiamond","Slot","cva","createContext","forwardRef","useContext","useMemo","invariant","jsx","AlertContext","createContext","useAlertContext","context","useContext","invariant","alertVariants","cva","Alert","forwardRef","className","priority","props","ref","useMemo","jsx","cx","defaultIcons","Warning","Info","CheckCircle","WarningDiamond","AlertIcon","svg","ctx","defaultIcon","SvgOnly","AlertContent","AlertTitle","asChild","Slot","AlertDescription"]}
|