react-animated-select 0.7.7 → 0.8.1

package/dist/base.css

@@ -0,0 +1 @@
+@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}}}

package/dist/chip.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),t=require("react"),w=require("./state.cjs"),d=require("./utils.cjs"),M=require("./motion.cjs"),z=require("./trigger.cjs"),F=require("./chipGeometry.cjs"),J=require("./model.cjs"),K=require("./useChipLayout.cjs");;/* empty css           */const L=(l,e)=>{const n=new Set(l.map(s=>s.id)),o=new Map(e.map(([s,f])=>[f.id,s])),c=e.filter(([,s])=>!n.has(s.id)),p=new Set(e.map(([s])=>s));return l.map(s=>{if(o.has(s.id))return[o.get(s.id),s];const f=c.findIndex(([,h])=>J.sameValue(h.original,s.original));if(f>=0)return[c.splice(f,1)[0][0],s];let u=s.id;for(;p.has(u);)u+="~";return p.add(u),[u,s]})},Q=l=>{const[e,n]=t.useState(()=>({chips:l,keyed:L(l,[])}));if(e.chips===l)return e.keyed;const o=L(l,e.keyed);return n({chips:l,keyed:o}),o},Z={position:"absolute",visibility:"hidden",pointerEvents:"none"},A=1,G=2,ee=600,se=10,Y=30,te=t.memo(function({element:e,deleting:n,locked:o,plain:c,last:p,chipStore:s,delGroup:f,settle:u}){const{selectRef:h,deleteInline:P,deleteAlways:g,icons:y,texts:k,valueAsOption:I,renderOption:S}=t.useContext(w.SelectConfigContext),m=!!y.remove,{setVisibility:E,setDeleting:T,removeOption:b}=t.useContext(w.SelectActionsContext),a=t.useRef({longPressTimer:null,longPress:!1,x:0,y:0}),v=t.useSyncExternalStore(s.subscribe,()=>{const{hoverId:r,swipedId:C}=s.get();return(r===e.id?A:0)|(C===e.id?G:0)},()=>0),N=!!(v&A),x=!!(v&G),O=t.useCallback(r=>{const{clientX:C,clientY:R}=r.touches[0];Object.assign(a.current,{x:C,y:R,longPress:!1}),clearTimeout(a.current.longPressTimer),m&&(a.current.longPressTimer=setTimeout(()=>{T(!0),a.current.longPress=!0,h.current?.focus(),E(!1),window.navigator.vibrate?.(50)},ee))},[m,T,E,h]),B=t.useCallback(r=>{const{clientX:C,clientY:R}=r.touches[0],D=a.current.x-C;Math.hypot(D,a.current.y-R)>se&&clearTimeout(a.current.longPressTimer),D>Y&&!x?s.set({hoverId:null,swipedId:e.id}):D<-Y&&x&&s.set({swipedId:null})},[e.id,x,s]),V=t.useCallback(r=>{clearTimeout(a.current.longPressTimer),a.current.longPress&&r.cancelable&&r.preventDefault(),a.current.longPress=!1},[]),H=t.useCallback(()=>s.set({hoverId:e.id,swipedId:null}),[e.id,s]),U=t.useCallback(()=>{s.get().hoverId===e.id&&s.set({hoverId:null})},[e.id,s]);t.useEffect(()=>()=>clearTimeout(a.current.longPressTimer),[]);const j=I&&!c?d.optionContent(e,S,!0):null,W=j?i.jsx("div",{className:"rac-option-jsx",children:j}):i.jsx("span",{className:c?"rac-pick":"rac-chip-text","data-last":d.flag(p),children:e.name||k.emptyOption}),q=t.useCallback(r=>{s.set({swipedId:null}),d.refocus(r,h),b(e.id),d.stopEvent(r)},[e.id,b,s,h]),X=t.useCallback(r=>{d.stopEvent(r),n&&q(r)},[n,q]),$=m&&!c&&(g||!o&&(N||x||n));return i.jsxs("div",{className:c?void 0:d.withClass("rac-chip",j&&e.className),style:j?e.style:void 0,"data-plain":d.flag(c),...!o&&{onTouchStart:O,onTouchMove:B,onTouchEnd:V,onTouchCancel:V,onMouseEnter:H,onMouseLeave:U,onClick:X},children:[W,i.jsx(M.Collapse,{"aria-label":`${k.remove} ${e.name??""}`.trim(),group:P&&!g&&!n?f:void 0,onEntered:u,onExited:u,onMouseDown:d.stopEvent,onClick:q,className:"rac-chip-del",disabled:o,tabIndex:-1,type:"button",in:$,as:"button",axis:"x",children:d.renderIcon(y.remove)})]})}),ne=t.memo(function({element:e,chipStore:n,settle:o,...c}){const p=t.useSyncExternalStore(n.subscribe,()=>n.get().breaks.includes(e.id),()=>!1);return i.jsxs(t.Fragment,{children:[i.jsx(M.Collapse,{className:"rac-chip-slot",onEntered:o,onExited:o,unmountOnExit:!1,"data-id":e.id,axis:"x",fade:!0,children:i.jsx(te,{element:e,chipStore:n,settle:o,...c})}),p&&i.jsx("div",{className:"rac-spacer"})]})});class oe extends t.Component{getSnapshotBeforeUpdate(e){const n=e.look!==this.props.look;return(n||e.chips!==this.props.chips||e.dress!==this.props.dress)&&this.props.take(n),null}componentDidUpdate(){}render(){return null}}const _=t.memo(function(e){const{selectedText:n,icons:o}=t.useContext(w.SelectConfigContext),{selectedIDs:c,deleting:p,active:s}=t.useContext(w.SelectStateContext),f=c.length>0&&!n,u=f?c:F.NONE,{chipStore:h,delGroup:P,valueRef:g,delIconRef:y,probe:k,settle:I,held:S,snapshot:m,look:E,dress:T,plain:b,wait:a}=K.default(u,e),v=Q(u);return i.jsxs("div",{className:"rac-value",ref:g,children:[i.jsx(oe,{chips:u,look:E,dress:T,take:m}),i.jsx(z.Title,{hidden:f,settle:I}),i.jsx(M.Presence,{hold:S,wait:a,children:v.map(([N,x],O)=>i.jsx(ne,{element:x,deleting:p,locked:!s,plain:b,last:b&&O===v.length-1,chipStore:h,delGroup:P,settle:I},N))}),k&&i.jsx("button",{type:"button",className:"rac-chip-del",tabIndex:-1,"aria-hidden":"true",ref:y,style:Z,children:d.renderIcon(o.remove)})]})}),re={Value:_};exports.ChipsValue=_;exports.chips=re;

package/dist/chip.css

