@elmeragroup/fuse 0.1.0-canary.1

package/components/combobox/combobox.js

@@ -0,0 +1,269 @@
+"use client";
+import { CaretDown } from "../../icons/generated/caret-down.js";
+import { cn } from "../../styles/cn.js";
+import { withinStateFaceClass, withinStateFaceControlClass } from "../../styles/state-face.js";
+import { withinFocusRingClass, withinFocusRingControlClass } from "../../styles/utils.js";
+import { useLocale } from "../../intl/locale-context.js";
+import { useLocalizedStrings } from "../../hooks/use-localized-strings.js";
+import { useMergedRefs } from "../../hooks/use-merged-refs.js";
+import { definedProps } from "../../internal/defined-props.js";
+import { controlMd } from "../../styles/control-size-md.js";
+import { Button } from "../button/button.js";
+import { mergeClassName } from "../../styles/merge-class-name.js";
+import { menuGroupLabelClass, menuItemClass, menuItemIndicatorClass, menuSeparatorClass, overlayPositionerClass, overlayTimedPopupClass } from "../overlay/overlay-classes.js";
+import { X } from "../../icons/generated/x.js";
+import { OverlayPortal } from "../overlay/overlay-portal.js";
+import { Check } from "../../icons/generated/check.js";
+import { isTextValueNode } from "../../internal/is-text-node.js";
+import { compactCornerClass } from "../../styles/corner-radius.js";
+import { InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupRoot } from "../input-group/input-group.js";
+import { ChipIndexCommit, ChipIndexContext, createChipIndexRegistry, useChipIndex } from "./hooks/use-chip-index.js";
+import { comboboxStrings } from "./intl/index.js";
+import { createContext, useContext, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react";
+//#region src/components/combobox/combobox.tsx
+const ComboboxItemToStringLabelContext = createContext(void 0);
+function ComboboxRoot(props) {
+	const { locale } = useLocale();
+	const itemToStringLabel = props.itemToStringLabel;
+	return /* @__PURE__ */ jsx(ComboboxItemToStringLabelContext.Provider, {
+		value: itemToStringLabel === void 0 ? void 0 : (itemValue) => {
+			return itemToStringLabel(itemValue);
+		},
+		children: /* @__PURE__ */ jsx(Combobox.Root, {
+			...props,
+			locale
+		})
+	});
+}
+function ComboboxValue({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Value, {
+		"data-slot": "combobox-value",
+		...props
+	});
+}
+function ComboboxTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
+		"data-slot": "combobox-trigger",
+		className: mergeClassName(className, "[&_svg:not([class*='size-'])]:size-4"),
+		...definedProps(props),
+		children: [children, /* @__PURE__ */ jsx(CaretDown, { className: "ease-in-out pointer-events-none size-4 text-muted-foreground transition-transform duration-200 in-data-popup-open:rotate-180" })]
+	});
+}
+function ComboboxClear({ className, label, "aria-label": ariaLabel, ...props }) {
+	const strings = useLocalizedStrings(comboboxStrings);
+	const accessibleName = ariaLabel ?? label ?? strings.format("clear");
+	return /* @__PURE__ */ jsx(Combobox.Clear, {
+		"data-slot": "combobox-clear",
+		render: /* @__PURE__ */ jsx(InputGroupButton, {
+			variant: "ghost",
+			size: "icon-sm",
+			"aria-label": accessibleName
+		}),
+		"aria-label": accessibleName,
+		className: mergeClassName(className),
+		...definedProps(props),
+		children: /* @__PURE__ */ jsx(X, { className: "pointer-events-none" })
+	});
+}
+function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, clearLabel, triggerLabel, ...props }) {
+	const strings = useLocalizedStrings(comboboxStrings);
+	return /* @__PURE__ */ jsxs(InputGroupRoot, {
+		className: cn("w-auto", className),
+		children: [
+			/* @__PURE__ */ jsx(Combobox.Input, {
+				disabled,
+				render: /* @__PURE__ */ jsx(InputGroupInput, {}),
+				...definedProps(props)
+			}),
+			/* @__PURE__ */ jsxs(InputGroupAddon, {
+				align: "inline-end",
+				children: [showTrigger ? /* @__PURE__ */ jsx(InputGroupButton, {
+					size: "icon-sm",
+					variant: "ghost",
+					"aria-label": triggerLabel ?? strings.format("toggle"),
+					"aria-labelledby": "",
+					render: /* @__PURE__ */ jsx(ComboboxTrigger, {}),
+					"data-slot": "input-group-button",
+					className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent",
+					disabled
+				}) : null, showClear ? /* @__PURE__ */ jsx(ComboboxClear, {
+					disabled,
+					label: clearLabel
+				}) : null]
+			}),
+			children
+		]
+	});
+}
+function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, container, ...props }) {
+	return /* @__PURE__ */ jsx(OverlayPortal, {
+		portal: Combobox.Portal,
+		container,
+		children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			side,
+			sideOffset,
+			align,
+			alignOffset,
+			anchor,
+			className: overlayPositionerClass,
+			children: /* @__PURE__ */ jsx(Combobox.Popup, {
+				"data-slot": "combobox-content",
+				"data-external-anchor": anchor ? "true" : "false",
+				className: mergeClassName(className, overlayTimedPopupClass, "group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden has-[>[data-slot=input-group]]:px-1 has-[>[data-slot=input-group]]:pt-1.5 data-[external-anchor=true]:min-w-(--anchor-width) *:data-[slot=input-group]:h-(--control-h-sm) *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none"),
+				...props
+			})
+		})
+	});
+}
+function ComboboxList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.List, {
+		"data-slot": "combobox-list",
+		className: mergeClassName(className, "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0"),
+		...props
+	});
+}
+function ComboboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox.Item, {
+		"data-slot": "combobox-item",
+		className: mergeClassName(className, menuItemClass, "w-full pr-8 pl-2 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground"),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+			render: /* @__PURE__ */ jsx("span", { className: cn(menuItemIndicatorClass, "size-4") }),
+			children: /* @__PURE__ */ jsx(Check, { className: "pointer-events-none" })
+		})]
+	});
+}
+function ComboboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Group, {
+		"data-slot": "combobox-group",
+		className: mergeClassName(className),
+		...props
+	});
+}
+function ComboboxLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.GroupLabel, {
+		"data-slot": "combobox-label",
+		className: mergeClassName(className, menuGroupLabelClass),
+		...props
+	});
+}
+function ComboboxCollection({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Collection, {
+		"data-slot": "combobox-collection",
+		...props
+	});
+}
+function ComboboxEmpty({ className, children, ...props }) {
+	const strings = useLocalizedStrings(comboboxStrings);
+	return /* @__PURE__ */ jsx(Combobox.Empty, {
+		"data-slot": "combobox-empty",
+		className: mergeClassName(className, "text-sm hidden w-full justify-center py-2 text-center text-muted-foreground group-data-empty/combobox-content:flex"),
+		...props,
+		children: children ?? strings.format("empty")
+	});
+}
+function ComboboxSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Separator, {
+		"data-slot": "combobox-separator",
+		className: mergeClassName(className, menuSeparatorClass),
+		...props
+	});
+}
+function ComboboxChips({ className, ...props }) {
+	const [registry] = useState(createChipIndexRegistry);
+	return /* @__PURE__ */ jsxs(ChipIndexContext.Provider, {
+		value: registry,
+		children: [/* @__PURE__ */ jsx(Combobox.Value, { children: (selected) => /* @__PURE__ */ jsx(ChipIndexCommit, { selected }) }), /* @__PURE__ */ jsx(Combobox.Chips, {
+			"data-slot": "combobox-chips",
+			className: mergeClassName(className, controlMd.minHeight(), controlMd.inset(), "text-sm shadow-xs flex flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding py-1.5 transition-[color,box-shadow] has-data-[slot=combobox-chip]:px-1.5", withinFocusRingClass, withinStateFaceClass),
+			...props
+		})]
+	});
+}
+function chipItemName(children) {
+	if (!isTextValueNode(children)) return "";
+	return children.toString().trim();
+}
+function chipValueAt(selected, index) {
+	if (!Array.isArray(selected)) return selected;
+	return selected[index] ?? null;
+}
+function stringifyChipValue(value, itemToStringLabel) {
+	if (value == null || value === false || value === true) return "";
+	if (itemToStringLabel !== void 0) return itemToStringLabel(value).trim();
+	return chipItemName(value);
+}
+function ComboboxChip({ ref, className, children, showRemove = true, removeLabel, ...props }) {
+	const { ref: indexRef, index } = useChipIndex();
+	const mergedRef = useMergedRefs(ref, indexRef);
+	return /* @__PURE__ */ jsxs(Combobox.Chip, {
+		ref: mergedRef,
+		"data-slot": "combobox-chip",
+		className: mergeClassName(className, "text-xs font-medium flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 whitespace-nowrap text-foreground has-data-[slot=combobox-chip-remove]:pr-0"),
+		...props,
+		children: [children, showRemove ? /* @__PURE__ */ jsx(ComboboxChipRemoveLabel, {
+			removeLabel,
+			chipChildren: children,
+			index
+		}) : null]
+	});
+}
+function ComboboxChipRemoveLabel({ removeLabel, chipChildren, index }) {
+	const strings = useLocalizedStrings(comboboxStrings);
+	const itemToStringLabel = useContext(ComboboxItemToStringLabelContext);
+	return /* @__PURE__ */ jsx(Combobox.Value, { children: (selected) => {
+		const item = chipItemName(chipChildren) || stringifyChipValue(chipValueAt(selected, index), itemToStringLabel);
+		const accessibleName = removeLabel ?? strings.format("removeItem", { item });
+		return /* @__PURE__ */ jsx(ComboboxChipRemove, { label: accessibleName });
+	} });
+}
+function ComboboxChipRemove({ label }) {
+	return /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+		"data-slot": "combobox-chip-remove",
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon-sm",
+			"aria-label": label
+		}),
+		className: cn("-ml-1 opacity-50 enabled-hover:opacity-100", compactCornerClass),
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx(X, { className: "pointer-events-none" })
+	});
+}
+function ComboboxChipsInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Input, {
+		"data-slot": "combobox-chip-input",
+		"data-focus-ring-control": "",
+		className: mergeClassName(className, "min-w-16 flex-1 outline-none", withinFocusRingControlClass, withinStateFaceControlClass),
+		...definedProps(props)
+	});
+}
+/**
+* Typed ref helper to anchor `Combobox.Content` to an external element
+* (e.g. the `Combobox.Chips` container or an `InputGroup.Root`).
+*/
+function useComboboxAnchor() {
+	return useRef(null);
+}
+ComboboxRoot.displayName = "Combobox.Root";
+ComboboxInput.displayName = "Combobox.Input";
+ComboboxTrigger.displayName = "Combobox.Trigger";
+ComboboxClear.displayName = "Combobox.Clear";
+ComboboxContent.displayName = "Combobox.Content";
+ComboboxList.displayName = "Combobox.List";
+ComboboxItem.displayName = "Combobox.Item";
+ComboboxGroup.displayName = "Combobox.Group";
+ComboboxLabel.displayName = "Combobox.Label";
+ComboboxCollection.displayName = "Combobox.Collection";
+ComboboxEmpty.displayName = "Combobox.Empty";
+ComboboxSeparator.displayName = "Combobox.Separator";
+ComboboxChips.displayName = "Combobox.Chips";
+ComboboxChip.displayName = "Combobox.Chip";
+ComboboxChipsInput.displayName = "Combobox.ChipsInput";
+ComboboxValue.displayName = "Combobox.Value";
+//#endregion
+export { ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };
+
+//# sourceMappingURL=combobox.js.map

