react-animated-select 0.7.7 → 0.8.1

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

package/dist/useSelectBehavior.js

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

package/dist/useSelectModel.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./model.cjs"),O=require("./state.cjs"),b=require("./utils.cjs"),c=require("react"),I=[];function oe({props:m,jsxOptions:G,state:X,setState:y,ext:q,setVisibility:C,loadMoreOnce:Y}){const{onChange:Z,disabled:S,loading:E,error:w,multiple:n,childrenFirst:A,groupsClosed:D,hasMore:P,loadButton:T,placeholder:_,selectedText:g,texts:i}=m,{disabledOption:k,emptyOption:V,invalidOption:z,emptyGroup:H,loadMore:K,loadingMore:N}=i,{loadPending:j,internalValue:$,toggledGroups:x,picked:B}=X,F=O.useDeepStable(m.options),J=O.useDeepStable(m.value),L=J!==void 0,s=L?J:$,Q=c.useMemo(()=>q.row?.({hasMore:P,loadButton:T,loadPending:j,moreText:K,pendingText:N})??null,[q,P,T,j,K,N]),o=c.useMemo(()=>h.normalizeOptions({options:F,jsxOptions:G,childrenFirst:A,tail:Q,emptyOption:V,invalidOption:z,disabledOption:k,emptyGroup:H}),[F,G,A,Q,V,z,k,H]),ee=c.useMemo(()=>new Set(o.filter(e=>e.groupHeader&&!e.disabled&&D===x.has(e.name)).map(e=>e.name)),[o,x,D]),{selected:r,selectedIDs:d}=c.useMemo(()=>h.resolveSelection(s,o,n,B),[s,o,n,B]),p=o.length>0,te=!S&&p,f=s!=null&&!(Array.isArray(s)&&!s.length)&&!(h.isPlain(s)&&!Object.keys(s).length),le=f&&g?null:r,ne=c.useMemo(()=>f&&g?g:r?r.name:w?i.error:E?i.loading:S?i.disabled:p?_:i.empty,[w,E,S,f,g,r,p,_,i]),R=e=>y(t=>{const l=new Set(t.toggledGroups);return l.has(e)?l.delete(e):l.add(e),{toggledGroups:l}}),v=(e,t,l)=>{y(L?{picked:l}:{internalValue:e,picked:l}),Z?.(e,t)},U=e=>v(e.map(t=>t.original),e.map(t=>t.userId),e.map(t=>t.id)),se=O.useStableActions({toggleGroup:R,selectOption:(e,t)=>{if(e.groupHeader){b.stopEvent(t),e.disabled||R(e.name);return}if(e.disabled||e.loadMore){b.stopEvent(t),e.loadMore&&!e.loading&&Y();return}if(n){b.stopEvent(t);const l=d.some(a=>a.id===e.id);U(l?d.filter(a=>a.id!==e.id):[...d,e]);return}r?.id!==e.id&&v(e.original,e.userId,[e.id]),C(!1)},clear:e=>{b.stopEvent(e),v(n?[]:null,n?[]:null,I)},removeOption:e=>U(d.filter(t=>t.id!==e)),reset:()=>{y({deleting:!1,invalid:!1}),C(!1);const e=n?[]:null,t=m.defaultValue??e,{selected:l,selectedIDs:a}=h.resolveSelection(t,o,n,I),M=n?a:l?[l]:[],W=n?d:r?[r]:[];O.deepEqual(s??e,t)&&M.length===W.length&&M.every((u,re)=>u.id===W[re].id)||v(t,n?M.map(u=>u.userId):l?.userId??null,M.map(u=>u.id))}});return{normalizedOptions:o,expandedGroups:ee,selected:r,selectedIDs:d,hasOptions:p,active:te,hasActualValue:f,title:ne,valueOption:le,actions:se}}exports.NO_PICK=I;exports.default=oe;

package/dist/useSelectModel.js

