@ngrok/mantle 0.66.17 → 0.68.0

package/dist/mantle.css

@@ -68,17 +68,17 @@ MARK: THEME
 	--color-ff00ff: color(display-p3 0.94164 0 0.99869);
 
 	/* Semantic color aliases - reference base colors defined in theme-specific :root blocks */
-	--color-accent-50: var(--color-blue-50);
-	--color-accent-100: var(--color-blue-100);
-	--color-accent-200: var(--color-blue-200);
-	--color-accent-300: var(--color-blue-300);
-	--color-accent-400: var(--color-blue-400);
-	--color-accent-500: var(--color-blue-500);
-	--color-accent-600: var(--color-blue-600);
-	--color-accent-700: var(--color-blue-700);
-	--color-accent-800: var(--color-blue-800);
-	--color-accent-900: var(--color-blue-900);
-	--color-accent-950: var(--color-blue-950);
+	--color-accent-50: var(--color-sky-50);
+	--color-accent-100: var(--color-sky-100);
+	--color-accent-200: var(--color-sky-200);
+	--color-accent-300: var(--color-sky-300);
+	--color-accent-400: var(--color-sky-400);
+	--color-accent-500: var(--color-sky-500);
+	--color-accent-600: var(--color-sky-600);
+	--color-accent-700: var(--color-sky-700);
+	--color-accent-800: var(--color-sky-800);
+	--color-accent-900: var(--color-sky-900);
+	--color-accent-950: var(--color-sky-950);
 
 	/* info === accent */
 	--color-info-50: var(--color-accent-50);
@@ -93,17 +93,17 @@ MARK: THEME
 	--color-info-900: var(--color-accent-900);
 	--color-info-950: var(--color-accent-950);
 
-	--color-danger-50: var(--color-red-50);
-	--color-danger-100: var(--color-red-100);
-	--color-danger-200: var(--color-red-200);
-	--color-danger-300: var(--color-red-300);
-	--color-danger-400: var(--color-red-400);
-	--color-danger-500: var(--color-red-500);
-	--color-danger-600: var(--color-red-600);
-	--color-danger-700: var(--color-red-700);
-	--color-danger-800: var(--color-red-800);
-	--color-danger-900: var(--color-red-900);
-	--color-danger-950: var(--color-red-950);
+	--color-danger-50: var(--color-rose-50);
+	--color-danger-100: var(--color-rose-100);
+	--color-danger-200: var(--color-rose-200);
+	--color-danger-300: var(--color-rose-300);
+	--color-danger-400: var(--color-rose-400);
+	--color-danger-500: var(--color-rose-500);
+	--color-danger-600: var(--color-rose-600);
+	--color-danger-700: var(--color-rose-700);
+	--color-danger-800: var(--color-rose-800);
+	--color-danger-900: var(--color-rose-900);
+	--color-danger-950: var(--color-rose-950);
 
 	--color-warning-50: var(--color-amber-50);
 	--color-warning-100: var(--color-amber-100);
@@ -117,17 +117,29 @@ MARK: THEME
 	--color-warning-900: var(--color-amber-900);
 	--color-warning-950: var(--color-amber-950);
 
-	--color-success-50: var(--color-green-50);
-	--color-success-100: var(--color-green-100);
-	--color-success-200: var(--color-green-200);
-	--color-success-300: var(--color-green-300);
-	--color-success-400: var(--color-green-400);
-	--color-success-500: var(--color-green-500);
-	--color-success-600: var(--color-green-600);
-	--color-success-700: var(--color-green-700);
-	--color-success-800: var(--color-green-800);
-	--color-success-900: var(--color-green-900);
-	--color-success-950: var(--color-green-950);
+	--color-success-50: var(--color-emerald-50);
+	--color-success-100: var(--color-emerald-100);
+	--color-success-200: var(--color-emerald-200);
+	--color-success-300: var(--color-emerald-300);
+	--color-success-400: var(--color-emerald-400);
+	--color-success-500: var(--color-emerald-500);
+	--color-success-600: var(--color-emerald-600);
+	--color-success-700: var(--color-emerald-700);
+	--color-success-800: var(--color-emerald-800);
+	--color-success-900: var(--color-emerald-900);
+	--color-success-950: var(--color-emerald-950);
+
+	--color-important-50: var(--color-purple-50);
+	--color-important-100: var(--color-purple-100);
+	--color-important-200: var(--color-purple-200);
+	--color-important-300: var(--color-purple-300);
+	--color-important-400: var(--color-purple-400);
+	--color-important-500: var(--color-purple-500);
+	--color-important-600: var(--color-purple-600);
+	--color-important-700: var(--color-purple-700);
+	--color-important-800: var(--color-purple-800);
+	--color-important-900: var(--color-purple-900);
+	--color-important-950: var(--color-purple-950);
 
 	/* Shadow tokens - reference theme-specific shadow color and opacity values */
 	--shadow-sm: 0px 1px 2px 0 --alpha(var(--shadow-color) / var(--shadow-first-opacity));
@@ -240,12 +252,6 @@ MARK: THEME
 	--background-color-filled-warning-hover: var(--background-color-filled-warning-hover);
 	--background-color-filled-success-hover: var(--background-color-filled-success-hover);
 
-	--background-color-filled-neutral-active: var(--background-color-filled-neutral-active);
-	--background-color-filled-accent-active: var(--background-color-filled-accent-active);
-	--background-color-filled-danger-active: var(--background-color-filled-danger-active);
-	--background-color-filled-warning-active: var(--background-color-filled-warning-active);
-	--background-color-filled-success-active: var(--background-color-filled-success-active);
-
 	--ring-color-focus-neutral: var(--ring-color-focus-neutral);
 	--ring-color-focus-accent: var(--ring-color-focus-accent);
 	--ring-color-focus-danger: var(--ring-color-focus-danger);
@@ -264,6 +270,7 @@ MARK: LIGHT DEFS
 
 	/* neutral-50 through neutral-900 match Tailwind v4 defaults exactly — only -950 is custom */
 	--color-neutral-950: oklch(18.2% 0 0); /* TW4 default is 14.5% — intentionally lighter */
