react-animated-select 0.7.7 → 0.8.0

package/dist/select.js

@@ -0,0 +1,165 @@
+"use client";
+import { jsx as f, jsxs as w } from "react/jsx-runtime";
+import { useDeepStable as k, useShallowStable as T, SelectConfigContext as M, SelectActionsContext as A, SelectStateContext as D } from "./state.js";
+import { useMemo as E, Children as R, isValidElement as b, Fragment as $ } from "react";
+import L from "./trigger.js";
+import F from "./dropdown.js";
+import I from "./liveRegion.js";
+import { warnOnce as u, icons as v } from "./utils.js";
+import N from "./useSelect.js";
+import './theme.css';import './base.css';/* empty css         */
+/* empty css          */
+const K = {}, l = (e) => e != null && e !== "", C = (e) => e ? typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(C).join(" ").replace(/\s+/g, " ").trim() : b(e) ? C(e.props.children) : "" : "", V = ({ name: e, label: o, id: t, value: s, className: a, style: n, children: i, disabled: p, group: r }, O, m) => {
+  const c = C(i), g = s !== void 0 ? s : c;
+  return i != null && !c && !l(o) && !l(e) && !l(t) && !l(s) && u("no text", "<Option> has content but no text to show in the title or chips. Add a `label` (or `value`), or enable `valueAsOption`."), {
+    id: l(t) ? String(t) : O,
+    userId: l(t) ? t : g,
+    value: g,
+    label: l(o) ? String(o) : l(e) ? String(e) : c || (l(t) ? String(t) : ""),
+    jsx: i,
+    hasJsx: i != null,
+    className: a,
+    style: n,
+    disabled: !!p,
+    group: r || m || null
+  };
+}, j = ({ name: e, label: o, value: t, id: s, disabled: a, className: n = "", style: i = K }, p) => {
+  const r = e ?? o ?? s ?? t;
+  return { disabled: !!a, isGroupMarker: !0, group: l(r) ? String(r) : p, className: n, style: i };
+}, B = (e) => `<${typeof e == "string" ? e : e?.displayName || e?.name || "Component"}>`, x = (e, o, t = null, s = "o", a = []) => (R.toArray(e).forEach((n) => {
+  if (!b(n)) {
+    u("text", `Text inside <Select> or <OptGroup> is ignored ("${String(n).slice(0, 30)}"). Wrap it in <Option>.`);
+    return;
+  }
+  const i = `${s}-${String(n.key).slice(1).replace(/[:$]/g, (r) => r === ":" ? "-" : "k").replace(/[^\p{L}\p{N}-]/gu, "")}`, p = n.type?.racKind;
+  if (n.type === $) x(n.props.children, o, t, i, a);
+  else if (p === "option") a.push(V(n.props, i, t));
+  else if (p === "define") x(n.type.racRender(n.props), o, t, i, a);
+  else if (p === "group") {
+    const r = j(n.props, o);
+    a.push(r), x(n.props.children, o, r.group, i, a);
+  } else {
+    const r = B(n.type);
+    u(`child ${r}`, `${r} inside <Select> is ignored: only <Option/>, <OptGroup/> and defineOption() components are read. Put custom content inside <Option>, or wrap the component with defineOption().`);
+  }
+}), a), P = /* @__PURE__ */ new Set(["ref", "options", "value", "defaultValue", "onChange", "children", "loadMore", "open", "onOpenChange", "onFocus", "onBlur", "onKeyDown", "childrenFirst", "groupsClosed", "disabled", "loading", "error", "plugins"]), U = /^(aria|data)-/, h = {
+  options: [],
+  value: void 0,
+  defaultValue: void 0,
+  onChange: void 0,
+  multiple: !1,
+  childrenFirst: !1,
+  groupsClosed: !1,
+  plugins: [],
+  disabled: !1,
+  loading: !1,
+  error: !1,
+  open: void 0,
+  onOpenChange: void 0,
+  popup: !0,
+  onFocus: void 0,
+  onBlur: void 0,
+  onKeyDown: void 0,
+  id: void 0,
+  name: void 0,
+  form: void 0,
+  required: !1,
+  hasMore: !1,
+  loadMore: void 0,
+  loadButton: !1,
+  loadOffset: 100,
+  loadAhead: 3,
+  placeholder: "Choose option",
+  selectedText: void 0,
+  texts: {
+    empty: "No options",
+    disabled: "Disabled",
+    loading: "Loading",
+    error: "Failed to load",
+    clear: "Clear selection",
+    remove: "Remove",
+    loadMore: "Load more",
+    loadingMore: "Loading",
+    emptyOption: "Empty option",
+    invalidOption: "Invalid option",
+    disabledOption: "Disabled option",
+    emptyGroup: "Empty group",
+    groupOpen: "expanded",
+    groupClosed: "collapsed",
+    list: "Options",
+    required: void 0,
+    removed: "Removed {label}",
+    cleared: "Selection cleared",
+    selected: "{n} selected",
+    loaded: "{n} more options loaded"
+  },
+  renderOption: void 0,
+  valueAsOption: !1,
+  icons: { arrow: v.ArrowUp, clear: v.XMark, remove: v.XMark, check: v.Checkmark, checkbox: void 0 },
+  deleteInline: !1,
+  deleteAlways: !1,
+  className: "",
+  optionsClassName: "",
+  style: {},
+  container: void 0,
+  duration: 300,
+  easing: "ease",
+  offset: 1,
+  animateOpacity: !0,
+  keepMounted: !1
+}, S = {
+  visibility: "open",
+  setVisibility: "onOpenChange",
+  ownBehavior: "open without onOpenChange",
+  onOpen: "onOpenChange",
+  onClose: "onOpenChange",
+  unmount: "keepMounted (inverted)",
+  showDelete: "deleteAlways",
+  OpenIcon: "icons.arrow",
+  ClearIcon: "icons.clear",
+  DelIcon: "icons.remove",
+  Checkmark: "icons.check",
+  Checkbox: "icons.checkbox",
+  emptyText: "texts.empty",
+  disabledText: "texts.disabled",
+  loadingText: "texts.loading",
+  errorText: "texts.error",
+  clearText: "texts.clear",
+  removeText: "texts.remove",
+  loadButtonText: "texts.loadMore",
+  loadMoreText: "texts.loadingMore",
+  emptyOption: "texts.emptyOption",
+  invalidOption: "texts.invalidOption",
+  disabledOption: "texts.disabledOption"
+}, y = (e, o) => {
+  const t = { ...e };
+  for (const s in o) o[s] !== void 0 && (t[s] = o[s]);
+  return t;
+};
+function oe(e) {
+  for (const d in e) d in S && u(`renamed ${d}`, `The \`${d}\` prop was removed. Use \`${S[d]}\`.`);
+  e.value !== void 0 && !e.onChange && u("read-only value", "`value` is set without `onChange`, so the Select is read-only. Pass `onChange`, or `defaultValue` instead of `value`.");
+  const o = y(h, e);
+  o.texts = y(h.texts, e.texts), o.icons = y(h.icons, e.icons);
+  const t = o.texts.emptyGroup, s = k(E(() => x(o.children, t), [o.children, t])), { selectId: a, selectRef: n, highlightStore: i, ext: p, state: r, actions: O } = N(o, s), m = {}, c = {};
+  for (const d in o) P.has(d) || ((U.test(d) ? c : m)[d] = o[d]);
+  const g = T({ ...m, attrs: c, selectId: a, selectRef: n, highlightStore: i, ext: p });
+  return /* @__PURE__ */ f(M.Provider, { value: g, children: /* @__PURE__ */ f(A.Provider, { value: O, children: /* @__PURE__ */ w(D.Provider, { value: r, children: [
+    /* @__PURE__ */ f(L, {}),
+    /* @__PURE__ */ f(F, {}),
+    /* @__PURE__ */ f(I, {})
+  ] }) }) });
+}
+function Y() {
+  return u("option outside", "<Option/> was rendered outside <Select>, or inside a component that <Select> cannot read. Use it as a direct child, or wrap the component with defineOption()."), null;
+}
+Y.racKind = "option";
+function _() {
+  return null;
+}
+_.racKind = "group";
+export {
+  _ as OptGroup,
+  Y as Option,
+  oe as Select
+};

