@ngrok/mantle 0.64.2 → 0.65.0

package/README.md

@@ -38,6 +38,21 @@ Also install the required `devDependencies`:
 
 Next, check out the [Overview & Setup](https://mantle.ngrok.com/) docs and start using mantle components in your application!
 
+## Git Hooks
+
+Pre-commit hooks run automatically via [husky](https://typicode.github.io/husky/) and [lint-staged](https://github.com/lint-staged/lint-staged). On every commit, staged files are formatted with oxfmt and linted with oxlint.
+
+### Opting Out
+
+If you need to skip the pre-commit hook locally (e.g., WIP commits, rebasing), set the `SKIP_HOOKS` env var:
+
+```bash
+SKIP_HOOKS=1 git commit -m "wip"
+```
+
+> [!NOTE]
+> This is a **local opt-out only**. CI will always run formatting and linting checks against your branch, so any issues will still be caught before merge.
+
 ## Contributing
 
 Please read our [contribution guide](https://github.com/ngrok-oss/mantle/blob/main/CONTRIBUTING.md) and [conventions](https://github.com/ngrok-oss/mantle/blob/main/CONVENTIONS.md).

package/dist/alert.d.ts

@@ -35,7 +35,12 @@ type AlertIconProps = Omit<SvgAttributes, "children"> & {
     svg?: ReactNode;
 };
 type AlertDescriptionProps = ComponentProps<"div"> & WithAsChild;
-type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "icon">>;
+type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "icon">> & {
+    /**
+     * An optional icon to render inside the dismiss button. Defaults to an X icon.
+     */
+    icon?: ReactNode;
+};
 /**
  * Displays a callout for user attention.
  *
@@ -125,7 +130,7 @@ declare const Alert: {
      * ```
      */
     readonly DismissIconButton: {
-        ({ size, type, label, appearance, className, style, ...props }: AlertDismissIconButtonProps): react_jsx_runtime.JSX.Element;
+        ({ size, type, label, appearance, className, icon, style, ...props }: AlertDismissIconButtonProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
     /**

package/dist/alert.js

@@ -1,2 +1,2 @@
-import{c as f}from"./chunk-CBRSMQ26.js";import{a as d}from"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-IVQ626TU.js";import{a as l}from"./chunk-ADF5DAYG.js";import{a as m}from"./chunk-SBQHQ2SJ.js";import{a as i}from"./chunk-PFXFESEN.js";import{CheckCircleIcon as I}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as N}from"@phosphor-icons/react/Info";import{WarningIcon as h}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as T}from"@phosphor-icons/react/WarningDiamond";import{XIcon as R}from"@phosphor-icons/react/X";import{cva as w}from"class-variance-authority";import{createContext as D,forwardRef as c,useContext as B,useMemo as H}from"react";import M from"tiny-invariant";import{jsx as o}from"react/jsx-runtime";var u=D(null);function y(){let t=B(u);return M(t,"useAlertContext hook used outside of Alert parent!"),t}var V=w("relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans",{variants:{priority:{danger:"border-danger-500/50 bg-danger-500/10 text-danger-700",info:"border-info-500/50 bg-info-500/10 text-info-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"},appearance:{banner:"border-x-0 border-t-0 rounded-none z-50 sticky",default:""}},compoundVariants:[{priority:"danger",appearance:"banner",className:""},{priority:"info",appearance:"banner",className:""},{priority:"success",appearance:"banner",className:""},{priority:"warning",appearance:"banner",className:""}]}),A=c(({appearance:t="default",className:r,priority:e,...s},n)=>{let a=H(()=>({priority:e}),[e]);return o(u.Provider,{value:a,children:o("div",{ref:n,className:i(V({appearance:t,priority:e}),r),...s})})});A.displayName="Alert";var W={danger:o(h,{}),info:o(N,{}),success:o(I,{}),warning:o(T,{})},g=c(({className:t,svg:r,...e},s)=>{let n=y(),a=W[n.priority];return o(m,{ref:s,className:i("size-5",t),svg:r??a,...e})});g.displayName="AlertIcon";var v=c(({className:t,...r},e)=>o("div",{ref:e,className:i("min-w-0 flex-1 has-data-alert-dismiss:pr-6",t),...r}));v.displayName="AlertContent";var C=c(({asChild:t=!1,className:r,...e},s)=>o(t?l:"h5",{ref:s,className:i("font-medium",r),...e}));C.displayName="AlertTitle";var x=c(({asChild:t=!1,className:r,...e},s)=>o(t?l:"div",{ref:s,className:i("text-sm",r),...e}));x.displayName="AlertDescription";var L=t=>`var(--color-${t}-700)`,S=t=>`var(--color-${t}-800)`,$=t=>`var(--color-${t}-900)`,P=({size:t="sm",type:r="button",label:e="Dismiss Alert",appearance:s="ghost",className:n,style:a,...b})=>{let p=y();return o(f,{appearance:s,icon:o(R,{}),label:e,size:t,"data-alert-dismiss":!0,className:i("right-1.5 top-1.5 absolute","text-(--alert-dismiss-icon-color)","not-disabled:hover:text-(--alert-dismiss-icon-hover-color)","not-disabled:active:text-(--alert-dismiss-icon-active-color)",n),type:r,style:d({...a,"--alert-dismiss-icon-color":L(p.priority),"--alert-dismiss-icon-hover-color":S(p.priority),"--alert-dismiss-icon-active-color":$(p.priority)}),...b})};P.displayName="AlertDismissIconButton";var k={Root:A,Content:v,Description:x,DismissIconButton:P,Icon:g,Title:C};export{k as Alert};
+import{c as f}from"./chunk-CBRSMQ26.js";import{a as d}from"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-IVQ626TU.js";import{a as l}from"./chunk-ADF5DAYG.js";import{a as m}from"./chunk-SBQHQ2SJ.js";import{a as i}from"./chunk-PFXFESEN.js";import{CheckCircleIcon as I}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as h}from"@phosphor-icons/react/Info";import{WarningIcon as T}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as R}from"@phosphor-icons/react/WarningDiamond";import{XIcon as w}from"@phosphor-icons/react/X";import{cva as D}from"class-variance-authority";import{createContext as B,forwardRef as c,useContext as H,useMemo as M}from"react";import V from"tiny-invariant";import{jsx as o}from"react/jsx-runtime";var u=B(null);function y(){let t=H(u);return V(t,"useAlertContext hook used outside of Alert parent!"),t}var W=D("relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans",{variants:{priority:{danger:"border-danger-500/50 bg-danger-500/10 text-danger-700",info:"border-info-500/50 bg-info-500/10 text-info-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"},appearance:{banner:"border-x-0 border-t-0 rounded-none z-50 sticky",default:""}},compoundVariants:[{priority:"danger",appearance:"banner",className:""},{priority:"info",appearance:"banner",className:""},{priority:"success",appearance:"banner",className:""},{priority:"warning",appearance:"banner",className:""}]}),A=c(({appearance:t="default",className:r,priority:e,...s},n)=>{let a=M(()=>({priority:e}),[e]);return o(u.Provider,{value:a,children:o("div",{ref:n,className:i(W({appearance:t,priority:e}),r),...s})})});A.displayName="Alert";var L={danger:o(T,{}),info:o(h,{}),success:o(I,{}),warning:o(R,{})},g=c(({className:t,svg:r,...e},s)=>{let n=y(),a=L[n.priority];return o(m,{ref:s,className:i("size-5",t),svg:r??a,...e})});g.displayName="AlertIcon";var v=c(({className:t,...r},e)=>o("div",{ref:e,className:i("min-w-0 flex-1 has-data-alert-dismiss:pr-6",t),...r}));v.displayName="AlertContent";var C=c(({asChild:t=!1,className:r,...e},s)=>o(t?l:"h5",{ref:s,className:i("font-medium",r),...e}));C.displayName="AlertTitle";var x=c(({asChild:t=!1,className:r,...e},s)=>o(t?l:"div",{ref:s,className:i("text-sm",r),...e}));x.displayName="AlertDescription";var S=t=>`var(--color-${t}-700)`,$=t=>`var(--color-${t}-800)`,k=t=>`var(--color-${t}-900)`,P=({size:t="sm",type:r="button",label:e="Dismiss Alert",appearance:s="ghost",className:n,icon:a=o(w,{}),style:b,...N})=>{let p=y();return o(f,{appearance:s,icon:a,label:e,size:t,"data-alert-dismiss":!0,className:i("right-1.5 top-1.5 absolute","text-(--alert-dismiss-icon-color)","not-disabled:hover:text-(--alert-dismiss-icon-hover-color)","not-disabled:active:text-(--alert-dismiss-icon-active-color)",n),type:r,style:d({...b,"--alert-dismiss-icon-color":S(p.priority),"--alert-dismiss-icon-hover-color":$(p.priority),"--alert-dismiss-icon-active-color":k(p.priority)}),...N})};P.displayName="AlertDismissIconButton";var z={Root:A,Content:v,Description:x,DismissIconButton:P,Icon:g,Title:C};export{z as Alert};
 //# sourceMappingURL=alert.js.map

package/dist/alert.js.map

@@ -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 { cva } from \"class-variance-authority\";\nimport type { ComponentProps, ComponentRef, HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, forwardRef, useContext, useMemo } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { $cssProperties, 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\";\nimport { Slot } from \"../slot/index.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\nconst appearances = [\"banner\", \"default\"] as const;\ntype Appearance = (typeof appearances)[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 font-sans\",\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-info-500/50 bg-info-500/10 text-info-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\t/**\n\t\t\t * Controls the visual style of the Alert.\n\t\t\t * - \"default\" provides standard rounded corners and borders.\n\t\t\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t\t\t *\n\t\t\t * @default \"default\"\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tbanner: \"border-x-0 border-t-0 rounded-none z-50 sticky\",\n\t\t\t\tdefault: \"\",\n\t\t\t} as const satisfies Record<Appearance, string>,\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"info\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"success\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"warning\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\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\t/**\n\t * Controls the visual style of the Alert.\n\t * - \"default\" provides standard rounded corners and borders.\n\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t *\n\t * @default \"default\"\n\t */\n\tappearance?: Appearance;\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#alertroot\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({ appearance = \"default\", className, priority, ...props }, ref) => {\n\t\tconst context: AlertContextValue = useMemo(() => ({ priority }), [priority]);\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({ appearance, 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#alerticon\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 ref={ref} className={cx(\"size-5\", className)} svg={svg ?? defaultIcon} {...props} />\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#alertcontent\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(\"min-w-0 flex-1 has-data-alert-dismiss:pr-6\", className)}\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#alerttitle\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 <Component ref={ref} className={cx(\"font-medium\", className)} {...props} />;\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#alertdescription\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 <Component ref={ref} className={cx(\"text-sm\", className)} {...props} />;\n\t},\n);\nDescription.displayName = \"AlertDescription\";\n\nconst dismissTextColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-700)`;\n\nconst dismissHoverColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-800)`;\n\nconst dismissActiveColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-900)`;\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\tstyle,\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\"text-(--alert-dismiss-icon-color)\",\n\t\t\t\t\"not-disabled:hover:text-(--alert-dismiss-icon-hover-color)\",\n\t\t\t\t\"not-disabled:active:text-(--alert-dismiss-icon-active-color)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\ttype={type}\n\t\t\tstyle={$cssProperties({\n\t\t\t\t...style,\n\t\t\t\t\"--alert-dismiss-icon-color\": dismissTextColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-icon-hover-color\": dismissHoverColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-icon-active-color\": dismissActiveColor(ctx.priority),\n\t\t\t})}\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#alertroot\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#alertcontent\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#alertdescription\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#alertdismissiconbutton\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#alerticon\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#alerttitle\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":"4RAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,YAAAC,MAAgB,6BACzB,OAAS,eAAAC,MAAmB,gCAC5B,OAAS,sBAAAC,MAA0B,uCACnC,OAAS,SAAAC,MAAa,0BACtB,OAAS,OAAAC,MAAW,2BAEpB,OAAS,iBAAAC,EAAe,cAAAC,EAAY,cAAAC,EAAY,WAAAC,MAAe,QAC/D,OAAOC,MAAe,iBA8HlB,cAAAC,MAAA,oBArGJ,IAAMC,EAAeC,EAAwC,IAAI,EAEjE,SAASC,GAAkB,CAC1B,IAAMC,EAAUC,EAAWJ,CAAY,EACvC,OAAAK,EAAUF,EAAS,oDAAoD,EAChEA,CACR,CAEA,IAAMG,EAAgBC,EACrB,yEACA,CACC,SAAU,CAKT,SAAU,CACT,OAAQ,wDACR,KAAM,kDAEN,QAAS,2DACT,QAAS,0DACV,EAQA,WAAY,CACX,OAAQ,iDACR,QAAS,EACV,CACD,EACA,iBAAkB,CACjB,CACC,SAAU,SACV,WAAY,SACZ,UAAW,EACZ,EACA,CACC,SAAU,OACV,WAAY,SACZ,UAAW,EACZ,EACA,CACC,SAAU,UACV,WAAY,SACZ,UAAW,EACZ,EACA,CACC,SAAU,UACV,WAAY,SACZ,UAAW,EACZ,CACD,CACD,CACD,EAqCMC,EAAOC,EACZ,CAAC,CAAE,WAAAC,EAAa,UAAW,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACnE,IAAMX,EAA6BY,EAAQ,KAAO,CAAE,SAAAH,CAAS,GAAI,CAACA,CAAQ,CAAC,EAE3E,OACCI,EAAChB,EAAa,SAAb,CAAsB,MAAOG,EAC7B,SAAAa,EAAC,OACA,IAAKF,EACL,UAAWG,EAAGX,EAAc,CAAE,WAAAI,EAAY,SAAAE,CAAS,CAAC,EAAGD,CAAS,EAC/D,GAAGE,EACL,EACD,CAEF,CACD,EACAL,EAAK,YAAc,QAYnB,IAAMU,EAAe,CACpB,OAAQF,EAACG,EAAA,EAAY,EACrB,KAAMH,EAACI,EAAA,EAAS,EAEhB,QAASJ,EAACK,EAAA,EAAgB,EAC1B,QAASL,EAACM,EAAA,EAAmB,CAC9B,EAuBMC,EAAOd,EACZ,CAAC,CAAE,UAAAE,EAAW,IAAAa,EAAK,GAAGX,CAAM,EAAGC,IAAQ,CACtC,IAAMW,EAAMvB,EAAgB,EACtBwB,EAAcR,EAAaO,EAAI,QAAQ,EAE7C,OACCT,EAACW,EAAA,CAAQ,IAAKb,EAAK,UAAWG,EAAG,SAAUN,CAAS,EAAG,IAAKa,GAAOE,EAAc,GAAGb,EAAO,CAE7F,CACD,EACAU,EAAK,YAAc,YAqBnB,IAAMK,EAAUnB,EACf,CAAC,CAAE,UAAAE,EAAW,GAAGE,CAAM,EAAGC,IACzBE,EAAC,OACA,IAAKF,EACL,UAAWG,EAAG,6CAA8CN,CAAS,EACpE,GAAGE,EACL,CAEF,EACAe,EAAQ,YAAc,eAuBtB,IAAMC,EAAQpB,EACb,CAAC,CAAE,QAAAqB,EAAU,GAAO,UAAAnB,EAAW,GAAGE,CAAM,EAAGC,IAGnCE,EAFWc,EAAUC,EAAO,KAE3B,CAAU,IAAKjB,EAAK,UAAWG,EAAG,cAAeN,CAAS,EAAI,GAAGE,EAAO,CAElF,EACAgB,EAAM,YAAc,aAyBpB,IAAMG,EAAcvB,EACnB,CAAC,CAAE,QAAAqB,EAAU,GAAO,UAAAnB,EAAW,GAAGE,CAAM,EAAGC,IAGnCE,EAFWc,EAAUC,EAAO,MAE3B,CAAU,IAAKjB,EAAK,UAAWG,EAAG,UAAWN,CAAS,EAAI,GAAGE,EAAO,CAE9E,EACAmB,EAAY,YAAc,mBAE1B,IAAMC,EAAmDrB,GACxD,eAAeA,CAAQ,QAElBsB,EAAoDtB,GACzD,eAAeA,CAAQ,QAElBuB,EAAqDvB,GAC1D,eAAeA,CAAQ,QAGlBwB,EAAoB,CAAC,CAC1B,KAAAC,EAAO,KACP,KAAAC,EAAO,SACP,MAAAC,EAAQ,gBACR,WAAA7B,EAAa,QACb,UAAAC,EACA,MAAA6B,EACA,GAAG3B,CACJ,IAAmC,CAClC,IAAMY,EAAMvB,EAAgB,EAC5B,OACCc,EAACyB,EAAA,CACA,WAAY/B,EACZ,KAAMM,EAAC0B,EAAA,EAAM,EACb,MAAOH,EACP,KAAMF,EACN,qBAAkB,GAClB,UAAWpB,EACV,6BACA,oCACA,6DACA,+DACAN,CACD,EACA,KAAM2B,EACN,MAAOK,EAAe,CACrB,GAAGH,EACH,6BAA8BP,EAAiBR,EAAI,QAAQ,EAC3D,mCAAoCS,EAAkBT,EAAI,QAAQ,EAClE,oCAAqCU,EAAmBV,EAAI,QAAQ,CACrE,CAAC,EACA,GAAGZ,EACL,CAEF,EACAuB,EAAkB,YAAc,yBAqBhC,IAAMQ,EAAQ,CAiBb,KAAApC,EAiBA,QAAAoB,EAiBA,YAAAI,EAkBA,kBAAAI,EAiBA,KAAAb,EAiBA,MAAAM,CACD","names":["CheckCircleIcon","InfoIcon","WarningIcon","WarningDiamondIcon","XIcon","cva","createContext","forwardRef","useContext","useMemo","invariant","jsx","AlertContext","createContext","useAlertContext","context","useContext","invariant","alertVariants","cva","Root","forwardRef","appearance","className","priority","props","ref","useMemo","jsx","cx","defaultIcons","WarningIcon","InfoIcon","CheckCircleIcon","WarningDiamondIcon","Icon","svg","ctx","defaultIcon","SvgOnly","Content","Title","asChild","Slot","Description","dismissTextColor","dismissHoverColor","dismissActiveColor","DismissIconButton","size","type","label","style","IconButton","XIcon","$cssProperties","Alert"]}
+{"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 { cva } from \"class-variance-authority\";\nimport type { ComponentProps, ComponentRef, HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, forwardRef, useContext, useMemo } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { $cssProperties, 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\";\nimport { Slot } from \"../slot/index.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\nconst appearances = [\"banner\", \"default\"] as const;\ntype Appearance = (typeof appearances)[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 font-sans\",\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-info-500/50 bg-info-500/10 text-info-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\t/**\n\t\t\t * Controls the visual style of the Alert.\n\t\t\t * - \"default\" provides standard rounded corners and borders.\n\t\t\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t\t\t *\n\t\t\t * @default \"default\"\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tbanner: \"border-x-0 border-t-0 rounded-none z-50 sticky\",\n\t\t\t\tdefault: \"\",\n\t\t\t} as const satisfies Record<Appearance, string>,\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"info\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"success\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"warning\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\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\t/**\n\t * Controls the visual style of the Alert.\n\t * - \"default\" provides standard rounded corners and borders.\n\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t *\n\t * @default \"default\"\n\t */\n\tappearance?: Appearance;\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#alertroot\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({ appearance = \"default\", className, priority, ...props }, ref) => {\n\t\tconst context: AlertContextValue = useMemo(() => ({ priority }), [priority]);\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({ appearance, 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#alerticon\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 ref={ref} className={cx(\"size-5\", className)} svg={svg ?? defaultIcon} {...props} />\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#alertcontent\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(\"min-w-0 flex-1 has-data-alert-dismiss:pr-6\", className)}\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#alerttitle\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 <Component ref={ref} className={cx(\"font-medium\", className)} {...props} />;\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#alertdescription\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 <Component ref={ref} className={cx(\"text-sm\", className)} {...props} />;\n\t},\n);\nDescription.displayName = \"AlertDescription\";\n\nconst dismissTextColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-700)`;\n\nconst dismissHoverColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-800)`;\n\nconst dismissActiveColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-900)`;\n\ntype AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">> & {\n\t/**\n\t * An optional icon to render inside the dismiss button. Defaults to an X icon.\n\t */\n\ticon?: ReactNode;\n};\n\nconst DismissIconButton = ({\n\tsize = \"sm\",\n\ttype = \"button\",\n\tlabel = \"Dismiss Alert\",\n\tappearance = \"ghost\",\n\tclassName,\n\ticon = <XIcon />,\n\tstyle,\n\t...props\n}: AlertDismissIconButtonProps) => {\n\tconst ctx = useAlertContext();\n\treturn (\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={icon}\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\"text-(--alert-dismiss-icon-color)\",\n\t\t\t\t\"not-disabled:hover:text-(--alert-dismiss-icon-hover-color)\",\n\t\t\t\t\"not-disabled:active:text-(--alert-dismiss-icon-active-color)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\ttype={type}\n\t\t\tstyle={$cssProperties({\n\t\t\t\t...style,\n\t\t\t\t\"--alert-dismiss-icon-color\": dismissTextColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-icon-hover-color\": dismissHoverColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-icon-active-color\": dismissActiveColor(ctx.priority),\n\t\t\t})}\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#alertroot\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#alertcontent\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#alertdescription\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#alertdismissiconbutton\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#alerticon\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#alerttitle\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":"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","names":["CheckCircleIcon","InfoIcon","WarningIcon","WarningDiamondIcon","XIcon","cva","createContext","forwardRef","useContext","useMemo","invariant","jsx","AlertContext","createContext","useAlertContext","context","useContext","invariant","alertVariants","cva","Root","forwardRef","appearance","className","priority","props","ref","useMemo","jsx","cx","defaultIcons","WarningIcon","InfoIcon","CheckCircleIcon","WarningDiamondIcon","Icon","svg","ctx","defaultIcon","SvgOnly","Content","Title","asChild","Slot","Description","dismissTextColor","dismissHoverColor","dismissActiveColor","DismissIconButton","size","type","label","icon","XIcon","style","IconButton","$cssProperties","Alert"]}

package/dist/anchor.js

@@ -1,2 +1,2 @@
-import{a as n}from"./chunk-IVQ626TU.js";import{a as c}from"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import{a as m}from"./chunk-PFXFESEN.js";import{Children as C,cloneElement as v,forwardRef as N,isValidElement as b}from"react";import x from"tiny-invariant";import{Fragment as P,jsx as o,jsxs as d}from"react/jsx-runtime";var f=r=>m("cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent",r),u=N(({asChild:r,children:t,className:a,rel:l,icon:e,iconPlacement:s="start",...g},R)=>{let y=h(l),p={className:f(a),ref:R,rel:y,...g};if(r){let i=C.only(t);x(b(i),"When using `asChild`, Anchor must be passed a single child as a JSX tag.");let A=i.props?.children;return o(c,{...p,children:v(i,{},d(P,{children:[e&&s==="start"&&o(n,{className:"inline-block mr-1.5",svg:e}),A,e&&s==="end"&&o(n,{className:"inline-block ml-1.5",svg:e})]}))})}return d("a",{...p,children:[e&&s==="start"&&o(n,{className:"inline-block mr-1.5",svg:e}),t,e&&s==="end"&&o(n,{className:"inline-block ml-1.5",svg:e})]})});u.displayName="Anchor";function h(r){return Array.isArray(r)?[...new Set(r)].map(l=>l?.trim()).filter(Boolean).sort().join(" ")||void 0:r?.trim()||void 0}export{u as Anchor,f as anchorClassNames,h as resolveRel};
+import{a as n}from"./chunk-IVQ626TU.js";import{a as c}from"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import{a as m}from"./chunk-PFXFESEN.js";import{Children as C,cloneElement as v,forwardRef as N,isValidElement as b}from"react";import x from"tiny-invariant";import{Fragment as P,jsx as o,jsxs as d}from"react/jsx-runtime";var f=r=>m("cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent",r),u=N(({asChild:r,children:s,className:a,rel:l,icon:e,iconPlacement:t="start",...g},R)=>{let y=h(l),p={className:f(a),ref:R,rel:y,...g};if(r){let i=C.only(s);x(b(i),"When using `asChild`, Anchor must be passed a single child as a JSX tag.");let A=i.props?.children;return o(c,{...p,children:v(i,{},d(P,{children:[e&&t==="start"&&o(n,{className:"inline-block mr-1.5",svg:e}),A,e&&t==="end"&&o(n,{className:"inline-block ml-1.5",svg:e})]}))})}return d("a",{...p,children:[e&&t==="start"&&o(n,{className:"inline-block mr-1.5",svg:e}),s,e&&t==="end"&&o(n,{className:"inline-block ml-1.5",svg:e})]})});u.displayName="Anchor";function h(r){return Array.isArray(r)?[...new Set(r)].map(l=>l?.trim()).filter(Boolean).toSorted().join(" ")||void 0:r?.trim()||void 0}export{u as Anchor,f as anchorClassNames,h as resolveRel};
 //# sourceMappingURL=anchor.js.map

package/dist/anchor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/anchor/anchor.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Slot } from \"../slot/index.js\";\nimport type { Rel } from \"./types.js\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className?: string) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<ComponentProps<\"a\">, \"rel\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * An icon to render inside the anchor\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];\n\t};\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router` `<Link>`](https://reactrouter.com/en/main/components/link)\n *\n * @see https://mantle.ngrok.com/components/anchor\n *\n * @example\n * ```tsx\n * <Anchor href=\"https://ngrok.com/\">ngrok.com</Anchor>\n *\n * <Anchor href=\"https://ngrok.com/docs\" target=\"_blank\" icon={<Book />}>\n *   ngrok docs\n * </Anchor>\n * ```\n */\nconst Anchor = forwardRef<ComponentRef<\"a\">, AnchorProps>(\n\t(\n\t\t{ asChild, children, className, rel: propRel, icon, iconPlacement = \"start\", ...props },\n\t\tref,\n\t) => {\n\t\tconst rel = resolveRel(propRel);\n\t\tconst componentProps = {\n\t\t\tclassName: anchorClassNames(className),\n\t\t\tref,\n\t\t\trel,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<AnchorProps>(singleChild),\n\t\t\t\t\"When using `asChild`, Anchor must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\treturn (\n\t\t\t\t<Slot {...componentProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tsingleChild,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && iconPlacement === \"start\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block mr-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t\t{icon && iconPlacement === \"end\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block ml-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<a {...componentProps}>\n\t\t\t\t{icon && iconPlacement === \"start\" && <Icon className=\"inline-block mr-1.5\" svg={icon} />}\n\t\t\t\t{children}\n\t\t\t\t{icon && iconPlacement === \"end\" && <Icon className=\"inline-block ml-1.5\" svg={icon} />}\n\t\t\t</a>\n\t\t);\n\t},\n);\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(\n\trel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[],\n) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.sort()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\treturn rel?.trim() || undefined;\n}\n\nexport {\n\t//,\n\tAnchor,\n\tanchorClassNames,\n\tresolveRel,\n};\n\nexport type {\n\t//,\n\tAnchorProps,\n};\n"],"mappings":"oJACA,OAAS,YAAAA,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QACnE,OAAOC,MAAe,iBAmFhB,mBAAAC,EAEE,OAAAC,EAFF,QAAAC,MAAA,oBAzEN,IAAMC,EAAoBC,GACzBC,EACC,kJACAD,CACD,EA2CKE,EAASC,EACd,CACC,CAAE,QAAAC,EAAS,SAAAC,EAAU,UAAAL,EAAW,IAAKM,EAAS,KAAAC,EAAM,cAAAC,EAAgB,QAAS,GAAGC,CAAM,EACtFC,IACI,CACJ,IAAMC,EAAMC,EAAWN,CAAO,EACxBO,EAAiB,CACtB,UAAWd,EAAiBC,CAAS,EACrC,IAAAU,EACA,IAAAC,EACA,GAAGF,CACJ,EAEA,GAAIL,EAAS,CACZ,IAAMU,EAAcC,EAAS,KAAKV,CAAQ,EAC1CW,EACCC,EAA4BH,CAAW,EACvC,0EACD,EACA,IAAMI,EAAgBJ,EAAY,OAAO,SAEzC,OACCjB,EAACsB,EAAA,CAAM,GAAGN,EACR,SAAAO,EACAN,EACA,CAAC,EACDhB,EAAAF,EAAA,CACE,UAAAW,GAAQC,IAAkB,SAC1BX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,EAEjDW,EACAX,GAAQC,IAAkB,OAC1BX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,GAEnD,CACD,EACD,CAEF,CAEA,OACCT,EAAC,KAAG,GAAGe,EACL,UAAAN,GAAQC,IAAkB,SAAWX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,EACtFF,EACAE,GAAQC,IAAkB,OAASX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,GACtF,CAEF,CACD,EACAL,EAAO,YAAc,SAOrB,SAASU,EACRD,EACC,CACD,OAAI,MAAM,QAAQA,CAAG,EAEL,CAAC,GADE,IAAI,IAAIA,CAAG,CACD,EAC1B,IAAKW,GAASA,GAAM,KAAK,CAAC,EAC1B,OAAO,OAAO,EACd,KAAK,EACL,KAAK,GAAG,GACO,OAGXX,GAAK,KAAK,GAAK,MACvB","names":["Children","cloneElement","forwardRef","isValidElement","invariant","Fragment","jsx","jsxs","anchorClassNames","className","cx","Anchor","forwardRef","asChild","children","propRel","icon","iconPlacement","props","ref","rel","resolveRel","componentProps","singleChild","Children","invariant","isValidElement","grandchildren","Slot","cloneElement","Icon","item"]}
+{"version":3,"sources":["../src/components/anchor/anchor.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Slot } from \"../slot/index.js\";\nimport type { Rel } from \"./types.js\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className?: string) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<ComponentProps<\"a\">, \"rel\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * An icon to render inside the anchor\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];\n\t};\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router` `<Link>`](https://reactrouter.com/en/main/components/link)\n *\n * @see https://mantle.ngrok.com/components/anchor\n *\n * @example\n * ```tsx\n * <Anchor href=\"https://ngrok.com/\">ngrok.com</Anchor>\n *\n * <Anchor href=\"https://ngrok.com/docs\" target=\"_blank\" icon={<Book />}>\n *   ngrok docs\n * </Anchor>\n * ```\n */\nconst Anchor = forwardRef<ComponentRef<\"a\">, AnchorProps>(\n\t(\n\t\t{ asChild, children, className, rel: propRel, icon, iconPlacement = \"start\", ...props },\n\t\tref,\n\t) => {\n\t\tconst rel = resolveRel(propRel);\n\t\tconst componentProps = {\n\t\t\tclassName: anchorClassNames(className),\n\t\t\tref,\n\t\t\trel,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<AnchorProps>(singleChild),\n\t\t\t\t\"When using `asChild`, Anchor must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\treturn (\n\t\t\t\t<Slot {...componentProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tsingleChild,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && iconPlacement === \"start\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block mr-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t\t{icon && iconPlacement === \"end\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block ml-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<a {...componentProps}>\n\t\t\t\t{icon && iconPlacement === \"start\" && <Icon className=\"inline-block mr-1.5\" svg={icon} />}\n\t\t\t\t{children}\n\t\t\t\t{icon && iconPlacement === \"end\" && <Icon className=\"inline-block ml-1.5\" svg={icon} />}\n\t\t\t</a>\n\t\t);\n\t},\n);\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(\n\trel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[],\n) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.toSorted()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\treturn rel?.trim() || undefined;\n}\n\nexport {\n\t//,\n\tAnchor,\n\tanchorClassNames,\n\tresolveRel,\n};\n\nexport type {\n\t//,\n\tAnchorProps,\n};\n"],"mappings":"oJACA,OAAS,YAAAA,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QACnE,OAAOC,MAAe,iBAmFhB,mBAAAC,EAEE,OAAAC,EAFF,QAAAC,MAAA,oBAzEN,IAAMC,EAAoBC,GACzBC,EACC,kJACAD,CACD,EA2CKE,EAASC,EACd,CACC,CAAE,QAAAC,EAAS,SAAAC,EAAU,UAAAL,EAAW,IAAKM,EAAS,KAAAC,EAAM,cAAAC,EAAgB,QAAS,GAAGC,CAAM,EACtFC,IACI,CACJ,IAAMC,EAAMC,EAAWN,CAAO,EACxBO,EAAiB,CACtB,UAAWd,EAAiBC,CAAS,EACrC,IAAAU,EACA,IAAAC,EACA,GAAGF,CACJ,EAEA,GAAIL,EAAS,CACZ,IAAMU,EAAcC,EAAS,KAAKV,CAAQ,EAC1CW,EACCC,EAA4BH,CAAW,EACvC,0EACD,EACA,IAAMI,EAAgBJ,EAAY,OAAO,SAEzC,OACCjB,EAACsB,EAAA,CAAM,GAAGN,EACR,SAAAO,EACAN,EACA,CAAC,EACDhB,EAAAF,EAAA,CACE,UAAAW,GAAQC,IAAkB,SAC1BX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,EAEjDW,EACAX,GAAQC,IAAkB,OAC1BX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,GAEnD,CACD,EACD,CAEF,CAEA,OACCT,EAAC,KAAG,GAAGe,EACL,UAAAN,GAAQC,IAAkB,SAAWX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,EACtFF,EACAE,GAAQC,IAAkB,OAASX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,GACtF,CAEF,CACD,EACAL,EAAO,YAAc,SAOrB,SAASU,EACRD,EACC,CACD,OAAI,MAAM,QAAQA,CAAG,EAEL,CAAC,GADE,IAAI,IAAIA,CAAG,CACD,EAC1B,IAAKW,GAASA,GAAM,KAAK,CAAC,EAC1B,OAAO,OAAO,EACd,SAAS,EACT,KAAK,GAAG,GACO,OAGXX,GAAK,KAAK,GAAK,MACvB","names":["Children","cloneElement","forwardRef","isValidElement","invariant","Fragment","jsx","jsxs","anchorClassNames","className","cx","Anchor","forwardRef","asChild","children","propRel","icon","iconPlacement","props","ref","rel","resolveRel","componentProps","singleChild","Children","invariant","isValidElement","grandchildren","Slot","cloneElement","Icon","item"]}

package/dist/checkbox.js

@@ -1,2 +1,2 @@
-import"./chunk-Q5QAMVGX.js";import{a as s}from"./chunk-HKSO72E5.js";import k from"clsx";import{forwardRef as C,useEffect as u,useRef as w,useState as y}from"react";import{jsx as R}from"react/jsx-runtime";var a=i=>i==="indeterminate",l=C(({"aria-invalid":i,className:f,checked:e,defaultChecked:b,defaultValue:p="on",onClick:m,readOnly:o,validation:r,...g},h)=>{let n=w(null),[t]=y(b),d=i!=null&&i!=="false"?"error":typeof r=="function"?r():r,v=i??d==="error";return u(()=>{n.current&&(n.current.indeterminate=a(e))},[e]),u(()=>{n.current&&(n.current.indeterminate=a(t))},[t]),R("input",{"aria-checked":a(e)?"mixed":e,"aria-invalid":v,className:k("border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50","bg-center bg-no-repeat focus:outline-hidden","focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4","checked:border-accent-500 checked:bg-accent-500 checked:bg-checked-icon","indeterminate:border-accent-500 indeterminate:bg-accent-500 indeterminate:bg-indeterminate-icon","data-validation-success:border-success-600 data-validation-success:checked:bg-success-500 data-validation-success:indeterminate:bg-success-500 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-500 data-validation-warning:indeterminate:bg-warning-500 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-500 data-validation-error:indeterminate:bg-danger-500 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger","where:block where:size-4 where:p-0",f),checked:a(e)?void 0:e,"data-validation":d||void 0,defaultChecked:a(t)?void 0:t,defaultValue:p,onClick:c=>{if(o){c.preventDefault();return}m?.(c)},readOnly:o,ref:s(n,h),type:"checkbox",...g})});l.displayName="Checkbox";export{l as Checkbox};
+import{a as o}from"./chunk-HKSO72E5.js";import k from"clsx";import{forwardRef as C,useEffect as u,useRef as w,useState as R}from"react";import{jsx as x}from"react/jsx-runtime";var t=i=>i==="indeterminate",f=C(({"aria-invalid":i,className:l,checked:e,defaultChecked:b,defaultValue:p="on",onClick:m,readOnly:d,validation:r,...g},h)=>{let n=w(null),[a]=R(b),c=i!=null&&i!=="false"?"error":typeof r=="function"?r():r,v=i??c==="error";return u(()=>{n.current&&(n.current.indeterminate=t(e))},[e]),u(()=>{n.current&&(n.current.indeterminate=t(a))},[a]),x("input",{"aria-checked":t(e)?"mixed":e,"aria-invalid":v,className:k("border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50","bg-center bg-no-repeat focus:outline-hidden","focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4","checked:border-accent-500 checked:bg-accent-500 checked:bg-checked-icon","indeterminate:border-accent-500 indeterminate:bg-accent-500 indeterminate:bg-indeterminate-icon","data-validation-success:border-success-600 data-validation-success:checked:bg-success-500 data-validation-success:indeterminate:bg-success-500 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-500 data-validation-warning:indeterminate:bg-warning-500 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-500 data-validation-error:indeterminate:bg-danger-500 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger","where:block where:size-4 where:p-0",l),checked:t(e)?void 0:e,"data-validation":c||void 0,defaultChecked:t(a)?void 0:a,defaultValue:p,onClick:s=>{if(d){s.preventDefault();return}m?.(s)},readOnly:d,ref:o(n,h),type:"checkbox",...g})});f.displayName="Checkbox";export{f as Checkbox};
 //# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport clsx from \"clsx\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/index.js\";\nimport type { WithValidation } from \"../input/index.js\";\n\ntype CheckedState = boolean | \"indeterminate\";\n\nconst isIndeterminate = (checked: CheckedState | undefined): checked is \"indeterminate\" =>\n\tchecked === \"indeterminate\";\n\ntype Props = Omit<ComponentPropsWithoutRef<\"input\">, \"type\" | \"checked\" | \"defaultChecked\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The controlled checked state of the checkbox. Must be used in conjunction with onChange.\n\t\t */\n\t\tchecked?: CheckedState;\n\t\t/**\n\t\t * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n\t\t */\n\t\tdefaultChecked?: CheckedState;\n\t};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n * Supports indeterminate state.\n *\n * @see https://mantle.ngrok.com/components/checkbox\n *\n * @example\n * ```tsx\n * <form>\n *   <Label htmlFor=\"terms\" className=\"flex items-center gap-2\">\n *     <Checkbox name=\"terms\" id=\"terms\" />\n *     Accept terms and conditions\n *   </Label>\n * </form>\n * ```\n */\nconst Checkbox = forwardRef<ComponentRef<\"input\">, Props>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tchecked: _checked,\n\t\t\tdefaultChecked: _defaultChecked,\n\t\t\tdefaultValue = \"on\",\n\t\t\tonClick,\n\t\t\treadOnly,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\t\tconst [defaultChecked] = useState(_defaultChecked);\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(_checked);\n\t\t\t}\n\t\t}, [_checked]);\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(defaultChecked);\n\t\t\t}\n\t\t}, [defaultChecked]);\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-checked={isIndeterminate(_checked) ? \"mixed\" : _checked}\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"bg-center bg-no-repeat focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"checked:border-accent-500 checked:bg-accent-500 checked:bg-checked-icon\",\n\t\t\t\t\t\"indeterminate:border-accent-500 indeterminate:bg-accent-500 indeterminate:bg-indeterminate-icon\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:checked:bg-success-500 data-validation-success:indeterminate:bg-success-500 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-500 data-validation-warning:indeterminate:bg-warning-500 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-500 data-validation-error:indeterminate:bg-danger-500 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"where:block where:size-4 where:p-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tchecked={isIndeterminate(_checked) ? undefined : _checked}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tdefaultChecked={isIndeterminate(defaultChecked) ? undefined : defaultChecked}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport {\n\t//,\n\tCheckbox,\n};\n"],"mappings":"oEAEA,OAAOA,MAAU,OACjB,OAAS,cAAAC,EAAY,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QA4ErD,cAAAC,MAAA,oBArEH,IAAMC,EAAmBC,GACxBA,IAAY,gBA8BPC,EAAWC,EAChB,CACC,CACC,eAAgBC,EAChB,UAAAC,EACA,QAASC,EACT,eAAgBC,EAChB,aAAAC,EAAe,KACf,QAAAC,EACA,SAAAC,EACA,WAAYC,EACZ,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAA8B,IAAI,EAC7C,CAACC,CAAc,EAAIC,EAASV,CAAe,EAE3CW,EADYd,GAAgB,MAAQA,IAAiB,QAExD,QACA,OAAOO,GAAgB,WACtBA,EAAY,EACZA,EACEQ,EAAcf,GAAgBc,IAAe,QAEnD,OAAAE,EAAU,IAAM,CACXN,EAAS,UACZA,EAAS,QAAQ,cAAgBd,EAAgBM,CAAQ,EAE3D,EAAG,CAACA,CAAQ,CAAC,EAEbc,EAAU,IAAM,CACXN,EAAS,UACZA,EAAS,QAAQ,cAAgBd,EAAgBgB,CAAc,EAEjE,EAAG,CAACA,CAAc,CAAC,EAGlBjB,EAAC,SACA,eAAcC,EAAgBM,CAAQ,EAAI,QAAUA,EACpD,eAAca,EACd,UAAWE,EACV,qIACA,8CACA,oHACA,0EACA,kGACA,mQACA,mQACA,oPACA,qCACAhB,CACD,EACA,QAASL,EAAgBM,CAAQ,EAAI,OAAYA,EACjD,kBAAiBY,GAAc,OAC/B,eAAgBlB,EAAgBgB,CAAc,EAAI,OAAYA,EAC9D,aAAcR,EACd,QAAUc,GAAU,CACnB,GAAIZ,EAAU,CACbY,EAAM,eAAe,EACrB,MACD,CACAb,IAAUa,CAAK,CAChB,EACA,SAAUZ,EACV,IAAKa,EAAYT,EAAUD,CAAG,EAC9B,KAAK,WACJ,GAAGD,EACL,CAEF,CACD,EACAV,EAAS,YAAc","names":["clsx","forwardRef","useEffect","useRef","useState","jsx","isIndeterminate","checked","Checkbox","forwardRef","_ariaInvalid","className","_checked","_defaultChecked","defaultValue","onClick","readOnly","_validation","props","ref","innerRef","useRef","defaultChecked","useState","validation","ariaInvalid","useEffect","clsx","event","composeRefs"]}
+{"version":3,"sources":["../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport clsx from \"clsx\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/index.js\";\nimport type { WithValidation } from \"../input/index.js\";\n\ntype CheckedState = boolean | \"indeterminate\";\n\nconst isIndeterminate = (checked: CheckedState | undefined): checked is \"indeterminate\" =>\n\tchecked === \"indeterminate\";\n\ntype Props = Omit<ComponentPropsWithoutRef<\"input\">, \"type\" | \"checked\" | \"defaultChecked\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The controlled checked state of the checkbox. Must be used in conjunction with onChange.\n\t\t */\n\t\tchecked?: CheckedState;\n\t\t/**\n\t\t * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n\t\t */\n\t\tdefaultChecked?: CheckedState;\n\t};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n * Supports indeterminate state.\n *\n * @see https://mantle.ngrok.com/components/checkbox\n *\n * @example\n * ```tsx\n * <form>\n *   <Label htmlFor=\"terms\" className=\"flex items-center gap-2\">\n *     <Checkbox name=\"terms\" id=\"terms\" />\n *     Accept terms and conditions\n *   </Label>\n * </form>\n * ```\n */\nconst Checkbox = forwardRef<ComponentRef<\"input\">, Props>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tchecked: _checked,\n\t\t\tdefaultChecked: _defaultChecked,\n\t\t\tdefaultValue = \"on\",\n\t\t\tonClick,\n\t\t\treadOnly,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\t\tconst [defaultChecked] = useState(_defaultChecked);\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(_checked);\n\t\t\t}\n\t\t}, [_checked]);\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(defaultChecked);\n\t\t\t}\n\t\t}, [defaultChecked]);\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-checked={isIndeterminate(_checked) ? \"mixed\" : _checked}\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"bg-center bg-no-repeat focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"checked:border-accent-500 checked:bg-accent-500 checked:bg-checked-icon\",\n\t\t\t\t\t\"indeterminate:border-accent-500 indeterminate:bg-accent-500 indeterminate:bg-indeterminate-icon\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:checked:bg-success-500 data-validation-success:indeterminate:bg-success-500 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-500 data-validation-warning:indeterminate:bg-warning-500 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-500 data-validation-error:indeterminate:bg-danger-500 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"where:block where:size-4 where:p-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tchecked={isIndeterminate(_checked) ? undefined : _checked}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tdefaultChecked={isIndeterminate(defaultChecked) ? undefined : defaultChecked}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport {\n\t//,\n\tCheckbox,\n};\n"],"mappings":"wCAEA,OAAOA,MAAU,OACjB,OAAS,cAAAC,EAAY,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QA4ErD,cAAAC,MAAA,oBArEH,IAAMC,EAAmBC,GACxBA,IAAY,gBA8BPC,EAAWC,EAChB,CACC,CACC,eAAgBC,EAChB,UAAAC,EACA,QAASC,EACT,eAAgBC,EAChB,aAAAC,EAAe,KACf,QAAAC,EACA,SAAAC,EACA,WAAYC,EACZ,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAA8B,IAAI,EAC7C,CAACC,CAAc,EAAIC,EAASV,CAAe,EAE3CW,EADYd,GAAgB,MAAQA,IAAiB,QAExD,QACA,OAAOO,GAAgB,WACtBA,EAAY,EACZA,EACEQ,EAAcf,GAAgBc,IAAe,QAEnD,OAAAE,EAAU,IAAM,CACXN,EAAS,UACZA,EAAS,QAAQ,cAAgBd,EAAgBM,CAAQ,EAE3D,EAAG,CAACA,CAAQ,CAAC,EAEbc,EAAU,IAAM,CACXN,EAAS,UACZA,EAAS,QAAQ,cAAgBd,EAAgBgB,CAAc,EAEjE,EAAG,CAACA,CAAc,CAAC,EAGlBjB,EAAC,SACA,eAAcC,EAAgBM,CAAQ,EAAI,QAAUA,EACpD,eAAca,EACd,UAAWE,EACV,qIACA,8CACA,oHACA,0EACA,kGACA,mQACA,mQACA,oPACA,qCACAhB,CACD,EACA,QAASL,EAAgBM,CAAQ,EAAI,OAAYA,EACjD,kBAAiBY,GAAc,OAC/B,eAAgBlB,EAAgBgB,CAAc,EAAI,OAAYA,EAC9D,aAAcR,EACd,QAAUc,GAAU,CACnB,GAAIZ,EAAU,CACbY,EAAM,eAAe,EACrB,MACD,CACAb,IAAUa,CAAK,CAChB,EACA,SAAUZ,EACV,IAAKa,EAAYT,EAAUD,CAAG,EAC9B,KAAK,WACJ,GAAGD,EACL,CAEF,CACD,EACAV,EAAS,YAAc","names":["clsx","forwardRef","useEffect","useRef","useState","jsx","isIndeterminate","checked","Checkbox","forwardRef","_ariaInvalid","className","_checked","_defaultChecked","defaultValue","onClick","readOnly","_validation","props","ref","innerRef","useRef","defaultChecked","useState","validation","ariaInvalid","useEffect","clsx","event","composeRefs"]}

package/dist/chunk-7YLII2US.js

@@ -0,0 +1,2 @@
+import{b as c}from"./chunk-MLXONRJD.js";import{a as s}from"./chunk-IVQ626TU.js";import{a}from"./chunk-PFXFESEN.js";import{CaretRightIcon as k}from"@phosphor-icons/react/CaretRight";import{CheckIcon as f}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-dropdown-menu";import{forwardRef as d}from"react";import{jsx as n,jsxs as u}from"react/jsx-runtime";var g=e.Root;g.displayName="DropdownMenu";var w=e.Trigger;w.displayName="DropdownMenuTrigger";var h=d(({className:o,...t},i)=>n(e.Group,{ref:i,className:a("space-y-px",o),...t}));h.displayName="DropdownMenuGroup";var m=e.Portal;m.displayName="DropdownMenuPortal";var v=e.Sub;v.displayName="DropdownMenuSub";var b=d(({className:o,...t},i)=>n(e.RadioGroup,{ref:i,className:a("space-y-px",o),...t}));b.displayName="DropdownMenuRadioGroup";var P=d(({className:o,inset:t,children:i,...r},p)=>u(e.SubTrigger,{className:a("focus:bg-accent data-state-open:bg-accent relative flex select-none items-center rounded-md py-1.5 pl-2 pr-9 text-sm outline-hidden","data-highlighted:bg-active-menu-item data-state-open:bg-active-menu-item","[&>svg]:size-5 [&_svg]:shrink-0",t&&"pl-8",o),ref:p,...r,children:[i,n("span",{className:"absolute right-2 flex items-center",children:n(s,{svg:n(k,{weight:"bold"}),className:"size-4"})})]}));P.displayName="DropdownMenuSubTrigger";var D=d(({className:o,loop:t=!0,...i},r)=>n(m,{children:n(e.SubContent,{className:a("scrollbar","text-popover-foreground border-popover bg-popover p-1.25 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 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border shadow-xl space-y-px font-sans","my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)-16px)] overflow-auto",o),loop:t,ref:r,...i})}));D.displayName="DropdownMenuSubContent";var M=d(({className:o,onClick:t,loop:i=!0,width:r,...p},S)=>n(m,{children:n(e.Content,{ref:S,className:a("scrollbar","text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-32 overflow-hidden rounded-md border shadow-xl outline-hidden space-y-px font-sans","data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 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","my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)-16px)] overflow-auto",r==="trigger"&&"w-(--radix-dropdown-menu-trigger-width)",o),loop:i,onClick:l=>{l.stopPropagation(),t?.(l)},...p})}));M.displayName="DropdownMenuContent";var y=d(({className:o,inset:t,...i},r)=>n(e.Item,{ref:r,className:a("relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-strong text-sm font-normal outline-hidden transition-colors","data-highlighted:bg-active-menu-item","focus:bg-accent focus:text-accent-foreground","data-disabled:cursor-default data-disabled:opacity-50","[&>svg]:size-5 [&_svg]:shrink-0",t&&"pl-8",o),...i}));y.displayName="DropdownMenuItem";var x=d(({className:o,children:t,checked:i,...r},p)=>u(e.CheckboxItem,{ref:p,className:a("text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 pl-2 pr-9 text-sm font-normal outline-hidden","data-highlighted:bg-active-menu-item","aria-checked:bg-selected-menu-item","data-highlighted:aria-checked:bg-active-selected-menu-item!","[&>svg]:size-5 [&_svg]:shrink-0",o),checked:i,...r,children:[n("span",{className:"absolute right-2 flex items-center",children:n(e.ItemIndicator,{children:n(s,{svg:n(f,{weight:"bold"}),className:"size-4 text-accent-600"})})}),t]}));x.displayName="DropdownMenuCheckboxItem";var C=d(({className:o,children:t,...i},r)=>u(e.RadioItem,{className:a("group/dropdown-menu-radio-item","text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 px-2 text-sm font-normal outline-none","data-highlighted:bg-active-menu-item","aria-checked:bg-selected-menu-item aria-checked:pr-9","data-highlighted:aria-checked:bg-active-selected-menu-item!","[&>svg]:size-5 [&_svg]:shrink-0",o),ref:r,...i,children:[n("span",{className:"absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex",children:n(e.ItemIndicator,{children:n(s,{svg:n(f,{weight:"bold"}),className:"size-4 text-accent-600"})})}),t]}));C.displayName="DropdownMenuRadioItem";var R=d(({className:o,inset:t,...i},r)=>n(e.Label,{ref:r,className:a("px-2 py-1.5 text-sm font-medium",t&&"pl-8",o),...i}));R.displayName="DropdownMenuLabel";var N=d(({className:o,...t},i)=>n(c,{ref:i,className:a("-mx-1.25 my-1 w-auto",o),...t}));N.displayName="DropdownMenuSeparator";var I=({className:o,...t})=>n("span",{className:a("ml-auto text-xs tracking-widest opacity-60",o),...t});I.displayName="DropdownMenuShortcut";var q={Root:g,CheckboxItem:x,Content:M,Group:h,Item:y,Label:R,RadioGroup:b,RadioItem:C,Separator:N,Shortcut:I,Sub:v,SubContent:D,SubTrigger:P,Trigger:w};export{q as a};
+//# sourceMappingURL=chunk-7YLII2US.js.map

