@koide-labs/ui 0.0.14 → 0.1.0

package/dist/components/input/input.js

@@ -0,0 +1,126 @@
+import { jsx as u, jsxs as S } from "react/jsx-runtime";
+import { c as U } from "../../clsx-OuTLNxxd.js";
+import * as c from "react";
+import { useId as A } from "react";
+import { s as I } from "../../input.module-CtE19OH8.js";
+import { View as K } from "../view/view.js";
+import { u as $ } from "../../useStableCallback-DKZHlUAT.js";
+import { u as q } from "../../useControlled-Du4sJyMj.js";
+import { u as z } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
+import { a as R, u as G, b as H, f as J } from "../../LabelableContext-Be1u-eFg.js";
+import { u as Q } from "../../useLabelableId-CX4tcfzK.js";
+import { u as W } from "../../useRenderElement-DngNDu_P.js";
+import { c as X, n as Y } from "../../createBaseUIEventDetails-CCSfZ2vM.js";
+import { Text as Z } from "../text/text.js";
+const y = /* @__PURE__ */ c.forwardRef(function(a, o) {
+  const {
+    render: m,
+    className: f,
+    id: l,
+    name: F,
+    value: n,
+    disabled: h = !1,
+    onValueChange: x,
+    defaultValue: p,
+    ...T
+  } = a, {
+    state: b,
+    name: D,
+    disabled: P
+  } = R(), d = P || h, v = D ?? F, w = c.useMemo(() => ({
+    ...b,
+    disabled: d
+  }), [b, d]), {
+    setTouched: C,
+    setDirty: M,
+    validityData: _,
+    setFocused: g,
+    setFilled: s,
+    validationMode: L,
+    validation: t
+  } = R(), {
+    labelId: j
+  } = G(), N = Q({
+    id: l
+  });
+  z(() => {
+    const e = n != null;
+    t.inputRef.current?.value || e && n !== "" ? s(!0) : e && n === "" && s(!1);
+  }, [t.inputRef, s, n]);
+  const [V, k] = q({
+    controlled: n,
+    default: p,
+    name: "FieldControl",
+    state: "value"
+  }), B = n !== void 0, O = $((e, r) => {
+    x?.(e, r), !r.isCanceled && k(e);
+  });
+  return H({
+    id: N,
+    name: v,
+    commit: t.commit,
+    value: V,
+    getValue: () => t.inputRef.current?.value,
+    controlRef: t.inputRef
+  }), W("input", a, {
+    ref: o,
+    state: w,
+    props: [{
+      id: N,
+      disabled: d,
+      name: v,
+      ref: t.inputRef,
+      "aria-labelledby": j,
+      ...B ? {
+        value: V
+      } : {
+        defaultValue: p
+      },
+      onChange(e) {
+        const r = e.currentTarget.value;
+        O(r, X(Y, e.nativeEvent)), M(r !== _.initialValue), s(r !== "");
+      },
+      onFocus() {
+        g(!0);
+      },
+      onBlur(e) {
+        C(!0), g(!1), L === "onBlur" && t.commit(e.currentTarget.value);
+      },
+      onKeyDown(e) {
+        e.currentTarget.tagName === "INPUT" && e.key === "Enter" && (C(!0), t.commit(e.currentTarget.value));
+      }
+    }, t.getInputValidationProps(), T],
+    stateAttributesMapping: J
+  });
+});
+process.env.NODE_ENV !== "production" && (y.displayName = "FieldControl");
+const E = /* @__PURE__ */ c.forwardRef(function(a, o) {
+  return /* @__PURE__ */ u(y, {
+    ref: o,
+    ...a
+  });
+});
+process.env.NODE_ENV !== "production" && (E.displayName = "Input");
+function pe({ label: i, className: a, ...o }) {
+  const m = A(), f = o.id || m, l = /* @__PURE__ */ u(
+    K,
+    {
+      interactive: "fill-outline",
+      render: /* @__PURE__ */ u(
+        E,
+        {
+          ...o,
+          className: U(I.input, a),
+          id: f
+        }
+      )
+    }
+  );
+  return i ? /* @__PURE__ */ S("label", { className: I.input__label, children: [
+    /* @__PURE__ */ u(Z, { color: "dimmer", children: i }),
+    l
+  ] }) : l;
+}
+export {
+  pe as Input
+};

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