package/components/combobox/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","names":["ComboboxPrimitive"],"sources":["../../../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, useRef, useState } from \"react\";\nimport type { ComponentProps, ReactElement, ReactNode, RefObject } from \"react\";\n\n// Subpath import (`@base-ui/react/combobox`) type-checks but crashes at runtime with a\n// null React context. Keep the package-root import until upstream fixes it.\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\";\nimport type { ComboboxRoot as ComboboxRootType } from \"@base-ui/react\";\n\nimport { useLocalizedStrings } from \"../../hooks/use-localized-strings\";\nimport { useMergedRefs } from \"../../hooks/use-merged-refs\";\nimport { CaretDown } from \"../../icons/generated/caret-down\";\nimport { Check } from \"../../icons/generated/check\";\nimport { X } from \"../../icons/generated/x\";\nimport { definedProps } from \"../../internal/defined-props\";\nimport { isTextValueNode } from \"../../internal/is-text-node\";\nimport { useLocale } from \"../../intl/locale-context\";\nimport { cn } from \"../../styles/cn\";\nimport { controlMd } from \"../../styles/control-size-md\";\nimport { compactCornerClass } from \"../../styles/corner-radius\";\nimport { mergeClassName } from \"../../styles/merge-class-name\";\nimport { withinStateFaceClass, withinStateFaceControlClass } from \"../../styles/state-face\";\nimport { withinFocusRingClass, withinFocusRingControlClass } from \"../../styles/utils\";\nimport { Button } from \"../button/button\";\nimport {\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupRoot,\n} from \"../input-group/input-group\";\nimport {\n  menuGroupLabelClass,\n  menuItemClass,\n  menuItemIndicatorClass,\n  menuSeparatorClass,\n  overlayPositionerClass,\n  overlayTimedPopupClass,\n} from \"../overlay/overlay-classes\";\nimport { OverlayPortal } from \"../overlay/overlay-portal\";\nimport type { OverlayContainerProps, OverlayPositionerProps } from \"../overlay/overlay-props\";\nimport {\n  ChipIndexCommit,\n  ChipIndexContext,\n  createChipIndexRegistry,\n  useChipIndex,\n} from \"./hooks/use-chip-index\";\nimport { comboboxStrings } from \"./intl\";\n\ntype ComboboxItemLabelFn = (itemValue: ReactNode) => string;\n\nconst ComboboxItemToStringLabelContext = createContext<ComboboxItemLabelFn | undefined>(undefined);\n\nexport type ComboboxRootProps<Value = unknown, Multiple extends boolean | undefined = false> = Omit<\n  ComboboxRootType.Props<Value, Multiple>,\n  \"locale\"\n>;\n\nexport function ComboboxRoot<Value = unknown, Multiple extends boolean | undefined = false>(\n  props: ComboboxRootProps<Value, Multiple>\n): ReactElement {\n  const { locale } = useLocale();\n  const itemToStringLabel = props.itemToStringLabel;\n  return (\n    <ComboboxItemToStringLabelContext.Provider\n      value={\n        itemToStringLabel === undefined\n          ? undefined\n          : (itemValue) => {\n              // SAFETY: Chip only calls this with the selected value from this Root,\n              // which is `Value`.\n              return itemToStringLabel(itemValue as Value);\n            }\n      }>\n      <ComboboxPrimitive.Root {...props} locale={locale} />\n    </ComboboxItemToStringLabelContext.Provider>\n  );\n}\n\nexport function ComboboxValue({ ...props }: ComponentProps<typeof ComboboxPrimitive.Value>): ReactElement {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\nexport function ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof ComboboxPrimitive.Trigger>): ReactElement {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={mergeClassName(className, \"[&_svg:not([class*='size-'])]:size-4\")}\n      {...definedProps(props)}>\n      {children}\n      <CaretDown className=\"ease-in-out pointer-events-none size-4 text-muted-foreground transition-transform duration-200 in-data-popup-open:rotate-180\" />\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nexport type ComboboxClearProps = ComponentProps<typeof ComboboxPrimitive.Clear> & {\n  /**\n   * Accessible name for the icon-only clear button. An explicit `aria-label` wins over it;\n   * both default to the locale dictionary.\n   */\n  label?: string;\n};\n\nexport function ComboboxClear({\n  className,\n  label,\n  \"aria-label\": ariaLabel,\n  ...props\n}: ComboboxClearProps): ReactElement {\n  const strings = useLocalizedStrings(comboboxStrings);\n  // The render element's props win in Base UI's merge, so the resolved name must live there.\n  const accessibleName = ariaLabel ?? label ?? strings.format(\"clear\");\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-sm\" aria-label={accessibleName} />}\n      aria-label={accessibleName}\n      className={mergeClassName(className)}\n      {...definedProps(props)}>\n      <X className=\"pointer-events-none\" />\n    </ComboboxPrimitive.Clear>\n  );\n}\n\nexport type ComboboxInputProps = Omit<\n  ComponentProps<typeof ComboboxPrimitive.Input>,\n  \"children\" | \"className\"\n> & {\n  /**\n   * Renders the caret trigger button in the inline-end addon.\n   * Hidden at runtime whenever a clear button is present in the group.\n   * @default true\n   */\n  showTrigger?: boolean;\n  /**\n   * Renders `Combobox.Clear` in the inline-end addon.\n   * @default false\n   */\n  showClear?: boolean;\n  /**\n   * Disables the input and the trigger/clear buttons. Combines with `disabled` on\n   * `Combobox.Root` and `Field.Root`: any of the three disables the input.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Extra classes, applied to the outer InputGroup (`w-auto`), not the input element.\n   */\n  className?: string;\n  /**\n   * Rendered inside the InputGroup after the addon (extra addons, hidden inputs).\n   */\n  children?: ReactNode;\n  /**\n   * Accessible name for the auto-rendered Clear button when `showClear`. Defaults to\n   * the locale dictionary.\n   */\n  clearLabel?: string;\n  /**\n   * Accessible name for the auto-rendered caret trigger when `showTrigger`. Defaults to\n   * the locale dictionary.\n   */\n  triggerLabel?: string;\n};\n\nexport function ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  clearLabel,\n  triggerLabel,\n  ...props\n}: ComboboxInputProps): ReactElement {\n  const strings = useLocalizedStrings(comboboxStrings);\n  return (\n    <InputGroupRoot className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input disabled={disabled} render={<InputGroupInput />} {...definedProps(props)} />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger ? (\n          <InputGroupButton\n            size=\"icon-sm\"\n            variant=\"ghost\"\n            aria-label={triggerLabel ?? strings.format(\"toggle\")}\n            // Field.Label labelledby would win over aria-label. An empty list overrides it,\n            // so the caret stays dictionary `toggle`.\n            aria-labelledby=\"\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        ) : null}\n        {showClear ? <ComboboxClear disabled={disabled} label={clearLabel} /> : null}\n      </InputGroupAddon>\n      {children}\n    </InputGroupRoot>\n  );\n}\n\nexport type ComboboxContentProps = ComponentProps<typeof ComboboxPrimitive.Popup> &\n  OverlayPositionerProps<ComponentProps<typeof ComboboxPrimitive.Positioner>> & {\n    /**\n     * Element, ref, or virtual element to position against. Pass `useComboboxAnchor()`'s\n     * ref; also flips `data-external-anchor` on the popup.\n     */\n    anchor?: ComponentProps<typeof ComboboxPrimitive.Positioner>[\"anchor\"];\n  } & OverlayContainerProps;\n\nexport function ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  container,\n  ...props\n}: ComboboxContentProps): ReactElement | null {\n  return (\n    <OverlayPortal portal={ComboboxPrimitive.Portal} container={container}>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className={overlayPositionerClass}>\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-external-anchor={anchor ? \"true\" : \"false\"}\n          className={mergeClassName(\n            className,\n            overlayTimedPopupClass,\n            // Popup padding insets a search group; a child margin plus the group's w-full\n            // overflowed the box. Scope it to popups that directly own one, so a plain list\n            // keeps the menu family's single p-1 inset instead of double-insetting.\n            \"group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden has-[>[data-slot=input-group]]:px-1 has-[>[data-slot=input-group]]:pt-1.5 data-[external-anchor=true]:min-w-(--anchor-width) *:data-[slot=input-group]:h-(--control-h-sm) *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none\"\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </OverlayPortal>\n  );\n}\n\nexport function ComboboxList({\n  className,\n  ...props\n}: ComponentProps<typeof ComboboxPrimitive.List>): ReactElement {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={mergeClassName(\n        className,\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0\"\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof ComboboxPrimitive.Item>): ReactElement {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      // oxlint-disable-next-line elmera/no-hardcoded-density-metrics -- option padding is menu layout, not a control rung\n      className={mergeClassName(\n        className,\n        menuItemClass,\n        // oxlint-disable-next-line elmera/no-local-focus-ring -- the highlight face menuItemClass leaves to the family; base-ui spells it `data-highlighted:` on listbox options\n        \"w-full pr-8 pl-2 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground\"\n      )}\n      {...props}>\n      {children}\n      <ComboboxPrimitive.ItemIndicator render={<span className={cn(menuItemIndicatorClass, \"size-4\")} />}>\n        <Check className=\"pointer-events-none\" />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxGroup({\n  className,\n  ...props\n}: ComponentProps<typeof ComboboxPrimitive.Group>): ReactElement {\n  return (\n    <ComboboxPrimitive.Group data-slot=\"combobox-group\" className={mergeClassName(className)} {...props} />\n  );\n}\n\nexport function ComboboxLabel({\n  className,\n  ...props\n}: ComponentProps<typeof ComboboxPrimitive.GroupLabel>): ReactElement {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={mergeClassName(className, menuGroupLabelClass)}\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxCollection({\n  ...props\n}: ComponentProps<typeof ComboboxPrimitive.Collection>): ReactElement {\n  return <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />;\n}\n\nexport function ComboboxEmpty({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof ComboboxPrimitive.Empty>): ReactElement {\n  const strings = useLocalizedStrings(comboboxStrings);\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={mergeClassName(\n        className,\n        \"text-sm hidden w-full justify-center py-2 text-center text-muted-foreground group-data-empty/combobox-content:flex\"\n      )}\n      {...props}>\n      {children ?? strings.format(\"empty\")}\n    </ComboboxPrimitive.Empty>\n  );\n}\n\nexport function ComboboxSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof ComboboxPrimitive.Separator>): ReactElement {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={mergeClassName(className, menuSeparatorClass)}\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxChips({\n  className,\n  ...props\n}: ComponentProps<typeof ComboboxPrimitive.Chips>): ReactElement {\n  const [registry] = useState(createChipIndexRegistry);\n  return (\n    <ChipIndexContext.Provider value={registry}>\n      <ComboboxPrimitive.Value>\n        {(selected: ReactNode) => <ChipIndexCommit selected={selected} />}\n      </ComboboxPrimitive.Value>\n      <ComboboxPrimitive.Chips\n        data-slot=\"combobox-chips\"\n        // oxlint-disable-next-line elmera/no-hardcoded-density-metrics -- chip wrap gap and compact chip padding are layout, not a control rung\n        className={mergeClassName(\n          className,\n          controlMd.minHeight(),\n          controlMd.inset(),\n          \"text-sm shadow-xs flex flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding py-1.5 transition-[color,box-shadow] has-data-[slot=combobox-chip]:px-1.5\",\n          withinFocusRingClass,\n          withinStateFaceClass\n        )}\n        {...props}\n      />\n    </ChipIndexContext.Provider>\n  );\n}\n\nexport type ComboboxChipProps = ComponentProps<typeof ComboboxPrimitive.Chip> & {\n  /**\n   * Renders the chip-remove button with an `X`.\n   * @default true\n   */\n  showRemove?: boolean;\n  /**\n   * Accessible name for the remove button. Defaults to dictionary `removeItem`\n   * formatted with the chip's string children, then `itemToStringLabel(value)`.\n   * When neither yields text, the localized \"Remove\" string with no trailing space.\n   */\n  removeLabel?: string;\n};\n\nfunction chipItemName(children: ReactNode): string {\n  if (!isTextValueNode(children)) {\n    return \"\";\n  }\n  return children.toString().trim();\n}\n\nfunction chipValueAt(selected: ReactNode, index: number): ReactNode {\n  if (!Array.isArray(selected)) {\n    return selected;\n  }\n  // SAFETY: multiple-mode `Value` yields the consumer's selected items; Chip\n  // indexes that list by committed DOM order, matching Base UI removal.\n  return (selected[index] ?? null) as ReactNode;\n}\n\nfunction stringifyChipValue(value: ReactNode, itemToStringLabel?: ComboboxItemLabelFn): string {\n  if (value == null || value === false || value === true) {\n    return \"\";\n  }\n  if (itemToStringLabel !== undefined) {\n    return itemToStringLabel(value).trim();\n  }\n  return chipItemName(value);\n}\n\nexport function ComboboxChip({\n  ref,\n  className,\n  children,\n  showRemove = true,\n  removeLabel,\n  ...props\n}: ComboboxChipProps): ReactElement {\n  const { ref: indexRef, index } = useChipIndex();\n  const mergedRef = useMergedRefs(ref, indexRef);\n  return (\n    <ComboboxPrimitive.Chip\n      ref={mergedRef}\n      data-slot=\"combobox-chip\"\n      // oxlint-disable-next-line elmera/no-hardcoded-density-metrics -- chip chrome is compact token, not a control rung\n      className={mergeClassName(\n        className,\n        \"text-xs font-medium flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 whitespace-nowrap text-foreground has-data-[slot=combobox-chip-remove]:pr-0\"\n      )}\n      {...props}>\n      {children}\n      {showRemove ? (\n        <ComboboxChipRemoveLabel removeLabel={removeLabel} chipChildren={children} index={index} />\n      ) : null}\n    </ComboboxPrimitive.Chip>\n  );\n}\n\nfunction ComboboxChipRemoveLabel({\n  removeLabel,\n  chipChildren,\n  index,\n}: {\n  removeLabel?: string;\n  chipChildren: ReactNode;\n  index: number;\n}): ReactElement {\n  const strings = useLocalizedStrings(comboboxStrings);\n  const itemToStringLabel = useContext(ComboboxItemToStringLabelContext);\n  return (\n    <ComboboxPrimitive.Value>\n      {(selected: ReactNode) => {\n        const fromChildren = chipItemName(chipChildren);\n        const item = fromChildren || stringifyChipValue(chipValueAt(selected, index), itemToStringLabel);\n        const accessibleName = removeLabel ?? strings.format(\"removeItem\", { item });\n        return <ComboboxChipRemove label={accessibleName} />;\n      }}\n    </ComboboxPrimitive.Value>\n  );\n}\n\nfunction ComboboxChipRemove({ label }: { label: string }): ReactElement {\n  return (\n    <ComboboxPrimitive.ChipRemove\n      data-slot=\"combobox-chip-remove\"\n      render={<Button variant=\"ghost\" size=\"icon-sm\" aria-label={label} />}\n      // The remove button sits inside a chip in the field box, so it takes the compact\n      // corner instead of Button's `--radius-button`.\n      className={cn(\"-ml-1 opacity-50 enabled-hover:opacity-100\", compactCornerClass)}\n      aria-label={label}>\n      <X className=\"pointer-events-none\" />\n    </ComboboxPrimitive.ChipRemove>\n  );\n}\n\nexport function ComboboxChipsInput({\n  className,\n  ...props\n}: ComponentProps<typeof ComboboxPrimitive.Input>): ReactElement {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      data-focus-ring-control=\"\"\n      // The chips box keys its face off this `data-focus-ring-control` input while it is a\n      // direct child. The control half keeps the `not-allowed` cursor on the input and cancels\n      // its own ring, so only the chips box paints the face.\n      className={mergeClassName(\n        className,\n        // oxlint-disable-next-line elmera/no-local-focus-ring -- native outline off; ring comes from the shared within adapter\n        \"min-w-16 flex-1 outline-none\",\n        withinFocusRingControlClass,\n        withinStateFaceControlClass\n      )}\n      {...definedProps(props)}\n    />\n  );\n}\n\n/**\n * Typed ref helper to anchor `Combobox.Content` to an external element\n * (e.g. the `Combobox.Chips` container or an `InputGroup.Root`).\n */\nexport function useComboboxAnchor(): RefObject<HTMLDivElement | null> {\n  return useRef<HTMLDivElement | null>(null);\n}\n\nComboboxRoot.displayName = \"Combobox.Root\";\nComboboxInput.displayName = \"Combobox.Input\";\nComboboxTrigger.displayName = \"Combobox.Trigger\";\nComboboxClear.displayName = \"Combobox.Clear\";\nComboboxContent.displayName = \"Combobox.Content\";\nComboboxList.displayName = \"Combobox.List\";\nComboboxItem.displayName = \"Combobox.Item\";\nComboboxGroup.displayName = \"Combobox.Group\";\nComboboxLabel.displayName = \"Combobox.Label\";\nComboboxCollection.displayName = \"Combobox.Collection\";\nComboboxEmpty.displayName = \"Combobox.Empty\";\nComboboxSeparator.displayName = \"Combobox.Separator\";\nComboboxChips.displayName = \"Combobox.Chips\";\nComboboxChip.displayName = \"Combobox.Chip\";\nComboboxChipsInput.displayName = \"Combobox.ChipsInput\";\nComboboxValue.displayName = \"Combobox.Value\";\n"],"mappings":"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"}