package/dist/state.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),u=o.createContext(null),i=o.createContext(null),S=o.createContext(null),a=(e,t)=>{const c=typeof t=="function"?t(e):t;return c===e?e:Object.keys(c).some(n=>!Object.is(c[n],e[n]))?{...e,...c}:e},f=e=>{let t=e;const c=new Set;return{get:()=>t,set:s=>{Object.keys(s).every(n=>Object.is(s[n],t[n]))||(t={...t,...s},c.forEach(n=>n()))},subscribe:s=>(c.add(s),()=>c.delete(s))}},y=e=>{const t=o.useRef(e);o.useInsertionEffect(()=>{t.current=e});const[c]=o.useState(()=>Object.fromEntries(Object.keys(e).map(s=>[s,(...n)=>t.current[s](...n)])));return c},l=(e,t)=>{const[c,s]=o.useState(e);return c===e||t(c,e)?c:(s(e),e)},j=(e,t)=>e===t||!!e&&!!t&&Object.keys(e).length===Object.keys(t).length&&Object.keys(e).every(c=>Object.is(e[c],t[c])),r=(e,t,c=0)=>{if(Object.is(e,t))return!0;if(c>12||typeof e!="object"||typeof t!="object"||e===null||t===null||Array.isArray(e)!==Array.isArray(t))return!1;if(e.$$typeof||t.$$typeof)return e.$$typeof===t.$$typeof&&e.type===t.type&&e.key===t.key&&r(e.props,t.props,c+1);const s=Object.keys(e);return s.length===Object.keys(t).length&&s.every(n=>Object.hasOwn(t,n)&&r(e[n],t[n],c+1))},O=new Set(["style","texts","icons","attrs"]),b=(e,t)=>{const c=Object.keys(t);return c.length===Object.keys(e).length&&c.every(s=>O.has(s)?j(e[s],t[s]):Object.is(e[s],t[s]))},p=e=>l(e,b),g=e=>l(e,r);exports.SelectActionsContext=i;exports.SelectConfigContext=u;exports.SelectStateContext=S;exports.compactReducer=a;exports.createStore=f;exports.deepEqual=r;exports.useDeepStable=g;exports.useShallowStable=p;exports.useStableActions=y;

package/dist/state.js

@@ -0,0 +1,50 @@
+"use client";
+import { createContext as o, useState as l, useRef as i, useInsertionEffect as f } from "react";
+const p = /* @__PURE__ */ o(null), b = /* @__PURE__ */ o(null), a = /* @__PURE__ */ o(null), g = (e, t) => {
+  const s = typeof t == "function" ? t(e) : t;
+  return s === e ? e : Object.keys(s).some((n) => !Object.is(s[n], e[n])) ? { ...e, ...s } : e;
+}, h = (e) => {
+  let t = e;
+  const s = /* @__PURE__ */ new Set();
+  return {
+    get: () => t,
+    set: (c) => {
+      Object.keys(c).every((n) => Object.is(c[n], t[n])) || (t = { ...t, ...c }, s.forEach((n) => n()));
+    },
+    subscribe: (c) => (s.add(c), () => s.delete(c))
+  };
+}, E = (e) => {
+  const t = i(e);
+  f(() => {
+    t.current = e;
+  });
+  const [s] = l(() => Object.fromEntries(
+    Object.keys(e).map((c) => [c, (...n) => t.current[c](...n)])
+  ));
+  return s;
+}, u = (e, t) => {
+  const [s, c] = l(e);
+  return s === e || t(s, e) ? s : (c(e), e);
+}, y = (e, t) => e === t || !!e && !!t && Object.keys(e).length === Object.keys(t).length && Object.keys(e).every((s) => Object.is(e[s], t[s])), r = (e, t, s = 0) => {
+  if (Object.is(e, t)) return !0;
+  if (s > 12 || typeof e != "object" || typeof t != "object" || e === null || t === null || Array.isArray(e) !== Array.isArray(t)) return !1;
+  if (e.$$typeof || t.$$typeof) return e.$$typeof === t.$$typeof && e.type === t.type && e.key === t.key && r(e.props, t.props, s + 1);
+  const c = Object.keys(e);
+  return c.length === Object.keys(t).length && c.every((n) => Object.hasOwn(t, n) && r(e[n], t[n], s + 1));
+}, j = /* @__PURE__ */ new Set(["style", "texts", "icons", "attrs"]), O = (e, t) => {
+  const s = Object.keys(t);
+  return s.length === Object.keys(e).length && s.every(
+    (c) => j.has(c) ? y(e[c], t[c]) : Object.is(e[c], t[c])
+  );
+}, $ = (e) => u(e, O), m = (e) => u(e, r);
+export {
+  b as SelectActionsContext,
+  p as SelectConfigContext,
+  a as SelectStateContext,
+  g as compactReducer,
+  h as createStore,
+  r as deepEqual,
+  m as useDeepStable,
+  $ as useShallowStable,
+  E as useStableActions
+};

package/dist/style.css