+	--color-sky-600: oklch(55% 0.158 241.966);
 
 	/* gray is identical to neutral in light mode */
 	--color-gray-50: var(--color-neutral-50);
@@ -297,10 +304,22 @@ MARK: LIGHT DEFS
 	--background-color-popover: var(--color-white);
 	--background-color-dialog: var(--color-white);
 	--background-color-base-hover: var(--color-neutral-100);
-	--background-color-card-hover: var(--color-neutral-100);
-	--background-color-popover-hover: var(--color-neutral-100);
-	--background-color-dialog-hover: var(--color-neutral-100);
-	--background-color-form: var(--color-white);
+	--background-color-card-hover: color-mix(
+		in oklab,
+		var(--color-white) 50%,
+		var(--color-neutral-100)
+	);
+	--background-color-popover-hover: color-mix(
+		in oklab,
+		var(--color-white) 50%,
+		var(--color-neutral-100)
+	);
+	--background-color-dialog-hover: color-mix(
+		in oklab,
+		var(--color-white) 50%,
+		var(--color-neutral-100)
+	);
+	--background-color-form: var(--background-color-card);
 	--background-color-form-hover: --alpha(var(--color-neutral-500) / 0.05);
 	--background-color-form-active: --alpha(var(--color-neutral-500) / 0.1);
 	--background-color-overlay: --alpha(#000 / 0.12);
@@ -321,9 +340,9 @@ MARK: LIGHT DEFS
 	--color-card-border: var(--color-neutral-300);
 	--color-card-border-muted: var(--color-neutral-200);
 
-	--color-active-menu-item: var(--color-neutral-100);
-	--color-selected-menu-item: var(--color-accent-50);
-	--color-active-selected-menu-item: var(--color-accent-100);
+	--color-active-menu-item: --alpha(var(--color-neutral-500) / 0.05);
+	--color-selected-menu-item: --alpha(var(--color-accent-500) / 0.1);
+	--color-active-selected-menu-item: --alpha(var(--color-accent-500) / 0.15);
 
 	--text-color-strong: var(--color-neutral-950);
 	--text-color-body: --alpha(var(--color-neutral-950) / 0.75);
@@ -332,23 +351,17 @@ MARK: LIGHT DEFS
 	--text-color-on-filled: #fff;
 
 	/* Theme tokens */
-	--background-color-filled-neutral: var(--color-neutral-500);
-	--background-color-filled-accent: var(--color-accent-500);
-	--background-color-filled-danger: var(--color-danger-500);
-	--background-color-filled-warning: var(--color-warning-500);
-	--background-color-filled-success: var(--color-success-500);
-
-	--background-color-filled-neutral-hover: var(--color-neutral-600);
-	--background-color-filled-accent-hover: var(--color-accent-600);
-	--background-color-filled-danger-hover: var(--color-danger-600);
-	--background-color-filled-warning-hover: var(--color-warning-600);
-	--background-color-filled-success-hover: var(--color-success-600);
-
-	--background-color-filled-neutral-active: var(--color-neutral-700);
-	--background-color-filled-accent-active: var(--color-accent-700);
-	--background-color-filled-danger-active: var(--color-danger-700);
-	--background-color-filled-warning-active: var(--color-warning-700);
-	--background-color-filled-success-active: var(--color-success-700);
+	--background-color-filled-neutral: var(--color-neutral-950);
+	--background-color-filled-accent: var(--color-accent-600);
+	--background-color-filled-danger: var(--color-danger-600);
+	--background-color-filled-warning: var(--color-warning-600);
+	--background-color-filled-success: var(--color-success-600);
+
+	--background-color-filled-neutral-hover: var(--color-neutral-800);
+	--background-color-filled-accent-hover: var(--color-accent-700);
+	--background-color-filled-danger-hover: var(--color-danger-700);
+	--background-color-filled-warning-hover: var(--color-warning-700);
+	--background-color-filled-success-hover: var(--color-success-700);
 
 	/* Focus tokens */
 	--ring-color-focus-neutral: --alpha(var(--color-neutral-500) / 0.3);
@@ -361,6 +374,9 @@ MARK: LIGHT DEFS
 	--shadow-first-opacity: 5%;
 	--shadow-second-opacity: 10%;
 	--navigation-shadow: --alpha(var(--shadow-color) / 10%);
+
+	--bg-checked-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M12.7071 4.29289c.3905.39053.3905 1.02369 0 1.41422L6.70711 11.7071c-.39053.3905-1.02369.3905-1.41422 0l-2-1.99999c-.39052-.39053-.39052-1.02369 0-1.41422.39053-.39052 1.02369-.39052 1.41422 0L6 9.58579l5.2929-5.2929c.3905-.39052 1.0237-.39052 1.4142 0Z'/%3e%3c/svg%3e");
+	--bg-indeterminate-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M4 8c0-.55228.44772-1 1-1h6c.5523 0 1 .44772 1 1s-.4477 1-1 1H5c-.55228 0-1-.44772-1-1Z'/%3e%3c/svg%3e");
 }
 
 /**
@@ -419,6 +435,10 @@ MARK: CUSTOM VARIANTS
 }
 
 @layer base {
+	body {
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
 	button:not(:disabled),
 	[role="button"]:not(:disabled) {
 		cursor: pointer;
@@ -433,6 +453,13 @@ MARK: CUSTOM VARIANTS
 /**
 MARK: UTILITIES
 */
+@layer utilities {
+	.font-family {
+		-webkit-font-smoothing: auto;
+		-moz-osx-font-smoothing: auto;
+	}
+}
+
 @utility cursor-inherit {
 	cursor: inherit;
 }
@@ -486,38 +513,26 @@ MARK: UTILITIES
 	background-attachment: local, local, scroll, scroll;
 }
 
