@ngrok/mantle 0.72.0 → 0.73.1

package/dist/validation-DF1z7YDr.d.ts

@@ -0,0 +1,108 @@
+import { AriaAttributes, ReactNode } from "react";
+
+//#region src/components/field/validation.d.ts
+/**
+ * The shared validation state vocabulary for Mantle form controls.
+ *
+ * `false` is useful with short-circuiting logic, e.g.
+ *
+ * ```tsx
+ * validation={errors.length > 0 && "error"}
+ * ```
+ */
+type Validation = "error" | "success" | "warning" | false;
+/**
+ * A resolved visual validation state. Unlike `Validation`, this excludes
+ * `false` because parsed validation normalizes the absence value to
+ * `undefined`.
+ */
+type ValidationState = Exclude<Validation, false>;
+/**
+ * A validation prop value accepted by Mantle controls. The function form is
+ * useful when validation state is expensive or should be read lazily from
+ * nearby state.
+ */
+type ValidationProp = Validation | (() => Validation);
+/**
+ * Props for Mantle controls that accept a validation state.
+ */
+type WithValidation = {
+  /**
+   * Visual validation state for the control. `validation="error"` also maps
+   * to `aria-invalid=true` unless an explicit `aria-invalid` prop is present.
+   */
+  validation?: ValidationProp;
+};
+/**
+ * The React-supported value type for the `aria-invalid` attribute.
+ */
+type AriaInvalid = AriaAttributes["aria-invalid"];
+/**
+ * Options used to resolve a control's visual validation state and matching
+ * `aria-invalid` value.
+ */
+type ParseValidationOptions = {
+  /**
+   * The explicit ARIA invalid state supplied by the consumer or inherited
+   * from a parent control context.
+   */
+  "aria-invalid"?: AriaInvalid;
+  /**
+   * The control's visual validation state.
+   */
+  validation?: ValidationProp;
+  /**
+   * When true, neutral controls resolve `ariaInvalid` to `false` instead of
+   * leaving it unset. This preserves the historical behavior of most Mantle
+   * inputs while still allowing components like `OtpInput` to omit it.
+   */
+  defaultAriaInvalid?: boolean;
+};
+/**
+ * The normalized validation state Mantle controls use for DOM attributes and
+ * validation styling.
+ */
+type ParsedValidation = {
+  /**
+   * `true` when the resolved ARIA invalid state represents any invalid value.
+   */
+  isInvalid: boolean;
+  /**
+   * The resolved value to pass to `aria-invalid`.
+   */
+  ariaInvalid: AriaInvalid | undefined;
+  /**
+   * The resolved visual validation state. `false` is normalized away.
+   */
+  validation: ValidationState | undefined;
+};
+/**
+ * Provides a resolved field validation state to Mantle controls rendered
+ * inside a `Field.Item` or `Field.Control`.
+ */
+/**
+ * Returns `true` when an `aria-invalid` value represents an invalid control.
+ * ARIA treats any value except `false` as an invalid state, including
+ * `"grammar"` and `"spelling"`.
+ */
+declare const isAriaInvalid: (ariaInvalid: AriaInvalid | undefined) => ariaInvalid is true | "true" | "grammar" | "spelling";
+/**
+ * Resolves a `validation` prop to a concrete validation state and normalizes
+ * `false` to `undefined` so it can be used directly with `data-validation`.
+ */
+declare const resolveValidation: (validation: ValidationProp | undefined) => "success" | "warning" | "error" | undefined;
+/**
+ * Resolves the shared Mantle validation contract for form controls.
+ *
+ * Explicit invalid ARIA state wins and forces visual `"error"` styling.
+ * Otherwise, `validation="error"` maps to `aria-invalid=true`, and neutral
+ * controls receive `aria-invalid=false` unless `defaultAriaInvalid` is false.
+ */
+declare const parseValidation: ({
+  "aria-invalid": ariaInvalid,
+  defaultAriaInvalid,
+  validation: validationProp
+}: ParseValidationOptions) => ParsedValidation;
+//#endregion
+export { ValidationState as a, parseValidation as c, ValidationProp as i, resolveValidation as l, ParsedValidation as n, WithValidation as o, Validation as r, isAriaInvalid as s, AriaInvalid as t };
+//# sourceMappingURL=validation-DF1z7YDr.d.ts.map

package/dist/{variant-props-DUmSIQK8.d.ts → variant-props-B4io4uA_.d.ts}

@@ -1,4 +1,4 @@
-import { t as DeepNonNullable } from "./deep-non-nullable-VFm1T3JZ.js";
+import { t as DeepNonNullable } from "./deep-non-nullable-CT7hWCFG.js";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/types/variant-props.d.ts
@@ -10,4 +10,4 @@ import { VariantProps } from "class-variance-authority";
 type VariantProps$1<Variants extends (props: Record<PropertyKey, unknown> | undefined) => string> = Partial<DeepNonNullable<VariantProps<Variants>>>;
 //#endregion
 export { VariantProps$1 as t };
-//# sourceMappingURL=variant-props-DUmSIQK8.d.ts.map
+//# sourceMappingURL=variant-props-B4io4uA_.d.ts.map

package/dist/{with-style-props-3iFrBR08.d.ts → with-style-props-CW8buMhK.d.ts}

@@ -26,4 +26,4 @@ type WithStyleProps = {
 };
 //#endregion
 export { WithStyleProps as t };
-//# sourceMappingURL=with-style-props-3iFrBR08.d.ts.map
+//# sourceMappingURL=with-style-props-CW8buMhK.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrok/mantle",
-  "version": "0.72.0",
+  "version": "0.73.1",
   "description": "mantle is ngrok's UI library and design system.",
   "homepage": "https://mantle.ngrok.com",
   "license": "MIT",
@@ -160,6 +160,11 @@
       "types": "./dist/empty.d.ts",
       "import": "./dist/empty.js"
     },
