@ngrok/mantle 0.1.32 → 0.1.34

package/dist/dialog.js

@@ -1,2 +1,2 @@
-import{a as m}from"./chunk-OWOC2ZMA.js";import"./chunk-VCISMRMX.js";import"./chunk-MODFDUXR.js";import"./chunk-YPS473FU.js";import"./chunk-GJVJTVHQ.js";import{a as l}from"./chunk-A5H52ODC.js";import{X as C}from"@phosphor-icons/react/X";import*as t from"@radix-ui/react-dialog";import{forwardRef as r}from"react";import{jsx as a,jsxs as P}from"react/jsx-runtime";var x=t.Root,b=t.Trigger,d=t.Portal,N=t.Close,n=r(({className:o,...e},i)=>a(t.Overlay,{ref:i,className:l("fixed inset-0 z-50 bg-overlay backdrop-blur-sm data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0",o),...e}));n.displayName=t.Overlay.displayName;var g=r(({className:o,children:e,...i},s)=>P(d,{children:[a(n,{}),a(t.Content,{ref:s,className:l("fixed left-1/2 top-1/2 z-50 flex max-h-[calc(100dvh_-_2rem)] w-full max-w-lg -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl border border-dialog bg-dialog 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-closed:slide-out-to-left-1/2 data-state-closed:slide-out-to-top-[48%] data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-state-open:slide-in-from-left-1/2 data-state-open:slide-in-from-top-[48%]",o),...i,children:e})]}));g.displayName=t.Content.displayName;var p=({className:o,children:e,...i})=>P("div",{className:l("relative min-h-16 border-b border-dialog-muted px-4 py-6 text-strong",o),...i,children:[a(D,{className:"absolute right-4 top-3.5 float-right"}),e]});p.displayName="DialogHeader";var D=({size:o="md",type:e="button",label:i="Close Dialog",appearance:s="ghost",...u})=>a(t.Close,{asChild:!0,children:a(m,{appearance:s,icon:a(C,{}),label:i,size:o,type:e,...u})}),c=({className:o,...e})=>a("div",{className:l("scrollbar flex-1 overflow-y-auto p-4 text-body",o),...e});c.displayName="DialogBody";var f=({className:o,...e})=>a("div",{className:l("flex shrink-0 flex-row-reverse gap-2 border-t border-dialog-muted px-4 py-3",o),...e});f.displayName="DialogFooter";var v=r(({className:o,...e},i)=>a(t.Title,{ref:i,className:l("text-lg font-medium leading-none text-strong",o),...e}));v.displayName=t.Title.displayName;var y=r(({className:o,...e},i)=>a(t.Description,{ref:i,className:l("text-muted",o),...e}));y.displayName=t.Description.displayName;export{x as Dialog,c as DialogBody,N as DialogClose,D as DialogCloseIconButton,g as DialogContent,y as DialogDescription,f as DialogFooter,p as DialogHeader,n as DialogOverlay,d as DialogPortal,v as DialogTitle,b as DialogTrigger};
+import{a as m}from"./chunk-OWOC2ZMA.js";import"./chunk-VCISMRMX.js";import"./chunk-MODFDUXR.js";import"./chunk-YPS473FU.js";import"./chunk-GJVJTVHQ.js";import{a as l}from"./chunk-A5H52ODC.js";import{X as C}from"@phosphor-icons/react/X";import*as t from"@radix-ui/react-dialog";import{forwardRef as r}from"react";import{jsx as i,jsxs as P}from"react/jsx-runtime";var x=t.Root,N=t.Trigger,d=t.Portal,b=t.Close,n=r(({className:e,...o},a)=>i(t.Overlay,{ref:a,className:l("fixed inset-0 z-50 bg-overlay backdrop-blur-sm data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0",e),...o}));n.displayName=t.Overlay.displayName;var g=r(({className:e,children:o,...a},s)=>P(d,{children:[i(n,{}),i(t.Content,{className:"fixed inset-4 z-50 flex items-center justify-center",...a,children:i("div",{className:l("flex max-h-full max-w-lg flex-1 flex-col","rounded-xl border border-dialog bg-dialog 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-closed:slide-out-to-left-1/2 data-state-closed:slide-out-to-top-[48%] data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-state-open:slide-in-from-left-1/2 data-state-open:slide-in-from-top-[48%]",e),ref:s,children:o})})]}));g.displayName=t.Content.displayName;var p=({className:e,children:o,...a})=>P("div",{className:l("relative min-h-16 border-b border-dialog-muted px-4 py-6 text-strong",e),...a,children:[i(D,{className:"absolute right-4 top-3.5 float-right"}),o]});p.displayName="DialogHeader";var D=({size:e="md",type:o="button",label:a="Close Dialog",appearance:s="ghost",...u})=>i(t.Close,{asChild:!0,children:i(m,{appearance:s,icon:i(C,{}),label:a,size:e,type:o,...u})}),c=({className:e,...o})=>i("div",{className:l("scrollbar flex-1 overflow-y-auto p-4 text-body",e),...o});c.displayName="DialogBody";var f=({className:e,...o})=>i("div",{className:l("flex shrink-0 flex-row-reverse gap-2 border-t border-dialog-muted px-4 py-3",e),...o});f.displayName="DialogFooter";var v=r(({className:e,...o},a)=>i(t.Title,{ref:a,className:l("text-lg font-medium leading-none text-strong",e),...o}));v.displayName=t.Title.displayName;var y=r(({className:e,...o},a)=>i(t.Description,{ref:a,className:l("text-muted",e),...o}));y.displayName=t.Description.displayName;export{x as Dialog,c as DialogBody,b as DialogClose,D as DialogCloseIconButton,g as DialogContent,y as DialogDescription,f as DialogFooter,p as DialogHeader,n as DialogOverlay,d as DialogPortal,v as DialogTitle,N as DialogTrigger};
 //# sourceMappingURL=dialog.js.map