@@ -0,0 +1 @@
+@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/chip.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsxs as V, jsx as l } from "react/jsx-runtime";
+import { memo as A, useContext as w, useState as Z, Component as ee, useSyncExternalStore as U, Fragment as se, useRef as te, useCallback as p, useEffect as ne } from "react";
+import { SelectConfigContext as W, SelectStateContext as oe, SelectActionsContext as re } from "./state.js";
+import { renderIcon as X, optionContent as ie, flag as Y, refocus as ce, stopEvent as L, withClass as ae } from "./utils.js";
+import { Presence as le, Collapse as $ } from "./motion.js";
+import { Title as de } from "./trigger.js";
+import { NONE as ue } from "./chipGeometry.js";
+import { sameValue as fe } from "./model.js";
+import pe from "./useChipLayout.js";
+import './chip.css';/* empty css         */
+const _ = (c, e) => {
+  const t = new Set(c.map((s) => s.id)), n = new Map(e.map(([s, d]) => [d.id, s])), r = e.filter(([, s]) => !t.has(s.id)), u = new Set(e.map(([s]) => s));
+  return c.map((s) => {
+    if (n.has(s.id)) return [n.get(s.id), s];
+    const d = r.findIndex(([, f]) => fe(f.original, s.original));
+    if (d >= 0) return [r.splice(d, 1)[0][0], s];
+    let a = s.id;
+    for (; u.has(a); ) a += "~";
+    return u.add(a), [a, s];
+  });
+}, me = (c) => {
+  const [e, t] = Z(() => ({ chips: c, keyed: _(c, []) }));
+  if (e.chips === c) return e.keyed;
+  const n = _(c, e.keyed);
+  return t({ chips: c, keyed: n }), n;
+}, he = { position: "absolute", visibility: "hidden", pointerEvents: "none" }, B = 1, G = 2, ve = 600, ge = 10, H = 30, xe = /* @__PURE__ */ A(function({ element: e, deleting: t, locked: n, plain: r, last: u, chipStore: s, delGroup: d, settle: a }) {
+  const { selectRef: f, deleteInline: P, deleteAlways: b, icons: y, texts: I, valueAsOption: C, renderOption: N } = w(W), h = !!y.remove, { setVisibility: E, setDeleting: T, removeOption: v } = w(re), i = te({ longPressTimer: null, longPress: !1, x: 0, y: 0 }), g = U(s.subscribe, () => {
+    const { hoverId: o, swipedId: x } = s.get();
+    return (o === e.id ? B : 0) | (x === e.id ? G : 0);
+  }, () => 0), O = !!(g & B), m = !!(g & G), D = p((o) => {
+    const { clientX: x, clientY: S } = o.touches[0];
+    Object.assign(i.current, { x, y: S, longPress: !1 }), clearTimeout(i.current.longPressTimer), h && (i.current.longPressTimer = setTimeout(() => {
+      T(!0), i.current.longPress = !0, f.current?.focus(), E(!1), window.navigator.vibrate?.(50);
+    }, ve));
+  }, [h, T, E, f]), z = p((o) => {
+    const { clientX: x, clientY: S } = o.touches[0], M = i.current.x - x;
+    Math.hypot(M, i.current.y - S) > ge && clearTimeout(i.current.longPressTimer), M > H && !m ? s.set({ hoverId: null, swipedId: e.id }) : M < -H && m && s.set({ swipedId: null });
+  }, [e.id, m, s]), j = p((o) => {
+    clearTimeout(i.current.longPressTimer), i.current.longPress && o.cancelable && o.preventDefault(), i.current.longPress = !1;
+  }, []), F = p(() => s.set({ hoverId: e.id, swipedId: null }), [e.id, s]), J = p(() => {
+    s.get().hoverId === e.id && s.set({ hoverId: null });
+  }, [e.id, s]);
+  ne(() => () => clearTimeout(i.current.longPressTimer), []);
+  const k = C && !r ? ie(e, N, !0) : null, K = k ? /* @__PURE__ */ l("div", { className: "rac-option-jsx", children: k }) : /* @__PURE__ */ l("span", { className: r ? "rac-pick" : "rac-chip-text", "data-last": Y(u), children: e.name || I.emptyOption }), R = p((o) => {
+    s.set({ swipedId: null }), ce(o, f), v(e.id), L(o);
+  }, [e.id, v, s, f]), q = p((o) => {
+    L(o), t && R(o);
+  }, [t, R]), Q = h && !r && (b || !n && (O || m || t));
+  return /* @__PURE__ */ V(
+    "div",
+    {
+      className: r ? void 0 : ae("rac-chip", k && e.className),
+      style: k ? e.style : void 0,
+      "data-plain": Y(r),
+      ...!n && { onTouchStart: D, onTouchMove: z, onTouchEnd: j, onTouchCancel: j, onMouseEnter: F, onMouseLeave: J, onClick: q },
+      children: [
+        K,
+        /* @__PURE__ */ l(
+          $,
+          {
+            "aria-label": `${I.remove} ${e.name ?? ""}`.trim(),
+            group: P && !b && !t ? d : void 0,
+            onEntered: a,
+            onExited: a,
+            onMouseDown: L,
+            onClick: R,
+            className: "rac-chip-del",
+            disabled: n,
+            tabIndex: -1,
+            type: "button",
+            in: Q,
+            as: "button",
+            axis: "x",
+            children: X(y.remove)
+          }
+        )
+      ]
+    }
+  );
+}), be = /* @__PURE__ */ A(function({ element: e, chipStore: t, settle: n, ...r }) {
+  const u = U(t.subscribe, () => t.get().breaks.includes(e.id), () => !1);
+  return /* @__PURE__ */ V(se, { children: [
+    /* @__PURE__ */ l($, { className: "rac-chip-slot", onEntered: n, onExited: n, unmountOnExit: !1, "data-id": e.id, axis: "x", fade: !0, children: /* @__PURE__ */ l(xe, { element: e, chipStore: t, settle: n, ...r }) }),
+    u && /* @__PURE__ */ l("div", { className: "rac-spacer" })
+  ] });
+});
+class ye extends ee {
+  getSnapshotBeforeUpdate(e) {
+    const t = e.look !== this.props.look;
+    return (t || e.chips !== this.props.chips || e.dress !== this.props.dress) && this.props.take(t), null;
+  }
+  componentDidUpdate() {
+  }
+  render() {
+    return null;
+  }
+}
+const Ie = /* @__PURE__ */ A(function(e) {
+  const { selectedText: t, icons: n } = w(W), { selectedIDs: r, deleting: u, active: s } = w(oe), d = r.length > 0 && !t, a = d ? r : ue, { chipStore: f, delGroup: P, valueRef: b, delIconRef: y, probe: I, settle: C, held: N, snapshot: h, look: E, dress: T, plain: v, wait: i } = pe(a, e), g = me(a);
+  return /* @__PURE__ */ V("div", { className: "rac-value", ref: b, children: [
+    /* @__PURE__ */ l(ye, { chips: a, look: E, dress: T, take: h }),
+    /* @__PURE__ */ l(de, { hidden: d, settle: C }),
+    /* @__PURE__ */ l(le, { hold: N, wait: i, children: g.map(
+      ([O, m], D) => /* @__PURE__ */ l(be, { element: m, deleting: u, locked: !s, plain: v, last: v && D === g.length - 1, chipStore: f, delGroup: P, settle: C }, O)
+    ) }),
+    I && /* @__PURE__ */ l("button", { type: "button", className: "rac-chip-del", tabIndex: -1, "aria-hidden": "true", ref: y, style: he, children: X(n.remove) })
+  ] });
+}), Se = { Value: Ie };
+export {
+  Ie as ChipsValue,
+  Se as chips
+};