@@ -0,0 +1,59 @@
+"use client";
+import { normalizeOptions as oe, resolveSelection as R, isPlain as de } from "./model.js";
+import { useDeepStable as U, useStableActions as ie, deepEqual as ae } from "./state.js";
+import { stopEvent as O } from "./utils.js";
+import { useMemo as c } from "react";
+const W = [];
+function ge({ props: m, jsxOptions: M, state: X, setState: b, ext: I, setVisibility: G, loadMoreOnce: Y }) {
+  const { onChange: Z, disabled: y, loading: S, error: w, multiple: n, childrenFirst: A, groupsClosed: C, hasMore: k, loadButton: D, placeholder: T, selectedText: f, texts: d } = m, { disabledOption: V, emptyOption: x, invalidOption: z, emptyGroup: E, loadMore: H, loadingMore: P } = d, { loadPending: q, internalValue: $, toggledGroups: B, picked: F } = X, K = U(m.options), N = U(m.value), _ = N !== void 0, r = _ ? N : $, j = c(() => I.row?.({ hasMore: k, loadButton: D, loadPending: q, moreText: H, pendingText: P }) ?? null, [I, k, D, q, H, P]), o = c(() => oe({
+    options: K,
+    jsxOptions: M,
+    childrenFirst: A,
+    tail: j,
+    emptyOption: x,
+    invalidOption: z,
+    disabledOption: V,
+    emptyGroup: E
+  }), [K, M, A, j, x, z, V, E]), ee = c(() => new Set(
+    o.filter((e) => e.groupHeader && !e.disabled && C === B.has(e.name)).map((e) => e.name)
+  ), [o, B, C]), { selected: s, selectedIDs: i } = c(() => R(r, o, n, F), [r, o, n, F]), g = o.length > 0, le = !y && g, p = r != null && !(Array.isArray(r) && !r.length) && !(de(r) && !Object.keys(r).length), te = p && f ? null : s, ne = c(() => p && f ? f : s ? s.name : w ? d.error : S ? d.loading : y ? d.disabled : g ? T : d.empty, [w, S, y, p, f, s, g, T, d]), J = (e) => b((l) => {
+    const t = new Set(l.toggledGroups);
+    return t.has(e) ? t.delete(e) : t.add(e), { toggledGroups: t };
+  }), h = (e, l, t) => {
+    b(_ ? { picked: t } : { internalValue: e, picked: t }), Z?.(e, l);
+  }, L = (e) => h(e.map((l) => l.original), e.map((l) => l.userId), e.map((l) => l.id)), re = ie({
+    toggleGroup: J,
+    selectOption: (e, l) => {
+      if (e.groupHeader) {
+        O(l), e.disabled || J(e.name);
+        return;
+      }
+      if (e.disabled || e.loadMore) {
+        O(l), e.loadMore && !e.loading && Y();
+        return;
+      }
+      if (n) {
+        O(l);
+        const t = i.some((a) => a.id === e.id);
+        L(t ? i.filter((a) => a.id !== e.id) : [...i, e]);
+        return;
+      }
+      s?.id !== e.id && h(e.original, e.userId, [e.id]), G(!1);
+    },
+    clear: (e) => {
+      O(e), h(n ? [] : null, n ? [] : null, W);
+    },
+    removeOption: (e) => L(i.filter((l) => l.id !== e)),
+    // [DOC: form-field]
+    reset: () => {
+      b({ deleting: !1, invalid: !1 }), G(!1);
+      const e = n ? [] : null, l = m.defaultValue ?? e, { selected: t, selectedIDs: a } = R(l, o, n, W), v = n ? a : t ? [t] : [], Q = n ? i : s ? [s] : [];
+      ae(r ?? e, l) && v.length === Q.length && v.every((u, se) => u.id === Q[se].id) || h(l, n ? v.map((u) => u.userId) : t?.userId ?? null, v.map((u) => u.id));
+    }
+  });
+  return { normalizedOptions: o, expandedGroups: ee, selected: s, selectedIDs: i, hasOptions: g, active: le, hasActualValue: p, title: ne, valueOption: te, actions: re };
+}
+export {
+  W as NO_PICK,
+  ge as default
+};

