react-animated-select 0.7.7 → 0.8.1

package/dist/optionList.js

@@ -0,0 +1,105 @@
+"use client";
+import { jsx as m, jsxs as v } from "react/jsx-runtime";
+import { SelectConfigContext as x, SelectStateContext as $, SelectActionsContext as E } from "./state.js";
+import { memo as H, useContext as f, useMemo as j, useRef as M, useSyncExternalStore as A, useLayoutEffect as R } from "react";
+import { effectiveHighlight as T } from "./useSelectBehavior.js";
+import { optionDomId as y, flag as g, withClass as w, renderIcon as k, optionContent as _, dots as z } from "./utils.js";
+import { Collapse as G } from "./motion.js";
+const C = 0, V = 1, S = 2, L = (b) => {
+  const { highlightStore: e } = f(x), l = M(null), a = A(e.subscribe, () => {
+    const r = e.get();
+    return T(r) !== b ? C : r.ready ? S : V;
+  }, () => C);
+  return R(() => {
+    a === S && l.current?.scrollIntoView?.({ block: "nearest" });
+  }, [a]), [l, a !== C];
+}, D = (b, e) => `${y(b, e.id)}_l`, Y = /* @__PURE__ */ H(function({ option: e, index: l, open: a, hasChildren: r }) {
+  const { selectId: o, icons: c, texts: u } = f(x), { selectOption: I, highlight: p } = f(E), [i, n] = L(l), t = r && !e.disabled;
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      className: w("rac-group", e.className),
+      onMouseEnter: () => t && p(l),
+      onClick: (h) => I(e, h),
+      "aria-label": t ? `${e.name}, ${a ? u.groupOpen : u.groupClosed}` : void 0,
+      "aria-disabled": !t || void 0,
+      "data-highlighted": g(n),
+      "data-disabled": g(e.disabled),
+      id: y(o, e.id),
+      "data-open": g(a),
+      "aria-selected": "false",
+      style: e.style,
+      role: "option",
+      ref: i,
+      children: [
+        /* @__PURE__ */ m("span", { className: "rac-group-text", id: D(o, e), children: e.name }),
+        /* @__PURE__ */ m(G, { axis: "x", in: r && !e.disabled, className: "rac-group-arrow", "aria-hidden": "true", children: k(c.arrow) })
+      ]
+    }
+  );
+}), q = /* @__PURE__ */ H(function({ option: e, index: l, isSelected: a, showCheckbox: r }) {
+  const { selectId: o, icons: c, renderOption: u } = f(x), { selectOption: I, highlight: p } = f(E), [i, n] = L(l), t = !e.disabled && !e.loading, h = _(e, u, a);
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      className: w("rac-option", e.className),
+      onMouseEnter: () => t && p(l),
+      onClick: (N) => !e.loading && I(e, N),
+      "aria-disabled": e.disabled || e.loading,
+      "data-invalid": g(e.invalid),
+      "data-bool": typeof e.raw == "boolean" ? String(e.raw) : void 0,
+      "data-highlighted": g(n),
+      "data-loading": g(e.loading),
+      id: y(o, e.id),
+      "aria-selected": a,
+      style: e.style,
+      role: "option",
+      ref: i,
+      children: [
+        h ? /* @__PURE__ */ m("div", { className: "rac-option-jsx", children: h }) : /* @__PURE__ */ m("span", { className: "rac-option-text", children: e.name }),
+        e.loading && z,
+        r && /* @__PURE__ */ v("div", { className: "rac-check", "data-default": g(!c.checkbox), children: [
+          k(c.check, { className: "rac-checkmark" }),
+          k(c.checkbox, { className: "rac-check-icon" })
+        ] })
+      ]
+    }
+  );
+}), U = /* @__PURE__ */ H(function() {
+  const { selectId: e, multiple: l } = f(x), { normalizedOptions: a, selected: r, selectedIDs: o, expandedGroups: c } = f($), u = r?.id;
+  return j(() => {
+    const I = new Set(o.map((s) => s.id)), p = a.reduce((s, d) => (d.group && (s[d.group] = (s[d.group] || 0) + 1), s), {}), i = [];
+    let n = [], t = null, h = null;
+    const N = () => {
+      t !== null && n.length && i.push(
+        /* @__PURE__ */ m(G, { axis: "y", in: c.has(t), className: "rac-group-items", role: "group", "aria-labelledby": h, children: n }, `slide-${t}`)
+      ), n = [];
+    }, O = (s, d) => /* @__PURE__ */ m(
+      q,
+      {
+        isSelected: I.has(s.id) || u === s.id,
+        showCheckbox: l && !s.disabled && "original" in s,
+        option: s,
+        index: d
+      },
+      s.id
+    );
+    return a.forEach((s, d) => {
+      s.groupHeader ? (N(), t = s.name, h = D(e, s), i.push(
+        /* @__PURE__ */ m(
+          Y,
+          {
+            hasChildren: p[s.name] > 0,
+            open: c.has(s.name),
+            option: s,
+            index: d
+          },
+          s.id
+        )
+      )) : s.group ? n.push(O(s, d)) : (N(), t = null, i.push(O(s, d)));
+    }), N(), i;
+  }, [a, u, o, c, l, e]);
+});
+export {
+  U as default
+};