package/components/combobox/hooks/use-chip-index.js

@@ -0,0 +1,75 @@
+"use client";
+import { createContext, useCallback, useContext, useLayoutEffect, useState } from "react";
+//#region src/components/combobox/hooks/use-chip-index.ts
+/**
+* Ref attachment and chip layout effects are interleaved during a React commit.
+* Collect membership changes first, then order the complete roster in the single
+* subscriber's synchronous follow-up render, before paint.
+*/
+function createChipIndexRegistry() {
+	const elements = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Set();
+	let version = 0;
+	let orderedVersion = -1;
+	const invalidate = () => {
+		version += 1;
+		listeners.forEach((listener) => listener());
+	};
+	return {
+		getVersion: () => version,
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		invalidate,
+		reconcile(renderedVersion) {
+			if (renderedVersion !== version || orderedVersion === version) return;
+			orderedVersion = version;
+			[...elements.keys()].sort((left, right) => left.compareDocumentPosition(right) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1).forEach((element, index) => elements.get(element)?.(index));
+		},
+		register(element, setIndex) {
+			elements.set(element, setIndex);
+			invalidate();
+			return () => {
+				elements.delete(element);
+				invalidate();
+			};
+		}
+	};
+}
+const ChipIndexContext = createContext(null);
+function useChipIndex() {
+	const registry = useContext(ChipIndexContext);
+	const [index, setIndex] = useState(-1);
+	return {
+		ref: useCallback((element) => {
+			if (element) return registry?.register(element, setIndex);
+		}, [registry]),
+		index
+	};
+}
+/** Selection changes also invalidate order when memoized chips skip rendering. */
+function ChipIndexCommit({ selected }) {
+	const registry = useContext(ChipIndexContext);
+	const [version, setVersion] = useState(0);
+	useLayoutEffect(() => {
+		if (!registry) return;
+		const update = () => setVersion(registry.getVersion());
+		const unsubscribe = registry.subscribe(update);
+		update();
+		return unsubscribe;
+	}, [registry]);
+	useLayoutEffect(() => {
+		registry?.invalidate();
+	}, [registry, selected]);
+	useLayoutEffect(() => {
+		registry?.reconcile(version);
+	}, [registry, version]);
+	return null;
+}
+//#endregion
+export { ChipIndexCommit, ChipIndexContext, createChipIndexRegistry, useChipIndex };
+
+//# sourceMappingURL=use-chip-index.js.map