@@ -0,0 +1,4 @@
+@layer rac.base, rac.theme;
+@layer rac.base,rac.theme;@property --rac-list-max-height{syntax: "<length>"; inherits: true; initial-value: 250px;}@layer rac.base{:root{--rac-row: 2em}.rac-select,.rac-options{--rac-duration-fast: calc(var(--rac-duration) * .5)}@media(prefers-reduced-motion:reduce){.rac-select,.rac-options{--rac-duration: 1ms !important}.rac-dots i{animation:none}}.rac-select{position:relative;display:flex;align-items:center;box-sizing:border-box;min-width:0;max-width:100%;cursor:pointer}.rac-select:not([aria-haspopup]){cursor:default}.rac-select[aria-busy=true]{cursor:progress}.rac-select[aria-disabled=true]{cursor:not-allowed}.rac-select[aria-disabled=true][aria-busy=true]{cursor:wait}.rac-value{flex:1;min-width:0;min-height:var(--rac-row);display:flex;flex-wrap:wrap;align-items:center}.rac-title{min-width:0;max-width:calc(100% - .25px);overflow-x:clip;white-space:nowrap;text-overflow:ellipsis}.rac-dots{display:inline-flex;gap:.17em;margin-inline-start:.25em}.rac-dots i{width:.25em;height:.25em;border-radius:50%;background:currentColor;animation:rac-blink 1.4s infinite both}.rac-dots i:nth-child(2){animation-delay:.2s}.rac-dots i:nth-child(3){animation-delay:.4s}.rac-clear,.rac-arrow{display:grid;place-items:center;align-self:center}.rac-clear{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}.rac-arrow,.rac-group-arrow{transition:rotate var(--rac-duration) var(--rac-ease)}.rac-select:not([data-placement=top],[aria-expanded=true]) .rac-arrow,.rac-select[data-placement=top][aria-expanded=true] .rac-arrow{rotate:180deg}.rac-icon{height:1em}.rac-input{position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none}.rac-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(any-pointer:coarse){.rac-clear{position:relative}.rac-arrow{pointer-events:none}.rac-clear:before{content:"";position:absolute;inset:min(0px,50% - 12px)}}.rac-options{box-sizing:border-box;z-index:2147483647;overflow:clip}.rac-options{transition:opacity var(--rac-duration) var(--rac-ease),visibility 0s}.rac-options[data-offscreen]{opacity:0;visibility:hidden;transition-delay:0s,var(--rac-duration)}.rac-list{max-height:var(--rac-list-max-height);overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;scroll-behavior:smooth}.rac-option{display:flex;justify-content:space-between;align-items:center;overflow-wrap:anywhere;cursor:pointer}.rac-option[aria-disabled=true]{cursor:not-allowed}.rac-option[data-error]{cursor:default}.rac-option[data-loading]{justify-content:start;align-items:baseline;cursor:wait}.rac-check{position:relative;display:flex;justify-content:center;align-items:center}.rac-check[data-default]{width:1em;height:1em;border:1px solid}.rac-checkmark{position:absolute;width:auto;height:1em;opacity:0;scale:0;transition:opacity var(--rac-duration) var(--rac-ease),scale var(--rac-duration) var(--rac-ease)}.rac-option[aria-selected=true] .rac-checkmark{opacity:1;scale:1}.rac-group{display:flex;justify-content:space-between;align-items:center;cursor:pointer}.rac-group[data-disabled]{cursor:not-allowed}.rac-group-arrow{display:grid}.rac-group[data-open]>.rac-group-arrow{rotate:180deg}@keyframes rac-blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}}
+@layer rac.base,rac.theme;@layer rac.theme{:root{--rac-bg: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-fg: CanvasText;--rac-danger: #e7000b;--rac-success: #4caf50;--rac-radius: 0px}.rac-select,.rac-options{--rac-tint-1: color-mix(in srgb, var(--rac-fg) 5%, var(--rac-bg));--rac-tint-2: color-mix(in srgb, var(--rac-fg) 10%, var(--rac-bg));--rac-tint-3: color-mix(in srgb, var(--rac-fg) 20%, var(--rac-bg));--rac-muted: color-mix(in srgb, var(--rac-fg) 55%, var(--rac-bg))}.rac-select,.rac-options{border-radius:var(--rac-radius)}.rac-select{padding:0 .5em;border:2px solid var(--rac-bg);background-color:var(--rac-bg);color:var(--rac-fg);transition:background-color var(--rac-duration) var(--rac-ease),border-color var(--rac-duration) var(--rac-ease),opacity var(--rac-duration) var(--rac-ease)}.rac-select[aria-haspopup]:not([aria-disabled=true]):hover{background-color:var(--rac-tint-1)}.rac-select[aria-haspopup]:not([aria-disabled=true],[data-error],[data-invalid]):hover{border-color:var(--rac-tint-1)}.rac-select[aria-disabled=true]{opacity:.75}.rac-select:is([data-error],[data-invalid]){border-color:var(--rac-danger)}.rac-select[aria-busy=true]:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--rac-muted),transparent) 0 100% / 40% 2px no-repeat;animation:rac-busy 1.5s ease-in-out infinite;pointer-events:none}@media(prefers-reduced-motion:reduce){.rac-select[aria-busy=true]:after{animation:none;background-size:100% 2px}}:is(.rac-title,.rac-option)[data-bool=true]{color:var(--rac-success)}:is(.rac-title,.rac-option)[data-bool=false]{color:var(--rac-danger)}.rac-list{background-color:var(--rac-bg);color:var(--rac-fg);scrollbar-color:var(--rac-tint-2) var(--rac-tint-1);scrollbar-width:thin;scroll-padding-block:.5em}.rac-option{gap:.5em;padding:.5em;transition:background-color var(--rac-duration-fast) var(--rac-ease)}.rac-option[data-highlighted]{background-color:var(--rac-tint-2)}.rac-option[aria-selected=true]{background-color:var(--rac-tint-3)}.rac-option[aria-selected=true][data-highlighted]{background-color:color-mix(in srgb,var(--rac-fg) 30%,var(--rac-bg))}.rac-option[aria-disabled=true]{color:var(--rac-muted)}.rac-option[data-invalid]{color:var(--rac-danger)}.rac-option[data-loading]{gap:0;color:var(--rac-muted)}.rac-option[data-error]{color:var(--rac-danger)}.rac-check{margin-inline-end:.2em}.rac-check[data-default]{border-color:var(--rac-muted)}.rac-group{padding:.5em;font-size:1.25em;font-weight:700;transition:background-color var(--rac-duration-fast) var(--rac-ease)}.rac-group[data-highlighted]{background-color:var(--rac-tint-2)}.rac-group[data-disabled]{color:var(--rac-muted)}.rac-group-items{padding-inline-start:1em}@keyframes rac-busy{0%{background-position-x:-100%}to{background-position-x:200%}}}
+@layer rac.base,rac.theme;@layer rac.base{.rac-chip-slot{display:flex;align-items:center;max-width:100%}.rac-chip-text,.rac-chip>.rac-option-jsx{min-width:0;overflow-x:clip}.rac-chip-text{text-overflow:ellipsis}.rac-chip{position:relative;display:inline-flex;flex-shrink:0;align-items:center;box-sizing:border-box;max-width:inherit;white-space:nowrap;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:pan-y}.rac-chip-del{position:absolute;flex-shrink:0;inset-inline-end:0;height:100%;display:grid;align-items:center;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}.rac-chip-del:disabled{cursor:inherit}.rac-select:is([data-deleting],[data-inline-delete]) .rac-chip-del{position:relative}@media(any-pointer:coarse){.rac-chip-del:before{content:"";position:absolute;inset:min(0px,50% - 12px)}}.rac-spacer{flex-basis:100%;height:0;margin-inline-end:1px}}@layer rac.theme{.rac-chip{min-height:calc(var(--rac-row) - .5em);margin-block:.25em;margin-inline-end:.5em;padding-inline:.25em;border-radius:calc(var(--rac-radius) / 2);line-height:normal;background-color:var(--rac-tint-2);transition:background-color var(--rac-duration-fast) var(--rac-ease)}@media(hover:hover){.rac-chip:hover{background-color:var(--rac-tint-3)}}.rac-select[data-deleting] .rac-chip{background-color:color-mix(in srgb,var(--rac-danger) 15%,var(--rac-bg));animation:rac-shake .3s infinite}@media(prefers-reduced-motion:reduce){.rac-select[data-deleting] .rac-chip{animation:none}}.rac-chip-del{border-start-end-radius:inherit;border-end-end-radius:inherit;background-color:color-mix(in srgb,var(--rac-danger) 30%,var(--rac-bg));transition:color var(--rac-duration) var(--rac-ease),background-color var(--rac-duration) var(--rac-ease)}.rac-chip-del:hover{color:var(--rac-danger)}.rac-select:is([data-deleting],[data-inline-delete]) .rac-chip-del{background-color:transparent}@keyframes rac-shake{0%{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}to{transform:rotate(0)}}}

package/dist/theme.css

@@ -0,0 +1 @@
+@layer rac.base,rac.theme;@layer rac.theme{:root{--rac-bg: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-fg: CanvasText;--rac-danger: #e7000b;--rac-success: #4caf50;--rac-radius: 0px}.rac-select,.rac-options{--rac-tint-1: color-mix(in srgb, var(--rac-fg) 5%, var(--rac-bg));--rac-tint-2: color-mix(in srgb, var(--rac-fg) 10%, var(--rac-bg));--rac-tint-3: color-mix(in srgb, var(--rac-fg) 20%, var(--rac-bg));--rac-muted: color-mix(in srgb, var(--rac-fg) 55%, var(--rac-bg))}.rac-select,.rac-options{border-radius:var(--rac-radius)}.rac-select{padding:0 .5em;border:2px solid var(--rac-bg);background-color:var(--rac-bg);color:var(--rac-fg);transition:background-color var(--rac-duration) var(--rac-ease),border-color var(--rac-duration) var(--rac-ease),opacity var(--rac-duration) var(--rac-ease)}.rac-select[aria-haspopup]:not([aria-disabled=true]):hover{background-color:var(--rac-tint-1)}.rac-select[aria-haspopup]:not([aria-disabled=true],[data-error],[data-invalid]):hover{border-color:var(--rac-tint-1)}.rac-select[aria-disabled=true]{opacity:.75}.rac-select:is([data-error],[data-invalid]){border-color:var(--rac-danger)}.rac-select[aria-busy=true]:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--rac-muted),transparent) 0 100% / 40% 2px no-repeat;animation:rac-busy 1.5s ease-in-out infinite;pointer-events:none}@media(prefers-reduced-motion:reduce){.rac-select[aria-busy=true]:after{animation:none;background-size:100% 2px}}:is(.rac-title,.rac-option)[data-bool=true]{color:var(--rac-success)}:is(.rac-title,.rac-option)[data-bool=false]{color:var(--rac-danger)}.rac-list{background-color:var(--rac-bg);color:var(--rac-fg);scrollbar-color:var(--rac-tint-2) var(--rac-tint-1);scrollbar-width:thin;scroll-padding-block:.5em}.rac-option{gap:.5em;padding:.5em;transition:background-color var(--rac-duration-fast) var(--rac-ease)}.rac-option[data-highlighted]{background-color:var(--rac-tint-2)}.rac-option[aria-selected=true]{background-color:var(--rac-tint-3)}.rac-option[aria-selected=true][data-highlighted]{background-color:color-mix(in srgb,var(--rac-fg) 30%,var(--rac-bg))}.rac-option[aria-disabled=true]{color:var(--rac-muted)}.rac-option[data-invalid]{color:var(--rac-danger)}.rac-option[data-loading]{gap:0;color:var(--rac-muted)}.rac-option[data-error]{color:var(--rac-danger)}.rac-check{margin-inline-end:.2em}.rac-check[data-default]{border-color:var(--rac-muted)}.rac-group{padding:.5em;font-size:1.25em;font-weight:700;transition:background-color var(--rac-duration-fast) var(--rac-ease)}.rac-group[data-highlighted]{background-color:var(--rac-tint-2)}.rac-group[data-disabled]{color:var(--rac-muted)}.rac-group-items{padding-inline-start:1em}@keyframes rac-busy{0%{background-position-x:-100%}to{background-position-x:200%}}}

package/dist/trigger.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),b=require("./state.cjs"),o=require("./utils.cjs"),e=require("react"),L=require("./useSelectBehavior.cjs"),z=require("./model.cjs"),R=require("./motion.cjs"),K=[],M=()=>{},_=h=>h==null?"":typeof h=="object"?z.toJSON(h)??"":String(h),G=e.memo(function(){const{selectRef:m,multiple:r,name:d,form:g,required:f}=e.useContext(b.SelectConfigContext),{selected:C,selectedIDs:S,disabled:p,fieldsetDisabled:s}=e.useContext(b.SelectStateContext),{reset:n,markInvalid:v}=e.useContext(b.SelectActionsContext),c=e.useRef(null);e.useEffect(()=>{const t=c.current?.getRootNode();let l;const y=w=>{w.target===c.current?.form&&(clearTimeout(l),l=setTimeout(()=>w.defaultPrevented||n()))};return t?.addEventListener("reset",y,!0),()=>{clearTimeout(l),t?.removeEventListener("reset",y,!0)}},[n]);const x=r?S:C?[C]:K,u=!f&&(!d||r&&!x.length),a=u||!x.length?[""]:x.map(t=>_(t.original)),j=()=>m.current?.focus();return a.map((t,l)=>i.jsx("input",{className:"rac-input",ref:l?void 0:c,name:u?void 0:d,form:g,value:t,hidden:u,required:f&&!l,disabled:p&&!s,tabIndex:-1,"aria-hidden":"true",autoComplete:"off",onChange:M,onInvalid:v,onFocus:j},l))}),O=e.memo(function({hidden:m,settle:r}){const{multiple:d,selectedText:g,valueAsOption:f,renderOption:C,texts:S}=e.useContext(b.SelectConfigContext),{selectedIDs:p,title:s,valueOption:n,hasActualValue:v,loading:c,error:x}=e.useContext(b.SelectStateContext),[u]=e.useState(()=>new Set),a=f&&n?o.optionContent(n,C,!0):null,j=c&&!x&&!v,t=d&&p.length>0&&!g,l=`${t?"picked":a?n.id:s}${j?"-loading":""}`,y=n?.type==="boolean"?String(n.raw):void 0;return i.jsx(R.Presence,{children:!m&&i.jsxs(R.Collapse,{axis:"x",fade:!0,group:u,className:o.withClass("rac-title",a&&n.className),style:a?n.style:void 0,"data-bool":y,onEntered:r,onExited:r,children:[a?i.jsx("div",{className:"rac-option-jsx",children:a}):t?p.map(w=>w.name||S.emptyOption).join(", "):s,j&&o.dots]},l)})}),J=e.memo(function(){const{selectRef:m,multiple:r,valueAsOption:d,duration:g,easing:f,ext:C}=e.useContext(b.SelectConfigContext),S=r?C.Value:void 0,p=e.useRef(null),[s,n]=e.useState(d);d&&!s&&n(!0);const v=e.useRef({duration:g,easing:f});return e.useLayoutEffect(()=>{v.current={duration:g,easing:f}},[g,f]),e.useLayoutEffect(()=>{const c=p.current;if(!s||r||!c||typeof ResizeObserver>"u")return;const x={value:0,root:"",anim:null},u=new ResizeObserver(()=>o.followHeight(m.current,x,c.offsetHeight,v.current.duration,v.current.easing));return u.observe(c),()=>{u.disconnect(),x.anim?.cancel()}},[s,r,m]),S?i.jsx(S,{}):i.jsx("div",{className:"rac-value",ref:p,children:i.jsx(O,{})})}),Q=e.memo(function(){const{selectRef:m,selectId:r,highlightStore:d,className:g,style:f,duration:C,easing:S,deleteInline:p,icons:s,texts:n,placeholder:v,id:c,required:x,popup:u,attrs:a}=e.useContext(b.SelectConfigContext),{visibility:j,active:t,hasActualValue:l,deleting:y,loading:w,loadPending:T,error:N,invalid:q,normalizedOptions:E}=e.useContext(b.SelectStateContext),{handleBlur:A,handleFocus:D,handleKeyDown:F,toggleVisibility:P,clear:V}=e.useContext(b.SelectActionsContext),k=e.useSyncExternalStore(d.subscribe,()=>{const I=j?E[L.effectiveHighlight(d.get())]:null;return I?o.optionDomId(r,I.id):void 0},()=>{}),$=!!s.clear&&l&&t&&!y,B=!!s.arrow&&t&&!y&&u,H=u?{role:"combobox","aria-haspopup":"listbox","aria-controls":`${r}-listbox`,"aria-expanded":j,"aria-activedescendant":k,"aria-required":x||void 0}:{role:"group"};return i.jsxs("div",{...a,id:c,ref:m,style:{"--rac-duration":`${C}ms`,"--rac-ease":S,...f},className:o.withClass("rac-select",g),...t&&{onKeyDown:F,onFocus:D,onClick:P,onBlur:A},...H,"aria-disabled":!t,tabIndex:t?0:-1,"aria-busy":w||T||void 0,"aria-label":a["aria-label"]??(a["aria-labelledby"]?void 0:v),"aria-invalid":q||a["aria-invalid"],"aria-describedby":[a["aria-describedby"],N&&`${r}-error`].filter(Boolean).join(" ")||void 0,"data-inline-delete":o.flag(p),"data-empty":o.flag(!l),"data-deleting":o.flag(y),"data-error":o.flag(N),"data-invalid":o.flag(q),children:[i.jsx(J,{}),i.jsxs(R.Presence,{children:[$&&i.jsx(R.Collapse,{as:"button",type:"button",axis:"x",className:"rac-clear",tabIndex:-1,"aria-label":n.clear,onMouseDown:o.stopEvent,onClick:I=>{o.refocus(I,m),V(I)},children:o.renderIcon(s.clear)},"clear"),B&&i.jsx(R.Collapse,{axis:"x",className:"rac-arrow","aria-hidden":"true",children:o.renderIcon(s.arrow)},"arrow")]}),i.jsx(G,{})]})});exports.Title=O;exports.default=Q;

package/dist/trigger.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsxs as R, jsx as u } from "react/jsx-runtime";
+import { SelectConfigContext as N, SelectStateContext as F, SelectActionsContext as k } from "./state.js";
+import { optionDomId as W, flag as I, withClass as P, renderIcon as V, stopEvent as X, refocus as Y, optionContent as Z, dots as ee, followHeight as te } from "./utils.js";
+import { memo as O, useContext as g, useSyncExternalStore as oe, useState as $, useRef as D, useLayoutEffect as j, useEffect as ne } from "react";
+import { effectiveHighlight as re } from "./useSelectBehavior.js";
+import { toJSON as ie } from "./model.js";
+import { Presence as q, Collapse as E } from "./motion.js";
+const ae = [], le = () => {
+}, se = (b) => b == null ? "" : typeof b == "object" ? ie(b) ?? "" : String(b), ce = /* @__PURE__ */ O(function() {
+  const { selectRef: m, multiple: o, name: s, form: p, required: c } = g(N), { selected: h, selectedIDs: x, disabled: f, fieldsetDisabled: n } = g(F), { reset: t, markInvalid: v } = g(k), a = D(null);
+  ne(() => {
+    const e = a.current?.getRootNode();
+    let i;
+    const y = (C) => {
+      C.target === a.current?.form && (clearTimeout(i), i = setTimeout(() => C.defaultPrevented || t()));
+    };
+    return e?.addEventListener("reset", y, !0), () => {
+      clearTimeout(i), e?.removeEventListener("reset", y, !0);
+    };
+  }, [t]);
+  const d = o ? x : h ? [h] : ae, l = !c && (!s || o && !d.length), r = l || !d.length ? [""] : d.map((e) => se(e.original)), w = () => m.current?.focus();
+  return r.map(
+    (e, i) => /* @__PURE__ */ u("input", { className: "rac-input", ref: i ? void 0 : a, name: l ? void 0 : s, form: p, value: e, hidden: l, required: c && !i, disabled: f && !n, tabIndex: -1, "aria-hidden": "true", autoComplete: "off", onChange: le, onInvalid: v, onFocus: w }, i)
+  );
+}), de = /* @__PURE__ */ O(function({ hidden: m, settle: o }) {
+  const { multiple: s, selectedText: p, valueAsOption: c, renderOption: h, texts: x } = g(N), { selectedIDs: f, title: n, valueOption: t, hasActualValue: v, loading: a, error: d } = g(F), [l] = $(() => /* @__PURE__ */ new Set()), r = c && t ? Z(t, h, !0) : null, w = a && !d && !v, e = s && f.length > 0 && !p, i = `${e ? "picked" : r ? t.id : n}${w ? "-loading" : ""}`, y = t?.type === "boolean" ? String(t.raw) : void 0;
+  return /* @__PURE__ */ u(q, { children: !m && /* @__PURE__ */ R(E, { axis: "x", fade: !0, group: l, className: P("rac-title", r && t.className), style: r ? t.style : void 0, "data-bool": y, onEntered: o, onExited: o, children: [
+    r ? /* @__PURE__ */ u("div", { className: "rac-option-jsx", children: r }) : e ? f.map((C) => C.name || x.emptyOption).join(", ") : n,
+    w && ee
+  ] }, i) });
+}), ue = /* @__PURE__ */ O(function() {
+  const { selectRef: m, multiple: o, valueAsOption: s, duration: p, easing: c, ext: h } = g(N), x = o ? h.Value : void 0, f = D(null), [n, t] = $(s);
+  s && !n && t(!0);
+  const v = D({ duration: p, easing: c });
+  return j(() => {
+    v.current = { duration: p, easing: c };
+  }, [p, c]), j(() => {
+    const a = f.current;
+    if (!n || o || !a || typeof ResizeObserver > "u") return;
+    const d = { value: 0, root: "", anim: null }, l = new ResizeObserver(() => te(m.current, d, a.offsetHeight, v.current.duration, v.current.easing));
+    return l.observe(a), () => {
+      l.disconnect(), d.anim?.cancel();
+    };
+  }, [n, o, m]), x ? /* @__PURE__ */ u(x, {}) : /* @__PURE__ */ u("div", { className: "rac-value", ref: f, children: /* @__PURE__ */ u(de, {}) });
+}), xe = /* @__PURE__ */ O(function() {
+  const { selectRef: m, selectId: o, highlightStore: s, className: p, style: c, duration: h, easing: x, deleteInline: f, icons: n, texts: t, placeholder: v, id: a, required: d, popup: l, attrs: r } = g(N), { visibility: w, active: e, hasActualValue: i, deleting: y, loading: C, loadPending: H, error: T, invalid: A, normalizedOptions: z } = g(F), { handleBlur: B, handleFocus: K, handleKeyDown: L, toggleVisibility: G, clear: J } = g(k), M = oe(s.subscribe, () => {
+    const S = w ? z[re(s.get())] : null;
+    return S ? W(o, S.id) : void 0;
+  }, () => {
+  }), _ = !!n.clear && i && e && !y, Q = !!n.arrow && e && !y && l, U = l ? { role: "combobox", "aria-haspopup": "listbox", "aria-controls": `${o}-listbox`, "aria-expanded": w, "aria-activedescendant": M, "aria-required": d || void 0 } : { role: "group" };
+  return /* @__PURE__ */ R(
+    "div",
+    {
+      ...r,
+      id: a,
+      ref: m,
+      style: { "--rac-duration": `${h}ms`, "--rac-ease": x, ...c },
+      className: P("rac-select", p),
+      ...e && {
+        onKeyDown: L,
+        onFocus: K,
+        onClick: G,
+        onBlur: B
+      },
+      ...U,
+      "aria-disabled": !e,
+      tabIndex: e ? 0 : -1,
+      "aria-busy": C || H || void 0,
+      "aria-label": r["aria-label"] ?? (r["aria-labelledby"] ? void 0 : v),
+      "aria-invalid": A || r["aria-invalid"],
+      "aria-describedby": [r["aria-describedby"], T && `${o}-error`].filter(Boolean).join(" ") || void 0,
+      "data-inline-delete": I(f),
+      "data-empty": I(!i),
+      "data-deleting": I(y),
+      "data-error": I(T),
+      "data-invalid": I(A),
+      children: [
+        /* @__PURE__ */ u(ue, {}),
+        /* @__PURE__ */ R(q, { children: [
+          _ && /* @__PURE__ */ u(E, { as: "button", type: "button", axis: "x", className: "rac-clear", tabIndex: -1, "aria-label": t.clear, onMouseDown: X, onClick: (S) => {
+            Y(S, m), J(S);
+          }, children: V(n.clear) }, "clear"),
+          Q && /* @__PURE__ */ u(E, { axis: "x", className: "rac-arrow", "aria-hidden": "true", children: V(n.arrow) }, "arrow")
+        ] }),
+        /* @__PURE__ */ u(ce, {})
+      ]
+    }
+  );
+});
+export {
+  de as Title,
+  xe as default
+};

package/dist/useChipLayout.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),F=require("react-dom"),R=require("./state.cjs"),g=require("./utils.cjs"),J=require("./model.cjs"),o=require("./chipGeometry.cjs"),Q=.25,U={hoverId:null,swipedId:null,held:!1,breaks:o.NONE},G=(i,a)=>{const u=new Set(i.map(l=>l.id)),c=new Map(a.map(([l,v])=>[v.id,l])),p=a.filter(([,l])=>!u.has(l.id)),E=new Set(a.map(([l])=>l));return i.map(l=>{if(c.has(l.id))return[c.get(l.id),l];const v=p.findIndex(([,k])=>J.sameValue(k.original,l.original));if(v>=0)return[p.splice(v,1)[0][0],l];let w=l.id;for(;E.has(w);)w+="~";return E.add(w),[w,l]})},X=i=>{const[a,u]=n.useState(()=>({chips:i,keyed:G(i,[])}));if(a.chips===i)return a.keyed;const c=G(i,a.keyed);return u({chips:i,keyed:c}),c};function Y(i){const{selectRef:a,duration:u,easing:c,deleteInline:p,deleteAlways:E,icons:l,valueAsOption:v,renderOption:w}=n.useContext(R.SelectConfigContext),{selectedIDs:k,deleting:C,visibility:B,active:L}=n.useContext(R.SelectStateContext),{setDeleting:q,setVisibility:H}=n.useContext(R.SelectActionsContext),[j,V]=n.useState(0),[s]=n.useState(()=>R.createStore(U)),[W]=n.useState(()=>new Set),A=n.useSyncExternalStore(s.subscribe,()=>s.get().held,()=>!1),O=n.useSyncExternalStore(s.subscribe,()=>s.get().breaks,()=>o.NONE),_=n.useSyncExternalStore(g.watchMotion,g.reducedMotion,()=>!1),S=n.useRef({rows:null,reserve:0,chips:i,swap:!1,duration:u,easing:c}),m=n.useRef(null),h=n.useRef({value:0,root:"",anim:null}),d=n.useRef(null),D=n.useRef(null),N=p&&!E&&!C&&!!l.remove,K=N?j+Q:0,z=N&&!j&&i.length>0,x=v?w?2:1:0,I=n.useEffectEvent((e,t)=>{const r=d.current,f=S.current;if(!r)return;const b=o.isResizing(r);if(b&&t)return;e&&s.get().held&&o.freeze(s,r,f);const y=f.swap?f.duration/2:f.duration;b?f.fit!=null&&g.followHeight(a.current,h.current,f.fit,y,f.easing,r):(t||h.current.value)&&g.followHeight(a.current,h.current,r.offsetHeight,y,f.easing),s.get().held||s.set({breaks:o.restBreaks(s,r,f.chips,f.reserve)})});n.useLayoutEffect(()=>{Object.assign(S.current,{duration:u,easing:c})},[u,c]),n.useLayoutEffect(()=>{const e=S.current,t=d.current,r=e.chips!==i;Object.assign(e,{chips:i,reserve:K}),r&&t&&o.isBusy(t)&&o.freeze(s,t,e),I(!r)},[i,K,s]),n.useLayoutEffect(()=>{const e=()=>I(!0,!0),t=typeof ResizeObserver>"u"?null:new ResizeObserver(e);return t?t.observe(d.current):e(),document.fonts?.addEventListener("loadingdone",e),()=>{t?.disconnect(),document.fonts?.removeEventListener("loadingdone",e)}},[]);const M=n.useCallback(()=>{const e=d.current;if(!e||!s.get().held||o.isBusy(e))return;const t=S.current,r=o.slotsOf(e),f=r.map(y=>y.getBoundingClientRect()),b=o.restBreaks(s,e,t.chips,t.reserve);Object.assign(t,{rows:null,floor:null,fit:null}),F.flushSync(()=>s.set({held:!1,breaks:b})),t.swap=o.isBusy(e),t.swap&&F.flushSync(()=>o.freeze(s,e,t)),g.reducedMotion()||r.forEach((y,T)=>y.isConnected&&o.flip(y,f[T],t.swap?u/2:u,c))},[s,u,c]),P=n.useCallback(e=>{d.current&&(m.current=o.snapOf(d.current,e))},[]);return n.useLayoutEffect(()=>{const e=d.current,t=S.current;if(!e||!m.current||!u||g.reducedMotion())return;const r=o.resizesOf(m.current);r.length&&(t.floor=new Map(r.map(({id:f,from:b})=>[f,b.width])),o.freeze(s,e,t),g.followHeight(a.current,h.current,t.fit,u,c,e),o.resize(r,u,c,()=>{M(),I(!1,!0)}))},[x,s,u,c,a,M]),n.useLayoutEffect(()=>{const e=m.current;!e||O!==s.get().breaks||(m.current=null,g.reducedMotion()||e.forEach((t,r)=>r.isConnected&&o.flip(r,t,u,c)))},[O,i,x,s,u,c]),n.useLayoutEffect(()=>{const e=d.current,t=S.current;!e||!h.current.value||o.isResizing(e)||g.followHeight(a.current,h.current,e.offsetHeight,t.swap?t.duration/2:t.duration,t.easing)},[O,A,a]),n.useEffect(()=>()=>h.current.anim?.cancel(),[]),n.useEffect(()=>{C&&B&&H(!1),C&&(!k.length||!L)&&q(!1),s.set({hoverId:null,...!L&&{swipedId:null}})},[k.length,C,B,L,q,H,s]),n.useLayoutEffect(()=>{const e=D.current;if(!z||!e)return;const t=getComputedStyle(e);V(e.getBoundingClientRect().width+parseFloat(t.marginLeft)+parseFloat(t.marginRight))},[z]),{chipStore:s,delGroup:W,valueRef:d,delIconRef:D,probe:z,settle:M,held:A,snapshot:P,look:x,wait:u>0&&!_}}exports.default=Y;exports.useChipKeys=X;

package/dist/useChipLayout.js

@@ -0,0 +1,78 @@
+"use client";
+import { useContext as j, useState as I, useSyncExternalStore as D, useRef as b, useEffectEvent as se, useLayoutEffect as g, useCallback as P, useEffect as Q } from "react";
+import { flushSync as T } from "react-dom";
+import { SelectConfigContext as oe, SelectStateContext as le, SelectActionsContext as ie, createStore as ce } from "./state.js";
+import { watchMotion as ue, reducedMotion as R, followHeight as O } from "./utils.js";
+import { sameValue as ae } from "./model.js";
+import { NONE as _, isResizing as U, freeze as E, restBreaks as X, isBusy as H, slotsOf as fe, flip as Y, snapOf as de, resizesOf as ge, resize as he } from "./chipGeometry.js";
+const me = 0.25, pe = { hoverId: null, swipedId: null, held: !1, breaks: _ }, Z = (i, c) => {
+  const s = new Set(i.map((o) => o.id)), l = new Map(c.map(([o, h]) => [h.id, o])), y = c.filter(([, o]) => !s.has(o.id)), k = new Set(c.map(([o]) => o));
+  return i.map((o) => {
+    if (l.has(o.id)) return [l.get(o.id), o];
+    const h = y.findIndex(([, S]) => ae(S.original, o.original));
+    if (h >= 0) return [y.splice(h, 1)[0][0], o];
+    let m = o.id;
+    for (; k.has(m); ) m += "~";
+    return k.add(m), [m, o];
+  });
+}, Ce = (i) => {
+  const [c, s] = I(() => ({ chips: i, keyed: Z(i, []) }));
+  if (c.chips === i) return c.keyed;
+  const l = Z(i, c.keyed);
+  return s({ chips: i, keyed: l }), l;
+};
+function Re(i) {
+  const { selectRef: c, duration: s, easing: l, deleteInline: y, deleteAlways: k, icons: o, valueAsOption: h, renderOption: m } = j(oe), { selectedIDs: S, deleting: C, visibility: F, active: x } = j(le), { setDeleting: K, setVisibility: N } = j(ie), [V, $] = I(0), [n] = I(() => ce(pe)), [ee] = I(() => /* @__PURE__ */ new Set()), W = D(n.subscribe, () => n.get().held, () => !1), z = D(n.subscribe, () => n.get().breaks, () => _), te = D(ue, R, () => !1), p = b({ rows: null, reserve: 0, chips: i, swap: !1, duration: s, easing: l }), w = b(null), f = b({ value: 0, root: "", anim: null }), a = b(null), G = b(null), q = y && !k && !C && !!o.remove, J = q ? V + me : 0, L = q && !V && i.length > 0, A = h ? m ? 2 : 1 : 0, B = se((e, t) => {
+    const r = a.current, u = p.current;
+    if (!r) return;
+    const v = U(r);
+    if (v && t) return;
+    e && n.get().held && E(n, r, u);
+    const d = u.swap ? u.duration / 2 : u.duration;
+    v ? u.fit != null && O(c.current, f.current, u.fit, d, u.easing, r) : (t || f.current.value) && O(c.current, f.current, r.offsetHeight, d, u.easing), n.get().held || n.set({ breaks: X(n, r, u.chips, u.reserve) });
+  });
+  g(() => {
+    Object.assign(p.current, { duration: s, easing: l });
+  }, [s, l]), g(() => {
+    const e = p.current, t = a.current, r = e.chips !== i;
+    Object.assign(e, { chips: i, reserve: J }), r && t && H(t) && E(n, t, e), B(!r);
+  }, [i, J, n]), g(() => {
+    const e = () => B(!0, !0), t = typeof ResizeObserver > "u" ? null : new ResizeObserver(e);
+    return t ? t.observe(a.current) : e(), document.fonts?.addEventListener("loadingdone", e), () => {
+      t?.disconnect(), document.fonts?.removeEventListener("loadingdone", e);
+    };
+  }, []);
+  const M = P(() => {
+    const e = a.current;
+    if (!e || !n.get().held || H(e)) return;
+    const t = p.current, r = fe(e), u = r.map((d) => d.getBoundingClientRect()), v = X(n, e, t.chips, t.reserve);
+    Object.assign(t, { rows: null, floor: null, fit: null }), T(() => n.set({ held: !1, breaks: v })), t.swap = H(e), t.swap && T(() => E(n, e, t)), R() || r.forEach((d, re) => d.isConnected && Y(d, u[re], t.swap ? s / 2 : s, l));
+  }, [n, s, l]), ne = P((e) => {
+    a.current && (w.current = de(a.current, e));
+  }, []);
+  return g(() => {
+    const e = a.current, t = p.current;
+    if (!e || !w.current || !s || R()) return;
+    const r = ge(w.current);
+    r.length && (t.floor = new Map(r.map(({ id: u, from: v }) => [u, v.width])), E(n, e, t), O(c.current, f.current, t.fit, s, l, e), he(r, s, l, () => {
+      M(), B(!1, !0);
+    }));
+  }, [A, n, s, l, c, M]), g(() => {
+    const e = w.current;
+    !e || z !== n.get().breaks || (w.current = null, R() || e.forEach((t, r) => r.isConnected && Y(r, t, s, l)));
+  }, [z, i, A, n, s, l]), g(() => {
+    const e = a.current, t = p.current;
+    !e || !f.current.value || U(e) || O(c.current, f.current, e.offsetHeight, t.swap ? t.duration / 2 : t.duration, t.easing);
+  }, [z, W, c]), Q(() => () => f.current.anim?.cancel(), []), Q(() => {
+    C && F && N(!1), C && (!S.length || !x) && K(!1), n.set({ hoverId: null, ...!x && { swipedId: null } });
+  }, [S.length, C, F, x, K, N, n]), g(() => {
+    const e = G.current;
+    if (!L || !e) return;
+    const t = getComputedStyle(e);
+    $(e.getBoundingClientRect().width + parseFloat(t.marginLeft) + parseFloat(t.marginRight));
+  }, [L]), { chipStore: n, delGroup: ee, valueRef: a, delIconRef: G, probe: L, settle: M, held: W, snapshot: ne, look: A, wait: s > 0 && !te };
+}
+export {
+  Re as default,
+  Ce as useChipKeys
+};

package/dist/useSelect.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),M=require("./state.cjs"),O=require("./utils.cjs"),J=require("./useSelectBehavior.cjs"),Q=require("./useSelectModel.cjs"),ne=[],se=t=>{const p=M.useShallowStable(Array.isArray(t)?t:ne);return e.useMemo(()=>p.reduce((l,n)=>{for(const o in n)o in l&&O.warnOnce(`plugin ${o}`,`Two plugins provide \`${o}\`; the last one wins. Pass each plugin once.`);return Object.assign(l,n)},{}),[p])},le=t=>({internalVisibility:!1,deleting:!1,loadPending:!1,toggledGroups:new Set,internalValue:t.defaultValue,picked:Q.NO_PICK,fieldsetDisabled:!1,invalid:!1});function ae(t,p){const[l,n]=e.useReducer(M.compactReducer,t,le),{internalVisibility:o,deleting:D,loadPending:m,fieldsetDisabled:v}=l,d=e.useMemo(()=>v&&!t.disabled?{...t,disabled:!0}:t,[t,v]),{ref:W,open:L,onOpenChange:X,popup:$,hasMore:Y,loadButton:Z,error:C,disabled:V,loading:w,required:q,texts:B}=d,N=e.useId(),P=e.useMemo(()=>N.replace(/:/g,""),[N]),a=e.useRef(null);e.useImperativeHandle(W,()=>a.current),e.useLayoutEffect(()=>{const i=a.current?.querySelector(".rac-input");if(!i)return;const s=()=>n({fieldsetDisabled:!t.disabled&&i.matches(":disabled")});s();const U=new MutationObserver(s);for(let h=i.parentElement;h;h=h.parentElement)h.tagName==="FIELDSET"&&U.observe(h,{attributeFilter:["disabled"]});return()=>U.disconnect()},[t.disabled]);const[f]=e.useState(()=>M.createStore(J.initialHighlight)),g=se(t.plugins);t.multiple&&(t.deleteInline||t.deleteAlways)&&!g.Value&&O.warnOnce("no chips","`deleteInline` and `deleteAlways` act on chips, which need the `chips` plugin: `plugins={[chips]}`."),(t.hasMore||t.loadButton||t.loadMore)&&!g.request&&O.warnOnce("no paging","`hasMore`, `loadMore` and `loadButton` need the `paging` plugin: `plugins={[paging]}`.");const y=L!==void 0,_=y?!!L:o,G=e.useRef(!1),T=e.useRef(!1),c=M.useStableActions({setVisibility:i=>{i===_||i&&!$||(y||n({internalVisibility:i}),X?.(i))},loadMoreOnce:()=>g.request?.({props:d,lock:G,setPending:i=>n({loadPending:i})}),setListReady:i=>f.set({ready:i}),setDeleting:i=>n({deleting:i}),markInvalid:()=>n({invalid:!0})}),ee=Q.default({props:d,jsxOptions:p,state:l,setState:n,ext:g,setVisibility:c.setVisibility,loadMoreOnce:c.loadMoreOnce}),{normalizedOptions:S,expandedGroups:E,selected:I,selectedIDs:k,hasOptions:j,active:r,hasActualValue:b,title:x,valueOption:F,actions:R}=ee,u=r&&_&&$,H=J.default({props:d,state:l,setState:n,normalizedOptions:S,expandedGroups:E,selected:I,selectedIDs:k,visibility:u,highlightStore:f,setVisibility:c.setVisibility,modelActions:R});e.useEffect(()=>{n({loadPending:!1})},[S.length,Y,Z]),e.useEffect(()=>{m||(G.current=!1)},[m]),e.useEffect(()=>{u&&a.current&&document.activeElement!==a.current&&a.current.focus(),u||f.set({index:-1,ready:!1})},[u,f]),e.useEffect(()=>{T.current&&!r&&c.setVisibility(!1),T.current=r},[r,c]);const A=e.useRef(null),z=d.value!==void 0;e.useEffect(()=>{const i={value:z,open:y};for(const s in i)A.current&&A.current[s]!==i[s]&&O.warnOnce(`switch ${s}`,`\`${s}\` switched between controlled and uncontrolled (\`undefined\`) after mount. Pick one mode for the lifetime of the Select, like a React input${s==="value"?"; clear a controlled value with `null` or `[]`":""}.`);A.current=i},[z,y]),e.useLayoutEffect(()=>{a.current?.querySelector(".rac-input")?.setCustomValidity(q&&!b&&B.required||"")},[q,b,B.required]);const K=l.invalid&&q&&!b&&!V,te=e.useMemo(()=>({...c,...R,...H}),[c,R,H]),ie=e.useMemo(()=>({visibility:u,deleting:D,loadPending:m,expandedGroups:E,selectedIDs:k,normalizedOptions:S,selected:I,hasOptions:j,active:r,hasActualValue:b,title:x,valueOption:F,disabled:V,fieldsetDisabled:v,invalid:K,loading:w,error:C}),[u,D,m,E,k,S,I,j,r,b,x,F,V,v,K,w,C]);return{selectId:P,selectRef:a,highlightStore:f,ext:g,state:ie,actions:te}}exports.default=ae;