package/dist/dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../packages/dialog/src/dialog.tsx"],"sourcesContent":["import { X } from \"@phosphor-icons/react/X\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { IconButton, type IconButtonProps } from \"../../button\";\nimport { cx } from \"../../cx\";\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = forwardRef<\n\tElementRef<typeof DialogPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"fixed inset-0 z-50 bg-overlay backdrop-blur-sm data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = forwardRef<\n\tElementRef<typeof DialogPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n\t<DialogPortal>\n\t\t<DialogOverlay />\n\t\t<DialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"fixed left-1/2 top-1/2 z-50 flex max-h-[calc(100dvh_-_2rem)] w-full max-w-lg -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl border border-dialog bg-dialog shadow-lg transition-transform duration-200\",\n\t\t\t\t\"data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-closed:slide-out-to-left-1/2 data-state-closed:slide-out-to-top-[48%] data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-state-open:slide-in-from-left-1/2 data-state-open:slide-in-from-top-[48%]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</DialogPrimitive.Content>\n\t</DialogPortal>\n));\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cx(\"relative min-h-16 border-b border-dialog-muted px-4 py-6 text-strong\", className)} {...props}>\n\t\t<DialogCloseIconButton className=\"absolute right-4 top-3.5 float-right\" />\n\t\t{children}\n\t</div>\n);\nDialogHeader.displayName = \"DialogHeader\";\n\ntype DialogCloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\nconst DialogCloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: DialogCloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton appearance={appearance} icon={<X />} label={label} size={size} type={type} {...props} />\n\t</DialogPrimitive.Close>\n);\n\nconst DialogBody = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cx(\"scrollbar flex-1 overflow-y-auto p-4 text-body\", className)} {...props} />\n);\nDialogBody.displayName = \"DialogBody\";\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\"flex shrink-0 flex-row-reverse gap-2 border-t border-dialog-muted px-4 py-3\", className)}\n\t\t{...props}\n\t/>\n);\nDialogFooter.displayName = \"DialogFooter\";\n\nconst DialogTitle = forwardRef<\n\tElementRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-lg font-medium leading-none text-strong\", className)}\n\t\t{...props}\n\t/>\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = forwardRef<\n\tElementRef<typeof DialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description ref={ref} className={cx(\"text-muted\", className)} {...props} />\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n\tDialog,\n\tDialogPortal,\n\tDialogOverlay,\n\tDialogTrigger,\n\tDialogClose,\n\tDialogCloseIconButton,\n\tDialogContent,\n\tDialogHeader,\n\tDialogBody,\n\tDialogFooter,\n\tDialogTitle,\n\tDialogDescription,\n};\n"],"mappings":"gMAAA,OAAS,KAAAA,MAAS,0BAClB,UAAYC,MAAqB,yBACjC,OAAS,cAAAC,MAAkB,QAiB1B,cAAAC,EAeA,QAAAC,MAfA,oBAZD,IAAMC,EAAyB,OAEzBC,EAAgC,UAEhCC,EAA+B,SAE/BC,EAA8B,QAE9BC,EAAgBC,EAGpB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiB,UAAhB,CACA,IAAKU,EACL,UAAWC,EACV,iKACAH,CACD,EACC,GAAGC,EACL,CACA,EACDH,EAAc,YAA8B,UAAQ,YAEpD,IAAMM,EAAgBL,EAGpB,CAAC,CAAE,UAAAC,EAAW,SAAAK,EAAU,GAAGJ,CAAM,EAAGC,IACrCT,EAACG,EAAA,CACA,UAAAJ,EAACM,EAAA,EAAc,EACfN,EAAiB,UAAhB,CACA,IAAKU,EACL,UAAWC,EACV,gNACA,2UACAH,CACD,EACC,GAAGC,EAEH,SAAAI,EACF,GACD,CACA,EACDD,EAAc,YAA8B,UAAQ,YAEpD,IAAME,EAAe,CAAC,CAAE,UAAAN,EAAW,SAAAK,EAAU,GAAGJ,CAAM,IACrDR,EAAC,OAAI,UAAWU,EAAG,uEAAwEH,CAAS,EAAI,GAAGC,EAC1G,UAAAT,EAACe,EAAA,CAAsB,UAAU,uCAAuC,EACvEF,GACF,EAEDC,EAAa,YAAc,eAG3B,IAAMC,EAAwB,CAAC,CAC9B,KAAAC,EAAO,KACP,KAAAC,EAAO,SACP,MAAAC,EAAQ,eACR,WAAAC,EAAa,QACb,GAAGV,CACJ,IACCT,EAAiB,QAAhB,CAAsB,QAAO,GAC7B,SAAAA,EAACoB,EAAA,CAAW,WAAYD,EAAY,KAAMnB,EAACqB,EAAA,EAAE,EAAI,MAAOH,EAAO,KAAMF,EAAM,KAAMC,EAAO,GAAGR,EAAO,EACnG,EAGKa,EAAa,CAAC,CAAE,UAAAd,EAAW,GAAGC,CAAM,IACzCT,EAAC,OAAI,UAAWW,EAAG,iDAAkDH,CAAS,EAAI,GAAGC,EAAO,EAE7Fa,EAAW,YAAc,aAEzB,IAAMC,EAAe,CAAC,CAAE,UAAAf,EAAW,GAAGC,CAAM,IAC3CT,EAAC,OACA,UAAWW,EAAG,8EAA+EH,CAAS,EACrG,GAAGC,EACL,EAEDc,EAAa,YAAc,eAE3B,IAAMC,EAAcjB,EAGlB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiB,QAAhB,CACA,IAAKU,EACL,UAAWC,EAAG,+CAAgDH,CAAS,EACtE,GAAGC,EACL,CACA,EACDe,EAAY,YAA8B,QAAM,YAEhD,IAAMC,EAAoBlB,EAGxB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiB,cAAhB,CAA4B,IAAKU,EAAK,UAAWC,EAAG,aAAcH,CAAS,EAAI,GAAGC,EAAO,CAC1F,EACDgB,EAAkB,YAA8B,cAAY","names":["X","DialogPrimitive","forwardRef","jsx","jsxs","Dialog","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","forwardRef","className","props","ref","cx","DialogContent","children","DialogHeader","DialogCloseIconButton","size","type","label","appearance","IconButton","X","DialogBody","DialogFooter","DialogTitle","DialogDescription"]}
+{"version":3,"sources":["../packages/dialog/src/dialog.tsx"],"sourcesContent":["import { X } from \"@phosphor-icons/react/X\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { IconButton, type IconButtonProps } from \"../../button\";\nimport { cx } from \"../../cx\";\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = forwardRef<\n\tElementRef<typeof DialogPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"fixed inset-0 z-50 bg-overlay backdrop-blur-sm data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = forwardRef<ElementRef<\"div\">, ComponentPropsWithoutRef<typeof DialogPrimitive.Content>>(\n\t({ className, children, ...props }, ref) => (\n\t\t<DialogPortal>\n\t\t\t<DialogOverlay />\n\t\t\t<DialogPrimitive.Content className=\"fixed inset-4 z-50 flex items-center justify-center\" {...props}>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full max-w-lg flex-1 flex-col\",\n\t\t\t\t\t\t\"rounded-xl border border-dialog bg-dialog 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-closed:slide-out-to-left-1/2 data-state-closed:slide-out-to-top-[48%] data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-state-open:slide-in-from-left-1/2 data-state-open:slide-in-from-top-[48%]\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</DialogPrimitive.Content>\n\t\t</DialogPortal>\n\t),\n);\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cx(\"relative min-h-16 border-b border-dialog-muted px-4 py-6 text-strong\", className)} {...props}>\n\t\t<DialogCloseIconButton className=\"absolute right-4 top-3.5 float-right\" />\n\t\t{children}\n\t</div>\n);\nDialogHeader.displayName = \"DialogHeader\";\n\ntype DialogCloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\nconst DialogCloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: DialogCloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton appearance={appearance} icon={<X />} label={label} size={size} type={type} {...props} />\n\t</DialogPrimitive.Close>\n);\n\nconst DialogBody = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cx(\"scrollbar flex-1 overflow-y-auto p-4 text-body\", className)} {...props} />\n);\nDialogBody.displayName = \"DialogBody\";\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\"flex shrink-0 flex-row-reverse gap-2 border-t border-dialog-muted px-4 py-3\", className)}\n\t\t{...props}\n\t/>\n);\nDialogFooter.displayName = \"DialogFooter\";\n\nconst DialogTitle = forwardRef<\n\tElementRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-lg font-medium leading-none text-strong\", className)}\n\t\t{...props}\n\t/>\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = forwardRef<\n\tElementRef<typeof DialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description ref={ref} className={cx(\"text-muted\", className)} {...props} />\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n\tDialog,\n\tDialogPortal,\n\tDialogOverlay,\n\tDialogTrigger,\n\tDialogClose,\n\tDialogCloseIconButton,\n\tDialogContent,\n\tDialogHeader,\n\tDialogBody,\n\tDialogFooter,\n\tDialogTitle,\n\tDialogDescription,\n};\n"],"mappings":"gMAAA,OAAS,KAAAA,MAAS,0BAClB,UAAYC,MAAqB,yBACjC,OAAS,cAAAC,MAAkB,QAiB1B,cAAAC,EAaC,QAAAC,MAbD,oBAZD,IAAMC,EAAyB,OAEzBC,EAAgC,UAEhCC,EAA+B,SAE/BC,EAA8B,QAE9BC,EAAgBC,EAGpB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiB,UAAhB,CACA,IAAKU,EACL,UAAWC,EACV,iKACAH,CACD,EACC,GAAGC,EACL,CACA,EACDH,EAAc,YAA8B,UAAQ,YAEpD,IAAMM,EAAgBL,EACrB,CAAC,CAAE,UAAAC,EAAW,SAAAK,EAAU,GAAGJ,CAAM,EAAGC,IACnCT,EAACG,EAAA,CACA,UAAAJ,EAACM,EAAA,EAAc,EACfN,EAAiB,UAAhB,CAAwB,UAAU,sDAAuD,GAAGS,EAC5F,SAAAT,EAAC,OACA,UAAWW,EACV,2CACA,wFACA,2UACAH,CACD,EACA,IAAKE,EAEJ,SAAAG,EACF,EACD,GACD,CAEF,EACAD,EAAc,YAA8B,UAAQ,YAEpD,IAAME,EAAe,CAAC,CAAE,UAAAN,EAAW,SAAAK,EAAU,GAAGJ,CAAM,IACrDR,EAAC,OAAI,UAAWU,EAAG,uEAAwEH,CAAS,EAAI,GAAGC,EAC1G,UAAAT,EAACe,EAAA,CAAsB,UAAU,uCAAuC,EACvEF,GACF,EAEDC,EAAa,YAAc,eAG3B,IAAMC,EAAwB,CAAC,CAC9B,KAAAC,EAAO,KACP,KAAAC,EAAO,SACP,MAAAC,EAAQ,eACR,WAAAC,EAAa,QACb,GAAGV,CACJ,IACCT,EAAiB,QAAhB,CAAsB,QAAO,GAC7B,SAAAA,EAACoB,EAAA,CAAW,WAAYD,EAAY,KAAMnB,EAACqB,EAAA,EAAE,EAAI,MAAOH,EAAO,KAAMF,EAAM,KAAMC,EAAO,GAAGR,EAAO,EACnG,EAGKa,EAAa,CAAC,CAAE,UAAAd,EAAW,GAAGC,CAAM,IACzCT,EAAC,OAAI,UAAWW,EAAG,iDAAkDH,CAAS,EAAI,GAAGC,EAAO,EAE7Fa,EAAW,YAAc,aAEzB,IAAMC,EAAe,CAAC,CAAE,UAAAf,EAAW,GAAGC,CAAM,IAC3CT,EAAC,OACA,UAAWW,EAAG,8EAA+EH,CAAS,EACrG,GAAGC,EACL,EAEDc,EAAa,YAAc,eAE3B,IAAMC,EAAcjB,EAGlB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiB,QAAhB,CACA,IAAKU,EACL,UAAWC,EAAG,+CAAgDH,CAAS,EACtE,GAAGC,EACL,CACA,EACDe,EAAY,YAA8B,QAAM,YAEhD,IAAMC,EAAoBlB,EAGxB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiB,cAAhB,CAA4B,IAAKU,EAAK,UAAWC,EAAG,aAAcH,CAAS,EAAI,GAAGC,EAAO,CAC1F,EACDgB,EAAkB,YAA8B,cAAY","names":["X","DialogPrimitive","forwardRef","jsx","jsxs","Dialog","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","forwardRef","className","props","ref","cx","DialogContent","children","DialogHeader","DialogCloseIconButton","size","type","label","appearance","IconButton","X","DialogBody","DialogFooter","DialogTitle","DialogDescription"]}

