@koide-labs/ui 0.0.0 → 0.0.2

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,12 @@
+import { Size } from '../../styles/tokens';
+import { IconName } from '../icon/icon-names';
+import { ViewProps } from '../view';
+export type IconButtonProps = ViewProps<"button"> & {
+    /** Icon to display. */
+    icon: IconName;
+    /** Explain what the button does. Required for accessibility. */
+    alt: string;
+    /** What size should the IconButton be. Defaults to "md". */
+    size?: Size;
+};
+export declare function IconButton({ icon, alt, size, render, ...props }: IconButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon-button/index.js

@@ -0,0 +1,45 @@
+import { jsx as t } from "react/jsx-runtime";
+import { c as s } from "../../clsx-OuTLNxxd.js";
+import "../../styles/tokens.js";
+import { Icon as u } from "../icon/index.js";
+import { View as b } from "../view/index.js";
+import { B as m } from "../../Button-DrPFFzo7.js";
+import '../../index11.css';const n = {
+  "icon-button": "_icon-button_1xtat_1",
+  "icon-button_size_sm": "_icon-button_size_sm_1xtat_11",
+  "icon-button_size_md": "_icon-button_size_md_1xtat_15",
+  "icon-button_size_lg": "_icon-button_size_lg_1xtat_19",
+  "icon-button_size_xl": "_icon-button_size_xl_1xtat_23",
+  "icon-button_size_2xl": "_icon-button_size_2xl_1xtat_27",
+  "icon-button_size_3xl": "_icon-button_size_3xl_1xtat_31"
+};
+function f({
+  icon: i,
+  alt: e,
+  size: o = "md",
+  render: c,
+  ..._
+}) {
+  return /* @__PURE__ */ t(
+    b,
+    {
+      interactive: !0,
+      render: /* @__PURE__ */ t(
+        m,
+        {
+          className: s(
+            n["icon-button"],
+            n[`icon-button_size_${o}`]
+          ),
+          focusableWhenDisabled: !!_.loading,
+          render: c
+        }
+      ),
+      ..._,
+      children: /* @__PURE__ */ t(u, { name: i, size: o, alt: e })
+    }
+  );
+}
+export {
+  f as IconButton
+};

package/dist/components/inline-code/index.d.ts

@@ -0,0 +1,6 @@
+import { useRender } from '@base-ui/react';
+import { Color } from '../view';
+export interface InlineCodeProps extends useRender.ComponentProps<"span"> {
+    color?: Color;
+}
+export declare const InlineCode: ({ color, ...props }: InlineCodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inline-code/index.js

@@ -0,0 +1,22 @@
+import { jsx as e } from "react/jsx-runtime";
+import { c as r } from "../../clsx-OuTLNxxd.js";
+import { Surface as c } from "../surface/index.js";
+import { Text as l } from "../text/index.js";
+import '../../index12.css';const i = {
+  "inline-code": "_inline-code_ai49m_1",
+  "inline-code_colorway": "_inline-code_colorway_ai49m_11"
+}, a = ({ color: o, ...n }) => /* @__PURE__ */ e(
+  c,
+  {
+    elevated: !0,
+    className: r(
+      i["inline-code"],
+      o && i["inline-code_colorway"]
+    ),
+    color: o,
+    children: /* @__PURE__ */ e(l, { size: "sm", color: "inherit", children: /* @__PURE__ */ e("code", { ...n }) })
+  }
+);
+export {
+  a as InlineCode
+};

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

@@ -0,0 +1,3 @@
+import { Input as InputPrimitive } from '@base-ui/react/input';
+export type InputProps = InputPrimitive.Props;
+export declare function Input({ className, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/input/index.js

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

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

@@ -0,0 +1,18 @@
+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;

package/dist/components/meter/index.js

@@ -0,0 +1,165 @@
+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 '../../index25.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 }) })
+      ]
+    }
+  ) });
+}
+export {
+  re as Meter
+};

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

@@ -0,0 +1,6 @@
+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;

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

@@ -0,0 +1,100 @@
+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;
+}
+export {
+  q as MultilineInput
+};

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

@@ -0,0 +1,10 @@
+import { NumberField } from '@base-ui/react/number-field';
+export type NumberInputProps = NumberField.Root.Props & {
+    /** Optional label, includes scrub area */
+    label?: string;
+};
+export declare function NumberInput({ label, 
+/** Apply className to NumberField.Input */
+className, 
+/** Apply style to NumberField.Input */
+style, ...props }: NumberInputProps): import("react/jsx-runtime").JSX.Element;