package/dist/chipGeometry.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h="rac-chip-slot",g="rac-chip-del",u=[],m=e=>Array.from(e.children).filter(n=>n.classList.contains(h)),N=(e,n)=>e.length===n.length&&e.every((t,o)=>t===n[o]),y=(e,n=t=>t.getBoundingClientRect())=>{const t=[];let o=-1/0;for(const i of e){const c=n(i);c.top>=o-1&&(t.push([]),o=c.bottom),t.at(-1).push(i),o=Math.max(o,c.bottom)}return t},b=(e,n,t,o,i,c)=>{const r=e.cloneNode(!0),{height:E,paddingInlineEnd:O}=getComputedStyle(e),S=i?"":`height: ${E}; min-height: 0;`;r.style.cssText=`visibility: hidden; pointer-events: none; ${S} padding-inline-end: calc(${O} + ${t}px)`,r.querySelectorAll(`:scope > :not(.${h})`).forEach(s=>s.remove()),o&&m(r).forEach(s=>o.has(s.dataset.id)||s.remove()),t&&r.querySelectorAll(`.${g}`).forEach(s=>s.remove()),c&&r.querySelectorAll(`.${g}`).forEach(s=>{s.style.position="relative"});const f=m(r);f.forEach(s=>i?.has(s.dataset.id)&&(s.style.minWidth=`${i.get(s.dataset.id)}px`));const d=new Map(f.map((s,a)=>[s.dataset.id,a]));n?.slice(1).forEach((s,a)=>{const k=Math.min(...s.map(l=>d.get(l)??1/0)),p=Math.max(...n[a].map(l=>d.get(l)??-1).filter(l=>l<k));p>=0&&f[p].after(Object.assign(document.createElement("div"),{className:"rac-spacer"}))}),e.style.position="absolute",e.after(r),r.getAnimations?.({subtree:!0}).forEach(s=>s.effect?.getComputedTiming().endTime<1/0&&s.finish());const $=y(f).map(s=>s.map(a=>a.dataset.id)),x=r.offsetHeight;return r.remove(),e.style.position="",{rows:$,fit:x}},w=(e,n)=>{const t=n?n.slice(0,-1).map(i=>i.at(-1)):u,{breaks:o}=e.get();return N(o,t)?o:t},v=(e,n,t,o)=>w(e,o&&t.length?b(n,null,o,new Set(t.map(i=>i.id))).rows:null),A=(e,n,t)=>{const{rows:o,fit:i}=b(n,t.rows,t.wide?0:t.reserve,null,t.floor,t.wide);Object.assign(t,{rows:o,fit:t.floor?i:null}),e.set({held:!0,breaks:w(e,o)})},M=e=>e?.size?y([...e.keys()],n=>e.get(n).line).map(n=>n.map(t=>t.dataset.id)):null;exports.NONE=u;exports.freeze=A;exports.restBreaks=v;exports.slotsOf=m;exports.snapRows=M;

package/dist/chipGeometry.js

@@ -0,0 +1,37 @@
+"use client";
+const g = "rac-chip-slot", p = "rac-chip-del", k = [], h = (e) => Array.from(e.children).filter((n) => n.classList.contains(g)), A = (e, n) => e.length === n.length && e.every((t, o) => t === n[o]), u = (e, n = (t) => t.getBoundingClientRect()) => {
+  const t = [];
+  let o = -1 / 0;
+  for (const i of e) {
+    const a = n(i);
+    a.top >= o - 1 && (t.push([]), o = a.bottom), t.at(-1).push(i), o = Math.max(o, a.bottom);
+  }
+  return t;
+}, y = (e, n, t, o, i, a) => {
+  const c = e.cloneNode(!0), { height: E, paddingInlineEnd: b } = getComputedStyle(e), x = i ? "" : `height: ${E}; min-height: 0;`;
+  c.style.cssText = `visibility: hidden; pointer-events: none; ${x} padding-inline-end: calc(${b} + ${t}px)`, c.querySelectorAll(`:scope > :not(.${g})`).forEach((s) => s.remove()), o && h(c).forEach((s) => o.has(s.dataset.id) || s.remove()), t && c.querySelectorAll(`.${p}`).forEach((s) => s.remove()), a && c.querySelectorAll(`.${p}`).forEach((s) => {
+    s.style.position = "relative";
+  });
+  const f = h(c);
+  f.forEach((s) => i?.has(s.dataset.id) && (s.style.minWidth = `${i.get(s.dataset.id)}px`));
+  const m = new Map(f.map((s, r) => [s.dataset.id, r]));
+  n?.slice(1).forEach((s, r) => {
+    const S = Math.min(...s.map((l) => m.get(l) ?? 1 / 0)), d = Math.max(...n[r].map((l) => m.get(l) ?? -1).filter((l) => l < S));
+    d >= 0 && f[d].after(Object.assign(document.createElement("div"), { className: "rac-spacer" }));
+  }), e.style.position = "absolute", e.after(c), c.getAnimations?.({ subtree: !0 }).forEach((s) => s.effect?.getComputedTiming().endTime < 1 / 0 && s.finish());
+  const $ = u(f).map((s) => s.map((r) => r.dataset.id)), O = c.offsetHeight;
+  return c.remove(), e.style.position = "", { rows: $, fit: O };
+}, w = (e, n) => {
+  const t = n ? n.slice(0, -1).map((i) => i.at(-1)) : k, { breaks: o } = e.get();
+  return A(o, t) ? o : t;
+}, v = (e, n, t, o) => w(e, o && t.length ? y(n, null, o, new Set(t.map((i) => i.id))).rows : null), I = (e, n, t) => {
+  const { rows: o, fit: i } = y(n, t.rows, t.wide ? 0 : t.reserve, null, t.floor, t.wide);
+  Object.assign(t, { rows: o, fit: t.floor ? i : null }), e.set({ held: !0, breaks: w(e, o) });
+}, L = (e) => e?.size ? u([...e.keys()], (n) => e.get(n).line).map((n) => n.map((t) => t.dataset.id)) : null;
+export {
+  k as NONE,
+  I as freeze,
+  v as restBreaks,
+  h as slotsOf,
+  L as snapRows
+};