package/dist/progress.d.ts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+import { W as WithStyleProps } from './with-style-props-VnLWm0Yd.js';
+
+type RemValue = `${number}rem`;
+type StrokeWidth = number | RemValue;
+type SvgAttributes = Omit<HTMLAttributes<SVGElement>, "viewBox" | "role" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow">;
+type Props = SvgAttributes & {
+    /**
+     * The maximum value of the progress bar.
+     * This attribute describes how much work the task indicated by the progress element requires.
+     * The max attribute, if present, must have a value greater than 0. The default value is 100.
+     *
+     * @default 100
+     */
+    max?: number | undefined;
+    /**
+     * The width of the progress bar stroke.
+     * Note, we clamp the stroke width to a minimum of 1px and max of 12px since
+     * it is proportional to the viewbox size (0 0 32 32).
+     *
+     * @default 0.25rem (4px)
+     */
+    strokeWidth?: StrokeWidth;
+    /**
+     * The current value of the progress bar.
+     * This attribute specifies how much of the task that has been completed.
+     * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.
+     *
+     * @default 0
+     */
+    value?: number | undefined;
+};
+/**
+ * A simple circular progress bar.
+ */
+declare const ProgressDonut: ({ children, className, max: _max, strokeWidth: _strokeWidth, style, value: _value, ...props }: Props) => react_jsx_runtime.JSX.Element;
+/**
+ * The indicator for the circular progress bar.
+ */
+declare const ProgressDonutIndicator: ({ className, style }: WithStyleProps) => react_jsx_runtime.JSX.Element;
+
+export { ProgressDonut, ProgressDonutIndicator };