package/components/combobox/hooks/use-chip-index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chip-index.js","names":[],"sources":["../../../../src/components/combobox/hooks/use-chip-index.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext, useCallback, useContext, useLayoutEffect, useState } from \"react\";\nimport type { ReactNode } from \"react\";\n\n/**\n * Ref attachment and chip layout effects are interleaved during a React commit.\n * Collect membership changes first, then order the complete roster in the single\n * subscriber's synchronous follow-up render, before paint.\n */\nexport function createChipIndexRegistry() {\n  const elements = new Map<HTMLElement, (index: number) => void>();\n  const listeners = new Set<() => void>();\n  let version = 0;\n  let orderedVersion = -1;\n  const invalidate = () => {\n    version += 1;\n    listeners.forEach((listener) => listener());\n  };\n  return {\n    getVersion: () => version,\n    subscribe(listener: () => void) {\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n    invalidate,\n    reconcile(renderedVersion: number) {\n      if (renderedVersion !== version || orderedVersion === version) return;\n      orderedVersion = version;\n      const ordered = [...elements.keys()].sort((left, right) =>\n        left.compareDocumentPosition(right) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1\n      );\n      ordered.forEach((element, index) => elements.get(element)?.(index));\n    },\n    register(element: HTMLElement, setIndex: (index: number) => void) {\n      elements.set(element, setIndex);\n      invalidate();\n      return () => {\n        elements.delete(element);\n        invalidate();\n      };\n    },\n  };\n}\n\nexport const ChipIndexContext = createContext<ReturnType<typeof createChipIndexRegistry> | null>(null);\n\nexport function useChipIndex() {\n  const registry = useContext(ChipIndexContext);\n  const [index, setIndex] = useState(-1);\n  const ref = useCallback(\n    (element: HTMLDivElement | null) => {\n      if (element) return registry?.register(element, setIndex);\n    },\n    [registry]\n  );\n  return { ref, index };\n}\n\n/** Selection changes also invalidate order when memoized chips skip rendering. */\nexport function ChipIndexCommit({ selected }: { selected: ReactNode }): null {\n  const registry = useContext(ChipIndexContext);\n  const [version, setVersion] = useState(0);\n  useLayoutEffect(() => {\n    if (!registry) return;\n    const update = () => setVersion(registry.getVersion());\n    const unsubscribe = registry.subscribe(update);\n    update();\n    return unsubscribe;\n  }, [registry]);\n  useLayoutEffect(() => {\n    registry?.invalidate();\n  }, [registry, selected]);\n  useLayoutEffect(() => {\n    registry?.reconcile(version);\n  }, [registry, version]);\n  return null;\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,0BAA0B;CACxC,MAAM,2BAAW,IAAI,IAA0C;CAC/D,MAAM,4BAAY,IAAI,IAAgB;CACtC,IAAI,UAAU;CACd,IAAI,iBAAiB;CACrB,MAAM,mBAAmB;EACvB,WAAW;EACX,UAAU,SAAS,aAAa,SAAS,CAAC;CAC5C;CACA,OAAO;EACL,kBAAkB;EAClB,UAAU,UAAsB;GAC9B,UAAU,IAAI,QAAQ;GACtB,aAAa;IACX,UAAU,OAAO,QAAQ;GAC3B;EACF;EACA;EACA,UAAU,iBAAyB;GACjC,IAAI,oBAAoB,WAAW,mBAAmB,SAAS;GAC/D,iBAAiB;GAIjB,CAHiB,GAAG,SAAS,KAAK,CAAC,CAAC,CAAC,MAAM,MAAM,UAC/C,KAAK,wBAAwB,KAAK,IAAI,KAAK,8BAA8B,KAAK,CAE1E,CAAC,CAAC,SAAS,SAAS,UAAU,SAAS,IAAI,OAAO,CAAC,GAAG,KAAK,CAAC;EACpE;EACA,SAAS,SAAsB,UAAmC;GAChE,SAAS,IAAI,SAAS,QAAQ;GAC9B,WAAW;GACX,aAAa;IACX,SAAS,OAAO,OAAO;IACvB,WAAW;GACb;EACF;CACF;AACF;AAEA,MAAa,mBAAmB,cAAiE,IAAI;AAErG,SAAgB,eAAe;CAC7B,MAAM,WAAW,WAAW,gBAAgB;CAC5C,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CAOrC,OAAO;EAAE,KANG,aACT,YAAmC;GAClC,IAAI,SAAS,OAAO,UAAU,SAAS,SAAS,QAAQ;EAC1D,GACA,CAAC,QAAQ,CAEA;EAAG;CAAM;AACtB;;AAGA,SAAgB,gBAAgB,EAAE,YAA2C;CAC3E,MAAM,WAAW,WAAW,gBAAgB;CAC5C,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC;CACxC,sBAAsB;EACpB,IAAI,CAAC,UAAU;EACf,MAAM,eAAe,WAAW,SAAS,WAAW,CAAC;EACrD,MAAM,cAAc,SAAS,UAAU,MAAM;EAC7C,OAAO;EACP,OAAO;CACT,GAAG,CAAC,QAAQ,CAAC;CACb,sBAAsB;EACpB,UAAU,WAAW;CACvB,GAAG,CAAC,UAAU,QAAQ,CAAC;CACvB,sBAAsB;EACpB,UAAU,UAAU,OAAO;CAC7B,GAAG,CAAC,UAAU,OAAO,CAAC;CACtB,OAAO;AACT"}

