@ngrok/mantle 0.19.15 → 0.19.17
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
CHANGED
|
@@ -140,5 +140,9 @@ type AlertDialogIconProps = Omit<SvgAttributes, "children"> & {
|
|
|
140
140
|
* Can be overridden with a custom icon using the `svg` prop.
|
|
141
141
|
*/
|
|
142
142
|
declare const AlertDialogIcon: react.ForwardRefExoticComponent<Omit<AlertDialogIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
143
|
+
/**
|
|
144
|
+
* A button that closes the Alert Dialog. (Unstyled)
|
|
145
|
+
*/
|
|
146
|
+
declare const AlertDialogClose: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
|
|
143
147
|
|
|
144
|
-
export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogIcon, AlertDialogTitle, AlertDialogTrigger };
|
|
148
|
+
export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogIcon, AlertDialogTitle, AlertDialogTrigger };
|
package/dist/alert-dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a 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-ITLSGPZ5.js";import{g}from"./chunk-WIYEFPO2.js";import"./chunk-DOTYPWKO.js";import"./chunk-D3XF6J5A.js";import{b as m}from"./chunk-YZDIHCOF.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-3BZ333PP.js";import{a as c}from"./chunk-IQCYQ6RC.js";import{a as r}from"./chunk-AZ56JGNY.js";import{Info as W}from"@phosphor-icons/react/Info";import{Warning as F}from"@phosphor-icons/react/Warning";import{createContext as H,forwardRef as s,useContext as S}from"react";import j from"tiny-invariant";import{jsx as o,jsxs as G}from"react/jsx-runtime";var v=H(null);function x(){let t=S(v);return j(t,"AlertDialog child component used outside of AlertDialog parent!"),t}function C({priority:t,...e}){return o(v.Provider,{value:{priority:t},children:o(d,{...e})})}C.displayName="AlertDialog";var V=f,k=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(k,{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=x(),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 E=s(({className:t,svg:e,...i},a)=>{let l=x(),n=l.priority==="danger"?"text-danger-600":"text-accent-600",z=l.priority==="danger"?o(F,{}):o(W,{});return o(c,{ref:a,className:r("size-12 sm:size-7",n,t),svg:e??z,...i})});E.displayName="AlertDialogIcon";var q=p;export{C as AlertDialog,T as AlertDialogAction,b as AlertDialogBody,w as AlertDialogCancel,q as AlertDialogClose,R as AlertDialogContent,I as AlertDialogDescription,O as AlertDialogFooter,h as AlertDialogHeader,E as AlertDialogIcon,B as AlertDialogTitle,V 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 ElementRef,\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\tElementRef<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\tElementRef<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\tElementRef<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\tElementRef<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<ElementRef<\"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<ElementRef<\"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<ElementRef<\"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\nexport {\n\t//,\n\tAlertDialog,\n\tAlertDialogAction,\n\tAlertDialogBody,\n\tAlertDialogCancel,\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"]}
|
|
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 ElementRef,\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\tElementRef<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\tElementRef<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\tElementRef<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\tElementRef<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<ElementRef<\"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<ElementRef<\"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<ElementRef<\"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":"4ZAEA,OAAS,QAAAA,MAAY,6BACrB,OAAS,WAAAC,MAAe,gCACxB,OAKC,iBAAAC,EACA,cAAAC,EACA,cAAAC,MACM,QACP,OAAOC,MAAe,iBA4CnB,cAAAC,EAwCF,QAAAC,MAxCE,oBAzBH,IAAMC,EAAqBC,EAA8C,IAAI,EAE7E,SAASC,GAAwB,CAChC,IAAMC,EAAUC,EAAWJ,CAAkB,EAC7C,OAAAK,EACCF,EACA,iEACD,EACOA,CACR,CAaA,SAASG,EAAY,CAAE,SAAAC,EAAU,GAAGC,CAAM,EAAqB,CAC9D,OACCC,EAACT,EAAmB,SAAnB,CAA4B,MAAO,CAAE,SAAAO,CAAS,EAC9C,SAAAE,EAAsBC,EAArB,CAA2B,GAAGF,EAAO,EACvC,CAEF,CACAF,EAAY,YAAc,cAK1B,IAAMK,EAA0CC,EAE1CC,EAAyCC,EAKzCC,EAAqBC,EAGzB,CAAC,CAAE,UAAAC,EAAW,GAAGT,CAAM,EAAGU,IAC3BT,EAAsBU,EAArB,CACA,UAAWC,EACV,iKACAH,CACD,EACC,GAAGT,EACJ,IAAKU,EACN,CACA,EACDH,EAAmB,YAAc,qBAOjC,IAAMM,EAAqBL,EAGzB,CAAC,CAAE,UAAAC,EAAW,kBAAAK,EAAmB,qBAAAC,EAAsB,GAAGf,CAAM,EAAGU,IACpEM,EAACX,EAAA,CACA,UAAAJ,EAACM,EAAA,EAAmB,EACpBN,EAAC,OAAI,UAAU,sDACd,SAAAA,EAAsBgB,EAArB,CACA,IAAKP,EACL,UAAWE,EACV,qFACA,yCACA,MACA,wFACA,2KACAH,CACD,EACA,kBAAoBS,GAAU,CAC7BC,EAAgCD,CAAK,EACrCJ,IAAoBI,CAAK,CAC1B,EACA,qBAAuBA,GAAU,CAChCC,EAAgCD,CAAK,EACrCH,IAAuBG,CAAK,CAC7B,EACC,GAAGlB,EACL,EACD,GACD,CACA,EACDa,EAAmB,YAAc,qBAKjC,IAAMO,EAAkB,CAAC,CAAE,UAAAX,EAAW,GAAGT,CAAM,IAC9CC,EAAC,OAAI,UAAWW,EAAG,mBAAoBH,CAAS,EAAI,GAAGT,EAAO,EAE/DoB,EAAgB,YAAc,kBAK9B,IAAMC,EAAoB,CAAC,CAAE,UAAAZ,EAAW,GAAGT,CAAM,IAChDC,EAAC,OACA,UAAWW,EACV,oDACAH,CACD,EACC,GAAGT,EACL,EAEDqB,EAAkB,YAAc,oBAKhC,IAAMC,EAAoB,CAAC,CAAE,UAAAb,EAAW,GAAGT,CAAM,IAChDC,EAAC,OACA,UAAWW,EACV,gEACAH,CACD,EACC,GAAGT,EACL,EAEDsB,EAAkB,YAAc,oBAQhC,IAAMC,EAAmBf,EAGvB,CAAC,CAAE,UAAAC,EAAW,GAAGT,CAAM,EAAGU,IAC3BT,EAAsBuB,EAArB,CACA,IAAKd,EACL,UAAWE,EACV,4DACAH,CACD,EACC,GAAGT,EACL,CACA,EACDuB,EAAiB,YAAc,mBAQ/B,IAAME,EAAyBjB,EAG7B,CAAC,CAAE,UAAAC,EAAW,GAAGT,CAAM,EAAGU,IAC3BT,EAAsByB,EAArB,CACA,IAAKhB,EACL,UAAWE,EACV,0DACAH,CACD,EACC,GAAGT,EACL,CACA,EACDyB,EAAuB,YAAc,yBAWrC,IAAME,EAAoBnB,EACzB,CACC,CAEC,WAAAoB,EAAa,SACb,GAAG5B,CACJ,EACAU,IACI,CACJ,IAAMmB,EAAMnC,EAAsB,EAC9BoC,EAA8C,UAClD,OAAID,EAAI,WAAa,WACpBC,EAAiB,UAIjB7B,EAAC8B,EAAA,CAEA,WAAYH,EACZ,SAAUE,EACV,IAAKpB,EACJ,GAAGV,EACL,CAEF,CACD,EACA2B,EAAkB,YAAc,oBAUhC,IAAMK,EAAoBxB,EACzB,CACC,CAEC,WAAAoB,EAAa,WACb,UAAAnB,EACA,SAAAV,EAAW,UACX,GAAGC,CACJ,EACAU,IAEAT,EAAsBgC,EAArB,CAA2B,QAAO,GAClC,SAAAhC,EAAC8B,EAAA,CACA,WAAYH,EACZ,UAAWhB,EAAG,eAAgBH,CAAS,EACvC,SAAUV,EACV,IAAKW,EACJ,GAAGV,EACL,EACD,CAEF,EACAgC,EAAkB,YAAc,oBAchC,IAAME,EAAkB1B,EACvB,CAAC,CAAE,UAAAC,EAAW,IAAA0B,EAAK,GAAGnC,CAAM,EAAGU,IAAQ,CACtC,IAAMmB,EAAMnC,EAAsB,EAC5B0C,EACLP,EAAI,WAAa,SAAW,kBAAoB,kBAC3CQ,EAAcR,EAAI,WAAa,SAAW5B,EAACqC,EAAA,EAAQ,EAAKrC,EAACsC,EAAA,EAAK,EAEpE,OACCtC,EAACuC,EAAA,CACA,IAAK9B,EACL,UAAWE,EAAG,oBAAqBwB,EAAc3B,CAAS,EAC1D,IAAK0B,GAAOE,EACX,GAAGrC,EACL,CAEF,CACD,EACAkC,EAAgB,YAAc,kBAK9B,IAAMO,EAAwCR","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"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "mantle is ngrok's UI library and design system.",
|
|
4
4
|
"author": "ngrok",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "0.19.
|
|
6
|
+
"version": "0.19.17",
|
|
7
7
|
"homepage": "https://mantle.ngrok.com",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"@radix-ui/react-switch": "1.1.3",
|
|
38
38
|
"@radix-ui/react-tabs": "1.1.3",
|
|
39
39
|
"@radix-ui/react-tooltip": "1.1.8",
|
|
40
|
-
"@tanstack/react-table": "8.
|
|
40
|
+
"@tanstack/react-table": "8.21.2",
|
|
41
41
|
"@uidotdev/usehooks": "2.4.1",
|
|
42
42
|
"class-variance-authority": "0.7.1",
|
|
43
43
|
"clsx": "2.1.1",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"@testing-library/jest-dom": "6.6.3",
|
|
55
55
|
"@testing-library/react": "16.2.0",
|
|
56
56
|
"@testing-library/user-event": "14.6.1",
|
|
57
|
-
"@types/node": "22.13.
|
|
57
|
+
"@types/node": "22.13.4",
|
|
58
58
|
"@types/prismjs": "1.26.5",
|
|
59
59
|
"@types/react": "18.3.18",
|
|
60
60
|
"@types/react-dom": "18.3.5",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"typescript": "5.7.3",
|
|
74
74
|
"vite": "5.4.14",
|
|
75
75
|
"vitest": "3.0.5",
|
|
76
|
-
"zod": "3.24.
|
|
76
|
+
"zod": "3.24.2",
|
|
77
77
|
"@cfg/tsconfig": "1.0.0"
|
|
78
78
|
},
|
|
79
79
|
"peerDependencies": {
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
"react": "^18.3.1",
|
|
84
84
|
"react-dom": "^18.3.1",
|
|
85
85
|
"tailwindcss": "^3.4.17",
|
|
86
|
-
"zod": "^3.24.
|
|
86
|
+
"zod": "^3.24.2"
|
|
87
87
|
},
|
|
88
88
|
"exports": {
|
|
89
89
|
"./mantle.css": "./assets/mantle.css",
|