package/dist/paging.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react/jsx-runtime"),e=require("react"),p=require("./state.cjs"),A=require("./useSelectBehavior.cjs"),H=require("./dropdown.cjs"),I=require("./utils.cjs"),L=({props:{hasMore:d,loadMore:n},lock:t,setPending:s})=>{if(!d||t.current)return;if(!n)return I.warnOnce("no loadMore","`hasMore` is set, but there is no `loadMore` to call.");t.current=!0,s(!0);const o=()=>s(!1);try{n()?.then?.(o,o)}catch(g){t.current=!1,o(),(globalThis.reportError??console.error)(g)}},P=({hasMore:d,loadButton:n,loadPending:t,moreText:s,pendingText:o})=>d&&n?{id:"special-load-more-id",name:t?o:s,loadMore:!0,loading:t,type:"special"}:null,q=e.memo(function(){const{highlightStore:n,hasMore:t,loadButton:s,loadOffset:o,loadAhead:g}=e.useContext(p.SelectConfigContext),{visibility:i,normalizedOptions:E,loadPending:M}=e.useContext(p.SelectStateContext),{loadMoreOnce:c}=e.useContext(p.SelectActionsContext),m=e.useRef(null),l=!s&&t,u=E.length,[h,O]=e.useState(u);!M&&h!==u&&O(u);const b=e.useSyncExternalStore(n.subscribe,()=>{const a=A.effectiveHighlight(n.get());return a>=u-g?a:null},()=>null);return e.useLayoutEffect(()=>{l&&b!==null&&i&&c()},[l,b,i,u,c]),e.useEffect(()=>{const a=m.current,r=l&&i&&a?.parentElement;if(!r||typeof IntersectionObserver>"u")return;let f=!1;const x=Number(o),v=Number.isFinite(x)?x:0,w=v-(parseFloat(getComputedStyle(r).paddingBottom)||0),S=new IntersectionObserver(F=>{const{isIntersecting:B,boundingClientRect:R,rootBounds:C}=F.at(-1);f=B&&!!C&&R.bottom<=C.bottom+.5,f&&c()},{root:r,rootMargin:`0px 0px ${w}px 0px`,threshold:[0,1]});S.observe(a);const y=()=>{f&&r.scrollHeight-r.scrollTop<=r.clientHeight+v&&c()};return r.addEventListener("scroll",y,{passive:!0}),()=>{S.disconnect(),r.removeEventListener("scroll",y)}},[l,i,o,h,c]),j.jsx(H.StatusRow,{ref:m,more:l})}),T={Footer:q,request:L,row:P};exports.PagingFooter=q;exports.paging=T;

package/dist/paging.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as B } from "react/jsx-runtime";
+import { memo as H, useContext as p, useRef as I, useState as L, useSyncExternalStore as R, useLayoutEffect as N, useEffect as T } from "react";
+import { SelectConfigContext as j, SelectStateContext as q, SelectActionsContext as z } from "./state.js";
+import { effectiveHighlight as P } from "./useSelectBehavior.js";
+import { StatusRow as $ } from "./dropdown.js";
+import { warnOnce as D } from "./utils.js";
+const G = ({ props: { hasMore: u, loadMore: r }, lock: e, setPending: n }) => {
+  if (!u || e.current) return;
+  if (!r) return D("no loadMore", "`hasMore` is set, but there is no `loadMore` to call.");
+  e.current = !0, n(!0);
+  const t = () => n(!1);
+  try {
+    r()?.then?.(t, t);
+  } catch (f) {
+    e.current = !1, t(), (globalThis.reportError ?? console.error)(f);
+  }
+}, J = ({ hasMore: u, loadButton: r, loadPending: e, moreText: n, pendingText: t }) => u && r ? { id: "special-load-more-id", name: e ? t : n, loadMore: !0, loading: e, type: "special" } : null, K = /* @__PURE__ */ H(function() {
+  const { highlightStore: r, hasMore: e, loadButton: n, loadOffset: t, loadAhead: f } = p(j), { visibility: s, normalizedOptions: C, loadPending: E } = p(q), { loadMoreOnce: i } = p(z), d = I(null), c = !n && e, l = C.length, [g, M] = L(l);
+  !E && g !== l && M(l);
+  const h = R(r.subscribe, () => {
+    const a = P(r.get());
+    return a >= l - f ? a : null;
+  }, () => null);
+  return N(() => {
+    c && h !== null && s && i();
+  }, [c, h, s, l, i]), T(() => {
+    const a = d.current, o = c && s && a?.parentElement;
+    if (!o || typeof IntersectionObserver > "u") return;
+    let m = !1;
+    const b = Number(t), x = Number.isFinite(b) ? b : 0, O = x - (parseFloat(getComputedStyle(o).paddingBottom) || 0), v = new IntersectionObserver((w) => {
+      const { isIntersecting: F, boundingClientRect: A, rootBounds: y } = w.at(-1);
+      m = F && !!y && A.bottom <= y.bottom + 0.5, m && i();
+    }, { root: o, rootMargin: `0px 0px ${O}px 0px`, threshold: [0, 1] });
+    v.observe(a);
+    const S = () => {
+      m && o.scrollHeight - o.scrollTop <= o.clientHeight + x && i();
+    };
+    return o.addEventListener("scroll", S, { passive: !0 }), () => {
+      v.disconnect(), o.removeEventListener("scroll", S);
+    };
+  }, [c, s, t, g, i]), /* @__PURE__ */ B($, { ref: d, more: c });
+}), Z = { Footer: K, request: G, row: J };
+export {
+  K as PagingFooter,
+  Z as paging
+};