package/dist/useSelect.js

@@ -0,0 +1,100 @@
+"use client";
+import { useReducer as ne, useMemo as b, useId as le, useRef as O, useImperativeHandle as se, useLayoutEffect as Q, useState as ae, useEffect as h } from "react";
+import { compactReducer as re, createStore as ce, useStableActions as oe, useShallowStable as de } from "./state.js";
+import { warnOnce as I } from "./utils.js";
+import ue, { initialHighlight as fe } from "./useSelectBehavior.js";
+import ge, { NO_PICK as pe } from "./useSelectModel.js";
+const he = [], be = (e) => {
+  const m = de(Array.isArray(e) ? e : he);
+  return b(() => m.reduce((l, i) => {
+    for (const o in i) o in l && I(`plugin ${o}`, `Two plugins provide \`${o}\`; the last one wins. Pass each plugin once.`);
+    return Object.assign(l, i);
+  }, {}), [m]);
+}, me = (e) => ({
+  internalVisibility: !1,
+  deleting: !1,
+  loadPending: !1,
+  toggledGroups: /* @__PURE__ */ new Set(),
+  internalValue: e.defaultValue,
+  picked: pe,
+  fieldsetDisabled: !1,
+  invalid: !1
+});
+function Ie(e, m) {
+  const [l, i] = ne(re, e, me), { internalVisibility: o, deleting: C, loadPending: v, fieldsetDisabled: y } = l, d = b(() => y && !e.disabled ? { ...e, disabled: !0 } : e, [e, y]), { ref: W, open: L, onOpenChange: X, popup: $, hasMore: Y, loadButton: Z, error: B, disabled: M, loading: N, required: k, texts: x } = d, G = le(), P = b(() => G.replace(/:/g, ""), [G]), s = O(null);
+  se(W, () => s.current), Q(() => {
+    const t = s.current?.querySelector(".rac-input");
+    if (!t) return;
+    const n = () => i({ fieldsetDisabled: !e.disabled && t.matches(":disabled") });
+    n();
+    const J = new MutationObserver(n);
+    for (let p = t.parentElement; p; p = p.parentElement) p.tagName === "FIELDSET" && J.observe(p, { attributeFilter: ["disabled"] });
+    return () => J.disconnect();
+  }, [e.disabled]);
+  const [u] = ae(() => ce(fe)), f = be(e.plugins);
+  e.multiple && (e.deleteInline || e.deleteAlways) && !f.Value && I("no chips", "`deleteInline` and `deleteAlways` act on chips, which need the `chips` plugin: `plugins={[chips]}`."), (e.hasMore || e.loadButton || e.loadMore) && !f.request && I("no paging", "`hasMore`, `loadMore` and `loadButton` need the `paging` plugin: `plugins={[paging]}`.");
+  const S = L !== void 0, F = S ? !!L : o, H = O(!1), T = O(!1), a = oe({
+    // [DOC: select-store]
+    setVisibility: (t) => {
+      t === F || t && !$ || (S || i({ internalVisibility: t }), X?.(t));
+    },
+    // [DOC: paging]
+    loadMoreOnce: () => f.request?.({ props: d, lock: H, setPending: (t) => i({ loadPending: t }) }),
+    setListReady: (t) => u.set({ ready: t }),
+    setDeleting: (t) => i({ deleting: t }),
+    // [DOC: form-field]
+    markInvalid: () => i({ invalid: !0 })
+  }), ee = ge({ props: d, jsxOptions: m, state: l, setState: i, ext: f, setVisibility: a.setVisibility, loadMoreOnce: a.loadMoreOnce }), { normalizedOptions: V, expandedGroups: q, selected: A, selectedIDs: E, hasOptions: _, active: r, hasActualValue: g, title: j, valueOption: w, actions: D } = ee, c = r && F && $, z = ue({
+    props: d,
+    state: l,
+    setState: i,
+    normalizedOptions: V,
+    expandedGroups: q,
+    selected: A,
+    selectedIDs: E,
+    visibility: c,
+    highlightStore: u,
+    setVisibility: a.setVisibility,
+    modelActions: D
+  });
+  h(() => {
+    i({ loadPending: !1 });
+  }, [V.length, Y, Z]), h(() => {
+    v || (H.current = !1);
+  }, [v]), h(() => {
+    c && s.current && document.activeElement !== s.current && s.current.focus(), c || u.set({ index: -1, ready: !1 });
+  }, [c, u]), h(() => {
+    T.current && !r && a.setVisibility(!1), T.current = r;
+  }, [r, a]);
+  const R = O(null), K = d.value !== void 0;
+  h(() => {
+    const t = { value: K, open: S };
+    for (const n in t) R.current && R.current[n] !== t[n] && I(`switch ${n}`, `\`${n}\` switched between controlled and uncontrolled (\`undefined\`) after mount. Pick one mode for the lifetime of the Select, like a React input${n === "value" ? "; clear a controlled value with `null` or `[]`" : ""}.`);
+    R.current = t;
+  }, [K, S]), Q(() => {
+    s.current?.querySelector(".rac-input")?.setCustomValidity(k && !g && x.required || "");
+  }, [k, g, x.required]);
+  const U = l.invalid && k && !g && !M, te = b(() => ({ ...a, ...D, ...z }), [a, D, z]), ie = b(() => ({
+    visibility: c,
+    deleting: C,
+    loadPending: v,
+    expandedGroups: q,
+    selectedIDs: E,
+    normalizedOptions: V,
+    selected: A,
+    hasOptions: _,
+    active: r,
+    hasActualValue: g,
+    title: j,
+    valueOption: w,
+    disabled: M,
+    fieldsetDisabled: y,
+    invalid: U,
+    loading: N,
+    error: B
+  }), [c, C, v, q, E, V, A, _, r, g, j, w, M, y, U, N, B]);
+  return { selectId: P, selectRef: s, highlightStore: u, ext: f, state: ie, actions: te };
+}
+export {
+  Ie as default
+};