+    "./field": {
+      "@ngrok/src-live-types": "./src/components/field/index.ts",
+      "types": "./dist/field.d.ts",
+      "import": "./dist/field.js"
+    },
     "./flag": {
       "@ngrok/src-live-types": "./src/components/flag/index.ts",
       "types": "./dist/flag.d.ts",
@@ -354,7 +359,7 @@
     "input-otp": "1.4.2",
     "react-day-picker": "9.14.0",
     "sonner": "2.0.7",
-    "tailwind-merge": "3.5.0",
+    "tailwind-merge": "3.6.0",
     "tiny-invariant": "1.3.3",
     "tw-animate-css": "1.4.0"
   },
@@ -364,18 +369,18 @@
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",
-    "@tsdown/css": "0.21.10",
+    "@tsdown/css": "0.22.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@vitest/browser-playwright": "4.1.5",
+    "@vitest/browser-playwright": "4.1.6",
     "browserslist": "4.28.2",
     "date-fns": "4.1.0",
     "happy-dom": "20.9.0",
-    "playwright": "1.59.1",
-    "react": "19.2.5",
-    "react-dom": "19.2.5",
-    "tailwindcss": "4.2.4",
-    "tsdown": "0.21.10",
+    "playwright": "1.60.0",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
+    "tailwindcss": "4.3.0",
+    "tsdown": "0.22.0",
     "typescript": "6.0.3",
     "@cfg/tsconfig": "1.0.0"
   },
@@ -384,7 +389,7 @@
     "date-fns": "^4.1.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "tailwindcss": "^4.2.4"