package/dist/select.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),g=require("./state.cjs"),v=require("react"),M=require("./trigger.cjs"),T=require("./dropdown.cjs"),A=require("./liveRegion.cjs"),d=require("./utils.cjs"),q=require("./useSelect.cjs");;/* empty css           */;/* empty css            */const E={},l=e=>e!=null&&e!=="",w=e=>e?typeof e=="string"||typeof e=="number"?String(e):Array.isArray(e)?e.map(w).join(" ").replace(/\s+/g," ").trim():v.isValidElement(e)?w(e.props.children):"":"",j=({name:e,label:o,id:t,value:s,className:a,style:n,children:i,disabled:c,group:r},h,x)=>{const u=w(i),O=s!==void 0?s:u;return i!=null&&!u&&!l(o)&&!l(e)&&!l(t)&&!l(s)&&d.warnOnce("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):h,userId:l(t)?t:O,value:O,label:l(o)?String(o):l(e)?String(e):u||(l(t)?String(t):""),jsx:i,hasJsx:i!=null,className:a,style:n,disabled:!!c,group:r||x||null}},D=({name:e,label:o,value:t,id:s,disabled:a,className:n="",style:i=E},c)=>{const r=e??o??s??t;return{disabled:!!a,isGroupMarker:!0,group:l(r)?String(r):c,className:n,style:i}},R=e=>`<${typeof e=="string"?e:e?.displayName||e?.name||"Component"}>`,m=(e,o,t=null,s="o",a=[])=>(v.Children.toArray(e).forEach(n=>{if(!v.isValidElement(n)){d.warnOnce("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,"")}`,c=n.type?.racKind;if(n.type===v.Fragment)m(n.props.children,o,t,i,a);else if(c==="option")a.push(j(n.props,i,t));else if(c==="define")m(n.type.racRender(n.props),o,t,i,a);else if(c==="group"){const r=D(n.props,o);a.push(r),m(n.props.children,o,r.group,i,a)}else{const r=R(n.type);d.warnOnce(`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),$=new Set(["ref","options","value","defaultValue","onChange","children","loadMore","open","onOpenChange","onFocus","onBlur","onKeyDown","childrenFirst","groupsClosed","disabled","loading","error","plugins"]),F=/^(aria|data)-/,y={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:d.icons.ArrowUp,clear:d.icons.XMark,remove:d.icons.XMark,check:d.icons.Checkmark,checkbox:void 0},deleteInline:!1,deleteAlways:!1,className:"",optionsClassName:"",style:{},container:void 0,duration:300,easing:"ease",offset:1,animateOpacity:!0,keepMounted:!1},C={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"},S=(e,o)=>{const t={...e};for(const s in o)o[s]!==void 0&&(t[s]=o[s]);return t};function I(e){for(const p in e)p in C&&d.warnOnce(`renamed ${p}`,`The \`${p}\` prop was removed. Use \`${C[p]}\`.`);e.value!==void 0&&!e.onChange&&d.warnOnce("read-only value","`value` is set without `onChange`, so the Select is read-only. Pass `onChange`, or `defaultValue` instead of `value`.");const o=S(y,e);o.texts=S(y.texts,e.texts),o.icons=S(y.icons,e.icons);const t=o.texts.emptyGroup,s=g.useDeepStable(v.useMemo(()=>m(o.children,t),[o.children,t])),{selectId:a,selectRef:n,highlightStore:i,ext:c,state:r,actions:h}=q.default(o,s),x={},u={};for(const p in o)$.has(p)||((F.test(p)?u:x)[p]=o[p]);const O=g.useShallowStable({...x,attrs:u,selectId:a,selectRef:n,highlightStore:i,ext:c});return f.jsx(g.SelectConfigContext.Provider,{value:O,children:f.jsx(g.SelectActionsContext.Provider,{value:h,children:f.jsxs(g.SelectStateContext.Provider,{value:r,children:[f.jsx(M.default,{}),f.jsx(T.default,{}),f.jsx(A.default,{})]})})})}function b(){return d.warnOnce("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}b.racKind="option";function k(){return null}k.racKind="group";exports.OptGroup=k;exports.Option=b;exports.Select=I;

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);box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center}.rac-title,.rac-pick{min-width:0;overflow-x:clip;white-space:nowrap;text-overflow:ellipsis}.rac-title{max-width:calc(100% - .25px)}.rac-value:has(.rac-pick){padding-block:calc((var(--rac-row) - 1lh) / 2)}.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{opacity:var(--rac-visible, 1);transition:visibility 0s}.rac-options[data-offscreen]{visibility:hidden;transition:opacity var(--rac-duration) var(--rac-ease),visibility 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}}.rac-pick{margin-inline-end:.3em}.rac-pick:after{content:",";transition:opacity var(--rac-duration) var(--rac-ease)}.rac-pick[data-last]:after{opacity:0}: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-chip-slot>[data-plain]{display:flex;flex-shrink:0;align-items:center;max-width:inherit}.rac-chip-slot [data-sep]:after{content:var(--rac-sep)}.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}}.rac-pick{margin-inline-end:.3em}.rac-pick:after{content:",";transition:opacity var(--rac-duration) var(--rac-ease)}.rac-pick[data-last]:after{opacity:0}: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 a=require("react/jsx-runtime"),h=require("./state.cjs"),o=require("./utils.cjs"),e=require("react"),B=require("./useSelectBehavior.cjs"),H=require("./model.cjs"),w=require("./motion.cjs"),z=[],K=()=>{},_=b=>b==null?"":typeof b=="object"?H.toJSON(b)??"":String(b),G=e.memo(function(){const{selectRef:g,multiple:n,name:c,form:u,required:C}=e.useContext(h.SelectConfigContext),{selected:s,selectedIDs:x,disabled:t,fieldsetDisabled:p}=e.useContext(h.SelectStateContext),{reset:m,markInvalid:S}=e.useContext(h.SelectActionsContext),y=e.useRef(null);e.useEffect(()=>{const r=y.current?.getRootNode();let v;const j=N=>{N.target===y.current?.form&&(clearTimeout(v),v=setTimeout(()=>N.defaultPrevented||m()))};return r?.addEventListener("reset",j,!0),()=>{clearTimeout(v),r?.removeEventListener("reset",j,!0)}},[m]);const d=n?x:s?[s]:z,l=!C&&(!c||n&&!d.length),f=l||!d.length?[""]:d.map(r=>_(r.original)),i=()=>g.current?.focus();return f.map((r,v)=>a.jsx("input",{className:"rac-input",ref:v?void 0:y,name:l?void 0:c,form:u,value:r,hidden:l,required:C&&!v,disabled:t&&!p,tabIndex:-1,"aria-hidden":"true",autoComplete:"off",onChange:K,onInvalid:S,onFocus:i},v))}),R=e.memo(function({hidden:g,settle:n,wait:c,children:u}){const{valueAsOption:C,renderOption:s}=e.useContext(h.SelectConfigContext),{title:x,valueOption:t,hasActualValue:p,loading:m,error:S}=e.useContext(h.SelectStateContext),[y]=e.useState(()=>new Set),d=C&&t?o.optionContent(t,s,!0):null,l=m&&!S&&!p,f=`${d?t.id:x}${l?"-loading":""}`,i=t?.type==="boolean"?String(t.raw):void 0;return a.jsxs(w.Presence,{wait:c,children:[!g&&a.jsxs(w.Collapse,{axis:"x",fade:!0,group:y,className:o.withClass("rac-title",d&&t.className),style:d?t.style:void 0,"data-bool":i,onEntered:n,onExited:n,children:[d?a.jsx("div",{className:"rac-option-jsx",children:d}):x,l&&o.dots]},f),u]})}),J=e.memo(function(){const{selectedText:g,duration:n,texts:c}=e.useContext(h.SelectConfigContext),{selectedIDs:u}=e.useContext(h.SelectStateContext),C=e.useSyncExternalStore(o.watchMotion,o.reducedMotion,()=>!1),s=u.length>0&&!g;return a.jsx(R,{hidden:s,wait:n>0&&!C,children:s&&u.map((x,t)=>a.jsx(w.Collapse,{as:"span",axis:"none",exitAxis:"x",fade:!0,className:"rac-pick","data-last":o.flag(t===u.length-1),children:x.name||c.emptyOption},x.id))})}),Q=e.memo(function(){const{selectRef:g,multiple:n,duration:c,easing:u,ext:C}=e.useContext(h.SelectConfigContext),s=n?C.Value:void 0,x=e.useRef(null),[t,p]=e.useState({Slot:s,multiple:n,enter:!1,left:!1});let m=t;(s?t.Slot!==s||t.left:t.Slot&&(!n||t.left))?m={Slot:s,multiple:n,enter:!!s&&!t.Slot&&t.multiple,left:!1}:t.multiple!==n&&(m={...t,multiple:n}),m!==t&&p(m);const{Slot:S,enter:y}=m,d=e.useCallback(()=>p(i=>i.left?i:{...i,left:!0}),[]),[l]=e.useState(()=>({value:0,root:"",anim:null})),f=e.useRef({duration:c,easing:u});return e.useLayoutEffect(()=>{f.current={duration:c,easing:u}},[c,u]),e.useLayoutEffect(()=>{const i=x.current;if(!i||typeof ResizeObserver>"u")return;const r=new ResizeObserver(()=>o.followHeight(g.current,l,i.offsetHeight,f.current.duration,f.current.easing));return r.observe(i),()=>r.disconnect()},[S,g,l]),e.useEffect(()=>()=>l.anim?.cancel(),[l]),S?a.jsx(S,{height:l,enter:y,leaving:!s,onLeft:d}):a.jsx("div",{className:"rac-value",ref:x,children:n?a.jsx(J,{}):a.jsx(R,{})})}),U=e.memo(function(){const{selectRef:g,selectId:n,highlightStore:c,className:u,style:C,duration:s,easing:x,deleteInline:t,icons:p,texts:m,placeholder:S,id:y,required:d,popup:l,attrs:f}=e.useContext(h.SelectConfigContext),{visibility:i,active:r,hasActualValue:v,deleting:j,loading:N,loadPending:O,error:q,invalid:E,normalizedOptions:T}=e.useContext(h.SelectStateContext),{handleBlur:P,handleFocus:k,handleKeyDown:A,toggleVisibility:D,clear:F}=e.useContext(h.SelectActionsContext),V=e.useSyncExternalStore(c.subscribe,()=>{const I=i?T[B.effectiveHighlight(c.get())]:null;return I?o.optionDomId(n,I.id):void 0},()=>{}),L=!!p.clear&&v&&r&&!j,M=!!p.arrow&&r&&!j&&l,$=l?{role:"combobox","aria-haspopup":"listbox","aria-controls":`${n}-listbox`,"aria-expanded":i,"aria-activedescendant":V,"aria-required":d||void 0}:{role:"group"};return a.jsxs("div",{...f,id:y,ref:g,style:{"--rac-duration":`${s}ms`,"--rac-ease":x,...C},className:o.withClass("rac-select",u),...r&&{onKeyDown:A,onFocus:k,onClick:D,onBlur:P},...$,"aria-disabled":!r,tabIndex:r?0:-1,"aria-busy":N||O||void 0,"aria-label":f["aria-label"]??(f["aria-labelledby"]?void 0:S),"aria-invalid":E||f["aria-invalid"],"aria-describedby":[f["aria-describedby"],q&&`${n}-error`].filter(Boolean).join(" ")||void 0,"data-inline-delete":o.flag(t),"data-empty":o.flag(!v),"data-deleting":o.flag(j),"data-error":o.flag(q),"data-invalid":o.flag(E),children:[a.jsx(Q,{}),a.jsxs(w.Presence,{children:[L&&a.jsx(w.Collapse,{as:"button",type:"button",axis:"x",className:"rac-clear",tabIndex:-1,"aria-label":m.clear,onMouseDown:o.stopEvent,onClick:I=>{o.refocus(I,g),F(I)},children:o.renderIcon(p.clear)},"clear"),M&&a.jsx(w.Collapse,{axis:"x",className:"rac-arrow","aria-hidden":"true",children:o.renderIcon(p.arrow)},"arrow")]}),a.jsx(G,{})]})});exports.Title=R;exports.default=U;

