@viax.io/uxm 4.36.0

package/dist/ui/phone-input/phone-input.d.ts

@@ -0,0 +1,46 @@
+import { type PhoneCountry } from '../../lib/phone-countries.js';
+import type { InputHTMLAttributes } from 'react';
+/** PhoneInput value: split into country code (ISO) and the national number. */
+export interface PhoneValue {
+    /** ISO-3166 alpha-2 country code (e.g. "US"). */
+    country: string;
+    /** National number as raw digits, no formatting. */
+    number: string;
+}
+export interface PhoneInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'type' | 'style'> {
+    /** Controlled value. Pair with `onChange`. */
+    value?: PhoneValue;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: PhoneValue;
+    /** Fires with the next value after each keystroke or country pick. */
+    onChange?: (next: PhoneValue) => void;
+    /**
+     * Country list shown in the picker. Defaults to a curated set of ~30
+     * countries covering the regions most B2B apps ship to. Pass a custom
+     * list (e.g. an extended global set or a region-restricted subset) to
+     * override. Each country's `format` field controls the per-country
+     * digit mask.
+     */
+    countries?: PhoneCountry[];
+    /**
+     * Show a clear (✕) button at the trailing edge when the national number
+     * has a value. On by default (opt out with `clearable={false}`). The
+     * component owns the reset — it wipes its own uncontrolled state and fires
+     * `onChange` with an empty number (keeping the selected country), so no
+     * separate `onClear` is needed (mirrors NumberInput / Select).
+     */
+    clearable?: boolean;
+    /** Accessible name for the clear button. Default `"Clear"`. */
+    clearLabel?: string;
+    /** Accessible name for the country picker trigger. Default `"Choose country"`. */
+    chooseCountryLabel?: string;
+    /**
+     * Inline style applied to the WRAPPER, and forwarded to the country
+     * picker panel via `panelStyle` (the panel portals to document.body, so
+     * it can't inherit the wrapper cascade). CSS custom properties set here
+     * reach both the field and the popover.
+     */
+    style?: React.CSSProperties;
+}
+export declare function PhoneInput({ value, defaultValue, onChange, countries, clearable, clearLabel, chooseCountryLabel, className, placeholder, style, disabled, ...rest }: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=phone-input.d.ts.map

package/dist/ui/phone-input/phone-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-input.d.ts","sourceRoot":"","sources":["../../../src/ui/phone-input/phone-input.tsx"],"names":[],"mappings":"AAIA,OAAO,EAKL,KAAK,YAAY,EAClB,MAAM,2BAA2B,CAAC;AAKnC,OAAO,KAAK,EAAe,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE9D,+EAA+E;AAC/E,MAAM,WAAW,UAAU;IACzB,iDAAiD;IACjD,OAAO,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,OAAO,CACzD;IACD,8CAA8C;IAC9C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,YAAY,EAAE,CAAC;IAC3B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kFAAkF;IAClF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAcD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,SAA6B,EAC7B,SAAgB,EAChB,UAAoB,EACpB,kBAAqC,EACrC,SAAS,EACT,WAAW,EACX,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,eAAe,2CAiJjB"}

package/dist/ui/phone-input/phone-input.js

@@ -0,0 +1,157 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { cn } from "../../helpers/index.js";
+import {
+  CURATED_COUNTRIES,
+  findCountry,
+  maskNumber,
+  maxDigitsFor
+} from "../../lib/phone-countries.js";
+import { Icon } from "../icon/index.js";
+import { IconButton } from "../icon-button/index.js";
+import { Listbox } from "../listbox/index.js";
+const EMPTY_VALUE = { country: "US", number: "" };
+function filterCountries(items, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return items;
+  return items.filter(
+    (c) => c.name.toLowerCase().includes(q) || c.dial.includes(q) || c.iso.toLowerCase().includes(q)
+  );
+}
+function PhoneInput({
+  value,
+  defaultValue,
+  onChange,
+  countries = CURATED_COUNTRIES,
+  clearable = true,
+  clearLabel = "Clear",
+  chooseCountryLabel = "Choose country",
+  className,
+  placeholder,
+  style,
+  disabled,
+  ...rest
+}) {
+  const [internal, setInternal] = useState(() => defaultValue ?? EMPTY_VALUE);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : internal;
+  const containerRef = useRef(null);
+  const country = findCountry(current.country, countries) ?? countries[0];
+  const commit = useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  const handleNumberChange = useCallback(
+    (e) => {
+      const digits = e.target.value.replace(/\D/g, "").slice(0, maxDigitsFor(country));
+      commit({ country: current.country, number: digits });
+    },
+    [country, current.country, commit]
+  );
+  const handleCountryPick = useCallback(
+    (iso) => {
+      const next = findCountry(iso, countries);
+      const cap = maxDigitsFor(next);
+      const trimmed = current.number.length > cap ? current.number.slice(0, cap) : current.number;
+      commit({ country: iso, number: trimmed });
+    },
+    [countries, current.number, commit]
+  );
+  const handleClear = useCallback(() => {
+    commit({ country: current.country, number: "" });
+  }, [commit, current.country]);
+  const showClear = clearable && current.number.length > 0 && !disabled;
+  const masked = maskNumber(current.number, country);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("uxm-phone-input", disabled && "uxm-phone-input--disabled", className),
+      style,
+      ref: containerRef,
+      children: [
+        /* @__PURE__ */ jsx(
+          Listbox,
+          {
+            items: countries,
+            getKey: (c) => c.iso,
+            getLabel: (c) => c.name,
+            filterItems: filterCountries,
+            value: country,
+            onChange: (next) => next && handleCountryPick(next.iso),
+            disabled,
+            anchorRef: containerRef,
+            placement: "bottom-start",
+            searchPlaceholder: "Search countries",
+            searchAriaLabel: "Search countries",
+            showCheckmark: false,
+            panelClassName: "uxm-phone-input__panel",
+            panelStyle: style,
+            className: "uxm-phone-input__picker",
+            "aria-label": chooseCountryLabel,
+            renderTrigger: ({ open, triggerProps }) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                ...triggerProps,
+                type: "button",
+                className: "uxm-phone-input__country",
+                "aria-label": `Country: ${country.name}`,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "uxm-phone-input__flag", "aria-hidden": "true", children: country.flag }),
+                  /* @__PURE__ */ jsx("span", { className: "uxm-phone-input__dial", children: country.dial }),
+                  /* @__PURE__ */ jsx("span", { className: "uxm-phone-input__caret", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      glyph: "chevron-down",
+                      size: 12,
+                      strokeWidth: 2.2,
+                      style: { transform: open ? "rotate(180deg)" : "none" }
+                    }
+                  ) })
+                ]
+              }
+            ),
+            renderItem: (c) => /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "uxm-phone-input__row-flag", "aria-hidden": "true", children: c.flag }),
+              /* @__PURE__ */ jsx("span", { className: "uxm-phone-input__row-name", children: c.name }),
+              /* @__PURE__ */ jsx("span", { className: "uxm-phone-input__row-dial", children: c.dial })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            inputMode: "numeric",
+            autoComplete: "off",
+            className: cn(
+              "uxm-phone-input__input",
+              clearable && "uxm-phone-input__input--clearable"
+            ),
+            placeholder: placeholder ?? country.format?.replace(/X/g, "0") ?? "Phone number",
+            value: masked,
+            onChange: handleNumberChange,
+            disabled,
+            ...rest
+          }
+        ),
+        showClear && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            className: "uxm-field-clear uxm-phone-input__clear",
+            "aria-label": clearLabel,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: handleClear,
+            children: /* @__PURE__ */ jsx(Icon, { glyph: "close" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PhoneInput
+};
+//# sourceMappingURL=phone-input.js.map

package/dist/ui/phone-input/phone-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/phone-input/phone-input.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { cn } from '@/helpers';\n\nimport {\n  CURATED_COUNTRIES,\n  findCountry,\n  maskNumber,\n  maxDigitsFor,\n  type PhoneCountry,\n} from '../../lib/phone-countries';\nimport { Icon } from '../icon';\nimport { IconButton } from '../icon-button';\nimport { Listbox } from '../listbox';\n\nimport type { ChangeEvent, InputHTMLAttributes } from 'react';\n\n/** PhoneInput value: split into country code (ISO) and the national number. */\nexport interface PhoneValue {\n  /** ISO-3166 alpha-2 country code (e.g. \"US\"). */\n  country: string;\n  /** National number as raw digits, no formatting. */\n  number: string;\n}\n\nexport interface PhoneInputProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    'onChange' | 'value' | 'defaultValue' | 'type' | 'style'\n  > {\n  /** Controlled value. Pair with `onChange`. */\n  value?: PhoneValue;\n  /** Initial value for uncontrolled usage. */\n  defaultValue?: PhoneValue;\n  /** Fires with the next value after each keystroke or country pick. */\n  onChange?: (next: PhoneValue) => void;\n  /**\n   * Country list shown in the picker. Defaults to a curated set of ~30\n   * countries covering the regions most B2B apps ship to. Pass a custom\n   * list (e.g. an extended global set or a region-restricted subset) to\n   * override. Each country's `format` field controls the per-country\n   * digit mask.\n   */\n  countries?: PhoneCountry[];\n  /**\n   * Show a clear (✕) button at the trailing edge when the national number\n   * has a value. On by default (opt out with `clearable={false}`). The\n   * component owns the reset — it wipes its own uncontrolled state and fires\n   * `onChange` with an empty number (keeping the selected country), so no\n   * separate `onClear` is needed (mirrors NumberInput / Select).\n   */\n  clearable?: boolean;\n  /** Accessible name for the clear button. Default `\"Clear\"`. */\n  clearLabel?: string;\n  /** Accessible name for the country picker trigger. Default `\"Choose country\"`. */\n  chooseCountryLabel?: string;\n  /**\n   * Inline style applied to the WRAPPER, and forwarded to the country\n   * picker panel via `panelStyle` (the panel portals to document.body, so\n   * it can't inherit the wrapper cascade). CSS custom properties set here\n   * reach both the field and the popover.\n   */\n  style?: React.CSSProperties;\n}\n\n/** Default value for uncontrolled mounts that don't pass `defaultValue`. */\nconst EMPTY_VALUE: PhoneValue = { country: 'US', number: '' };\n\n/** Case-insensitive country filter — matches name, dial code, or ISO. */\nfunction filterCountries(items: PhoneCountry[], query: string): PhoneCountry[] {\n  const q = query.trim().toLowerCase();\n  if (!q) return items;\n  return items.filter(\n    (c) => c.name.toLowerCase().includes(q) || c.dial.includes(q) || c.iso.toLowerCase().includes(q),\n  );\n}\n\nexport function PhoneInput({\n  value,\n  defaultValue,\n  onChange,\n  countries = CURATED_COUNTRIES,\n  clearable = true,\n  clearLabel = 'Clear',\n  chooseCountryLabel = 'Choose country',\n  className,\n  placeholder,\n  style,\n  disabled,\n  ...rest\n}: PhoneInputProps) {\n  const [internal, setInternal] = useState<PhoneValue>(() => defaultValue ?? EMPTY_VALUE);\n  const isControlled = value !== undefined;\n  const current = isControlled ? value : internal;\n  // The field wrapper is the popover anchor: the clickable trigger is the\n  // small country button, but the panel should span the full field width.\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const country = findCountry(current.country, countries) ?? countries[0];\n\n  const commit = useCallback(\n    (next: PhoneValue) => {\n      if (!isControlled) setInternal(next);\n      onChange?.(next);\n    },\n    [isControlled, onChange],\n  );\n\n  const handleNumberChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      // Strip non-digits and cap at the country's digit budget so the\n      // stored value is always raw, normalized digits. Re-formatting for\n      // display happens via `maskNumber` below.\n      const digits = e.target.value.replace(/\\D/g, '').slice(0, maxDigitsFor(country));\n      commit({ country: current.country, number: digits });\n    },\n    [country, current.country, commit],\n  );\n\n  const handleCountryPick = useCallback(\n    (iso: string) => {\n      // Switching country may invalidate the current digit count (e.g.\n      // moving from a 10-digit country to a 7-digit one). Truncate to\n      // the new max so the displayed mask doesn't overflow its slots.\n      const next = findCountry(iso, countries);\n      const cap = maxDigitsFor(next);\n      const trimmed = current.number.length > cap ? current.number.slice(0, cap) : current.number;\n      commit({ country: iso, number: trimmed });\n    },\n    [countries, current.number, commit],\n  );\n\n  // Clear owns its own reset: wipe the national number but KEEP the selected\n  // country (the country picker is a separate affordance — clearing the field\n  // shouldn't reset it to a default). Mirrors NumberInput / Select which hold\n  // their own value state, so no `onClear` prop is needed.\n  const handleClear = useCallback(() => {\n    commit({ country: current.country, number: '' });\n  }, [commit, current.country]);\n  const showClear = clearable && current.number.length > 0 && !disabled;\n\n  const masked = maskNumber(current.number, country);\n\n  return (\n    <div\n      className={cn('uxm-phone-input', disabled && 'uxm-phone-input--disabled', className)}\n      style={style}\n      ref={containerRef}\n    >\n      {/* Country picker — the shared Listbox owns the popover (positioning,\n          portal, dismiss, keyboard nav, search, ARIA). `anchorRef` points at\n          the field wrapper so the panel spans the full width; `showCheckmark`\n          is off because each row already carries the dial code on its right\n          edge. */}\n      <Listbox<PhoneCountry>\n        items={countries}\n        getKey={(c) => c.iso}\n        getLabel={(c) => c.name}\n        filterItems={filterCountries}\n        value={country}\n        onChange={(next) => next && handleCountryPick(next.iso)}\n        disabled={disabled}\n        anchorRef={containerRef}\n        placement=\"bottom-start\"\n        searchPlaceholder=\"Search countries\"\n        searchAriaLabel=\"Search countries\"\n        showCheckmark={false}\n        panelClassName=\"uxm-phone-input__panel\"\n        panelStyle={style}\n        className=\"uxm-phone-input__picker\"\n        aria-label={chooseCountryLabel}\n        renderTrigger={({ open, triggerProps }) => (\n          <button\n            {...triggerProps}\n            type=\"button\"\n            className=\"uxm-phone-input__country\"\n            aria-label={`Country: ${country.name}`}\n          >\n            <span className=\"uxm-phone-input__flag\" aria-hidden=\"true\">{country.flag}</span>\n            <span className=\"uxm-phone-input__dial\">{country.dial}</span>\n            <span className=\"uxm-phone-input__caret\" aria-hidden=\"true\">\n              <Icon\n                glyph=\"chevron-down\"\n                size={12}\n                strokeWidth={2.2}\n                style={{ transform: open ? 'rotate(180deg)' : 'none' }}\n              />\n            </span>\n          </button>\n        )}\n        renderItem={(c) => (\n          <>\n            <span className=\"uxm-phone-input__row-flag\" aria-hidden=\"true\">{c.flag}</span>\n            <span className=\"uxm-phone-input__row-name\">{c.name}</span>\n            <span className=\"uxm-phone-input__row-dial\">{c.dial}</span>\n          </>\n        )}\n      />\n      <input\n        // `type=\"text\"` (not `tel`) is deliberate: `type=\"tel\"` triggers\n        // Chrome / Safari phone-autofill heuristics that can intercept\n        // keystrokes, clear the field mid-typing, or render a stacking\n        // autofill chip that fights our masked display. `inputMode=\"numeric\"`\n        // still pulls up the digit-only soft keyboard on mobile, which is\n        // the only thing `type=\"tel\"` was giving us. `autoComplete=\"off\"`\n        // belt-and-braces against browser autofill clobbering the value\n        // (some browsers ignore `autoComplete` on tel-shaped fields, so\n        // skipping the tel hint matters too).\n        type=\"text\"\n        inputMode=\"numeric\"\n        autoComplete=\"off\"\n        className={cn(\n          'uxm-phone-input__input',\n          clearable && 'uxm-phone-input__input--clearable',\n        )}\n        placeholder={placeholder ?? country.format?.replace(/X/g, '0') ?? 'Phone number'}\n        value={masked}\n        onChange={handleNumberChange}\n        disabled={disabled}\n        {...rest}\n      />\n      {showClear && (\n        <IconButton\n          className=\"uxm-field-clear uxm-phone-input__clear\"\n          aria-label={clearLabel}\n          // Prevent the button from stealing focus away from whatever's\n          // currently focused — a blur here would land before the reset does.\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={handleClear}\n        >\n          <Icon glyph=\"close\" />\n        </IconButton>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/pill-select/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var pill_select_exports = {};
+module.exports = __toCommonJS(pill_select_exports);
+__reExport(pill_select_exports, require("./pill-select.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./pill-select.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/pill-select/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/pill-select/index.ts"],"sourcesContent":["export * from './pill-select';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,gCAAc,0BAAd;","names":[]}

package/dist/ui/pill-select/index.d.ts

@@ -0,0 +1,2 @@
+export * from './pill-select.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/pill-select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/pill-select/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/ui/pill-select/index.js

@@ -0,0 +1,2 @@
+export * from "./pill-select.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/pill-select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/pill-select/index.ts"],"sourcesContent":["export * from './pill-select';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/ui/pill-select/pill-select-preview.cjs

@@ -0,0 +1,60 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var pill_select_preview_exports = {};
+__export(pill_select_preview_exports, {
+  PillSelectPreview: () => PillSelectPreview
+});
+module.exports = __toCommonJS(pill_select_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+const ALL_OPTIONS = ["React", "TypeScript", "Tailwind", "Next.js", "Node.js", "GraphQL", "Prisma"];
+const DEFAULT_SELECTED = ["React", "TypeScript", "Tailwind"];
+function PillSelectPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const chipsPosition = variants.chipsPosition ?? "below";
+  const cssVars = {};
+  for (const [key, value] of Object.entries(styles)) {
+    const varName = "--uxm-pill-select-" + key.replace(/([A-Z])/g, "-$1").toLowerCase();
+    if (typeof value === "number") {
+      cssVars[varName] = key === "disabledOpacity" ? value : `${value}px`;
+    } else {
+      cssVars[varName] = String(value);
+    }
+  }
+  const modifierClass = `uxm-pill-select--state-${state}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: 360 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui.PillSelect,
+    {
+      className: modifierClass,
+      style: cssVars,
+      options: ALL_OPTIONS,
+      defaultValue: DEFAULT_SELECTED,
+      placeholder: "Select tags\u2026",
+      disabled: state === "disabled",
+      chipsPosition,
+      clearable: true,
+      error: state === "error" ? "Select at least one tag." : void 0
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PillSelectPreview
+});
+//# sourceMappingURL=pill-select-preview.cjs.map

package/dist/ui/pill-select/pill-select-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/pill-select/pill-select-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { PillSelect } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nconst ALL_OPTIONS = ['React', 'TypeScript', 'Tailwind', 'Next.js', 'Node.js', 'GraphQL', 'Prisma'];\nconst DEFAULT_SELECTED = ['React', 'TypeScript', 'Tailwind'];\n\n/**\n * Real atomic composition: the preview renders the actual <PillSelect>,\n * which itself composes <Chip mode=\"input\"> for each selected value. So:\n *\n *   - Chip-shape changes (radius, padding, colors) live on the Chip atom's\n *     registry and flow into this preview automatically through Chip's\n *     own CSS — no theming knobs duplicated here.\n *   - PillSelect's own knobs project as `--uxm-pill-select-*` custom\n *     properties on the rendered atom. Inline-on-element wins over\n *     class-on-element for custom properties, so live slider drags flash\n *     through even when overrides have been published — same Pattern A\n *     used by the rest of the previews.\n *   - The forced-state modifier class (`uxm-pill-select--state-{value}`)\n *     mirrors the production `:hover` / `:focus-visible` /\n *     `[aria-disabled=\"true\"]` rules so the editor can paint any state\n *     on canvas without real interaction. For disabled, the modifier is\n *     redundant when we also pass `disabled` to the atom (the atom adds\n *     `aria-disabled=\"true\"` itself), but applying both keeps the\n *     preview's signal independent of the prop wiring.\n *\n * The preview shows the bare pill-select field — no label. Labels are\n * owned entirely by `<FormField>`; wrap with FormField when you want\n * one.\n */\nexport function PillSelectPreview({ styles, variants }: PreviewProps & { componentId: string }) {\n  const state = ((variants.state as string) ?? 'default') as\n    | 'default'\n    | 'hover'\n    | 'focus'\n    | 'disabled'\n    | 'error';\n  const chipsPosition = ((variants.chipsPosition as string) ?? 'below') as\n    | 'inside'\n    | 'below';\n\n  // Map every registry knob to its `--uxm-pill-select-{kebab}` CSS var.\n  // Numbers get a `px` suffix except `disabledOpacity` which is a unitless\n  // multiplier — special-case to avoid emitting `0.6px` (invalid).\n  const cssVars: Record<string, string | number> = {};\n  for (const [key, value] of Object.entries(styles)) {\n    const varName = '--uxm-pill-select-' + key.replace(/([A-Z])/g, '-$1').toLowerCase();\n    if (typeof value === 'number') {\n      cssVars[varName] = key === 'disabledOpacity' ? value : `${value}px`;\n    } else {\n      cssVars[varName] = String(value);\n    }\n  }\n\n  const modifierClass = `uxm-pill-select--state-${state}`;\n\n  return (\n    <div style={{ width: 360 }}>\n      <PillSelect\n        className={modifierClass}\n        style={cssVars as CSSProperties}\n        options={ALL_OPTIONS}\n        defaultValue={DEFAULT_SELECTED}\n        placeholder=\"Select tags…\"\n        disabled={state === 'disabled'}\n        chipsPosition={chipsPosition}\n        // Show the clear-all ✕ (next to the chevron) + its in-panel twin, so\n        // the Studio preview exercises the real clearable path.\n        clearable\n        // Error is a real prop (not a CSS pseudo), so the preview drives\n        // the actual atom path: `error` adds `__field--error` + renders the\n        // message. The error vars projected via `cssVars` above theme both.\n        error={state === 'error' ? 'Select at least one tag.' : undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4DM;AA3DN,gBAA2B;AAI3B,MAAM,cAAc,CAAC,SAAS,cAAc,YAAY,WAAW,WAAW,WAAW,QAAQ;AACjG,MAAM,mBAAmB,CAAC,SAAS,cAAc,UAAU;AA0BpD,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAA2C;AAC9F,QAAM,QAAU,SAAS,SAAoB;AAM7C,QAAM,gBAAkB,SAAS,iBAA4B;AAO7D,QAAM,UAA2C,CAAC;AAClD,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,MAAM,GAAG;AACjD,UAAM,UAAU,uBAAuB,IAAI,QAAQ,YAAY,KAAK,EAAE,YAAY;AAClF,QAAI,OAAO,UAAU,UAAU;AAC7B,cAAQ,OAAO,IAAI,QAAQ,oBAAoB,QAAQ,GAAG,KAAK;AAAA,IACjE,OAAO;AACL,cAAQ,OAAO,IAAI,OAAO,KAAK;AAAA,IACjC;AAAA,EACF;AAEA,QAAM,gBAAgB,0BAA0B,KAAK;AAErD,SACE,4CAAC,SAAI,OAAO,EAAE,OAAO,IAAI,GACvB;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,MACP,SAAS;AAAA,MACT,cAAc;AAAA,MACd,aAAY;AAAA,MACZ,UAAU,UAAU;AAAA,MACpB;AAAA,MAGA,WAAS;AAAA,MAIT,OAAO,UAAU,UAAU,6BAA6B;AAAA;AAAA,EAC1D,GACF;AAEJ;","names":[]}

package/dist/ui/pill-select/pill-select-preview.d.ts

@@ -0,0 +1,29 @@
+import type { PreviewProps } from '../../previews/types.js';
+/**
+ * Real atomic composition: the preview renders the actual <PillSelect>,
+ * which itself composes <Chip mode="input"> for each selected value. So:
+ *
+ *   - Chip-shape changes (radius, padding, colors) live on the Chip atom's
+ *     registry and flow into this preview automatically through Chip's
+ *     own CSS — no theming knobs duplicated here.
+ *   - PillSelect's own knobs project as `--uxm-pill-select-*` custom
+ *     properties on the rendered atom. Inline-on-element wins over
+ *     class-on-element for custom properties, so live slider drags flash
+ *     through even when overrides have been published — same Pattern A
+ *     used by the rest of the previews.
+ *   - The forced-state modifier class (`uxm-pill-select--state-{value}`)
+ *     mirrors the production `:hover` / `:focus-visible` /
+ *     `[aria-disabled="true"]` rules so the editor can paint any state
+ *     on canvas without real interaction. For disabled, the modifier is
+ *     redundant when we also pass `disabled` to the atom (the atom adds
+ *     `aria-disabled="true"` itself), but applying both keeps the
+ *     preview's signal independent of the prop wiring.
+ *
+ * The preview shows the bare pill-select field — no label. Labels are
+ * owned entirely by `<FormField>`; wrap with FormField when you want
+ * one.
+ */
+export declare function PillSelectPreview({ styles, variants }: PreviewProps & {
+    componentId: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=pill-select-preview.d.ts.map

package/dist/ui/pill-select/pill-select-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill-select-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/pill-select/pill-select-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAQrD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,GAAG;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,2CA8C7F"}

package/dist/ui/pill-select/pill-select-preview.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { PillSelect } from "../../ui/index.js";
+const ALL_OPTIONS = ["React", "TypeScript", "Tailwind", "Next.js", "Node.js", "GraphQL", "Prisma"];
+const DEFAULT_SELECTED = ["React", "TypeScript", "Tailwind"];
+function PillSelectPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const chipsPosition = variants.chipsPosition ?? "below";
+  const cssVars = {};
+  for (const [key, value] of Object.entries(styles)) {
+    const varName = "--uxm-pill-select-" + key.replace(/([A-Z])/g, "-$1").toLowerCase();
+    if (typeof value === "number") {
+      cssVars[varName] = key === "disabledOpacity" ? value : `${value}px`;
+    } else {
+      cssVars[varName] = String(value);
+    }
+  }
+  const modifierClass = `uxm-pill-select--state-${state}`;
+  return /* @__PURE__ */ jsx("div", { style: { width: 360 }, children: /* @__PURE__ */ jsx(
+    PillSelect,
+    {
+      className: modifierClass,
+      style: cssVars,
+      options: ALL_OPTIONS,
+      defaultValue: DEFAULT_SELECTED,
+      placeholder: "Select tags\u2026",
+      disabled: state === "disabled",
+      chipsPosition,
+      clearable: true,
+      error: state === "error" ? "Select at least one tag." : void 0
+    }
+  ) });
+}
+export {
+  PillSelectPreview
+};
+//# sourceMappingURL=pill-select-preview.js.map

package/dist/ui/pill-select/pill-select-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/pill-select/pill-select-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { PillSelect } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nconst ALL_OPTIONS = ['React', 'TypeScript', 'Tailwind', 'Next.js', 'Node.js', 'GraphQL', 'Prisma'];\nconst DEFAULT_SELECTED = ['React', 'TypeScript', 'Tailwind'];\n\n/**\n * Real atomic composition: the preview renders the actual <PillSelect>,\n * which itself composes <Chip mode=\"input\"> for each selected value. So:\n *\n *   - Chip-shape changes (radius, padding, colors) live on the Chip atom's\n *     registry and flow into this preview automatically through Chip's\n *     own CSS — no theming knobs duplicated here.\n *   - PillSelect's own knobs project as `--uxm-pill-select-*` custom\n *     properties on the rendered atom. Inline-on-element wins over\n *     class-on-element for custom properties, so live slider drags flash\n *     through even when overrides have been published — same Pattern A\n *     used by the rest of the previews.\n *   - The forced-state modifier class (`uxm-pill-select--state-{value}`)\n *     mirrors the production `:hover` / `:focus-visible` /\n *     `[aria-disabled=\"true\"]` rules so the editor can paint any state\n *     on canvas without real interaction. For disabled, the modifier is\n *     redundant when we also pass `disabled` to the atom (the atom adds\n *     `aria-disabled=\"true\"` itself), but applying both keeps the\n *     preview's signal independent of the prop wiring.\n *\n * The preview shows the bare pill-select field — no label. Labels are\n * owned entirely by `<FormField>`; wrap with FormField when you want\n * one.\n */\nexport function PillSelectPreview({ styles, variants }: PreviewProps & { componentId: string }) {\n  const state = ((variants.state as string) ?? 'default') as\n    | 'default'\n    | 'hover'\n    | 'focus'\n    | 'disabled'\n    | 'error';\n  const chipsPosition = ((variants.chipsPosition as string) ?? 'below') as\n    | 'inside'\n    | 'below';\n\n  // Map every registry knob to its `--uxm-pill-select-{kebab}` CSS var.\n  // Numbers get a `px` suffix except `disabledOpacity` which is a unitless\n  // multiplier — special-case to avoid emitting `0.6px` (invalid).\n  const cssVars: Record<string, string | number> = {};\n  for (const [key, value] of Object.entries(styles)) {\n    const varName = '--uxm-pill-select-' + key.replace(/([A-Z])/g, '-$1').toLowerCase();\n    if (typeof value === 'number') {\n      cssVars[varName] = key === 'disabledOpacity' ? value : `${value}px`;\n    } else {\n      cssVars[varName] = String(value);\n    }\n  }\n\n  const modifierClass = `uxm-pill-select--state-${state}`;\n\n  return (\n    <div style={{ width: 360 }}>\n      <PillSelect\n        className={modifierClass}\n        style={cssVars as CSSProperties}\n        options={ALL_OPTIONS}\n        defaultValue={DEFAULT_SELECTED}\n        placeholder=\"Select tags…\"\n        disabled={state === 'disabled'}\n        chipsPosition={chipsPosition}\n        // Show the clear-all ✕ (next to the chevron) + its in-panel twin, so\n        // the Studio preview exercises the real clearable path.\n        clearable\n        // Error is a real prop (not a CSS pseudo), so the preview drives\n        // the actual atom path: `error` adds `__field--error` + renders the\n        // message. The error vars projected via `cssVars` above theme both.\n        error={state === 'error' ? 'Select at least one tag.' : undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":"AA4DM;AA3DN,SAAS,kBAAkB;AAI3B,MAAM,cAAc,CAAC,SAAS,cAAc,YAAY,WAAW,WAAW,WAAW,QAAQ;AACjG,MAAM,mBAAmB,CAAC,SAAS,cAAc,UAAU;AA0BpD,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAA2C;AAC9F,QAAM,QAAU,SAAS,SAAoB;AAM7C,QAAM,gBAAkB,SAAS,iBAA4B;AAO7D,QAAM,UAA2C,CAAC;AAClD,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,MAAM,GAAG;AACjD,UAAM,UAAU,uBAAuB,IAAI,QAAQ,YAAY,KAAK,EAAE,YAAY;AAClF,QAAI,OAAO,UAAU,UAAU;AAC7B,cAAQ,OAAO,IAAI,QAAQ,oBAAoB,QAAQ,GAAG,KAAK;AAAA,IACjE,OAAO;AACL,cAAQ,OAAO,IAAI,OAAO,KAAK;AAAA,IACjC;AAAA,EACF;AAEA,QAAM,gBAAgB,0BAA0B,KAAK;AAErD,SACE,oBAAC,SAAI,OAAO,EAAE,OAAO,IAAI,GACvB;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,MACP,SAAS;AAAA,MACT,cAAc;AAAA,MACd,aAAY;AAAA,MACZ,UAAU,UAAU;AAAA,MACpB;AAAA,MAGA,WAAS;AAAA,MAIT,OAAO,UAAU,UAAU,6BAA6B;AAAA;AAAA,EAC1D,GACF;AAEJ;","names":[]}

package/dist/ui/pill-select/pill-select.cjs

@@ -0,0 +1,187 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var pill_select_exports = {};
+__export(pill_select_exports, {
+  PillSelect: () => PillSelect
+});
+module.exports = __toCommonJS(pill_select_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_button = require("../button/index.cjs");
+var import_chip = require("../chip/index.cjs");
+var import_field_error = require("../field-error/index.cjs");
+var import_icon = require("../icon/index.cjs");
+var import_icon_button = require("../icon-button/index.cjs");
+var import_listbox = require("../listbox/index.cjs");
+function PillSelect({
+  options,
+  value,
+  defaultValue = [],
+  placeholder = "Add\u2026",
+  onChange,
+  disabled = false,
+  chipsPosition = "below",
+  className,
+  error,
+  required = false,
+  requiredMessage,
+  clearable = false,
+  clearLabel = "Clear all selections",
+  ...rest
+}) {
+  const errorId = (0, import_react.useId)();
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = (0, import_react.useState)(defaultValue);
+  const selected = isControlled ? value : internal;
+  const [reqError, setReqError] = (0, import_react.useState)(null);
+  const shownError = error ?? reqError ?? void 0;
+  const setSelected = (next) => {
+    if (!isControlled) setInternal(next);
+    onChange?.(next);
+    if (required) {
+      setReqError(next.length === 0 ? requiredMessage ?? import_listbox.DEFAULT_MULTI_REQUIRED_MESSAGE : null);
+    }
+  };
+  const remove = (tag) => setSelected(selected.filter((t) => t !== tag));
+  const items = (0, import_react.useMemo)(() => options.map((o) => ({ value: o, label: o })), [options]);
+  const selectedItems = (0, import_react.useMemo)(
+    () => selected.map((s) => ({ value: s, label: s })),
+    [selected]
+  );
+  const handleChange = (next) => {
+    setSelected(next.map((n) => n.value));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_helpers.cn)(
+        "uxm-pill-select",
+        `uxm-pill-select--chips-${chipsPosition}`,
+        disabled && "uxm-pill-select--disabled",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_listbox.MultiListbox,
+          {
+            items,
+            getKey: (o) => o.value,
+            getLabel: (o) => o.label,
+            value: selectedItems,
+            onChange: handleChange,
+            footer: clearable ? ({ clear, selected: sel }) => sel.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_button.ButtonGhost, { className: "uxm-listbox__footer-clear-option", onClick: clear, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "close", size: 12 }),
+              "Clear all"
+            ] }) : null : void 0,
+            disabled,
+            excludeSelected: true,
+            showCheckbox: false,
+            renderTrigger: ({ open, triggerProps }) => (
+              // Trigger is a `<div role="combobox">` so chip × buttons can
+              // nest inside without invalid HTML (chips-inside mode). The
+              // existing PillSelect convention — same DOM, same aria wiring.
+              // eslint-disable-next-line jsx-a11y/role-has-required-aria-props -- aria-expanded (always) and aria-controls (while open) arrive via the triggerProps spread; the rule can't see through it
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  role: "combobox",
+                  ...triggerProps,
+                  tabIndex: disabled ? -1 : 0,
+                  "aria-disabled": disabled || void 0,
+                  "aria-required": required || void 0,
+                  "aria-invalid": shownError ? true : void 0,
+                  "aria-describedby": (0, import_helpers.mergeDescribedBy)(rest["aria-describedby"], shownError ? errorId : void 0),
+                  className: (0, import_helpers.cn)(
+                    "uxm-pill-select__field",
+                    shownError && "uxm-pill-select__field--error"
+                  ),
+                  onKeyDown: (e) => {
+                    if (e.target !== e.currentTarget) return;
+                    triggerProps.onKeyDown(e);
+                  },
+                  children: [
+                    chipsPosition === "inside" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                      selected.map((tag) => (
+                        // Forward disabled so chip × buttons lose their tab
+                        // stops and become click-inert. Chip's onClick gates
+                        // on its own `disabled` already.
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_chip.Chip, { disabled, onRemove: () => remove(tag), children: tag }, tag)
+                      )),
+                      selected.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-pill-select__placeholder", children: placeholder })
+                    ] }) : (
+                      // Chips-below mode — trigger is a compact label + chevron.
+                      // "N selected" when populated, placeholder otherwise.
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "span",
+                        {
+                          className: (0, import_helpers.cn)(
+                            "uxm-pill-select__placeholder",
+                            selected.length > 0 && "uxm-pill-select__placeholder--filled"
+                          ),
+                          children: selected.length === 0 ? placeholder : `${selected.length} selected`
+                        }
+                      )
+                    ),
+                    clearable && selected.length > 0 && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_icon_button.IconButton,
+                      {
+                        "aria-label": clearLabel,
+                        className: "uxm-field-clear",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          setSelected([]);
+                        },
+                        onMouseDown: (e) => e.stopPropagation(),
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" || e.key === " ") e.stopPropagation();
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "close", size: 12 })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_icon.Icon,
+                      {
+                        glyph: "chevron-down",
+                        size: 14,
+                        className: "uxm-pill-select__chevron",
+                        style: { transform: open ? "rotate(180deg)" : "none" },
+                        "aria-hidden": true
+                      }
+                    )
+                  ]
+                }
+              )
+            ),
+            renderItem: (o) => o.label
+          }
+        ),
+        chipsPosition === "below" && selected.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-pill-select__chips-row", children: selected.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_chip.Chip, { disabled, onRemove: () => remove(tag), children: tag }, tag)) }),
+        shownError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field_error.FieldError, { id: errorId, className: "uxm-pill-select__error-message", children: shownError })
+      ]
+    }
+  );
+}
+PillSelect.hasError = true;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PillSelect
+});
+//# sourceMappingURL=pill-select.cjs.map