+    "tailwindcss": "^4.3.0"
   },
   "browserslist": [
     "last 2 years, not dead, > 0.2%"

package/dist/dialog-BHzl9eye.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dialog-BHzl9eye.js","names":["DialogPrimitive.Root","DialogPrimitive.Trigger","DialogPrimitive.Portal","DialogPrimitive.Close","DialogPrimitive.Overlay","DialogPrimitive.Content","DialogPrimitive.Title","DialogPrimitive.Description"],"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport * as DialogPrimitive from \"./primitive.js\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the Dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogroot\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Root = DialogPrimitive.Root;\nRoot.displayName = \"Dialog\";\n\n/**\n * A button that opens the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogtrigger\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Trigger>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>\n>((props, ref) => <DialogPrimitive.Trigger ref={ref} data-slot=\"dialog-trigger\" {...props} />);\nTrigger.displayName = \"DialogTrigger\";\n\n/**\n * The portal container for the dialog. Renders the overlay and content into a\n * portal so the dialog escapes its parent's stacking context.\n *\n * Most consumers should not need to use this directly — `Dialog.Content`\n * already wraps its children in a portal. Use this only when you need to\n * customize the portal target or render the overlay yourself.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-reference\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Portal>\n *     <Dialog.Overlay />\n *     <Dialog.Content>\n *       <Dialog.Header>\n *         <Dialog.Title>Dialog Title</Dialog.Title>\n *         <Dialog.Description>This is an optional description.</Dialog.Description>\n *         <Dialog.CloseIconButton />\n *       </Dialog.Header>\n *       <Dialog.Body>\n *         <p>This is the dialog content.</p>\n *       </Dialog.Body>\n *       <Dialog.Footer>\n *         <Dialog.Close asChild>\n *           <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *         </Dialog.Close>\n *         <Button type=\"button\" appearance=\"filled\">Save</Button>\n *       </Dialog.Footer>\n *     </Dialog.Content>\n *   </Dialog.Portal>\n * </Dialog.Root>\n * ```\n */\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPortal\";\n\n/**\n * A button that closes the dialog when clicked. Wrap an interactive element\n * with `asChild` to delegate the close behavior to your own button.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogclose\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Close = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Close>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Close>\n>((props, ref) => <DialogPrimitive.Close ref={ref} data-slot=\"dialog-close\" {...props} />);\nClose.displayName = \"DialogClose\";\n\n/**\n * The backdrop overlay for the dialog. Sits between the page and the dialog\n * content and applies a blur and dim effect.\n *\n * Most consumers should not need to use this directly — `Dialog.Content`\n * renders an overlay automatically. Use this only when composing a custom\n * `Dialog.Portal` tree.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-reference\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Portal>\n *     <Dialog.Overlay />\n *     <Dialog.Content>\n *       <Dialog.Header>\n *         <Dialog.Title>Dialog Title</Dialog.Title>\n *         <Dialog.Description>This is an optional description.</Dialog.Description>\n *         <Dialog.CloseIconButton />\n *       </Dialog.Header>\n *       <Dialog.Body>\n *         <p>This is the dialog content.</p>\n *       </Dialog.Body>\n *       <Dialog.Footer>\n *         <Dialog.Close asChild>\n *           <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *         </Dialog.Close>\n *         <Button type=\"button\" appearance=\"filled\">Save</Button>\n *       </Dialog.Footer>\n *     </Dialog.Content>\n *   </Dialog.Portal>\n * </Dialog.Root>\n * ```\n */\nconst Overlay = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tdata-slot=\"dialog-overlay\"\n\t\tclassName={cx(\n\t\t\t\"bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nOverlay.displayName = \"DialogOverlay\";\n\ntype ContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `Dialog.Content` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Dialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `Dialog.Content`\n\t *\n\t * @default `max-w-lg`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The container for the dialog content.\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogcontent\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ContentProps>(\n\t({ children, className, preferredWidth = \"max-w-lg\", ...props }, ref) => (\n\t\t<Portal>\n\t\t\t<Overlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tdata-mantle-modal-content\n\t\t\t\t\tdata-slot=\"dialog-content\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full flex-1 flex-col\",\n\t\t\t\t\t\t\"outline-hidden focus-within:outline-hidden\",\n\t\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\t\t\t\t\t\t\"data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\t\tpreferredWidth,\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</Portal>\n\t),\n);\nContent.displayName = \"DialogContent\";\n\n/**\n * Contains the header content of the dialog, including the title and close button.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogheader\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Header = ({ className, children, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tdata-slot=\"dialog-header\"\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nHeader.displayName = \"DialogHeader\";\n\ntype CloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the dialog when clicked.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogcloseiconbutton\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst CloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: CloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\tdata-slot=\"dialog-close-icon-button\"\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</DialogPrimitive.Close>\n);\nCloseIconButton.displayName = \"DialogCloseIconButton\";\n\n/**\n * Contains the main content of the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogbody\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Body = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tdata-slot=\"dialog-body\"\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\n);\nBody.displayName = \"DialogBody\";\n\n/**\n * Contains the footer content of the dialog, including action buttons.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogfooter\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Footer = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tdata-slot=\"dialog-footer\"\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nFooter.displayName = \"DialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogtitle\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tdata-slot=\"dialog-title\"\n\t\tclassName={cx(\"text-strong truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"DialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\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/dialog#dialogdescription\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tdata-slot=\"dialog-description\"\n\t\tclassName={cx(\"text-muted\", className)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = \"DialogDescription\";\n\n/**\n * A window overlaid on either the primary window or another dialog window. Use\n * Dialog for a focused modal that interrupts the user to gather input or\n * confirm a non-destructive choice. For destructive or irreversible\n * confirmations (delete, sign out, leave without saving), prefer `AlertDialog`.\n * For side-panel content that slides in from an edge (filter panels, detail\n * views, navigation drawers), prefer `Sheet`.\n *\n * @see https://mantle.ngrok.com/components/dialog\n *\n * @example\n * Composition:\n * ```\n * Dialog.Root\n * ├── Dialog.Trigger\n * └── Dialog.Content\n *     ├── Dialog.Header\n *     │   ├── Dialog.Title\n *     │   ├── Dialog.Description\n *     │   └── Dialog.CloseIconButton\n *     ├── Dialog.Body\n *     └── Dialog.Footer\n *         └── Dialog.Close\n * ```\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Dialog = {\n\t/**\n\t * A window overlaid on either the primary window or another dialog window.\n\t * The root stateful component for the Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.Description>This is an optional description.</Dialog.Description>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the main content of the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.Description>This is an optional description.</Dialog.Description>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.Description>This is an optional description.</Dialog.Description>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * An icon button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogcloseiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.Description>This is an optional description.</Dialog.Description>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tCloseIconButton,\n\t/**\n\t * The container for the dialog content.\n\t * Renders on top of the overlay and is centered in the viewport.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.Description>This is an optional description.</Dialog.Description>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * An accessible description to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.Description>This is an optional description.</Dialog.Description>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including action buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.Description>This is an optional description.</Dialog.Description>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and close button.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.Description>This is an optional description.</Dialog.Description>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The overlay backdrop for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-reference\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Portal>\n\t *     <Dialog.Overlay />\n\t *     <Dialog.Content>\n\t *       <Dialog.Header>\n\t *         <Dialog.Title>Dialog Title</Dialog.Title>\n\t *         <Dialog.Description>This is an optional description.</Dialog.Description>\n\t *         <Dialog.CloseIconButton />\n\t *       </Dialog.Header>\n\t *       <Dialog.Body>\n\t *         <p>This is the dialog content.</p>\n\t *       </Dialog.Body>\n\t *       <Dialog.Footer>\n\t *         <Dialog.Close asChild>\n\t *           <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *         </Dialog.Close>\n\t *         <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *       </Dialog.Footer>\n\t *     </Dialog.Content>\n\t *   </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tOverlay,\n\t/**\n\t * The portal container for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-reference\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Portal>\n\t *     <Dialog.Overlay />\n\t *     <Dialog.Content>\n\t *       <Dialog.Header>\n\t *         <Dialog.Title>Dialog Title</Dialog.Title>\n\t *         <Dialog.Description>This is an optional description.</Dialog.Description>\n\t *         <Dialog.CloseIconButton />\n\t *       </Dialog.Header>\n\t *       <Dialog.Body>\n\t *         <p>This is the dialog content.</p>\n\t *       </Dialog.Body>\n\t *       <Dialog.Footer>\n\t *         <Dialog.Close asChild>\n\t *           <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *         </Dialog.Close>\n\t *         <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *       </Dialog.Footer>\n\t *     </Dialog.Content>\n\t *   </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * An accessible name to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogtitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.Description>This is an optional description.</Dialog.Description>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.Description>This is an optional description.</Dialog.Description>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tDialog,\n};\n"],"mappings":"sSAsCA,MAAM,EAAOA,EACb,EAAK,YAAc,SAgCnB,MAAM,EAAU,GAGb,EAAO,IAAQ,EAACC,EAAD,CAA8B,MAAK,YAAU,iBAAiB,GAAI,EAAS,CAAA,CAAC,CAC9F,EAAQ,YAAc,gBAwCtB,MAAM,EAASC,EACf,EAAO,YAAc,eAiCrB,MAAM,EAAQ,GAGX,EAAO,IAAQ,EAACC,EAAD,CAA4B,MAAK,YAAU,eAAe,GAAI,EAAS,CAAA,CAAC,CAC1F,EAAM,YAAc,cAwCpB,MAAM,EAAU,GAGb,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CACM,MACL,YAAU,iBACV,UAAW,EACV,iKACA,EACA,CACD,GAAI,EACH,CAAA,CACD,CACF,EAAQ,YAAc,gBA6CtB,MAAM,EAAU,GACd,CAAE,WAAU,YAAW,iBAAiB,WAAY,GAAG,GAAS,IAChE,EAAC,EAAD,CAAA,SAAA,CACC,EAAC,EAAD,EAAW,CAAA,CACX,EAAC,MAAD,CAAK,UAAU,+DACd,EAACC,EAAD,CACC,4BAAA,GACA,YAAU,iBACV,UAAW,EACV,yCACA,6CACA,wFACA,2KACA,EACA,EACA,CACI,MACL,GAAI,EAEH,WACwB,CAAA,CACrB,CAAA,CACE,CAAA,CAAA,CAEV,CACD,EAAQ,YAAc,gBAgCtB,MAAM,GAAU,CAAE,YAAW,WAAU,GAAG,KACzC,EAAC,MAAD,CACC,YAAU,gBACV,UAAW,EACV,+GACA,0BACA,EACA,CACD,GAAI,EAEH,WACI,CAAA,CAEP,EAAO,YAAc,eAkCrB,MAAM,GAAmB,CACxB,OAAO,KACP,OAAO,SACP,QAAQ,eACR,aAAa,QACb,GAAG,KAEH,EAACF,EAAD,CAAuB,QAAA,YACtB,EAAC,EAAD,CACa,aACZ,YAAU,2BACV,KAAM,EAAC,EAAD,EAAS,CAAA,CACR,QACD,OACA,OACN,GAAI,EACH,CAAA,CACqB,CAAA,CAEzB,EAAgB,YAAc,wBAgC9B,MAAM,GAAQ,CAAE,YAAW,GAAG,KAC7B,EAAC,MAAD,CACC,YAAU,cACV,UAAW,EAAG,iDAAkD,EAAU,CAC1E,GAAI,EACH,CAAA,CAEH,EAAK,YAAc,aAgCnB,MAAM,GAAU,CAAE,YAAW,GAAG,KAC/B,EAAC,MAAD,CACC,YAAU,gBACV,UAAW,EACV,8EACA,EACA,CACD,GAAI,EACH,CAAA,CAEH,EAAO,YAAc,eAgCrB,MAAM,EAAQ,GAGX,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACG,EAAD,CACM,MACL,YAAU,eACV,UAAW,EAAG,2CAA4C,EAAU,CACpE,GAAI,EACH,CAAA,CACD,CACF,EAAM,YAAc,cAkCpB,MAAM,EAAc,GAGjB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CACM,MACL,YAAU,qBACV,UAAW,EAAG,aAAc,EAAU,CACtC,GAAI,EACH,CAAA,CACD,CACF,EAAY,YAAc,oBAoD1B,MAAM,EAAS,CAgCd,OA+BA,OA+BA,QA+BA,kBAgCA,UA+BA,cA+BA,SA+BA,SAkCA,UAkCA,SA+BA,QA+BA,UACA"}

package/dist/index-C91lxoX9.d.ts

@@ -1,146 +0,0 @@
-import { a as WithInputType, i as WithAutoComplete, o as WithValidation } from "./types-DG0WQLTL.js";
-import * as _$react from "react";
-import { InputHTMLAttributes, PropsWithChildren } from "react";
-
-//#region src/components/input/input.d.ts
-type BaseProps = WithAutoComplete & WithInputType & WithValidation;
-/**
- * The props for the `Input` component.
- */
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & BaseProps & PropsWithChildren;
-/**
- * Used to create interactive controls for web-based forms in order to accept data from the user.
- * A versatile input element that supports various types, validation states, and can be composed with other elements.
- *
- * @see https://mantle.ngrok.com/components/input
- *
- * @example
- * ```tsx
- * <Input
- *   type="email"
- *   placeholder="Enter your email"
- *   validation="success"
- * />
- * ```
- */
-declare const Input: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithAutoComplete & WithInputType & WithValidation & {
-  children?: _$react.ReactNode | undefined;
-} & _$react.RefAttributes<HTMLInputElement>>;
-type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & BaseProps;
-/**
- * The actual <input /> element that captures user input.
- * Used internally by Input component or when you need direct control over the input element.
- *
- * @see https://mantle.ngrok.com/components/input
- *
- * @example
- * ```tsx
- * <Input>
- *   <InputCapture />
- *   <Icon svg={<SearchIcon />} />
- * </Input>
- * ```
- */
-declare const InputCapture: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithAutoComplete & WithInputType & WithValidation & _$react.RefAttributes<HTMLInputElement>>;
-//#endregion
-//#region src/components/input/password-input.d.ts
-type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
-  /**
-   * Callback for when the visibility of the password value changes.
-   */
-  onValueVisibilityChange?: (visible: boolean) => void;
-  /**
-   * Show/hide the password value as a controlled state.
-   * @default false
-   */
-  showValue?: boolean;
-};
-/**
- * An input optimized for password and other sensitive-value entry. Renders a
- * native `<input type="password">` with a built-in trailing button that
- * toggles between hidden (`••••`) and revealed (`text`) display.
- *
- * **When to use**
- * - Password fields on login, signup, and reset flows.
- * - One-time tokens, recovery codes, or secrets the user needs to type
- *   accurately and may want to verify visually before submitting.
- *
- * **When not to use**
- * - For values that are never sensitive — use a plain {@link https://mantle.ngrok.com/components/input Input}.
- * - For controls where the toggle would be confusing (e.g. masked input
- *   formatting like phone numbers).
- *
- * **Visibility state.** The toggle is uncontrolled by default. Pass
- * `showValue` to control the visibility from the outside (useful when one
- * UI control toggles multiple password fields), and `onValueVisibilityChange`
- * to be notified when the user toggles via the built-in button.
- *
- * **Accessibility.** Always pair with a {@link https://mantle.ngrok.com/components/label Label}.
- * The toggle button has its own accessible name announcing the current
- * state. The input keeps `autocomplete="current-password"` /
- * `"new-password"` semantics — set `autoComplete` explicitly per flow.
- *
- * **Browser password managers.** When revealed, the input switches to
- * `type="text"` — some password managers may pause autofill in this state,
- * which is the intended security tradeoff.
- *
- * @see https://mantle.ngrok.com/components/password-input
- *
- * @example
- * ```tsx
- * import { PasswordInput } from "@ngrok/mantle/input";
- * import { Label } from "@ngrok/mantle/label";
- * import { useState } from "react";
- *
- * // Basic — uncontrolled visibility.
- * <Label className="grid gap-1">
- *   <span>Password</span>
- *   <PasswordInput name="password" autoComplete="current-password" />
- * </Label>
- *
- * // Validation state.
- * <PasswordInput validation="error" />
- *
- * // Controlled visibility — one toggle reveals multiple fields.
- * function PasswordPair() {
- *   const [show, setShow] = useState(false);
- *   return (
- *     <>
- *       <PasswordInput showValue={show} onValueVisibilityChange={setShow} />
- *       <PasswordInput showValue={show} onValueVisibilityChange={setShow} />
- *     </>
- *   );
- * }
- * ```
- */
-declare const PasswordInput: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithValidation & WithAutoComplete & {
-  /**
-   * Callback for when the visibility of the password value changes.
-   */
-  onValueVisibilityChange?: (visible: boolean) => void;
-  /**
-   * Show/hide the password value as a controlled state.
-   * @default false
-   */
-  showValue?: boolean;
-} & _$react.RefAttributes<HTMLInputElement>>;
-//#endregion
-//#region src/components/input/is-input.d.ts
-/**
- * Type guard for an HTMLInputElement.
- *
- * @example
- * ```tsx
- * function handleElement(element: HTMLElement) {
- *   if (isInput(element)) {
- *     // TypeScript now knows element is HTMLInputElement
- *     element.value = "new value";
- *     element.focus();
- *   }
- * }
- * ```
- */
-declare function isInput(value: unknown): value is HTMLInputElement;
-//#endregion
-export { InputCapture as a, Input as i, PasswordInput as n, InputCaptureProps as o, PasswordInputProps as r, InputProps as s, isInput as t };
-//# sourceMappingURL=index-C91lxoX9.d.ts.map