package/dist/useSelectBehavior.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react"),L=require("./state.cjs"),D=require("./utils.cjs"),S={index:-1,fallback:-1,ready:!1},F=({index:r,fallback:f})=>r===-1?f:r,U=10,C=500,V=new Set(["ArrowDown","ArrowUp","PageDown","PageUp","Home","End"]),_=(r,f)=>h.useMemo(()=>{const c=new Set(r.map(n=>n.group).filter(Boolean)),i=n=>!!n&&!n.disabled&&!n.loading&&(n.groupHeader?c.has(n.name):!n.group||f.has(n.group));return{reach:i,list:r.flatMap((n,o)=>i(n)?[o]:[])}},[r,f]),z=(r,f,c,i)=>{const n=r.length-1;if(n<0)return-1;if(c==="Home")return r[0];if(c==="End")return r[n];const o=c==="ArrowUp"||c==="PageUp"?-1:1,l=r.indexOf(f);if(l===-1)return r[o>0?0:n];const s=l+o*(c.startsWith("Page")?U:1);return s>=0&&s<=n?r[s]:c.startsWith("Page")||i?r[s<0?0:n]:r[(s+r.length)%r.length]},R=(r,f,c,i)=>{const n=[...i].every(u=>u===i[0]),o=n?i[0]:i,l=f.filter(u=>"original"in r[u]),s=Math.max(l.indexOf(c)+(n?1:0),0);for(let u=0;u<l.length;u++){const T=l[(s+u)%l.length];if(String(r[T].name).toLowerCase().startsWith(o))return T}return-1};function I({props:r,state:f,setState:c,normalizedOptions:i,expandedGroups:n,selected:o,selectedIDs:l,visibility:s,setVisibility:u,modelActions:T,highlightStore:w}){const{disabled:E,multiple:y,hasMore:P,loadButton:k,icons:x,onFocus:q,onBlur:M,onKeyDown:A}=r,{selectOption:B,clear:W,removeOption:p}=T,{deleting:v}=f,{reach:H,list:m}=_(i,n),d=h.useRef({lastWindowFocusTime:0,justFocused:!1,focusTimeout:null,query:"",queryTimeout:null}),j=h.useMemo(()=>{const e=new Set(y?l.map(a=>a.id):o?[o.id]:[]),t=e.size?i.findIndex(a=>e.has(a.id)&&H(a)):-1;return t!==-1?t:m.find(a=>!i[a].groupHeader)??m[0]??-1},[i,o,l,y,H,m]);h.useLayoutEffect(()=>{const{index:e}=w.get();w.set({fallback:j,index:e!==-1&&H(i[e])?e:-1})}),h.useEffect(()=>{const e=d.current,t=()=>e.lastWindowFocusTime=Date.now();return window.addEventListener("focus",t),()=>{window.removeEventListener("focus",t),clearTimeout(e.focusTimeout),clearTimeout(e.queryTimeout)}},[]);const b=e=>w.set({index:e}),K=(e,t)=>{const a=d.current;clearTimeout(a.queryTimeout),a.queryTimeout=setTimeout(()=>a.query="",C),a.query+=e.toLowerCase();const g=R(i,m,t,a.query);g!==-1&&b(g),s||u(!0)};return L.useStableActions({highlight:b,handleBlur:e=>{const t=e.relatedTarget?.closest(".rac-options");e.currentTarget.contains(e.relatedTarget)||t||(M?.(e),v&&c({deleting:!1}),s&&u(!1))},handleFocus:e=>{const t=e.currentTarget.contains(e.relatedTarget);t||q?.(e),!(t||e.target!==e.currentTarget||s||E||v||document.hidden||Date.now()-d.current.lastWindowFocusTime<100)&&(clearTimeout(d.current.focusTimeout),d.current.focusTimeout=setTimeout(()=>d.current.justFocused=!1,200),d.current.justFocused=!0,u(!0))},toggleVisibility:e=>{if(v){D.stopEvent(e),c({deleting:!1});return}E||d.current.justFocused||u(!s)},handleKeyDown:e=>{if(A?.(e),e.defaultPrevented||E||e.nativeEvent?.isComposing)return;const{key:t}=e;if(e.target!==e.currentTarget&&(t==="Enter"||t.length===1))return;const a=F(w.get());if(t.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(t!==" "||d.current.query)){e.preventDefault(),K(t,a);return}if(V.has(t)){e.preventDefault(),(s||t==="Home"||t==="End")&&b(z(m,a,t,!k&&P)),s||u(!0);return}switch(t){case"Enter":case" ":e.preventDefault(),s?a!==-1&&i[a]&&(b(a),B(i[a],e)):u(!0);break;case"Escape":if(v)c({deleting:!1});else if(s)u(!1);else break;D.stopEvent(e);break;case"Tab":s&&u(!1);break;case"Backspace":case"Delete":{const g=l.at(-1);if(y&&t==="Backspace"&&x.remove&&g)p(g.id);else if(x.clear&&(o||g))W();else break;e.preventDefault();break}}}})}exports.default=I;exports.effectiveHighlight=F;exports.initialHighlight=S;