@koide-labs/ui 0.0.0 → 0.0.2

package/dist/components/tabs/index.js

@@ -0,0 +1,509 @@
+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-FMoPxlJ2.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 '../../index26.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 }) });
+}
+export {
+  ae as Tabs,
+  se as TabsPanel
+};

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

@@ -0,0 +1,26 @@
+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 {};

package/dist/components/text/index.js

@@ -0,0 +1,51 @@
+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 '../../index16.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(
+      {
+        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)
+        }
+      },
+      o
+    )
+  });
+}
+export {
+  P as Text
+};

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

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

package/dist/components/theme-provider/index.js

@@ -0,0 +1,6 @@
+import { ThemeProvider as r } from "./theme-provider.js";
+import { useThemeContext as t } from "./theme-context.js";
+export {
+  r as ThemeProvider,
+  t as useThemeContext
+};

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

@@ -0,0 +1,9 @@
+interface ThemeContextType {
+    /** Current theme  */
+    theme: string;
+    /** Set a new current theme */
+    setTheme: (theme: string) => void;
+}
+export declare const ThemeContext: import('react').Context<ThemeContextType>;
+export declare function useThemeContext(): ThemeContextType;
+export {};

package/dist/components/theme-provider/theme-context.js

@@ -0,0 +1,13 @@
+import { createContext as e, useContext as t } from "react";
+const o = e({
+  theme: "light",
+  setTheme: () => {
+  }
+});
+function m() {
+  return t(o);
+}
+export {
+  o as ThemeContext,
+  m as useThemeContext
+};

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

@@ -0,0 +1,17 @@
+import { ViewProps } from '../view';
+export type ThemeProviderProps = ViewProps & {
+    /** Override theme. */
+    value?: string;
+    /**
+     * Default theme if you don't want to manage it yourself.
+     * Defaults to user preferences and then light.
+     */
+    defaultValue?: string;
+    /**
+     * Override theme set on body.
+     * This prevents mismatched themes on overscroll.
+     * Defaults to true.
+     */
+    overrideBody?: boolean;
+};
+export declare function ThemeProvider({ value, defaultValue, overrideBody, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/theme-provider/theme-provider.js

@@ -0,0 +1,30 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useState as f, useEffect as s } from "react";
+import { View as a } from "../view/index.js";
+import { ThemeContext as u } from "./theme-context.js";
+function x({
+  value: e,
+  defaultValue: n,
+  overrideBody: r = !0,
+  ...i
+}) {
+  const m = e !== void 0, [c, d] = f(
+    () => n || l()
+  ), t = m ? e : c, h = d;
+  return s(() => {
+    r && (document.body.dataset.theme = t);
+  }, [t, r]), /* @__PURE__ */ o(u.Provider, { value: { theme: t, setTheme: h }, children: /* @__PURE__ */ o(a, { "data-theme": t, ...i }) });
+}
+function l() {
+  if (typeof window > "u")
+    return "light";
+  try {
+    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  } catch (e) {
+    console.error(e);
+  }
+  return "light";
+}
+export {
+  x as ThemeProvider
+};

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

@@ -0,0 +1,23 @@
+import { TextProps } from '../text';
+export declare const A_LONG_TIME_AGO_DATE: Date;
+export interface TimestampProps {
+    date: string | number | Date;
+    /**
+     * By default (`'relative'`), the timestamp will show a relative
+     * date and an absolute date on hover.
+     *
+     * Passing `'absolute'` will show the absolute date instead. During server
+     * side rendering, this option is not respected, it will use relative date/time
+     * instead to avoid hydration issues.
+     *
+     * This value can also be set to `'switch'` which will show the relative
+     * date but allow the user to switch to absolute by clicking on the component
+     * by clicking on the timestamp, all "switch" timestamps are synchronized
+     * with a global boolean.
+     */
+    dateFormat?: "relative" | "absolute" | "switch";
+    color?: TextProps["color"];
+    size?: TextProps["size"];
+    className?: string;
+}
+export declare const Timestamp: ({ date, dateFormat: initialDateFormat, color, size, className, }: TimestampProps) => import("react/jsx-runtime").JSX.Element;