@ngrok/mantle 0.51.2 → 0.52.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/dist/accordion.d.ts +151 -138
  2. package/dist/accordion.js +1 -1
  3. package/dist/accordion.js.map +1 -1
  4. package/dist/alert-dialog.d.ts +1 -1
  5. package/dist/alert-dialog.js +1 -1
  6. package/dist/alert-dialog.js.map +1 -1
  7. package/dist/alert.d.ts +2 -2
  8. package/dist/alert.js +1 -1
  9. package/dist/alert.js.map +1 -1
  10. package/dist/browser-only.d.ts +42 -0
  11. package/dist/browser-only.js +2 -0
  12. package/dist/browser-only.js.map +1 -0
  13. package/dist/button.js +1 -1
  14. package/dist/{chunk-D3XF6J5A.js → chunk-6J7D73WA.js} +1 -1
  15. package/dist/chunk-6J7D73WA.js.map +1 -0
  16. package/dist/{chunk-S4HWPRRX.js → chunk-E6VQ7CJN.js} +1 -1
  17. package/dist/{chunk-S4HWPRRX.js.map → chunk-E6VQ7CJN.js.map} +1 -1
  18. package/dist/chunk-KMNACVH6.js +2 -0
  19. package/dist/chunk-KMNACVH6.js.map +1 -0
  20. package/dist/chunk-PX63EGR2.js +2 -0
  21. package/dist/chunk-PX63EGR2.js.map +1 -0
  22. package/dist/{chunk-FUT5N3AI.js → chunk-RH46OJYB.js} +2 -2
  23. package/dist/{chunk-HSTG2BTX.js → chunk-THKAHLEP.js} +2 -2
  24. package/dist/{chunk-IWKI4XHM.js → chunk-X7RUBITL.js} +1 -1
  25. package/dist/chunk-X7RUBITL.js.map +1 -0
  26. package/dist/code-block.js +1 -1
  27. package/dist/code.d.ts +18 -0
  28. package/dist/code.js +2 -0
  29. package/dist/code.js.map +1 -0
  30. package/dist/dialog.d.ts +1 -1
  31. package/dist/dialog.js +1 -1
  32. package/dist/dialog.js.map +1 -1
  33. package/dist/hooks.d.ts +141 -1
  34. package/dist/hooks.js +1 -1
  35. package/dist/hooks.js.map +1 -1
  36. package/dist/icons.js +1 -1
  37. package/dist/pagination.js +1 -1
  38. package/dist/sheet.d.ts +1 -1
  39. package/dist/sheet.js +1 -1
  40. package/dist/tabs.d.ts +2 -2
  41. package/dist/tabs.js.map +1 -1
  42. package/dist/text-area.js +1 -1
  43. package/dist/text-area.js.map +1 -1
  44. package/dist/theme-provider.js +1 -1
  45. package/dist/toast.js +1 -1
  46. package/package.json +11 -6
  47. package/dist/chunk-2ID2TLYD.js +0 -2
  48. package/dist/chunk-2ID2TLYD.js.map +0 -1
  49. package/dist/chunk-D3XF6J5A.js.map +0 -1
  50. package/dist/chunk-IWKI4XHM.js.map +0 -1
  51. package/dist/inline-code.d.ts +0 -18
  52. package/dist/inline-code.js +0 -2
  53. package/dist/inline-code.js.map +0 -1
  54. /package/dist/{chunk-FUT5N3AI.js.map → chunk-RH46OJYB.js.map} +0 -0
  55. /package/dist/{chunk-HSTG2BTX.js.map → chunk-THKAHLEP.js.map} +0 -0
package/dist/alert.d.ts CHANGED
@@ -24,7 +24,7 @@ type AlertIconProps = Omit<SvgAttributes, "children"> & {
24
24
  */
25
25
  svg?: ReactNode;
26
26
  };
27
- type AlertDescriptionProps = ComponentProps<"p"> & WithAsChild;
27
+ type AlertDescriptionProps = ComponentProps<"div"> & WithAsChild;
28
28
  type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "icon">>;
29
29
  /**
30
30
  * Displays a callout for user attention.
@@ -96,7 +96,7 @@ declare const Alert: {
96
96
  * </Alert.Root>
97
97
  * ```
98
98
  */