package/dist/label.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"label.js","names":[],"sources":["../src/components/label/label.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype LabelProps = ComponentPropsWithoutRef<\"label\"> & {\n\t/**\n\t * If set, the label will appear disabled.\n\t */\n\tdisabled?: boolean;\n};\n\n/**\n * A caption for a form control — input, checkbox, radio, switch, select.\n * Renders a native `<label>`. Pair every form control with a `Label` so the\n * control has an accessible name, clicks on the label focus the control, and\n * screen readers announce the field correctly.\n *\n * **When to use**\n * - Every visible form control. Always.\n * - Above or beside an input to describe it (\"Email\", \"API key\").\n * - Wrapping a checkbox or radio next to its descriptive text.\n *\n * **When not to use**\n * - For static UI text that isn't labeling a control — use a heading or\n *   plain `<p>`/`<span>`.\n * - As a substitute for `aria-label` on non-`<input>` widgets that don't\n *   support `<label for>` association.\n *\n * **Two ways to associate.** Either wrap the control inside the `<Label>`\n * (implicit association — simplest) or set `htmlFor` to the control's `id`\n * (explicit — required when the control isn't a child).\n *\n * **Disabled state.** Pass `disabled` to render the label in a disabled\n * style. Typically you'll want this to mirror the underlying control's\n * disabled state so the visual treatment stays consistent.\n *\n * @see https://mantle.ngrok.com/components/label\n *\n * @example\n * ```tsx\n * import { Label } from \"@ngrok/mantle/label\";\n * import { Input } from \"@ngrok/mantle/input\";\n *\n * // Implicit — control nested inside the label.\n * <Label className=\"grid gap-1\">\n *   <span>Email</span>\n *   <Input type=\"email\" name=\"email\" />\n * </Label>\n *\n * // Explicit — htmlFor matches the control's id.\n * <div className=\"grid gap-1\">\n *   <Label htmlFor=\"api-key\">API key</Label>\n *   <Input id=\"api-key\" name=\"apiKey\" />\n * </div>\n *\n * // Inline label for a checkbox.\n * <Label className=\"flex items-center gap-2\">\n *   <Checkbox name=\"terms\" />\n *   <span>I agree to the terms</span>\n * </Label>\n * ```\n */\nconst Label = forwardRef<ComponentRef<\"label\">, LabelProps>(\n\t(\n\t\t{ \"aria-disabled\": _ariaDisabled, children, className, disabled, onMouseDown, ...props },\n\t\tref,\n\t) => (\n\t\t// biome-ignore lint/a11y/noLabelWithoutControl: this is a composable label component\n\t\t<label\n\t\t\taria-disabled={disabled ?? _ariaDisabled}\n\t\t\tdata-slot=\"label\"\n\t\t\tclassName={cx(\n\t\t\t\t\"text-strong cursor-pointer text-sm peer-disabled:cursor-default has-disabled:cursor-default aria-disabled:cursor-default font-sans\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonMouseDown={(event) => {\n\t\t\t\t// only prevent text selection if clicking inside the label itself\n\t\t\t\tconst target = event.target as HTMLElement;\n\t\t\t\tif (target.closest(\"button, input, select, textarea\")) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonMouseDown?.(event);\n\n\t\t\t\t// prevent text selection when double clicking label\n\t\t\t\tif (!event.defaultPrevented && event.detail > 1) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t}}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</label>\n\t),\n);\nLabel.displayName = \"Label\";\n\nexport {\n\t//\n\tLabel,\n};\n"],"mappings":"gHA8DA,MAAM,EAAQ,GAEZ,CAAE,gBAAiB,EAAe,WAAU,YAAW,WAAU,cAAa,GAAG,GACjF,IAGA,EAAC,QAAD,CACC,gBAAe,GAAY,EAC3B,YAAU,QACV,UAAW,EACV,qIACA,EACA,CACD,YAAc,GAAU,CAER,EAAM,OACV,QAAQ,kCAAkC,GAIrD,IAAc,EAAM,CAGhB,CAAC,EAAM,kBAAoB,EAAM,OAAS,GAC7C,EAAM,gBAAgB,GAGnB,MACL,GAAI,EAEH,WACM,CAAA,CAET,CACD,EAAM,YAAc"}