package/dist/progress.js

@@ -0,0 +1,2 @@
+import{a as l}from"./chunk-A5H52ODC.js";import P from"clsx";import{createContext as h,useContext as V,useMemo as W}from"react";import{jsx as a,jsxs as A}from"react/jsx-runtime";var b=100,n=32,g=h({max:b,radius:16,strokeWidth:"0.25rem",value:0}),S=({children:e,className:r,max:t=b,strokeWidth:s=4,style:i,value:d,...k})=>{let o=$(t)?t:b,u=D(d,o)?d:0,m=M(s),p=v(m),c=C(m),f=x(u)?u:void 0,y=W(()=>({max:o,radius:c,strokeWidth:p,value:u}),[o,c,p,u]);return a(g.Provider,{value:y,children:A("svg",{"aria-valuemax":o,"aria-valuemin":0,"aria-valuenow":f,className:P("-rotate-90 transform-gpu",l("size-6 text-gray-200",r)),"data-max":o,"data-min":0,"data-value":f,role:"progressbar",viewBox:`0 0 ${n} ${n}`,...k,children:[a("circle",{cx:n/2,cy:n/2,fill:"transparent",r:c,stroke:"currentColor",strokeWidth:v(m)}),e]})})},w=({className:e,style:r})=>{let t=V(g),s=t.value/t.max,i=R(t.radius);return a("g",{className:l("text-accent-600",e),style:r,children:a("circle",{cx:n/2,cy:n/2,fill:"transparent",r:t.radius,stroke:"currentColor",strokeDasharray:i,strokeDashoffset:`${(1-s)*i}px`,strokeLinecap:"round",strokeWidth:t.strokeWidth})})};function C(e){let r=Number.isNaN(e)?4:e,t=N(r,{min:1,max:16});return(n-t)/2}function N(e,{min:r,max:t}){return Math.min(t,Math.max(r,e))}function v(e){return`${e/16}rem`}function M(e){let r=4;if(e==null)return r;typeof e=="number"?r=e:e.endsWith("rem")?r=Number(e.replace("rem",""))*16:r=Number(e);let t=Number.isNaN(r)?4:r;return N(t,{min:1,max:12})}function R(e){return 2*Math.PI*e}function x(e){return typeof e=="number"}function D(e,r){return x(e)&&!Number.isNaN(e)&&e<=r&&e>=0}function $(e){return x(e)&&!Number.isNaN(e)&&e>0}export{S as ProgressDonut,w as ProgressDonutIndicator};
+//# sourceMappingURL=progress.js.map