package/components/combobox/index.d.ts

@@ -0,0 +1,22 @@
+import { ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxValue } from "./combobox.js";
+//#region src/components/combobox/index.d.ts
+export declare const Combobox: {
+  Root: typeof ComboboxRoot;
+  Input: typeof ComboboxInput;
+  Trigger: typeof ComboboxTrigger;
+  Clear: typeof ComboboxClear;
+  Content: typeof ComboboxContent;
+  List: typeof ComboboxList;
+  Item: typeof ComboboxItem;
+  Group: typeof ComboboxGroup;
+  Label: typeof ComboboxLabel;
+  Collection: typeof ComboboxCollection;
+  Empty: typeof ComboboxEmpty;
+  Separator: typeof ComboboxSeparator;
+  Chips: typeof ComboboxChips;
+  Chip: typeof ComboboxChip;
+  ChipsInput: typeof ComboboxChipsInput;
+  Value: typeof ComboboxValue;
+};
+//#endregion
+//# sourceMappingURL=index.d.ts.map

package/components/combobox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/combobox/index.ts"],"mappings":";;qBAwBa;EACX,aAAI;EACJ,cAAK;EACL,gBAAO;EACP,cAAK;EACL,gBAAO;EACP,aAAI;EACJ,aAAI;EACJ,cAAK;EACL,cAAK;EACL,mBAAU;EACV,cAAK;EACL,kBAAS;EACT,cAAK;EACL,aAAI;EACJ,mBAAU;EACV,cAAK"}

