@koide-labs/ui 0.0.0 → 0.0.2

package/dist/components/checkbox/index.js

@@ -0,0 +1,269 @@
+import { jsxs as A, jsx as m } from "react/jsx-runtime";
+import { Icon as we } from "../icon/index.js";
+import { Text as Fe } from "../text/index.js";
+import { View as Te } from "../view/index.js";
+import * as r from "react";
+import { f as ee } from "../../formatErrorMessage-BqPuTBN-.js";
+import { N as qe, c as Ue, m as je, E as De, u as te } from "../../useRenderElement-DwToLA61.js";
+import { f as ne, c as He, a as Le, u as $e, b as ze } from "../../LabelableContext-BMvjVwor.js";
+import { a as Je, t as Ke } from "../../useOpenChangeComplete-Dse9kY9E.js";
+import { u as We } from "../../useTransitionStatus-CUfcuGAV.js";
+import { u as Xe } from "../../useControlled-Du4sJyMj.js";
+import { u as Ye } from "../../useStableCallback-CkTrVkNX.js";
+import { u as Y } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
+import { v as Qe } from "../../visuallyHidden-CpJ-mhai.js";
+import { u as Q } from "../../useBaseUiId-B7WyxtIE.js";
+import { u as Ze } from "../../useButton-DfIwsdb8.js";
+import { u as Ae } from "../../FieldItemContext-DAvk99to.js";
+import { c as et, n as tt } from "../../createBaseUIEventDetails-D8M2Yl-a.js";
+import { u as nt } from "../../useValueChanged-DL757-yD.js";
+import '../../index24.css';let Z = /* @__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;
+})({});
+function oe(e) {
+  return r.useMemo(() => ({
+    checked(n) {
+      return e.indeterminate ? {} : n ? {
+        [Z.checked]: ""
+      } : {
+        [Z.unchecked]: ""
+      };
+    },
+    ...ne
+  }), [e.indeterminate]);
+}
+const re = /* @__PURE__ */ r.createContext(void 0);
+process.env.NODE_ENV !== "production" && (re.displayName = "CheckboxGroupContext");
+function ot(e = !0) {
+  const n = r.useContext(re);
+  if (n === void 0 && !e)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: CheckboxGroupContext is missing. CheckboxGroup parts must be placed within <CheckboxGroup>." : ee(3));
+  return n;
+}
+const U = /* @__PURE__ */ r.createContext(void 0);
+process.env.NODE_ENV !== "production" && (U.displayName = "CheckboxRootContext");
+function rt() {
+  const e = r.useContext(U);
+  if (e === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: CheckboxRootContext is missing. Checkbox parts must be placed within <Checkbox.Root>." : ee(14));
+  return e;
+}
+const at = "data-parent", ae = /* @__PURE__ */ r.forwardRef(function(n, k) {
+  const {
+    checked: x,
+    className: se,
+    defaultChecked: O = !1,
+    disabled: B = !1,
+    id: s,
+    indeterminate: c = !1,
+    inputRef: _,
+    name: G,
+    onCheckedChange: E,
+    parent: i = !1,
+    readOnly: l = !1,
+    render: j,
+    required: f = !1,
+    uncheckedValue: N,
+    value: P,
+    nativeButton: ce = !1,
+    ...de
+  } = n, {
+    clearErrors: ue
+  } = He(), {
+    disabled: le,
+    name: fe,
+    setDirty: pe,
+    setFilled: S,
+    setFocused: D,
+    setTouched: me,
+    state: H,
+    validationMode: he,
+    validityData: Ce,
+    shouldValidateOnChange: ke,
+    validation: xe
+  } = Le(), be = Ae(), {
+    labelId: ge,
+    controlId: ve,
+    setControlId: V,
+    getDescriptionProps: L
+  } = $e(), t = ot(), b = t?.parent, y = b && t.allValues, p = le || be.disabled || t?.disabled || B, h = fe ?? G, a = P ?? h, $ = Q(), _e = Q();
+  let g = ve;
+  y ? g = i ? _e : `${b.id}-${a}` : s && (g = s);
+  let w = {};
+  y && (i ? w = t.parent.getParentProps() : a && (w = t.parent.getChildProps(a)));
+  const Ee = Ye(E), {
+    checked: z = x,
+    indeterminate: I = c,
+    onCheckedChange: Ne,
+    ...Pe
+  } = w, C = t?.value, J = t?.setValue, K = t?.defaultValue, F = r.useRef(null), {
+    getButtonProps: Ve,
+    buttonRef: ye
+  } = Ze({
+    disabled: p,
+    native: ce
+  }), d = t?.validation ?? xe, [o, Ie] = Xe({
+    controlled: a && C && !i ? C.includes(a) : z,
+    default: a && K && !i ? K.includes(a) : O,
+    name: "Checkbox",
+    state: "checked"
+  });
+  Y(() => {
+    if (V !== qe)
+      return V(g), () => {
+        V(void 0);
+      };
+  }, [g, t, V, i]), ze({
+    enabled: !t,
+    id: $,
+    commit: d.commit,
+    value: o,
+    controlRef: F,
+    name: h,
+    getValue: () => o
+  });
+  const v = r.useRef(null), Re = Ue(_, v, d.inputRef);
+  Y(() => {
+    v.current && (v.current.indeterminate = I, o && S(!0));
+  }, [o, I, S]), nt(o, () => {
+    t && !i || (ue(h), S(o), pe(o !== Ce.initialValue), ke() ? d.commit(o) : d.commit(o, !0));
+  });
+  const Me = je(
+    {
+      checked: o,
+      disabled: p,
+      // parent checkboxes unset `name` to be excluded from form submission
+      name: i ? void 0 : h,
+      // Set `id` to stop Chrome warning about an unassociated input
+      id: g ?? void 0,
+      required: f,
+      ref: Re,
+      style: Qe,
+      tabIndex: -1,
+      type: "checkbox",
+      "aria-hidden": !0,
+      onChange(u) {
+        if (u.nativeEvent.defaultPrevented)
+          return;
+        const R = u.target.checked, M = et(tt, u.nativeEvent);
+        if (Ne?.(R, M), Ee(R, M), !M.isCanceled && (Ie(R), a && C && J && !i)) {
+          const Ge = R ? [...C, a] : C.filter((Se) => Se !== a);
+          J(Ge, M);
+        }
+      },
+      onFocus() {
+        F.current?.focus();
+      }
+    },
+    // React <19 sets an empty value if `undefined` is passed explicitly
+    // To avoid this, we only set the value if it's defined
+    P !== void 0 ? {
+      value: (t ? o && P : P) || ""
+    } : De,
+    L,
+    t ? d.getValidationProps : d.getInputValidationProps
+  ), W = y ? !!z : o, X = y && I || c;
+  r.useEffect(() => {
+    b && a && b.disabledStatesRef.current.set(a, p);
+  }, [b, p, a]);
+  const T = r.useMemo(() => ({
+    ...H,
+    checked: W,
+    disabled: p,
+    readOnly: l,
+    required: f,
+    indeterminate: X
+  }), [H, W, p, l, f, X]), Oe = oe(T), Be = te("span", n, {
+    state: T,
+    ref: [ye, F, k, t?.registerControlRef],
+    props: [{
+      id: $,
+      role: "checkbox",
+      "aria-checked": I ? "mixed" : o,
+      "aria-readonly": l || void 0,
+      "aria-required": f || void 0,
+      "aria-labelledby": ge,
+      [at]: i ? "" : void 0,
+      onFocus() {
+        D(!0);
+      },
+      onBlur() {
+        const u = v.current;
+        u && (me(!0), D(!1), he === "onBlur" && d.commit(t ? C : u.checked));
+      },
+      onClick(u) {
+        l || p || (u.preventDefault(), v.current?.click());
+      }
+    }, L, d.getValidationProps, de, Pe, Ve],
+    stateAttributesMapping: Oe
+  });
+  return /* @__PURE__ */ A(U.Provider, {
+    value: T,
+    children: [Be, !o && !t && h && !i && N !== void 0 && /* @__PURE__ */ m("input", {
+      type: "hidden",
+      name: h,
+      value: N
+    }), /* @__PURE__ */ m("input", {
+      ...Me
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (ae.displayName = "CheckboxRoot");
+const ie = /* @__PURE__ */ r.forwardRef(function(n, k) {
+  const {
+    render: x,
+    className: se,
+    keepMounted: O = !1,
+    ...B
+  } = n, s = rt(), c = s.checked || s.indeterminate, {
+    transitionStatus: _,
+    setMounted: G
+  } = We(c), E = r.useRef(null), i = r.useMemo(() => ({
+    ...s,
+    transitionStatus: _
+  }), [s, _]);
+  Je({
+    open: c,
+    ref: E,
+    onComplete() {
+      c || G(!1);
+    }
+  });
+  const l = oe(s), j = r.useMemo(() => ({
+    ...l,
+    ...Ke,
+    ...ne
+  }), [l]), f = O || c, N = te("span", n, {
+    enabled: f,
+    ref: [k, E],
+    state: i,
+    stateAttributesMapping: j,
+    props: B
+  });
+  return f ? N : null;
+});
+process.env.NODE_ENV !== "production" && (ie.displayName = "CheckboxIndicator");
+const it = "_checkbox__label_4s2il_1", st = "_checkbox_4s2il_1", ct = "_checkbox__indicator_4s2il_29", q = {
+  checkbox__label: it,
+  checkbox: st,
+  checkbox__indicator: ct
+};
+function yt({ color: e, label: n, ...k }) {
+  const x = /* @__PURE__ */ m(
+    Te,
+    {
+      color: e,
+      interactive: "fill-outline",
+      render: /* @__PURE__ */ m(ae, { "aria-label": n, ...k }),
+      className: q.checkbox,
+      children: /* @__PURE__ */ m(ie, { className: q.checkbox__indicator, children: /* @__PURE__ */ m(we, { name: "check-line", size: "sm" }) })
+    }
+  );
+  return n ? /* @__PURE__ */ A("label", { className: q.checkbox__label, children: [
+    x,
+    /* @__PURE__ */ m(Fe, { children: n })
+  ] }) : x;
+}
+export {
+  yt as Checkbox
+};

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

@@ -0,0 +1,9 @@
+export interface CodeProps {
+    /** Use a specific language (you must import the themes you need) */
+    language?: string;
+    /** Optional file name or title */
+    title?: string;
+    className?: string;
+    children?: string;
+}
+export declare function Code({ language, children, title, className, }: CodeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/code/index.js

@@ -0,0 +1,10 @@
+import "react/jsx-runtime";
+import "../../clsx-OuTLNxxd.js";
+import { C as a } from "../../index-BX1XbbRk.js";
+import "react";
+import "../surface/index.js";
+import "../text/index.js";
+import "../view/index.js";
+export {
+  a as Code
+};

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

@@ -0,0 +1,11 @@
+import { useRender } from '@base-ui/react';
+import { ReactNode } from 'react';
+interface CollapseProps extends useRender.ComponentProps<"div"> {
+    /** Shrink or expand the div. Defaults to true. */
+    expand?: boolean;
+    children?: ReactNode;
+    /** Supplied as a dependency to recalculate the height of the children */
+    recalculate?: unknown;
+}
+export declare function Collapse({ expand, render, recalculate, ...props }: CollapseProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export {};

package/dist/components/collapse/index.js

@@ -0,0 +1,41 @@
+import { c as p } from "../../clsx-OuTLNxxd.js";
+import { useRef as d, useState as i, useLayoutEffect as m } from "react";
+import { u } from "../../useRender-CLx7dR_1.js";
+import { m as _ } from "../../useRenderElement-DwToLA61.js";
+import '../../index9.css';const f = "_collapse_ejmjl_1", h = "_collapse_expand_ejmjl_12", x = "_collapse_hidden_ejmjl_17", t = {
+  collapse: f,
+  collapse_expand: h,
+  collapse_hidden: x
+};
+function R({
+  expand: o = !0,
+  render: s,
+  recalculate: c,
+  ...a
+}) {
+  const l = d(null), [n, r] = i(0);
+  return m(() => {
+    if (!l.current)
+      return;
+    const e = l.current.cloneNode(!0);
+    e.removeAttribute("style"), e.style.width = `${l.current.offsetWidth}px`, e.className = t.collapse_hidden, document.body.appendChild(e), r(e.offsetHeight), e.remove();
+  }, [c]), u({
+    defaultTagName: "div",
+    render: s,
+    ref: l,
+    props: _(
+      {
+        "aria-hidden": !o,
+        className: p(
+          t.collapse,
+          o && t.collapse_expand
+        ),
+        style: { "--collapse-height": `${n}px` }
+      },
+      a
+    )
+  });
+}
+export {
+  R as Collapse
+};

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

@@ -0,0 +1,14 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import { ComponentProps } from 'react';
+import { BaseDialogProps } from '../dialog';
+import { IconName } from '../icon/icon-names';
+export type CommandDialogProps = Omit<BaseDialogProps, "title" | "description" | "background"> & {
+    placeholder?: string;
+};
+export declare function CommandDialog({ placeholder, children, ...props }: CommandDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function CommandGroup({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+export declare function CommandSeparator(props: ComponentProps<typeof CommandPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+export declare function CommandItem({ shortcut, icon, className, children, ...props }: ComponentProps<typeof CommandPrimitive.Item> & {
+    shortcut?: string;
+    icon?: IconName;
+}): import("react/jsx-runtime").JSX.Element;