package/dist/chunk-7YLII2US.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Separator } from \"../separator/separator.js\";\n\n/**\n * A menu of options or actions, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuroot\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Root = DropdownMenuPrimitive.Root;\nRoot.displayName = \"DropdownMenu\";\n\n/**\n * The trigger button that opens the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenutrigger\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Trigger = DropdownMenuPrimitive.Trigger;\nTrigger.displayName = \"DropdownMenuTrigger\";\n\nconst Group = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Group>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Group ref={ref} className={cx(\"space-y-px\", className)} {...props} />\n));\nGroup.displayName = \"DropdownMenuGroup\";\n\n/**\n * The portal container for rendering dropdown content outside the normal DOM tree.\n */\nconst Portal = DropdownMenuPrimitive.Portal;\nPortal.displayName = \"DropdownMenuPortal\";\n\nconst Sub = DropdownMenuPrimitive.Sub;\nSub.displayName = \"DropdownMenuSub\";\n\nconst RadioGroup = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.RadioGroup>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup>\n>(({ className, ...props }, ref) => (\n\t<DropdownMenuPrimitive.RadioGroup ref={ref} className={cx(\"space-y-px\", className)} {...props} />\n));\nRadioGroup.displayName = \"DropdownMenuRadioGroup\";\n\n/**\n * A trigger for a dropdown menu sub-menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenusubtrigger\n */\nconst SubTrigger = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, children, ...props }, ref) => (\n\t<DropdownMenuPrimitive.SubTrigger\n\t\tclassName={cx(\n\t\t\t\"focus:bg-accent data-state-open:bg-accent relative flex select-none items-center rounded-md py-1.5 pl-2 pr-9 text-sm outline-hidden\",\n\t\t\t\"data-highlighted:bg-active-menu-item data-state-open:bg-active-menu-item\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t{children}\n\t\t<span className=\"absolute right-2 flex items-center\">\n\t\t\t<Icon svg={<CaretRightIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t</span>\n\t</DropdownMenuPrimitive.SubTrigger>\n));\nSubTrigger.displayName = \"DropdownMenuSubTrigger\";\n\n/**\n * The content container for a dropdown menu sub-menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenusubcontent\n */\nconst SubContent = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubContent>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, loop = true, ...props }, ref) => (\n\t<Portal>\n\t\t<DropdownMenuPrimitive.SubContent\n\t\t\tclassName={cx(\n\t\t\t\t\"scrollbar\",\n\t\t\t\t\"text-popover-foreground border-popover bg-popover p-1.25 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 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border shadow-xl space-y-px font-sans\",\n\t\t\t\t\"my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)-16px)] overflow-auto\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tloop={loop}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nSubContent.displayName = \"DropdownMenuSubContent\";\n\ntype DropdownMenuContentProps = ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {\n\t/**\n\t * Whether the DropdownMenuContent should match the width of the trigger or use the intrinsic content width.\n\t */\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The container for the dropdown menu content.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenucontent\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Content>,\n\tDropdownMenuContentProps\n>(({ className, onClick, loop = true, width, ...props }, ref) => (\n\t<Portal>\n\t\t<DropdownMenuPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"scrollbar\",\n\t\t\t\t\"text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-32 overflow-hidden rounded-md border shadow-xl outline-hidden space-y-px font-sans\",\n\t\t\t\t\"data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\"my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)-16px)] overflow-auto\",\n\t\t\t\twidth === \"trigger\" && \"w-(--radix-dropdown-menu-trigger-width)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tloop={loop}\n\t\t\tonClick={(event) => {\n\t\t\t\t/**\n\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t * of the DropdownMenu\n\t\t\t\t */\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nContent.displayName = \"DropdownMenuContent\";\n\n/**\n * An item in the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuitem\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Item = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Item>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-strong text-sm font-normal outline-hidden transition-colors\",\n\t\t\t\"data-highlighted:bg-active-menu-item\",\n\t\t\t\"focus:bg-accent focus:text-accent-foreground\",\n\t\t\t\"data-disabled:cursor-default data-disabled:opacity-50\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nItem.displayName = \"DropdownMenuItem\";\n\n/**\n * A menu item with a checkbox that can be controlled or uncontrolled.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenucheckboxitem\n */\nconst CheckboxItem = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n\t<DropdownMenuPrimitive.CheckboxItem\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 pl-2 pr-9 text-sm font-normal outline-hidden\",\n\t\t\t\"data-highlighted:bg-active-menu-item\",\n\t\t\t\"aria-checked:bg-selected-menu-item\",\n\t\t\t\"data-highlighted:aria-checked:bg-active-selected-menu-item!\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tclassName,\n\t\t)}\n\t\tchecked={checked}\n\t\t{...props}\n\t>\n\t\t<span className=\"absolute right-2 flex items-center\">\n\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4 text-accent-600\" />\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t</span>\n\t\t{children}\n\t</DropdownMenuPrimitive.CheckboxItem>\n));\nCheckboxItem.displayName = \"DropdownMenuCheckboxItem\";\n\ntype DropdownMenuRadioItemProps = ComponentPropsWithoutRef<\n\ttypeof DropdownMenuPrimitive.RadioItem\n> & {\n\tname?: string;\n\tid?: string;\n};\n\n/**\n * A menu item with a radio button that can be controlled or uncontrolled.\n * Used within a RadioGroup to create a set of mutually exclusive options.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuradioitem\n */\nconst RadioItem = forwardRef<ComponentRef<\"input\">, DropdownMenuRadioItemProps>(\n\t({ className, children, ...props }, ref) => (\n\t\t<DropdownMenuPrimitive.RadioItem\n\t\t\tclassName={cx(\n\t\t\t\t\"group/dropdown-menu-radio-item\",\n\t\t\t\t\"text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 px-2 text-sm font-normal outline-none\",\n\t\t\t\t\"data-highlighted:bg-active-menu-item\",\n\t\t\t\t\"aria-checked:bg-selected-menu-item aria-checked:pr-9\",\n\t\t\t\t\"data-highlighted:aria-checked:bg-active-selected-menu-item!\",\n\t\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex\">\n\t\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4 text-accent-600\" />\n\t\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</DropdownMenuPrimitive.RadioItem>\n\t),\n);\nRadioItem.displayName = \"DropdownMenuRadioItem\";\n\n/**\n * A label for a group of dropdown menu items.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenulabel\n */\nconst Label = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cx(\"px-2 py-1.5 text-sm font-medium\", inset && \"pl-8\", className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = \"DropdownMenuLabel\";\n\n/**\n * A visual separator between dropdown menu items or groups.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuseparator\n */\nconst DropdownSeparator = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator ref={ref} className={cx(\"-mx-1.25 my-1 w-auto\", className)} {...props} />\n));\nDropdownSeparator.displayName = \"DropdownMenuSeparator\";\n\nconst Shortcut = ({ className, ...props }: ComponentProps<\"span\">) => {\n\treturn (\n\t\t<span className={cx(\"ml-auto text-xs tracking-widest opacity-60\", className)} {...props} />\n\t);\n};\nShortcut.displayName = \"DropdownMenuShortcut\";\n\n/**\n * A menu of options or actions, triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst DropdownMenu = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger asChild>\n\t *     <Button>Open Menu</Button>\n\t *   </DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A checkbox item in the dropdown menu that can be toggled on and off.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenucheckboxitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.CheckboxItem checked={true} onCheckedChange={setChecked}>\n\t *       Show notifications\n\t *     </DropdownMenu.CheckboxItem>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tCheckboxItem,\n\t/**\n\t * The container for the dropdown menu content. Appears in a portal with scrolling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenucontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content width=\"trigger\">\n\t *     <DropdownMenu.Item>Edit</DropdownMenu.Item>\n\t *     <DropdownMenu.Item>Delete</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * A group container for organizing related dropdown menu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenugroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Group>\n\t *       <DropdownMenu.Label>Account</DropdownMenu.Label>\n\t *       <DropdownMenu.Item>Profile</DropdownMenu.Item>\n\t *       <DropdownMenu.Item>Settings</DropdownMenu.Item>\n\t *     </DropdownMenu.Group>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * A standard item in the dropdown menu that can be selected or activated.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item onSelect={() => handleEdit()}>\n\t *       Edit\n\t *     </DropdownMenu.Item>\n\t *     <DropdownMenu.Item disabled>\n\t *       Delete\n\t *     </DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * A label for grouping and describing sections within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenulabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Label>My Account</DropdownMenu.Label>\n\t *     <DropdownMenu.Item>Profile</DropdownMenu.Item>\n\t *     <DropdownMenu.Item>Settings</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tLabel,\n\t/**\n\t * A radio group container for exclusive selection within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuradiogroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.RadioGroup value={value} onValueChange={setValue}>\n\t *       <DropdownMenu.RadioItem value=\"option1\">Option 1</DropdownMenu.RadioItem>\n\t *       <DropdownMenu.RadioItem value=\"option2\">Option 2</DropdownMenu.RadioItem>\n\t *     </DropdownMenu.RadioGroup>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRadioGroup,\n\t/**\n\t * A radio item in the dropdown menu where only one item in the group can be selected.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuradioitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.RadioGroup value=\"small\" onValueChange={setSize}>\n\t *       <DropdownMenu.RadioItem value=\"small\">Small</DropdownMenu.RadioItem>\n\t *       <DropdownMenu.RadioItem value=\"medium\">Medium</DropdownMenu.RadioItem>\n\t *       <DropdownMenu.RadioItem value=\"large\">Large</DropdownMenu.RadioItem>\n\t *     </DropdownMenu.RadioGroup>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRadioItem,\n\t/**\n\t * A visual separator for dividing sections within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>Edit</DropdownMenu.Item>\n\t *     <DropdownMenu.Item>Copy</DropdownMenu.Item>\n\t *     <DropdownMenu.Separator />\n\t *     <DropdownMenu.Item>Delete</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSeparator: DropdownSeparator,\n\t/**\n\t * A keyboard shortcut indicator for dropdown menu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenushortcut\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>\n\t *       Save\n\t *       <DropdownMenu.Shortcut>⌘S</DropdownMenu.Shortcut>\n\t *     </DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tShortcut,\n\t/**\n\t * A submenu container for creating nested dropdown menus.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenusub\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Sub>\n\t *       <DropdownMenu.SubTrigger>More options</DropdownMenu.SubTrigger>\n\t *       <DropdownMenu.SubContent>\n\t *         <DropdownMenu.Item>Sub item 1</DropdownMenu.Item>\n\t *         <DropdownMenu.Item>Sub item 2</DropdownMenu.Item>\n\t *       </DropdownMenu.SubContent>\n\t *     </DropdownMenu.Sub>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSub,\n\t/**\n\t * The content container for submenu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenusubcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Sub>\n\t *       <DropdownMenu.SubTrigger>Export</DropdownMenu.SubTrigger>\n\t *       <DropdownMenu.SubContent>\n\t *         <DropdownMenu.Item>Export as PDF</DropdownMenu.Item>\n\t *         <DropdownMenu.Item>Export as CSV</DropdownMenu.Item>\n\t *       </DropdownMenu.SubContent>\n\t *     </DropdownMenu.Sub>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSubContent,\n\t/**\n\t * The trigger item that opens a submenu when hovered or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenusubtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Sub>\n\t *       <DropdownMenu.SubTrigger>Share</DropdownMenu.SubTrigger>\n\t *       <DropdownMenu.SubContent>\n\t *         <DropdownMenu.Item>Email</DropdownMenu.Item>\n\t *         <DropdownMenu.Item>Copy link</DropdownMenu.Item>\n\t *       </DropdownMenu.SubContent>\n\t *     </DropdownMenu.Sub>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSubTrigger,\n\t/**\n\t * The trigger button that opens the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenutrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Menu\n\t *     </Button>\n\t *   </DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tDropdownMenu,\n};\n"],"mappings":"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","names":["CaretRightIcon","CheckIcon","DropdownMenuPrimitive","forwardRef","jsx","jsxs","Root","Trigger","Group","forwardRef","className","props","ref","cx","Portal","Sub","RadioGroup","SubTrigger","inset","children","Icon","CaretRightIcon","SubContent","loop","Content","onClick","width","event","Item","CheckboxItem","checked","CheckIcon","RadioItem","Label","DropdownSeparator","Separator","Shortcut","DropdownMenu"]}

