@koide-labs/ui 0.0.0 → 0.0.2

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

@@ -0,0 +1,2 @@
+import { ViewProps } from '../view';
+export declare function Spinner({ className, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/spinner/index.js

@@ -0,0 +1,13 @@
+import { jsx as n } from "react/jsx-runtime";
+import { c as o } from "../../clsx-OuTLNxxd.js";
+import { Icon as i } from "../icon/index.js";
+import { View as s } from "../view/index.js";
+import '../../index5.css';const p = "_spinner_98pyn_1", m = {
+  spinner: p
+};
+function f({ className: r, ...e }) {
+  return /* @__PURE__ */ n(s, { className: o(m.spinner, r), ...e, children: /* @__PURE__ */ n(i, { name: "loader-2-line" }) });
+}
+export {
+  f as Spinner
+};

package/dist/components/stacked-avatars/index.d.ts

@@ -0,0 +1,14 @@
+import { AvatarProps } from '../avatar';
+import { Color } from '../view';
+export interface StackedAvatarsProps {
+    /** User objects */
+    users: Array<AvatarProps & {
+        /** Ring color around the avatar */
+        color: Color;
+    }>;
+    /** The maximum number of user to display. Defaults to 3. */
+    visibleUsers?: number;
+    /** The size of the avatars. Defaults to "md". */
+    size?: AvatarProps["size"];
+}
+export declare function StackedAvatars({ users, visibleUsers, size, }: StackedAvatarsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/stacked-avatars/index.js

@@ -0,0 +1,92 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { c as v } from "../../clsx-OuTLNxxd.js";
+import { Avatar as o } from "../avatar/index.js";
+import { Text as k } from "../text/index.js";
+import { Tooltip as n } from "../tooltip/index.js";
+import { View as i } from "../view/index.js";
+import '../../index3.css';const a = {
+  "stacked-avatars": "_stacked-avatars_7icu0_1",
+  "stacked-avatars__avatar": "_stacked-avatars__avatar_7icu0_7",
+  "stacked-avatars__avatar_color": "_stacked-avatars__avatar_color_7icu0_12",
+  "stacked-avatars__visible": "_stacked-avatars__visible_7icu0_16",
+  "stacked-avatars__visible_size_sm": "_stacked-avatars__visible_size_sm_7icu0_34",
+  "stacked-avatars__visible_size_md": "_stacked-avatars__visible_size_md_7icu0_38",
+  "stacked-avatars__visible_size_lg": "_stacked-avatars__visible_size_lg_7icu0_42",
+  "stacked-avatars__visible_size_xl": "_stacked-avatars__visible_size_xl_7icu0_46",
+  "stacked-avatars__visible_size_2xl": "_stacked-avatars__visible_size_2xl_7icu0_50",
+  "stacked-avatars__visible_size_3xl": "_stacked-avatars__visible_size_3xl_7icu0_54",
+  "stacked-avatars__tooltip-content": "_stacked-avatars__tooltip-content_7icu0_59",
+  "stacked-avatars__tooltip-user": "_stacked-avatars__tooltip-user_7icu0_69",
+  "stacked-avatars__tooltip-text": "_stacked-avatars__tooltip-text_7icu0_77"
+};
+function f({
+  users: s,
+  visibleUsers: e = 3,
+  size: d = "md"
+}) {
+  return /* @__PURE__ */ t(
+    n,
+    {
+      className: a["stacked-avatars__tooltip-content"],
+      trigger: /* @__PURE__ */ l(i, { className: a["stacked-avatars"], children: [
+        s.slice(0, e).map(({ color: c, className: r, ..._ }, m) => /* @__PURE__ */ t(i, { color: c, children: /* @__PURE__ */ t(
+          o,
+          {
+            size: d,
+            className: v(
+              a["stacked-avatars__avatar"],
+              a["stacked-avatars__avatar_color"],
+              r
+            ),
+            style: { zIndex: m },
+            ..._
+          }
+        ) }, _.username)),
+        s.length > e && /* @__PURE__ */ t(
+          i,
+          {
+            className: v(
+              a["stacked-avatars__visible"],
+              a[`stacked-avatars__visible_size_${d}`]
+            ),
+            style: { zIndex: e + 1 },
+            children: /* @__PURE__ */ l(k, { size: "sm", children: [
+              "+",
+              s.length - e
+            ] })
+          }
+        )
+      ] }),
+      children: s.map(({ color: c, className: r, ..._ }) => /* @__PURE__ */ l(
+        i,
+        {
+          color: c,
+          className: a["stacked-avatars__tooltip-user"],
+          children: [
+            /* @__PURE__ */ t(
+              o,
+              {
+                className: v(a["stacked-avatars__avatar_color"], r),
+                ..._,
+                size: "sm"
+              },
+              _.username
+            ),
+            /* @__PURE__ */ t(
+              k,
+              {
+                color: "dimmer",
+                className: a["stacked-avatars__tooltip-text"],
+                children: _.username
+              }
+            )
+          ]
+        },
+        _.username
+      ))
+    }
+  );
+}
+export {
+  f as StackedAvatars
+};

package/dist/components/status-banner/index.d.ts

@@ -0,0 +1,17 @@
+import { useRender } from '@base-ui/react';
+import { Size } from '../../styles/tokens';
+import { IconName } from '../icon/icon-names';
+import { Color } from '../view';
+export interface StatusBannerProps extends Omit<useRender.ComponentProps<"div">, "children"> {
+    /** Communicate purpose with color */
+    color?: Color;
+    /** Icon on the left side  */
+    icon: IconName;
+    /** Optional title */
+    title?: string;
+    /** Actual content of the status banner */
+    description: string;
+    /** Size, defaults to lg */
+    size?: Extract<Size, "md" | "lg">;
+}
+export declare function StatusBanner({ color, icon, title, description, size, render, ...props }: StatusBannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/status-banner/index.js

@@ -0,0 +1,69 @@
+import { jsxs as _, jsx as s } from "react/jsx-runtime";
+import { c as m } from "../../clsx-OuTLNxxd.js";
+import { Heading as b } from "../heading/index.js";
+import { Icon as d } from "../icon/index.js";
+import { Text as g } from "../text/index.js";
+import { View as i } from "../view/index.js";
+import '../../index2.css';const t = {
+  "status-banner": "_status-banner_zygt6_1",
+  "status-banner_variant_neutral": "_status-banner_variant_neutral_zygt6_14",
+  "status-banner_variant_colorway": "_status-banner_variant_colorway_zygt6_20",
+  "status-banner_size_md": "_status-banner_size_md_zygt6_26",
+  "status-banner_size_lg": "_status-banner_size_lg_zygt6_32",
+  "status-banner__content": "_status-banner__content_zygt6_38",
+  "status-banner__description": "_status-banner__description_zygt6_44",
+  "status-banner__close": "_status-banner__close_zygt6_49"
+}, a = {
+  md: {
+    icon: "md",
+    title: "md",
+    description: "sm"
+  },
+  lg: {
+    icon: "xl",
+    title: "lg",
+    description: "md"
+  }
+};
+function x({
+  color: e,
+  icon: r,
+  title: o,
+  description: l,
+  size: n = "lg",
+  render: u,
+  ...c
+}) {
+  return /* @__PURE__ */ _(
+    i,
+    {
+      render: u,
+      ...c,
+      color: e,
+      className: m(
+        t["status-banner"],
+        t[`status-banner_size_${n}`],
+        e ? t["status-banner_variant_colorway"] : t["status-banner_variant_neutral"]
+      ),
+      children: [
+        r ? /* @__PURE__ */ s(d, { name: r, size: a[n].icon }) : null,
+        /* @__PURE__ */ _(i, { className: t["status-banner__content"], children: [
+          /* @__PURE__ */ s(b, { level: 1, size: a[n].title, color: "inherit", children: o }),
+          /* @__PURE__ */ s(
+            g,
+            {
+              className: t["status-banner__description"],
+              multiline: !0,
+              size: a[n].description,
+              color: "inherit",
+              children: l
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  x as StatusBanner
+};

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

@@ -0,0 +1,27 @@
+import { useRender } from '@base-ui/react';
+import { Color } from '../view';
+export interface SurfaceProps extends useRender.ComponentProps<"div"> {
+    /**
+     * Explicitly sets the background color of the surface.
+     * If this prop is set, the `elevated` prop will be ignored.
+     */
+    background?: Background;
+    /**
+     * If true, the surface will be elevated by one level from the current
+     * context. If false, the surface will be at the same level as before.
+     *
+     * If the `background` prop is set, this prop will be ignored.
+     */
+    elevated?: boolean;
+    /**
+     * Add CSS color variables.
+     */
+    color?: Color;
+}
+export declare const Surface: {
+    ({ background, elevated, className, ...props }: SurfaceProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const backgrounds: readonly ["root", "default", "higher", "highest"];
+export type Background = (typeof backgrounds)[number];
+export {};

package/dist/components/surface/index.js

@@ -0,0 +1,41 @@
+import { jsx as s } from "react/jsx-runtime";
+import { c as u } from "../../clsx-OuTLNxxd.js";
+import { createContext as i, useContext as l } from "react";
+import { View as h } from "../view/index.js";
+import '../../index15.css';const _ = "_surface_65s6k_1", a = {
+  surface: _,
+  "surface--root": "_surface--root_65s6k_5",
+  "surface--default": "_surface--default_65s6k_13",
+  "surface--higher": "_surface--higher_65s6k_21",
+  "surface--highest": "_surface--highest_65s6k_29"
+}, c = i(0), m = ({
+  background: e,
+  elevated: t,
+  className: f,
+  ...n
+}) => {
+  let r = l(c);
+  return e ? r = d(e) : t && r++, /* @__PURE__ */ s(c.Provider, { value: r, children: /* @__PURE__ */ s(
+    h,
+    {
+      className: u(
+        a.surface,
+        a[`surface--${g(r)}`],
+        f
+      ),
+      ...n
+    }
+  ) });
+};
+m.displayName = "Surface";
+const o = ["root", "default", "higher", "highest"];
+function d(e = "root") {
+  const t = o.indexOf(e);
+  return Math.min(Math.max(t, 0), o.length - 1);
+}
+function g(e = 0) {
+  return o[e] || "root";
+}
+export {
+  m as Surface
+};

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

@@ -0,0 +1,5 @@
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+import { Color } from '../view';
+export declare function Switch({ color, ...props }: SwitchPrimitive.Root.Props & {
+    color?: Color;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/switch/index.js

@@ -0,0 +1,196 @@
+import { jsxs as ae, jsx as d } from "react/jsx-runtime";
+import { View as se } from "../view/index.js";
+import * as s from "react";
+import { f as ie } from "../../formatErrorMessage-BqPuTBN-.js";
+import { c as re, m as ce, u as M } from "../../useRenderElement-DwToLA61.js";
+import { f as de, c as le, a as O, u as ue, b as fe } from "../../LabelableContext-BMvjVwor.js";
+import { u as me } from "../../useControlled-Du4sJyMj.js";
+import { u as pe } from "../../useStableCallback-CkTrVkNX.js";
+import { u as he } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
+import { v as ke } from "../../visuallyHidden-CpJ-mhai.js";
+import { u as ve } from "../../useBaseUiId-B7WyxtIE.js";
+import { u as Ce } from "../../useLabelableId-Ci_jDvmv.js";
+import { c as be, n as ye } from "../../createBaseUIEventDetails-D8M2Yl-a.js";
+import { u as we } from "../../useValueChanged-DL757-yD.js";
+import { u as ge } from "../../useButton-DfIwsdb8.js";
+import '../../index22.css';const b = /* @__PURE__ */ s.createContext(void 0);
+process.env.NODE_ENV !== "production" && (b.displayName = "SwitchRootContext");
+function xe() {
+  const e = s.useContext(b);
+  if (e === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: SwitchRootContext is missing. Switch parts must be placed within <Switch.Root>." : ie(63));
+  return e;
+}
+let B = /* @__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 T = {
+  ...de,
+  checked(e) {
+    return e ? {
+      [B.checked]: ""
+    } : {
+      [B.unchecked]: ""
+    };
+  }
+}, q = /* @__PURE__ */ s.forwardRef(function(i, m) {
+  const {
+    checked: y,
+    className: j,
+    defaultChecked: p,
+    id: h,
+    inputRef: k,
+    name: v,
+    nativeButton: U = !1,
+    onCheckedChange: H,
+    readOnly: l = !1,
+    required: u = !1,
+    disabled: z = !1,
+    render: Ee,
+    uncheckedValue: w,
+    ...D
+  } = i, {
+    clearErrors: G
+  } = le(), {
+    state: g,
+    setTouched: J,
+    setDirty: K,
+    validityData: Q,
+    setFilled: C,
+    setFocused: x,
+    shouldValidateOnChange: W,
+    validationMode: X,
+    disabled: Y,
+    name: Z,
+    validation: n
+  } = O(), {
+    labelId: $
+  } = ue(), o = Y || z, r = Z ?? v, _ = pe(H), c = s.useRef(null), E = re(c, k, n.inputRef), f = s.useRef(null), N = ve(), R = Ce({
+    id: h,
+    implicit: !1,
+    controlRef: f
+  }), [t, P] = me({
+    controlled: y,
+    default: !!p,
+    name: "Switch",
+    state: "checked"
+  });
+  fe({
+    id: N,
+    commit: n.commit,
+    value: t,
+    controlRef: f,
+    name: r,
+    getValue: () => t
+  }), he(() => {
+    c.current && C(c.current.checked);
+  }, [c, C]), we(t, () => {
+    G(r), K(t !== Q.initialValue), C(t), W() ? n.commit(t) : n.commit(t, !0);
+  });
+  const {
+    getButtonProps: A,
+    buttonRef: ee
+  } = ge({
+    disabled: o,
+    native: U
+  }), te = {
+    id: N,
+    role: "switch",
+    "aria-checked": t,
+    "aria-readonly": l || void 0,
+    "aria-labelledby": $,
+    onFocus() {
+      o || x(!0);
+    },
+    onBlur() {
+      const a = c.current;
+      !a || o || (J(!0), x(!1), X === "onBlur" && n.commit(a.checked));
+    },
+    onClick(a) {
+      l || o || (a.preventDefault(), c?.current?.click());
+    }
+  }, ne = s.useMemo(() => ce({
+    checked: t,
+    disabled: o,
+    id: R,
+    name: r,
+    required: u,
+    style: ke,
+    tabIndex: -1,
+    type: "checkbox",
+    "aria-hidden": !0,
+    ref: E,
+    onChange(a) {
+      if (a.nativeEvent.defaultPrevented)
+        return;
+      const I = a.target.checked, S = be(ye, a.nativeEvent);
+      _?.(I, S), !S.isCanceled && P(I);
+    },
+    onFocus() {
+      f.current?.focus();
+    }
+  }, n.getInputValidationProps), [t, o, E, R, r, _, u, P, n]), V = s.useMemo(() => ({
+    ...g,
+    checked: t,
+    disabled: o,
+    readOnly: l,
+    required: u
+  }), [g, t, o, l, u]), oe = M("span", i, {
+    state: V,
+    ref: [m, f, ee],
+    props: [te, n.getValidationProps, D, A],
+    stateAttributesMapping: T
+  });
+  return /* @__PURE__ */ ae(b.Provider, {
+    value: V,
+    children: [oe, !t && r && w !== void 0 && /* @__PURE__ */ d("input", {
+      type: "hidden",
+      name: r,
+      value: w
+    }), /* @__PURE__ */ d("input", {
+      ...ne
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (q.displayName = "SwitchRoot");
+const L = /* @__PURE__ */ s.forwardRef(function(i, m) {
+  const {
+    render: y,
+    className: j,
+    ...p
+  } = i, {
+    state: h
+  } = O(), k = xe(), v = {
+    ...h,
+    ...k
+  };
+  return M("span", i, {
+    state: v,
+    ref: m,
+    stateAttributesMapping: T,
+    props: p
+  });
+});
+process.env.NODE_ENV !== "production" && (L.displayName = "SwitchThumb");
+const _e = "_switch__thumb_not9b_24", F = {
+  switch: "_switch_not9b_1",
+  switch__thumb: _e
+};
+function Ue({
+  color: e = "primary",
+  ...i
+}) {
+  return /* @__PURE__ */ d(
+    se,
+    {
+      render: /* @__PURE__ */ d(q, { ...i }),
+      className: F.switch,
+      interactive: "fill-outline",
+      color: e,
+      children: /* @__PURE__ */ d(L, { className: F.switch__thumb })
+    }
+  );
+}
+export {
+  Ue as Switch
+};

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

@@ -0,0 +1,18 @@
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+import { ButtonProps } from '../button';
+type TabsTriggerProps = {
+    value: TabsPrimitive.Tab.Props["value"];
+    /** Show indicator that tab is complete.  */
+    complete?: boolean;
+} & ButtonProps;
+type TabsVariant = "default" | "progress" | "button-group";
+export interface TabsProps extends TabsPrimitive.Root.Props {
+    /** Tabs styling that we should use. Defaults to "default". */
+    variant?: TabsVariant;
+    /** Disable all triggers */
+    disabled?: boolean;
+    tabs: Array<TabsTriggerProps>;
+}
+export declare function Tabs({ variant, disabled, tabs, className, children, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabsPanel({ children, ...props }: TabsPrimitive.Panel.Props): import("react/jsx-runtime").JSX.Element;
+export {};