package/dist/utils.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("react"),p={XMark:({className:t="",...e})=>n.jsx("svg",{className:t,viewBox:"0 0 320 512",fill:"currentColor","aria-hidden":"true",height:"1em",width:"1em",...e,children:n.jsx("path",{d:"M310.6 361.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L160 301.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L114.7 256 9.4 150.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 210.7 265.4 105.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L205.3 256l105.3 105.4z"})}),ArrowUp:({className:t="",...e})=>n.jsx("svg",{className:t,viewBox:"0 0 448 512",fill:"currentColor","aria-hidden":"true",height:"1em",width:"1em",...e,children:n.jsx("path",{d:"M34.9 289.5l175.9-175.8c9.4-9.4 24.6-9.4 33.9 0L420.1 289.5c15.1 15.1 4.4 41-17 41H51.9c-21.4 0-32.1-25.9-17-41z"})}),Checkmark:({className:t="",...e})=>n.jsx("svg",{className:t,viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",height:"1em",width:"1em",...e,children:n.jsx("path",{d:"M20.285 6.708a1 1 0 0 0-1.414-1.416l-9.192 9.192-4.243-4.244a1 1 0 1 0-1.414 1.416l5 5a1 1 0 0 0 1.414 0l9.849-9.948z"})})},j=(t,e)=>{if(!t)return null;const i=(r={})=>({...e,...r,style:{...e?.style,...r?.style}});if(typeof t=="string")return n.jsx("img",{src:t,...i(),className:u("rac-icon",e?.className),alt:""});if(d.isValidElement(t))return d.cloneElement(t,i(t.props));if(typeof t=="function"||typeof t=="object"&&t.$$typeof){const r=t;return n.jsx(r,{...i()})}return null},v=(t,e)=>`${t}-${String(e).replace(/[^A-Za-z0-9-]/gu,i=>`_${i.codePointAt(0).toString(36)}_`)}`,m=t=>t?"":void 0,u=(t,e)=>e?`${t} ${e}`:t,y=(t,e,i)=>t.jsx||(e&&"original"in t?e(t.original,{selected:i,disabled:!!t.disabled}):null),E=n.jsxs("span",{className:"rac-dots","aria-hidden":"true",children:[n.jsx("i",{}),n.jsx("i",{}),n.jsx("i",{})]}),C=(()=>{try{return process.env.NODE_ENV!=="production"}catch{return!1}})(),h=new Set,M=(t,e)=>{!C||h.has(t)||(h.add(t),console.warn(`[react-animated-select] ${e}`))},b=t=>{t?.stopPropagation(),t?.preventDefault()},S=(t,e)=>{t?.currentTarget.contains(document.activeElement)&&e.current?.focus()},g="(prefers-reduced-motion: reduce)",f=()=>!!window.matchMedia?.(g).matches,$=t=>{const e=window.matchMedia?.(g);return e?.addEventListener("change",t),()=>e?.removeEventListener("change",t)},D=(t,e,i,r,w,s)=>{if(!t||i===e.value)return;const o=getComputedStyle(t),c=e.anim?.playState==="running"?o.height:e.root;e.anim?.cancel(),s&&Object.assign(s.style,{height:`${i}px`,boxSizing:"border-box"}),e.root=o.height,s&&Object.assign(s.style,{height:"",boxSizing:""});const x=!e.value||c===e.root||!t.animate||f();if(e.value=i,e.anim=null,x)return;const a={overflow:"hidden",alignItems:"flex-start"},l=e.anim=t.animate([{...a,height:c},{...a,height:e.root}],{duration:r,easing:w});l.onfinish=()=>{e.anim===l&&(e.anim=null)}};exports.dots=E;exports.flag=m;exports.followHeight=D;exports.icons=p;exports.optionContent=y;exports.optionDomId=v;exports.reducedMotion=f;exports.refocus=S;exports.renderIcon=j;exports.stopEvent=b;exports.warnOnce=M;exports.watchMotion=$;exports.withClass=u;

package/dist/utils.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
+import { isValidElement as p, cloneElement as w } from "react";
+const C = {
+  XMark: ({ className: t = "", ...e }) => /* @__PURE__ */ i(
+    "svg",
+    {
+      className: t,
+      viewBox: "0 0 320 512",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      height: "1em",
+      width: "1em",
+      ...e,
+      children: /* @__PURE__ */ i("path", { d: "M310.6 361.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L160 301.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L114.7 256 9.4 150.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 210.7 265.4 105.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L205.3 256l105.3 105.4z" })
+    }
+  ),
+  ArrowUp: ({ className: t = "", ...e }) => /* @__PURE__ */ i(
+    "svg",
+    {
+      className: t,
+      viewBox: "0 0 448 512",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      height: "1em",
+      width: "1em",
+      ...e,
+      children: /* @__PURE__ */ i("path", { d: "M34.9 289.5l175.9-175.8c9.4-9.4 24.6-9.4 33.9 0L420.1 289.5c15.1 15.1 4.4 41-17 41H51.9c-21.4 0-32.1-25.9-17-41z" })
+    }
+  ),
+  Checkmark: ({ className: t = "", ...e }) => /* @__PURE__ */ i(
+    "svg",
+    {
+      className: t,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      height: "1em",
+      width: "1em",
+      ...e,
+      children: /* @__PURE__ */ i("path", { d: "M20.285 6.708a1 1 0 0 0-1.414-1.416l-9.192 9.192-4.243-4.244a1 1 0 1 0-1.414 1.416l5 5a1 1 0 0 0 1.414 0l9.849-9.948z" })
+    }
+  )
+}, $ = (t, e) => {
+  if (!t) return null;
+  const n = (r = {}) => ({
+    ...e,
+    ...r,
+    style: {
+      ...e?.style,
+      ...r?.style
+    }
+  });
+  return typeof t == "string" ? /* @__PURE__ */ i("img", { src: t, ...n(), className: m("rac-icon", e?.className), alt: "" }) : p(t) ? w(t, n(t.props)) : typeof t == "function" || typeof t == "object" && t.$$typeof ? /* @__PURE__ */ i(t, { ...n() }) : null;
+}, M = (t, e) => `${t}-${String(e).replace(/[^A-Za-z0-9-]/gu, (n) => `_${n.codePointAt(0).toString(36)}_`)}`, b = (t) => t ? "" : void 0, m = (t, e) => e ? `${t} ${e}` : t, L = (t, e, n) => t.jsx || (e && "original" in t ? e(t.original, { selected: n, disabled: !!t.disabled }) : null), S = /* @__PURE__ */ f("span", { className: "rac-dots", "aria-hidden": "true", children: [
+  /* @__PURE__ */ i("i", {}),
+  /* @__PURE__ */ i("i", {}),
+  /* @__PURE__ */ i("i", {})
+] }), v = (() => {
+  try {
+    return process.env.NODE_ENV !== "production";
+  } catch {
+    return !1;
+  }
+})(), d = /* @__PURE__ */ new Set(), j = (t, e) => {
+  !v || d.has(t) || (d.add(t), console.warn(`[react-animated-select] ${e}`));
+}, z = (t) => {
+  t?.stopPropagation(), t?.preventDefault();
+}, D = (t, e) => {
+  t?.currentTarget.contains(document.activeElement) && e.current?.focus();
+}, h = "(prefers-reduced-motion: reduce)", y = () => !!window.matchMedia?.(h).matches, N = (t) => {
+  const e = window.matchMedia?.(h);
+  return e?.addEventListener("change", t), () => e?.removeEventListener("change", t);
+}, A = (t, e, n, r, u, s) => {
+  if (!t || n === e.value) return;
+  const o = getComputedStyle(t), a = e.anim?.playState === "running" ? o.height : e.root;
+  e.anim?.cancel(), s && Object.assign(s.style, { height: `${n}px`, boxSizing: "border-box" }), e.root = o.height, s && Object.assign(s.style, { height: "", boxSizing: "" });
+  const g = !e.value || a === e.root || !t.animate || y();
+  if (e.value = n, e.anim = null, g) return;
+  const c = { overflow: "hidden", alignItems: "flex-start" }, l = e.anim = t.animate([{ ...c, height: a }, { ...c, height: e.root }], { duration: r, easing: u });
+  l.onfinish = () => {
+    e.anim === l && (e.anim = null);
+  };
+};
+export {
+  S as dots,
+  b as flag,
+  A as followHeight,
+  C as icons,
+  L as optionContent,
+  M as optionDomId,
+  y as reducedMotion,
+  D as refocus,
+  $ as renderIcon,
+  z as stopEvent,
+  j as warnOnce,
+  N as watchMotion,
+  m as withClass
+};

package/index.d.ts

@@ -1,4 +1,7 @@
-import {FC, FunctionComponent, ReactNode, CSSProperties, ElementType, Ref, FocusEvent, AriaAttributes} from 'react'
+import {FC, FunctionComponent, ReactNode, CSSProperties, ElementType, Ref, FocusEvent, KeyboardEvent, AriaAttributes} from 'react'
+
+/** Live region message: a template with {label} / {n}, or a function for plural forms. */
+export type LiveText = string | ((value: string | number) => string)
 
 export interface SelectTexts {
     empty: string
@@ -13,7 +16,21 @@ export interface SelectTexts {
     invalidOption: string
     disabledOption: string
     emptyGroup: string
+    /** State word in a group header's accessible name. Default `'expanded'`. */
+    groupOpen: string
+    /** State word in a group header's accessible name. Default `'collapsed'`. */
+    groupClosed: string
     list: string
+    /** Validation bubble text of an empty required Select; default: the browser's own. */
+    required?: string
+    /** Default `'Removed {label}'`. */
+    removed?: LiveText
+    /** Default `'Selection cleared'`. */
+    cleared?: LiveText
+    /** Default `'{n} selected'`. */
+    selected?: LiveText
+    /** Default `'{n} more options loaded'`. */
+    loaded?: LiveText
 }
 
 export type SelectIcon = ElementType | string | ReactNode | null | false
@@ -26,17 +43,28 @@ export interface SelectIcons {
     checkbox: SelectIcon
 }
 
+/** An extension passed to `<Select plugins={[...]}/>`: use the built-in `chips` and `paging`. */
+export interface SelectPlugin {
+    readonly [key: string]: unknown
+}
+
 export interface SelectProps extends AriaAttributes {
     [key: `data-${string}`]: string | number | boolean | undefined
 
     ref?: Ref<HTMLDivElement>
     children?: ReactNode
 
+    /** A dictionary's values are the options, keys ignored; a key named name/label/id/value makes it one option, options/group a group. Array items take no className/style (use <Option/>). */
     options?: any[] | Record<string, any>
+    /** undefined = uncontrolled; keep one mode, clear a controlled Select with null / [] (a switch warns in dev). */
     value?: any
+    /** Initial value of an uncontrolled Select; also the target of form.reset(), in both modes, with or without name. */
     defaultValue?: any
+    /** value: an array item as given (an object stays the whole object), an <Option/> as its `value`; a controlled value must have the shape of its source. */
     onChange?: (value: any, ids: any) => void
     multiple?: boolean
+    /** Optional features: `[chips]` for chips in a multiple Select, `[paging]` for `hasMore` / `loadMore` / `loadButton`. */
+    plugins?: SelectPlugin[]
     childrenFirst?: boolean
     groupsClosed?: boolean
 
@@ -46,11 +74,17 @@ export interface SelectProps extends AriaAttributes {
 
     open?: boolean
     onOpenChange?: (open: boolean) => void
+    /** false: no panel, a tag list: role="group" without the combobox ARIA, never opens, no arrow; chip deletion and clear keep working. Default true. */
+    popup?: boolean
     onFocus?: (e: FocusEvent<HTMLDivElement>) => void
     onBlur?: (e: FocusEvent<HTMLDivElement>) => void
+    /** Runs before the Select handles a key; event.preventDefault() makes the Select skip it. */
+    onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void
 
     id?: string
     name?: string
+    /** Id of the owner <form>, like <select form="id">: submits and resets with it even when placed outside. */
+    form?: string
     required?: boolean
 
     hasMore?: boolean
@@ -131,6 +165,12 @@ export interface SelectProps extends AriaAttributes {
 
 export const Select: FC<SelectProps>
 
+/** Plugin: chips for the selected values of a multiple Select. */
+export const chips: SelectPlugin
+
+/** Plugin: loading more options (`hasMore`, `loadMore`, `loadButton`, `loadOffset`, `loadAhead`). */
+export const paging: SelectPlugin
+
 export interface OptionProps {
     value?: any
     id?: any

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-animated-select",
-  "version": "0.7.7",
+  "version": "0.8.1",
   "type": "module",
   "author": {
     "name": "l1nway",
@@ -39,20 +39,20 @@
     "prepublishOnly": "npm run build"
   },
   "main": "./dist/index.cjs",
-  "module": "./dist/index.es.js",
+  "module": "./dist/index.js",
   "types": "./index.d.ts",
   "exports": {
     ".": {
       "import": {
         "types": "./index.d.ts",
-        "default": "./dist/index.es.js"
+        "default": "./dist/index.js"
       },
       "require": {
         "types": "./dist/index.d.cts",
         "default": "./dist/index.cjs"
       }
     },
-    "./style.css": "./dist/index.css",
+    "./style.css": "./dist/style.css",
     "./package.json": "./package.json"
   },
   "sideEffects": [

package/dist/index.css

@@ -1 +0,0 @@
-@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{max-width:calc(100% - .25px);white-space:nowrap}.rac-title,.rac-chip-text,.rac-chip>.rac-option-jsx{min-width:0;overflow-x:clip}.rac-title,.rac-chip-text{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,.rac-chip-del{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}.rac-chip-slot{display:flex;align-items:center;max-width:100%}.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}.rac-chip-del:disabled{cursor:inherit}.rac-select:is([data-deleting],[data-inline-delete]) .rac-chip-del{position:relative}@media(any-pointer:coarse){.rac-clear{position:relative}.rac-arrow{pointer-events:none}.rac-clear:before,.rac-chip-del:before{content:"";position:absolute;inset:min(0px,50% - 12px)}}.rac-spacer{flex-basis:100%;height:0;margin-inline-end:1px}.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-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}.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%}}@keyframes rac-shake{0%{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}to{transform:rotate(0)}}}