package/dist/chunk-COQIVAQH.js

@@ -0,0 +1,2 @@
+var V={some:0,all:1};function p(a,s,{root:l,margin:g,amount:t="some"}={}){let r=new WeakMap,c=u=>{u.forEach(e=>{let i=r.get(e.target);if(e.isIntersecting!==!!i)if(e.isIntersecting){let o=s(e.target,e);typeof o=="function"?r.set(e.target,o):n.unobserve(e.target)}else typeof i=="function"&&(i(e),r.delete(e.target))})},n=new IntersectionObserver(c,{root:l,rootMargin:g,threshold:typeof t=="number"?t:V[t]});return n.observe(a),()=>{n.unobserve(a),n.disconnect()}}export{p as a};
+//# sourceMappingURL=chunk-COQIVAQH.js.map

package/dist/chunk-COQIVAQH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/in-view.ts"],"sourcesContent":["type MarginValue = `${number}${\"px\" | \"%\"}`;\n\n/**\n * Margin string used to expand or contract the intersection root's bounding box.\n * Follows the same syntax as the CSS `margin` shorthand (1–4 values).\n *\n * @example \"10px\"\n * @example \"10% 20px\"\n * @example \"10px 20px 10px 20px\"\n */\ntype MarginType =\n\t| MarginValue\n\t| `${MarginValue} ${MarginValue}`\n\t| `${MarginValue} ${MarginValue} ${MarginValue}`\n\t| `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`;\n\n/**\n * Options for the `inView` helper.\n */\ntype InViewOptions = {\n\t/**\n\t * The scrollable container element (or `Document`) to use as the intersection root.\n\t * Defaults to the browser viewport.\n\t */\n\troot?: Element | Document;\n\n\t/**\n\t * Expand or contract the detected area from each side of the root's bounding box.\n\t * Uses the same syntax as the CSS `margin` shorthand (e.g. `\"10px\"`, `\"10% 20px\"`).\n\t */\n\tmargin?: MarginType;\n\n\t/**\n\t * How much of the element must be visible before it is considered in view.\n\t * - `\"some\"` (default): Any part of the element is visible.\n\t * - `\"all\"`: The entire element is visible.\n\t * - `number`: An intersection ratio between `0` and `1` (e.g. `0.5` for 50%).\n\t */\n\tamount?: \"some\" | \"all\" | number;\n};\n\n/**\n * Callback invoked when an observed element leaves the viewport.\n * Receives the `IntersectionObserverEntry` for the departing element.\n */\ntype ViewChangeHandler = (entry: IntersectionObserverEntry) => void;\n\nconst thresholds = {\n\tsome: 0,\n\tall: 1,\n};\n\n/**\n * Observe when a DOM element enters or leaves the viewport (or a scrollable\n * container) using the `IntersectionObserver` API.\n *\n * When the element enters the viewport, `onStart` is called. If `onStart`\n * returns a function, that function is called when the element leaves the\n * viewport. If `onStart` returns nothing, the element is unobserved after\n * the first entry.\n *\n * @param element - The DOM element to observe.\n * @param onStart - Called when the element enters the viewport. Optionally\n *   returns a cleanup function called when the element leaves.\n * @param options - Options for the intersection root, margin, and threshold.\n * @returns A cleanup function that disconnects the observer.\n *\n * @example\n * const stop = inView(element, (el) => {\n *   el.classList.add(\"visible\");\n *   return () => el.classList.remove(\"visible\");\n * });\n *\n * // Later, stop observing:\n * stop();\n */\nfunction inView(\n\telement: Element,\n\tonStart: (element: Element, entry: IntersectionObserverEntry) => void | ViewChangeHandler,\n\t{ root, margin: rootMargin, amount = \"some\" }: InViewOptions = {},\n): VoidFunction {\n\tconst activeIntersections = new WeakMap<Element, ViewChangeHandler>();\n\n\tconst onIntersectionChange: IntersectionObserverCallback = (entries) => {\n\t\tentries.forEach((entry) => {\n\t\t\tconst onEnd = activeIntersections.get(entry.target);\n\n\t\t\t/**\n\t\t\t * If there's no change to the intersection, we don't need to\n\t\t\t * do anything here.\n\t\t\t */\n\t\t\tif (entry.isIntersecting === Boolean(onEnd)) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (entry.isIntersecting) {\n\t\t\t\tconst newOnEnd = onStart(entry.target, entry);\n\t\t\t\tif (typeof newOnEnd === \"function\") {\n\t\t\t\t\tactiveIntersections.set(entry.target, newOnEnd);\n\t\t\t\t} else {\n\t\t\t\t\tobserver.unobserve(entry.target);\n\t\t\t\t}\n\t\t\t} else if (typeof onEnd === \"function\") {\n\t\t\t\tonEnd(entry);\n\t\t\t\tactiveIntersections.delete(entry.target);\n\t\t\t}\n\t\t});\n\t};\n\n\tconst observer = new IntersectionObserver(onIntersectionChange, {\n\t\troot,\n\t\trootMargin,\n\t\tthreshold: typeof amount === \"number\" ? amount : thresholds[amount],\n\t});\n\n\tobserver.observe(element);\n\n\treturn () => {\n\t\tobserver.unobserve(element);\n\t\tobserver.disconnect();\n\t};\n}\n\nexport { inView };\nexport type { InViewOptions, MarginType, ViewChangeHandler };\n"],"mappings":"AA+CA,IAAMA,EAAa,CAClB,KAAM,EACN,IAAK,CACN,EA0BA,SAASC,EACRC,EACAC,EACA,CAAE,KAAAC,EAAM,OAAQC,EAAY,OAAAC,EAAS,MAAO,EAAmB,CAAC,EACjD,CACf,IAAMC,EAAsB,IAAI,QAE1BC,EAAsDC,GAAY,CACvEA,EAAQ,QAASC,GAAU,CAC1B,IAAMC,EAAQJ,EAAoB,IAAIG,EAAM,MAAM,EAMlD,GAAIA,EAAM,iBAAmB,EAAQC,EAIrC,GAAID,EAAM,eAAgB,CACzB,IAAME,EAAWT,EAAQO,EAAM,OAAQA,CAAK,EACxC,OAAOE,GAAa,WACvBL,EAAoB,IAAIG,EAAM,OAAQE,CAAQ,EAE9CC,EAAS,UAAUH,EAAM,MAAM,CAEjC,MAAW,OAAOC,GAAU,aAC3BA,EAAMD,CAAK,EACXH,EAAoB,OAAOG,EAAM,MAAM,EAEzC,CAAC,CACF,EAEMG,EAAW,IAAI,qBAAqBL,EAAsB,CAC/D,KAAAJ,EACA,WAAAC,EACA,UAAW,OAAOC,GAAW,SAAWA,EAASN,EAAWM,CAAM,CACnE,CAAC,EAED,OAAAO,EAAS,QAAQX,CAAO,EAEjB,IAAM,CACZW,EAAS,UAAUX,CAAO,EAC1BW,EAAS,WAAW,CACrB,CACD","names":["thresholds","inView","element","onStart","root","rootMargin","amount","activeIntersections","onIntersectionChange","entries","entry","onEnd","newOnEnd","observer"]}

