@koide-labs/ui 0.0.15 → 0.1.1

package/dist/components/tabs/tabs.js

@@ -0,0 +1,511 @@
+import { jsx as g, jsxs as j } 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 { 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 { 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 $, 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";
+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-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 '../../tabs.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, h = mt(), E = Object.hasOwn(o, "defaultValue"), R = n.useRef([]), [x, l] = n.useState(() => /* @__PURE__ */ new Map()), [d, T] = 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) => {
+    l((r) => {
+      if (r.get(s) === m)
+        return r;
+      const C = new Map(r);
+      return C.set(s, m), C;
+    });
+  }), A = k((s, m) => {
+    l((r) => {
+      if (!r.has(s) || r.get(s) !== m)
+        return r;
+      const C = new Map(r);
+      return C.delete(s), C;
+    });
+  }), V = n.useCallback((s) => x.get(s), [x]), O = n.useCallback((s) => {
+    for (const m of i.values())
+      if (s === m?.value)
+        return m?.id;
+  }, [i]), w = 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,
+    orientation: a,
+    registerMountedTabPanel: p,
+    setTabMap: P,
+    unregisterMountedTabPanel: A,
+    tabActivationDirection: D,
+    value: d
+  }), [h, w, O, V, M, a, p, P, A, D, d]), S = 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 = S?.disabled, m = S == null && d !== null;
+    if (E && 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 H = $("div", o, {
+    state: {
+      orientation: a,
+      tabActivationDirection: D
+    },
+    ref: u,
+    props: v,
+    stateAttributesMapping: W
+  });
+  return /* @__PURE__ */ g(K.Provider, {
+    value: y,
+    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: h,
+    getTabPanelIdByValue: E,
+    orientation: R
+  } = Y(), {
+    activateOnFocus: x,
+    highlightedTabIndex: l,
+    onTabActivation: d,
+    setHighlightedTabIndex: T,
+    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 === h, A = n.useRef(!1);
+  F(() => {
+    if (A.current) {
+      A.current = !1;
+      return;
+    }
+    if (!(p && M > -1 && l !== M))
+      return;
+    const r = N;
+    if (r != null) {
+      const C = Tt(J(r));
+      if (C && Ct(r, C))
+        return;
+    }
+    e || T(M);
+  }, [p, M, l, T, e, N]);
+  const {
+    getButtonProps: V,
+    buttonRef: O
+  } = ht({
+    disabled: e,
+    native: b,
+    focusableWhenDisabled: !0
+  }), w = E(a), y = n.useRef(!1), S = 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, {
+      activationDirection: "none"
+    })));
+  }
+  function H(r) {
+    if (p || e)
+      return;
+    y.current = !0;
+    function C() {
+      y.current = !1, S.current = !1;
+    }
+    (!r.button || r.button === 0) && (S.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, O, I],
+    props: [D, {
+      role: "tab",
+      "aria-controls": w,
+      "aria-selected": p,
+      id: i,
+      onClick: L,
+      onFocus: G,
+      onPointerDown: H,
+      [gt]: p ? "" : void 0,
+      onKeyDownCapture() {
+        A.current = !0;
+      }
+    }, v, V]
+  });
+});
+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: h,
+    tabActivationDirection: E,
+    registerMountedTabPanel: R,
+    unregisterMountedTabPanel: x
+  } = Y(), l = et(), d = n.useMemo(() => ({
+    id: l,
+    value: e
+  }), [l, e]), {
+    ref: T,
+    index: N
+  } = pt({
+    metadata: d
+  }), i = e !== b, P = v(e), D = n.useMemo(() => ({
+    hidden: i,
+    orientation: h,
+    tabActivationDirection: E
+  }), [i, h, E]), I = $("div", o, {
+    state: D,
+    ref: [u, T],
+    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: h,
+    value: E,
+    setTabMap: R,
+    tabActivationDirection: x
+  } = Y(), [l, d] = n.useState(0), [T, N] = n.useState(null), i = Rt(
+    E,
+    // the old value
+    h,
+    T,
+    b
+  ), P = k((p, A) => {
+    if (p !== E) {
+      const V = i(p);
+      A.activationDirection = V, v(p, A);
+    }
+  }), D = n.useMemo(() => ({
+    orientation: h,
+    tabActivationDirection: x
+  }), [h, x]), I = {
+    "aria-orientation": h === "vertical" ? "vertical" : void 0,
+    role: "tablist"
+  }, M = n.useMemo(() => ({
+    activateOnFocus: f,
+    highlightedTabIndex: l,
+    onTabActivation: P,
+    setHighlightedTabIndex: d,
+    tabsListElement: T,
+    value: E
+  }), [f, l, P, d, T, 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: h,
+      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_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 = {
+  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({
+  variant: t = "default",
+  disabled: o = !1,
+  tabs: u,
+  className: f,
+  children: e,
+  ...c
+}) {
+  return /* @__PURE__ */ j(
+    U,
+    {
+      render: /* @__PURE__ */ g(
+        nt,
+        {
+          className: z(
+            B.tabs,
+            B[`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,
+            {
+              orientation: t === "progress" ? "horizontal" : "vertical"
+            }
+          ) : null
+        ] }, a.value)) }),
+        e
+      ]
+    }
+  );
+}
+function Bt({
+  value: t,
+  className: o,
+  complete: u,
+  children: f,
+  ...e
+}) {
+  return /* @__PURE__ */ j(
+    ut,
+    {
+      interactive: "list-item",
+      className: z(B.tabs__trigger, o),
+      render: /* @__PURE__ */ g(ot, { value: t }),
+      ...e,
+      children: [
+        u ? /* @__PURE__ */ g(
+          ct,
+          {
+            color: it.positiveDefault,
+            name: "check-line",
+            className: B["tabs__trigger-complete"]
+          }
+        ) : null,
+        f
+      ]
+    }
+  );
+}
+function Ot({ className: t, ...o }) {
+  return /* @__PURE__ */ g(
+    U,
+    {
+      render: /* @__PURE__ */ g(
+        st,
+        {
+          className: z(B.tabs__list, t),
+          ...o
+        }
+      )
+    }
+  );
+}
+function wt({ className: t, ...o }) {
+  return /* @__PURE__ */ g(
+    lt,
+    {
+      className: z(B.tabs__separator, t),
+      ...o
+    }
+  );
+}
+function Lt({ children: t, ...o }) {
+  return /* @__PURE__ */ g(at, { ...o, children: /* @__PURE__ */ g(U, { children: t }) });
+}
+const re = Object.assign(yt, {
+  Panel: Lt
+});
+export {
+  re as Tabs
+};

package/dist/components/text/index.d.ts

@@ -1,26 +1 @@
-import { useRender } from '@base-ui/react';
-import { Size } from '../../styles/tokens';
-type ColorVariants = "inherit" | "default" | "dimmer" | "dimmest";
-export interface TextProps extends Omit<useRender.ComponentProps<"span">, "color"> {
-    /**
-     * The color variant of the text.
-     * Defaults to "default".
-     */
-    color?: ColorVariants;
-    /**
-     * The size variant of the text.
-     * Defaults to "md".
-     */
-    size?: Size;
-    /**
-     * Maximum number of lines that should be displayed.
-     * Defaults to 1 (the minimum).
-     */
-    maxLines?: number;
-    /**
-     * A convenient shorthand that has the same effect as setting maxLines to Infinity
-     */
-    multiline?: boolean;
-}
-export declare function Text({ color, size, maxLines, multiline, render, ...props }: TextProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
-export {};
+export { Text } from './text';

package/dist/components/text/index.js

@@ -1,49 +1,5 @@
 "use client";
-import { c as i } from "../../clsx-OuTLNxxd.js";
-import { s as c } from "../../view.module-DfDLgJE0.js";
-import { u as m } from "../../useRender-CLx7dR_1.js";
-import { m as r } from "../../useRenderElement-DwToLA61.js";
-import '../../index18.css';const n = "_text_ghwl6_1", a = "_text_color_inherit_ghwl6_25", z = "_text_color_default_ghwl6_29", g = "_text_color_dimmer_ghwl6_33", h = "_text_color_dimmest_ghwl6_37", d = "_text_size_sm_ghwl6_42", p = "_text_size_md_ghwl6_48", w = "_text_size_lg_ghwl6_54", f = "_text_size_xl_ghwl6_60", u = "_text_size_2xl_ghwl6_66", y = "_text_size_3xl_ghwl6_72", t = {
-  text: n,
-  "text_clip-line": "_text_clip-line_ghwl6_8",
-  "text_clamp-lines": "_text_clamp-lines_ghwl6_15",
-  text_color_inherit: a,
-  text_color_default: z,
-  text_color_dimmer: g,
-  text_color_dimmest: h,
-  text_size_sm: d,
-  text_size_md: p,
-  text_size_lg: w,
-  text_size_xl: f,
-  text_size_2xl: u,
-  text_size_3xl: y
-};
-function P({
-  color: l = "default",
-  size: s = "md",
-  maxLines: _ = 1,
-  multiline: e,
-  render: x,
-  ...o
-}) {
-  return m({
-    defaultTagName: "span",
-    render: x,
-    props: r(o, {
-      className: i(
-        c.view,
-        t.text,
-        t[`text_color_${l}`],
-        t[`text_size_${s}`],
-        !e && t["text_clip-line"],
-        !e && _ > 1 && t["text_clamp-lines"]
-      ),
-      style: {
-        "--text-max-lines": Math.max(_, 1)
-      }
-    })
-  });
-}
+import { Text as o } from "./text.js";
 export {
-  P as Text
+  o as Text
 };

package/dist/components/text/text.d.ts

@@ -0,0 +1,29 @@
+import { useRender } from '@base-ui/react';
+import { Size } from '../../styles/tokens';
+type ColorVariants = "inherit" | "default" | "dimmer" | "dimmest";
+interface TextProps extends Omit<useRender.ComponentProps<"span">, "color"> {
+    /**
+     * The color variant of the text.
+     * Defaults to "default".
+     */
+    color?: ColorVariants;
+    /**
+     * The size variant of the text.
+     * Defaults to "md".
+     */
+    size?: Size;
+    /**
+     * Maximum number of lines that should be displayed.
+     * Defaults to 1 (the minimum).
+     */
+    maxLines?: number;
+    /**
+     * A convenient shorthand that has the same effect as setting maxLines to Infinity
+     */
+    multiline?: boolean;
+}
+declare function Text({ color, size, maxLines, multiline, render, ...props }: TextProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export { Text };
+export declare namespace Text {
+    type Props = TextProps;
+}

package/dist/components/text/text.js

@@ -0,0 +1,48 @@
+import { c as l } from "../../clsx-OuTLNxxd.js";
+import { s as r } from "../../view.module-Dj7wj0kk.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,
+  text_size_sm: p,
+  text_size_md: f,
+  text_size_lg: g,
+  text_size_xl: h,
+  text_size_2xl: y,
+  text_size_3xl: $
+};
+function P({
+  color: s = "default",
+  size: x = "md",
+  maxLines: _ = 1,
+  multiline: e,
+  render: o,
+  ...m
+}) {
+  return i({
+    defaultTagName: "span",
+    render: o,
+    props: c(m, {
+      className: l(
+        r.view,
+        t.text,
+        t[`text_color_${s}`],
+        t[`text_size_${x}`],
+        !e && t["text_clip-line"],
+        !e && _ > 1 && t["text_clamp-lines"]
+      ),
+      style: {
+        "--text-max-lines": Math.max(_, 1)
+      }
+    })
+  });
+}
+export {
+  P as Text
+};

package/dist/components/theme-provider/index.d.ts

@@ -1,2 +1,2 @@
-export { ThemeProvider, type ThemeProviderProps } from './theme-provider';
+export { ThemeProvider } from './theme-provider';
 export { useThemeContext } from './theme-context';

package/dist/components/theme-provider/theme-provider.d.ts

@@ -1,5 +1,5 @@
-import { ViewProps } from '../view';
-export type ThemeProviderProps = ViewProps & {
+import { View } from '../view';
+interface ThemeProviderProps extends View.Props {
     /** Override theme. */
     value?: string;
     /**
@@ -13,5 +13,9 @@ export type ThemeProviderProps = ViewProps & {
      * Defaults to true.
      */
     overrideBody?: boolean;
-};
-export declare function ThemeProvider({ value, defaultValue, overrideBody, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+}
+declare function ThemeProvider({ value, defaultValue, overrideBody, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export { ThemeProvider };
+export declare namespace ThemeProvider {
+    type Props = ThemeProviderProps;
+}