package/dist/popover.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover.js","names":[],"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverroot\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Root = PopoverPrimitive.Root;\nRoot.displayName = \"Popover\";\n\n/**\n * The trigger button that opens the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovertrigger\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Trigger = PopoverPrimitive.Trigger;\nTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\n *\n * @see https://mantle.ngrok.com/components/popover#popoveranchor\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Anchor asChild>\n *     <div>Anchor element</div>\n *   </Popover.Anchor>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Anchor = PopoverPrimitive.Anchor;\nAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverclose\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *     <Popover.Close asChild>\n *       <Button type=\"button\">Close</Button>\n *     </Popover.Close>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Close = PopoverPrimitive.Close;\nClose.displayName = \"PopoverClose\";\n\ntype PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Popover`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `PopoverContent`\n\t *\n\t * @default `max-w-72`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The content to render inside the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovercontent\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, PopoverContentProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\talign = \"center\",\n\t\t\tclassName,\n\t\t\tonClick,\n\t\t\tpreferredWidth = \"max-w-72\",\n\t\t\tsideOffset = 4,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\talign={align}\n\t\t\t\tdata-slot=\"popover-content\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-popover-foreground border-popover bg-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 z-50 rounded-md border p-4 shadow-md outline-hidden\",\n\t\t\t\t\tpreferredWidth,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t\t * of the PopoverContent\n\t\t\t\t\t */\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</PopoverPrimitive.Portal>\n\t),\n);\nContent.displayName = \"PopoverContent\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n *\n * Use `Popover` for INTERACTIVE overlay content — small forms, settings\n * menus, color pickers, action lists. The user opens it deliberately\n * (click/tap or focus + space). For short, non-interactive label hints\n * triggered by hover, use `Tooltip` instead. For non-essential preview\n * content shown on hover, use `HoverCard`.\n *\n * `Popover` is a non-modal dialog by default: focus moves into the content\n * when it opens, `Escape` closes and returns focus to the trigger, clicking\n * outside dismisses, and the page (body and any scroll containers) continues\n * to scroll normally. Pass `modal` on `Popover.Root` to trap focus inside\n * the content, block interaction with the rest of the page, and lock body\n * scroll while the popover is open.\n *\n * @see https://mantle.ngrok.com/components/popover\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n *\n * @example\n * Composition:\n * ```\n * Popover.Root\n * ├── Popover.Trigger\n * ├── Popover.Anchor\n * └── Popover.Content\n *     └── Popover.Close\n * ```\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Popover = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the popover.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button>Open popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <p>This is the popover content.</p>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoveranchor\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Anchor asChild>\n\t *     <div>Position relative to this element</div>\n\t *   </Popover.Anchor>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <p>This popover is positioned relative to the anchor.</p>\n\t *     <Popover.Close asChild>\n\t *       <Button type=\"button\">Close</Button>\n\t *     </Popover.Close>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tAnchor,\n\t/**\n\t * A button that closes an open popover. Can be placed anywhere within the popover content.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Settings</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"flex items-center justify-between\">\n\t *       <Text>Settings Panel</Text>\n\t *       <Popover.Close asChild>\n\t *         <Button type=\"button\" appearance=\"ghost\" size=\"sm\">✕</Button>\n\t *       </Popover.Close>\n\t *     </div>\n\t *     <Text>Configure your preferences here.</Text>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The content to render inside the popover. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovercontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Show Info</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content side=\"top\" align=\"center\">\n\t *     <div className=\"space-y-2\">\n\t *       <Text weight=\"strong\">Additional Information</Text>\n\t *       <Text>This is the content inside the popover.</Text>\n\t *       <Button type=\"button\" size=\"sm\">Action</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the popover when clicked or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovertrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Options\n\t *     </Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"space-y-2\">\n\t *       <Button type=\"button\" variant=\"ghost\">Edit</Button>\n\t *       <Button type=\"button\" variant=\"ghost\">Delete</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tPopover,\n};\n"],"mappings":"0JAyBA,MAAM,EAAO,EAAiB,KAC9B,EAAK,YAAc,UAqBnB,MAAM,EAAU,EAAiB,QACjC,EAAQ,YAAc,iBAwBtB,MAAM,EAAS,EAAiB,OAChC,EAAO,YAAc,gBAwBrB,MAAM,EAAQ,EAAiB,MAC/B,EAAM,YAAc,eAiCpB,MAAM,EAAU,GAEd,CAEC,QAAQ,SACR,YACA,UACA,iBAAiB,WACjB,aAAa,EACb,GAAG,GAEJ,IAEA,EAAC,EAAiB,OAAlB,CAAA,SACC,EAAC,EAAiB,QAAlB,CACQ,QACP,YAAU,kBACV,UAAW,EACV,qaACA,EACA,EACA,CACD,QAAU,GAAU,CAKnB,EAAM,iBAAiB,CACvB,IAAU,EAAM,EAEZ,MACO,aACZ,GAAI,EACH,CAAA,CACuB,CAAA,CAE3B,CACD,EAAQ,YAAc,iBA6CtB,MAAM,EAAU,CAkBf,OAwBA,SAwBA,QAsBA,UAuBA,UACA"}