package/dist/trigger.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsxs as O, jsx as f } from "react/jsx-runtime";
+import { SelectConfigContext as N, SelectStateContext as D, SelectActionsContext as j } from "./state.js";
+import { optionDomId as Z, flag as w, withClass as $, renderIcon as P, stopEvent as ee, refocus as te, optionContent as oe, dots as ne, followHeight as re, watchMotion as ae, reducedMotion as ie } from "./utils.js";
+import { memo as I, useContext as h, useSyncExternalStore as q, useState as E, useRef as T, useCallback as le, useLayoutEffect as V, useEffect as H } from "react";
+import { effectiveHighlight as se } from "./useSelectBehavior.js";
+import { toJSON as ce } from "./model.js";
+import { Presence as L, Collapse as k } from "./motion.js";
+const de = [], ue = () => {
+}, fe = (v) => v == null ? "" : typeof v == "object" ? ce(v) ?? "" : String(v), me = /* @__PURE__ */ I(function() {
+  const { selectRef: m, multiple: t, name: i, form: l, required: g } = h(N), { selected: o, selectedIDs: d, disabled: e, fieldsetDisabled: p } = h(D), { reset: u, markInvalid: x } = h(j), y = T(null);
+  H(() => {
+    const r = y.current?.getRootNode();
+    let b;
+    const S = (R) => {
+      R.target === y.current?.form && (clearTimeout(b), b = setTimeout(() => R.defaultPrevented || u()));
+    };
+    return r?.addEventListener("reset", S, !0), () => {
+      clearTimeout(b), r?.removeEventListener("reset", S, !0);
+    };
+  }, [u]);
+  const s = t ? d : o ? [o] : de, n = !g && (!i || t && !s.length), c = n || !s.length ? [""] : s.map((r) => fe(r.original)), a = () => m.current?.focus();
+  return c.map(
+    (r, b) => /* @__PURE__ */ f("input", { className: "rac-input", ref: b ? void 0 : y, name: n ? void 0 : i, form: l, value: r, hidden: n, required: g && !b, disabled: e && !p, tabIndex: -1, "aria-hidden": "true", autoComplete: "off", onChange: ue, onInvalid: x, onFocus: a }, b)
+  );
+}), z = /* @__PURE__ */ I(function({ hidden: m, settle: t, wait: i, children: l }) {
+  const { valueAsOption: g, renderOption: o } = h(N), { title: d, valueOption: e, hasActualValue: p, loading: u, error: x } = h(D), [y] = E(() => /* @__PURE__ */ new Set()), s = g && e ? oe(e, o, !0) : null, n = u && !x && !p, c = `${s ? e.id : d}${n ? "-loading" : ""}`, a = e?.type === "boolean" ? String(e.raw) : void 0;
+  return /* @__PURE__ */ O(L, { wait: i, children: [
+    !m && /* @__PURE__ */ O(k, { axis: "x", fade: !0, group: y, className: $("rac-title", s && e.className), style: s ? e.style : void 0, "data-bool": a, onEntered: t, onExited: t, children: [
+      s ? /* @__PURE__ */ f("div", { className: "rac-option-jsx", children: s }) : d,
+      n && ne
+    ] }, c),
+    l
+  ] });
+}), pe = /* @__PURE__ */ I(function() {
+  const { selectedText: m, duration: t, texts: i } = h(N), { selectedIDs: l } = h(D), g = q(ae, ie, () => !1), o = l.length > 0 && !m;
+  return /* @__PURE__ */ f(z, { hidden: o, wait: t > 0 && !g, children: o && l.map((d, e) => /* @__PURE__ */ f(k, { as: "span", axis: "none", exitAxis: "x", fade: !0, className: "rac-pick", "data-last": w(e === l.length - 1), children: d.name || i.emptyOption }, d.id)) });
+}), he = /* @__PURE__ */ I(function() {
+  const { selectRef: m, multiple: t, duration: i, easing: l, ext: g } = h(N), o = t ? g.Value : void 0, d = T(null), [e, p] = E({ Slot: o, multiple: t, enter: !1, left: !1 });
+  let u = e;
+  (o ? e.Slot !== o || e.left : e.Slot && (!t || e.left)) ? u = { Slot: o, multiple: t, enter: !!o && !e.Slot && e.multiple, left: !1 } : e.multiple !== t && (u = { ...e, multiple: t }), u !== e && p(u);
+  const { Slot: x, enter: y } = u, s = le(() => p((a) => a.left ? a : { ...a, left: !0 }), []), [n] = E(() => ({ value: 0, root: "", anim: null })), c = T({ duration: i, easing: l });
+  return V(() => {
+    c.current = { duration: i, easing: l };
+  }, [i, l]), V(() => {
+    const a = d.current;
+    if (!a || typeof ResizeObserver > "u") return;
+    const r = new ResizeObserver(() => re(m.current, n, a.offsetHeight, c.current.duration, c.current.easing));
+    return r.observe(a), () => r.disconnect();
+  }, [x, m, n]), H(() => () => n.anim?.cancel(), [n]), x ? /* @__PURE__ */ f(x, { height: n, enter: y, leaving: !o, onLeft: s }) : /* @__PURE__ */ f("div", { className: "rac-value", ref: d, children: t ? /* @__PURE__ */ f(pe, {}) : /* @__PURE__ */ f(z, {}) });
+}), Ce = /* @__PURE__ */ I(function() {
+  const { selectRef: m, selectId: t, highlightStore: i, className: l, style: g, duration: o, easing: d, deleteInline: e, icons: p, texts: u, placeholder: x, id: y, required: s, popup: n, attrs: c } = h(N), { visibility: a, active: r, hasActualValue: b, deleting: S, loading: R, loadPending: B, error: A, invalid: F, normalizedOptions: K } = h(D), { handleBlur: M, handleFocus: G, handleKeyDown: J, toggleVisibility: _, clear: Q } = h(j), U = q(i.subscribe, () => {
+    const C = a ? K[se(i.get())] : null;
+    return C ? Z(t, C.id) : void 0;
+  }, () => {
+  }), W = !!p.clear && b && r && !S, X = !!p.arrow && r && !S && n, Y = n ? { role: "combobox", "aria-haspopup": "listbox", "aria-controls": `${t}-listbox`, "aria-expanded": a, "aria-activedescendant": U, "aria-required": s || void 0 } : { role: "group" };
+  return /* @__PURE__ */ O(
+    "div",
+    {
+      ...c,
+      id: y,
+      ref: m,
+      style: { "--rac-duration": `${o}ms`, "--rac-ease": d, ...g },
+      className: $("rac-select", l),
+      ...r && {
+        onKeyDown: J,
+        onFocus: G,
+        onClick: _,
+        onBlur: M
+      },
+      ...Y,
+      "aria-disabled": !r,
+      tabIndex: r ? 0 : -1,
+      "aria-busy": R || B || void 0,
+      "aria-label": c["aria-label"] ?? (c["aria-labelledby"] ? void 0 : x),
+      "aria-invalid": F || c["aria-invalid"],
+      "aria-describedby": [c["aria-describedby"], A && `${t}-error`].filter(Boolean).join(" ") || void 0,
+      "data-inline-delete": w(e),
+      "data-empty": w(!b),
+      "data-deleting": w(S),
+      "data-error": w(A),
+      "data-invalid": w(F),
+      children: [
+        /* @__PURE__ */ f(he, {}),
+        /* @__PURE__ */ O(L, { children: [
+          W && /* @__PURE__ */ f(k, { as: "button", type: "button", axis: "x", className: "rac-clear", tabIndex: -1, "aria-label": u.clear, onMouseDown: ee, onClick: (C) => {
+            te(C, m), Q(C);
+          }, children: P(p.clear) }, "clear"),
+          X && /* @__PURE__ */ f(k, { axis: "x", className: "rac-arrow", "aria-hidden": "true", children: P(p.arrow) }, "arrow")
+        ] }),
+        /* @__PURE__ */ f(me, {})
+      ]
+    }
+  );
+});
+export {
+  z as Title,
+  Ce 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"),V=require("react-dom"),R=require("./state.cjs"),f=require("./utils.cjs"),a=require("./chipGeometry.cjs"),i=require("./chipMotion.cjs"),se=.25,re={hoverId:null,swipedId:null,held:!1,breaks:a.NONE};function oe(y,{height:p,enter:J,leaving:C,onLeft:q}){const{selectRef:m,duration:u,easing:l,deleteInline:B,deleteAlways:j,icons:Q,valueAsOption:U,renderOption:X}=n.useContext(R.SelectConfigContext),{selectedIDs:F,deleting:v,visibility:H,active:O}=n.useContext(R.SelectStateContext),{setDeleting:D,setVisibility:N}=n.useContext(R.SelectActionsContext),[T,Y]=n.useState(0),[s]=n.useState(()=>R.createStore(re)),[Z]=n.useState(()=>new Set),G=n.useSyncExternalStore(s.subscribe,()=>s.get().held,()=>!1),L=n.useSyncExternalStore(s.subscribe,()=>s.get().breaks,()=>a.NONE),$=n.useSyncExternalStore(f.watchMotion,f.reducedMotion,()=>!1),h=n.useRef({rows:null,reserve:0,chips:y,swap:!1,dress:!1,wide:!1,duration:u,easing:l}),w=n.useRef(null),k=n.useRef(null),d=n.useRef(null),W=n.useRef(null),[z,ee]=n.useState(()=>!!J&&u>0&&!f.reducedMotion()),M=C||z,_=!!Q.remove,K=B&&!j&&!v&&_,E=K&&!M?T+se:0,x=K&&!T&&y.length>0,A=M?3:U?X?2:1:0,g=_?(B||v?1:0)|(j||v?2:0):0,P=n.useRef(g),I=n.useEffectEvent((e,t)=>{const r=d.current,o=h.current;if(!r)return;const c=i.isResizing(r);c&&t||(e&&s.get().held&&a.freeze(s,r,o),c?o.fit!=null&&f.followHeight(m.current,p,o.fit,o.duration,o.easing,r):(t||p.value)&&f.followHeight(m.current,p,r.offsetHeight,o.duration,o.easing),s.get().held||s.set({breaks:a.restBreaks(s,r,o.chips,o.reserve)}))}),S=n.useCallback(()=>{const e=d.current,t=h.current;if(!e||!s.get().held||i.isBusy(e,t.dress))return;const r=a.slotsOf(e),o=r.map(b=>b.getBoundingClientRect()),c=a.restBreaks(s,e,t.chips,t.reserve);Object.assign(t,{rows:null,floor:null,fit:null,dress:!1,wide:!1}),V.flushSync(()=>s.set({held:!1,breaks:c})),t.swap=i.isBusy(e),t.swap&&V.flushSync(()=>a.freeze(s,e,t)),f.reducedMotion()||r.forEach((b,ne)=>b.isConnected&&i.flip(b,o[ne],t.swap?u/2:u,l))},[s,u,l]);n.useLayoutEffect(()=>{Object.assign(h.current,{duration:u,easing:l})},[u,l]),n.useLayoutEffect(()=>{const e=P.current,t=d.current,r=h.current;if(P.current=g,e===g||!t||!u||f.reducedMotion()||((e^g)&1&&i.shift(t,!!(g&1),u,l,S),!((e|g)&1)||!i.isBusy(t,!0)))return;const o=r.rows,c=o??a.snapRows(w.current);Object.assign(r,{dress:!0,wide:!1,rows:c,reserve:E}),c&&a.freeze(s,t,r),!(c&&r.rows.length<=c.length)&&(Object.assign(r,{wide:!0,rows:o}),a.freeze(s,t,r))},[g,E,s,u,l,S]),n.useLayoutEffect(()=>{const e=h.current,t=d.current,r=e.chips!==y;Object.assign(e,{chips:y,reserve:E}),r&&t&&i.isBusy(t,e.dress)&&a.freeze(s,t,e),I(!r)},[y,E,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 te=n.useCallback(e=>{const t=d.current;t&&(w.current=i.snapOf(t,e),e&&(k.current=i.padOf(t)))},[]);return n.useLayoutEffect(()=>{const e=d.current,t=h.current,r=k.current;if(k.current=null,!e||!w.current||!u||f.reducedMotion())return;i.repad(e,r,u,l);const o=i.resizesOf(w.current);o.length&&(t.floor=new Map(o.map(({id:c,width:b})=>[c,b])),a.freeze(s,e,t),f.followHeight(m.current,p,t.fit,u,l,e),i.resize(o,u,l,()=>{S(),I(!1,!0)}))},[A,s,u,l,m,S,p]),n.useEffect(()=>{const e=z&&requestAnimationFrame(()=>ee(!1));return()=>cancelAnimationFrame(e)},[z]),n.useLayoutEffect(()=>{const e=d.current;if(!C)return;let t;const r=()=>s.get().held||!!e?.getAnimations({subtree:!0}).some(c=>c.playState==="running"&&c.effect?.getComputedTiming().endTime<1/0),o=()=>{r()?t=requestAnimationFrame(o):q()};return o(),()=>cancelAnimationFrame(t)},[C,q,s]),n.useLayoutEffect(()=>{const e=w.current;!e||L!==s.get().breaks||(w.current=null,f.reducedMotion()||e.forEach((t,r)=>r.isConnected&&i.flip(r,t,u,l)))},[L,y,A,g,s,u,l]),n.useLayoutEffect(()=>{const e=d.current,t=h.current;!e||!p.value||i.isResizing(e)||f.followHeight(m.current,p,e.offsetHeight,t.duration,t.easing)},[L,G,m,p]),n.useEffect(()=>{v&&H&&N(!1),v&&(!F.length||!O)&&D(!1),s.set({hoverId:null,...!O&&{swipedId:null}})},[F.length,v,H,O,D,N,s]),n.useLayoutEffect(()=>{const e=W.current;if(!x||!e)return;const t=getComputedStyle(e);Y(e.getBoundingClientRect().width+parseFloat(t.marginLeft)+parseFloat(t.marginRight))},[x]),{chipStore:s,delGroup:Z,valueRef:d,delIconRef:W,probe:x,settle:S,held:G,snapshot:te,look:A,dress:g,plain:M,wait:u>0&&!$}}exports.default=oe;

package/dist/useChipLayout.js

@@ -0,0 +1,77 @@
+"use client";
+import { useContext as D, useState as C, useSyncExternalStore as H, useRef as w, useEffectEvent as me, useCallback as Y, useLayoutEffect as a, useEffect as Z } from "react";
+import { flushSync as _ } from "react-dom";
+import { SelectConfigContext as ge, SelectStateContext as pe, SelectActionsContext as ve, createStore as he } from "./state.js";
+import { watchMotion as we, reducedMotion as b, followHeight as O } from "./utils.js";
+import { NONE as ne, freeze as y, restBreaks as $, slotsOf as be, snapRows as ye } from "./chipGeometry.js";
+import { isResizing as ee, isBusy as E, flip as te, shift as Re, snapOf as Se, padOf as Ce, repad as Oe, resizesOf as Ee, resize as ke } from "./chipMotion.js";
+const Ae = 0.25, Ie = { hoverId: null, swipedId: null, held: !1, breaks: ne };
+function De(m, { height: f, enter: re, leaving: k, onLeft: M }) {
+  const { selectRef: g, duration: o, easing: l, deleteInline: q, deleteAlways: N, icons: se, valueAsOption: oe, renderOption: ce } = D(ge), { selectedIDs: T, deleting: p, visibility: W, active: A } = D(pe), { setDeleting: G, setVisibility: K } = D(ve), [V, le] = C(0), [n] = C(() => he(Ie)), [ie] = C(() => /* @__PURE__ */ new Set()), J = H(n.subscribe, () => n.get().held, () => !1), I = H(n.subscribe, () => n.get().breaks, () => ne), ue = H(we, b, () => !1), d = w({ rows: null, reserve: 0, chips: m, swap: !1, dress: !1, wide: !1, duration: o, easing: l }), v = w(null), x = w(null), i = w(null), P = w(null), [z, ae] = C(() => !!re && o > 0 && !b()), F = k || z, Q = !!se.remove, U = q && !N && !p && Q, S = U && !F ? V + Ae : 0, j = U && !V && m.length > 0, L = F ? 3 : oe ? ce ? 2 : 1 : 0, u = Q ? (q || p ? 1 : 0) | (N || p ? 2 : 0) : 0, X = w(u), B = me((e, t) => {
+    const r = i.current, s = d.current;
+    if (!r) return;
+    const c = ee(r);
+    c && t || (e && n.get().held && y(n, r, s), c ? s.fit != null && O(g.current, f, s.fit, s.duration, s.easing, r) : (t || f.value) && O(g.current, f, r.offsetHeight, s.duration, s.easing), n.get().held || n.set({ breaks: $(n, r, s.chips, s.reserve) }));
+  }), R = Y(() => {
+    const e = i.current, t = d.current;
+    if (!e || !n.get().held || E(e, t.dress)) return;
+    const r = be(e), s = r.map((h) => h.getBoundingClientRect()), c = $(n, e, t.chips, t.reserve);
+    Object.assign(t, { rows: null, floor: null, fit: null, dress: !1, wide: !1 }), _(() => n.set({ held: !1, breaks: c })), t.swap = E(e), t.swap && _(() => y(n, e, t)), b() || r.forEach((h, de) => h.isConnected && te(h, s[de], t.swap ? o / 2 : o, l));
+  }, [n, o, l]);
+  a(() => {
+    Object.assign(d.current, { duration: o, easing: l });
+  }, [o, l]), a(() => {
+    const e = X.current, t = i.current, r = d.current;
+    if (X.current = u, e === u || !t || !o || b() || ((e ^ u) & 1 && Re(t, !!(u & 1), o, l, R), !((e | u) & 1) || !E(t, !0))) return;
+    const s = r.rows, c = s ?? ye(v.current);
+    Object.assign(r, { dress: !0, wide: !1, rows: c, reserve: S }), c && y(n, t, r), !(c && r.rows.length <= c.length) && (Object.assign(r, { wide: !0, rows: s }), y(n, t, r));
+  }, [u, S, n, o, l, R]), a(() => {
+    const e = d.current, t = i.current, r = e.chips !== m;
+    Object.assign(e, { chips: m, reserve: S }), r && t && E(t, e.dress) && y(n, t, e), B(!r);
+  }, [m, S, n]), a(() => {
+    const e = () => B(!0, !0), t = typeof ResizeObserver > "u" ? null : new ResizeObserver(e);
+    return t ? t.observe(i.current) : e(), document.fonts?.addEventListener("loadingdone", e), () => {
+      t?.disconnect(), document.fonts?.removeEventListener("loadingdone", e);
+    };
+  }, []);
+  const fe = Y((e) => {
+    const t = i.current;
+    t && (v.current = Se(t, e), e && (x.current = Ce(t)));
+  }, []);
+  return a(() => {
+    const e = i.current, t = d.current, r = x.current;
+    if (x.current = null, !e || !v.current || !o || b()) return;
+    Oe(e, r, o, l);
+    const s = Ee(v.current);
+    s.length && (t.floor = new Map(s.map(({ id: c, width: h }) => [c, h])), y(n, e, t), O(g.current, f, t.fit, o, l, e), ke(s, o, l, () => {
+      R(), B(!1, !0);
+    }));
+  }, [L, n, o, l, g, R, f]), Z(() => {
+    const e = z && requestAnimationFrame(() => ae(!1));
+    return () => cancelAnimationFrame(e);
+  }, [z]), a(() => {
+    const e = i.current;
+    if (!k) return;
+    let t;
+    const r = () => n.get().held || !!e?.getAnimations({ subtree: !0 }).some((c) => c.playState === "running" && c.effect?.getComputedTiming().endTime < 1 / 0), s = () => {
+      r() ? t = requestAnimationFrame(s) : M();
+    };
+    return s(), () => cancelAnimationFrame(t);
+  }, [k, M, n]), a(() => {
+    const e = v.current;
+    !e || I !== n.get().breaks || (v.current = null, b() || e.forEach((t, r) => r.isConnected && te(r, t, o, l)));
+  }, [I, m, L, u, n, o, l]), a(() => {
+    const e = i.current, t = d.current;
+    !e || !f.value || ee(e) || O(g.current, f, e.offsetHeight, t.duration, t.easing);
+  }, [I, J, g, f]), Z(() => {
+    p && W && K(!1), p && (!T.length || !A) && G(!1), n.set({ hoverId: null, ...!A && { swipedId: null } });
+  }, [T.length, p, W, A, G, K, n]), a(() => {
+    const e = P.current;
+    if (!j || !e) return;
+    const t = getComputedStyle(e);
+    le(e.getBoundingClientRect().width + parseFloat(t.marginLeft) + parseFloat(t.marginRight));
+  }, [j]), { chipStore: n, delGroup: ie, valueRef: i, delIconRef: P, probe: j, settle: R, held: J, snapshot: fe, look: L, dress: u, plain: F, wait: o > 0 && !ue };
+}
+export {
+  De as default
+};