@koide-labs/ui 0.1.0 → 0.1.2

package/dist/components/tabs/tabs.js

@@ -1,15 +1,15 @@
 import { jsx as g, jsxs as j } from "react/jsx-runtime";
-import { c as z } from "../../clsx-OuTLNxxd.js";
+import { c as k } from "../../clsx-OuTLNxxd.js";
 import * as n from "react";
 import { Fragment as rt } from "react";
 import { tokens as it } from "../../styles/tokens.js";
 import { View as U } from "../view/view.js";
 import { Button as ut } from "../button/button.js";
 import { Icon as ct } from "../icon/icon.js";
-import { S as lt } from "../../separator-fh_wDZNf.js";
+import { S as lt } from "../../separator-wNYojB9q.js";
 import { u as dt } from "../../useControlled-Du4sJyMj.js";
 import { u as F } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
-import { u as k } from "../../useStableCallback-DKZHlUAT.js";
+import { u as z } from "../../useStableCallback-DKZHlUAT.js";
 import { u as $, b as ft } from "../../useRenderElement-DngNDu_P.js";
 import { C as bt, u as pt } from "../../useCompositeListItem-CZp9WTnF.js";
 import { u as mt } from "../../DirectionContext-C2o_MF_i.js";
@@ -18,8 +18,8 @@ import { u as et } from "../../useBaseUiId-B7WyxtIE.js";
 import { u as _t, A as gt, C as vt } from "../../CompositeRoot-CCgh2M64.js";
 import { o as J } from "../../owner-rKN292Q9.js";
 import { c as Q, n as X } from "../../createBaseUIEventDetails-CCSfZ2vM.js";