package/dist/select-DOgdZO0Q.js

@@ -1,2 +0,0 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-bWc5yC3-.js";import{t as n}from"./compose-refs-DZ3cPi47.js";import{n as r}from"./separator-DSOIrnhj.js";import{CaretDownIcon as i}from"@phosphor-icons/react/CaretDown";import{createContext as a,forwardRef as o,useContext as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{CheckIcon as u}from"@phosphor-icons/react/Check";import{CaretUpIcon as d}from"@phosphor-icons/react/CaretUp";import*as f from"@radix-ui/react-select";const p=a({}),m=o(({"aria-invalid":e,children:t,id:n,validation:r,onBlur:i,onValueChange:a,onChange:o,...s},l)=>c(f.Root,{...s,onValueChange:e=>{o?.(e),a?.(e)},children:c(p.Provider,{value:{"aria-invalid":e,id:n,validation:r,onBlur:i,ref:l},children:t})}));m.displayName=`Select`;const h=o(({className:t,...n},r)=>c(f.Group,{ref:r,"data-slot":`select-group`,className:e(`space-y-px`,t),...n}));h.displayName=`SelectGroup`;const g=f.Value;g.displayName=`SelectValue`;const _=o(({"aria-invalid":r,className:a,children:o,id:u,validation:d,...m},h)=>{let g=s(p),_=g[`aria-invalid`]??r,v=_!=null&&_!==`false`,y=g.validation??d,b=v?`error`:typeof y==`function`?y():y,x=_??b===`error`,S=g.id??u;return l(f.Trigger,{"aria-invalid":x,"data-slot":`select-trigger`,className:e(`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":b||void 0,id:S,ref:n(h,g.ref),...m,children:[o,c(f.Icon,{asChild:!0,children:c(t,{svg:c(i,{weight:`bold`}),className:`size-4`})})]})});_.displayName=`SelectTrigger`;const v=o(({className:n,...r},i)=>c(f.ScrollUpButton,{ref:i,className:e(`flex cursor-default items-center justify-center py-1`,n),...r,children:c(t,{svg:c(d,{weight:`bold`}),className:`size-4`})}));v.displayName=`SelectScrollUpButton`;const y=o(({className:n,...r},a)=>c(f.ScrollDownButton,{ref:a,className:e(`flex cursor-default items-center justify-center py-1`,n),...r,children:c(t,{svg:c(i,{weight:`bold`}),className:`size-4`})}));y.displayName=`SelectScrollDownButton`;const b=o(({className:t,children:n,position:r=`popper`,width:i=`trigger`,...a},o)=>c(f.Portal,{children:l(f.Content,{ref:o,"data-slot":`select-content`,className:e(`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`,r===`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)`,i===`trigger`&&`w-(--radix-select-trigger-width)`,t),position:r,...a,children:[c(v,{}),c(f.Viewport,{className:e(`p-1 space-y-px`,r===`popper`&&`h-(--radix-select-trigger-height) w-full`),children:n}),c(y,{})]})}));b.displayName=`SelectContent`;const x=o(({className:t,...n},r)=>c(f.Label,{ref:r,"data-slot":`select-label`,className:e(`px-2 py-1.5 text-sm font-medium`,t),...n}));x.displayName=`SelectLabel`;const S=o(({className:n,children:r,icon:i,...a},o)=>l(f.Item,{ref:o,"data-slot":`select-item`,className:e(`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`,n),...a,children:[i&&c(t,{svg:i}),c(f.ItemText,{children:r}),c(f.ItemIndicator,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:c(t,{svg:c(u,{weight:`bold`}),className:`size-4 text-accent-600`})})]}));S.displayName=`SelectItem`;const C=o(({className:t,...n},i)=>c(r,{ref:i,"data-slot":`select-separator`,className:e(`-mx-1 my-1 h-px w-auto`,t),...n}));C.displayName=`SelectSeparator`;const w={Root:m,Content:b,Group:h,Item:S,Label:x,Separator:C,Trigger:_,Value:g};export{w as t};
-//# sourceMappingURL=select-DOgdZO0Q.js.map