package/components/combobox/index.js

@@ -0,0 +1,29 @@
+import { ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxValue } from "./combobox.js";
+//#region src/components/combobox/index.ts
+/**
+* Server-visible namespace for `Combobox`.
+* The implementation stays a client module; this file has no directive,
+* so a server component can read each part instead of dotting into a client reference.
+*/
+const Combobox = {
+	Root: ComboboxRoot,
+	Input: ComboboxInput,
+	Trigger: ComboboxTrigger,
+	Clear: ComboboxClear,
+	Content: ComboboxContent,
+	List: ComboboxList,
+	Item: ComboboxItem,
+	Group: ComboboxGroup,
+	Label: ComboboxLabel,
+	Collection: ComboboxCollection,
+	Empty: ComboboxEmpty,
+	Separator: ComboboxSeparator,
+	Chips: ComboboxChips,
+	Chip: ComboboxChip,
+	ChipsInput: ComboboxChipsInput,
+	Value: ComboboxValue
+};
+//#endregion
+export { Combobox };
+
+//# sourceMappingURL=index.js.map

package/components/combobox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/combobox/index.ts"],"sourcesContent":["/**\n * Server-visible namespace for `Combobox`.\n * The implementation stays a client module; this file has no directive,\n * so a server component can read each part instead of dotting into a client reference.\n */\nimport {\n  ComboboxRoot,\n  ComboboxInput,\n  ComboboxTrigger,\n  ComboboxClear,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxValue,\n} from \"./combobox\";\n\nexport const Combobox = {\n  Root: ComboboxRoot,\n  Input: ComboboxInput,\n  Trigger: ComboboxTrigger,\n  Clear: ComboboxClear,\n  Content: ComboboxContent,\n  List: ComboboxList,\n  Item: ComboboxItem,\n  Group: ComboboxGroup,\n  Label: ComboboxLabel,\n  Collection: ComboboxCollection,\n  Empty: ComboboxEmpty,\n  Separator: ComboboxSeparator,\n  Chips: ComboboxChips,\n  Chip: ComboboxChip,\n  ChipsInput: ComboboxChipsInput,\n  Value: ComboboxValue,\n};\n"],"mappings":";;;;;;;AAwBA,MAAa,WAAW;CACtB,MAAM;CACN,OAAO;CACP,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACN,MAAM;CACN,OAAO;CACP,OAAO;CACP,YAAY;CACZ,OAAO;CACP,WAAW;CACX,OAAO;CACP,MAAM;CACN,YAAY;CACZ,OAAO;AACT"}