99
- readonly Description: react.ForwardRefExoticComponent<Omit<AlertDescriptionProps, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
99
+ readonly Description: react.ForwardRefExoticComponent<Omit<AlertDescriptionProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
100
100
  /**
101
101
  * An optional dismiss button that can be used to close the alert.
102
102
  *
package/dist/alert.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as m}from"./chunk-S4HWPRRX.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import{a as l}from"./chunk-NPTDRQT5.js";import{a as i}from"./chunk-AZ56JGNY.js";import{CheckCircleIcon as b}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as P}from"@phosphor-icons/react/Info";import{WarningIcon as I}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as h}from"@phosphor-icons/react/WarningDiamond";import{XIcon as N}from"@phosphor-icons/react/X";import{Slot as d}from"@radix-ui/react-slot";import{cva as w}from"class-variance-authority";import{createContext as R,forwardRef as a,useContext as D,useMemo as T}from"react";import B from"tiny-invariant";import{jsx as o}from"react/jsx-runtime";var u=R(null);function f(){let t=D(u);return B(t,"useAlertContext hook used outside of Alert parent!"),t}var H=w("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"}}}),g=a(({className:t,priority:e,...r},n)=>{let s=T(()=>({priority:e}),[e]);return o(u.Provider,{value:s,children:o("div",{ref:n,className:i(H({priority:e}),t),...r})})});g.displayName="Alert";var M={danger:o(I,{}),info:o(P,{}),success:o(b,{}),warning:o(h,{})},x=a(({className:t,svg:e,...r},n)=>{let s=f(),p=M[s.priority];return o(l,{ref:n,className:i("size-5",t),svg:e??p,...r})});x.displayName="AlertIcon";var A=a(({className:t,...e},r)=>o("div",{ref:r,className:i("min-w-0 flex-1 has-[[data-alert-dismiss]]:pr-6",t),...e}));A.displayName="AlertContent";var y=a(({asChild:t=!1,className:e,...r},n)=>o(t?d:"h5",{ref:n,className:i("font-medium",e),...r}));y.displayName="AlertTitle";var C=a(({asChild:t=!1,className:e,...r},n)=>o(t?d:"p",{ref:n,className:i("text-sm",e),...r}));C.displayName="AlertDescription";var v=({size:t="sm",type:e="button",label:r="Dismiss Alert",appearance:n="ghost",className:s,...p})=>{let c=f();return o(m,{appearance:n,icon:o(N,{}),label:r,size:t,"data-alert-dismiss":!0,className:i("right-1.5 top-1.5 absolute",{"text-danger-700 not-disabled:hover:text-danger-800 not-disabled:active:text-danger-900":c.priority==="danger","text-accent-700 not-disabled:hover:text-accent-800 not-disabled:active:text-accent-900":c.priority==="info","text-success-700 not-disabled:hover:text-success-800 not-disabled:active:text-success-900":c.priority==="success","text-warning-700 not-disabled:hover:text-warning-800 not-disabled:active:text-warning-900":c.priority==="warning"},s),type:e,...p})};v.displayName="AlertDismissIconButton";var W={Root:g,Content:A,Description:C,DismissIconButton:v,Icon:x,Title:y};export{W as Alert};
1
+ import{a as m}from"./chunk-E6VQ7CJN.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import{a as l}from"./chunk-NPTDRQT5.js";import{a as i}from"./chunk-AZ56JGNY.js";import{CheckCircleIcon as b}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as P}from"@phosphor-icons/react/Info";import{WarningIcon as I}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as h}from"@phosphor-icons/react/WarningDiamond";import{XIcon as N}from"@phosphor-icons/react/X";import{Slot as d}from"@radix-ui/react-slot";import{cva as w}from"class-variance-authority";import{createContext as R,forwardRef as a,useContext as D,useMemo as T}from"react";import B from"tiny-invariant";import{jsx as o}from"react/jsx-runtime";var u=R(null);function f(){let t=D(u);return B(t,"useAlertContext hook used outside of Alert parent!"),t}var H=w("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"}}}),g=a(({className:t,priority:e,...r},n)=>{let s=T(()=>({priority:e}),[e]);return o(u.Provider,{value:s,children:o("div",{ref:n,className:i(H({priority:e}),t),...r})})});g.displayName="Alert";var M={danger:o(I,{}),info:o(P,{}),success:o(b,{}),warning:o(h,{})},x=a(({className:t,svg:e,...r},n)=>{let s=f(),p=M[s.priority];return o(l,{ref:n,className:i("size-5",t),svg:e??p,...r})});x.displayName="AlertIcon";var A=a(({className:t,...e},r)=>o("div",{ref:r,className:i("min-w-0 flex-1 has-[[data-alert-dismiss]]:pr-6",t),...e}));A.displayName="AlertContent";var y=a(({asChild:t=!1,className:e,...r},n)=>o(t?d:"h5",{ref:n,className:i("font-medium",e),...r}));y.displayName="AlertTitle";var v=a(({asChild:t=!1,className:e,...r},n)=>o(t?d:"div",{ref:n,className:i("text-sm",e),...r}));v.displayName="AlertDescription";var C=({size:t="sm",type:e="button",label:r="Dismiss Alert",appearance:n="ghost",className:s,...p})=>{let c=f();return o(m,{appearance:n,icon:o(N,{}),label:r,size:t,"data-alert-dismiss":!0,className:i("right-1.5 top-1.5 absolute",{"text-danger-700 not-disabled:hover:text-danger-800 not-disabled:active:text-danger-900":c.priority==="danger","text-accent-700 not-disabled:hover:text-accent-800 not-disabled:active:text-accent-900":c.priority==="info","text-success-700 not-disabled:hover:text-success-800 not-disabled:active:text-success-900":c.priority==="success","text-warning-700 not-disabled:hover:text-warning-800 not-disabled:active:text-warning-900":c.priority==="warning"},s),type:e,...p})};C.displayName="AlertDismissIconButton";var W={Root:g,Content:A,Description:v,DismissIconButton:C,Icon:x,Title:y};export{W as Alert};
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 { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport { XIcon } from \"@phosphor-icons/react/X\";\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 { IconButton, type IconButtonProps } from \"../button/icon-button.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 * @see https://mantle.ngrok.com/components/alert#api-alert\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Root = 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);\nRoot.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: <WarningIcon />,\n\tinfo: <InfoIcon />,\n\t// neutral: <BellRinging />,\n\tsuccess: <CheckCircleIcon />,\n\twarning: <WarningDiamondIcon />,\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 * @see https://mantle.ngrok.com/components/alert#api-alert-icon\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n * ```\n */\nconst Icon = 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);\nIcon.displayName = \"AlertIcon\";\n\n/**\n * The container for the content slot of an alert. Place the title and description as direct children.\n *\n * @see https://mantle.ngrok.com/components/alert#api-alert-content\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"min-w-0 flex-1 has-[[data-alert-dismiss]]:pr-6\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nContent.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 * @see https://mantle.ngrok.com/components/alert#api-alert-title\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Title = 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);\nTitle.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 * @see https://mantle.ngrok.com/components/alert#api-alert-description\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n * ```\n */\nconst Description = 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);\nDescription.displayName = \"AlertDescription\";\n\ntype AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\nconst DismissIconButton = ({\n\tsize = \"sm\",\n\ttype = \"button\",\n\tlabel = \"Dismiss Alert\",\n\tappearance = \"ghost\",\n\tclassName,\n\t...props\n}: AlertDismissIconButtonProps) => {\n\tconst ctx = useAlertContext();\n\treturn (\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\tdata-alert-dismiss\n\t\t\tclassName={cx(\n\t\t\t\t\"right-1.5 top-1.5 absolute\",\n\t\t\t\t{\n\t\t\t\t\t\"text-danger-700 not-disabled:hover:text-danger-800 not-disabled:active:text-danger-900\":\n\t\t\t\t\t\tctx.priority === \"danger\",\n\t\t\t\t\t\"text-accent-700 not-disabled:hover:text-accent-800 not-disabled:active:text-accent-900\":\n\t\t\t\t\t\tctx.priority === \"info\",\n\t\t\t\t\t\"text-success-700 not-disabled:hover:text-success-800 not-disabled:active:text-success-900\":\n\t\t\t\t\t\tctx.priority === \"success\",\n\t\t\t\t\t\"text-warning-700 not-disabled:hover:text-warning-800 not-disabled:active:text-warning-900\":\n\t\t\t\t\t\tctx.priority === \"warning\",\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nDismissIconButton.displayName = \"AlertDismissIconButton\";\n\n/**\n * Displays a callout for user attention.\n *\n * @see https://mantle.ngrok.com/components/alert\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Alert = {\n\t/**\n\t * The root container of the alert component.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#api-alert-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for the content slot of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#api-alert-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The optional description of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#api-alert-description\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * An optional dismiss button that can be used to close the alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#api-alert-dismiss-icon-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.DismissIconButton />\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDismissIconButton,\n\t/**\n\t * An optional icon that visually represents the priority of the Alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#api-alert-icon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The title of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#api-alert-title\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tAlert,\n};\n"],"mappings":"wOAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,YAAAC,MAAgB,6BACzB,OAAS,eAAAC,MAAmB,gCAC5B,OAAS,sBAAAC,MAA0B,uCACnC,OAAS,SAAAC,MAAa,0BACtB,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BAOpB,OAAS,iBAAAC,EAAe,cAAAC,EAAY,cAAAC,EAAY,WAAAC,MAAe,QAC/D,OAAOC,MAAe,iBAoFlB,cAAAC,MAAA,oBA/DJ,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,EA6BMC,EAAOC,EACZ,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,EAAK,YAAc,QAYnB,IAAMS,EAAe,CACpB,OAAQF,EAACG,EAAA,EAAY,EACrB,KAAMH,EAACI,EAAA,EAAS,EAEhB,QAASJ,EAACK,EAAA,EAAgB,EAC1B,QAASL,EAACM,EAAA,EAAmB,CAC9B,EAuBMC,EAAOb,EACZ,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,EAAK,YAAc,YAqBnB,IAAMK,EAAUlB,EACf,CAAC,CAAE,UAAAC,EAAW,GAAGE,CAAM,EAAGC,IACzBE,EAAC,OACA,IAAKF,EACL,UAAWG,EACV,iDACAN,CACD,EACC,GAAGE,EACL,CAEF,EACAe,EAAQ,YAAc,eAuBtB,IAAMC,EAAQnB,EACb,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,EAAM,YAAc,aAuBpB,IAAMG,EAActB,EACnB,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,EAAY,YAAc,mBAG1B,IAAMC,EAAoB,CAAC,CAC1B,KAAAC,EAAO,KACP,KAAAC,EAAO,SACP,MAAAC,EAAQ,gBACR,WAAAC,EAAa,QACb,UAAA1B,EACA,GAAGE,CACJ,IAAmC,CAClC,IAAMY,EAAMtB,EAAgB,EAC5B,OACCa,EAACsB,EAAA,CACA,WAAYD,EACZ,KAAMrB,EAACuB,EAAA,EAAM,EACb,MAAOH,EACP,KAAMF,EACN,qBAAkB,GAClB,UAAWjB,EACV,6BACA,CACC,yFACCQ,EAAI,WAAa,SAClB,yFACCA,EAAI,WAAa,OAClB,4FACCA,EAAI,WAAa,UAClB,4FACCA,EAAI,WAAa,SACnB,EACAd,CACD,EACA,KAAMwB,EACL,GAAGtB,EACL,CAEF,EACAoB,EAAkB,YAAc,yBAqBhC,IAAMO,EAAQ,CAiBb,KAAA/B,EAiBA,QAAAmB,EAiBA,YAAAI,EAkBA,kBAAAC,EAiBA,KAAAV,EAiBA,MAAAM,CACD","names":["CheckCircleIcon","InfoIcon","WarningIcon","WarningDiamondIcon","XIcon","Slot","cva","createContext","forwardRef","useContext","useMemo","invariant","jsx","AlertContext","createContext","useAlertContext","context","useContext","invariant","alertVariants","cva","Root","forwardRef","className","priority","props","ref","useMemo","jsx","cx","defaultIcons","WarningIcon","InfoIcon","CheckCircleIcon","WarningDiamondIcon","Icon","svg","ctx","defaultIcon","SvgOnly","Content","Title","asChild","Slot","Description","DismissIconButton","size","type","label","appearance","IconButton","XIcon","Alert"]}
1
+ {"version":3,"sources":["../src/components/alert/alert.tsx"],"sourcesContent":["import { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport { XIcon } from \"@phosphor-icons/react/X\";\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 { IconButton, type IconButtonProps } from \"../button/icon-button.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 * @see https://mantle.ngrok.com/components/alert#api-alert\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Root = 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);\nRoot.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: <WarningIcon />,\n\tinfo: <InfoIcon />,\n\t// neutral: <BellRinging />,\n\tsuccess: <CheckCircleIcon />,\n\twarning: <WarningDiamondIcon />,\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 * @see https://mantle.ngrok.com/components/alert#api-alert-icon\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n * ```\n */\nconst Icon = 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);\nIcon.displayName = \"AlertIcon\";\n\n/**\n * The container for the content slot of an alert. Place the title and description as direct children.\n *\n * @see https://mantle.ngrok.com/components/alert#api-alert-content\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"min-w-0 flex-1 has-[[data-alert-dismiss]]:pr-6\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nContent.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 * @see https://mantle.ngrok.com/components/alert#api-alert-title\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Title = 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);\nTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The optional description of an alert.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#api-alert-description\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n * ```\n */\nconst Description = forwardRef<ComponentRef<\"div\">, AlertDescriptionProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"text-sm\", className)} {...props} />\n\t\t);\n\t},\n);\nDescription.displayName = \"AlertDescription\";\n\ntype AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\nconst DismissIconButton = ({\n\tsize = \"sm\",\n\ttype = \"button\",\n\tlabel = \"Dismiss Alert\",\n\tappearance = \"ghost\",\n\tclassName,\n\t...props\n}: AlertDismissIconButtonProps) => {\n\tconst ctx = useAlertContext();\n\treturn (\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\tdata-alert-dismiss\n\t\t\tclassName={cx(\n\t\t\t\t\"right-1.5 top-1.5 absolute\",\n\t\t\t\t{\n\t\t\t\t\t\"text-danger-700 not-disabled:hover:text-danger-800 not-disabled:active:text-danger-900\":\n\t\t\t\t\t\tctx.priority === \"danger\",\n\t\t\t\t\t\"text-accent-700 not-disabled:hover:text-accent-800 not-disabled:active:text-accent-900\":\n\t\t\t\t\t\tctx.priority === \"info\",\n\t\t\t\t\t\"text-success-700 not-disabled:hover:text-success-800 not-disabled:active:text-success-900\":\n\t\t\t\t\t\tctx.priority === \"success\",\n\t\t\t\t\t\"text-warning-700 not-disabled:hover:text-warning-800 not-disabled:active:text-warning-900\":\n\t\t\t\t\t\tctx.priority === \"warning\",\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nDismissIconButton.displayName = \"AlertDismissIconButton\";\n\n/**\n * Displays a callout for user attention.\n *\n * @see https://mantle.ngrok.com/components/alert\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Alert = {\n\t/**\n\t * The root container of the alert component.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#api-alert-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for the content slot of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#api-alert-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The optional description of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#api-alert-description\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * An optional dismiss button that can be used to close the alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#api-alert-dismiss-icon-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.DismissIconButton />\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDismissIconButton,\n\t/**\n\t * An optional icon that visually represents the priority of the Alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#api-alert-icon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The title of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#api-alert-title\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tAlert,\n};\n"],"mappings":"wOAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,YAAAC,MAAgB,6BACzB,OAAS,eAAAC,MAAmB,gCAC5B,OAAS,sBAAAC,MAA0B,uCACnC,OAAS,SAAAC,MAAa,0BACtB,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BAOpB,OAAS,iBAAAC,EAAe,cAAAC,EAAY,cAAAC,EAAY,WAAAC,MAAe,QAC/D,OAAOC,MAAe,iBAoFlB,cAAAC,MAAA,oBA/DJ,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,EA6BMC,EAAOC,EACZ,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,EAAK,YAAc,QAYnB,IAAMS,EAAe,CACpB,OAAQF,EAACG,EAAA,EAAY,EACrB,KAAMH,EAACI,EAAA,EAAS,EAEhB,QAASJ,EAACK,EAAA,EAAgB,EAC1B,QAASL,EAACM,EAAA,EAAmB,CAC9B,EAuBMC,EAAOb,EACZ,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,EAAK,YAAc,YAqBnB,IAAMK,EAAUlB,EACf,CAAC,CAAE,UAAAC,EAAW,GAAGE,CAAM,EAAGC,IACzBE,EAAC,OACA,IAAKF,EACL,UAAWG,EACV,iDACAN,CACD,EACC,GAAGE,EACL,CAEF,EACAe,EAAQ,YAAc,eAuBtB,IAAMC,EAAQnB,EACb,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,EAAM,YAAc,aAyBpB,IAAMG,EAActB,EACnB,CAAC,CAAE,QAAAoB,EAAU,GAAO,UAAAnB,EAAW,GAAGE,CAAM,EAAGC,IAIzCE,EAHiBc,EAAUC,EAAO,MAGjC,CAAU,IAAKjB,EAAK,UAAWG,EAAG,UAAWN,CAAS,EAAI,GAAGE,EAAO,CAGxE,EACAmB,EAAY,YAAc,mBAG1B,IAAMC,EAAoB,CAAC,CAC1B,KAAAC,EAAO,KACP,KAAAC,EAAO,SACP,MAAAC,EAAQ,gBACR,WAAAC,EAAa,QACb,UAAA1B,EACA,GAAGE,CACJ,IAAmC,CAClC,IAAMY,EAAMtB,EAAgB,EAC5B,OACCa,EAACsB,EAAA,CACA,WAAYD,EACZ,KAAMrB,EAACuB,EAAA,EAAM,EACb,MAAOH,EACP,KAAMF,EACN,qBAAkB,GAClB,UAAWjB,EACV,6BACA,CACC,yFACCQ,EAAI,WAAa,SAClB,yFACCA,EAAI,WAAa,OAClB,4FACCA,EAAI,WAAa,UAClB,4FACCA,EAAI,WAAa,SACnB,EACAd,CACD,EACA,KAAMwB,EACL,GAAGtB,EACL,CAEF,EACAoB,EAAkB,YAAc,yBAqBhC,IAAMO,EAAQ,CAiBb,KAAA/B,EAiBA,QAAAmB,EAiBA,YAAAI,EAkBA,kBAAAC,EAiBA,KAAAV,EAiBA,MAAAM,CACD","names":["CheckCircleIcon","InfoIcon","WarningIcon","WarningDiamondIcon","XIcon","Slot","cva","createContext","forwardRef","useContext","useMemo","invariant","jsx","AlertContext","createContext","useAlertContext","context","useContext","invariant","alertVariants","cva","Root","forwardRef","className","priority","props","ref","useMemo","jsx","cx","defaultIcons","WarningIcon","InfoIcon","CheckCircleIcon","WarningDiamondIcon","Icon","svg","ctx","defaultIcon","SvgOnly","Content","Title","asChild","Slot","Description","DismissIconButton","size","type","label","appearance","IconButton","XIcon","Alert"]}
@@ -0,0 +1,42 @@
1
+ import { ReactNode } from 'react';
2
+
3
+ type Props = {
4
+ /**
5
+ * Children must be a render function so that evaluation is deferred
6
+ * until after hydration has occurred.
7
+ */
8
+ children: () => ReactNode;
9
+ /**
10
+ * Optional fallback to render on the server (and during hydration)
11
+ * before the client-only children are mounted.
12
+ * Ideally, this should be the same dimensions as the eventual children
13
+ * to avoid layout shift.
14
+ */
15
+ fallback?: ReactNode;
16
+ };
17
+ /**
18
+ * A wrapper component that ensures its children only render in the browser,
19
+ * after hydration has completed.
20
+ *
21
+ * This is useful for components that rely on browser-only APIs
22
+ * (e.g. `window`, `document`, `localStorage`, media queries) or that
23
+ * cannot safely be rendered during server-side rendering (SSR).
24
+ *
25
+ * - On the server, and during the initial hydration pass,
26
+ * the `fallback` is rendered.
27
+ * - On the client, after hydration, the `children` render function is called.
28
+ *
29
+ * @see https://mantle.ngrok.com/components/browser-only
30
+ *
31
+ * @example
32
+ * ```tsx
33
+ * <BrowserOnly fallback={<div style={{ height: 200 }} />} >
34
+ * {() => <ExpensiveChart />}
35
+ * </BrowserOnly>
36
+ * ```
37
+ *
38
+ * @see useIsHydrated
39
+ */
40
+ declare function BrowserOnly({ children, fallback }: Props): ReactNode;
41
+
42
+ export { BrowserOnly };
@@ -0,0 +1,2 @@
1
+ import{a as r}from"./chunk-KMNACVH6.js";function t({children:e,fallback:o=null}){return r()?e():o}export{t as BrowserOnly};
2
+ //# sourceMappingURL=browser-only.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/browser-only/browser-only.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useIsHydrated } from \"../../hooks/use-is-hydrated.js\";\n\ntype Props = {\n\t/**\n\t * Children must be a render function so that evaluation is deferred\n\t * until after hydration has occurred.\n\t */\n\tchildren: () => ReactNode;\n\t/**\n\t * Optional fallback to render on the server (and during hydration)\n\t * before the client-only children are mounted.\n\t * Ideally, this should be the same dimensions as the eventual children\n\t * to avoid layout shift.\n\t */\n\tfallback?: ReactNode;\n};\n\n/**\n * A wrapper component that ensures its children only render in the browser,\n * after hydration has completed.\n *\n * This is useful for components that rely on browser-only APIs\n * (e.g. `window`, `document`, `localStorage`, media queries) or that\n * cannot safely be rendered during server-side rendering (SSR).\n *\n * - On the server, and during the initial hydration pass,\n * the `fallback` is rendered.\n * - On the client, after hydration, the `children` render function is called.\n *\n * @see https://mantle.ngrok.com/components/browser-only\n *\n * @example\n * ```tsx\n * <BrowserOnly fallback={<div style={{ height: 200 }} />} >\n * {() => <ExpensiveChart />}\n * </BrowserOnly>\n * ```\n *\n * @see useIsHydrated\n */\nfunction BrowserOnly({ children, fallback = null }: Props) {\n\treturn useIsHydrated() ? children() : fallback;\n}\n\nexport {\n\t//,\n\tBrowserOnly,\n};\n"],"mappings":"wCAyCA,SAASA,EAAY,CAAE,SAAAC,EAAU,SAAAC,EAAW,IAAK,EAAU,CAC1D,OAAOC,EAAc,EAAIF,EAAS,EAAIC,CACvC","names":["BrowserOnly","children","fallback","useIsHydrated"]}
package/dist/button.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as c}from"./chunk-3H3EUKI7.js";import{a}from"./chunk-S4HWPRRX.js";import{b}from"./chunk-MGYWQQVZ.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import"./chunk-AZ56JGNY.js";export{b as Button,c as ButtonGroup,a as IconButton};
1
+ import{a as c}from"./chunk-3H3EUKI7.js";import{a}from"./chunk-E6VQ7CJN.js";import{b}from"./chunk-MGYWQQVZ.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import"./chunk-AZ56JGNY.js";export{b as Button,c as ButtonGroup,a as IconButton};
2
2
  //# sourceMappingURL=button.js.map
@@ -1,2 +1,2 @@
1
1
  import{useCallback as a,useSyncExternalStore as i}from"react";function c(e){let r=a(t=>{let n=window.matchMedia(e);return n.addEventListener("change",t),()=>{n.removeEventListener("change",t)}},[e]);return i(r,()=>window.matchMedia(e).matches,()=>!1)}export{c as a};
2
- //# sourceMappingURL=chunk-D3XF6J5A.js.map
2
+ //# sourceMappingURL=chunk-6J7D73WA.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/hooks/use-matches-media-query.tsx"],"sourcesContent":["import { useCallback, useSyncExternalStore } from \"react\";\n\n/**\n * React hook that subscribes to and returns the result of a CSS media query.\n *\n * This hook uses `window.matchMedia` under the hood and leverages\n * `useSyncExternalStore` to stay compliant with React's concurrent rendering model.\n *\n * @param {string} query - A valid CSS media query string (e.g., `(max-width: 768px)`).\n *\n * @returns {boolean} `true` if the media query currently matches, otherwise `false`.\n *\n * @example\n * // Detect if the user prefers a dark color scheme:\n * const isDarkMode = useMatchesMediaQuery(\"(prefers-color-scheme: dark)\");\n *\n * if (isDarkMode) {\n * document.body.classList.add(\"dark\");\n * } else {\n * document.body.classList.remove(\"dark\");\n * }\n */\nexport function useMatchesMediaQuery(query: string) {\n\tconst subscribe = useCallback(\n\t\t(callback: () => void) => {\n\t\t\tconst matchMedia = window.matchMedia(query);\n\n\t\t\tmatchMedia.addEventListener(\"change\", callback);\n\t\t\treturn () => {\n\t\t\t\tmatchMedia.removeEventListener(\"change\", callback);\n\t\t\t};\n\t\t},\n\t\t[query],\n\t);\n\n\treturn useSyncExternalStore(\n\t\tsubscribe,\n\t\t() => {\n\t\t\treturn window.matchMedia(query).matches;\n\t\t},\n\t\t() => false,\n\t);\n}\n"],"mappings":"AAAA,OAAS,eAAAA,EAAa,wBAAAC,MAA4B,QAsB3C,SAASC,EAAqBC,EAAe,CACnD,IAAMC,EAAYJ,EAChBK,GAAyB,CACzB,IAAMC,EAAa,OAAO,WAAWH,CAAK,EAE1C,OAAAG,EAAW,iBAAiB,SAAUD,CAAQ,EACvC,IAAM,CACZC,EAAW,oBAAoB,SAAUD,CAAQ,CAClD,CACD,EACA,CAACF,CAAK,CACP,EAEA,OAAOF,EACNG,EACA,IACQ,OAAO,WAAWD,CAAK,EAAE,QAEjC,IAAM,EACP,CACD","names":["useCallback","useSyncExternalStore","useMatchesMediaQuery","query","subscribe","callback","matchMedia"]}
@@ -1,2 +1,2 @@
1
1
  import{a as l}from"./chunk-3C5O3AQA.js";import{a as o}from"./chunk-I6T6YV2L.js";import{a as d}from"./chunk-AZ56JGNY.js";import{CircleNotchIcon as I}from"@phosphor-icons/react/CircleNotch";import{Slot as V}from"@radix-ui/react-slot";import{cva as C}from"class-variance-authority";import{Children as H,cloneElement as M,forwardRef as T,isValidElement as E}from"react";import{jsx as t,jsxs as L}from"react/jsx-runtime";var N=C("inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border focus-within:outline-hidden focus-visible:ring-4 disabled:cursor-default disabled:opacity-50",{variants:{appearance:{ghost:"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent",outlined:"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600"},isLoading:{false:"",true:"opacity-50"},size:{xs:"size-6",sm:"size-7",md:"size-9"}},defaultVariants:{appearance:"outlined",size:"md"}}),A=T(({"aria-disabled":c,appearance:u,asChild:b=!1,children:p,className:m,disabled:f,icon:v,isLoading:e=!1,label:h,size:n,type:g,...y},B)=>{let i=l(c??f??e),r=e?t(I,{className:"animate-spin"}):v,s={"aria-disabled":i,"data-icon-button":!0,"data-loading":e,"data-size":n,className:d("icon-button",N({appearance:u,isLoading:e,size:n}),m),disabled:i,ref:B,...y};if(b){let a=H.only(p),x=E(a);return t(V,{...s,children:x&&M(a,{},t(o,{svg:r}))})}return L("button",{...s,type:g,children:[t("span",{className:"sr-only",children:h}),t(o,{svg:r})]})});A.displayName="IconButton";export{A as a};
2
- //# sourceMappingURL=chunk-S4HWPRRX.js.map
2
+ //# sourceMappingURL=chunk-E6VQ7CJN.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/button/icon-button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport type { VariantProps, WithAsChild } from \"../../types/index.js\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\n\nconst iconButtonVariants = cva(\n\t\"inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border focus-within:outline-hidden focus-visible:ring-4 disabled:cursor-default disabled:opacity-50\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * Defines the visual style of the Button.\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tghost:\n\t\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t\t\toutlined:\n\t\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t\t * replace the `icon` with a spinner.\n\t\t\t * It will also disable user interaction with the button and set `aria-disabled`.\n\t\t\t */\n\t\t\tisLoading: {\n\t\t\t\tfalse: \"\",\n\t\t\t\ttrue: \"opacity-50\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * The size of the IconButton.\n\t\t\t */\n\t\t\tsize: {\n\t\t\t\txs: \"size-6\",\n\t\t\t\tsm: \"size-7\",\n\t\t\t\tmd: \"size-9\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tappearance: \"outlined\",\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\ntype IconButtonVariants = VariantProps<typeof iconButtonVariants>;\n\n/**\n * The props for the `Button` component.\n */\ntype IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tWithAsChild &\n\tIconButtonVariants & {\n\t\t/**\n\t\t * The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.\n\t\t */\n\t\tlabel: string;\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon: ReactNode;\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t\t }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<\n\t\t\t\t\tButtonHTMLAttributes<HTMLButtonElement>[\"type\"],\n\t\t\t\t\tundefined\n\t\t\t\t>;\n\t\t }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n * Renders only a single icon as children with an accessible, screen-reader-only label.\n *\n * @see https://mantle.ngrok.com/components/button#api-icon-button\n *\n * @example\n * ```tsx\n * <IconButton\n * type=\"button\"\n * icon={<TrashIcon />}\n * label=\"Delete item\"\n * appearance=\"ghost\"\n * size=\"sm\"\n * />\n * ```\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\tisLoading = false,\n\t\t\tlabel,\n\t\t\tsize,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? (\n\t\t\t<CircleNotchIcon className=\"animate-spin\" />\n\t\t) : (\n\t\t\tpropIcon\n\t\t);\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\t\"data-icon-button\": true,\n\t\t\t\"data-loading\": isLoading,\n\t\t\t\"data-size\": size,\n\t\t\tclassName: cx(\n\t\t\t\t\"icon-button\",\n\t\t\t\ticonButtonVariants({ appearance, isLoading, size }),\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tconst isValidChild = isValidElement(singleChild);\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{isValidChild && cloneElement(singleChild, {}, <Icon svg={icon} />)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t\t<Icon svg={icon} />\n\t\t\t</button>\n\t\t);\n\t},\n);\nIconButton.displayName = \"IconButton\";\n\nexport { IconButton, iconButtonVariants };\nexport type { IconButtonProps };\n"],"mappings":"wHAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BACpB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QA6JhE,cAAAC,EAgCA,QAAAC,MAhCA,oBAtJH,IAAMC,EAAqBC,EAC1B,2MACA,CACC,SAAU,CAIT,WAAY,CACX,MACC,2MACD,SACC,wWACF,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAIA,KAAM,CACL,GAAI,SACJ,GAAI,SACJ,GAAI,QACL,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,KAAM,IACP,CACD,CACD,EA8FMC,EAAaC,EAClB,CACC,CACC,gBAAiBC,EACjB,WAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EACA,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaE,CAAS,EAClEQ,EAAOR,EACZb,EAACsB,EAAA,CAAgB,UAAU,eAAe,EAE1CV,EAGKW,EAAc,CACnB,gBAAiBJ,EACjB,mBAAoB,GACpB,eAAgBN,EAChB,YAAaE,EACb,UAAWS,EACV,cACAtB,EAAmB,CAAE,WAAAK,EAAY,UAAAM,EAAW,KAAAE,CAAK,CAAC,EAClDL,CACD,EACA,SAAAS,EACA,IAAAD,EACA,GAAGD,CACJ,EAEA,GAAIT,EAAS,CACZ,IAAMiB,EAAcC,EAAS,KAAKjB,CAAQ,EACpCkB,EAAeC,EAAeH,CAAW,EAE/C,OACCzB,EAAC6B,EAAA,CAAM,GAAGN,EACR,SAAAI,GAAgBG,EAAaL,EAAa,CAAC,EAAGzB,EAAC+B,EAAA,CAAK,IAAKV,EAAM,CAAE,EACnE,CAEF,CAEA,OACCpB,EAAC,UAAQ,GAAGsB,EAAa,KAAMP,EAC9B,UAAAhB,EAAC,QAAK,UAAU,UAAW,SAAAc,EAAM,EACjCd,EAAC+B,EAAA,CAAK,IAAKV,EAAM,GAClB,CAEF,CACD,EACAjB,EAAW,YAAc","names":["CircleNotchIcon","Slot","cva","Children","cloneElement","forwardRef","isValidElement","jsx","jsxs","iconButtonVariants","cva","IconButton","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","isLoading","label","size","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","buttonProps","cx","singleChild","Children","isValidChild","isValidElement","Slot","cloneElement","Icon"]}
1
+ {"version":3,"sources":["../src/components/button/icon-button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport type { VariantProps, WithAsChild } from \"../../types/index.js\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\n\nconst iconButtonVariants = cva(\n\t\"inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border focus-within:outline-hidden focus-visible:ring-4 disabled:cursor-default disabled:opacity-50\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * Defines the visual style of the Button.\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tghost:\n\t\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t\t\toutlined:\n\t\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t\t * replace the `icon` with a spinner.\n\t\t\t * It will also disable user interaction with the button and set `aria-disabled`.\n\t\t\t */\n\t\t\tisLoading: {\n\t\t\t\tfalse: \"\",\n\t\t\t\ttrue: \"opacity-50\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * The size of the IconButton.\n\t\t\t */\n\t\t\tsize: {\n\t\t\t\txs: \"size-6\",\n\t\t\t\tsm: \"size-7\",\n\t\t\t\tmd: \"size-9\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tappearance: \"outlined\",\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\ntype IconButtonVariants = VariantProps<typeof iconButtonVariants>;\n\n/**\n * The props for the `Button` component.\n */\ntype IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tWithAsChild &\n\tIconButtonVariants & {\n\t\t/**\n\t\t * The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.\n\t\t */\n\t\tlabel: string;\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon: ReactNode;\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t\t }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<\n\t\t\t\t\tButtonHTMLAttributes<HTMLButtonElement>[\"type\"],\n\t\t\t\t\tundefined\n\t\t\t\t>;\n\t\t }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n * Renders only a single icon as children with an accessible, screen-reader-only label.\n *\n * @see https://mantle.ngrok.com/components/button#api-icon-button\n *\n * @example\n * ```tsx\n * <IconButton\n * type=\"button\"\n * icon={<TrashIcon />}\n * label=\"Delete item\"\n * appearance=\"ghost\"\n * size=\"sm\"\n * />\n * ```\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\tisLoading = false,\n\t\t\tlabel,\n\t\t\tsize,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? (\n\t\t\t<CircleNotchIcon className=\"animate-spin\" />\n\t\t) : (\n\t\t\tpropIcon\n\t\t);\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\t\"data-icon-button\": true,\n\t\t\t\"data-loading\": isLoading,\n\t\t\t\"data-size\": size,\n\t\t\tclassName: cx(\n\t\t\t\t\"icon-button\",\n\t\t\t\ticonButtonVariants({ appearance, isLoading, size }),\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tconst isValidChild = isValidElement(singleChild);\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{isValidChild && cloneElement(singleChild, {}, <Icon svg={icon} />)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t\t<Icon svg={icon} />\n\t\t\t</button>\n\t\t);\n\t},\n);\nIconButton.displayName = \"IconButton\";\n\nexport {\n\t//,\n\tIconButton,\n\ticonButtonVariants,\n};\n\nexport type {\n\t//,\n\tIconButtonProps,\n};\n"],"mappings":"wHAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BACpB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QA6JhE,cAAAC,EAgCA,QAAAC,MAhCA,oBAtJH,IAAMC,EAAqBC,EAC1B,2MACA,CACC,SAAU,CAIT,WAAY,CACX,MACC,2MACD,SACC,wWACF,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAIA,KAAM,CACL,GAAI,SACJ,GAAI,SACJ,GAAI,QACL,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,KAAM,IACP,CACD,CACD,EA8FMC,EAAaC,EAClB,CACC,CACC,gBAAiBC,EACjB,WAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EACA,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaE,CAAS,EAClEQ,EAAOR,EACZb,EAACsB,EAAA,CAAgB,UAAU,eAAe,EAE1CV,EAGKW,EAAc,CACnB,gBAAiBJ,EACjB,mBAAoB,GACpB,eAAgBN,EAChB,YAAaE,EACb,UAAWS,EACV,cACAtB,EAAmB,CAAE,WAAAK,EAAY,UAAAM,EAAW,KAAAE,CAAK,CAAC,EAClDL,CACD,EACA,SAAAS,EACA,IAAAD,EACA,GAAGD,CACJ,EAEA,GAAIT,EAAS,CACZ,IAAMiB,EAAcC,EAAS,KAAKjB,CAAQ,EACpCkB,EAAeC,EAAeH,CAAW,EAE/C,OACCzB,EAAC6B,EAAA,CAAM,GAAGN,EACR,SAAAI,GAAgBG,EAAaL,EAAa,CAAC,EAAGzB,EAAC+B,EAAA,CAAK,IAAKV,EAAM,CAAE,EACnE,CAEF,CAEA,OACCpB,EAAC,UAAQ,GAAGsB,EAAa,KAAMP,EAC9B,UAAAhB,EAAC,QAAK,UAAU,UAAW,SAAAc,EAAM,EACjCd,EAAC+B,EAAA,CAAK,IAAKV,EAAM,GAClB,CAEF,CACD,EACAjB,EAAW,YAAc","names":["CircleNotchIcon","Slot","cva","Children","cloneElement","forwardRef","isValidElement","jsx","jsxs","iconButtonVariants","cva","IconButton","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","isLoading","label","size","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","buttonProps","cx","singleChild","Children","isValidChild","isValidElement","Slot","cloneElement","Icon"]}
@@ -0,0 +1,2 @@
1
+ import{useSyncExternalStore as e}from"react";function n(){return e(r,()=>!0,()=>!1)}function r(){return()=>{}}export{n as a};
2
+ //# sourceMappingURL=chunk-KMNACVH6.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/hooks/use-is-hydrated.tsx"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\n\n/**\n * React hook that returns whether the component tree has been hydrated\n * on the client.\n *\n * Uses `useSyncExternalStore` to ensure the value is consistent between\n * server and client rendering, preventing hydration mismatches.\n *\n * - On the server, it always returns `false`.\n * - On the client (after hydration), it returns `true`.\n *\n * @see https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store\n *\n * @returns {boolean} `true` once hydration has occurred on the client,\n * otherwise `false`.\n *\n * @example\n * const isHydrated = useIsHydrated();\n *\n * if (!isHydrated) {\n * return <span style={{ visibility: \"hidden\" }}>Loading…</span>;\n * }\n *\n * return <span>Ready!</span>;\n */\nfunction useIsHydrated() {\n\treturn useSyncExternalStore(\n\t\temptySubscribe,\n\t\t() => true,\n\t\t() => false,\n\t);\n}\n\nexport {\n\t//,\n\tuseIsHydrated,\n};\n\n/**\n * No-op subscription function required by `useSyncExternalStore`.\n *\n * Since hydration state never changes after mount, this effectively\n * does nothing.\n *\n * @private\n */\nfunction emptySubscribe() {\n\treturn () => {};\n}\n"],"mappings":"AAAA,OAAS,wBAAAA,MAA4B,QA0BrC,SAASC,GAAgB,CACxB,OAAOD,EACNE,EACA,IAAM,GACN,IAAM,EACP,CACD,CAeA,SAASC,GAAiB,CACzB,MAAO,IAAM,CAAC,CACf","names":["useSyncExternalStore","useIsHydrated","emptySubscribe","emptySubscribe"]}
@@ -0,0 +1,2 @@
1
+ import*as i from"@radix-ui/react-dialog";import{Slot as m}from"@radix-ui/react-slot";import{createContext as D,forwardRef as s,useContext as l,useEffect as c,useState as v}from"react";import{jsx as r}from"react/jsx-runtime";var a=D({hasDescription:!1,setHasDescription:()=>{}});function g(e){let[t,o]=v(!1);return r(a.Provider,{value:{hasDescription:t,setHasDescription:o},children:r(i.Root,{...e})})}g.displayName="DialogPrimitiveRoot";var P=i.Trigger;P.displayName="DialogPrimitiveTrigger";var f=i.Portal;f.displayName="DialogPrimitivePortal";var d=i.Close;d.displayName="DialogPrimitiveClose";var C=i.Overlay;C.displayName="DialogPrimitiveOverlay";var u=s((e,t)=>{let o=l(a);return r(i.Content,{ref:t,...o.hasDescription?{}:{"aria-describedby":void 0},...e})});u.displayName="DialogPrimitiveContent";var b=i.Title,y=s(({asChild:e,children:t,...o},p)=>{let n=l(a);return c(()=>(n.setHasDescription(!0),()=>n.setHasDescription(!1)),[n]),r(i.Description,{ref:p,asChild:!0,children:r(e?m:"div",{...o,children:t})})});y.displayName="DialogPrimitiveDescription";export{g as a,P as b,f as c,d,C as e,u as f,b as g,y as h};
2
+ //# sourceMappingURL=chunk-PX63EGR2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/dialog/primitive.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseEffect,\n\tuseState,\n} from \"react\";\n\ntype InternalDialogContextValue = {\n\thasDescription: boolean;\n\tsetHasDescription: (value: boolean) => void;\n};\n\nconst InternalDialogContext = createContext<InternalDialogContextValue>({\n\thasDescription: false,\n\tsetHasDescription: () => {},\n});\n\nfunction Root(props: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n\tconst [hasDescription, setHasDescription] = useState(false);\n\n\treturn (\n\t\t<InternalDialogContext.Provider\n\t\t\tvalue={{ hasDescription, setHasDescription }}\n\t\t>\n\t\t\t<DialogPrimitive.Root {...props} />\n\t\t</InternalDialogContext.Provider>\n\t);\n}\nRoot.displayName = \"DialogPrimitiveRoot\";\n\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogPrimitiveTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPrimitivePortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogPrimitiveClose\";\n\nconst Overlay = DialogPrimitive.Overlay;\nOverlay.displayName = \"DialogPrimitiveOverlay\";\n\n/**\n * The main content container of the dialog primitive.\n * This is a low-level primitive used by higher-level dialog components.\n */\nconst Content = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>((props, ref) => {\n\tconst ctx = useContext(InternalDialogContext);\n\n\treturn (\n\t\t<DialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\t// If there's no description, we remove the default applied aria-describedby attribute from radix dialog\n\t\t\t{...(!ctx.hasDescription ? { \"aria-describedby\": undefined } : {})}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nContent.displayName = \"DialogPrimitiveContent\";\n\nconst Title = DialogPrimitive.Title;\n\n/**\n * An accessible description for the dialog primitive.\n * This is a low-level primitive used by higher-level dialog components.\n * Renders as a `div` by default, but can be changed to any other element using the `asChild` prop.\n */\nconst Description = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ asChild, children, ...props }, ref) => {\n\tconst ctx = useContext(InternalDialogContext);\n\n\tuseEffect(() => {\n\t\tctx.setHasDescription(true);\n\t\treturn () => ctx.setHasDescription(false);\n\t}, [ctx]);\n\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<DialogPrimitive.Description ref={ref} asChild>\n\t\t\t<Component {...props}>{children}</Component>\n\t\t</DialogPrimitive.Description>\n\t);\n});\nDescription.displayName = \"DialogPrimitiveDescription\";\n\nexport {\n\t//,\n\tRoot,\n\tTrigger,\n\tPortal,\n\tClose,\n\tOverlay,\n\tContent,\n\tDescription,\n\tTitle,\n};\n"],"mappings":"AAEA,UAAYA,MAAqB,yBACjC,OAAS,QAAAC,MAAY,uBACrB,OAGC,iBAAAC,EACA,cAAAC,EACA,cAAAC,EACA,aAAAC,EACA,YAAAC,MACM,QAmBJ,cAAAC,MAAA,oBAZH,IAAMC,EAAwBN,EAA0C,CACvE,eAAgB,GAChB,kBAAmB,IAAM,CAAC,CAC3B,CAAC,EAED,SAASO,EAAKC,EAA8D,CAC3E,GAAM,CAACC,EAAgBC,CAAiB,EAAIN,EAAS,EAAK,EAE1D,OACCC,EAACC,EAAsB,SAAtB,CACA,MAAO,CAAE,eAAAG,EAAgB,kBAAAC,CAAkB,EAE3C,SAAAL,EAAiB,OAAhB,CAAsB,GAAGG,EAAO,EAClC,CAEF,CACAD,EAAK,YAAc,sBAEnB,IAAMI,EAA0B,UAChCA,EAAQ,YAAc,yBAEtB,IAAMC,EAAyB,SAC/BA,EAAO,YAAc,wBAErB,IAAMC,EAAwB,QAC9BA,EAAM,YAAc,uBAEpB,IAAMC,EAA0B,UAChCA,EAAQ,YAAc,yBAMtB,IAAMC,EAAUd,EAGd,CAACO,EAAOQ,IAAQ,CACjB,IAAMC,EAAMf,EAAWI,CAAqB,EAE5C,OACCD,EAAiB,UAAhB,CACA,IAAKW,EAEJ,GAAKC,EAAI,eAAqD,CAAC,EAArC,CAAE,mBAAoB,MAAU,EAC1D,GAAGT,EACL,CAEF,CAAC,EACDO,EAAQ,YAAc,yBAEtB,IAAMG,EAAwB,QAOxBC,EAAclB,EAGlB,CAAC,CAAE,QAAAmB,EAAS,SAAAC,EAAU,GAAGb,CAAM,EAAGQ,IAAQ,CAC3C,IAAMC,EAAMf,EAAWI,CAAqB,EAE5C,OAAAH,EAAU,KACTc,EAAI,kBAAkB,EAAI,EACnB,IAAMA,EAAI,kBAAkB,EAAK,GACtC,CAACA,CAAG,CAAC,EAKPZ,EAAiB,cAAhB,CAA4B,IAAKW,EAAK,QAAO,GAC7C,SAAAX,EAJgBe,EAAUrB,EAAO,MAIhC,CAAW,GAAGS,EAAQ,SAAAa,EAAS,EACjC,CAEF,CAAC,EACDF,EAAY,YAAc","names":["DialogPrimitive","Slot","createContext","forwardRef","useContext","useEffect","useState","jsx","InternalDialogContext","Root","props","hasDescription","setHasDescription","Trigger","Portal","Close","Overlay","Content","ref","ctx","Title","Description","asChild","children"]}
@@ -1,2 +1,2 @@
1
- import{l as y}from"./chunk-HSTG2BTX.js";import{a as p}from"./chunk-I6T6YV2L.js";import{a as n}from"./chunk-AZ56JGNY.js";import{CheckCircleIcon as x}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as w}from"@phosphor-icons/react/Info";import{WarningIcon as A}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as I}from"@phosphor-icons/react/WarningDiamond";import{Slot as l}from"@radix-ui/react-slot";import{createContext as P,forwardRef as d,useContext as f}from"react";import*as c from"sonner";import{jsx as r,jsxs as k}from"react/jsx-runtime";var N=({className:t,containerAriaLabel:o,dir:e,duration_ms:s=4e3,position:i="top-center",style:a})=>{let m=y();return r(c.Toaster,{className:n("toaster overlay-prompt pointer-events-auto *:duration-200",t),containerAriaLabel:o,dir:e,duration:s,gap:12,position:i??"top-center",style:a,theme:m,toastOptions:{unstyled:!0}})};N.displayName="Toaster";var g=P("");function z(t,o){return c.toast.custom(e=>r(g.Provider,{value:e,children:t}),{duration:o?.duration_ms,...o?.id?{id:o.id}:{},unstyled:!0})}var T=P({priority:"info"}),v=d(({asChild:t,children:o,className:e,priority:s,...i},a)=>{let m=t?l:"div";return r(T.Provider,{value:{priority:s},children:k(m,{className:n("relative flex items-start gap-2 text-sm","p-3 pl-[0.9375rem]","bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg",e),ref:a,...i,children:[r(S,{priority:s}),o]})})});v.displayName="Toast";var h=d(({className:t,svg:o,...e},s)=>{let i=f(T);switch(i.priority){case"danger":return r(p,{className:n("text-danger-600",t),ref:s,svg:o??r(A,{weight:"fill"}),...e});case"warning":return r(p,{className:n("text-warning-600",t),ref:s,svg:o??r(I,{weight:"fill"}),...e});case"success":return r(p,{className:n("text-success-600",t),ref:s,svg:o??r(x,{weight:"fill"}),...e});case"info":return r(p,{className:n("text-accent-600",t),ref:s,svg:r(w,{weight:"fill"}),...e});default:throw new Error(`Unreachable Case: ${i.priority}`)}});h.displayName="ToastIcon";var C=d(({asChild:t,className:o,onClick:e,...s},i)=>{let a=f(g);return r(t?l:"button",{className:n("shrink-0","data-[icon-button]:-mr-0.5 data-[icon-button]:-mt-0.5 data-[icon-button]:rounded-xs",o),onClick:u=>{e?.(u),!u.defaultPrevented&&c.toast.dismiss(a)},ref:i,...s})});C.displayName="ToastAction";var b=d(({asChild:t,className:o,...e},s)=>r(t?l:"p",{className:n("text-strong flex-1 text-sm font-body",o),ref:s,...e}));b.displayName="ToastMessage";var F={Root:v,Action:C,Icon:h,Message:b};function U(t){t.target instanceof Element&&t.target.closest(".overlay-prompt")&&t.preventDefault()}var R={info:"bg-accent-600",warning:"bg-warning-600",success:"bg-success-600",danger:"bg-danger-600"};function S({className:t,priority:o,...e}){return r("div",{"aria-hidden":!0,className:n("z-1 absolute -inset-px right-auto w-1.5 rounded-l",R[o],t),...e})}export{N as a,z as b,F as c,U as d};
2
- //# sourceMappingURL=chunk-FUT5N3AI.js.map
1
+ import{l as y}from"./chunk-THKAHLEP.js";import{a as p}from"./chunk-I6T6YV2L.js";import{a as n}from"./chunk-AZ56JGNY.js";import{CheckCircleIcon as x}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as w}from"@phosphor-icons/react/Info";import{WarningIcon as A}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as I}from"@phosphor-icons/react/WarningDiamond";import{Slot as l}from"@radix-ui/react-slot";import{createContext as P,forwardRef as d,useContext as f}from"react";import*as c from"sonner";import{jsx as r,jsxs as k}from"react/jsx-runtime";var N=({className:t,containerAriaLabel:o,dir:e,duration_ms:s=4e3,position:i="top-center",style:a})=>{let m=y();return r(c.Toaster,{className:n("toaster overlay-prompt pointer-events-auto *:duration-200",t),containerAriaLabel:o,dir:e,duration:s,gap:12,position:i??"top-center",style:a,theme:m,toastOptions:{unstyled:!0}})};N.displayName="Toaster";var g=P("");function z(t,o){return c.toast.custom(e=>r(g.Provider,{value:e,children:t}),{duration:o?.duration_ms,...o?.id?{id:o.id}:{},unstyled:!0})}var T=P({priority:"info"}),v=d(({asChild:t,children:o,className:e,priority:s,...i},a)=>{let m=t?l:"div";return r(T.Provider,{value:{priority:s},children:k(m,{className:n("relative flex items-start gap-2 text-sm","p-3 pl-[0.9375rem]","bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg",e),ref:a,...i,children:[r(S,{priority:s}),o]})})});v.displayName="Toast";var h=d(({className:t,svg:o,...e},s)=>{let i=f(T);switch(i.priority){case"danger":return r(p,{className:n("text-danger-600",t),ref:s,svg:o??r(A,{weight:"fill"}),...e});case"warning":return r(p,{className:n("text-warning-600",t),ref:s,svg:o??r(I,{weight:"fill"}),...e});case"success":return r(p,{className:n("text-success-600",t),ref:s,svg:o??r(x,{weight:"fill"}),...e});case"info":return r(p,{className:n("text-accent-600",t),ref:s,svg:r(w,{weight:"fill"}),...e});default:throw new Error(`Unreachable Case: ${i.priority}`)}});h.displayName="ToastIcon";var C=d(({asChild:t,className:o,onClick:e,...s},i)=>{let a=f(g);return r(t?l:"button",{className:n("shrink-0","data-[icon-button]:-mr-0.5 data-[icon-button]:-mt-0.5 data-[icon-button]:rounded-xs",o),onClick:u=>{e?.(u),!u.defaultPrevented&&c.toast.dismiss(a)},ref:i,...s})});C.displayName="ToastAction";var b=d(({asChild:t,className:o,...e},s)=>r(t?l:"p",{className:n("text-strong flex-1 text-sm font-body",o),ref:s,...e}));b.displayName="ToastMessage";var F={Root:v,Action:C,Icon:h,Message:b};function U(t){t.target instanceof Element&&t.target.closest(".overlay-prompt")&&t.preventDefault()}var R={info:"bg-accent-600",warning:"bg-warning-600",success:"bg-success-600",danger:"bg-danger-600"};function S({className:t,priority:o,...e}){return r("div",{"aria-hidden":!0,className:n("z-1 absolute -inset-px right-auto w-1.5 rounded-l",R[o],t),...e})}export{N as a,z as b,F as c,U as d};
2
+ //# sourceMappingURL=chunk-RH46OJYB.js.map
@@ -1,4 +1,4 @@
1
- import{a as T}from"./chunk-D3XF6J5A.js";import{Fragment as M,jsx as i,jsxs as k}from"react/jsx-runtime";var P="https://assets.ngrok.com",F=`${P}/fonts`,N=["/euclid-square/EuclidSquare-Regular-WebS.woff","/euclid-square/EuclidSquare-RegularItalic-WebS.woff","/euclid-square/EuclidSquare-Medium-WebS.woff","/euclid-square/EuclidSquare-Semibold-WebS.woff","/euclid-square/EuclidSquare-MediumItalic-WebS.woff","/ibm-plex-mono/IBMPlexMono-Text.woff","/ibm-plex-mono/IBMPlexMono-TextItalic.woff","/ibm-plex-mono/IBMPlexMono-SemiBold.woff","/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff"],q=e=>`${F}${e}`,g=({includeNunitoSans:e=!1})=>k(M,{children:[i("link",{rel:"preconnect",href:P}),N.map(t=>i("link",{rel:"preload",href:q(t),as:"font",type:"font/woff",crossOrigin:"anonymous"},t)),e&&i(R,{})]});g.displayName="PreloadFonts";function R(){return k(M,{children:[i("link",{rel:"preconnect",href:"https://fonts.googleapis.com"}),i("link",{rel:"preconnect",href:"https://fonts.gstatic.com",crossOrigin:"anonymous"}),i("link",{href:"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap",rel:"stylesheet"})]})}import b from"clsx";import{createContext as $,useContext as E,useEffect as C,useMemo as x,useState as D}from"react";import L from"tiny-invariant";import{Fragment as z,jsx as y,jsxs as G}from"react/jsx-runtime";var m="(prefers-color-scheme: dark)",l="(prefers-contrast: more)",H=["light","dark","light-high-contrast","dark-high-contrast"],w=["system",...H],ee=e=>e;function I(e){return typeof e!="string"?!1:w.includes(e)}var te=e=>e;function W(e){return typeof e!="string"?!1:H.includes(e)}var u="mantle-ui-theme",B=["system",()=>null],v=$(B),p=()=>typeof window<"u";function d(e,t="system"){let n=t??"system";if(p()){let o=null;try{o="localStorage"in window?window.localStorage.getItem(e):null}catch{}return I(o)?o:n}return n}function O({children:e,defaultTheme:t="system",storageKey:n=u}){let[o,r]=D(()=>{let s=d(n,t);return c(s),s});C(()=>{let s=d(n,t);r(s),c(s)},[t,n]),C(()=>{let s=window.matchMedia(m),a=window.matchMedia(l),h=()=>{d(n,t)==="system"&&c("system")};return s.addEventListener("change",h),a.addEventListener("change",h),()=>{s.removeEventListener("change",h),a.removeEventListener("change",h)}},[t,n]);let f=x(()=>[o,s=>{try{"localStorage"in window&&window.localStorage.setItem(n,s)}catch{}r(s),c(s)}],[n,o]);return y(v.Provider,{value:f,children:e})}O.displayName="ThemeProvider";function ne(){let e=E(v);return L(e,"useTheme must be used within a ThemeProvider"),e}function c(e){if(!p())return;let t=window.document.documentElement;t.classList.remove(...w);let n=window.matchMedia(m).matches,o=window.matchMedia(l).matches,r=S(e,{prefersDarkMode:n,prefersHighContrast:o});t.classList.add(r),t.dataset.appliedTheme=r,t.dataset.theme=e}function oe(){if(!p())return{appliedTheme:void 0,theme:void 0};let e=window.document.documentElement,t=I(e.dataset.theme)?e.dataset.theme:void 0;return{appliedTheme:W(e.dataset.appliedTheme)?e.dataset.appliedTheme:void 0,theme:t}}function S(e,{prefersDarkMode:t,prefersHighContrast:n}){return e==="system"?_({prefersDarkMode:t,prefersHighContrast:n}):e}function se(){let e=E(v),t=e!=null?e[0]:"system",n=T(m),o=T(l);return S(t,{prefersDarkMode:n,prefersHighContrast:o})}function _({prefersDarkMode:e,prefersHighContrast:t}){return t?e?"dark-high-contrast":"light-high-contrast":e?"dark":"light"}function Q(e){let{defaultTheme:t="system",storageKey:n=u}=e??{};return`
1
+ import{a as T}from"./chunk-6J7D73WA.js";import{Fragment as M,jsx as i,jsxs as k}from"react/jsx-runtime";var P="https://assets.ngrok.com",F=`${P}/fonts`,N=["/euclid-square/EuclidSquare-Regular-WebS.woff","/euclid-square/EuclidSquare-RegularItalic-WebS.woff","/euclid-square/EuclidSquare-Medium-WebS.woff","/euclid-square/EuclidSquare-Semibold-WebS.woff","/euclid-square/EuclidSquare-MediumItalic-WebS.woff","/ibm-plex-mono/IBMPlexMono-Text.woff","/ibm-plex-mono/IBMPlexMono-TextItalic.woff","/ibm-plex-mono/IBMPlexMono-SemiBold.woff","/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff"],q=e=>`${F}${e}`,g=({includeNunitoSans:e=!1})=>k(M,{children:[i("link",{rel:"preconnect",href:P}),N.map(t=>i("link",{rel:"preload",href:q(t),as:"font",type:"font/woff",crossOrigin:"anonymous"},t)),e&&i(R,{})]});g.displayName="PreloadFonts";function R(){return k(M,{children:[i("link",{rel:"preconnect",href:"https://fonts.googleapis.com"}),i("link",{rel:"preconnect",href:"https://fonts.gstatic.com",crossOrigin:"anonymous"}),i("link",{href:"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap",rel:"stylesheet"})]})}import b from"clsx";import{createContext as $,useContext as E,useEffect as C,useMemo as x,useState as D}from"react";import L from"tiny-invariant";import{Fragment as z,jsx as y,jsxs as G}from"react/jsx-runtime";var m="(prefers-color-scheme: dark)",l="(prefers-contrast: more)",H=["light","dark","light-high-contrast","dark-high-contrast"],w=["system",...H],ee=e=>e;function I(e){return typeof e!="string"?!1:w.includes(e)}var te=e=>e;function W(e){return typeof e!="string"?!1:H.includes(e)}var u="mantle-ui-theme",B=["system",()=>null],v=$(B),p=()=>typeof window<"u";function d(e,t="system"){let n=t??"system";if(p()){let o=null;try{o="localStorage"in window?window.localStorage.getItem(e):null}catch{}return I(o)?o:n}return n}function O({children:e,defaultTheme:t="system",storageKey:n=u}){let[o,r]=D(()=>{let s=d(n,t);return c(s),s});C(()=>{let s=d(n,t);r(s),c(s)},[t,n]),C(()=>{let s=window.matchMedia(m),a=window.matchMedia(l),h=()=>{d(n,t)==="system"&&c("system")};return s.addEventListener("change",h),a.addEventListener("change",h),()=>{s.removeEventListener("change",h),a.removeEventListener("change",h)}},[t,n]);let f=x(()=>[o,s=>{try{"localStorage"in window&&window.localStorage.setItem(n,s)}catch{}r(s),c(s)}],[n,o]);return y(v.Provider,{value:f,children:e})}O.displayName="ThemeProvider";function ne(){let e=E(v);return L(e,"useTheme must be used within a ThemeProvider"),e}function c(e){if(!p())return;let t=window.document.documentElement;t.classList.remove(...w);let n=window.matchMedia(m).matches,o=window.matchMedia(l).matches,r=S(e,{prefersDarkMode:n,prefersHighContrast:o});t.classList.add(r),t.dataset.appliedTheme=r,t.dataset.theme=e}function oe(){if(!p())return{appliedTheme:void 0,theme:void 0};let e=window.document.documentElement,t=I(e.dataset.theme)?e.dataset.theme:void 0;return{appliedTheme:W(e.dataset.appliedTheme)?e.dataset.appliedTheme:void 0,theme:t}}function S(e,{prefersDarkMode:t,prefersHighContrast:n}){return e==="system"?_({prefersDarkMode:t,prefersHighContrast:n}):e}function se(){let e=E(v),t=e!=null?e[0]:"system",n=T(m),o=T(l);return S(t,{prefersDarkMode:n,prefersHighContrast:o})}function _({prefersDarkMode:e,prefersHighContrast:t}){return t?e?"dark-high-contrast":"light-high-contrast":e?"dark":"light"}function Q(e){let{defaultTheme:t="system",storageKey:n=u}=e??{};return`
2
2
  (function() {
3
3
  const themes = ${JSON.stringify(w)};
4
4
  const isTheme = (value) => typeof value === "string" && themes.includes(value);
@@ -31,4 +31,4 @@ import{a as T}from"./chunk-D3XF6J5A.js";import{Fragment as M,jsx as i,jsxs as k}
31
31
  htmlElement.dataset.theme = themePreference;
32
32
  })();
33
33
  `.trim()}var A=({defaultTheme:e="system",includeNunitoSans:t=!1,nonce:n,storageKey:o=u})=>G(z,{children:[y("script",{dangerouslySetInnerHTML:{__html:Q({defaultTheme:e,storageKey:o})},nonce:n}),y(g,{includeNunitoSans:t})]});A.displayName="MantleThemeHeadContent";function re(e){let{className:t="",defaultTheme:n="system",storageKey:o=u}=e??{};return x(()=>{if(!p())return{className:b(t),"data-applied-theme":"system","data-theme":"system"};let r=window.matchMedia(m).matches,f=window.matchMedia(l).matches,s=d(o,n),a=S(s,{prefersDarkMode:r,prefersHighContrast:f});return{className:b(t,a),"data-applied-theme":a,"data-theme":s}},[t,n,o])}export{g as a,H as b,w as c,ee as d,I as e,te as f,W as g,O as h,ne as i,c as j,oe as k,se as l,Q as m,A as n,re as o};
34
- //# sourceMappingURL=chunk-HSTG2BTX.js.map
34
+ //# sourceMappingURL=chunk-THKAHLEP.js.map
@@ -1,2 +1,2 @@
1
1
  import{useCallback as r,useState as a}from"react";function s(){let[e,t]=a(""),n=r(o=>{(async()=>{try{if(typeof window.navigator?.clipboard?.writeText=="function")await navigator.clipboard.writeText(o),t(o);else throw new Error("writeText not supported")}catch{c(o),t(o)}})()},[]);return[e,n]}function c(e){let t=document.createElement("textarea");t.value=e,document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t)}export{s as a};
2
- //# sourceMappingURL=chunk-IWKI4XHM.js.map
2
+ //# sourceMappingURL=chunk-X7RUBITL.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/hooks/use-copy-to-clipboard.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\n/**\n * A hook that allows you to copy a string to the clipboard.\n *\n * Inspired by: https://usehooks.com/usecopytoclipboard\n */\nfunction useCopyToClipboard() {\n\tconst [state, setState] = useState<string>(\"\");\n\n\tconst copyToClipboard = useCallback((value: string) => {\n\t\tconst handleCopy = async () => {\n\t\t\ttry {\n\t\t\t\tif (typeof window.navigator?.clipboard?.writeText === \"function\") {\n\t\t\t\t\tawait navigator.clipboard.writeText(value);\n\t\t\t\t\tsetState(value);\n\t\t\t\t} else {\n\t\t\t\t\tthrow new Error(\"writeText not supported\");\n\t\t\t\t}\n\t\t\t} catch (_) {\n\t\t\t\tcopyToClipboardPolyfill(value);\n\t\t\t\tsetState(value);\n\t\t\t}\n\t\t};\n\n\t\thandleCopy();\n\t}, []);\n\n\treturn [state, copyToClipboard] as const;\n}\n\nexport {\n\t//,\n\tuseCopyToClipboard,\n};\n\n/**\n * A fallback copy to clipboard function for older browsers.\n */\nfunction copyToClipboardPolyfill(text: string) {\n\tconst tempTextArea = document.createElement(\"textarea\");\n\ttempTextArea.value = text;\n\tdocument.body.appendChild(tempTextArea);\n\ttempTextArea.select();\n\tdocument.execCommand(\"copy\");\n\tdocument.body.removeChild(tempTextArea);\n}\n"],"mappings":"AAAA,OAAS,eAAAA,EAAa,YAAAC,MAAgB,QAOtC,SAASC,GAAqB,CAC7B,GAAM,CAACC,EAAOC,CAAQ,EAAIH,EAAiB,EAAE,EAEvCI,EAAkBL,EAAaM,GAAkB,EACnC,SAAY,CAC9B,GAAI,CACH,GAAI,OAAO,OAAO,WAAW,WAAW,WAAc,WACrD,MAAM,UAAU,UAAU,UAAUA,CAAK,EACzCF,EAASE,CAAK,MAEd,OAAM,IAAI,MAAM,yBAAyB,CAE3C,MAAY,CACXC,EAAwBD,CAAK,EAC7BF,EAASE,CAAK,CACf,CACD,GAEW,CACZ,EAAG,CAAC,CAAC,EAEL,MAAO,CAACH,EAAOE,CAAe,CAC/B,CAUA,SAASG,EAAwBC,EAAc,CAC9C,IAAMC,EAAe,SAAS,cAAc,UAAU,EACtDA,EAAa,MAAQD,EACrB,SAAS,KAAK,YAAYC,CAAY,EACtCA,EAAa,OAAO,EACpB,SAAS,YAAY,MAAM,EAC3B,SAAS,KAAK,YAAYA,CAAY,CACvC","names":["useCallback","useState","useCopyToClipboard","state","setState","copyToClipboard","value","copyToClipboardPolyfill","copyToClipboardPolyfill","text","tempTextArea"]}
@@ -1,4 +1,4 @@
1
- import{a as _}from"./chunk-IWKI4XHM.js";import{a as O}from"./chunk-W2YQRWR5.js";import{a as B}from"./chunk-3C5O3AQA.js";import{a as I}from"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as m}from"./chunk-AZ56JGNY.js";import{CaretDownIcon as ie}from"@phosphor-icons/react/CaretDown";import{CheckIcon as de}from"@phosphor-icons/react/Check";import{CopyIcon as pe}from"@phosphor-icons/react/Copy";import{FileTextIcon as le}from"@phosphor-icons/react/FileText";import{TerminalIcon as ue}from"@phosphor-icons/react/Terminal";import{Slot as x}from"@radix-ui/react-slot";import ce from"clsx";import{createContext as me,forwardRef as y,useContext as A,useEffect as S,useId as ge,useMemo as F,useRef as fe,useState as b}from"react";import P from"tiny-invariant";function N(e){let t="";for(let o of e)switch(o){case"&":t+="&amp;";break;case"<":t+="&lt;";break;case">":t+="&gt;";break;case'"':t+="&quot;";break;case"'":t+="&#39;";break;default:t+=o}return t}import E from"prismjs";import"prismjs/components/prism-bash.js";import"prismjs/components/prism-csharp.js";import"prismjs/components/prism-css.js";import"prismjs/components/prism-go.js";import"prismjs/components/prism-java.js";import"prismjs/components/prism-javascript.js";import"prismjs/components/prism-json.js";import"prismjs/components/prism-jsx.js";import"prismjs/components/prism-markup.js";import"prismjs/components/prism-python.js";import"prismjs/components/prism-ruby.js";import"prismjs/components/prism-rust.js";import"prismjs/components/prism-tsx.js";import"prismjs/components/prism-typescript.js";import"prismjs/components/prism-yaml.js";var te=["tabs","spaces"];function W(e){return te.includes(e)}function $(e,t){return t||(re(e)?"tabs":(se(e),"spaces"))}var ne=["csharp","css","go","html","java","javascript","js","jsx","ts","tsx","typescript","xml"],oe=["python","py","yaml","yml","ruby","rb"];function re(e){return ne.includes(e)}function se(e){return oe.includes(e)}function k(e,t){let{indentation:o="spaces"}=t||{};return e.trim().replace(/^[ \t]*(?=\S)/gm,n=>o==="spaces"?n.replace(/\t/g," "):n.replace(/ {2}/g," "))}var w=["bash","cs","csharp","css","dotnet","go","html","java","javascript","js","json","jsx","markup","plain","plaintext","py","python","rb","ruby","rust","sh","shell","text","ts","tsx","txt","typescript","xml","yaml","yml"];function ae(e){if(!e)return"sh";let t=e.trim().slice(e.indexOf("-")+1);return D(t)?t:"sh"}var D=e=>typeof e=="string"&&w.includes(e);function H(e="sh"){return`language-${e??"sh"}`}import{Fragment as ye,jsx as a,jsxs as j}from"react/jsx-runtime";var M=me({codeId:void 0,copyText:"",hasCodeExpander:!1,isCodeExpanded:!1,registerCodeId:()=>{},setCopyText:()=>{},setHasCodeExpander:()=>{},setIsCodeExpanded:()=>{},unregisterCodeId:()=>{}}),V=y(({asChild:e=!1,className:t,...o},n)=>{let[r,s]=b(""),[d,p]=b(!1),[u,f]=b(!1),[l,c]=b(void 0),v=F(()=>({codeId:l,copyText:r,hasCodeExpander:d,isCodeExpanded:u,registerCodeId:g=>{c(h=>(P(h==null,"You can only render a single CodeBlockCode within a CodeBlock."),g))},setCopyText:s,setHasCodeExpander:p,setIsCodeExpanded:f,unregisterCodeId:g=>{c(h=>{P(h===g,"You can only render a single CodeBlockCode within a CodeBlock.")})}}),[l,r,d,u]),C=e?x:"div";return a(M.Provider,{value:v,children:a(C,{className:m("text-size-mono overflow-hidden rounded-md border border-gray-300 bg-gray-50 font-mono","[&_svg]:shrink-0",t),ref:n,...o})})});V.displayName="CodeBlock";var Y=y(({asChild:e=!1,className:t,...o},n)=>a(e?x:"div",{className:m("relative",t),ref:n,...o}));Y.displayName="CodeBlockBody";var J=y(({className:e,highlightLines:t,indentation:o,language:n="text",showLineNumbers:r,style:s,tabIndex:d,value:p,...u},f)=>{let l=ge(),{hasCodeExpander:c,isCodeExpanded:v,registerCodeId:C,setCopyText:g,unregisterCodeId:h}=A(M),T=$(n,o),L=F(()=>k(p,{indentation:T}),[p,T]),[X,Z]=b(N(k(p,{indentation:T})));S(()=>{let R=E.languages[n];P(R,`CodeBlock does not support the language "${n}". The syntax highlighter does not have a grammar for this language. The supported languages are: ${w.join(", ")}.`);let ee=E.highlight(L,R,n);Z(ee)},[L,n]),S(()=>{g(L)},[L,g]),S(()=>(C(l),()=>{h(l)}),[l,C,h]);let z=H(n);return a("pre",{"aria-expanded":c?v:void 0,className:m("scrollbar overflow-x-auto overflow-y-hidden p-4 pr-14","text-size-inherit text-size-mono m-0 font-mono","aria-collapsed:max-h-[13.6rem]",z,e),"data-lang":n,id:l,ref:f,style:{...s,tabSize:2,MozTabSize:2},tabIndex:d??-1,...u,children:a("code",{className:ce("text-size-inherit",z),dangerouslySetInnerHTML:{__html:X},suppressHydrationWarning:!0})})});J.displayName="CodeBlockCode";var q=y(({asChild:e=!1,className:t,...o},n)=>a(e?x:"div",{className:m("flex items-center gap-1 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700",t),ref:n,...o}));q.displayName="CodeBlockHeader";var Q=y(({asChild:e=!1,className:t,...o},n)=>a(e?x:"h3",{ref:n,className:m("text-size-mono m-0 font-mono font-normal",t),...o}));Q.displayName="CodeBlockTitle";var G=y(({asChild:e=!1,className:t,onCopy:o,onCopyError:n,onClick:r,...s},d)=>{let{copyText:p}=A(M),[,u]=_(),[f,l]=b(!1),c=fe(0);return j(e?x:"button",{type:"button",className:m("focus-visible:border-accent-600 focus-visible:ring-focus-accent absolute right-2.5 top-2.5 z-10 flex size-7 items-center justify-center rounded border border-gray-300 bg-gray-50 shadow-[-1rem_0_0.75rem_-0.375rem_var(--color-gray-50),1rem_0_0_-0.25rem_var(--color-gray-50)] hover:border-gray-400 hover:bg-gray-200 focus-visible:outline-hidden focus-visible:ring-4",f&&"bg-filled-success text-on-filled hover:bg-filled-success focus:bg-filled-success focus-visible:border-success-600 focus-visible:ring-focus-success w-auto gap-1 border-transparent pl-2 pr-1.5 hover:border-transparent",t),ref:d,onClick:async C=>{try{if(r?.(C),C.defaultPrevented){window.clearTimeout(c.current);return}await u(p),o?.(p),l(!0),window.clearTimeout(c.current),c.current=window.setTimeout(()=>{l(!1)},2e3)}catch(g){n?.(g)}},...s,children:[a("span",{className:"sr-only",children:"Copy code"}),f?j(ye,{children:["Copied",a(I,{svg:a(de,{weight:"bold"}),className:"size-4"})]}):a(I,{svg:a(pe,{}),className:"-ml-px"})]})});G.displayName="CodeBlockCopyButton";var K=y(({asChild:e=!1,className:t,onClick:o,...n},r)=>{let{codeId:s,isCodeExpanded:d,setIsCodeExpanded:p,setHasCodeExpander:u}=A(M);return S(()=>(u(!0),()=>{u(!1)}),[u]),j(e?x:"button",{...n,"aria-controls":s,"aria-expanded":d,className:m("flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-gray-50 px-4 py-2 font-sans text-gray-700 hover:bg-gray-100",t),ref:r,type:"button",onClick:l=>{p(c=>!c),o?.(l)},children:[d?"Show less":"Show more"," ",a(I,{svg:a(ie,{weight:"bold"}),className:m("size-4",d&&"rotate-180","transition-all duration-150")})]})});K.displayName="CodeBlockExpanderButton";function U({className:e,preset:t,svg:o,...n}){let r=o;if(t!=null)switch(t){case"file":r=a(le,{weight:"fill"});break;case"cli":r=a(ue,{weight:"fill"});break;case"traffic-policy":r=a(O,{});break}return a(I,{className:e,svg:r,...n})}U.displayName="CodeBlockIcon";var Ce={Root:V,Body:Y,Code:J,CopyButton:G,ExpanderButton:K,Header:q,Icon:U,Title:Q};function he(e,...t){if(!xe(e)||!Array.isArray(t))throw new Error("It looks like you tried to call `fmtCode` as a function. Make sure to use it as a tagged template.\n Example: fmtCode`SELECT * FROM users`, not fmtCode('SELECT * FROM users')");let o=String.raw({raw:e},...t),n=be(o);return o.trim().split(`
1
+ import{a as _}from"./chunk-X7RUBITL.js";import{a as O}from"./chunk-W2YQRWR5.js";import{a as B}from"./chunk-3C5O3AQA.js";import{a as I}from"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as m}from"./chunk-AZ56JGNY.js";import{CaretDownIcon as ie}from"@phosphor-icons/react/CaretDown";import{CheckIcon as de}from"@phosphor-icons/react/Check";import{CopyIcon as pe}from"@phosphor-icons/react/Copy";import{FileTextIcon as le}from"@phosphor-icons/react/FileText";import{TerminalIcon as ue}from"@phosphor-icons/react/Terminal";import{Slot as x}from"@radix-ui/react-slot";import ce from"clsx";import{createContext as me,forwardRef as y,useContext as A,useEffect as S,useId as ge,useMemo as F,useRef as fe,useState as b}from"react";import P from"tiny-invariant";function N(e){let t="";for(let o of e)switch(o){case"&":t+="&amp;";break;case"<":t+="&lt;";break;case">":t+="&gt;";break;case'"':t+="&quot;";break;case"'":t+="&#39;";break;default:t+=o}return t}import E from"prismjs";import"prismjs/components/prism-bash.js";import"prismjs/components/prism-csharp.js";import"prismjs/components/prism-css.js";import"prismjs/components/prism-go.js";import"prismjs/components/prism-java.js";import"prismjs/components/prism-javascript.js";import"prismjs/components/prism-json.js";import"prismjs/components/prism-jsx.js";import"prismjs/components/prism-markup.js";import"prismjs/components/prism-python.js";import"prismjs/components/prism-ruby.js";import"prismjs/components/prism-rust.js";import"prismjs/components/prism-tsx.js";import"prismjs/components/prism-typescript.js";import"prismjs/components/prism-yaml.js";var te=["tabs","spaces"];function W(e){return te.includes(e)}function $(e,t){return t||(re(e)?"tabs":(se(e),"spaces"))}var ne=["csharp","css","go","html","java","javascript","js","jsx","ts","tsx","typescript","xml"],oe=["python","py","yaml","yml","ruby","rb"];function re(e){return ne.includes(e)}function se(e){return oe.includes(e)}function k(e,t){let{indentation:o="spaces"}=t||{};return e.trim().replace(/^[ \t]*(?=\S)/gm,n=>o==="spaces"?n.replace(/\t/g," "):n.replace(/ {2}/g," "))}var w=["bash","cs","csharp","css","dotnet","go","html","java","javascript","js","json","jsx","markup","plain","plaintext","py","python","rb","ruby","rust","sh","shell","text","ts","tsx","txt","typescript","xml","yaml","yml"];function ae(e){if(!e)return"sh";let t=e.trim().slice(e.indexOf("-")+1);return D(t)?t:"sh"}var D=e=>typeof e=="string"&&w.includes(e);function H(e="sh"){return`language-${e??"sh"}`}import{Fragment as ye,jsx as a,jsxs as j}from"react/jsx-runtime";var M=me({codeId:void 0,copyText:"",hasCodeExpander:!1,isCodeExpanded:!1,registerCodeId:()=>{},setCopyText:()=>{},setHasCodeExpander:()=>{},setIsCodeExpanded:()=>{},unregisterCodeId:()=>{}}),V=y(({asChild:e=!1,className:t,...o},n)=>{let[r,s]=b(""),[d,p]=b(!1),[u,f]=b(!1),[l,c]=b(void 0),v=F(()=>({codeId:l,copyText:r,hasCodeExpander:d,isCodeExpanded:u,registerCodeId:g=>{c(h=>(P(h==null,"You can only render a single CodeBlockCode within a CodeBlock."),g))},setCopyText:s,setHasCodeExpander:p,setIsCodeExpanded:f,unregisterCodeId:g=>{c(h=>{P(h===g,"You can only render a single CodeBlockCode within a CodeBlock.")})}}),[l,r,d,u]),C=e?x:"div";return a(M.Provider,{value:v,children:a(C,{className:m("text-size-mono overflow-hidden rounded-md border border-gray-300 bg-gray-50 font-mono","[&_svg]:shrink-0",t),ref:n,...o})})});V.displayName="CodeBlock";var Y=y(({asChild:e=!1,className:t,...o},n)=>a(e?x:"div",{className:m("relative",t),ref:n,...o}));Y.displayName="CodeBlockBody";var J=y(({className:e,highlightLines:t,indentation:o,language:n="text",showLineNumbers:r,style:s,tabIndex:d,value:p,...u},f)=>{let l=ge(),{hasCodeExpander:c,isCodeExpanded:v,registerCodeId:C,setCopyText:g,unregisterCodeId:h}=A(M),T=$(n,o),L=F(()=>k(p,{indentation:T}),[p,T]),[X,Z]=b(N(k(p,{indentation:T})));S(()=>{let R=E.languages[n];P(R,`CodeBlock does not support the language "${n}". The syntax highlighter does not have a grammar for this language. The supported languages are: ${w.join(", ")}.`);let ee=E.highlight(L,R,n);Z(ee)},[L,n]),S(()=>{g(L)},[L,g]),S(()=>(C(l),()=>{h(l)}),[l,C,h]);let z=H(n);return a("pre",{"aria-expanded":c?v:void 0,className:m("scrollbar overflow-x-auto overflow-y-hidden p-4 pr-14","text-size-inherit text-size-mono m-0 font-mono","aria-collapsed:max-h-[13.6rem]",z,e),"data-lang":n,id:l,ref:f,style:{...s,tabSize:2,MozTabSize:2},tabIndex:d??-1,...u,children:a("code",{className:ce("text-size-inherit",z),dangerouslySetInnerHTML:{__html:X},suppressHydrationWarning:!0})})});J.displayName="CodeBlockCode";var q=y(({asChild:e=!1,className:t,...o},n)=>a(e?x:"div",{className:m("flex items-center gap-1 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700",t),ref:n,...o}));q.displayName="CodeBlockHeader";var Q=y(({asChild:e=!1,className:t,...o},n)=>a(e?x:"h3",{ref:n,className:m("text-size-mono m-0 font-mono font-normal",t),...o}));Q.displayName="CodeBlockTitle";var G=y(({asChild:e=!1,className:t,onCopy:o,onCopyError:n,onClick:r,...s},d)=>{let{copyText:p}=A(M),[,u]=_(),[f,l]=b(!1),c=fe(0);return j(e?x:"button",{type:"button",className:m("focus-visible:border-accent-600 focus-visible:ring-focus-accent absolute right-2.5 top-2.5 z-10 flex size-7 items-center justify-center rounded border border-gray-300 bg-gray-50 shadow-[-1rem_0_0.75rem_-0.375rem_var(--color-gray-50),1rem_0_0_-0.25rem_var(--color-gray-50)] hover:border-gray-400 hover:bg-gray-200 focus-visible:outline-hidden focus-visible:ring-4",f&&"bg-filled-success text-on-filled hover:bg-filled-success focus:bg-filled-success focus-visible:border-success-600 focus-visible:ring-focus-success w-auto gap-1 border-transparent pl-2 pr-1.5 hover:border-transparent",t),ref:d,onClick:async C=>{try{if(r?.(C),C.defaultPrevented){window.clearTimeout(c.current);return}await u(p),o?.(p),l(!0),window.clearTimeout(c.current),c.current=window.setTimeout(()=>{l(!1)},2e3)}catch(g){n?.(g)}},...s,children:[a("span",{className:"sr-only",children:"Copy code"}),f?j(ye,{children:["Copied",a(I,{svg:a(de,{weight:"bold"}),className:"size-4"})]}):a(I,{svg:a(pe,{}),className:"-ml-px"})]})});G.displayName="CodeBlockCopyButton";var K=y(({asChild:e=!1,className:t,onClick:o,...n},r)=>{let{codeId:s,isCodeExpanded:d,setIsCodeExpanded:p,setHasCodeExpander:u}=A(M);return S(()=>(u(!0),()=>{u(!1)}),[u]),j(e?x:"button",{...n,"aria-controls":s,"aria-expanded":d,className:m("flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-gray-50 px-4 py-2 font-sans text-gray-700 hover:bg-gray-100",t),ref:r,type:"button",onClick:l=>{p(c=>!c),o?.(l)},children:[d?"Show less":"Show more"," ",a(I,{svg:a(ie,{weight:"bold"}),className:m("size-4",d&&"rotate-180","transition-all duration-150")})]})});K.displayName="CodeBlockExpanderButton";function U({className:e,preset:t,svg:o,...n}){let r=o;if(t!=null)switch(t){case"file":r=a(le,{weight:"fill"});break;case"cli":r=a(ue,{weight:"fill"});break;case"traffic-policy":r=a(O,{});break}return a(I,{className:e,svg:r,...n})}U.displayName="CodeBlockIcon";var Ce={Root:V,Body:Y,Code:J,CopyButton:G,ExpanderButton:K,Header:q,Icon:U,Title:Q};function he(e,...t){if(!xe(e)||!Array.isArray(t))throw new Error("It looks like you tried to call `fmtCode` as a function. Make sure to use it as a tagged template.\n Example: fmtCode`SELECT * FROM users`, not fmtCode('SELECT * FROM users')");let o=String.raw({raw:e},...t),n=be(o);return o.trim().split(`
2
2
  `).map(s=>/^\S+/.test(s)?s:s.slice(n)).join(`
3
3
  `)}function be(e){let t=e.match(/^[ \t]*(?=\S)/gm);return t?t.reduce((o,n)=>Math.min(o,n.length),Number.POSITIVE_INFINITY):0}function xe(e){return Array.isArray(e)&&"raw"in e&&Array.isArray(e.raw)}var Ie=["cli","file","traffic-policy"],i={collapsible:!1,disableCopy:!1,indentation:void 0,mode:void 0,title:void 0};function ve(e){let t=e?.trim()??"";if(!t)return i;let o=ke(t).reduce((n,r)=>{let[s,d]=r.split("=");if(!s)return n;let p=Le(d);return n[s]=p??!0,n},{});try{let n=Se(o);return{...i,...n}}catch{return i}}function Le(e){return e?.trim().replace(/^"(.*)"$/,"$1")}function ke(e){let t=e?.trim()??"",o=[],n="",r=!1;for(let s of t)s===" "&&!r?n&&(o.push(n),n=""):(s==='"'&&(r=!r),n+=s);return n&&o.push(n),o}function we(e){return Ie.includes(e)}function Se(e){let{collapsible:t=i.collapsible,disableCopy:o=i.disableCopy,indentation:n=i.indentation,mode:r=i.mode,title:s=i.title}=e;return{collapsible:typeof t=="string"||typeof t=="boolean"?B(t):i.collapsible,disableCopy:typeof o=="string"||typeof o=="boolean"?B(o):i.disableCopy,indentation:W(n)?n:i.indentation,mode:we(r)?r:i.mode,title:typeof s=="string"?s.trim():i.title}}export{Ce as CodeBlock,i as defaultMeta,N as escapeHtml,he as fmtCode,H as formatLanguageClassName,D as isSupportedLanguage,k as normalizeIndentation,ae as parseLanguage,ve as parseMetastring,w as supportedLanguages};
4
4
  //# sourceMappingURL=code-block.js.map
package/dist/code.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import * as react from 'react';
2
+ import { HTMLAttributes } from 'react';
3
+
4
+ /**
5
+ * Marks text to signify a short fragment of inline computer code.
6
+ *
7
+ * @see https://mantle.ngrok.com/components/code#api-code
8
+ *
9
+ * @example
10
+ * ```tsx
11
+ * <p>
12
+ * Use the <Code>console.log()</Code> function to debug your code.
13
+ * </p>
14
+ * ```
15
+ */
16
+ declare const Code: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
17
+
18
+ export { Code };
package/dist/code.js ADDED
@@ -0,0 +1,2 @@
1
+ import{a as e}from"./chunk-AZ56JGNY.js";import{forwardRef as d}from"react";import{jsx as p}from"react/jsx-runtime";var o=d(({className:r,...t},m)=>p("code",{ref:m,className:e("border-card rounded-md border bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]",r),...t}));o.displayName="Code";export{o as Code};
2
+ //# sourceMappingURL=code.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/code/code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * Marks text to signify a short fragment of inline computer code.\n *\n * @see https://mantle.ngrok.com/components/code#api-code\n *\n * @example\n * ```tsx\n * <p>\n * Use the <Code>console.log()</Code> function to debug your code.\n * </p>\n * ```\n */\nconst Code = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(\n\t({ className, ...props }, ref) => (\n\t\t<code\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"border-card rounded-md border bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCode.displayName = \"Code\";\n\nexport {\n\t//,\n\tCode,\n};\n"],"mappings":"wCAAA,OAAS,cAAAA,MAAkB,QAkBzB,cAAAC,MAAA,oBAFF,IAAMC,EAAOC,EACZ,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IACzBL,EAAC,QACA,IAAKK,EACL,UAAWC,EACV,iFACAH,CACD,EACC,GAAGC,EACL,CAEF,EACAH,EAAK,YAAc","names":["forwardRef","jsx","Code","forwardRef","className","props","ref","cx"]}
package/dist/dialog.d.ts CHANGED
@@ -238,7 +238,7 @@ declare const Dialog: {
238
238
  * </Dialog.Root>
239
239
  * ```
240
240
  */
241
- readonly Description: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
241
+ readonly Description: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
242
242
  /**
243
243
  * Contains the footer content of the dialog, including action buttons.
244
244
  *
package/dist/dialog.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as f,b as P,c as D,d as m,e as u,f as v,g as y,h as C}from"./chunk-2ID2TLYD.js";import{d as p}from"./chunk-FUT5N3AI.js";import"./chunk-HSTG2BTX.js";import"./chunk-D3XF6J5A.js";import{a as g}from"./chunk-S4HWPRRX.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{XIcon as k}from"@phosphor-icons/react/X";import{forwardRef as r}from"react";import{jsx as e,jsxs as H}from"react/jsx-runtime";var x=f;x.displayName="Dialog";var N=P;N.displayName="DialogTrigger";var d=D;d.displayName="DialogPortal";var b=m;b.displayName="DialogClose";var c=r(({className:o,...t},i)=>e(u,{ref:i,className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs",o),...t}));c.displayName="DialogOverlay";var h=r(({children:o,className:t,onInteractOutside:i,onPointerDownOutside:l,preferredWidth:s="max-w-lg",...W},z)=>H(d,{children:[e(c,{}),e("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:e(v,{className:a("flex max-h-full w-full flex-1 flex-col","outline-hidden focus-within:outline-hidden","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",s,t),onInteractOutside:n=>{p(n),i?.(n)},onPointerDownOutside:n=>{p(n),l?.(n)},ref:z,...W,children:o})})]}));h.displayName="DialogContent";var R=({className:o,children:t,...i})=>e("div",{className:a("border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4","has-[.icon-button]:pr-4",o),...i,children:t});R.displayName="DialogHeader";var w=({size:o="md",type:t="button",label:i="Close Dialog",appearance:l="ghost",...s})=>e(m,{asChild:!0,children:e(g,{appearance:l,icon:e(k,{}),label:i,size:o,type:t,...s})});w.displayName="DialogCloseIconButton";var I=({className:o,...t})=>e("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...t});I.displayName="DialogBody";var B=({className:o,...t})=>e("div",{className:a("border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4",o),...t});B.displayName="DialogFooter";var O=r(({className:o,...t},i)=>e(y,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...t}));O.displayName="DialogTitle";var T=r(({className:o,...t},i)=>e(C,{ref:i,className:a("text-muted",o),...t}));T.displayName="DialogDescription";var F={Root:x,Body:I,Close:b,CloseIconButton:w,Content:h,Description:T,Footer:B,Header:R,Overlay:c,Portal:d,Title:O,Trigger:N};export{F as Dialog};
1
+ import{a as f,b as P,c as D,d as m,e as u,f as v,g as y,h as C}from"./chunk-PX63EGR2.js";import{d as p}from"./chunk-RH46OJYB.js";import"./chunk-THKAHLEP.js";import"./chunk-6J7D73WA.js";import{a as g}from"./chunk-E6VQ7CJN.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{XIcon as k}from"@phosphor-icons/react/X";import{forwardRef as r}from"react";import{jsx as e,jsxs as H}from"react/jsx-runtime";var x=f;x.displayName="Dialog";var N=P;N.displayName="DialogTrigger";var d=D;d.displayName="DialogPortal";var b=m;b.displayName="DialogClose";var c=r(({className:o,...t},i)=>e(u,{ref:i,className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs",o),...t}));c.displayName="DialogOverlay";var h=r(({children:o,className:t,onInteractOutside:i,onPointerDownOutside:l,preferredWidth:s="max-w-lg",...W},z)=>H(d,{children:[e(c,{}),e("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:e(v,{className:a("flex max-h-full w-full flex-1 flex-col","outline-hidden focus-within:outline-hidden","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",s,t),onInteractOutside:n=>{p(n),i?.(n)},onPointerDownOutside:n=>{p(n),l?.(n)},ref:z,...W,children:o})})]}));h.displayName="DialogContent";var R=({className:o,children:t,...i})=>e("div",{className:a("border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4","has-[.icon-button]:pr-4",o),...i,children:t});R.displayName="DialogHeader";var w=({size:o="md",type:t="button",label:i="Close Dialog",appearance:l="ghost",...s})=>e(m,{asChild:!0,children:e(g,{appearance:l,icon:e(k,{}),label:i,size:o,type:t,...s})});w.displayName="DialogCloseIconButton";var I=({className:o,...t})=>e("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...t});I.displayName="DialogBody";var B=({className:o,...t})=>e("div",{className:a("border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4",o),...t});B.displayName="DialogFooter";var O=r(({className:o,...t},i)=>e(y,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...t}));O.displayName="DialogTitle";var T=r(({className:o,...t},i)=>e(C,{ref:i,className:a("text-muted",o),...t}));T.displayName="DialogDescription";var F={Root:x,Body:I,Close:b,CloseIconButton:w,Content:h,Description:T,Footer:B,Header:R,Overlay:c,Portal:d,Title:O,Trigger:N};export{F as Dialog};
2
2
  //# sourceMappingURL=dialog.js.map