package/dist/select-DOgdZO0Q.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"select-DOgdZO0Q.js","names":[],"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 * Use Select for a small, finite list of options (~2-15) where the user picks exactly one\n * and search/filtering is unnecessary. For larger lists or async/searchable data, use\n * Combobox. For picking multiple options, use MultiSelect.\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 * @see https://mantle.ngrok.com/components/select#selectgroup\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 Group = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Group>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Group\n\t\tref={ref}\n\t\tdata-slot=\"select-group\"\n\t\tclassName={cx(\"space-y-px\", className)}\n\t\t{...props}\n\t/>\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 * @see https://mantle.ngrok.com/components/select#selectvalue\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 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.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 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 rawAriaInvalid = ctx[\"aria-invalid\"] ?? ariaInValidProp;\n\t\tconst isInvalid = rawAriaInvalid != null && rawAriaInvalid !== \"false\";\n\t\tconst rawValidation = ctx.validation ?? propValidation;\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof rawValidation === \"function\"\n\t\t\t\t? rawValidation()\n\t\t\t\t: rawValidation;\n\t\tconst ariaInvalid = rawAriaInvalid ?? 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\tdata-slot=\"select-trigger\"\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 * @see https://mantle.ngrok.com/components/select#selectcontent\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 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\tdata-slot=\"select-content\"\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 * @see https://mantle.ngrok.com/components/select#selectlabel\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 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\tdata-slot=\"select-label\"\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 * @see https://mantle.ngrok.com/components/select#selectitem\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 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\tdata-slot=\"select-item\"\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 * @see https://mantle.ngrok.com/components/select#selectseparator\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 SelectSeparatorComponent = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tdata-slot=\"select-separator\"\n\t\tclassName={cx(\"-mx-1 my-1 h-px w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nSelectSeparatorComponent.displayName = \"SelectSeparator\";\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * Use Select for a small, finite list of options (~2-15) where the user picks exactly one\n * and search/filtering is unnecessary. For larger lists or async/searchable data, use\n * Combobox. For picking multiple options, use MultiSelect.\n *\n * @see https://mantle.ngrok.com/components/select\n *\n * @example\n * Composition:\n * ```\n * Select.Root\n * ├── Select.Trigger\n * │   └── Select.Value\n * └── Select.Content\n *     ├── Select.Group\n *     │   ├── Select.Label\n *     │   └── Select.Item\n *     └── Select.Separator\n * ```\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 * Use Select for a small, finite list of options (~2-15) where the user picks exactly one\n\t * and search/filtering is unnecessary. For larger lists or async/searchable data, use\n\t * Combobox. For picking multiple options, use MultiSelect.\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 * ```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\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 * ```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\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 * ```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\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 * ```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\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 * ```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\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.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\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 * ```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\tValue,\n} as const;\n\nexport {\n\t//,\n\tSelect,\n};\n"],"mappings":"ufAqCA,MAAM,EAAgB,EAAiC,EAAE,CAAC,CA6DpD,EAAO,GAEX,CACC,eAAgB,EAChB,WACA,KACA,aACA,SACA,gBACA,WACA,GAAG,GAEJ,IAGC,EAAC,EAAgB,KAAjB,CACC,GAAI,EACJ,cAAgB,GAAU,CACzB,IAAW,EAAM,CACjB,IAAgB,EAAM,WAGvB,EAAC,EAAc,SAAf,CACC,MAAO,CAAE,eAAgB,EAAc,KAAI,aAAY,SAAQ,MAAK,CAEnE,WACuB,CAAA,CACH,CAAA,CAGzB,CACD,EAAK,YAAc,SA+BnB,MAAM,EAAQ,GAGX,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAgB,MAAjB,CACM,MACL,YAAU,eACV,UAAW,EAAG,aAAc,EAAU,CACtC,GAAI,EACH,CAAA,CACD,CACF,EAAM,YAAc,cA8BpB,MAAM,EAAQ,EAAgB,MAC9B,EAAM,YAAc,cAkCpB,MAAM,EAAU,GAEd,CACC,eAAgB,EAChB,YACA,WACA,GAAI,EACJ,WAAY,EACZ,GAAG,GAEJ,IACI,CACJ,IAAM,EAAM,EAAW,EAAc,CAC/B,EAAiB,EAAI,iBAAmB,EACxC,EAAY,GAAkB,MAAQ,IAAmB,QACzD,EAAgB,EAAI,YAAc,EAClC,EAAa,EAChB,QACA,OAAO,GAAkB,WACxB,GAAe,CACf,EACE,EAAc,GAAkB,IAAe,QAC/C,EAAK,EAAI,IAAM,EAErB,OACC,EAAC,EAAgB,QAAjB,CACC,eAAc,EACd,YAAU,iBACV,UAAW,EACV,cACA,sRACA,2BACA,yDACA,kHACA,iQACA,iQACA,kPACA,EACA,CACD,kBAAiB,GAAc,IAAA,GAC3B,KACJ,IAAK,EAAY,EAAK,EAAI,IAAI,CAC9B,GAAI,WAjBL,CAmBE,EACD,EAAC,EAAgB,KAAjB,CAAsB,QAAA,YACrB,EAAC,EAAD,CAAM,IAAK,EAAC,EAAD,CAAe,OAAO,OAAS,CAAA,CAAE,UAAU,SAAW,CAAA,CAC3C,CAAA,CACE,IAG5B,CACD,EAAQ,YAAc,gBAMtB,MAAM,EAAuB,GAG1B,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAgB,eAAjB,CACM,MACL,UAAW,EAAG,uDAAwD,EAAU,CAChF,GAAI,WAEJ,EAAC,EAAD,CAAM,IAAK,EAAC,EAAD,CAAa,OAAO,OAAS,CAAA,CAAE,UAAU,SAAW,CAAA,CAC/B,CAAA,CAChC,CACF,EAAqB,YAAc,uBAMnC,MAAM,EAAyB,GAG5B,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAgB,iBAAjB,CACM,MACL,UAAW,EAAG,uDAAwD,EAAU,CAChF,GAAI,WAEJ,EAAC,EAAD,CAAM,IAAK,EAAC,EAAD,CAAe,OAAO,OAAS,CAAA,CAAE,UAAU,SAAW,CAAA,CAC/B,CAAA,CAClC,CACF,EAAuB,YAAc,yBAwCrC,MAAM,EAAU,GACd,CAAE,YAAW,WAAU,WAAW,SAAU,QAAQ,UAAW,GAAG,GAAS,IAC3E,EAAC,EAAgB,OAAjB,CAAA,SACC,EAAC,EAAgB,QAAjB,CACM,MACL,YAAU,iBACV,UAAW,EACV,0ZACA,uBACA,IAAa,UACZ,0KACD,IAAU,WAAa,mCACvB,EACA,CACS,WACV,GAAI,WAZL,CAcC,EAAC,EAAD,EAAwB,CAAA,CACxB,EAAC,EAAgB,SAAjB,CACC,UAAW,EACV,iBACA,IAAa,UAAY,2CACzB,CAEA,WACyB,CAAA,CAC3B,EAAC,EAAD,EAA0B,CAAA,CACD,GACF,CAAA,CAE1B,CACD,EAAQ,YAAc,gBA8BtB,MAAM,EAAQ,GAGX,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAgB,MAAjB,CACM,MACL,YAAU,eACV,UAAW,EAAG,kCAAmC,EAAU,CAC3D,GAAI,EACH,CAAA,CACD,CACF,EAAM,YAAc,cAoCpB,MAAM,EAAO,GACX,CAAE,YAAW,WAAU,OAAM,GAAG,GAAS,IACzC,EAAC,EAAgB,KAAjB,CACM,MACL,YAAU,cACV,UAAW,EACV,oIACA,4BACA,6DACA,2CACA,wDACA,EACA,CACD,GAAI,WAXL,CAaE,GAAQ,EAAC,EAAD,CAAM,IAAK,EAAQ,CAAA,CAC5B,EAAC,EAAgB,SAAjB,CAA2B,WAAoC,CAAA,CAC/D,EAAC,EAAgB,cAAjB,CAA+B,UAAU,yEACxC,EAAC,EAAD,CAAM,IAAK,EAAC,EAAD,CAAW,OAAO,OAAS,CAAA,CAAE,UAAU,yBAA2B,CAAA,CAC9C,CAAA,CACV,GAExB,CACD,EAAK,YAAc,aA8BnB,MAAM,EAA2B,GAG9B,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAD,CACM,MACL,YAAU,mBACV,UAAW,EAAG,yBAA0B,EAAU,CAClD,GAAI,EACH,CAAA,CACD,CACF,EAAyB,YAAc,kBA+CvC,MAAM,EAAS,CAiCd,OA8BA,UA8BA,QA+BA,OA6BA,QA6BA,UAAW,EA6BX,UA6BA,QACA"}