package/dist/chunk-YPAUKPCE.js

@@ -0,0 +1,2 @@
+import{b as h}from"./chunk-MLXONRJD.js";import{a as P}from"./chunk-HKSO72E5.js";import{a as d}from"./chunk-IVQ626TU.js";import{a as r}from"./chunk-PFXFESEN.js";import{CaretDownIcon as y}from"@phosphor-icons/react/CaretDown";import{CaretUpIcon as z}from"@phosphor-icons/react/CaretUp";import{CheckIcon as D}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-select";import{createContext as H,forwardRef as n,useContext as M}from"react";import{jsx as t,jsxs as g}from"react/jsx-runtime";var b=H({}),x=n(({"aria-invalid":o,children:a,id:i,validation:l,onBlur:s,onValueChange:p,onChange:u,...c},m)=>t(e.Root,{...c,onValueChange:f=>{u?.(f),p?.(f)},children:t(b.Provider,{value:{"aria-invalid":o,id:i,validation:l,onBlur:s,ref:m},children:a})}));x.displayName="Select";var C=n(({className:o,...a},i)=>t(e.Group,{ref:i,className:r("space-y-px",o),...a}));C.displayName="SelectGroup";var w=e.Value;w.displayName="SelectValue";var I=n(({"aria-invalid":o,className:a,children:i,id:l,validation:s,...p},u)=>{let c=M(b),m=c["aria-invalid"]??o,f=m!=null&&m!=="false",v=c.validation??s,S=f?"error":typeof v=="function"?v():v,V=m??S==="error",E=c.id??l;return g(e.Trigger,{"aria-invalid":V,className:r("h-9 text-sm","border-form bg-form text-strong font-sans placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left","hover:border-neutral-400","focus:outline-hidden focus:ring-4 aria-expanded:ring-4","focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent","data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger",a),"data-validation":S||void 0,id:E,ref:P(u,c.ref),...p,children:[i,t(e.Icon,{asChild:!0,children:t(d,{svg:t(y,{weight:"bold"}),className:"size-4"})})]})});I.displayName="SelectTrigger";var R=n(({className:o,...a},i)=>t(e.ScrollUpButton,{ref:i,className:r("flex cursor-default items-center justify-center py-1",o),...a,children:t(d,{svg:t(z,{weight:"bold"}),className:"size-4"})}));R.displayName="SelectScrollUpButton";var N=n(({className:o,...a},i)=>t(e.ScrollDownButton,{ref:i,className:r("flex cursor-default items-center justify-center py-1",o),...a,children:t(d,{svg:t(y,{weight:"bold"}),className:"size-4"})}));N.displayName="SelectScrollDownButton";var T=n(({className:o,children:a,position:i="popper",width:l="trigger",...s},p)=>t(e.Portal,{children:g(e.Content,{ref:p,className:r("border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 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 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md","bg-popover font-sans",i==="popper"&&"data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-(--radix-select-content-available-height)",l==="trigger"&&"w-(--radix-select-trigger-width)",o),position:i,...s,children:[t(R,{}),t(e.Viewport,{className:r("p-1 space-y-px",i==="popper"&&"h-(--radix-select-trigger-height) w-full"),children:a}),t(N,{})]})}));T.displayName="SelectContent";var W=n(({className:o,...a},i)=>t(e.Label,{ref:i,className:r("px-2 py-1.5 text-sm font-medium",o),...a}));W.displayName="SelectLabel";var B=n(({className:o,children:a,icon:i,...l},s)=>g(e.Item,{ref:s,className:r("relative flex gap-2 w-full cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-8 text-strong text-sm outline-hidden","focus:bg-active-menu-item","data-disabled:pointer-events-none data-disabled:opacity-50","data-state-checked:bg-selected-menu-item","focus:data-state-checked:bg-active-selected-menu-item",o),...l,children:[i&&t(d,{svg:i}),t(e.ItemText,{children:a}),t(e.ItemIndicator,{className:"absolute right-2 flex h-3.5 w-3.5 items-center justify-center",children:t(d,{svg:t(D,{weight:"bold"}),className:"size-4 text-accent-600"})})]}));B.displayName="SelectItem";var L=n(({className:o,...a},i)=>t(h,{ref:i,className:r("-mx-1 my-1 h-px w-auto",o),...a}));L.displayName="SelectSeparator";var q={Root:x,Content:T,Group:C,Item:B,Label:W,Separator:L,Trigger:I,Value:w};export{q as a};
+//# sourceMappingURL=chunk-YPAUKPCE.js.map