package/dist/chipMotion.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("./chipGeometry.cjs"),y="rac-flip",u="rac-resize",z="rac-dress",q="rac-chip-slot",W="rac-chip-del",C={overflow:"hidden",textOverflow:"clip",boxSizing:"border-box",minWidth:"0px",maxWidth:"none",minHeight:"0px",maxHeight:"none"},L={boxSizing:"border-box",minHeight:"0px",maxHeight:"none"},x=t=>t.firstElementChild,B=t=>x(t)?.firstElementChild,I=(t,o)=>!!t?.getAnimations?.().some(e=>e.constructor===Animation&&o(e)),E=(t,o)=>I(t,e=>e.playState==="running"&&o(e)),$=t=>F.slotsOf(t).some(o=>[x(o),B(o)].some(e=>E(e,s=>s.id===u))),k=(t,o)=>Array.from(t.children).some(e=>E(e,s=>s.id!==y))||$(t)||!!o&&Array.from(t.querySelectorAll(`.${W}`)).some(e=>E(e,()=>!0)),G=(t,o)=>new Map(F.slotsOf(t).map(e=>{const{left:s,top:i,width:n}=e.getBoundingClientRect(),r=o&&B(e);return[e,{left:s,top:i,width:n,line:{top:e.offsetTop,bottom:e.offsetTop+e.offsetHeight},label:r?R(r):null,dress:r?j(x(e),r):null}]})),K=(t,o,e,s)=>{if(!t.animate)return;t.getAnimations().forEach(d=>d.id===y&&d.cancel());const i=t.getBoundingClientRect(),n=o.left-i.left,r=o.top-i.top;(Math.abs(n)>.5||Math.abs(r)>.5)&&t.animate([{transform:`translate(${n}px, ${r}px)`},{transform:"none"}],{id:y,duration:e,easing:s})},R=t=>{const o=getComputedStyle(t),{marginLeft:e,marginRight:s}=o,i=o.boxSizing==="border-box",n=(...d)=>`${d.reduce((c,h)=>c+parseFloat(o[h]),0)}px`;return{width:i?o.width:n("width","paddingLeft","paddingRight","borderLeftWidth","borderRightWidth"),height:i?o.height:n("height","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth"),marginLeft:e,marginRight:s}},M=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","backgroundColor","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],j=(t,o)=>{const e=getComputedStyle(t),{content:s,opacity:i}=getComputedStyle(o,"::after");return{box:Object.fromEntries(M.map(n=>[n,e[n]])),height:R(t).height,sep:/^["']/.test(s)?{content:s,opacity:+i}:null}},S=(t,o)=>t!==o&&!(Math.abs(parseFloat(t)-parseFloat(o))<=.5),D=t=>{delete t.dataset.sep,t.style.removeProperty("--rac-sep")},N=t=>{const o=[];return t.forEach(({label:e,dress:s,width:i},n)=>{const r=e&&n.isConnected&&B(n),d=x(n);!r?.animate||I(n,c=>c.id!==y)||(d.getAnimations({subtree:!0}).forEach(c=>c.id===u?c.cancel():c.transitionProperty&&c.finish()),D(r),o.push({id:n.dataset.id,width:i,el:r,from:e,chip:d,was:s}))}),o.map(e=>{const s=R(e.el),i=j(e.chip,e.el),n=Object.keys(s).some(c=>S(e.from[c],s[c])),r=M.some(c=>S(e.was.box[c],i.box[c])),d=!e.was.sep!=!i.sep||Math.abs((e.was.sep?.opacity??0)-(i.sep?.opacity??0))>.01;return{...e,to:s,now:i,sized:n,dressed:r,fade:d}}).filter(e=>e.sized||e.dressed||e.fade)},Z=(t,o,e,s)=>{const i=()=>{t.forEach(n=>n.kept?.splice(0).forEach(r=>{r.cancel(),D(n.el)})),s()};t.forEach(n=>{const{el:r,from:d,to:c,chip:h,was:a,now:p,sized:m,dressed:g,fade:b}=n,f=b&&!p.sep,O=(P,v,w)=>{const T=P.animate(v,{id:u,duration:o,easing:e,pseudoElement:w,fill:f?"forwards":"none"});T.onfinish=i,f&&(n.kept??=[]).push(T)};m&&O(r,[{...C,...d},{...C,...c}]),g&&O(h,[{...L,...a.box,height:a.height},{...L,...p.box,height:p.height}]),b&&(f&&(r.dataset.sep="",r.style.setProperty("--rac-sep",a.sep.content)),O(r,[{opacity:a.sep?.opacity??0},{opacity:p.sep?.opacity??0}],"::after"))})},H=(t,{paddingTop:o,paddingBottom:e}=getComputedStyle(t))=>({paddingTop:o,paddingBottom:e}),J=(t,o,e,s)=>{t.getAnimations().forEach(n=>n.id===u&&n.cancel());const i=H(t);o&&(S(o.paddingTop,i.paddingTop)||S(o.paddingBottom,i.paddingBottom))&&t.animate([o,i],{id:u,duration:e,easing:s})},Q=["marginInlineStart","marginInlineEnd","marginBlockStart","marginBlockEnd","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth"],l=t=>`${t}px`,A=t=>{const o=t.parentElement.getBoundingClientRect(),e=t.getBoundingClientRect(),s=getComputedStyle(t),[i,n,r,d,...c]=Q.map(a=>parseFloat(s[a])||0),h=s.direction==="rtl"?o.right-e.right:e.left-o.left;return{ms:i,me:n,mbs:r,mbe:d,inner:s.boxSizing==="border-box"?0:c.reduce((a,p)=>a+p,0),start:h,top:e.top-o.top,width:e.width,height:e.height}},U=(t,o)=>{const e=(n,r,d,c,h)=>({position:"relative",marginInlineStart:l(n),marginInlineEnd:l(r),marginBlockStart:l(d),marginBlockEnd:l(c),height:l(h-t.inner)}),s=t.ms+o.start-t.start,i=t.mbs+o.top-t.top;return[e(t.ms,t.me,t.mbs,t.mbe,t.height),e(s,-t.width-s,i,t.height+t.mbs+t.mbe-o.height-i,o.height)]},V=t=>{const[o,e]=t.frames,s=t.effect.getComputedTiming().progress??0;return Object.fromEntries(Object.keys(e).map(i=>[i,i==="position"?e[i]:l(parseFloat(o[i])+(parseFloat(e[i])-parseFloat(o[i]))*s)]))},X=(t,o,e,s,i)=>{const n=Array.from(t.querySelectorAll(`.${q} .${W}`)).filter(a=>a.animate).map(a=>{const p=a.getAnimations().find(g=>g.id===z),m=p?.frames?V(p):null;return p?.cancel(),{el:a,now:m,busy:E(a,()=>!0)}}),r=n.filter(a=>!a.busy),d=r.map(({el:a})=>A(a));r.forEach(({el:a})=>{a.style.position=o?"absolute":"relative"});const c=r.map(({el:a})=>A(a));r.forEach(({el:a})=>{a.style.position=""});const h=(a,p)=>{const m=a.animate(p,{id:z,duration:e,easing:s,fill:"backwards"});return m.onfinish=i,m};n.forEach(({el:a,busy:p})=>p&&!o&&h(a,[{position:"relative"},{position:"relative"}])),r.forEach(({el:a,now:p},m)=>{const[g,b]=U(o?d[m]:c[m],o?c[m]:d[m]),f=[p??(o?b:g),o?g:b];h(a,f).frames=f})};exports.flip=K;exports.isBusy=k;exports.isResizing=$;exports.padOf=H;exports.repad=J;exports.resize=Z;exports.resizesOf=N;exports.shift=X;exports.snapOf=G;

package/dist/chipMotion.js

@@ -0,0 +1,85 @@
+"use client";
+import { slotsOf as F } from "./chipGeometry.js";
+const y = "rac-flip", u = "rac-resize", C = "rac-dress", P = "rac-chip-slot", W = "rac-chip-del", L = { overflow: "hidden", textOverflow: "clip", boxSizing: "border-box", minWidth: "0px", maxWidth: "none", minHeight: "0px", maxHeight: "none" }, z = { boxSizing: "border-box", minHeight: "0px", maxHeight: "none" }, S = (t) => t.firstElementChild, R = (t) => S(t)?.firstElementChild, I = (t, o) => !!t?.getAnimations?.().some((e) => e.constructor === Animation && o(e)), E = (t, o) => I(t, (e) => e.playState === "running" && o(e)), v = (t) => F(t).some((o) => [S(o), R(o)].some((e) => E(e, (s) => s.id === u))), Z = (t, o) => Array.from(t.children).some((e) => E(e, (s) => s.id !== y)) || v(t) || !!o && Array.from(t.querySelectorAll(`.${W}`)).some((e) => E(e, () => !0)), J = (t, o) => new Map(F(t).map((e) => {
+  const { left: s, top: i, width: n } = e.getBoundingClientRect(), r = o && R(e);
+  return [e, { left: s, top: i, width: n, line: { top: e.offsetTop, bottom: e.offsetTop + e.offsetHeight }, label: r ? O(r) : null, dress: r ? D(S(e), r) : null }];
+})), Q = (t, o, e, s) => {
+  if (!t.animate) return;
+  t.getAnimations().forEach((d) => d.id === y && d.cancel());
+  const i = t.getBoundingClientRect(), n = o.left - i.left, r = o.top - i.top;
+  (Math.abs(n) > 0.5 || Math.abs(r) > 0.5) && t.animate([{ transform: `translate(${n}px, ${r}px)` }, { transform: "none" }], { id: y, duration: e, easing: s });
+}, O = (t) => {
+  const o = getComputedStyle(t), { marginLeft: e, marginRight: s } = o, i = o.boxSizing === "border-box", n = (...d) => `${d.reduce((c, h) => c + parseFloat(o[h]), 0)}px`;
+  return { width: i ? o.width : n("width", "paddingLeft", "paddingRight", "borderLeftWidth", "borderRightWidth"), height: i ? o.height : n("height", "paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"), marginLeft: e, marginRight: s };
+}, $ = ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "marginLeft", "marginRight", "marginTop", "marginBottom", "backgroundColor", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"], D = (t, o) => {
+  const e = getComputedStyle(t), { content: s, opacity: i } = getComputedStyle(o, "::after");
+  return { box: Object.fromEntries($.map((n) => [n, e[n]])), height: O(t).height, sep: /^["']/.test(s) ? { content: s, opacity: +i } : null };
+}, x = (t, o) => t !== o && !(Math.abs(parseFloat(t) - parseFloat(o)) <= 0.5), H = (t) => {
+  delete t.dataset.sep, t.style.removeProperty("--rac-sep");
+}, U = (t) => {
+  const o = [];
+  return t.forEach(({ label: e, dress: s, width: i }, n) => {
+    const r = e && n.isConnected && R(n), d = S(n);
+    !r?.animate || I(n, (c) => c.id !== y) || (d.getAnimations({ subtree: !0 }).forEach((c) => c.id === u ? c.cancel() : c.transitionProperty && c.finish()), H(r), o.push({ id: n.dataset.id, width: i, el: r, from: e, chip: d, was: s }));
+  }), o.map((e) => {
+    const s = O(e.el), i = D(e.chip, e.el), n = Object.keys(s).some((c) => x(e.from[c], s[c])), r = $.some((c) => x(e.was.box[c], i.box[c])), d = !e.was.sep != !i.sep || Math.abs((e.was.sep?.opacity ?? 0) - (i.sep?.opacity ?? 0)) > 0.01;
+    return { ...e, to: s, now: i, sized: n, dressed: r, fade: d };
+  }).filter((e) => e.sized || e.dressed || e.fade);
+}, V = (t, o, e, s) => {
+  const i = () => {
+    t.forEach((n) => n.kept?.splice(0).forEach((r) => {
+      r.cancel(), H(n.el);
+    })), s();
+  };
+  t.forEach((n) => {
+    const { el: r, from: d, to: c, chip: h, was: a, now: p, sized: m, dressed: g, fade: b } = n, f = b && !p.sep, B = (M, j, w) => {
+      const T = M.animate(j, { id: u, duration: o, easing: e, pseudoElement: w, fill: f ? "forwards" : "none" });
+      T.onfinish = i, f && (n.kept ??= []).push(T);
+    };
+    m && B(r, [{ ...L, ...d }, { ...L, ...c }]), g && B(h, [{ ...z, ...a.box, height: a.height }, { ...z, ...p.box, height: p.height }]), b && (f && (r.dataset.sep = "", r.style.setProperty("--rac-sep", a.sep.content)), B(r, [{ opacity: a.sep?.opacity ?? 0 }, { opacity: p.sep?.opacity ?? 0 }], "::after"));
+  });
+}, k = (t, { paddingTop: o, paddingBottom: e } = getComputedStyle(t)) => ({ paddingTop: o, paddingBottom: e }), X = (t, o, e, s) => {
+  t.getAnimations().forEach((n) => n.id === u && n.cancel());
+  const i = k(t);
+  o && (x(o.paddingTop, i.paddingTop) || x(o.paddingBottom, i.paddingBottom)) && t.animate([o, i], { id: u, duration: e, easing: s });
+}, q = ["marginInlineStart", "marginInlineEnd", "marginBlockStart", "marginBlockEnd", "paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"], l = (t) => `${t}px`, A = (t) => {
+  const o = t.parentElement.getBoundingClientRect(), e = t.getBoundingClientRect(), s = getComputedStyle(t), [i, n, r, d, ...c] = q.map((a) => parseFloat(s[a]) || 0), h = s.direction === "rtl" ? o.right - e.right : e.left - o.left;
+  return { ms: i, me: n, mbs: r, mbe: d, inner: s.boxSizing === "border-box" ? 0 : c.reduce((a, p) => a + p, 0), start: h, top: e.top - o.top, width: e.width, height: e.height };
+}, G = (t, o) => {
+  const e = (n, r, d, c, h) => ({ position: "relative", marginInlineStart: l(n), marginInlineEnd: l(r), marginBlockStart: l(d), marginBlockEnd: l(c), height: l(h - t.inner) }), s = t.ms + o.start - t.start, i = t.mbs + o.top - t.top;
+  return [e(t.ms, t.me, t.mbs, t.mbe, t.height), e(s, -t.width - s, i, t.height + t.mbs + t.mbe - o.height - i, o.height)];
+}, K = (t) => {
+  const [o, e] = t.frames, s = t.effect.getComputedTiming().progress ?? 0;
+  return Object.fromEntries(Object.keys(e).map((i) => [i, i === "position" ? e[i] : l(parseFloat(o[i]) + (parseFloat(e[i]) - parseFloat(o[i])) * s)]));
+}, Y = (t, o, e, s, i) => {
+  const n = Array.from(t.querySelectorAll(`.${P} .${W}`)).filter((a) => a.animate).map((a) => {
+    const p = a.getAnimations().find((g) => g.id === C), m = p?.frames ? K(p) : null;
+    return p?.cancel(), { el: a, now: m, busy: E(a, () => !0) };
+  }), r = n.filter((a) => !a.busy), d = r.map(({ el: a }) => A(a));
+  r.forEach(({ el: a }) => {
+    a.style.position = o ? "absolute" : "relative";
+  });
+  const c = r.map(({ el: a }) => A(a));
+  r.forEach(({ el: a }) => {
+    a.style.position = "";
+  });
+  const h = (a, p) => {
+    const m = a.animate(p, { id: C, duration: e, easing: s, fill: "backwards" });
+    return m.onfinish = i, m;
+  };
+  n.forEach(({ el: a, busy: p }) => p && !o && h(a, [{ position: "relative" }, { position: "relative" }])), r.forEach(({ el: a, now: p }, m) => {
+    const [g, b] = G(o ? d[m] : c[m], o ? c[m] : d[m]), f = [p ?? (o ? b : g), o ? g : b];
+    h(a, f).frames = f;
+  });
+};
+export {
+  Q as flip,
+  Z as isBusy,
+  v as isResizing,
+  k as padOf,
+  X as repad,
+  V as resize,
+  U as resizesOf,
+  Y as shift,
+  J as snapOf
+};

package/dist/dropdown.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),t=require("react"),a=require("./state.cjs"),d=require("./utils.cjs"),I=require("react-dom"),L=require("./motion.cjs"),T=require("./optionList.cjs"),_=require("./dropdownPosition.cjs"),$=(e={})=>Object.fromEntries(Object.entries(e).filter(([r])=>r.startsWith("--"))),A=e=>(typeof e=="function"?e():e)||document.body,V=()=>()=>{};function g({more:e,ref:r}){const{texts:i}=t.useContext(a.SelectConfigContext),{loading:u,error:o}=t.useContext(a.SelectStateContext);return!o&&!u&&!e?null:n.jsxs("div",{ref:r,className:"rac-option","data-error":d.flag(o),"data-loading":d.flag(!o),children:[n.jsx("span",{className:"rac-option-text",children:o?i.error:u?i.loading:i.loadingMore}),!o&&d.dots]})}const W=t.memo(function(){const{selectRef:r,selectId:i,multiple:u,offset:o,duration:x,easing:j,animateOpacity:y,keepMounted:w,optionsClassName:R,style:q,container:v,texts:h,popup:E,ext:m}=t.useContext(a.SelectConfigContext),{visibility:O,normalizedOptions:D}=t.useContext(a.SelectStateContext),{setListReady:F}=t.useContext(a.SelectActionsContext),s=O&&D.length>0,C=t.useSyncExternalStore(V,()=>!0,()=>!1),[S,b]=t.useState(!1);s&&C&&!S&&b(!0);const[l,c]=t.useState(null),M=t.useCallback(()=>c(p=>p||"out"),[]),f=t.useRef(null),[N,P]=_.default({selectRef:r,panelRef:f,open:S,frozen:!s||l==="out",offset:o,onFlip:M}),k=()=>{if(l==="out"&&s){P(f.current),c("in");return}c(null),b(!1)},z=()=>{c(null),F(!0)};return!C||!E?null:I.createPortal(n.jsx(L.Collapse,{axis:"y",fade:y,in:s&&l!=="out",duration:l?x/2:void 0,nodeRef:f,unmountOnExit:!w&&!(l&&s),onEntered:z,onExited:k,onMouseDown:p=>p.preventDefault(),className:d.withClass("rac-options",R),style:{...$(q),"--rac-duration":`${x}ms`,"--rac-ease":j,pointerEvents:s?"auto":"none",position:"absolute"},children:n.jsxs("div",{className:"rac-list","aria-multiselectable":u,id:`${i}-listbox`,"aria-label":h.list,role:"listbox",tabIndex:"-1",ref:N,children:[n.jsx(T.default,{}),m.Footer?n.jsx(m.Footer,{}):n.jsx(g,{})]})}),A(v))});exports.StatusRow=g;exports.default=W;

package/dist/dropdown.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as i, jsxs as C } from "react/jsx-runtime";
+import { memo as A, useContext as l, useSyncExternalStore as T, useState as g, useCallback as V, useRef as W } from "react";
+import { SelectConfigContext as S, SelectStateContext as w, SelectActionsContext as q } from "./state.js";
+import { withClass as B, dots as G, flag as y } from "./utils.js";
+import { createPortal as H } from "react-dom";
+import { Collapse as J } from "./motion.js";
+import K from "./optionList.js";
+import Q from "./dropdownPosition.js";
+const U = (t = {}) => Object.fromEntries(Object.entries(t).filter(([n]) => n.startsWith("--"))), X = (t) => (typeof t == "function" ? t() : t) || document.body, Y = () => () => {
+};
+function Z({ more: t, ref: n }) {
+  const { texts: s } = l(S), { loading: a, error: o } = l(w);
+  return !o && !a && !t ? null : /* @__PURE__ */ C("div", { ref: n, className: "rac-option", "data-error": y(o), "data-loading": y(!o), children: [
+    /* @__PURE__ */ i("span", { className: "rac-option-text", children: o ? s.error : a ? s.loading : s.loadingMore }),
+    !o && G
+  ] });
+}
+const lt = /* @__PURE__ */ A(function() {
+  const { selectRef: n, selectId: s, multiple: a, offset: o, duration: f, easing: h, animateOpacity: R, keepMounted: v, optionsClassName: E, style: O, container: D, texts: F, popup: N, ext: d } = l(S), { visibility: j, normalizedOptions: M } = l(w), { setListReady: k } = l(q), e = j && M.length > 0, m = T(Y, () => !0, () => !1), [x, b] = g(!1);
+  e && m && !x && b(!0);
+  const [r, c] = g(null), z = V(() => c((p) => p || "out"), []), u = W(null), [I, L] = Q({ selectRef: n, panelRef: u, open: x, frozen: !e || r === "out", offset: o, onFlip: z }), P = () => {
+    if (r === "out" && e) {
+      L(u.current), c("in");
+      return;
+    }
+    c(null), b(!1);
+  }, $ = () => {
+    c(null), k(!0);
+  };
+  return !m || !N ? null : H(
+    /* @__PURE__ */ i(
+      J,
+      {
+        axis: "y",
+        fade: R,
+        in: e && r !== "out",
+        duration: r ? f / 2 : void 0,
+        nodeRef: u,
+        unmountOnExit: !v && !(r && e),
+        onEntered: $,
+        onExited: P,
+        onMouseDown: (p) => p.preventDefault(),
+        className: B("rac-options", E),
+        style: { ...U(O), "--rac-duration": `${f}ms`, "--rac-ease": h, pointerEvents: e ? "auto" : "none", position: "absolute" },
+        children: /* @__PURE__ */ C(
+          "div",
+          {
+            className: "rac-list",
+            "aria-multiselectable": a,
+            id: `${s}-listbox`,
+            "aria-label": F.list,
+            role: "listbox",
+            tabIndex: "-1",
+            ref: I,
+            children: [
+              /* @__PURE__ */ i(K, {}),
+              d.Footer ? /* @__PURE__ */ i(d.Footer, {}) : /* @__PURE__ */ i(Z, {})
+            ]
+          }
+        )
+      }
+    ),
+    X(D)
+  );
+});
+export {
+  Z as StatusRow,
+  lt as default
+};

package/dist/dropdownPosition.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react"),L=(t,o,i)=>{Math.abs(i)>.5&&(t.style[o]=`${parseFloat(t.style[o])+i}px`)},Y=(t,o,i,g,n)=>{const l=t.getBoundingClientRect(),a=getComputedStyle(t);L(t,"left",o-l.left+parseFloat(a.marginLeft)),g?L(t,"bottom",l.bottom+parseFloat(a.marginBottom)-i+n):L(t,"top",i+n-l.top+parseFloat(a.marginTop))},_=(t,o)=>{t&&t.dataset.placement!==(o?"top":"bottom")&&(t.dataset.placement=o?"top":"bottom")},P=()=>typeof IntersectionObserver<"u",S=(t,o,i=window.innerHeight-t.bottom)=>i<o&&t.top>i,U=t=>{const o=[],{body:i,documentElement:g}=t.ownerDocument;for(let n=t.parentElement;n&&n!==i&&n!==g;n=n.parentElement)getComputedStyle(n).overflowY!=="visible"&&o.push(n);return o},D=(t,o)=>{let i=-1/0,g=1/0;for(const l of o){const a=l.getBoundingClientRect();i=Math.max(i,a.top+l.clientTop),g=Math.min(g,a.top+l.clientTop+l.clientHeight)}const n=l=>Math.min(Math.max(l,i),g);return{pin:n,ratio:t.height?+((n(t.bottom)-n(t.top))/t.height).toFixed(3):1}},V=({selectRef:t,panelRef:o,open:i,frozen:g,offset:n,onFlip:l})=>{const a=h.useRef(0),O=h.useRef(null),$=h.useRef(g),A=h.useRef(l);h.useLayoutEffect(()=>{$.current=g,A.current=l});const H=h.useCallback(e=>[t.current,o.current].forEach(c=>_(c,e)),[t,o]),v=h.useCallback(e=>{const c=t.current;if(!c||!e)return;e.scrollHeight&&(a.current=e.scrollHeight);const u=c.getBoundingClientRect(),d=e.dataset.placement,s=a.current,{pin:b,ratio:p}=D(u,O.current??=U(c)),w=d==="top"?u.top-n>=s:window.innerHeight-u.bottom-n>=s;let m=d&&($.current||w||p<1)?d==="top":S(u,s);d&&m!==(d==="top")&&(A.current?.(),m=d==="top"),H(m);const f=b(m?u.top:u.bottom);e.style.width=`${u.width}px`,e.style.left=`${u.left+window.scrollX}px`,e.style.top=m?"auto":`${f+window.scrollY+n}px`,e.style.bottom=m?`${window.innerHeight-f-window.scrollY+n}px`:"auto",Y(e,u.left,f,m,n),p<1?e.style.setProperty("--rac-visible",p):e.style.removeProperty("--rac-visible"),e.toggleAttribute("data-offscreen",p===0)},[t,n,H]),T=h.useCallback(e=>{e&&i&&v(e.parentElement)},[v,i]),j=h.useCallback(e=>{e?.removeAttribute("data-placement"),v(e)},[v]);return h.useEffect(()=>{const e=t.current;if(i||!e||!P())return;a.current||=parseFloat(getComputedStyle(e).getPropertyValue("--rac-list-max-height"))||250;const c={fits:!0,lower:!1},u=(s,b,p)=>{const w=new IntersectionObserver(([{boundingClientRect:m,rootBounds:f}])=>{f&&(p(m,f),H(!c.fits&&c.lower))},{rootMargin:s,threshold:b});return w.observe(e),w},d=[u(`0px 0px ${-a.current}px 0px`,[0,1],(s,b)=>{c.fits=s.bottom<=b.bottom}),u("0px 0px -50% 0px",[0,.5,1],(s,b)=>{c.lower=s.top+s.bottom>2*b.bottom})];return()=>d.forEach(s=>s.disconnect())},[i,t,H]),h.useLayoutEffect(()=>{const e=t.current;if(!i||!e)return;const c=e.ownerDocument,u=o.current;let d=0,s=0,b="",p=null;const w=()=>{const r=e.getBoundingClientRect(),E=o.current?.getBoundingClientRect()??r,F=S(r,a.current),M=a.current+n,{pin:C,ratio:x}=D(r,O.current??[]),z=o.current?.dataset.placement==="top";return[r.left-E.left,z?C(r.top)-E.bottom:C(r.bottom)-E.top,x,r.width,window.innerHeight,o.current?.scrollHeight,F,r.top>=M,window.innerHeight-r.bottom>=M].join()},m=()=>{if(p?.disconnect(),!P())return;const r=e.getBoundingClientRect(),{clientWidth:E,clientHeight:F}=c.documentElement,M=[r.top,E-r.right,F-r.bottom,r.left].map(x=>`${-Math.floor(x)}px`).join(" ");let C=!1;p=new IntersectionObserver(([x])=>{C&&x.intersectionRatio<1&&y(),C=x.intersectionRatio===1},{root:c,rootMargin:M,threshold:1}),p.observe(e)},f=()=>w()===b?!1:(v(o.current),b=w(),!0),I=()=>{if(d=0,f())s=0;else if(++s>1)return m();d=requestAnimationFrame(I)},y=()=>{s=0,d||=requestAnimationFrame(I)};v(o.current),b=w(),m(),window.addEventListener("scroll",y,{capture:!0,passive:!0}),window.addEventListener("resize",y);const k=typeof ResizeObserver<"u"&&new ResizeObserver(y);k&&[e,o.current].forEach(r=>r&&k.observe(r));const q=({target:r})=>!e.contains(r)&&!o.current?.contains(r),B=typeof MutationObserver<"u"&&new MutationObserver(r=>{r.some(q)&&f()&&y()});return B&&B.observe(c.body,{subtree:!0,childList:!0,attributes:!0,characterData:!0}),()=>{cancelAnimationFrame(d),window.removeEventListener("scroll",y,{capture:!0}),window.removeEventListener("resize",y);for(const r of[k,B,p])r&&r.disconnect();u?.removeAttribute("data-placement"),O.current=null}},[i,v,n,t,o]),[T,j]};exports.default=V;

package/dist/dropdownPosition.js

@@ -0,0 +1,97 @@
+"use client";
+import { useRef as M, useLayoutEffect as P, useCallback as O, useEffect as V } from "react";
+const k = (t, o, i) => {
+  Math.abs(i) > 0.5 && (t.style[o] = `${parseFloat(t.style[o]) + i}px`);
+}, W = (t, o, i, h, n) => {
+  const l = t.getBoundingClientRect(), a = getComputedStyle(t);
+  k(t, "left", o - l.left + parseFloat(a.marginLeft)), h ? k(t, "bottom", l.bottom + parseFloat(a.marginBottom) - i + n) : k(t, "top", i + n - l.top + parseFloat(a.marginTop));
+}, X = (t, o) => {
+  t && t.dataset.placement !== (o ? "top" : "bottom") && (t.dataset.placement = o ? "top" : "bottom");
+}, z = () => typeof IntersectionObserver < "u", S = (t, o, i = window.innerHeight - t.bottom) => i < o && t.top > i, G = (t) => {
+  const o = [], { body: i, documentElement: h } = t.ownerDocument;
+  for (let n = t.parentElement; n && n !== i && n !== h; n = n.parentElement)
+    getComputedStyle(n).overflowY !== "visible" && o.push(n);
+  return o;
+}, T = (t, o) => {
+  let i = -1 / 0, h = 1 / 0;
+  for (const l of o) {
+    const a = l.getBoundingClientRect();
+    i = Math.max(i, a.top + l.clientTop), h = Math.min(h, a.top + l.clientTop + l.clientHeight);
+  }
+  const n = (l) => Math.min(Math.max(l, i), h);
+  return { pin: n, ratio: t.height ? +((n(t.bottom) - n(t.top)) / t.height).toFixed(3) : 1 };
+}, K = ({ selectRef: t, panelRef: o, open: i, frozen: h, offset: n, onFlip: l }) => {
+  const a = M(0), B = M(null), A = M(h), I = M(l);
+  P(() => {
+    A.current = h, I.current = l;
+  });
+  const C = O((e) => [t.current, o.current].forEach((c) => X(c, e)), [t, o]), f = O((e) => {
+    const c = t.current;
+    if (!c || !e) return;
+    e.scrollHeight && (a.current = e.scrollHeight);
+    const u = c.getBoundingClientRect(), d = e.dataset.placement, s = a.current, { pin: p, ratio: b } = T(u, B.current ??= G(c)), w = d === "top" ? u.top - n >= s : window.innerHeight - u.bottom - n >= s;
+    let m = d && (A.current || w || b < 1) ? d === "top" : S(u, s);
+    d && m !== (d === "top") && (I.current?.(), m = d === "top"), C(m);
+    const g = p(m ? u.top : u.bottom);
+    e.style.width = `${u.width}px`, e.style.left = `${u.left + window.scrollX}px`, e.style.top = m ? "auto" : `${g + window.scrollY + n}px`, e.style.bottom = m ? `${window.innerHeight - g - window.scrollY + n}px` : "auto", W(e, u.left, g, m, n), b < 1 ? e.style.setProperty("--rac-visible", b) : e.style.removeProperty("--rac-visible"), e.toggleAttribute("data-offscreen", b === 0);
+  }, [t, n, C]), Y = O((e) => {
+    e && i && f(e.parentElement);
+  }, [f, i]), j = O((e) => {
+    e?.removeAttribute("data-placement"), f(e);
+  }, [f]);
+  return V(() => {
+    const e = t.current;
+    if (i || !e || !z()) return;
+    a.current ||= parseFloat(getComputedStyle(e).getPropertyValue("--rac-list-max-height")) || 250;
+    const c = { fits: !0, lower: !1 }, u = (s, p, b) => {
+      const w = new IntersectionObserver(([{ boundingClientRect: m, rootBounds: g }]) => {
+        g && (b(m, g), C(!c.fits && c.lower));
+      }, { rootMargin: s, threshold: p });
+      return w.observe(e), w;
+    }, d = [
+      u(`0px 0px ${-a.current}px 0px`, [0, 1], (s, p) => {
+        c.fits = s.bottom <= p.bottom;
+      }),
+      u("0px 0px -50% 0px", [0, 0.5, 1], (s, p) => {
+        c.lower = s.top + s.bottom > 2 * p.bottom;
+      })
+    ];
+    return () => d.forEach((s) => s.disconnect());
+  }, [i, t, C]), P(() => {
+    const e = t.current;
+    if (!i || !e) return;
+    const c = e.ownerDocument, u = o.current;
+    let d = 0, s = 0, p = "", b = null;
+    const w = () => {
+      const r = e.getBoundingClientRect(), x = o.current?.getBoundingClientRect() ?? r, $ = S(r, a.current), H = a.current + n, { pin: E, ratio: y } = T(r, B.current ?? []), U = o.current?.dataset.placement === "top";
+      return [r.left - x.left, U ? E(r.top) - x.bottom : E(r.bottom) - x.top, y, r.width, window.innerHeight, o.current?.scrollHeight, $, r.top >= H, window.innerHeight - r.bottom >= H].join();
+    }, m = () => {
+      if (b?.disconnect(), !z()) return;
+      const r = e.getBoundingClientRect(), { clientWidth: x, clientHeight: $ } = c.documentElement, H = [r.top, x - r.right, $ - r.bottom, r.left].map((y) => `${-Math.floor(y)}px`).join(" ");
+      let E = !1;
+      b = new IntersectionObserver(([y]) => {
+        E && y.intersectionRatio < 1 && v(), E = y.intersectionRatio === 1;
+      }, { root: c, rootMargin: H, threshold: 1 }), b.observe(e);
+    }, g = () => w() === p ? !1 : (f(o.current), p = w(), !0), D = () => {
+      if (d = 0, g()) s = 0;
+      else if (++s > 1) return m();
+      d = requestAnimationFrame(D);
+    }, v = () => {
+      s = 0, d ||= requestAnimationFrame(D);
+    };
+    f(o.current), p = w(), m(), window.addEventListener("scroll", v, { capture: !0, passive: !0 }), window.addEventListener("resize", v);
+    const F = typeof ResizeObserver < "u" && new ResizeObserver(v);
+    F && [e, o.current].forEach((r) => r && F.observe(r));
+    const q = ({ target: r }) => !e.contains(r) && !o.current?.contains(r), L = typeof MutationObserver < "u" && new MutationObserver((r) => {
+      r.some(q) && g() && v();
+    });
+    return L && L.observe(c.body, { subtree: !0, childList: !0, attributes: !0, characterData: !0 }), () => {
+      cancelAnimationFrame(d), window.removeEventListener("scroll", v, { capture: !0 }), window.removeEventListener("resize", v);
+      for (const r of [F, L, b]) r && r.disconnect();
+      u?.removeAttribute("data-placement"), B.current = null;
+    };
+  }, [i, f, n, t, o]), [Y, j];
+};
+export {
+  K as default
+};