-@utility scroll-shadow-x {
-	/* CSS variables default to transparent — data attributes flip them on */
-	--_cover-left: transparent;
-	--_cover-right: transparent;
-	--_shadow-left: transparent;
-	--_shadow-right: transparent;
+@utility scroll-fade-x {
+	/* CSS variables default to black (fully opaque in mask) — data attributes flip them to transparent */
+	--_fade-left: black;
+	--_fade-right: black;
 
-	background:
-		/* Shadow Cover LEFT */
-		linear-gradient(to right, var(--_cover-left) 30%, transparent) left center,
-		/* Shadow Cover RIGHT */ linear-gradient(to left, var(--_cover-right) 30%, transparent) right
-			center,
-		/* Shadow LEFT */ radial-gradient(farthest-side at 0% 50%, var(--_shadow-left), rgb(0 0 0 / 0%))
-			left center,
-		/* Shadow RIGHT */
-			radial-gradient(farthest-side at 100% 50%, var(--_shadow-right), rgb(0 0 0 / 0%)) right center;
-	background-repeat: no-repeat;
-	background-size:
-		40px 100%,
-		40px 100%,
-		14px 100%,
-		14px 100%;
-	background-attachment: scroll;
+	/* Mask fades the element's edges to transparent instead of painting over them with a background color */
+	mask-image: linear-gradient(
+		to right,
+		var(--_fade-left),
+		black 40px,
+		black calc(100% - 40px),
+		var(--_fade-right)
+	);
 
 	&[data-scroll-left] {
-		--_cover-left: var(--background-color-base);
-		--_shadow-left: var(--navigation-shadow);
+		--_fade-left: transparent;
 	}
 
 	&[data-scroll-right] {
-		--_cover-right: var(--background-color-base);
-		--_shadow-right: var(--navigation-shadow);
+		--_fade-right: transparent;
 	}
 }
 
@@ -550,11 +565,11 @@ MARK: UTILITIES
 }
 
 @utility bg-checked-icon {
-	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M12.7071 4.29289c.3905.39053.3905 1.02369 0 1.41422L6.70711 11.7071c-.39053.3905-1.02369.3905-1.41422 0l-2-1.99999c-.39052-.39053-.39052-1.02369 0-1.41422.39053-.39052 1.02369-.39052 1.41422 0L6 9.58579l5.2929-5.2929c.3905-.39052 1.0237-.39052 1.4142 0Z'/%3e%3c/svg%3e");
+	background-image: var(--bg-checked-icon);
 }
 
 @utility bg-indeterminate-icon {
-	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M4 8c0-.55228.44772-1 1-1h6c.5523 0 1 .44772 1 1s-.4477 1-1 1H5c-.55228 0-1-.44772-1-1Z'/%3e%3c/svg%3e");
+	background-image: var(--bg-indeterminate-icon);
 }
 
 @utility stop-color-current {
@@ -571,65 +586,61 @@ MARK: UTILITIES
 	animation-duration: --value([length]);
 }
 
-/**
-MARK: SYNTAX HIGHLIGHT TOKEN STYLES
+/*
+MARK: SHIKI SYNTAX HIGHLIGHT
 */
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-	color: var(--color-gray-500);
+:root {
+	--shiki-foreground: var(--text-color-body);
+	--shiki-background: transparent;
+	--shiki-color-text: var(--shiki-foreground);
+
+	--shiki-token-comment: var(--color-gray-600);
+	--shiki-token-constant: var(--color-amber-600);
+	--shiki-token-string: var(--color-emerald-600);
+	--shiki-token-string-expression: var(--color-emerald-600);
+	--shiki-token-keyword: var(--color-purple-600);
+	--shiki-token-function: var(--color-sky-600);
+	--shiki-token-parameter: var(--color-rose-600);
+	--shiki-token-punctuation: var(--color-sky-600);
+
+	--shiki-token-type: var(--color-amber-600);
+	--shiki-token-variable: var(--shiki-foreground);
+	--shiki-token-operator: var(--color-sky-600);
+	--shiki-token-attribute: var(--color-purple-600);
+	--shiki-token-property: var(--color-rose-600);
+	--shiki-token-escape: var(--color-sky-600);
+
+	/* Mantle code-line rendering hooks (used by CodeBlock + server highlighter). */
+	--mantle-code-line-highlight-bg: --alpha(var(--color-accent-500) / 12%);
+	--mantle-code-line-number-color: var(--text-color-muted);
+	--mantle-code-line-number-width: 2rem;
+	--mantle-code-line-number-gap: 1rem;
 }
 
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-	color: var(--color-indigo-600);
+.mantle-code-line {
+	display: flex;
+	align-items: flex-start;
+	min-width: 100%;
+	box-sizing: border-box;
+	padding-right: 3.5rem; /* space for the copy button overlay */
 }
 
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-	color: var(--color-green-600);
+.mantle-code-line-highlighted {
+	background-color: var(--mantle-code-line-highlight-bg);
 }
 
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-	color: var(--color-green-600);
+.mantle-code-line-number {
+	display: block;
+	flex-shrink: 0;
+	width: var(--mantle-code-line-number-width);
+	margin-right: var(--mantle-code-line-number-gap);
+	user-select: none;
+	text-align: right;
+	color: var(--mantle-code-line-number-color);
 }
 