package/dist/chunk-YPAUKPCE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { CaretUpIcon } from \"@phosphor-icons/react/CaretUp\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tFocusEvent,\n\tPropsWithChildren,\n\tReactNode,\n\tRef,\n\tSelectHTMLAttributes,\n} from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport type { WithValidation } from \"../input/types.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, \"aria-invalid\">;\ntype SelectContextType = WithValidation &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Ref for the trigger button.\n\t\t */\n\t\tref?: Ref<HTMLButtonElement>;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t} & Pick<ComponentProps<\"button\">, \"id\">;\n\nconst SelectContext = createContext<SelectContextType>({});\n\ntype SelectProps = PropsWithChildren & {\n\tautoComplete?: string;\n\tdefaultOpen?: boolean;\n\tdefaultValue?: string;\n\tdir?: \"ltr\" | \"rtl\";\n\tdisabled?: boolean;\n\tform?: string;\n\tid?: string;\n\tname?: string;\n\t/**\n\t * Event handler called when Select blurs.\n\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t */\n\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t/**\n\t * Event handler called when the value changes.\n\t * @deprecated Use `onValueChange` instead.\n\t */\n\tonChange?: (value: string) => void;\n\tonOpenChange?(open: boolean): void;\n\tonValueChange?(value: string): void;\n\topen?: boolean;\n\trequired?: boolean;\n\tvalue?: string;\n} & WithValidation &\n\tWithAriaInvalid;\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/select#selectroot\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Root = forwardRef<HTMLButtonElement, SelectProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tchildren,\n\t\t\tid,\n\t\t\tvalidation,\n\t\t\tonBlur,\n\t\t\tonValueChange,\n\t\t\tonChange,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<SelectPrimitive.Root\n\t\t\t\t{...props}\n\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\tonChange?.(value);\n\t\t\t\t\tonValueChange?.(value);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SelectContext.Provider\n\t\t\t\t\tvalue={{ \"aria-invalid\": _ariaInvalid, id, validation, onBlur, ref }}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectContext.Provider>\n\t\t\t</SelectPrimitive.Root>\n\t\t);\n\t},\n);\nRoot.displayName = \"Select\";\n\n/**\n * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n *\n * @example\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#selectgroup\n */\nconst Group = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Group>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Group ref={ref} className={cx(\"space-y-px\", className)} {...props} />\n));\nGroup.displayName = \"SelectGroup\";\n\n/**\n * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n *\n * @example\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Item value=\"apple\">Apple</Select.Item>\n *     <Select.Item value=\"banana\">Banana</Select.Item>\n *     <Select.Item value=\"cherry\">Cherry</Select.Item>\n *   </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#selectvalue\n */\nconst Value = SelectPrimitive.Value;\nValue.displayName = \"SelectValue\";\n\ntype SelectTriggerProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &\n\tWithAriaInvalid &\n\tWithValidation;\n\n/**\n * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n *\n * @see https://mantle.ngrok.com/components/select#selecttrigger\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Item value=\"apple\">Apple</Select.Item>\n *     <Select.Item value=\"banana\">Banana</Select.Item>\n *     <Select.Item value=\"cherry\">Cherry</Select.Item>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Trigger = forwardRef<ComponentRef<typeof SelectPrimitive.Trigger>, SelectTriggerProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": ariaInValidProp,\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tid: propId,\n\t\t\tvalidation: propValidation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(SelectContext);\n\t\tconst _ariaInvalid = ctx[\"aria-invalid\"] ?? ariaInValidProp;\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst _validation = ctx.validation ?? propValidation;\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\t\tconst id = ctx.id ?? propId;\n\n\t\treturn (\n\t\t\t<SelectPrimitive.Trigger\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"h-9 text-sm\",\n\t\t\t\t\t\"border-form bg-form text-strong font-sans placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left\",\n\t\t\t\t\t\"hover:border-neutral-400\",\n\t\t\t\t\t\"focus:outline-hidden focus:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tid={id}\n\t\t\t\tref={composeRefs(ref, ctx.ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<SelectPrimitive.Icon asChild>\n\t\t\t\t\t<Icon svg={<CaretDownIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t\t</SelectPrimitive.Icon>\n\t\t\t</SelectPrimitive.Trigger>\n\t\t);\n\t},\n);\nTrigger.displayName = \"SelectTrigger\";\n\n/**\n * The button that scrolls the select content up.\n * @private\n */\nconst SelectScrollUpButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollUpButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollUpButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<Icon svg={<CaretUpIcon weight=\"bold\" />} className=\"size-4\" />\n\t</SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = \"SelectScrollUpButton\";\n\n/**\n * The button that scrolls the select content down.\n * @private\n */\nconst SelectScrollDownButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollDownButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollDownButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<Icon svg={<CaretDownIcon weight=\"bold\" />} className=\"size-4\" />\n\t</SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = \"SelectScrollDownButton\";\n\ntype SelectContentProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n\t/**\n\t * The width of the content. Defaults to the width of the trigger.\n\t * If set to \"content\", the content will use the intrinsic content width; it will be the width of the longest/widest item.\n\t * @default \"trigger\"\n\t */\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The component that pops out when the select is open as a portal adjacent to the trigger button.\n * It contains a scrolling viewport of the select items.\n *\n * @example\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Item value=\"apple\">Apple</Select.Item>\n *     <Select.Item value=\"banana\">Banana</Select.Item>\n *     <Select.Item value=\"cherry\">Cherry</Select.Item>\n *   </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#selectcontent\n */\nconst Content = forwardRef<ComponentRef<typeof SelectPrimitive.Content>, SelectContentProps>(\n\t({ className, children, position = \"popper\", width = \"trigger\", ...props }, ref) => (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 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 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md\",\n\t\t\t\t\t\"bg-popover font-sans\",\n\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\"data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-(--radix-select-content-available-height)\",\n\t\t\t\t\twidth === \"trigger\" && \"w-(--radix-select-trigger-width)\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tposition={position}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectScrollUpButton />\n\t\t\t\t<SelectPrimitive.Viewport\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"p-1 space-y-px\",\n\t\t\t\t\t\tposition === \"popper\" && \"h-(--radix-select-trigger-height) w-full\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t\t<SelectScrollDownButton />\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t),\n);\nContent.displayName = \"SelectContent\";\n\n/**\n * Used to render the label of a group. It won't be focusable using arrow keys.\n *\n * @example\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#selectlabel\n */\nconst Label = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cx(\"px-2 py-1.5 text-sm font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = \"SelectLabel\";\n\ntype SelectItemProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {\n\ticon?: ReactNode;\n};\n\n/**\n * An option within a select menu. Similar to an html `<option>` element.\n * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.\n * Displays the children as the option's text.\n *\n * @example\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Item value=\"apple\">Apple</Select.Item>\n *     <Select.Item value=\"banana\">Banana</Select.Item>\n *     <Select.Item value=\"cherry\">Cherry</Select.Item>\n *   </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#selectitem\n */\nconst Item = forwardRef<ComponentRef<typeof SelectPrimitive.Item>, SelectItemProps>(\n\t({ className, children, icon, ...props }, ref) => (\n\t\t<SelectPrimitive.Item\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"relative flex gap-2 w-full cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-8 text-strong text-sm outline-hidden\",\n\t\t\t\t\"focus:bg-active-menu-item\",\n\t\t\t\t\"data-disabled:pointer-events-none data-disabled:opacity-50\",\n\t\t\t\t\"data-state-checked:bg-selected-menu-item\",\n\t\t\t\t\"focus:data-state-checked:bg-active-selected-menu-item\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{icon && <Icon svg={icon} />}\n\t\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t\t<SelectPrimitive.ItemIndicator className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4 text-accent-600\" />\n\t\t\t</SelectPrimitive.ItemIndicator>\n\t\t</SelectPrimitive.Item>\n\t),\n);\nItem.displayName = \"SelectItem\";\n\n/**\n * Used to visually separate items or groups of items in the select content.\n *\n * @example\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#selectseparator\n */\nconst SelectSeparatorComponent = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator ref={ref} className={cx(\"-mx-1 my-1 h-px w-auto\", className)} {...props} />\n));\nSelectSeparatorComponent.displayName = \"SelectSeparator\";\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/select\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Select = {\n\t/**\n\t * Displays a list of options for the user to pick from—triggered by a button.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The component that pops out when the select is open as a portal adjacent to the trigger button.\n\t * It contains a scrolling viewport of the select items.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectcontent\n\t *\n\t * @example\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Item value=\"apple\">Apple</Select.Item>\n\t *     <Select.Item value=\"banana\">Banana</Select.Item>\n\t *     <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t */\n\tContent,\n\t/**\n\t * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n\t * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectgroup\n\t *\n\t * @example\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t */\n\tGroup,\n\t/**\n\t * An option within a select menu. Similar to an html `<option>` element.\n\t * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.\n\t * Displays the children as the option's text.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectitem\n\t *\n\t * @example\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Item value=\"apple\">Apple</Select.Item>\n\t *     <Select.Item value=\"banana\">Banana</Select.Item>\n\t *     <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t */\n\tItem,\n\t/**\n\t * Used to render the label of a group. It won't be focusable using arrow keys.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectlabel\n\t *\n\t * @example\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t */\n\tLabel,\n\t/**\n\t * Used to visually separate items or groups of items in the select content.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectseparator\n\t *\n\t * @example\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t */\n\tSeparator: SelectSeparatorComponent,\n\t/**\n\t * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selecttrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Item value=\"apple\">Apple</Select.Item>\n\t *     <Select.Item value=\"banana\">Banana</Select.Item>\n\t *     <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectvalue\n\t *\n\t * @example\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Item value=\"apple\">Apple</Select.Item>\n\t *     <Select.Item value=\"banana\">Banana</Select.Item>\n\t *     <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t */\n\tValue,\n} as const;\n\nexport {\n\t//,\n\tSelect,\n};\n"],"mappings":"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","names":["CaretDownIcon","CaretUpIcon","CheckIcon","SelectPrimitive","createContext","forwardRef","useContext","jsx","jsxs","SelectContext","createContext","Root","forwardRef","_ariaInvalid","children","id","validation","onBlur","onValueChange","onChange","props","ref","value","Group","className","cx","Value","Trigger","ariaInValidProp","propId","propValidation","ctx","useContext","isInvalid","_validation","ariaInvalid","composeRefs","Icon","CaretDownIcon","SelectScrollUpButton","CaretUpIcon","SelectScrollDownButton","Content","position","width","Label","Item","icon","CheckIcon","SelectSeparatorComponent","Separator","Select"]}

