@koide-labs/ui 0.0.15 → 0.1.1

package/dist/components/tabs/index.js

@@ -1,510 +1,5 @@
 "use client";
-import { jsx as g, jsxs as U } from "react/jsx-runtime";
-import { c as z } from "../../clsx-OuTLNxxd.js";
-import * as n from "react";
-import { Fragment as rt } from "react";
-import { tokens as it } from "../../styles/tokens.js";
-import { Button as ut } from "../button/index.js";
-import { Icon as ct } from "../icon/index.js";
-import { S as lt } from "../../index-DVjyPAD4.js";
-import { View as j } from "../view/index.js";
-import { u as dt } from "../../useControlled-Du4sJyMj.js";
-import { u as F } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
-import { u as O } from "../../useStableCallback-CkTrVkNX.js";
-import { u as $, b as ft } from "../../useRenderElement-DwToLA61.js";
-import { C as bt, u as pt } from "../../useCompositeListItem-OkcAim_1.js";
-import { u as mt } from "../../DirectionContext-C2o_MF_i.js";
-import { f as tt } from "../../formatErrorMessage-BqPuTBN-.js";
-import { u as et } from "../../useBaseUiId-B7WyxtIE.js";
-import { u as _t, A as gt, C as vt } from "../../CompositeRoot-CVk5a-pR.js";
-import { o as J } from "../../owner-rKN292Q9.js";
-import { c as Q, n as X } from "../../createBaseUIEventDetails-D8M2Yl-a.js";
-import { u as Tt } from "../../useButton-DfIwsdb8.js";
-import { h as ht, f as Ct } from "../../element-CZEOj04G.js";
-import '../../index27.css';const K = /* @__PURE__ */ n.createContext(void 0);
-process.env.NODE_ENV !== "production" && (K.displayName = "TabsRootContext");
-function Y() {
-  const t = n.useContext(K);
-  if (t === void 0)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: TabsRootContext is missing. Tabs parts must be placed within <Tabs.Root>." : tt(64));
-  return t;
-}
-let Et = /* @__PURE__ */ (function(t) {
-  return t.activationDirection = "data-activation-direction", t.orientation = "data-orientation", t;
-})({});
-const W = {
-  tabActivationDirection: (t) => ({
-    [Et.activationDirection]: t
-  })
-}, nt = /* @__PURE__ */ n.forwardRef(function(o, u) {
-  const {
-    className: f,
-    defaultValue: e = 0,
-    onValueChange: c,
-    orientation: a = "horizontal",
-    render: _,
-    value: b,
-    ...v
-  } = o, T = mt(), E = Object.hasOwn(o, "defaultValue"), R = n.useRef([]), [x, l] = n.useState(() => /* @__PURE__ */ new Map()), [d, h] = dt({
-    controlled: b,
-    default: e,
-    name: "Tabs",
-    state: "value"
-  }), N = b !== void 0, [i, P] = n.useState(() => /* @__PURE__ */ new Map()), [D, I] = n.useState("none"), M = O((s, m) => {
-    c?.(s, m), !m.isCanceled && (h(s), I(m.activationDirection));
-  }), p = O((s, m) => {
-    l((r) => {
-      if (r.get(s) === m)
-        return r;
-      const C = new Map(r);
-      return C.set(s, m), C;
-    });
-  }), w = O((s, m) => {
-    l((r) => {
-      if (!r.has(s) || r.get(s) !== m)
-        return r;
-      const C = new Map(r);
-      return C.delete(s), C;
-    });
-  }), A = n.useCallback((s) => x.get(s), [x]), y = n.useCallback((s) => {
-    for (const m of i.values())
-      if (s === m?.value)
-        return m?.id;
-  }, [i]), B = n.useCallback((s) => {
-    if (s === void 0)
-      return null;
-    for (const [m, r] of i.entries())
-      if (r != null && s === (r.value ?? r.index))
-        return m;
-    return null;
-  }, [i]), S = n.useMemo(() => ({
-    direction: T,
-    getTabElementBySelectedValue: B,
-    getTabIdByPanelValue: y,
-    getTabPanelIdByValue: A,
-    onValueChange: M,
-    orientation: a,
-    registerMountedTabPanel: p,
-    setTabMap: P,
-    unregisterMountedTabPanel: w,
-    tabActivationDirection: D,
-    value: d
-  }), [T, B, y, A, M, a, p, P, w, D, d]), k = n.useMemo(() => {
-    for (const s of i.values())
-      if (s != null && s.value === d)
-        return s;
-  }, [i, d]), L = n.useMemo(() => {
-    for (const s of i.values())
-      if (s != null && !s.disabled)
-        return s.value;
-  }, [i]);
-  F(() => {
-    if (N || i.size === 0)
-      return;
-    const s = k?.disabled, m = k == null && d !== null;
-    if (E && s && d === e || !s && !m)
-      return;
-    const C = L ?? null;
-    d !== C && (h(C), I("none"));
-  }, [e, L, E, N, k, I, h, i, d]);
-  const H = $("div", o, {
-    state: {
-      orientation: a,
-      tabActivationDirection: D
-    },
-    ref: u,
-    props: v,
-    stateAttributesMapping: W
-  });
-  return /* @__PURE__ */ g(K.Provider, {
-    value: S,
-    children: /* @__PURE__ */ g(bt, {
-      elementsRef: R,
-      children: H
-    })
-  });
-});
-process.env.NODE_ENV !== "production" && (nt.displayName = "TabsRoot");
-const q = /* @__PURE__ */ n.createContext(void 0);
-process.env.NODE_ENV !== "production" && (q.displayName = "TabsListContext");
-function Mt() {
-  const t = n.useContext(q);
-  if (t === void 0)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: TabsListContext is missing. TabsList parts must be placed within <Tabs.List>." : tt(65));
-  return t;
-}
-const ot = /* @__PURE__ */ n.forwardRef(function(o, u) {
-  const {
-    className: f,
-    disabled: e = !1,
-    render: c,
-    value: a,
-    id: _,
-    nativeButton: b = !0,
-    ...v
-  } = o, {
-    value: T,
-    getTabPanelIdByValue: E,
-    orientation: R
-  } = Y(), {
-    activateOnFocus: x,
-    highlightedTabIndex: l,
-    onTabActivation: d,
-    setHighlightedTabIndex: h,
-    tabsListElement: N
-  } = Mt(), i = et(_), P = n.useMemo(() => ({
-    disabled: e,
-    id: i,
-    value: a
-  }), [e, i, a]), {
-    compositeProps: D,
-    compositeRef: I,
-    index: M
-    // hook is used instead of the CompositeItem component
-    // because the index is needed for Tab internals
-  } = _t({
-    metadata: P
-  }), p = a === T, w = n.useRef(!1);
-  F(() => {
-    if (w.current) {
-      w.current = !1;
-      return;
-    }
-    if (!(p && M > -1 && l !== M))
-      return;
-    const r = N;
-    if (r != null) {
-      const C = ht(J(r));
-      if (C && Ct(r, C))
-        return;
-    }
-    e || h(M);
-  }, [p, M, l, h, e, N]);
-  const {
-    getButtonProps: A,
-    buttonRef: y
-  } = Tt({
-    disabled: e,
-    native: b,
-    focusableWhenDisabled: !0
-  }), B = E(a), S = n.useRef(!1), k = n.useRef(!1);
-  function L(r) {
-    p || e || d(a, Q(X, r.nativeEvent, void 0, {
-      activationDirection: "none"
-    }));
-  }
-  function G(r) {
-    p || (M > -1 && !e && h(M), !e && x && (!S.current || // keyboard or touch focus
-    S.current && k.current) && d(a, Q(X, r.nativeEvent, void 0, {
-      activationDirection: "none"
-    })));
-  }
-  function H(r) {
-    if (p || e)
-      return;
-    S.current = !0;
-    function C() {
-      S.current = !1, k.current = !1;
-    }
-    (!r.button || r.button === 0) && (k.current = !0, J(r.currentTarget).addEventListener("pointerup", C, {
-      once: !0
-    }));
-  }
-  const s = n.useMemo(() => ({
-    disabled: e,
-    active: p,
-    orientation: R
-  }), [e, p, R]);
-  return $("button", o, {
-    state: s,
-    ref: [u, y, I],
-    props: [D, {
-      role: "tab",
-      "aria-controls": B,
-      "aria-selected": p,
-      id: i,
-      onClick: L,
-      onFocus: G,
-      onPointerDown: H,
-      [gt]: p ? "" : void 0,
-      onKeyDownCapture() {
-        w.current = !0;
-      }
-    }, v, A]
-  });
-});
-process.env.NODE_ENV !== "production" && (ot.displayName = "TabsTab");
-let xt = /* @__PURE__ */ (function(t) {
-  return t.index = "data-index", t.activationDirection = "data-activation-direction", t.orientation = "data-orientation", t.hidden = "data-hidden", t;
-})({});
-const at = /* @__PURE__ */ n.forwardRef(function(o, u) {
-  const {
-    className: f,
-    value: e,
-    render: c,
-    keepMounted: a = !1,
-    ..._
-  } = o, {
-    value: b,
-    getTabIdByPanelValue: v,
-    orientation: T,
-    tabActivationDirection: E,
-    registerMountedTabPanel: R,
-    unregisterMountedTabPanel: x
-  } = Y(), l = et(), d = n.useMemo(() => ({
-    id: l,
-    value: e
-  }), [l, e]), {
-    ref: h,
-    index: N
-  } = pt({
-    metadata: d
-  }), i = e !== b, P = v(e), D = n.useMemo(() => ({
-    hidden: i,
-    orientation: T,
-    tabActivationDirection: E
-  }), [i, T, E]), I = $("div", o, {
-    state: D,
-    ref: [u, h],
-    props: [{
-      "aria-labelledby": P,
-      hidden: i,
-      id: l ?? void 0,
-      role: "tabpanel",
-      tabIndex: i ? -1 : 0,
-      [xt.index]: N
-    }, _],
-    stateAttributesMapping: W
-  });
-  return F(() => {
-    if (!(i && !a) && l != null)
-      return R(e, l), () => {
-        x(e, l);
-      };
-  }, [i, a, e, l, R, x]), !i || a ? I : null;
-});
-process.env.NODE_ENV !== "production" && (at.displayName = "TabsPanel");
-const st = /* @__PURE__ */ n.forwardRef(function(o, u) {
-  const {
-    activateOnFocus: f = !1,
-    className: e,
-    loopFocus: c = !0,
-    render: a,
-    ..._
-  } = o, {
-    getTabElementBySelectedValue: b,
-    onValueChange: v,
-    orientation: T,
-    value: E,
-    setTabMap: R,
-    tabActivationDirection: x
-  } = Y(), [l, d] = n.useState(0), [h, N] = n.useState(null), i = Rt(
-    E,
-    // the old value
-    T,
-    h,
-    b
-  ), P = O((p, w) => {
-    if (p !== E) {
-      const A = i(p);
-      w.activationDirection = A, v(p, w);
-    }
-  }), D = n.useMemo(() => ({
-    orientation: T,
-    tabActivationDirection: x
-  }), [T, x]), I = {
-    "aria-orientation": T === "vertical" ? "vertical" : void 0,
-    role: "tablist"
-  }, M = n.useMemo(() => ({
-    activateOnFocus: f,
-    highlightedTabIndex: l,
-    onTabActivation: P,
-    setHighlightedTabIndex: d,
-    tabsListElement: h,
-    value: E
-  }), [f, l, P, d, h, E]);
-  return /* @__PURE__ */ g(q.Provider, {
-    value: M,
-    children: /* @__PURE__ */ g(vt, {
-      render: a,
-      className: e,
-      state: D,
-      refs: [u, N],
-      props: [I, _],
-      stateAttributesMapping: W,
-      highlightedIndex: l,
-      enableHomeAndEndKeys: !0,
-      loopFocus: c,
-      orientation: T,
-      onHighlightedIndexChange: d,
-      onMapChange: R,
-      disabledIndices: ft
-    })
-  });
-});
-process.env.NODE_ENV !== "production" && (st.displayName = "TabsList");
-function Z(t, o) {
-  const {
-    left: u,
-    top: f
-  } = t.getBoundingClientRect(), {
-    left: e,
-    top: c
-  } = o.getBoundingClientRect(), a = u - e, _ = f - c;
-  return {
-    left: a,
-    top: _
-  };
-}
-function Rt(t, o, u, f) {
-  const [e, c] = n.useState(null);
-  return F(() => {
-    if (t == null || u == null) {
-      c(null);
-      return;
-    }
-    const a = f(t);
-    if (a == null) {
-      c(null);
-      return;
-    }
-    const {
-      left: _,
-      top: b
-    } = Z(a, u);
-    c(o === "horizontal" ? _ : b);
-  }, [o, f, u, t]), n.useCallback((a) => {
-    if (a === t)
-      return "none";
-    if (a == null)
-      return c(null), "none";
-    if (a != null && u != null) {
-      const _ = f(a);
-      if (_ != null) {
-        const {
-          left: b,
-          top: v
-        } = Z(_, u);
-        if (e == null)
-          return c(o === "horizontal" ? b : v), "none";
-        if (o === "horizontal") {
-          if (b < e)
-            return c(b), "left";
-          if (b > e)
-            return c(b), "right";
-        } else {
-          if (v < e)
-            return c(v), "up";
-          if (v > e)
-            return c(v), "down";
-        }
-      }
-    }
-    return "none";
-  }, [f, o, e, u, t]);
-}
-const Nt = "_tabs_1w9kt_5", Pt = "_tabs__list_1w9kt_9", Dt = "_tabs_variant_default_1w9kt_16", It = "_tabs__separator_1w9kt_21", wt = "_tabs__trigger_1w9kt_25", kt = "_tabs_variant_progress_1w9kt_46", V = {
-  tabs: Nt,
-  tabs__list: Pt,
-  tabs_variant_default: Dt,
-  tabs__separator: It,
-  tabs__trigger: wt,
-  tabs_variant_progress: kt,
-  "tabs__trigger-complete": "_tabs__trigger-complete_1w9kt_70",
-  "tabs_variant_button-group": "_tabs_variant_button-group_1w9kt_82"
-}, At = /* @__PURE__ */ new Set(["default", "progress"]);
-function ae({
-  variant: t = "default",
-  disabled: o = !1,
-  tabs: u,
-  className: f,
-  children: e,
-  ...c
-}) {
-  return /* @__PURE__ */ U(
-    j,
-    {
-      render: /* @__PURE__ */ g(
-        nt,
-        {
-          className: z(
-            V.tabs,
-            V[`tabs_variant_${t}`],
-            f
-          ),
-          ...c
-        }
-      ),
-      children: [
-        /* @__PURE__ */ g(Vt, { children: u.map((a, _) => /* @__PURE__ */ U(rt, { children: [
-          /* @__PURE__ */ g(St, { disabled: o, ...a }),
-          _ + 1 < u.length && At.has(t) ? /* @__PURE__ */ g(
-            yt,
-            {
-              orientation: t === "progress" ? "horizontal" : "vertical"
-            }
-          ) : null
-        ] }, a.value)) }),
-        e
-      ]
-    }
-  );
-}
-function St({
-  value: t,
-  className: o,
-  complete: u,
-  children: f,
-  ...e
-}) {
-  return /* @__PURE__ */ U(
-    ut,
-    {
-      interactive: "list-item",
-      className: z(V.tabs__trigger, o),
-      render: /* @__PURE__ */ g(ot, { value: t }),
-      ...e,
-      children: [
-        u ? /* @__PURE__ */ g(
-          ct,
-          {
-            color: it.positiveDefault,
-            name: "check-line",
-            className: V["tabs__trigger-complete"]
-          }
-        ) : null,
-        f
-      ]
-    }
-  );
-}
-function Vt({ className: t, ...o }) {
-  return /* @__PURE__ */ g(
-    j,
-    {
-      render: /* @__PURE__ */ g(
-        st,
-        {
-          className: z(V.tabs__list, t),
-          ...o
-        }
-      )
-    }
-  );
-}
-function yt({ className: t, ...o }) {
-  return /* @__PURE__ */ g(
-    lt,
-    {
-      className: z(V.tabs__separator, t),
-      ...o
-    }
-  );
-}
-function se({ children: t, ...o }) {
-  return /* @__PURE__ */ g(at, { ...o, children: /* @__PURE__ */ g(j, { children: t }) });
-}
+import { Tabs as r } from "./tabs.js";
 export {
-  ae as Tabs,
-  se as TabsPanel
+  r as Tabs
 };

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,28 @@
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+import { Button } from '../button';
+type TabsVariant = "default" | "progress" | "button-group";
+interface TabsTriggerProps extends Button.Props {
+    value: TabsPrimitive.Tab.Props["value"];
+    /** Show indicator that tab is complete.  */
+    complete?: boolean;
+}
+interface TabsRootProps extends TabsPrimitive.Root.Props {
+    /** Tabs styling that we should use. Defaults to "default". */
+    variant?: TabsVariant;
+    /** Disable all triggers */
+    disabled?: boolean;
+    tabs: Array<TabsTriggerProps>;
+}
+declare function TabsRoot({ variant, disabled, tabs, className, children, ...props }: TabsRootProps): import("react/jsx-runtime").JSX.Element;
+type TabsPanelProps = TabsPrimitive.Panel.Props;
+declare function TabsPanel({ children, ...props }: TabsPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: typeof TabsRoot & {
+    Panel: typeof TabsPanel;
+};
+export declare namespace Tabs {
+    type Props = TabsRootProps;
+    namespace Panel {
+        type Props = TabsPanelProps;
+    }
+}
+export {};