-import { u as ht } from "../../useButton-d3_JgBNr.js";
-import { d as Tt, f as Ct } from "../../element-u5WgOZX1.js";
+import { u as Tt } from "../../useButton-d3_JgBNr.js";
+import { d as ht, f as xt } from "../../element-u5WgOZX1.js";
 import '../../tabs.css';const K = /* @__PURE__ */ n.createContext(void 0);
 process.env.NODE_ENV !== "production" && (K.displayName = "TabsRootContext");
 function Y() {
@@ -28,12 +28,12 @@ function Y() {
     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) {
+let Ct = /* @__PURE__ */ (function(t) {
   return t.activationDirection = "data-activation-direction", t.orientation = "data-orientation", t;
 })({});
 const W = {
   tabActivationDirection: (t) => ({
-    [Et.activationDirection]: t
+    [Ct.activationDirection]: t
   })
 }, nt = /* @__PURE__ */ n.forwardRef(function(o, u) {
   const {
@@ -44,51 +44,51 @@ const W = {
     render: _,
     value: b,
     ...v
-  } = o, h = mt(), E = Object.hasOwn(o, "defaultValue"), R = n.useRef([]), [x, l] = n.useState(() => /* @__PURE__ */ new Map()), [d, T] = dt({
+  } = o, T = mt(), C = Object.hasOwn(o, "defaultValue"), R = n.useRef([]), [M, 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 = k((s, m) => {
-    c?.(s, m), !m.isCanceled && (T(s), I(m.activationDirection));
-  }), p = k((s, m) => {
+  }), N = b !== void 0, [i, w] = n.useState(() => /* @__PURE__ */ new Map()), [P, D] = n.useState("none"), E = z((s, m) => {
+    c?.(s, m), !m.isCanceled && (h(s), D(m.activationDirection));
+  }), p = z((s, m) => {
     l((r) => {
       if (r.get(s) === m)
         return r;
-      const C = new Map(r);
-      return C.set(s, m), C;
+      const x = new Map(r);
+      return x.set(s, m), x;
     });
-  }), A = k((s, m) => {
+  }), I = z((s, m) => {
     l((r) => {
       if (!r.has(s) || r.get(s) !== m)
         return r;
-      const C = new Map(r);
-      return C.delete(s), C;
+      const x = new Map(r);
+      return x.delete(s), x;
     });
-  }), V = n.useCallback((s) => x.get(s), [x]), O = n.useCallback((s) => {
+  }), S = n.useCallback((s) => M.get(s), [M]), B = n.useCallback((s) => {
     for (const m of i.values())
       if (s === m?.value)
         return m?.id;
-  }, [i]), w = n.useCallback((s) => {
+  }, [i]), O = 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]), y = n.useMemo(() => ({
-    direction: h,
-    getTabElementBySelectedValue: w,
-    getTabIdByPanelValue: O,
-    getTabPanelIdByValue: V,
-    onValueChange: M,
+  }, [i]), V = n.useMemo(() => ({
+    direction: T,
+    getTabElementBySelectedValue: O,
+    getTabIdByPanelValue: B,
+    getTabPanelIdByValue: S,
+    onValueChange: E,
     orientation: a,
     registerMountedTabPanel: p,
-    setTabMap: P,
-    unregisterMountedTabPanel: A,
-    tabActivationDirection: D,
+    setTabMap: w,
+    unregisterMountedTabPanel: I,
+    tabActivationDirection: P,
     value: d
-  }), [h, w, O, V, M, a, p, P, A, D, d]), S = n.useMemo(() => {
+  }), [T, O, B, S, E, a, p, w, I, P, d]), A = n.useMemo(() => {
     for (const s of i.values())
       if (s != null && s.value === d)
         return s;
@@ -100,23 +100,23 @@ const W = {
   F(() => {
     if (N || i.size === 0)
       return;
-    const s = S?.disabled, m = S == null && d !== null;
-    if (E && s && d === e || !s && !m)
+    const s = A?.disabled, m = A == null && d !== null;
+    if (C && s && d === e || !s && !m)
       return;
-    const C = L ?? null;
-    d !== C && (T(C), I("none"));
-  }, [e, L, E, N, S, I, T, i, d]);
+    const x = L ?? null;
+    d !== x && (h(x), D("none"));
+  }, [e, L, C, N, A, D, h, i, d]);
   const H = $("div", o, {
     state: {
       orientation: a,
-      tabActivationDirection: D
+      tabActivationDirection: P
     },
     ref: u,
     props: v,
     stateAttributesMapping: W
   });
   return /* @__PURE__ */ g(K.Provider, {
-    value: y,
+    value: V,
     children: /* @__PURE__ */ g(bt, {
       elementsRef: R,
       children: H
@@ -126,7 +126,7 @@ const W = {
 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() {
+function Et() {
   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));
@@ -142,70 +142,70 @@ const ot = /* @__PURE__ */ n.forwardRef(function(o, u) {
     nativeButton: b = !0,
     ...v
   } = o, {
-    value: h,
-    getTabPanelIdByValue: E,
+    value: T,
+    getTabPanelIdByValue: C,
     orientation: R
   } = Y(), {
-    activateOnFocus: x,
+    activateOnFocus: M,
     highlightedTabIndex: l,
     onTabActivation: d,
-    setHighlightedTabIndex: T,
+    setHighlightedTabIndex: h,
     tabsListElement: N
-  } = Mt(), i = et(_), P = n.useMemo(() => ({
+  } = Et(), i = et(_), w = n.useMemo(() => ({
     disabled: e,
     id: i,
     value: a
   }), [e, i, a]), {
-    compositeProps: D,
-    compositeRef: I,
-    index: M
+    compositeProps: P,
+    compositeRef: D,
+    index: E
     // hook is used instead of the CompositeItem component
     // because the index is needed for Tab internals
   } = _t({
-    metadata: P
-  }), p = a === h, A = n.useRef(!1);
+    metadata: w
+  }), p = a === T, I = n.useRef(!1);
   F(() => {
-    if (A.current) {
-      A.current = !1;
+    if (I.current) {
+      I.current = !1;
       return;
     }
-    if (!(p && M > -1 && l !== M))
+    if (!(p && E > -1 && l !== E))
       return;
     const r = N;
     if (r != null) {
-      const C = Tt(J(r));
-      if (C && Ct(r, C))
+      const x = ht(J(r));
+      if (x && xt(r, x))
         return;
     }
-    e || T(M);
-  }, [p, M, l, T, e, N]);
+    e || h(E);
+  }, [p, E, l, h, e, N]);
   const {
-    getButtonProps: V,
-    buttonRef: O
-  } = ht({
+    getButtonProps: S,
+    buttonRef: B
+  } = Tt({
     disabled: e,
     native: b,
     focusableWhenDisabled: !0
-  }), w = E(a), y = n.useRef(!1), S = n.useRef(!1);
+  }), O = C(a), V = n.useRef(!1), A = 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 && T(M), !e && x && (!y.current || // keyboard or touch focus
-    y.current && S.current) && d(a, Q(X, r.nativeEvent, void 0, {
+    p || (E > -1 && !e && h(E), !e && M && (!V.current || // keyboard or touch focus
+    V.current && A.current) && d(a, Q(X, r.nativeEvent, void 0, {
       activationDirection: "none"
     })));
   }
   function H(r) {
     if (p || e)
       return;
-    y.current = !0;
-    function C() {
-      y.current = !1, S.current = !1;
+    V.current = !0;
+    function x() {
+      V.current = !1, A.current = !1;
     }
-    (!r.button || r.button === 0) && (S.current = !0, J(r.currentTarget).addEventListener("pointerup", C, {
+    (!r.button || r.button === 0) && (A.current = !0, J(r.currentTarget).addEventListener("pointerup", x, {
       once: !0
     }));
   }
@@ -216,10 +216,10 @@ const ot = /* @__PURE__ */ n.forwardRef(function(o, u) {
   }), [e, p, R]);
   return $("button", o, {
     state: s,
-    ref: [u, O, I],
-    props: [D, {
+    ref: [u, B, D],
+    props: [P, {
       role: "tab",
-      "aria-controls": w,
+      "aria-controls": O,
       "aria-selected": p,
       id: i,
       onClick: L,
@@ -227,13 +227,13 @@ const ot = /* @__PURE__ */ n.forwardRef(function(o, u) {
       onPointerDown: H,
       [gt]: p ? "" : void 0,
       onKeyDownCapture() {
-        A.current = !0;
+        I.current = !0;
       }
-    }, v, V]
+    }, v, S]
   });
 });
 process.env.NODE_ENV !== "production" && (ot.displayName = "TabsTab");
-let xt = /* @__PURE__ */ (function(t) {
+let Mt = /* @__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) {
@@ -246,41 +246,41 @@ const at = /* @__PURE__ */ n.forwardRef(function(o, u) {
   } = o, {
     value: b,
     getTabIdByPanelValue: v,
-    orientation: h,
-    tabActivationDirection: E,
+    orientation: T,
+    tabActivationDirection: C,
     registerMountedTabPanel: R,
-    unregisterMountedTabPanel: x
+    unregisterMountedTabPanel: M
   } = Y(), l = et(), d = n.useMemo(() => ({
     id: l,
     value: e
   }), [l, e]), {
-    ref: T,
+    ref: h,
     index: N
   } = pt({
     metadata: d
-  }), i = e !== b, P = v(e), D = n.useMemo(() => ({
+  }), i = e !== b, w = v(e), P = n.useMemo(() => ({
     hidden: i,
-    orientation: h,
-    tabActivationDirection: E
-  }), [i, h, E]), I = $("div", o, {
-    state: D,
-    ref: [u, T],
+    orientation: T,
+    tabActivationDirection: C
+  }), [i, T, C]), D = $("div", o, {
+    state: P,
+    ref: [u, h],
     props: [{
-      "aria-labelledby": P,
+      "aria-labelledby": w,
       hidden: i,
       id: l ?? void 0,
       role: "tabpanel",
       tabIndex: i ? -1 : 0,
-      [xt.index]: N
+      [Mt.index]: N
     }, _],
     stateAttributesMapping: W
   });
   return F(() => {
     if (!(i && !a) && l != null)
       return R(e, l), () => {
-        x(e, l);
+        M(e, l);
       };
-  }, [i, a, e, l, R, x]), !i || a ? I : null;
+  }, [i, a, e, l, R, M]), !i || a ? D : null;
 });
 process.env.NODE_ENV !== "production" && (at.displayName = "TabsPanel");
 const st = /* @__PURE__ */ n.forwardRef(function(o, u) {
@@ -293,48 +293,48 @@ const st = /* @__PURE__ */ n.forwardRef(function(o, u) {
   } = o, {
     getTabElementBySelectedValue: b,
     onValueChange: v,
-    orientation: h,
-    value: E,
+    orientation: T,
+    value: C,
     setTabMap: R,
-    tabActivationDirection: x
-  } = Y(), [l, d] = n.useState(0), [T, N] = n.useState(null), i = Rt(
-    E,
+    tabActivationDirection: M
+  } = Y(), [l, d] = n.useState(0), [h, N] = n.useState(null), i = Rt(
+    C,
     // the old value
-    h,
     T,
+    h,
     b
-  ), P = k((p, A) => {
-    if (p !== E) {
-      const V = i(p);
-      A.activationDirection = V, v(p, A);
+  ), w = z((p, I) => {
+    if (p !== C) {
+      const S = i(p);
+      I.activationDirection = S, v(p, I);
     }
-  }), D = n.useMemo(() => ({
-    orientation: h,
-    tabActivationDirection: x
-  }), [h, x]), I = {
-    "aria-orientation": h === "vertical" ? "vertical" : void 0,
+  }), P = n.useMemo(() => ({
+    orientation: T,
+    tabActivationDirection: M
+  }), [T, M]), D = {
+    "aria-orientation": T === "vertical" ? "vertical" : void 0,
     role: "tablist"
-  }, M = n.useMemo(() => ({
+  }, E = n.useMemo(() => ({
     activateOnFocus: f,
     highlightedTabIndex: l,
-    onTabActivation: P,
+    onTabActivation: w,
     setHighlightedTabIndex: d,
-    tabsListElement: T,
-    value: E
-  }), [f, l, P, d, T, E]);
+    tabsListElement: h,
+    value: C
+  }), [f, l, w, d, h, C]);
   return /* @__PURE__ */ g(q.Provider, {
-    value: M,
+    value: E,
     children: /* @__PURE__ */ g(vt, {
       render: a,
       className: e,
-      state: D,
+      state: P,
       refs: [u, N],
-      props: [I, _],
+      props: [D, _],
       stateAttributesMapping: W,
       highlightedIndex: l,
       enableHomeAndEndKeys: !0,
       loopFocus: c,
-      orientation: h,
+      orientation: T,
       onHighlightedIndexChange: d,
       onMapChange: R,
       disabledIndices: ft
@@ -402,17 +402,17 @@ function Rt(t, o, u, f) {
     return "none";
   }, [f, o, e, u, t]);
 }
-const Nt = "_tabs_ndch5_6", Pt = "_tabs__list_ndch5_10", Dt = "_tabs_variant_default_ndch5_17", It = "_tabs__separator_ndch5_22", At = "_tabs__trigger_ndch5_26", St = "_tabs_variant_progress_ndch5_48", B = {
+const Nt = "_tabs_xww4z_6", wt = "_tabs__list_xww4z_10", Pt = "_tabs_variant_default_xww4z_17", Dt = "_tabs__separator_xww4z_22", It = "_tabs__trigger_xww4z_26", At = "_tabs_variant_progress_xww4z_48", y = {
   tabs: Nt,
-  tabs__list: Pt,
-  tabs_variant_default: Dt,
-  tabs__separator: It,
-  tabs__trigger: At,
-  tabs_variant_progress: St,
-  "tabs__trigger-complete": "_tabs__trigger-complete_ndch5_72",
-  "tabs_variant_button-group": "_tabs_variant_button-group_ndch5_84"
-}, Vt = /* @__PURE__ */ new Set(["default", "progress"]);
-function yt({
+  tabs__list: wt,
+  tabs_variant_default: Pt,
+  tabs__separator: Dt,
+  tabs__trigger: It,
+  tabs_variant_progress: At,
+  "tabs__trigger-complete": "_tabs__trigger-complete_xww4z_72",
+  "tabs_variant_button-group": "_tabs_variant_button-group_xww4z_84"
+}, St = /* @__PURE__ */ new Set(["default", "progress"]);
+function Vt({
   variant: t = "default",
   disabled: o = !1,
   tabs: u,
@@ -426,19 +426,19 @@ function yt({
       render: /* @__PURE__ */ g(
         nt,
         {
-          className: z(
-            B.tabs,
-            B[`tabs_variant_${t}`],
+          className: k(
+            y.tabs,
+            y[`tabs_variant_${t}`],
             f
           ),
           ...c
         }
       ),
       children: [
-        /* @__PURE__ */ g(Ot, { children: u.map((a, _) => /* @__PURE__ */ j(rt, { children: [
-          /* @__PURE__ */ g(Bt, { disabled: o, ...a }),
-          _ + 1 < u.length && Vt.has(t) ? /* @__PURE__ */ g(
-            wt,
+        /* @__PURE__ */ g(Bt, { children: u.map((a, _) => /* @__PURE__ */ j(rt, { children: [
+          /* @__PURE__ */ g(yt, { disabled: o, ...a }),
+          _ + 1 < u.length && St.has(t) ? /* @__PURE__ */ g(
+            Ot,
             {
               orientation: t === "progress" ? "horizontal" : "vertical"
             }
@@ -449,7 +449,7 @@ function yt({
     }
   );
 }
-function Bt({
+function yt({
   value: t,
   className: o,
   complete: u,
@@ -460,7 +460,7 @@ function Bt({
     ut,
     {
       interactive: "list-item",
-      className: z(B.tabs__trigger, o),
+      className: k(y.tabs__trigger, o),
       render: /* @__PURE__ */ g(ot, { value: t }),
       ...e,
       children: [
@@ -469,7 +469,7 @@ function Bt({
           {
             color: it.positiveDefault,
             name: "check-line",
-            className: B["tabs__trigger-complete"]
+            className: y["tabs__trigger-complete"]
           }
         ) : null,
         f
@@ -477,25 +477,25 @@ function Bt({
     }
   );
 }
-function Ot({ className: t, ...o }) {
+function Bt({ className: t, ...o }) {
   return /* @__PURE__ */ g(
     U,
     {
       render: /* @__PURE__ */ g(
         st,
         {
-          className: z(B.tabs__list, t),
+          className: k(y.tabs__list, t),
           ...o
         }
       )
     }
   );
 }
-function wt({ className: t, ...o }) {
+function Ot({ className: t, ...o }) {
   return /* @__PURE__ */ g(
     lt,
     {
-      className: z(B.tabs__separator, t),
+      className: k(y.tabs__separator, t),
       ...o
     }
   );
@@ -503,7 +503,7 @@ function wt({ className: t, ...o }) {
 function Lt({ children: t, ...o }) {
   return /* @__PURE__ */ g(at, { ...o, children: /* @__PURE__ */ g(U, { children: t }) });
 }
-const re = Object.assign(yt, {
+const re = Object.assign(Vt, {
   Panel: Lt
 });
 export {

package/dist/components/text/text.js

@@ -1,20 +1,20 @@
 import { c as l } from "../../clsx-OuTLNxxd.js";
-import { s as r } from "../../view.module-Dj7wj0kk.js";
+import { s as r } from "../../view.module-DlwuNdUj.js";
 import { u as i } from "../../useRender-C3vlzS3t.js";
-import { m as c } from "../../useRenderElement-DngNDu_P.js";
-import '../../text.css';const n = "_text_9ru3m_2", u = "_text_color_inherit_9ru3m_26", a = "_text_color_default_9ru3m_30", z = "_text_color_dimmer_9ru3m_34", d = "_text_color_dimmest_9ru3m_38", p = "_text_size_sm_9ru3m_43", f = "_text_size_md_9ru3m_49", g = "_text_size_lg_9ru3m_55", h = "_text_size_xl_9ru3m_61", y = "_text_size_2xl_9ru3m_67", $ = "_text_size_3xl_9ru3m_73", t = {
-  text: n,
-  "text_clip-line": "_text_clip-line_9ru3m_9",
-  "text_clamp-lines": "_text_clamp-lines_9ru3m_16",
-  text_color_inherit: u,
-  text_color_default: a,
-  text_color_dimmer: z,
-  text_color_dimmest: d,
+import { m as n } from "../../useRenderElement-DngNDu_P.js";
+import '../../text.css';const m = "_text_6cryn_2", a = "_text_color_inherit_6cryn_26", z = "_text_color_default_6cryn_30", d = "_text_color_dimmer_6cryn_34", y = "_text_color_dimmest_6cryn_38", p = "_text_size_sm_6cryn_43", f = "_text_size_md_6cryn_49", u = "_text_size_lg_6cryn_55", g = "_text_size_xl_6cryn_61", h = "_text_size_2xl_6cryn_67", $ = "_text_size_3xl_6cryn_73", t = {
+  text: m,
+  "text_clip-line": "_text_clip-line_6cryn_9",
+  "text_clamp-lines": "_text_clamp-lines_6cryn_16",
+  text_color_inherit: a,
+  text_color_default: z,
+  text_color_dimmer: d,
+  text_color_dimmest: y,
   text_size_sm: p,
   text_size_md: f,
-  text_size_lg: g,
-  text_size_xl: h,
-  text_size_2xl: y,
+  text_size_lg: u,
+  text_size_xl: g,
+  text_size_2xl: h,
   text_size_3xl: $
 };
 function P({
@@ -23,12 +23,12 @@ function P({
   maxLines: _ = 1,
   multiline: e,
   render: o,
-  ...m
+  ...c
 }) {
   return i({
     defaultTagName: "span",
     render: o,
-    props: c(m, {
+    props: n(c, {
       className: l(
         r.view,
         t.text,