package/dist/combobox.js

@@ -1,2 +1,2 @@
-import{b as f}from"./chunk-MLXONRJD.js";import{a as l}from"./chunk-ADF5DAYG.js";import{a as s}from"./chunk-PFXFESEN.js";import*as i from"@ariakit/react";import{createContext as I,forwardRef as b}from"react";import{jsx as t}from"react/jsx-runtime";var c=({children:o,...e})=>t(i.ComboboxProvider,{...e,children:o});c.displayName="Combobox";var x=b(({"aria-invalid":o,autoComplete:e="list",autoSelect:a="always",className:n,validation:r,...m},d)=>{let p=o!=null&&o!=="false"?"error":typeof r=="function"?r():r;return t(i.Combobox,{"aria-invalid":o??p==="error",autoComplete:e,autoSelect:a,className:s("pointer-coarse:text-base h-9 text-sm","bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong","placeholder:text-placeholder","aria-disabled:opacity-50","hover:border-neutral-400","focus:outline-hidden focus:ring-4 aria-expanded:ring-4","focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent","data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger","autofill:shadow-(--color-blue-50) autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]",n),"data-validation":p||void 0,ref:d,...m})});x.displayName="ComboboxInput";var C=b(({asChild:o=!1,children:e,className:a,sameWidth:n=!0,unmountOnHide:r=!0,...m},d)=>t(i.ComboboxPopover,{className:s("border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 focus:outline-hidden",a),ref:d,render:o?({ref:u,...p})=>t(l,{ref:u,...p}):void 0,sameWidth:n,unmountOnHide:r,...m,children:e}));C.displayName="ComboboxContent";var w=I(void 0),v=b(({asChild:o=!1,children:e,className:a,focusOnHover:n=!0,value:r,...m},d)=>t(w.Provider,{value:r,children:t(i.ComboboxItem,{className:s("cursor-pointer rounded px-2 py-1.5 text-sm flex min-w-0 gap-2 items-center","data-active-item:bg-popover-hover","aria-disabled:opacity-50",a),focusOnHover:n,ref:d,render:o?({ref:u,...p})=>t(l,{ref:u,...p}):void 0,value:r,...m,children:e})}));v.displayName="ComboboxItem";var P=b(({asChild:o=!1,children:e,className:a,...n},r)=>t(i.ComboboxGroup,{className:s("",a),ref:r,render:o?({ref:m,...d})=>t(l,{ref:m,...d}):void 0,...n,children:e}));P.displayName="ComboboxGroup";var y=b(({asChild:o=!1,children:e,className:a,...n},r)=>t(i.ComboboxGroupLabel,{className:s("text-muted px-2 py-1 text-xs font-medium",a),ref:r,render:o?({ref:m,...d})=>t(l,{ref:m,...d}):void 0,...n,children:e}));y.displayName="ComboboxGroupLabel";var g=b(({asChild:o=!1,className:e,...a},n)=>t(i.ComboboxItemValue,{className:s("*:data-user-value:font-medium flex-1 shrink-0 text-strong font-normal",e),ref:n,render:o?({ref:r,...m})=>t(l,{ref:r,...m}):void 0,...a}));g.displayName="ComboboxItemValue";var h=b(({className:o,...e},a)=>t(f,{ref:a,className:s("-mx-1.25 my-1 w-auto",o),...e}));h.displayName="ComboboxSeparator";var G={Root:c,Content:C,Group:P,GroupLabel:y,Input:x,Item:v,ItemValue:g,Separator:h};export{G as Combobox};
+import{b as c}from"./chunk-MLXONRJD.js";import{a as l}from"./chunk-ADF5DAYG.js";import{a as d}from"./chunk-PFXFESEN.js";import*as i from"@ariakit/react";import{createContext as I,forwardRef as b}from"react";import{jsx as t}from"react/jsx-runtime";var f=({children:o,...e})=>t(i.ComboboxProvider,{...e,children:o});f.displayName="Combobox";var x=b(({"aria-invalid":o,autoComplete:e="list",autoSelect:a="always",className:n,validation:r,...m},s)=>{let p=o!=null&&o!=="false"?"error":typeof r=="function"?r():r;return t(i.Combobox,{"aria-invalid":o??p==="error",autoComplete:e,autoSelect:a,className:d("pointer-coarse:text-base h-9 text-sm","bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong font-sans","placeholder:text-placeholder","aria-disabled:opacity-50","hover:border-neutral-400","focus:outline-hidden focus:ring-4 aria-expanded:ring-4","focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent","data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger","autofill:shadow-(--color-blue-50) autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]",n),"data-validation":p||void 0,ref:s,...m})});x.displayName="ComboboxInput";var C=b(({asChild:o=!1,children:e,className:a,sameWidth:n=!0,unmountOnHide:r=!0,...m},s)=>t(i.ComboboxPopover,{className:d("border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 space-y-px font-sans focus:outline-hidden",a),ref:s,render:o?({ref:u,...p})=>t(l,{ref:u,...p}):void 0,sameWidth:n,unmountOnHide:r,...m,children:e}));C.displayName="ComboboxContent";var w=I(void 0),v=b(({asChild:o=!1,children:e,className:a,focusOnHover:n=!0,value:r,...m},s)=>t(w.Provider,{value:r,children:t(i.ComboboxItem,{className:d("cursor-pointer rounded-md px-2 py-1.5 text-strong text-sm flex min-w-0 gap-2 items-center","data-active-item:bg-active-menu-item","aria-disabled:opacity-50",a),focusOnHover:n,ref:s,render:o?({ref:u,...p})=>t(l,{ref:u,...p}):void 0,value:r,...m,children:e})}));v.displayName="ComboboxItem";var P=b(({asChild:o=!1,children:e,className:a,...n},r)=>t(i.ComboboxGroup,{className:d("space-y-px",a),ref:r,render:o?({ref:m,...s})=>t(l,{ref:m,...s}):void 0,...n,children:e}));P.displayName="ComboboxGroup";var y=b(({asChild:o=!1,children:e,className:a,...n},r)=>t(i.ComboboxGroupLabel,{className:d("text-muted px-2 py-1 text-xs font-medium",a),ref:r,render:o?({ref:m,...s})=>t(l,{ref:m,...s}):void 0,...n,children:e}));y.displayName="ComboboxGroupLabel";var g=b(({asChild:o=!1,className:e,...a},n)=>t(i.ComboboxItemValue,{className:d("*:data-user-value:font-medium flex-1 shrink-0 text-strong font-normal",e),ref:n,render:o?({ref:r,...m})=>t(l,{ref:r,...m}):void 0,...a}));g.displayName="ComboboxItemValue";var h=b(({className:o,...e},a)=>t(c,{ref:a,className:d("-mx-1.25 my-1 w-auto",o),...e}));h.displayName="ComboboxSeparator";var G={Root:f,Content:C,Group:P,GroupLabel:y,Input:x,Item:v,ItemValue:g,Separator:h};export{G as Combobox};
 //# sourceMappingURL=combobox.js.map