package/components/combobox/intl/en-US.d.ts

@@ -0,0 +1,11 @@
+import { Variables } from "@internationalized/string";
+//#region src/components/combobox/intl/en-US.d.ts
+/** Default localized copy for combobox.empty / combobox.clear / combobox.removeItem / combobox.toggle. */
+export declare const enUS: {
+  empty: string;
+  clear: string;
+  toggle: string;
+  removeItem: (vars: Variables) => string;
+};
+//#endregion
+//# sourceMappingURL=en-US.d.ts.map

package/components/combobox/intl/en-US.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"en-US.d.ts","names":[],"sources":["../../../../src/components/combobox/intl/en-US.ts"],"mappings":";;;qBAGa;EACX;EACA;EACA;EACA,aAAU,MAAS"}

package/components/combobox/intl/en-US.js

@@ -0,0 +1,15 @@
+//#region src/components/combobox/intl/en-US.ts
+/** Default localized copy for combobox.empty / combobox.clear / combobox.removeItem / combobox.toggle. */
+const enUS = {
+	empty: "No results.",
+	clear: "Clear selection",
+	toggle: "Toggle options",
+	removeItem: (vars) => {
+		const item = String(vars?.item ?? "").trim();
+		return item === "" ? "Remove" : `Remove ${item}`;
+	}
+};
+//#endregion
+export { enUS };
+
+//# sourceMappingURL=en-US.js.map

package/components/combobox/intl/en-US.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"en-US.js","names":[],"sources":["../../../../src/components/combobox/intl/en-US.ts"],"sourcesContent":["import type { Variables } from \"@internationalized/string\";\n\n/** Default localized copy for combobox.empty / combobox.clear / combobox.removeItem / combobox.toggle. */\nexport const enUS = {\n  empty: \"No results.\",\n  clear: \"Clear selection\",\n  toggle: \"Toggle options\",\n  removeItem: (vars: Variables) => {\n    const item = String(vars?.item ?? \"\").trim();\n    return item === \"\" ? \"Remove\" : `Remove ${item}`;\n  },\n};\n"],"mappings":";;AAGA,MAAa,OAAO;CAClB,OAAO;CACP,OAAO;CACP,QAAQ;CACR,aAAa,SAAoB;EAC/B,MAAM,OAAO,OAAO,MAAM,QAAQ,EAAE,CAAC,CAAC,KAAK;EAC3C,OAAO,SAAS,KAAK,WAAW,UAAU;CAC5C;AACF"}

package/components/combobox/intl/fi-FI.d.ts

@@ -0,0 +1,11 @@
+import { Variables } from "@internationalized/string";
+//#region src/components/combobox/intl/fi-FI.d.ts
+/** Default localized copy for combobox.empty / combobox.clear / combobox.removeItem / combobox.toggle. */
+export declare const fiFI: {
+  empty: string;
+  clear: string;
+  toggle: string;
+  removeItem: (vars: Variables) => string;
+};
+//#endregion
+//# sourceMappingURL=fi-FI.d.ts.map

package/components/combobox/intl/fi-FI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fi-FI.d.ts","names":[],"sources":["../../../../src/components/combobox/intl/fi-FI.ts"],"mappings":";;;qBAGa;EACX;EACA;EACA;EACA,aAAU,MAAS"}

package/components/combobox/intl/fi-FI.js

@@ -0,0 +1,15 @@
+//#region src/components/combobox/intl/fi-FI.ts
+/** Default localized copy for combobox.empty / combobox.clear / combobox.removeItem / combobox.toggle. */
+const fiFI = {
+	empty: "Ei tuloksia.",
+	clear: "Tyhjennä valinta",
+	toggle: "Näytä tai piilota vaihtoehdot",
+	removeItem: (vars) => {
+		const item = String(vars?.item ?? "").trim();
+		return item === "" ? "Poista" : `Poista ${item}`;
+	}
+};
+//#endregion
+export { fiFI };
+
+//# sourceMappingURL=fi-FI.js.map

