@koide-labs/ui 0.0.0 → 0.0.2

package/dist/components/radio/index.js

@@ -0,0 +1,404 @@
+import { jsxs as re, jsx as p } from "react/jsx-runtime";
+import { c as ue } from "../../clsx-OuTLNxxd.js";
+import * as o from "react";
+import { createContext as Ee, useContext as Ne } from "react";
+import { Text as Ve } from "../text/index.js";
+import { View as Pe } from "../view/index.js";
+import { u as Ie } from "../../useControlled-Du4sJyMj.js";
+import { E as ce, b as de, u as ne, N as F, c as fe, m as ke } from "../../useRenderElement-DwToLA61.js";
+import { u as G } from "../../useStableCallback-CkTrVkNX.js";
+import { v as pe } from "../../visuallyHidden-CpJ-mhai.js";
+import { u as me } from "../../useBaseUiId-B7WyxtIE.js";
+import { S as Oe } from "../../composite-C9L5QmZL.js";
+import { u as Me, A as Fe, C as Te } from "../../CompositeRoot-CVk5a-pR.js";
+import { f as Ce, a as he, u as Re, c as we, b as Se } from "../../LabelableContext-BMvjVwor.js";
+import { f as ge } from "../../formatErrorMessage-BqPuTBN-.js";
+import { u as Ge } from "../../useValueChanged-DL757-yD.js";
+import { f as qe } from "../../element-CZEOj04G.js";
+import { t as De, a as Be } from "../../useOpenChangeComplete-Dse9kY9E.js";
+import { u as je } from "../../useTransitionStatus-CUfcuGAV.js";
+import { u as ze } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
+import { c as Ke, n as Le } from "../../createBaseUIEventDetails-D8M2Yl-a.js";
+import { u as Ue } from "../../FieldItemContext-DAvk99to.js";
+import { u as Ye } from "../../useLabelableId-Ci_jDvmv.js";
+import { u as He } from "../../useButton-DfIwsdb8.js";
+import '../../index27.css';function Je(e) {
+  const {
+    render: r,
+    className: u,
+    state: h = ce,
+    props: R = de,
+    refs: m = de,
+    metadata: n,
+    stateAttributesMapping: a,
+    tag: s = "div",
+    ...g
+  } = e, {
+    compositeProps: b,
+    compositeRef: _
+  } = Me({
+    metadata: n
+  });
+  return ne(s, e, {
+    state: h,
+    ref: [...m, _],
+    props: [b, ...R, g],
+    stateAttributesMapping: a
+  });
+}
+const ye = /* @__PURE__ */ o.createContext({
+  legendId: void 0,
+  setLegendId: () => {
+  },
+  disabled: void 0
+});
+process.env.NODE_ENV !== "production" && (ye.displayName = "FieldsetRootContext");
+function We(e = !1) {
+  const r = o.useContext(ye);
+  if (!r && !e)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: FieldsetRootContext is missing. Fieldset parts must be placed within <Fieldset.Root>." : ge(86));
+  return r;
+}
+let le = /* @__PURE__ */ (function(e) {
+  return e.checked = "data-checked", e.unchecked = "data-unchecked", e.disabled = "data-disabled", e.readonly = "data-readonly", e.required = "data-required", e.valid = "data-valid", e.invalid = "data-invalid", e.touched = "data-touched", e.dirty = "data-dirty", e.filled = "data-filled", e.focused = "data-focused", e;
+})({});
+const oe = {
+  checked(e) {
+    return e ? {
+      [le.checked]: ""
+    } : {
+      [le.unchecked]: ""
+    };
+  },
+  ...De,
+  ...Ce
+}, ae = /* @__PURE__ */ o.createContext({
+  disabled: void 0,
+  readOnly: void 0,
+  required: void 0,
+  name: void 0,
+  checkedValue: "",
+  setCheckedValue: F,
+  onValueChange: F,
+  touched: !1,
+  setTouched: F,
+  registerControlRef: F
+});
+process.env.NODE_ENV !== "production" && (ae.displayName = "RadioGroupContext");
+function $e() {
+  return o.useContext(ae);
+}
+const se = /* @__PURE__ */ o.createContext(void 0);
+process.env.NODE_ENV !== "production" && (se.displayName = "RadioRootContext");
+function Ae() {
+  const e = o.useContext(se);
+  if (e === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: RadioRootContext is missing. Radio parts must be placed within <Radio.Root>." : ge(52));
+  return e;
+}
+const be = /* @__PURE__ */ o.forwardRef(function(r, u) {
+  const {
+    render: h,
+    className: R,
+    disabled: m = !1,
+    readOnly: n = !1,
+    required: a = !1,
+    value: s,
+    inputRef: g,
+    nativeButton: b = !1,
+    id: _,
+    ...E
+  } = r, {
+    disabled: N,
+    readOnly: V,
+    required: q,
+    checkedValue: T,
+    setCheckedValue: w,
+    touched: H,
+    setTouched: J,
+    validation: W,
+    registerControlRef: P
+  } = $e(), {
+    setDirty: l,
+    validityData: D,
+    setTouched: B,
+    setFilled: I,
+    state: j,
+    disabled: $
+  } = he(), A = Ue(), {
+    labelId: y,
+    getDescriptionProps: v
+  } = Re(), i = $ || A.disabled || N || m, t = V || n, x = q || a, c = T === s, k = o.useRef(null), C = o.useRef(null), S = fe(g, C);
+  ze(() => {
+    C.current?.checked && I(!0);
+  }, [I]);
+  const z = me(), O = Ye({
+    id: _,
+    implicit: !1,
+    controlRef: k
+  }), Q = {
+    role: "radio",
+    "aria-checked": c,
+    "aria-required": x || void 0,
+    "aria-disabled": i || void 0,
+    "aria-readonly": t || void 0,
+    "aria-labelledby": y,
+    [Fe]: c ? "" : void 0,
+    id: z,
+    disabled: i,
+    onKeyDown(f) {
+      f.key === "Enter" && f.preventDefault();
+    },
+    onClick(f) {
+      f.defaultPrevented || i || t || (f.preventDefault(), C.current?.click());
+    },
+    onFocus(f) {
+      f.defaultPrevented || i || t || !H || (C.current?.click(), J(!1));
+    }
+  }, {
+    getButtonProps: X,
+    buttonRef: K
+  } = He({
+    disabled: i,
+    native: b
+  }), Z = o.useMemo(() => ({
+    type: "radio",
+    ref: S,
+    id: O,
+    tabIndex: -1,
+    style: pe,
+    "aria-hidden": !0,
+    disabled: i,
+    checked: c,
+    required: x,
+    readOnly: t,
+    onChange(f) {
+      if (f.nativeEvent.defaultPrevented || i || t || s === void 0)
+        return;
+      const ie = Ke(Le, f.nativeEvent);
+      ie.isCanceled || (B(!0), l(s !== D.initialValue), I(!0), w(s, ie));
+    },
+    onFocus() {
+      k.current?.focus();
+    }
+  }), [c, i, O, S, t, x, w, l, B, I, D.initialValue, s]), M = o.useMemo(() => ({
+    ...j,
+    required: x,
+    disabled: i,
+    readOnly: t,
+    checked: c
+  }), [j, i, t, c, x]), ee = o.useMemo(() => M, [M]), L = w !== F, U = [u, P, k, K], d = [Q, v, W?.getValidationProps ?? ce, E, X], Y = ne("span", r, {
+    enabled: !L,
+    state: M,
+    ref: U,
+    props: d,
+    stateAttributesMapping: oe
+  });
+  return /* @__PURE__ */ re(se.Provider, {
+    value: ee,
+    children: [L ? /* @__PURE__ */ p(Je, {
+      tag: "span",
+      render: h,
+      className: R,
+      state: M,
+      refs: U,
+      props: d,
+      stateAttributesMapping: oe
+    }) : Y, /* @__PURE__ */ p("input", {
+      ...Z
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (be.displayName = "RadioRoot");
+const _e = /* @__PURE__ */ o.forwardRef(function(r, u) {
+  const {
+    render: h,
+    className: R,
+    keepMounted: m = !1,
+    ...n
+  } = r, a = Ae(), s = a.checked, {
+    transitionStatus: g,
+    setMounted: b
+  } = je(s), _ = o.useMemo(() => ({
+    ...a,
+    transitionStatus: g
+  }), [a, g]), E = o.useRef(null), N = m || s, V = ne("span", r, {
+    enabled: N,
+    ref: [u, E],
+    state: _,
+    props: n,
+    stateAttributesMapping: oe
+  });
+  return Be({
+    open: s,
+    ref: E,
+    onComplete() {
+      s || b(!1);
+    }
+  }), N ? V : null;
+});
+process.env.NODE_ENV !== "production" && (_e.displayName = "RadioIndicator");
+const Qe = [Oe], ve = /* @__PURE__ */ o.forwardRef(function(r, u) {
+  const {
+    render: h,
+    className: R,
+    disabled: m,
+    readOnly: n,
+    required: a,
+    onValueChange: s,
+    value: g,
+    defaultValue: b,
+    name: _,
+    inputRef: E,
+    id: N,
+    ...V
+  } = r, {
+    setTouched: q,
+    setFocused: T,
+    shouldValidateOnChange: w,
+    validationMode: H,
+    name: J,
+    disabled: W,
+    state: P,
+    validation: l,
+    setDirty: D,
+    setFilled: B,
+    validityData: I
+  } = he(), {
+    labelId: j
+  } = Re(), {
+    clearErrors: $
+  } = we(), A = We(!0), y = W || m, v = J ?? _, i = me(N), [t, x] = Ie({
+    controlled: g,
+    default: b,
+    name: "RadioGroup",
+    state: "value"
+  }), c = G(s), k = G((d, Y) => {
+    c(d, Y), !Y.isCanceled && x(d);
+  }), C = o.useRef(null), S = G((d) => {
+    C.current == null && d != null && (C.current = d);
+  });
+  Se({
+    id: i,
+    commit: l.commit,
+    value: t,
+    controlRef: C,
+    name: v,
+    getValue: () => t ?? null
+  }), Ge(t, () => {
+    $(v), D(t !== I.initialValue), B(t != null), w() ? l.commit(t) : l.commit(t, !0);
+  });
+  const [z, O] = o.useState(!1), Q = G((d) => {
+    qe(d.currentTarget, d.relatedTarget) || (q(!0), T(!1), H === "onBlur" && l.commit(t));
+  }), X = G((d) => {
+    d.key.startsWith("Arrow") && (q(!0), O(!0), T(!0));
+  }), K = o.useMemo(() => t == null ? "" : typeof t == "string" ? t : JSON.stringify(t), [t]), Z = fe(l.inputRef, E), M = ke({
+    value: K,
+    ref: Z,
+    id: i,
+    name: K ? v : void 0,
+    disabled: y,
+    readOnly: n,
+    required: a,
+    "aria-labelledby": V["aria-labelledby"] ?? A?.legendId,
+    "aria-hidden": !0,
+    tabIndex: -1,
+    style: pe,
+    onChange: F,
+    // suppress a Next.js error
+    onFocus() {
+      C.current?.focus();
+    }
+  }, l.getInputValidationProps), ee = o.useMemo(() => ({
+    ...P,
+    disabled: y ?? !1,
+    required: a ?? !1,
+    readOnly: n ?? !1
+  }), [P, y, n, a]), L = o.useMemo(() => ({
+    ...P,
+    checkedValue: t,
+    disabled: y,
+    validation: l,
+    name: v,
+    onValueChange: c,
+    readOnly: n,
+    registerControlRef: S,
+    required: a,
+    setCheckedValue: k,
+    setTouched: O,
+    touched: z
+  }), [t, y, l, P, v, c, n, S, a, k, O, z]), U = {
+    role: "radiogroup",
+    "aria-required": a || void 0,
+    "aria-disabled": y || void 0,
+    "aria-readonly": n || void 0,
+    "aria-labelledby": j,
+    onFocus() {
+      T(!0);
+    },
+    onBlur: Q,
+    onKeyDownCapture: X
+  };
+  return /* @__PURE__ */ re(ae.Provider, {
+    value: L,
+    children: [/* @__PURE__ */ p(Te, {
+      render: h,
+      className: R,
+      state: ee,
+      props: [U, l.getValidationProps, V],
+      refs: [u],
+      stateAttributesMapping: Ce,
+      enableHomeAndEndKeys: !1,
+      modifierKeys: Qe
+    }), /* @__PURE__ */ p("input", {
+      ...M
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (ve.displayName = "RadioGroup");
+const Xe = {
+  "radio-group": "_radio-group_rje5l_1"
+}, Ze = "_radio_jgw1z_1", et = "_radio__indicator_jgw1z_8", tt = "_radio__label_jgw1z_31", te = {
+  radio: Ze,
+  radio__indicator: et,
+  radio__label: tt
+}, xe = Ee("primary");
+function Nt({
+  color: e = "primary",
+  className: r,
+  ...u
+}) {
+  return /* @__PURE__ */ p(xe.Provider, { value: e, children: /* @__PURE__ */ p(
+    ve,
+    {
+      className: ue(Xe["radio-group"], r),
+      ...u
+    }
+  ) });
+}
+function Vt({
+  color: e,
+  label: r,
+  className: u,
+  ...h
+}) {
+  const R = Ne(xe), m = e || R || "primary", n = /* @__PURE__ */ p(
+    Pe,
+    {
+      render: /* @__PURE__ */ p(be, { ...h }),
+      interactive: "fill-outline",
+      color: m,
+      className: ue(te.radio, u),
+      children: /* @__PURE__ */ p(_e, { className: te.radio__indicator })
+    }
+  );
+  return r ? /* @__PURE__ */ re("label", { className: te.radio__label, children: [
+    n,
+    " ",
+    /* @__PURE__ */ p(Ve, { children: r })
+  ] }) : n;
+}
+export {
+  Vt as Radio,
+  Nt as RadioGroup
+};

package/dist/components/search-bar/index.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface SearchBarProps extends React.ComponentPropsWithoutRef<"input"> {
+    /**
+     * Is the search bar loading or processing?
+     */
+    loading?: boolean;
+    /**
+     * Called when the input is cleared
+     */
+    onClear?: () => void;
+}
+export declare function SearchBar({ loading, onClear, className, ...props }: SearchBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/search-bar/index.js

@@ -0,0 +1,48 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { c as _ } from "../../clsx-OuTLNxxd.js";
+import "react";
+import { Icon as o } from "../icon/index.js";
+import { IconButton as m } from "../icon-button/index.js";
+import { Input as t } from "../input/index.js";
+import { Spinner as h } from "../spinner/index.js";
+import { View as s } from "../view/index.js";
+import '../../index4.css';const a = {
+  "search-bar": "_search-bar_1ulql_1",
+  "search-bar__input": "_search-bar__input_1ulql_6",
+  "search-bar__icon": "_search-bar__icon_1ulql_14",
+  "search-bar__icon_close": "_search-bar__icon_close_1ulql_26"
+};
+function I({
+  loading: e,
+  onClear: l,
+  className: i,
+  ...c
+}) {
+  return /* @__PURE__ */ n(s, { className: _(a["search-bar"], i), children: [
+    /* @__PURE__ */ r(t, { className: a["search-bar__input"], ...c }),
+    !e && !c.value ? /* @__PURE__ */ r(s, { className: a["search-bar__icon"], children: /* @__PURE__ */ r(o, { name: "search-line" }) }) : null,
+    e ? /* @__PURE__ */ r(h, { className: a["search-bar__icon"] }) : null,
+    !e && c.value ? /* @__PURE__ */ r(
+      s,
+      {
+        className: _(
+          a["search-bar__icon"],
+          a["search-bar__icon_close"]
+        ),
+        children: /* @__PURE__ */ r(
+          m,
+          {
+            icon: "close-line",
+            alt: "Clear",
+            size: "sm",
+            disabled: c.disabled,
+            onClick: l
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+export {
+  I as SearchBar
+};

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

@@ -0,0 +1,16 @@
+import { Select as SelectPrimitive } from '@base-ui/react/select';
+import { CSSProperties } from 'react';
+export declare function Select<Value>({ placeholder, className, style, ...props }: SelectPrimitive.Root.Props<Value, boolean> & {
+    /**
+     * Select placeholder if no value is chosen.
+     *
+     * Behaves differently depending on the type of select.
+     * For a normal select, we simply render an item with a value of null.
+     * For a `multiple` select, we replace the {@link https://base-ui.com/react/components/select#multiple-selection renderValue} function.
+     */
+    placeholder?: string;
+    /** Apply styles to SelectPrimitive.trigger */
+    className?: string;
+    /** Apply styles to SelectPrimitive.trigger */
+    style?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;