@koide-labs/ui 0.0.0 → 0.0.2

package/dist/components/accordion/index.js

@@ -0,0 +1,699 @@
+import { jsx as k, jsxs as ne } from "react/jsx-runtime";
+import { c as Ce } from "../../clsx-OuTLNxxd.js";
+import { textify as te } from "../../-utils.js";
+import { Icon as Ne } from "../icon/index.js";
+import { Surface as Oe } from "../surface/index.js";
+import { View as oe } from "../view/index.js";
+import * as r from "react";
+import { u as ae } from "../../useControlled-Du4sJyMj.js";
+import { u as L } from "../../useStableCallback-CkTrVkNX.js";
+import { u as T } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
+import { w as K } from "../../warn-CKtX8MLJ.js";
+import { C as Ee, u as xe } from "../../useCompositeListItem-OkcAim_1.js";
+import { u as ve } from "../../DirectionContext-C2o_MF_i.js";
+import { f as z } from "../../formatErrorMessage-BqPuTBN-.js";
+import { u as B, c as ce } from "../../useRenderElement-DwToLA61.js";
+import { c as $, n as le, a as Ae } from "../../createBaseUIEventDetails-D8M2Yl-a.js";
+import { u as j } from "../../useBaseUiId-B7WyxtIE.js";
+import { u as Se, T as re, t as Me, a as Pe } from "../../useOpenChangeComplete-Dse9kY9E.js";
+import { u as we } from "../../useTransitionStatus-CUfcuGAV.js";
+import { i as ie } from "../../isElementDisabled-Cbd8W9kH.js";
+import { b as de, e as ue, c as fe, d as pe, H as Ie, E as De } from "../../composite-C9L5QmZL.js";
+import { u as Ve } from "../../useButton-DfIwsdb8.js";
+import { s as Fe } from "../../event-CKoGyQEJ.js";
+import { u as Te } from "../../useOnMount-VRW6CK2u.js";
+import { u as ke, A as F } from "../../useAnimationFrame-451ugS_6.js";
+import '../../index30.css';const G = /* @__PURE__ */ r.createContext(void 0);
+process.env.NODE_ENV !== "production" && (G.displayName = "AccordionRootContext");
+function Y() {
+  const n = r.useContext(G);
+  if (n === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: AccordionRootContext is missing. Accordion parts must be placed within <Accordion.Root>." : z(10));
+  return n;
+}
+const He = {
+  value: () => null
+}, me = /* @__PURE__ */ r.forwardRef(function(o, i) {
+  const {
+    render: w,
+    className: I,
+    disabled: c = !1,
+    hiddenUntilFound: m,
+    keepMounted: v,
+    loopFocus: C = !0,
+    onValueChange: R,
+    multiple: h = !1,
+    orientation: d = "vertical",
+    value: N,
+    defaultValue: f,
+    ...O
+  } = o, E = ve();
+  process.env.NODE_ENV !== "production" && T(() => {
+    m && v === !1 && K("The `keepMounted={false}` prop on a Accordion.Root will be ignored when using `hiddenUntilFound` since it requires Panels to remain mounted when closed.");
+  }, [m, v]);
+  const S = r.useMemo(() => {
+    if (N === void 0)
+      return f ?? [];
+  }, [N, f]), A = L(R), y = r.useRef([]), [b, _] = ae({
+    controlled: N,
+    default: S,
+    name: "Accordion",
+    state: "value"
+  }), l = L((p, V) => {
+    const g = $(le);
+    if (h)
+      if (V) {
+        const e = b.slice();
+        if (e.push(p), A(e, g), g.isCanceled)
+          return;
+        _(e);
+      } else {
+        const e = b.filter((a) => a !== p);
+        if (A(e, g), g.isCanceled)
+          return;
+        _(e);
+      }
+    else {
+      const e = b[0] === p ? [] : [p];
+      if (A(e, g), g.isCanceled)
+        return;
+      _(e);
+    }
+  }), x = r.useMemo(() => ({
+    value: b,
+    disabled: c,
+    orientation: d
+  }), [b, c, d]), M = r.useMemo(() => ({
+    accordionItemRefs: y,
+    direction: E,
+    disabled: c,
+    handleValueChange: l,
+    hiddenUntilFound: m ?? !1,
+    keepMounted: v ?? !1,
+    loopFocus: C,
+    orientation: d,
+    state: x,
+    value: b
+  }), [E, c, l, m, v, C, d, x, b]), P = B("div", o, {
+    state: x,
+    ref: i,
+    props: [{
+      dir: E,
+      role: "region"
+    }, O],
+    stateAttributesMapping: He
+  });
+  return /* @__PURE__ */ k(G.Provider, {
+    value: M,
+    children: /* @__PURE__ */ k(Ee, {
+      elementsRef: y,
+      children: P
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (me.displayName = "AccordionRoot");
+function Ue(n) {
+  const {
+    open: o,
+    defaultOpen: i,
+    onOpenChange: w,
+    disabled: I
+  } = n, c = o !== void 0, [m, v] = ae({
+    controlled: o,
+    default: i,
+    name: "Collapsible",
+    state: "open"
+  }), {
+    mounted: C,
+    setMounted: R,
+    transitionStatus: h
+  } = we(m, !0, !0), [d, N] = r.useState(m), [{
+    height: f,
+    width: O
+  }, E] = r.useState({
+    height: void 0,
+    width: void 0
+  }), S = j(), [A, y] = r.useState(), b = A ?? S, [_, l] = r.useState(!1), [x, M] = r.useState(!1), P = r.useRef(null), p = r.useRef(null), V = r.useRef(null), g = r.useRef(null), e = Se(g, !1), a = L((s) => {
+    const t = !m, u = $(Ae, s.nativeEvent);
+    if (w(t, u), u.isCanceled)
+      return;
+    const D = g.current;
+    p.current === "css-animation" && D != null && D.style.removeProperty("animation-name"), !_ && !x && (p.current != null && p.current !== "css-animation" && !C && t && R(!0), p.current === "css-animation" && (!d && t && N(!0), !C && t && R(!0))), v(t), p.current === "none" && C && !t && R(!1);
+  });
+  return T(() => {
+    c && p.current === "none" && !x && !m && R(!1);
+  }, [c, x, m, o, R]), r.useMemo(() => ({
+    abortControllerRef: P,
+    animationTypeRef: p,
+    disabled: I,
+    handleTrigger: a,
+    height: f,
+    mounted: C,
+    open: m,
+    panelId: b,
+    panelRef: g,
+    runOnceAnimationsFinish: e,
+    setDimensions: E,
+    setHiddenUntilFound: l,
+    setKeepMounted: M,
+    setMounted: R,
+    setOpen: v,
+    setPanelIdState: y,
+    setVisible: N,
+    transitionDimensionRef: V,
+    transitionStatus: h,
+    visible: d,
+    width: O
+  }), [P, p, I, a, f, C, m, b, g, e, E, l, M, R, v, N, V, h, d, O]);
+}
+const J = /* @__PURE__ */ r.createContext(void 0);
+process.env.NODE_ENV !== "production" && (J.displayName = "CollapsibleRootContext");
+function he() {
+  const n = r.useContext(J);
+  if (n === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: CollapsibleRootContext is missing. Collapsible parts must be placed within <Collapsible.Root>." : z(15));
+  return n;
+}
+const Q = /* @__PURE__ */ r.createContext(void 0);
+process.env.NODE_ENV !== "production" && (Q.displayName = "AccordionItemContext");
+function X() {
+  const n = r.useContext(Q);
+  if (n === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: AccordionItemContext is missing. Accordion parts must be placed within <Accordion.Item>." : z(9));
+  return n;
+}
+let W = (function(n) {
+  return n.open = "data-open", n.closed = "data-closed", n[n.startingStyle = re.startingStyle] = "startingStyle", n[n.endingStyle = re.endingStyle] = "endingStyle", n;
+})({}), We = /* @__PURE__ */ (function(n) {
+  return n.panelOpen = "data-panel-open", n;
+})({});
+const Le = {
+  [W.open]: ""
+}, Be = {
+  [W.closed]: ""
+}, qe = {
+  open(n) {
+    return n ? {
+      [We.panelOpen]: ""
+    } : null;
+  }
+}, je = {
+  open(n) {
+    return n ? Le : Be;
+  }
+};
+let Ke = /* @__PURE__ */ (function(n) {
+  return n.index = "data-index", n.disabled = "data-disabled", n.open = "data-open", n;
+})({});
+const Z = {
+  ...je,
+  index: (n) => Number.isInteger(n) ? {
+    [Ke.index]: String(n)
+  } : null,
+  ...Me,
+  value: () => null
+}, ge = /* @__PURE__ */ r.forwardRef(function(o, i) {
+  const {
+    className: w,
+    disabled: I = !1,
+    onOpenChange: c,
+    render: m,
+    value: v,
+    ...C
+  } = o, {
+    ref: R,
+    index: h
+  } = xe(), d = ce(i, R), {
+    disabled: N,
+    handleValueChange: f,
+    state: O,
+    value: E
+  } = Y(), S = j(), A = v ?? S, y = I || N, b = r.useMemo(() => {
+    if (!E)
+      return !1;
+    for (let a = 0; a < E.length; a += 1)
+      if (E[a] === A)
+        return !0;
+    return !1;
+  }, [E, A]), _ = L((a, s) => {
+    c?.(a, s), !s.isCanceled && f(A, a);
+  }), l = Ue({
+    open: b,
+    onOpenChange: _,
+    disabled: y
+  }), x = r.useMemo(() => ({
+    open: l.open,
+    disabled: l.disabled,
+    hidden: !l.mounted,
+    transitionStatus: l.transitionStatus
+  }), [l.open, l.disabled, l.mounted, l.transitionStatus]), M = r.useMemo(() => ({
+    ...l,
+    onOpenChange: _,
+    state: x
+  }), [l, x, _]), P = r.useMemo(() => ({
+    ...O,
+    index: h,
+    disabled: y,
+    open: b
+  }), [y, h, b, O]), [p, V] = r.useState(j()), g = r.useMemo(() => ({
+    open: b,
+    state: P,
+    setTriggerId: V,
+    triggerId: p
+  }), [b, P, V, p]), e = B("div", o, {
+    state: P,
+    ref: d,
+    props: C,
+    stateAttributesMapping: Z
+  });
+  return /* @__PURE__ */ k(J.Provider, {
+    value: M,
+    children: /* @__PURE__ */ k(Q.Provider, {
+      value: g,
+      children: e
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (ge.displayName = "AccordionItem");
+const be = /* @__PURE__ */ r.forwardRef(function(o, i) {
+  const {
+    render: w,
+    className: I,
+    ...c
+  } = o, {
+    state: m
+  } = X();
+  return B("h3", o, {
+    state: m,
+    ref: i,
+    props: c,
+    stateAttributesMapping: Z
+  });
+});
+process.env.NODE_ENV !== "production" && (be.displayName = "AccordionHeader");
+const ze = /* @__PURE__ */ new Set([de, ue, fe, pe, Ie, De]);
+function $e(n) {
+  const {
+    current: o
+  } = n, i = [];
+  for (let w = 0; w < o.length; w += 1) {
+    const I = o[w];
+    if (!ie(I)) {
+      const c = I?.querySelector('[type="button"]');
+      ie(c) || i.push(c);
+    }
+  }
+  return i;
+}
+const _e = /* @__PURE__ */ r.forwardRef(function(o, i) {
+  const {
+    disabled: w,
+    className: I,
+    id: c,
+    render: m,
+    nativeButton: v = !0,
+    ...C
+  } = o, {
+    panelId: R,
+    open: h,
+    handleTrigger: d,
+    disabled: N
+  } = he(), f = w ?? N, {
+    getButtonProps: O,
+    buttonRef: E
+  } = Ve({
+    disabled: f,
+    focusableWhenDisabled: !0,
+    native: v
+  }), {
+    accordionItemRefs: S,
+    direction: A,
+    loopFocus: y,
+    orientation: b
+  } = Y(), _ = A === "rtl", l = b === "horizontal", {
+    state: x,
+    setTriggerId: M,
+    triggerId: P
+  } = X();
+  T(() => (c && M(c), () => {
+    M(void 0);
+  }), [c, M]);
+  const p = r.useMemo(() => ({
+    "aria-controls": h ? R : void 0,
+    "aria-expanded": h,
+    disabled: f,
+    id: P,
+    onClick: d,
+    onKeyDown(g) {
+      if (!ze.has(g.key))
+        return;
+      Fe(g);
+      const e = $e(S), s = e.length - 1;
+      let t = -1;
+      const u = e.indexOf(g.target);
+      function D() {
+        y ? t = u + 1 > s ? 0 : u + 1 : t = Math.min(u + 1, s);
+      }
+      function H() {
+        y ? t = u === 0 ? s : u - 1 : t = u - 1;
+      }
+      switch (g.key) {
+        case de:
+          l || D();
+          break;
+        case ue:
+          l || H();
+          break;
+        case fe:
+          l && (_ ? H() : D());
+          break;
+        case pe:
+          l && (_ ? D() : H());
+          break;
+        case "Home":
+          t = 0;
+          break;
+        case "End":
+          t = s;
+          break;
+      }
+      t > -1 && e[t].focus();
+    }
+  }), [S, f, d, P, l, _, y, h, R]);
+  return B("button", o, {
+    state: x,
+    ref: [i, E],
+    props: [p, C, O],
+    stateAttributesMapping: qe
+  });
+});
+process.env.NODE_ENV !== "production" && (_e.displayName = "AccordionTrigger");
+let Ge = /* @__PURE__ */ (function(n) {
+  return n.disabled = "data-disabled", n.orientation = "data-orientation", n;
+})({});
+function Ye(n) {
+  const {
+    abortControllerRef: o,
+    animationTypeRef: i,
+    externalRef: w,
+    height: I,
+    hiddenUntilFound: c,
+    keepMounted: m,
+    id: v,
+    mounted: C,
+    onOpenChange: R,
+    open: h,
+    panelRef: d,
+    runOnceAnimationsFinish: N,
+    setDimensions: f,
+    setMounted: O,
+    setOpen: E,
+    setVisible: S,
+    transitionDimensionRef: A,
+    visible: y,
+    width: b
+  } = n, _ = r.useRef(!1), l = r.useRef(null), x = r.useRef(h), M = r.useRef(h), P = ke(), p = r.useMemo(() => i.current === "css-animation" ? !y : !h && !C, [h, C, y, i]), V = L((e) => {
+    if (!e)
+      return;
+    if (i.current == null || A.current == null) {
+      const t = getComputedStyle(e), u = t.animationName !== "none" && t.animationName !== "", D = t.transitionDuration !== "0s" && t.transitionDuration !== "";
+      u && D ? process.env.NODE_ENV !== "production" && K("CSS transitions and CSS animations both detected on Collapsible or Accordion panel.", "Only one of either animation type should be used.") : t.animationName === "none" && t.transitionDuration !== "0s" ? i.current = "css-transition" : t.animationName !== "none" && t.transitionDuration === "0s" ? i.current = "css-animation" : i.current = "none", e.getAttribute(Ge.orientation) === "horizontal" || t.transitionProperty.indexOf("width") > -1 ? A.current = "width" : A.current = "height";
+    }
+    if (i.current !== "css-transition")
+      return;
+    (I === void 0 || b === void 0) && (f({
+      height: e.scrollHeight,
+      width: e.scrollWidth
+    }), M.current && e.style.setProperty("transition-duration", "0s"));
+    let a = -1, s = -1;
+    return a = F.request(() => {
+      M.current = !1, s = F.request(() => {
+        setTimeout(() => {
+          e.style.removeProperty("transition-duration");
+        });
+      });
+    }), () => {
+      F.cancel(a), F.cancel(s);
+    };
+  }), g = ce(w, d, V);
+  return T(() => {
+    if (i.current !== "css-transition")
+      return;
+    const e = d.current;
+    if (!e)
+      return;
+    let a = -1;
+    if (o.current != null && (o.current.abort(), o.current = null), h) {
+      const s = {
+        "justify-content": e.style.justifyContent,
+        "align-items": e.style.alignItems,
+        "align-content": e.style.alignContent,
+        "justify-items": e.style.justifyItems
+      };
+      Object.keys(s).forEach((t) => {
+        e.style.setProperty(t, "initial", "important");
+      }), !M.current && !m && e.setAttribute(W.startingStyle, ""), f({
+        height: e.scrollHeight,
+        width: e.scrollWidth
+      }), a = F.request(() => {
+        Object.entries(s).forEach(([t, u]) => {
+          u === "" ? e.style.removeProperty(t) : e.style.setProperty(t, u);
+        });
+      });
+    } else {
+      if (e.scrollHeight === 0 && e.scrollWidth === 0)
+        return;
+      f({
+        height: e.scrollHeight,
+        width: e.scrollWidth
+      });
+      const s = new AbortController();
+      o.current = s;
+      const t = s.signal;
+      let u = null;
+      const D = W.endingStyle;
+      return u = new MutationObserver((H) => {
+        H.some((q) => q.type === "attributes" && q.attributeName === D) && (u?.disconnect(), u = null, N(() => {
+          f({
+            height: 0,
+            width: 0
+          }), e.style.removeProperty("content-visibility"), O(!1), o.current === s && (o.current = null);
+        }, t));
+      }), u.observe(e, {
+        attributes: !0,
+        attributeFilter: [D]
+      }), () => {
+        u?.disconnect(), P.cancel(), o.current === s && (s.abort(), o.current = null);
+      };
+    }
+    return () => {
+      F.cancel(a);
+    };
+  }, [o, i, P, c, m, C, h, d, N, f, O]), T(() => {
+    if (i.current !== "css-animation")
+      return;
+    const e = d.current;
+    e && (l.current = e.style.animationName || l.current, e.style.setProperty("animation-name", "none"), f({
+      height: e.scrollHeight,
+      width: e.scrollWidth
+    }), !x.current && !_.current && e.style.removeProperty("animation-name"), h ? (o.current != null && (o.current.abort(), o.current = null), O(!0), S(!0)) : (o.current = new AbortController(), N(() => {
+      O(!1), S(!1), o.current = null;
+    }, o.current.signal)));
+  }, [o, i, h, d, N, f, O, S, y]), Te(() => {
+    const e = F.request(() => {
+      x.current = !1;
+    });
+    return () => F.cancel(e);
+  }), T(() => {
+    if (!c)
+      return;
+    const e = d.current;
+    if (!e)
+      return;
+    let a = -1, s = -1;
+    return h && _.current && (e.style.transitionDuration = "0s", f({
+      height: e.scrollHeight,
+      width: e.scrollWidth
+    }), a = F.request(() => {
+      _.current = !1, s = F.request(() => {
+        setTimeout(() => {
+          e.style.removeProperty("transition-duration");
+        });
+      });
+    })), () => {
+      F.cancel(a), F.cancel(s);
+    };
+  }, [c, h, d, f]), T(() => {
+    const e = d.current;
+    e && c && p && (e.setAttribute("hidden", "until-found"), i.current === "css-transition" && e.setAttribute(W.startingStyle, ""));
+  }, [c, p, i, d]), r.useEffect(function() {
+    const a = d.current;
+    if (!a)
+      return;
+    function s(t) {
+      _.current = !0, E(!0), R(!0, $(le, t));
+    }
+    return a.addEventListener("beforematch", s), () => {
+      a.removeEventListener("beforematch", s);
+    };
+  }, [R, d, E]), r.useMemo(() => ({
+    props: {
+      hidden: p,
+      id: v,
+      ref: g
+    }
+  }), [p, v, g]);
+}
+let se = /* @__PURE__ */ (function(n) {
+  return n.accordionPanelHeight = "--accordion-panel-height", n.accordionPanelWidth = "--accordion-panel-width", n;
+})({});
+const ye = /* @__PURE__ */ r.forwardRef(function(o, i) {
+  const {
+    className: w,
+    hiddenUntilFound: I,
+    keepMounted: c,
+    id: m,
+    render: v,
+    ...C
+  } = o, {
+    hiddenUntilFound: R,
+    keepMounted: h
+  } = Y(), {
+    abortControllerRef: d,
+    animationTypeRef: N,
+    height: f,
+    mounted: O,
+    onOpenChange: E,
+    open: S,
+    panelId: A,
+    panelRef: y,
+    runOnceAnimationsFinish: b,
+    setDimensions: _,
+    setHiddenUntilFound: l,
+    setKeepMounted: x,
+    setMounted: M,
+    setOpen: P,
+    setVisible: p,
+    transitionDimensionRef: V,
+    visible: g,
+    width: e,
+    setPanelIdState: a,
+    transitionStatus: s
+  } = he(), t = I ?? R, u = c ?? h;
+  process.env.NODE_ENV !== "production" && T(() => {
+    c === !1 && t && K("The `keepMounted={false}` prop on a Accordion.Panel will be ignored when using `contextHiddenUntilFound` on the Panel or the Root since it requires the panel to remain mounted when closed.");
+  }, [t, c]), T(() => {
+    if (m)
+      return a(m), () => {
+        a(void 0);
+      };
+  }, [m, a]), T(() => {
+    l(t);
+  }, [l, t]), T(() => {
+    x(u);
+  }, [x, u]), Pe({
+    open: S && s === "idle",
+    ref: y,
+    onComplete() {
+      S && _({
+        width: void 0,
+        height: void 0
+      });
+    }
+  });
+  const {
+    props: D
+  } = Ye({
+    abortControllerRef: d,
+    animationTypeRef: N,
+    externalRef: i,
+    height: f,
+    hiddenUntilFound: t,
+    id: m ?? A,
+    keepMounted: u,
+    mounted: O,
+    onOpenChange: E,
+    open: S,
+    panelRef: y,
+    runOnceAnimationsFinish: b,
+    setDimensions: _,
+    setMounted: M,
+    setOpen: P,
+    setVisible: p,
+    transitionDimensionRef: V,
+    visible: g,
+    width: e
+  }), {
+    state: H,
+    triggerId: ee
+  } = X(), q = r.useMemo(() => ({
+    ...H,
+    transitionStatus: s
+  }), [H, s]), Re = B("div", o, {
+    state: q,
+    ref: [i, y],
+    props: [D, {
+      "aria-labelledby": ee,
+      role: "region",
+      style: {
+        [se.accordionPanelHeight]: f === void 0 ? "auto" : `${f}px`,
+        [se.accordionPanelWidth]: e === void 0 ? "auto" : `${e}px`
+      }
+    }, C],
+    stateAttributesMapping: Z
+  });
+  return u || t || !u && O ? Re : null;
+});
+process.env.NODE_ENV !== "production" && (ye.displayName = "AccordionPanel");
+const Je = "_accordion_6swdg_1", Qe = "_accordion__header_6swdg_5", Xe = "_accordion__trigger_6swdg_9", Ze = "_accordion__panel_6swdg_30", U = {
+  accordion: Je,
+  accordion__header: Qe,
+  "accordion__trigger-icon": "_accordion__trigger-icon_6swdg_9",
+  accordion__trigger: Xe,
+  accordion__panel: Ze,
+  "accordion__panel-content": "_accordion__panel-content_6swdg_42"
+}, vn = me;
+function An({
+  header: n,
+  content: o,
+  className: i,
+  ...w
+}) {
+  return /* @__PURE__ */ ne(ge, { className: U.accordion, ...w, children: [
+    /* @__PURE__ */ k(be, { className: U.accordion__header, children: /* @__PURE__ */ k(
+      Oe,
+      {
+        elevated: !0,
+        render: /* @__PURE__ */ ne(
+          oe,
+          {
+            interactive: "list-item",
+            render: /* @__PURE__ */ k(
+              _e,
+              {
+                className: Ce(U.accordion__trigger, i)
+              }
+            ),
+            children: [
+              te(n),
+              /* @__PURE__ */ k(
+                Ne,
+                {
+                  name: "close-line",
+                  className: U["accordion__trigger-icon"]
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ k(ye, { className: U.accordion__panel, children: /* @__PURE__ */ k(oe, { className: U["accordion__panel-content"], children: te(o, {
+      multiline: !0
+    }) }) })
+  ] });
+}
+export {
+  vn as Accordion,
+  An as AccordionItem
+};