package/components/combobox/intl/fi-FI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fi-FI.js","names":[],"sources":["../../../../src/components/combobox/intl/fi-FI.ts"],"sourcesContent":["import type { Variables } from \"@internationalized/string\";\n\n/** Default localized copy for combobox.empty / combobox.clear / combobox.removeItem / combobox.toggle. */\nexport const fiFI = {\n  empty: \"Ei tuloksia.\",\n  clear: \"Tyhjennä valinta\",\n  toggle: \"Näytä tai piilota vaihtoehdot\",\n  removeItem: (vars: Variables) => {\n    const item = String(vars?.item ?? \"\").trim();\n    return item === \"\" ? \"Poista\" : `Poista ${item}`;\n  },\n};\n"],"mappings":";;AAGA,MAAa,OAAO;CAClB,OAAO;CACP,OAAO;CACP,QAAQ;CACR,aAAa,SAAoB;EAC/B,MAAM,OAAO,OAAO,MAAM,QAAQ,EAAE,CAAC,CAAC,KAAK;EAC3C,OAAO,SAAS,KAAK,WAAW,UAAU;CAC5C;AACF"}

package/components/combobox/intl/index.d.ts

@@ -0,0 +1,5 @@
+//#region src/components/combobox/intl/index.d.ts
+/** Combobox's own dictionary: it owns the `combobox.*` keys. */
+export declare const comboboxStrings: import("@internationalized/string").LocalizedStringDictionary<"clear" | "empty" | "removeItem" | "toggle", string | ((vars: import("@internationalized/string").Variables) => string)>;
+//#endregion
+//# sourceMappingURL=index.d.ts.map

package/components/combobox/intl/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/combobox/intl/index.ts"],"mappings":";;qBAOa,qDAAe,kFAAA,0CAAA"}

package/components/combobox/intl/index.js

@@ -0,0 +1,17 @@
+import { createStringDictionary } from "../../../intl/create-string-dictionary.js";
+import { enUS } from "./en-US.js";
+import { fiFI } from "./fi-FI.js";
+import { nbNO } from "./nb-NO.js";
+import { svSE } from "./sv-SE.js";
+//#region src/components/combobox/intl/index.ts
+/** Combobox's own dictionary: it owns the `combobox.*` keys. */
+const comboboxStrings = createStringDictionary({
+	enUS,
+	fiFI,
+	nbNO,
+	svSE
+});
+//#endregion
+export { comboboxStrings };
+
+//# sourceMappingURL=index.js.map

package/components/combobox/intl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/combobox/intl/index.ts"],"sourcesContent":["import { createStringDictionary } from \"../../../intl/create-string-dictionary\";\nimport { enUS } from \"./en-US\";\nimport { fiFI } from \"./fi-FI\";\nimport { nbNO } from \"./nb-NO\";\nimport { svSE } from \"./sv-SE\";\n\n/** Combobox's own dictionary: it owns the `combobox.*` keys. */\nexport const comboboxStrings = createStringDictionary({ enUS, fiFI, nbNO, svSE });\n"],"mappings":";;;;;;;AAOA,MAAa,kBAAkB,uBAAuB;CAAE;CAAM;CAAM;CAAM;AAAK,CAAC"}

package/components/combobox/intl/nb-NO.d.ts

@@ -0,0 +1,11 @@
+import { Variables } from "@internationalized/string";
+//#region src/components/combobox/intl/nb-NO.d.ts
+/** Default localized copy for combobox.empty / combobox.clear / combobox.removeItem / combobox.toggle. */
+export declare const nbNO: {
+  empty: string;
+  clear: string;
+  toggle: string;
+  removeItem: (vars: Variables) => string;
+};
+//#endregion
+//# sourceMappingURL=nb-NO.d.ts.map

package/components/combobox/intl/nb-NO.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nb-NO.d.ts","names":[],"sources":["../../../../src/components/combobox/intl/nb-NO.ts"],"mappings":";;;qBAGa;EACX;EACA;EACA;EACA,aAAU,MAAS"}

package/components/combobox/intl/nb-NO.js

@@ -0,0 +1,15 @@
+//#region src/components/combobox/intl/nb-NO.ts
+/** Default localized copy for combobox.empty / combobox.clear / combobox.removeItem / combobox.toggle. */
+const nbNO = {
+	empty: "Ingen resultater.",
+	clear: "Tøm valg",
+	toggle: "Vis eller skjul alternativer",
+	removeItem: (vars) => {
+		const item = String(vars?.item ?? "").trim();
+		return item === "" ? "Fjern" : `Fjern ${item}`;
+	}
+};
+//#endregion
+export { nbNO };
+
+//# sourceMappingURL=nb-NO.js.map

package/components/combobox/intl/nb-NO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nb-NO.js","names":[],"sources":["../../../../src/components/combobox/intl/nb-NO.ts"],"sourcesContent":["import type { Variables } from \"@internationalized/string\";\n\n/** Default localized copy for combobox.empty / combobox.clear / combobox.removeItem / combobox.toggle. */\nexport const nbNO = {\n  empty: \"Ingen resultater.\",\n  clear: \"Tøm valg\",\n  toggle: \"Vis eller skjul alternativer\",\n  removeItem: (vars: Variables) => {\n    const item = String(vars?.item ?? \"\").trim();\n    return item === \"\" ? \"Fjern\" : `Fjern ${item}`;\n  },\n};\n"],"mappings":";;AAGA,MAAa,OAAO;CAClB,OAAO;CACP,OAAO;CACP,QAAQ;CACR,aAAa,SAAoB;EAC/B,MAAM,OAAO,OAAO,MAAM,QAAQ,EAAE,CAAC,CAAC,KAAK;EAC3C,OAAO,SAAS,KAAK,UAAU,SAAS;CAC1C;AACF"}

package/components/combobox/intl/sv-SE.d.ts

@@ -0,0 +1,11 @@
+import { Variables } from "@internationalized/string";
+//#region src/components/combobox/intl/sv-SE.d.ts
+/** Default localized copy for combobox.empty / combobox.clear / combobox.removeItem / combobox.toggle. */
+export declare const svSE: {
+  empty: string;
+  clear: string;
+  toggle: string;
+  removeItem: (vars: Variables) => string;
+};
+//#endregion
+//# sourceMappingURL=sv-SE.d.ts.map

package/components/combobox/intl/sv-SE.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sv-SE.d.ts","names":[],"sources":["../../../../src/components/combobox/intl/sv-SE.ts"],"mappings":";;;qBAGa;EACX;EACA;EACA;EACA,aAAU,MAAS"}