@koide-labs/ui 0.0.15 → 0.1.0

package/dist/components/accordion/index.js

@@ -1,700 +1,5 @@
 "use client";
-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 '../../index31.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
-    }) }) })
-  ] });
-}
+import { Accordion as e } from "./accordion.js";
 export {
-  vn as Accordion,
-  An as AccordionItem
+  e as Accordion
 };