package/dist/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/progress/src/progress-donut.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { createContext, useContext, useMemo } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../cx\";\nimport type { WithStyleProps } from \"../../types\";\n\ntype RemValue = `${number}rem`;\ntype StrokeWidth = number | RemValue;\n\ntype SvgAttributes = Omit<\n\tHTMLAttributes<SVGElement>,\n\t\"viewBox\" | \"role\" | \"aria-valuemax\" | \"aria-valuemin\" | \"aria-valuenow\"\n>;\n\ntype Props = SvgAttributes & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The width of the progress bar stroke.\n\t * Note, we clamp the stroke width to a minimum of 1px and max of 12px since\n\t * it is proportional to the viewbox size (0 0 32 32).\n\t *\n\t * @default 0.25rem (4px)\n\t */\n\tstrokeWidth?: StrokeWidth;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t *\n\t * @default 0\n\t */\n\tvalue?: number | undefined; // | null; // in the future we'll support null for `indeterminate` state\n};\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\n/**\n * The size of the viewbox for the progress bar svg.\n */\nconst viewboxSize = 32;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tradius: number;\n\tstrokeWidth: StrokeWidth;\n\tvalue: number;\n};\n\nconst ProgressContext = createContext<ProgressContextValue>({\n\tmax: defaultMax,\n\tradius: 16,\n\tstrokeWidth: \"0.25rem\",\n\tvalue: 0,\n});\n\n/**\n * A simple circular progress bar.\n */\nconst ProgressDonut = ({\n\tchildren,\n\tclassName,\n\tmax: _max = defaultMax,\n\tstrokeWidth: _strokeWidth = 4,\n\tstyle,\n\tvalue: _value,\n\t...props\n}: Props) => {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = isValidValueNumber(_value, max) ? _value : 0; // in the future we'll support `null` for `indeterminate` state\n\tconst strokeWidthPx = deriveStrokeWidthPx(_strokeWidth);\n\tconst strokeWidthRem = pxToRem(strokeWidthPx);\n\tconst radius = circleRadius(strokeWidthPx);\n\tconst valueNow = isNumber(value) ? value : undefined;\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tradius,\n\t\t\tstrokeWidth: strokeWidthRem,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, radius, strokeWidthRem, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t<svg\n\t\t\t\taria-valuemax={max}\n\t\t\t\taria-valuemin={0}\n\t\t\t\taria-valuenow={valueNow}\n\t\t\t\tclassName={clsx(\"-rotate-90 transform-gpu\", cx(\"size-6 text-gray-200\", className))}\n\t\t\t\tdata-max={max}\n\t\t\t\tdata-min={0}\n\t\t\t\tdata-value={valueNow}\n\t\t\t\trole=\"progressbar\"\n\t\t\t\tviewBox={`0 0 ${viewboxSize} ${viewboxSize}`}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<circle\n\t\t\t\t\tcx={viewboxSize / 2}\n\t\t\t\t\tcy={viewboxSize / 2}\n\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\tr={radius}\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth={pxToRem(strokeWidthPx)}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</svg>\n\t\t</ProgressContext.Provider>\n\t);\n};\n\n/**\n * The indicator for the circular progress bar.\n */\nconst ProgressDonutIndicator = ({ className, style }: WithStyleProps) => {\n\tconst ctx = useContext(ProgressContext);\n\tconst progressValue = ctx.value / ctx.max;\n\tconst circumferenceValue = circumference(ctx.radius);\n\n\treturn (\n\t\t<g className={cx(\"text-accent-600\", className)} style={style}>\n\t\t\t<circle\n\t\t\t\tcx={viewboxSize / 2}\n\t\t\t\tcy={viewboxSize / 2}\n\t\t\t\tfill=\"transparent\"\n\t\t\t\tr={ctx.radius}\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstrokeDasharray={circumferenceValue}\n\t\t\t\tstrokeDashoffset={`${(1 - progressValue) * circumferenceValue}px`}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeWidth={ctx.strokeWidth}\n\t\t\t/>\n\t\t</g>\n\t);\n};\n\nexport {\n\t//,\n\tProgressDonut,\n\tProgressDonutIndicator,\n};\n\n/**\n * Calculate the radius of a circle given the stroke width.\n * The radius is calculated as half the viewbox size minus half the stroke width\n * so that the stroke doesn't clamp within the viewbox.\n */\nfunction circleRadius(strokeWidth: number): number {\n\tconst value = Number.isNaN(strokeWidth) ? 4 : strokeWidth;\n\t// clamp the stroke width to a minimum of 1 and max of 16 non-inclusive on both sides\n\tconst clampedStrokeWidth = clamp(value, { min: 1, max: 16 });\n\treturn (viewboxSize - clampedStrokeWidth) / 2;\n}\n\nfunction clamp(value: number, { min, max }: { min: number; max: number }): number {\n\treturn Math.min(max, Math.max(min, value));\n}\n\n/**\n * Convert a pixel value to a rem value.\n */\nfunction pxToRem(value: number): RemValue {\n\treturn `${value / 16}rem` as RemValue;\n}\n\n/**\n * Derive the stroke width in pixels as a number value or pixels/rem from a string value.\n * Note, this function clamps the stroke width to a minimum of 1 and max of 12 since\n * it is proportional to the viewbox size (0 0 32 32).\n */\nexport function deriveStrokeWidthPx(strokeWidth: number | string | undefined): number {\n\tlet value = 4;\n\tif (strokeWidth == null) {\n\t\treturn value;\n\t}\n\n\tif (typeof strokeWidth === \"number\") {\n\t\tvalue = strokeWidth;\n\t} else if (strokeWidth.endsWith(\"rem\")) {\n\t\tvalue = Number(strokeWidth.replace(\"rem\", \"\")) * 16;\n\t} else {\n\t\tvalue = Number(strokeWidth);\n\t}\n\n\tconst stroke = Number.isNaN(value) ? 4 : value;\n\treturn clamp(stroke, { min: 1, max: 12 });\n}\n\n/**\n * Calculate the circumference of a circle given its radius.\n * C = 2πr\n */\nfunction circumference(radius: number) {\n\treturn 2 * Math.PI * radius;\n}\n\n/**\n * Check if a value is a number.\n */\nfunction isNumber(value: unknown): value is number {\n\treturn typeof value === \"number\";\n}\n\n/**\n * Check if a value is a valid number within the range of 0 to `max`.\n */\nfunction isValidValueNumber(value: unknown, max: number): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;\n}\n\n/**\n * Check if a value is a valid number greater than 0.\n */\nfunction isValidMaxNumber(value: unknown): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value > 0;\n}\n"],"mappings":"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","names":["clsx","createContext","useContext","useMemo","jsx","jsxs","defaultMax","viewboxSize","ProgressContext","createContext","ProgressDonut","children","className","_max","_strokeWidth","style","_value","props","max","isValidMaxNumber","value","isValidValueNumber","strokeWidthPx","deriveStrokeWidthPx","strokeWidthRem","pxToRem","radius","circleRadius","valueNow","isNumber","ctx","useMemo","clsx","cx","ProgressDonutIndicator","useContext","progressValue","circumferenceValue","circumference","circleRadius","strokeWidth","value","clampedStrokeWidth","clamp","viewboxSize","min","max","pxToRem","deriveStrokeWidthPx","stroke","circumference","radius","isNumber","isValidValueNumber","isValidMaxNumber"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
@@ -183,6 +183,10 @@
       "import": "./dist/popover.js",
       "types": "./dist/popover.d.ts"
     },
+    "./progress": {
+      "import": "./dist/progress.js",
+      "types": "./dist/progress.d.ts"
+    },
     "./radio-group": {
       "import": "./dist/radio-group.js",
       "types": "./dist/radio-group.d.ts"