@@ -1,18 +1 @@
-import { Meter as MeterPrimitive } from '@base-ui/react/meter';
-import { Color } from '../view';
-export type MeterProps = MeterPrimitive.Root.Props & {
-    /**
-     * What is this meter even for bro?
-     * If one is not provided, we render a standard meter (no label, no value).
-     * You can still provide one yourself through children.
-     * @example
-     * <Meter value={24}>
-     *    <MeterPrimitive.Label render={<Text />} />
-     *    <MeterPrimitive.Value render={<Text />} />
-     * </Meter>
-     */
-    label?: string;
-    /** Communicate purpose with color. Defaults to "primary". */
-    color?: Color;
-};
-export declare function Meter({ label, color, className, children, ...props }: MeterProps): import("react/jsx-runtime").JSX.Element;
+export { Meter } from './meter';

package/dist/components/meter/index.js

@@ -1,166 +1,5 @@
 "use client";
-import { jsx as m, jsxs as M, Fragment as g } from "react/jsx-runtime";
-import { c as j } from "../../clsx-OuTLNxxd.js";
-import { Text as h } from "../text/index.js";
-import { View as C } from "../view/index.js";
-import * as i from "react";
-import { f as L } from "../../formatErrorMessage-BqPuTBN-.js";
-import { f as x } from "../../formatNumber-1UNwjeqf.js";
-import { u } from "../../useRenderElement-DwToLA61.js";
-import { u as T } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
-import { u as P } from "../../useBaseUiId-B7WyxtIE.js";
-import { v as z } from "../../valueToPercent-DaP9qN4u.js";
-import '../../index26.css';const _ = /* @__PURE__ */ i.createContext(void 0);
-process.env.NODE_ENV !== "production" && (_.displayName = "MeterRootContext");
-function N() {
-  const t = i.useContext(_);
-  if (t === void 0)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: MeterRootContext is missing. Meter parts must be placed within <Meter.Root>." : L(38));
-  return t;
-}
-function B(t, e, r) {
-  return r ? x(t, e, r) : x(t / 100, e, {
-    style: "percent"
-  });
-}
-const E = /* @__PURE__ */ i.forwardRef(function(e, r) {
-  const {
-    format: c,
-    getAriaValueText: l,
-    locale: s,
-    max: n = 100,
-    min: a = 0,
-    value: o,
-    render: F,
-    className: W,
-    ...I
-  } = e, [b, v] = i.useState(), d = B(o, s, c);
-  let p = `${o}%`;
-  l ? p = l(d, o) : c && (p = d);
-  const k = {
-    "aria-labelledby": b,
-    "aria-valuemax": n,
-    "aria-valuemin": a,
-    "aria-valuenow": o,
-    "aria-valuetext": p,
-    role: "meter"
-  }, D = i.useMemo(() => ({
-    formattedValue: d,
-    max: n,
-    min: a,
-    setLabelId: v,
-    value: o
-  }), [d, n, a, v, o]), O = u("div", e, {
-    ref: r,
-    props: [k, I]
-  });
-  return /* @__PURE__ */ m(_.Provider, {
-    value: D,
-    children: O
-  });
-});
-process.env.NODE_ENV !== "production" && (E.displayName = "MeterRoot");
-const V = /* @__PURE__ */ i.forwardRef(function(e, r) {
-  const {
-    render: c,
-    className: l,
-    ...s
-  } = e;
-  return u("div", e, {
-    ref: r,
-    props: s
-  });
-});
-process.env.NODE_ENV !== "production" && (V.displayName = "MeterTrack");
-const R = /* @__PURE__ */ i.forwardRef(function(e, r) {
-  const {
-    render: c,
-    className: l,
-    ...s
-  } = e, n = N(), a = z(n.value, n.min, n.max);
-  return u("div", e, {
-    ref: r,
-    props: [{
-      style: {
-        insetInlineStart: 0,
-        height: "inherit",
-        width: `${a}%`
-      }
-    }, s]
-  });
-});
-process.env.NODE_ENV !== "production" && (R.displayName = "MeterIndicator");
-const y = /* @__PURE__ */ i.forwardRef(function(e, r) {
-  const {
-    className: c,
-    render: l,
-    children: s,
-    ...n
-  } = e, {
-    value: a,
-    formattedValue: o
-  } = N();
-  return u("span", e, {
-    ref: r,
-    props: [{
-      "aria-hidden": !0,
-      children: typeof s == "function" ? s(o, a) : (o || a) ?? ""
-    }, n]
-  });
-});
-process.env.NODE_ENV !== "production" && (y.displayName = "MeterValue");
-const w = /* @__PURE__ */ i.forwardRef(function(e, r) {
-  const {
-    render: c,
-    className: l,
-    id: s,
-    ...n
-  } = e, a = P(s), {
-    setLabelId: o
-  } = N();
-  return T(() => (o(a), () => o(void 0)), [a, o]), u("span", e, {
-    ref: r,
-    props: [{
-      id: a
-    }, n]
-  });
-});
-process.env.NODE_ENV !== "production" && (w.displayName = "MeterLabel");
-const S = "_meter_ejhiz_1", U = "_meter__value_ejhiz_7", $ = "_meter__track_ejhiz_13", A = "_meter__indicator_ejhiz_20", f = {
-  meter: S,
-  meter__value: U,
-  meter__track: $,
-  meter__indicator: A
-};
-function re({
-  label: t,
-  color: e = "primary",
-  className: r,
-  children: c,
-  ...l
-}) {
-  return /* @__PURE__ */ m(C, { color: e, children: /* @__PURE__ */ M(
-    E,
-    {
-      className: j(f.meter, r),
-      ...l,
-      children: [
-        t ? /* @__PURE__ */ M(g, { children: [
-          /* @__PURE__ */ m(h, { render: /* @__PURE__ */ m(w, {}), children: t }),
-          /* @__PURE__ */ m(
-            h,
-            {
-              className: f.meter__value,
-              render: /* @__PURE__ */ m(y, {})
-            }
-          )
-        ] }) : null,
-        c,
-        /* @__PURE__ */ m(V, { className: f.meter__track, children: /* @__PURE__ */ m(R, { className: f.meter__indicator }) })
-      ]
-    }
-  ) });
-}
+import { Meter as t } from "./meter.js";
 export {
-  re as Meter
+  t as Meter
 };