-.token.selector,
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-	color: var(--color-blue-600);
-}
-
-.token.function,
-.token.class-name {
-	color: var(--color-blue-600);
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-	color: var(--color-yellow-600);
-}
-
-.token.important,
-.token.bold {
-	font-weight: bold;
-}
-
-.token.italic {
-	font-style: italic;
+.mantle-code-line-content {
+	display: block;
+	min-width: 0;
+	flex: 1 1 auto;
 }

package/dist/media-object.d.ts

@@ -1,5 +1,5 @@
-import { t as WithAsChild } from "./as-child-XMVTepJu.js";
-import * as react from "react";
+import { t as WithAsChild } from "./as-child-CRRsxi3Y.js";
+import * as _$react from "react";
 import { ComponentProps } from "react";
 
 //#region src/components/media-object/media-object.d.ts
@@ -59,7 +59,7 @@ declare const MediaObject: {
    * </MediaObject.Root>
    * ```
    */
-  readonly Root: react.ForwardRefExoticComponent<Omit<Props, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Root: _$react.ForwardRefExoticComponent<Omit<Props, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * The container for an image or icon to display in the media slot of the media object.
    *
@@ -77,7 +77,7 @@ declare const MediaObject: {
    * </MediaObject.Root>
    * ```
    */
-  readonly Media: react.ForwardRefExoticComponent<Omit<Props, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Media: _$react.ForwardRefExoticComponent<Omit<Props, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * The container for the content slot of a media object.
    *
@@ -95,7 +95,7 @@ declare const MediaObject: {
    * </MediaObject.Root>
    * ```
    */
-  readonly Content: react.ForwardRefExoticComponent<Omit<Props, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Content: _$react.ForwardRefExoticComponent<Omit<Props, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
 };
 //#endregion
 export { MediaObject };

package/dist/multi-select.d.ts

@@ -1,8 +1,8 @@
-import { t as WithAsChild } from "./as-child-XMVTepJu.js";
-import { o as WithValidation } from "./types-DgXUgkpc.js";
-import * as react from "react";
+import { t as WithAsChild } from "./as-child-CRRsxi3Y.js";
+import { o as WithValidation } from "./types-Cq6RWU7Q.js";
+import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as Primitive from "@ariakit/react";
 
 //#region src/components/multi-select/multi-select.d.ts
@@ -121,7 +121,7 @@ declare const MultiSelect: {
       children,
       defaultSelectedValue,
       ...props
-    }: MultiSelectProps): react_jsx_runtime0.JSX.Element;
+    }: MultiSelectProps): _$react_jsx_runtime0.JSX.Element;
     displayName: string;
   };
   /**
@@ -136,7 +136,7 @@ declare const MultiSelect: {
    * </MultiSelect.Trigger>
    * ```
    */
-  readonly Trigger: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & WithValidation & react.RefAttributes<HTMLDivElement>>;
+  readonly Trigger: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & WithValidation & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Renders the selected values as removable tags. Place this inside
    * `MultiSelect.Trigger`, followed by `MultiSelect.Input`.
@@ -161,7 +161,7 @@ declare const MultiSelect: {
     ({
       children,
       lockedValues
-    }: MultiSelectTagValuesProps): react_jsx_runtime0.JSX.Element;
+    }: MultiSelectTagValuesProps): _$react_jsx_runtime0.JSX.Element;
     displayName: string;
   };
   /**
@@ -173,7 +173,7 @@ declare const MultiSelect: {
    * <MultiSelect.Input placeholder="Select items..." />
    * ```
    */
-  readonly Input: react.ForwardRefExoticComponent<Omit<MultiSelectInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+  readonly Input: _$react.ForwardRefExoticComponent<Omit<MultiSelectInputProps, "ref"> & _$react.RefAttributes<HTMLInputElement>>;
   /**
    * The default tag rendered inside `MultiSelect.TagValues` for each selected value.
    * Displays the value label with a remove button and keyboard navigation support.
@@ -186,7 +186,7 @@ declare const MultiSelect: {
    * />
    * ```
    */
-  readonly Tag: react.ForwardRefExoticComponent<Omit<TagProps, "ref"> & react.RefAttributes<HTMLSpanElement>>;
+  readonly Tag: _$react.ForwardRefExoticComponent<Omit<TagProps, "ref"> & _$react.RefAttributes<HTMLSpanElement>>;
   /**
    * Renders a popover that contains multi-select content.
    *
@@ -197,7 +197,7 @@ declare const MultiSelect: {
    * </MultiSelect.Content>
    * ```
    */
-  readonly Content: react.ForwardRefExoticComponent<Omit<MultiSelectContentProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Content: _$react.ForwardRefExoticComponent<Omit<MultiSelectContentProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Renders a sticky footer pinned to the bottom inside `MultiSelect.Content`,
    * with a separator border at the top.
@@ -209,7 +209,7 @@ declare const MultiSelect: {
    * </MultiSelect.ContentFooter>
    * ```
    */
-  readonly ContentFooter: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly ContentFooter: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Renders a selectable item with a checkbox indicator inside a `MultiSelect.Content`.
    *
@@ -218,7 +218,7 @@ declare const MultiSelect: {
    * <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
    * ```
    */
-  readonly Item: react.ForwardRefExoticComponent<Omit<MultiSelectItemProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Item: _$react.ForwardRefExoticComponent<Omit<MultiSelectItemProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Renders a group for MultiSelect.Item elements.
    *
@@ -230,7 +230,7 @@ declare const MultiSelect: {
    * </MultiSelect.Group>
    * ```
    */
-  readonly Group: react.ForwardRefExoticComponent<Omit<MultiSelectGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Group: _$react.ForwardRefExoticComponent<Omit<MultiSelectGroupProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Renders a label in a multi-select group.
    *
@@ -239,7 +239,7 @@ declare const MultiSelect: {
    * <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>
    * ```
    */
-  readonly GroupLabel: react.ForwardRefExoticComponent<Omit<MultiSelectGroupLabelProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly GroupLabel: _$react.ForwardRefExoticComponent<Omit<MultiSelectGroupLabelProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Renders a description below a `MultiSelect.GroupLabel` inside a `MultiSelect.Group`.
    *
@@ -250,7 +250,7 @@ declare const MultiSelect: {
    * </MultiSelect.GroupDescription>
    * ```
    */
-  readonly GroupDescription: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+  readonly GroupDescription: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & _$react.RefAttributes<HTMLParagraphElement>>;
   /**
    * Renders a separator between items or groups.
    *
@@ -259,10 +259,10 @@ declare const MultiSelect: {
    * <MultiSelect.Separator />
    * ```
    */
-  readonly Separator: react.ForwardRefExoticComponent<Omit<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild & {
+  readonly Separator: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement> & WithAsChild & {
     orientation?: "horizontal" | "vertical";
     semantic?: boolean;
-  }, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  }, "ref"> & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Renders a message when no items match the current filter.
    *
@@ -271,7 +271,7 @@ declare const MultiSelect: {
    * <MultiSelect.Empty>No results found</MultiSelect.Empty>
    * ```
    */
-  readonly Empty: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Empty: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
 };
 //#endregion
 export { MultiSelect };

package/dist/multi-select.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-BMH0fD_b.js";import{t as n}from"./slot-D_ZUrdEW.js";import{t as r}from"./compose-refs-DeIsFv68.js";import{n as i}from"./separator-fSV4z0Pq.js";import{t as a}from"./use-prefers-reduced-motion-BiG6QGkf.js";import{createContext as o,forwardRef as s,useCallback as c,useContext as l,useEffect as u,useMemo as d,useRef as f}from"react";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";import{XIcon as g}from"@phosphor-icons/react/X";import{CheckIcon as _}from"@phosphor-icons/react/Check";import*as v from"@ariakit/react";import{LockIcon as y}from"@phosphor-icons/react/Lock";const b=e=>Array.isArray(e)&&e.every(e=>typeof e==`string`),x=[],S=o({current:null}),C=o({current:[]}),w=o({onInputKeyDownRef:{current:void 0},inputRef:{current:null}}),T=({children:e,defaultSelectedValue:t=[],...n})=>{let r=f(null),i=f(void 0),a=f(null),o=f([]),s=d(()=>({onInputKeyDownRef:i,inputRef:a}),[]);return m(S.Provider,{value:r,children:m(w.Provider,{value:s,children:m(C.Provider,{value:o,children:m(v.ComboboxProvider,{defaultSelectedValue:t,...n,children:e})})})})};T.displayName=`MultiSelect`;const E=s(({"aria-invalid":t,className:n,children:i,onKeyDown:a,onMouseDown:o,validation:s,...c},u)=>{let d=l(S),{inputRef:f}=l(w),p=v.useComboboxContext(),h=t!=null&&t!==`false`?`error`:typeof s==`function`?s():s;return m(`div`,{role:`group`,"data-slot":`multi-select-trigger`,className:e(`cursor-text select-none font-sans text-sm`,`border-form bg-form text-strong flex w-full flex-wrap items-center gap-1 rounded-md border px-2 py-1.5`,`has-focus:outline-hidden has-focus-within:ring-4 has-aria-expanded:ring-4`,`has-focus-within:border-accent-600 has-focus-within:ring-focus-accent has-aria-expanded:border-accent-600 has-aria-expanded:ring-focus-accent`,`hover:border-neutral-400`,`data-validation-success:border-success-600 data-validation-success:has-focus-within:border-success-600 data-validation-success:has-focus-within:ring-focus-success data-validation-success:has-aria-expanded:border-success-600 data-validation-success:has-aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:has-focus-within:border-warning-600 data-validation-warning:has-focus-within:ring-focus-warning data-validation-warning:has-aria-expanded:border-warning-600 data-validation-warning:has-aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:has-focus-within:border-danger-600 data-validation-error:has-focus-within:ring-focus-danger data-validation-error:has-aria-expanded:border-danger-600 data-validation-error:has-aria-expanded:ring-focus-danger`,n),"data-validation":h||void 0,onKeyDown:e=>{e.key===`Escape`&&p?.getState().open&&(e.preventDefault(),p.hide()),a?.(e)},onMouseDown:e=>{e.target instanceof HTMLElement&&!e.target.closest(`button, input, [role='option']`)&&(e.preventDefault(),f.current?.focus()),o?.(e)},ref:r(d,u),...c,children:i})});E.displayName=`MultiSelectTrigger`;const D=s(({className:n,value:i,onRemove:a,locked:o=!1,onKeyDown:s,...c},l)=>{let u=f(null);return h(`span`,{ref:r(u,l),role:`option`,"aria-selected":!0,tabIndex:-1,"data-slot":`multi-select-tag`,"data-locked":o||void 0,className:e(`cursor-default bg-neutral-100 border border-neutral-300 rounded-xs text-strong inline-flex items-center gap-1 pl-1.5 pr-1 py-0.5 text-xs font-semibold font-mono`,`focus-visible:outline-hidden focus-visible:border-accent-600/50 focus-visible:ring-3 focus-visible:ring-focus-accent`,n),onKeyDown:e=>{if(o&&(e.key===`Backspace`||e.key===`Delete`)){e.preventDefault(),z(e.currentTarget);return}s?.(e)},...c,children:[i,m(`button`,{type:`button`,"aria-label":`Remove ${i}`,tabIndex:-1,"aria-disabled":o||void 0,className:e(`cursor-pointer hover:bg-neutral-200 hover:text-strong text-strong/25 rounded-sm p-px size-4`,`aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-strong/25`),onClick:e=>{if(e.stopPropagation(),o){let e=u.current;e&&z(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:m(t,{svg:o?m(y,{}):m(g,{weight:`bold`}),className:`size-3`})})]})});D.displayName=`MultiSelectTag`;const O=({children:e,lockedValues:t=[]})=>{let n=v.useComboboxContext(),r=v.useStoreState(n,`selectedValue`),i=(b(r)?r:void 0)??x,a=f(i);a.current=i;let o=l(C);o.current=t;let s=d(()=>new Set(t),[t]),c=f(new Map),{onInputKeyDownRef:h,inputRef:g}=l(w),_=f(new Set);u(()=>()=>{_.current.forEach(cancelAnimationFrame)},[]);let y=e=>{let t;t=requestAnimationFrame(()=>{_.current.delete(t),e()}),_.current.add(t)},S=e=>{if(n){let t=n.getState().selectedValue;if(!b(t))return;n.setSelectedValue(t.filter(t=>t!==e))}},T=e=>{let t=a.current[e];if(t==null)return;let r=c.current.get(t);r&&(r.focus(),n?.show())},E=()=>{g.current?.focus()},O=(e,t)=>{let n=i[t];switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&T(t-1);break;case`ArrowRight`:e.preventDefault(),t<i.length-1?T(t+1):E();break;case`Backspace`:case`Delete`:if(e.preventDefault(),n!=null){if(s.has(n)){let e=c.current.get(n);e&&z(e);break}if(S(n),e.key===`Backspace`)if(t>0){let e=t-1;y(()=>T(e))}else y(()=>{a.current.length>0?T(0):E()});else y(()=>{t<a.current.length?T(t):E()})}break;case`ArrowUp`:case`ArrowDown`:e.preventDefault(),E(),g.current?.dispatchEvent(new KeyboardEvent(`keydown`,{key:e.key,bubbles:!0,cancelable:!0,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,altKey:e.altKey}));break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&E();break}};return h.current=e=>{if(e.key===`ArrowLeft`&&e.currentTarget.selectionStart===0&&e.currentTarget.selectionEnd===0&&i.length>0){e.preventDefault(),T(i.length-1);return}if(e.key===`Backspace`&&e.currentTarget.value===``&&i.length>0){let e=i[i.length-1];if(e!=null)if(o.current.includes(e)){let t=c.current.get(e);t&&z(t)}else S(e)}},m(p,{children:i.map((t,n)=>{let r={value:t,locked:s.has(t),onRemove:()=>{if(s.has(t)){let e=c.current.get(t);e&&z(e);return}S(t)},ref:e=>{e?c.current.set(t,e):c.current.delete(t)},onKeyDown:e=>O(e,n),onClick:()=>T(n)};return e?e(r):m(D,{...r},t)})})};O.displayName=`MultiSelectTagValues`;const k=s(({className:t,onBlur:n,onChange:i,onFocus:a,onKeyDown:o,onValueChange:s,placeholder:c,...u},d)=>{let f=v.useComboboxContext(),{onInputKeyDownRef:p,inputRef:h}=l(w),g=v.useStoreState(f,`selectedValue`),_=((b(g)?g:void 0)?.length??0)>0;return m(v.Combobox,{autoSelect:!0,"data-slot":`multi-select-input`,className:e(`pointer-coarse:text-base min-w-20 flex-1 select-text border-0 bg-transparent text-sm outline-hidden`,`placeholder:select-none placeholder:text-placeholder`,t),onChange:e=>{s?.(e.target.value),i?.(e)},onKeyDown:e=>{p.current?.(e),o?.(e)},onBlur:e=>{e.relatedTarget instanceof HTMLElement&&e.relatedTarget.closest(`[data-slot="multi-select-tag"]`)&&f?.show(),n?.(e)},onFocus:e=>{f?.show(),a?.(e)},placeholder:_?void 0:c,ref:r(h,d),...u})});k.displayName=`MultiSelectInput`;const A=s(({asChild:t=!1,backdrop:r=!1,children:i,className:a,modal:o=!0,portalElement:s,sameWidth:u=!0,unmountOnHide:d=!0,...f},p)=>{let h=l(S),g=c(()=>h.current?.getBoundingClientRect()??null,[h]),_=c(e=>typeof s==`function`?s(e):s??h.current?.closest(`[data-mantle-modal-content]`)??e.ownerDocument.body,[s,h]),y=c(e=>!(e.target instanceof Node&&h.current?.contains(e.target)),[h]);return m(v.ComboboxPopover,{"data-slot":`multi-select-content`,className:e(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden overscroll-y-none rounded-md border shadow-md pt-1 pb-1 has-data-content-footer:pb-0 font-sans flex flex-col gap-px focus:outline-hidden`,a),backdrop:r,getAnchorRect:g,gutter:4,hideOnInteractOutside:y,modal:o,portalElement:_,ref:p,render:t?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,sameWidth:u,unmountOnHide:d,...f,children:i})});A.displayName=`MultiSelectContent`;const j=s(({asChild:r=!1,children:i,className:a,focusOnHover:o=!0,value:s,onClick:c,...u},d)=>{let f=l(C),p=s!=null&&f.current.includes(s);return h(v.ComboboxItem,{"data-slot":`multi-select-item`,className:e(`mx-1 cursor-pointer rounded-md px-2 py-1.5 text-strong text-sm font-normal flex min-w-0 items-center justify-between gap-2`,`[[role=option]+&]:mt-px`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,`aria-selected:bg-selected-menu-item aria-selected:data-active-item:bg-active-selected-menu-item`,a),focusOnHover:o,onClick:e=>{if(p){e.preventDefault();return}c?.(e)},ref:d,render:r?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...u,children:[i,m(v.ComboboxItemCheck,{children:m(t,{svg:m(_,{weight:`bold`}),className:`size-4 text-accent-600`})})]})});j.displayName=`MultiSelectItem`;const M=s(({asChild:e=!1,children:t,...r},i)=>m(v.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:i,render:e?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,...r,children:t}));M.displayName=`MultiSelectGroup`;const N=s(({asChild:t=!1,children:r,className:i,...a},o)=>m(v.ComboboxGroupLabel,{"data-slot":`multi-select-group-label`,className:e(`text-muted px-2 py-1 text-xs font-medium`,i),ref:o,render:t?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,...a,children:r}));N.displayName=`MultiSelectGroupLabel`;const P=s(({className:t,children:n,...r},i)=>m(`p`,{"data-slot":`multi-select-group-description`,className:e(`text-muted px-2 pb-1 text-xs`,t),ref:i,...r,children:n}));P.displayName=`MultiSelectGroupDescription`;const F=s(({className:t,...n},r)=>m(i,{"data-slot":`multi-select-separator`,ref:r,className:e(`my-1 w-auto`,t),...n}));F.displayName=`MultiSelectSeparator`;const I=s(({className:t,children:n,...r},i)=>m(`div`,{"data-slot":`multi-select-empty`,className:e(`mx-1 text-muted px-2 py-6 text-center text-sm`,t),ref:i,role:`presentation`,...r,children:n}));I.displayName=`MultiSelectEmpty`;const L=s(({className:t,children:n,...r},i)=>m(`div`,{ref:i,"data-slot":`multi-select-content-footer`,"data-content-footer":!0,className:e(`bg-popover sticky bottom-0 border-t border-popover`,t),...r,children:n}));L.displayName=`MultiSelectContentFooter`;const R={Root:T,Trigger:E,TagValues:O,Input:k,Tag:D,Content:A,ContentFooter:L,Item:j,Group:M,GroupLabel:N,GroupDescription:P,Separator:F,Empty:I};function z(e){a()||e.animate([{transform:`translateX(0)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(0)`}],{duration:300,easing:`ease-in-out`})}export{R as MultiSelect};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-BMH0fD_b.js";import{t as n}from"./slot-D_ZUrdEW.js";import{t as r}from"./compose-refs-DeIsFv68.js";import{n as i}from"./separator-BuP5aENE.js";import{t as a}from"./use-prefers-reduced-motion-BcwST13S.js";import{createContext as o,forwardRef as s,useCallback as c,useContext as l,useEffect as u,useMemo as d,useRef as f}from"react";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";import{XIcon as g}from"@phosphor-icons/react/X";import{CheckIcon as _}from"@phosphor-icons/react/Check";import*as v from"@ariakit/react";import{LockIcon as y}from"@phosphor-icons/react/Lock";const b=e=>Array.isArray(e)&&e.every(e=>typeof e==`string`),x=[],S=o({current:null}),C=o({current:[]}),w=o({onInputKeyDownRef:{current:void 0},inputRef:{current:null}}),T=({children:e,defaultSelectedValue:t=[],...n})=>{let r=f(null),i=f(void 0),a=f(null),o=f([]),s=d(()=>({onInputKeyDownRef:i,inputRef:a}),[]);return m(S.Provider,{value:r,children:m(w.Provider,{value:s,children:m(C.Provider,{value:o,children:m(v.ComboboxProvider,{defaultSelectedValue:t,...n,children:e})})})})};T.displayName=`MultiSelect`;const E=s(({"aria-invalid":t,className:n,children:i,onKeyDown:a,onMouseDown:o,validation:s,...c},u)=>{let d=l(S),{inputRef:f}=l(w),p=v.useComboboxContext(),h=t!=null&&t!==`false`?`error`:typeof s==`function`?s():s;return m(`div`,{role:`group`,"data-slot":`multi-select-trigger`,className:e(`cursor-text select-none font-sans text-sm`,`border-form bg-form text-strong flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border px-3 py-1 has-[[data-slot=multi-select-tag]]:px-1`,`has-focus:outline-hidden has-focus-within:ring-4 has-aria-expanded:ring-4`,`has-focus-within:border-accent-600 has-focus-within:ring-focus-accent has-aria-expanded:border-accent-600 has-aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:has-focus-within:border-success-600 data-validation-success:has-focus-within:ring-focus-success data-validation-success:has-aria-expanded:border-success-600 data-validation-success:has-aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:has-focus-within:border-warning-600 data-validation-warning:has-focus-within:ring-focus-warning data-validation-warning:has-aria-expanded:border-warning-600 data-validation-warning:has-aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:has-focus-within:border-danger-600 data-validation-error:has-focus-within:ring-focus-danger data-validation-error:has-aria-expanded:border-danger-600 data-validation-error:has-aria-expanded:ring-focus-danger`,n),"data-validation":h||void 0,onKeyDown:e=>{e.key===`Escape`&&p?.getState().open&&(e.preventDefault(),p.hide()),a?.(e)},onMouseDown:e=>{e.target instanceof HTMLElement&&!e.target.closest(`button, input, [role='option']`)&&(e.preventDefault(),f.current?.focus()),o?.(e)},ref:r(d,u),...c,children:i})});E.displayName=`MultiSelectTrigger`;const D=s(({className:n,value:i,onRemove:a,locked:o=!1,onKeyDown:s,...c},l)=>{let u=f(null);return h(`span`,{ref:r(u,l),role:`option`,"aria-selected":!0,tabIndex:-1,"data-slot":`multi-select-tag`,"data-locked":o||void 0,className:e(`cursor-default bg-neutral-500/10 border border-neutral-500/20 rounded-xs text-strong inline-flex items-center gap-1 pl-2 pr-0.5 py-0.5 text-sm font-normal`,`focus-visible:outline-hidden focus-visible:border-accent-600/50 focus-visible:ring-3 focus-visible:ring-focus-accent`,n),onKeyDown:e=>{if(o&&(e.key===`Backspace`||e.key===`Delete`)){e.preventDefault(),z(e.currentTarget);return}s?.(e)},...c,children:[i,m(`button`,{type:`button`,"aria-label":`Remove ${i}`,tabIndex:-1,"aria-disabled":o||void 0,className:e(`cursor-pointer text-strong/40 hover:bg-neutral-500/15 hover:text-strong rounded-xs p-0.5`,`aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-strong/40`),onClick:e=>{if(e.stopPropagation(),o){let e=u.current;e&&z(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:m(t,{svg:o?m(y,{}):m(g,{weight:`bold`}),className:`size-4`})})]})});D.displayName=`MultiSelectTag`;const O=({children:e,lockedValues:t=[]})=>{let n=v.useComboboxContext(),r=v.useStoreState(n,`selectedValue`),i=(b(r)?r:void 0)??x,a=f(i);a.current=i;let o=l(C);o.current=t;let s=d(()=>new Set(t),[t]),c=f(new Map),{onInputKeyDownRef:h,inputRef:g}=l(w),_=f(new Set);u(()=>()=>{_.current.forEach(cancelAnimationFrame)},[]);let y=e=>{let t;t=requestAnimationFrame(()=>{_.current.delete(t),e()}),_.current.add(t)},S=e=>{if(n){let t=n.getState().selectedValue;if(!b(t))return;n.setSelectedValue(t.filter(t=>t!==e))}},T=e=>{let t=a.current[e];if(t==null)return;let r=c.current.get(t);r&&(r.focus(),n?.show())},E=()=>{g.current?.focus()},O=(e,t)=>{let n=i[t];switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&T(t-1);break;case`ArrowRight`:e.preventDefault(),t<i.length-1?T(t+1):E();break;case`Backspace`:case`Delete`:if(e.preventDefault(),n!=null){if(s.has(n)){let e=c.current.get(n);e&&z(e);break}if(S(n),e.key===`Backspace`)if(t>0){let e=t-1;y(()=>T(e))}else y(()=>{a.current.length>0?T(0):E()});else y(()=>{t<a.current.length?T(t):E()})}break;case`ArrowUp`:case`ArrowDown`:e.preventDefault(),E(),g.current?.dispatchEvent(new KeyboardEvent(`keydown`,{key:e.key,bubbles:!0,cancelable:!0,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,altKey:e.altKey}));break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&E();break}};return h.current=e=>{if(e.key===`ArrowLeft`&&e.currentTarget.selectionStart===0&&e.currentTarget.selectionEnd===0&&i.length>0){e.preventDefault(),T(i.length-1);return}if(e.key===`Backspace`&&e.currentTarget.value===``&&i.length>0){let e=i[i.length-1];if(e!=null)if(o.current.includes(e)){let t=c.current.get(e);t&&z(t)}else S(e)}},m(p,{children:i.map((t,n)=>{let r={value:t,locked:s.has(t),onRemove:()=>{if(s.has(t)){let e=c.current.get(t);e&&z(e);return}S(t)},ref:e=>{e?c.current.set(t,e):c.current.delete(t)},onKeyDown:e=>O(e,n),onClick:()=>T(n)};return e?e(r):m(D,{...r},t)})})};O.displayName=`MultiSelectTagValues`;const k=s(({className:t,onBlur:n,onChange:i,onFocus:a,onKeyDown:o,onValueChange:s,placeholder:c,...u},d)=>{let f=v.useComboboxContext(),{onInputKeyDownRef:p,inputRef:h}=l(w),g=v.useStoreState(f,`selectedValue`),_=((b(g)?g:void 0)?.length??0)>0;return m(v.Combobox,{autoSelect:!0,"data-slot":`multi-select-input`,className:e(`pointer-coarse:text-base min-w-20 flex-1 select-text border-0 bg-transparent text-sm outline-hidden`,`placeholder:select-none placeholder:text-placeholder`,t),onChange:e=>{s?.(e.target.value),i?.(e)},onKeyDown:e=>{p.current?.(e),o?.(e)},onBlur:e=>{e.relatedTarget instanceof HTMLElement&&e.relatedTarget.closest(`[data-slot="multi-select-tag"]`)&&f?.show(),n?.(e)},onFocus:e=>{f?.show(),a?.(e)},placeholder:_?void 0:c,ref:r(h,d),...u})});k.displayName=`MultiSelectInput`;const A=s(({asChild:t=!1,backdrop:r=!1,children:i,className:a,modal:o=!0,portalElement:s,sameWidth:u=!0,unmountOnHide:d=!0,...f},p)=>{let h=l(S),g=c(()=>h.current?.getBoundingClientRect()??null,[h]),_=c(e=>typeof s==`function`?s(e):s??h.current?.closest(`[data-mantle-modal-content]`)??e.ownerDocument.body,[s,h]),y=c(e=>!(e.target instanceof Node&&h.current?.contains(e.target)),[h]);return m(v.ComboboxPopover,{"data-slot":`multi-select-content`,className:e(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden overscroll-y-none rounded-md border shadow-md pt-1 pb-1 has-data-content-footer:pb-0 font-sans flex flex-col gap-px focus:outline-hidden`,a),backdrop:r,getAnchorRect:g,gutter:4,hideOnInteractOutside:y,modal:o,portalElement:_,ref:p,render:t?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,sameWidth:u,unmountOnHide:d,...f,children:i})});A.displayName=`MultiSelectContent`;const j=s(({asChild:r=!1,children:i,className:a,focusOnHover:o=!0,value:s,onClick:c,...u},d)=>{let f=l(C),p=s!=null&&f.current.includes(s);return h(v.ComboboxItem,{"data-slot":`multi-select-item`,className:e(`relative mx-1 cursor-pointer rounded-md pl-2 pr-8 py-1.5 text-strong text-sm font-normal flex min-w-0 items-center gap-2`,`[[role=option]+&]:mt-px`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,`aria-selected:bg-selected-menu-item aria-selected:data-active-item:bg-active-selected-menu-item`,a),focusOnHover:o,onClick:e=>{if(p){e.preventDefault();return}c?.(e)},ref:d,render:r?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...u,children:[i,m(v.ComboboxItemCheck,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:m(t,{svg:m(_,{weight:`bold`}),className:`size-4 text-accent-600`})})]})});j.displayName=`MultiSelectItem`;const M=s(({asChild:e=!1,children:t,...r},i)=>m(v.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:i,render:e?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,...r,children:t}));M.displayName=`MultiSelectGroup`;const N=s(({asChild:t=!1,children:r,className:i,...a},o)=>m(v.ComboboxGroupLabel,{"data-slot":`multi-select-group-label`,className:e(`text-muted px-2 py-1 text-xs font-medium`,i),ref:o,render:t?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,...a,children:r}));N.displayName=`MultiSelectGroupLabel`;const P=s(({className:t,children:n,...r},i)=>m(`p`,{"data-slot":`multi-select-group-description`,className:e(`text-muted px-2 pb-1 text-xs`,t),ref:i,...r,children:n}));P.displayName=`MultiSelectGroupDescription`;const F=s(({className:t,...n},r)=>m(i,{"data-slot":`multi-select-separator`,ref:r,className:e(`my-1 w-auto`,t),...n}));F.displayName=`MultiSelectSeparator`;const I=s(({className:t,children:n,...r},i)=>m(`div`,{"data-slot":`multi-select-empty`,className:e(`mx-1 text-muted px-2 py-6 text-center text-sm`,t),ref:i,role:`presentation`,...r,children:n}));I.displayName=`MultiSelectEmpty`;const L=s(({className:t,children:n,...r},i)=>m(`div`,{ref:i,"data-slot":`multi-select-content-footer`,"data-content-footer":!0,className:e(`bg-popover sticky bottom-0 border-t border-popover`,t),...r,children:n}));L.displayName=`MultiSelectContentFooter`;const R={Root:T,Trigger:E,TagValues:O,Input:k,Tag:D,Content:A,ContentFooter:L,Item:j,Group:M,GroupLabel:N,GroupDescription:P,Separator:F,Empty:I};function z(e){a()||e.animate([{transform:`translateX(0)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(0)`}],{duration:300,easing:`ease-in-out`})}export{R as MultiSelect};
 //# sourceMappingURL=multi-select.js.map