package/dist/components/meter/meter.d.ts

@@ -0,0 +1,22 @@
+import { Meter as MeterPrimitive } from '@base-ui/react/meter';
+import { Color } from '../view';
+interface MeterProps extends MeterPrimitive.Root.Props {
+    /**
+     * What is this meter even for bro?
+     * If one is not provided, we render a standard meter (no label, no value).
+     * You can still provide one yourself through children.
+     * @example
+     * <Meter value={24}>
+     *    <MeterPrimitive.Label render={<Text />} />
+     *    <MeterPrimitive.Value render={<Text />} />
+     * </Meter>
+     */
+    label?: string;
+    /** Communicate purpose with color. Defaults to "primary". */
+    color?: Color;
+}
+declare function Meter({ label, color, className, children, ...props }: MeterProps): import("react/jsx-runtime").JSX.Element;
+export { Meter };
+export declare namespace Meter {
+    type Props = MeterProps;
+}

package/dist/components/meter/meter.js

@@ -0,0 +1,165 @@
+import { jsx as m, jsxs as x, Fragment as g } from "react/jsx-runtime";
+import { c as C } from "../../clsx-OuTLNxxd.js";
+import { View as L } from "../view/view.js";
+import { Text as M } from "../text/text.js";
+import * as i from "react";
+import { f as T } from "../../formatErrorMessage-BqPuTBN-.js";
+import { f as h } from "../../formatNumber-1UNwjeqf.js";
+import { u } from "../../useRenderElement-DngNDu_P.js";
+import { u as P } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
+import { u as j } from "../../useBaseUiId-B7WyxtIE.js";
+import { v as B } from "../../valueToPercent-DaP9qN4u.js";
+import '../../meter.css';const _ = /* @__PURE__ */ i.createContext(void 0);
+process.env.NODE_ENV !== "production" && (_.displayName = "MeterRootContext");
+function N() {
+  const t = i.useContext(_);
+  if (t === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: MeterRootContext is missing. Meter parts must be placed within <Meter.Root>." : T(38));
+  return t;
+}
+function S(t, e, r) {
+  return r ? h(t, e, r) : h(t / 100, e, {
+    style: "percent"
+  });
+}
+const E = /* @__PURE__ */ i.forwardRef(function(e, r) {
+  const {
+    format: c,
+    getAriaValueText: l,
+    locale: s,
+    max: n = 100,
+    min: a = 0,
+    value: o,
+    render: W,
+    className: q,
+    ...I
+  } = e, [b, v] = i.useState(), d = S(o, s, c);
+  let p = `${o}%`;
+  l ? p = l(d, o) : c && (p = d);
+  const k = {
+    "aria-labelledby": b,
+    "aria-valuemax": n,
+    "aria-valuemin": a,
+    "aria-valuenow": o,
+    "aria-valuetext": p,
+    role: "meter"
+  }, D = i.useMemo(() => ({
+    formattedValue: d,
+    max: n,
+    min: a,
+    setLabelId: v,
+    value: o
+  }), [d, n, a, v, o]), O = u("div", e, {
+    ref: r,
+    props: [k, I]
+  });
+  return /* @__PURE__ */ m(_.Provider, {
+    value: D,
+    children: O
+  });
+});
+process.env.NODE_ENV !== "production" && (E.displayName = "MeterRoot");
+const V = /* @__PURE__ */ i.forwardRef(function(e, r) {
+  const {
+    render: c,
+    className: l,
+    ...s
+  } = e;
+  return u("div", e, {
+    ref: r,
+    props: s
+  });
+});
+process.env.NODE_ENV !== "production" && (V.displayName = "MeterTrack");
+const R = /* @__PURE__ */ i.forwardRef(function(e, r) {
+  const {
+    render: c,
+    className: l,
+    ...s
+  } = e, n = N(), a = B(n.value, n.min, n.max);
+  return u("div", e, {
+    ref: r,
+    props: [{
+      style: {
+        insetInlineStart: 0,
+        height: "inherit",
+        width: `${a}%`
+      }
+    }, s]
+  });
+});
+process.env.NODE_ENV !== "production" && (R.displayName = "MeterIndicator");
+const y = /* @__PURE__ */ i.forwardRef(function(e, r) {
+  const {
+    className: c,
+    render: l,
+    children: s,
+    ...n
+  } = e, {
+    value: a,
+    formattedValue: o
+  } = N();
+  return u("span", e, {
+    ref: r,
+    props: [{
+      "aria-hidden": !0,
+      children: typeof s == "function" ? s(o, a) : (o || a) ?? ""
+    }, n]
+  });
+});
+process.env.NODE_ENV !== "production" && (y.displayName = "MeterValue");
+const w = /* @__PURE__ */ i.forwardRef(function(e, r) {
+  const {
+    render: c,
+    className: l,
+    id: s,
+    ...n
+  } = e, a = j(s), {
+    setLabelId: o
+  } = N();
+  return P(() => (o(a), () => o(void 0)), [a, o]), u("span", e, {
+    ref: r,
+    props: [{
+      id: a
+    }, n]
+  });
+});
+process.env.NODE_ENV !== "production" && (w.displayName = "MeterLabel");
+const U = "_meter_1hxrp_2", $ = "_meter__value_1hxrp_8", A = "_meter__track_1hxrp_14", F = "_meter__indicator_1hxrp_21", f = {
+  meter: U,
+  meter__value: $,
+  meter__track: A,
+  meter__indicator: F
+};
+function re({
+  label: t,
+  color: e = "primary",
+  className: r,
+  children: c,
+  ...l
+}) {
+  return /* @__PURE__ */ m(L, { color: e, children: /* @__PURE__ */ x(
+    E,
+    {
+      className: C(f.meter, r),
+      ...l,
+      children: [
+        t ? /* @__PURE__ */ x(g, { children: [
+          /* @__PURE__ */ m(M, { render: /* @__PURE__ */ m(w, {}), children: t }),
+          /* @__PURE__ */ m(
+            M,
+            {
+              className: f.meter__value,
+              render: /* @__PURE__ */ m(y, {})
+            }
+          )
+        ] }) : null,
+        c,
+        /* @__PURE__ */ m(V, { className: f.meter__track, children: /* @__PURE__ */ m(R, { className: f.meter__indicator }) })
+      ]
+    }
+  ) });
+}
+export {
+  re as Meter
+};

package/dist/components/multiline-input/index.d.ts

@@ -1,6 +1 @@
-import { useRender } from '@base-ui/react';
-export interface MultilineInputProps extends useRender.ComponentProps<"textarea"> {
-    /** Automatically resize textarea. Defaults to false. */
-    autosize?: boolean;
-}
-export declare function MultilineInput({ autosize, className, ref, ...props }: MultilineInputProps): import("react/jsx-runtime").JSX.Element;
+export { MultilineInput } from './multiline-input';

package/dist/components/multiline-input/index.js

@@ -1,101 +1,5 @@
 "use client";
-import { jsx as T } from "react/jsx-runtime";
-import { c as R } from "../../clsx-OuTLNxxd.js";
-import { useRef as W, useEffect as Y } from "react";
-import { mergeRefs as B } from "../../-utils.js";
-import { View as X } from "../view/index.js";
-import { s as b } from "../../input.module-DDQY_Ij6.js";
-var c = /* @__PURE__ */ new Map();
-function j(t) {
-  var o = c.get(t);
-  o && o.destroy();
-}
-function k(t) {
-  var o = c.get(t);
-  o && o.update();
-}
-var f = null;
-typeof window > "u" ? ((f = function(t) {
-  return t;
-}).destroy = function(t) {
-  return t;
-}, f.update = function(t) {
-  return t;
-}) : ((f = function(t, o) {
-  return t && Array.prototype.forEach.call(t.length ? t : [t], function(i) {
-    return (function(e) {
-      if (e && e.nodeName && e.nodeName === "TEXTAREA" && !c.has(e)) {
-        var l, g = null, r = window.getComputedStyle(e), m = (l = e.value, function() {
-          v({ testForHeightReduction: l === "" || !e.value.startsWith(l), restoreTextAlign: null }), l = e.value;
-        }), p = (function(d) {
-          e.removeEventListener("autosize:destroy", p), e.removeEventListener("autosize:update", s), e.removeEventListener("input", m), window.removeEventListener("resize", s), Object.keys(d).forEach(function(a) {
-            return e.style[a] = d[a];
-          }), c.delete(e);
-        }).bind(e, { height: e.style.height, resize: e.style.resize, textAlign: e.style.textAlign, overflowY: e.style.overflowY, overflowX: e.style.overflowX, wordWrap: e.style.wordWrap });
-        e.addEventListener("autosize:destroy", p), e.addEventListener("autosize:update", s), e.addEventListener("input", m), window.addEventListener("resize", s), e.style.overflowX = "hidden", e.style.wordWrap = "break-word", c.set(e, { destroy: p, update: s }), s();
-      }
-      function v(d) {
-        var a, u, w = d.restoreTextAlign, h = w === void 0 ? null : w, x = d.testForHeightReduction, H = x === void 0 || x, N = r.overflowY;
-        if (e.scrollHeight !== 0 && (r.resize === "vertical" ? e.style.resize = "none" : r.resize === "both" && (e.style.resize = "horizontal"), H && (a = (function(n) {
-          for (var E = []; n && n.parentNode && n.parentNode instanceof Element; ) n.parentNode.scrollTop && E.push([n.parentNode, n.parentNode.scrollTop]), n = n.parentNode;
-          return function() {
-            return E.forEach(function(A) {
-              var y = A[0], L = A[1];
-              y.style.scrollBehavior = "auto", y.scrollTop = L, y.style.scrollBehavior = null;
-            });
-          };
-        })(e), e.style.height = ""), u = r.boxSizing === "content-box" ? e.scrollHeight - (parseFloat(r.paddingTop) + parseFloat(r.paddingBottom)) : e.scrollHeight + parseFloat(r.borderTopWidth) + parseFloat(r.borderBottomWidth), r.maxHeight !== "none" && u > parseFloat(r.maxHeight) ? (r.overflowY === "hidden" && (e.style.overflow = "scroll"), u = parseFloat(r.maxHeight)) : r.overflowY !== "hidden" && (e.style.overflow = "hidden"), e.style.height = u + "px", h && (e.style.textAlign = h), a && a(), g !== u && (e.dispatchEvent(new Event("autosize:resized", { bubbles: !0 })), g = u), N !== r.overflow && !h)) {
-          var z = r.textAlign;
-          r.overflow === "hidden" && (e.style.textAlign = z === "start" ? "end" : "start"), v({ restoreTextAlign: z, testForHeightReduction: !0 });
-        }
-      }
-      function s() {
-        v({ testForHeightReduction: !0, restoreTextAlign: null });
-      }
-    })(i);
-  }), t;
-}).destroy = function(t) {
-  return t && Array.prototype.forEach.call(t.length ? t : [t], j), t;
-}, f.update = function(t) {
-  return t && Array.prototype.forEach.call(t.length ? t : [t], k), t;
-});
-var F = f;
-function q({
-  autosize: t = !1,
-  className: o,
-  ref: i,
-  ...e
-}) {
-  const l = M(t);
-  return /* @__PURE__ */ T(
-    X,
-    {
-      interactive: "fill-outline",
-      render: /* @__PURE__ */ T(
-        "textarea",
-        {
-          className: R(
-            b.input,
-            t && b.input_autosize,
-            o
-          ),
-          ref: B(i, l),
-          ...e
-        }
-      )
-    }
-  );
-}
-function M(t) {
-  const o = W(null);
-  return Y(() => {
-    const i = o.current;
-    if (!(!i || !t))
-      return F(i), () => {
-        F.destroy(i);
-      };
-  }, [t]), o;
-}
+import { MultilineInput as i } from "./multiline-input.js";
 export {
-  q as MultilineInput
+  i as MultilineInput
 };

package/dist/components/multiline-input/multiline-input.d.ts

@@ -0,0 +1,10 @@
+import { useRender } from '@base-ui/react';
+interface MultilineInputProps extends useRender.ComponentProps<"textarea"> {
+    /** Automatically resize textarea. Defaults to false. */
+    autosize?: boolean;
+}
+declare function MultilineInput({ autosize, className, ref, ...props }: MultilineInputProps): import("react/jsx-runtime").JSX.Element;
+export { MultilineInput };
+export declare namespace MultilineInput {
+    type Props = MultilineInputProps;
+}