@koide-labs/ui 0.0.0 → 0.0.2

package/dist/components/alert-dialog/index.d.ts

@@ -0,0 +1,26 @@
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import { ComponentProps } from 'react';
+import { ButtonProps } from '../button';
+import { BaseDialogProps } from '../dialog';
+/**
+ * General guidance:
+ *
+ * Should you have nested modals? Absolutely not. It's confusing to navigate and
+ * obliterates the stacking context by putting multiple root surfaces on top of
+ * each other.
+ *
+ * Should you have payloads? Probably not... Currently unsupported but that
+ * style of generalization feels kind of anti-composition
+ */
+export type AlertDialogProps = ComponentProps<typeof AlertDialogPrimitive.Root> & BaseDialogProps & {
+    /**
+     *
+     * The actions to display in the alert dialog. You must have at least two
+     * actions. By default, actions will be `interactive` and the last action will
+     * have `colorway` "negative_fill".
+     *
+     */
+    actions: Array<ButtonProps>;
+};
+export declare function AlertDialog({ title, description, children, actions, trigger, width, background, centered, className, ...props }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertDialogClose(props: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/alert-dialog/index.js

@@ -0,0 +1,136 @@
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import { c as _ } from "../../clsx-OuTLNxxd.js";
+import { Button as v } from "../button/index.js";
+import { Surface as y } from "../surface/index.js";
+import { Text as h } from "../text/index.js";
+import { View as C } from "../view/index.js";
+import { t as D } from "../../transitions.module-CWX8e5cx.js";
+import { u as R, a as I, D as T, b, c as w, d as N, e as O, f as S, s as n, g as k, h as B, i as j } from "../../dialog.module-BeF-6XAo.js";
+import * as A from "react";
+import { a as V } from "../../useRenderElement-DwToLA61.js";
+import '../../index17.css';function $(t) {
+  const {
+    children: r,
+    open: i,
+    defaultOpen: a = !1,
+    onOpenChange: s,
+    onOpenChangeComplete: p,
+    actionsRef: m,
+    handle: f,
+    triggerId: l,
+    defaultTriggerId: c = null
+  } = t, d = R(), u = !!d, e = V(() => f?.store ?? new b({
+    open: i ?? a,
+    activeTriggerId: l !== void 0 ? l : c,
+    modal: !0,
+    disablePointerDismissal: !0,
+    nested: u,
+    role: "alertdialog"
+  })).current;
+  e.useControlledProp("open", i, a), e.useControlledProp("activeTriggerId", l, c), e.useSyncedValue("nested", u), e.useContextCallback("onOpenChange", s), e.useContextCallback("onOpenChangeComplete", p);
+  const x = e.useState("payload");
+  I({
+    store: e,
+    actionsRef: m,
+    parentContext: d?.store.context
+  });
+  const P = A.useMemo(() => ({
+    store: e
+  }), [e]);
+  return /* @__PURE__ */ o(T.Provider, {
+    value: P,
+    children: typeof r == "function" ? r({
+      payload: x
+    }) : r
+  });
+}
+const z = {
+  "alert-dialog__actions": "_alert-dialog__actions_f5jwc_1"
+};
+function Q({
+  title: t,
+  description: r,
+  children: i,
+  actions: a,
+  trigger: s,
+  width: p = "md",
+  background: m = "root",
+  centered: f = !1,
+  className: l,
+  ...c
+}) {
+  return a.length < 2 && console.error("You must have at least two actions."), /* @__PURE__ */ g($, { ...c, children: [
+    s ? /* @__PURE__ */ o(w, { render: s }) : null,
+    /* @__PURE__ */ g(N, { children: [
+      /* @__PURE__ */ o(
+        O,
+        {
+          className: _(
+            n.dialog__backdrop,
+            D.transition_opacity
+          )
+        }
+      ),
+      /* @__PURE__ */ o(
+        S,
+        {
+          className: _(
+            n.dialog__popup,
+            f && n.dialog__popup_centered,
+            D.transition_scale
+          ),
+          children: /* @__PURE__ */ g(
+            y,
+            {
+              background: m,
+              className: _(
+                n.dialog__content,
+                n[`dialog__content_width_${p}`],
+                l
+              ),
+              children: [
+                t || r ? /* @__PURE__ */ g(C, { className: n.dialog__header, children: [
+                  t ? /* @__PURE__ */ o(h, { render: /* @__PURE__ */ o(k, {}), size: "2xl", children: t }) : null,
+                  r ? /* @__PURE__ */ o(
+                    h,
+                    {
+                      multiline: !0,
+                      color: "dimmer",
+                      render: /* @__PURE__ */ o(B, {}),
+                      children: r
+                    }
+                  ) : null
+                ] }) : null,
+                i,
+                /* @__PURE__ */ o(C, { className: z["alert-dialog__actions"], children: a.map(({ children: d, ...u }, e) => /* @__PURE__ */ o(
+                  M,
+                  {
+                    ...W(u, e + 1 === a.length),
+                    children: d
+                  },
+                  e
+                )) })
+              ]
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+function M(t) {
+  return /* @__PURE__ */ o(j, { render: /* @__PURE__ */ o(v, { ...t }) });
+}
+function W(t, r) {
+  return r ? {
+    interactive: "negative_fill",
+    ...t
+  } : {
+    interactive: !0,
+    ...t
+  };
+}
+export {
+  Q as AlertDialog,
+  M as AlertDialogClose
+};

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

@@ -0,0 +1,8 @@
+import { useRender } from '@base-ui/react';
+export type AnchorProps = useRender.ComponentProps<"a"> & {
+    /**
+     * Open this link in a new tab
+     */
+    external?: boolean;
+};
+export declare function Anchor({ external, render, children, ...props }: AnchorProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/anchor/index.js

@@ -0,0 +1,38 @@
+import { jsxs as c, Fragment as s, jsx as m } from "react/jsx-runtime";
+import { Icon as t } from "../icon/index.js";
+import { u as _ } from "../../useRender-CLx7dR_1.js";
+import { m as i } from "../../useRenderElement-DwToLA61.js";
+import '../../index6.css';const l = "_anchor_71aa4_1", h = "_anchor__icon_71aa4_14", r = {
+  anchor: l,
+  anchor__icon: h
+};
+function x({ external: n, render: o, children: e, ...a }) {
+  return _({
+    defaultTagName: "a",
+    render: o,
+    props: i(
+      {
+        className: r.anchor,
+        ...n ? {
+          target: "_blank",
+          rel: "noreferrer"
+        } : {},
+        children: /* @__PURE__ */ c(s, { children: [
+          e,
+          n ? /* @__PURE__ */ m(
+            t,
+            {
+              name: "external-link-line",
+              size: "sm",
+              className: r.anchor__icon
+            }
+          ) : null
+        ] })
+      },
+      a
+    )
+  });
+}
+export {
+  x as Anchor
+};

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

@@ -0,0 +1,21 @@
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
+import { Size } from '../../styles/tokens';
+export interface AvatarProps extends AvatarPrimitive.Root.Props {
+    /**
+     * Avatar url; if not provided, uses fallback based on username or fullName.
+     */
+    image?: string | null;
+    /**
+     * Used for initials if avatar image is not provided.
+     */
+    username: string;
+    /**
+     * User's first & last name. Used for initials, takes precedence over username.
+     */
+    fullName?: string;
+    /**
+     * Size of the avatar, defaults to "md".
+     */
+    size?: Size;
+}
+export declare function Avatar({ image, username, fullName, size, className, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/avatar/index.js

@@ -0,0 +1,161 @@
+import { jsx as m, jsxs as L } from "react/jsx-runtime";
+import { c as R } from "../../clsx-OuTLNxxd.js";
+import * as o from "react";
+import { u as f, N as h } from "../../useRenderElement-DwToLA61.js";
+import { f as k } from "../../formatErrorMessage-BqPuTBN-.js";
+import { u as C } from "../../useStableCallback-CkTrVkNX.js";
+import { u as N } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
+import { u as M } from "../../useTimeout-CflX-kz3.js";
+import '../../index23.css';const g = /* @__PURE__ */ o.createContext(void 0);
+process.env.NODE_ENV !== "production" && (g.displayName = "AvatarRootContext");
+function b() {
+  const e = o.useContext(g);
+  if (e === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: AvatarRootContext is missing. Avatar parts must be placed within <Avatar.Root>." : k(13));
+  return e;
+}
+const p = {
+  imageLoadingStatus: () => null
+}, z = /* @__PURE__ */ o.forwardRef(function(a, s) {
+  const {
+    className: c,
+    render: i,
+    ...r
+  } = a, [t, l] = o.useState("idle"), _ = o.useMemo(() => ({
+    imageLoadingStatus: t
+  }), [t]), u = o.useMemo(() => ({
+    imageLoadingStatus: t,
+    setImageLoadingStatus: l
+  }), [t, l]), n = f("span", a, {
+    state: _,
+    ref: s,
+    props: r,
+    stateAttributesMapping: p
+  });
+  return /* @__PURE__ */ m(g.Provider, {
+    value: u,
+    children: n
+  });
+});
+process.env.NODE_ENV !== "production" && (z.displayName = "AvatarRoot");
+function w(e, {
+  referrerPolicy: a,
+  crossOrigin: s
+}) {
+  const [c, i] = o.useState("idle");
+  return N(() => {
+    if (!e)
+      return i("error"), h;
+    let r = !0;
+    const t = new window.Image(), l = (_) => () => {
+      r && i(_);
+    };
+    return i("loading"), t.onload = l("loaded"), t.onerror = l("error"), a && (t.referrerPolicy = a), t.crossOrigin = s ?? null, t.src = e, () => {
+      r = !1;
+    };
+  }, [e, s, a]), c;
+}
+const S = /* @__PURE__ */ o.forwardRef(function(a, s) {
+  const {
+    className: c,
+    render: i,
+    onLoadingStatusChange: r,
+    referrerPolicy: t,
+    crossOrigin: l,
+    ..._
+  } = a, u = b(), n = w(a.src, {
+    referrerPolicy: t,
+    crossOrigin: l
+  }), d = C((x) => {
+    r?.(x), u.setImageLoadingStatus(x);
+  });
+  N(() => {
+    n !== "idle" && d(n);
+  }, [n, d]);
+  const A = o.useMemo(() => ({
+    imageLoadingStatus: n
+  }), [n]);
+  return f("img", a, {
+    state: A,
+    ref: s,
+    props: _,
+    stateAttributesMapping: p,
+    enabled: n === "loaded"
+  });
+});
+process.env.NODE_ENV !== "production" && (S.displayName = "AvatarImage");
+const E = /* @__PURE__ */ o.forwardRef(function(a, s) {
+  const {
+    className: c,
+    render: i,
+    delay: r,
+    ...t
+  } = a, {
+    imageLoadingStatus: l
+  } = b(), [_, u] = o.useState(r === void 0), n = M();
+  o.useEffect(() => (r !== void 0 && n.start(r, () => u(!0)), n.clear), [n, r]);
+  const d = o.useMemo(() => ({
+    imageLoadingStatus: l
+  }), [l]);
+  return f("span", a, {
+    state: d,
+    ref: s,
+    props: t,
+    stateAttributesMapping: p,
+    enabled: l !== "loaded" && _
+  });
+});
+process.env.NODE_ENV !== "production" && (E.displayName = "AvatarFallback");
+const y = "_avatar_2v9li_1", I = "_avatar__image_2v9li_15", O = "_avatar__fallback_2v9li_21", D = "_avatar_size_sm_2v9li_34", V = "_avatar_size_md_2v9li_38", F = "_avatar_size_lg_2v9li_42", P = "_avatar_size_xl_2v9li_46", j = "_avatar_size_2xl_2v9li_50", U = "_avatar_size_3xl_2v9li_54", v = {
+  avatar: y,
+  avatar__image: I,
+  avatar__fallback: O,
+  avatar_size_sm: D,
+  avatar_size_md: V,
+  avatar_size_lg: F,
+  avatar_size_xl: P,
+  avatar_size_2xl: j,
+  avatar_size_3xl: U
+};
+function W({
+  image: e,
+  username: a,
+  fullName: s,
+  size: c = "md",
+  className: i,
+  ...r
+}) {
+  const t = B(a, s);
+  return /* @__PURE__ */ L(
+    z,
+    {
+      className: R(
+        v.avatar,
+        v[`avatar_size_${c}`],
+        i
+      ),
+      ...r,
+      children: [
+        e ? /* @__PURE__ */ m(
+          S,
+          {
+            src: e,
+            className: v.avatar__image
+          }
+        ) : null,
+        /* @__PURE__ */ m(E, { className: v.avatar__fallback, children: t })
+      ]
+    }
+  );
+}
+function B(e, a) {
+  let s = e.substring(0, 2);
+  if (a) {
+    const [c, i] = a.split(" ");
+    s = c && i ? c.charAt(0) + i.charAt(0) : a.substring(0, 2);
+  }
+  return s.toLocaleUpperCase();
+}
+export {
+  W as Avatar
+};

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

@@ -0,0 +1,16 @@
+import { useRender } from '@base-ui/react';
+import { IconName } from '../icon/icon-names';
+import { Color } from '../view';
+export interface BadgeProps extends Omit<useRender.ComponentProps<"span">, "children"> {
+    /** Optional icon, goes before name */
+    icon?: IconName;
+    /** Name of badge to be displayed, goes after icon */
+    name: string;
+    /** Communicate purpose with color. Defaults to "primary". */
+    color?: Color;
+    /** Add shiny hover effect. */
+    shiny?: boolean;
+    /** Tagline of badge. */
+    tagline?: string;
+}
+export declare function Badge({ icon, name, color, shiny, tagline, render, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/badge/index.js

@@ -0,0 +1,40 @@
+import { jsx as e, jsxs as g, Fragment as c } from "react/jsx-runtime";
+import { c as p } from "../../clsx-OuTLNxxd.js";
+import { Icon as f } from "../icon/index.js";
+import { Text as _ } from "../text/index.js";
+import { Tooltip as b } from "../tooltip/index.js";
+import { View as h } from "../view/index.js";
+import { u } from "../../useRender-CLx7dR_1.js";
+import { m as x } from "../../useRenderElement-DwToLA61.js";
+import '../../index7.css';const y = "_badge_sf2gl_1", T = "_badge_shiny_sf2gl_16", m = {
+  badge: y,
+  badge_shiny: T
+};
+function R({
+  icon: r,
+  name: t,
+  color: n,
+  shiny: i,
+  tagline: s,
+  render: a,
+  ...l
+}) {
+  const d = u({
+    defaultTagName: "span",
+    render: a,
+    props: x(
+      {
+        className: p(m.badge, i && m.badge_shiny),
+        children: /* @__PURE__ */ g(c, { children: [
+          r ? /* @__PURE__ */ e(f, { name: r }) : null,
+          t
+        ] })
+      },
+      l
+    )
+  }), o = /* @__PURE__ */ e(h, { color: n, children: d });
+  return s ? /* @__PURE__ */ e(b, { trigger: o, children: /* @__PURE__ */ e(_, { size: "sm", multiline: !0, children: s }) }) : o;
+}
+export {
+  R as Badge
+};

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

@@ -0,0 +1,24 @@
+import { ComponentProps } from 'react';
+import { Size } from '../../styles/tokens';
+import { IconName } from '../icon/icon-names';
+import { ViewProps } from '../view';
+export type ButtonProps = ComponentProps<"button"> & ViewProps<"button"> & {
+    /**
+     * Size of the button
+     */
+    size?: Size;
+    /**
+     * Icon to display on the left side of the button content
+     */
+    leftIcon?: IconName;
+    /**
+     * Icon to display on the right side of the button content
+     */
+    rightIcon?: IconName;
+    /**
+     * The button can remain keyboard accessible while being rendered as another tag
+     * {@link https://base-ui.com/react/components/button}
+     */
+    nativeButton?: boolean;
+};
+export declare function Button({ size, leftIcon, rightIcon, children, render, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/button/index.js

@@ -0,0 +1,47 @@
+import { jsxs as b, jsx as _ } from "react/jsx-runtime";
+import { c as l } from "../../clsx-OuTLNxxd.js";
+import { textify as g } from "../../-utils.js";
+import { Icon as e } from "../icon/index.js";
+import { View as m } from "../view/index.js";
+import { B as r } from "../../Button-DrPFFzo7.js";
+import '../../index8.css';const a = "_button_14saj_1", c = "_button_height_sm_14saj_14", x = "_button_height_md_14saj_19", j = "_button_height_lg_14saj_24", d = "_button_height_xl_14saj_29", f = "_button_height_2xl_14saj_34", p = "_button_height_3xl_14saj_39", i = {
+  button: a,
+  button_height_sm: c,
+  button_height_md: x,
+  button_height_lg: j,
+  button_height_xl: d,
+  button_height_2xl: f,
+  button_height_3xl: p
+};
+function N({
+  size: t = "md",
+  leftIcon: o,
+  rightIcon: n,
+  children: u,
+  render: s,
+  ...h
+}) {
+  return /* @__PURE__ */ b(
+    m,
+    {
+      interactive: !0,
+      render: /* @__PURE__ */ _(
+        r,
+        {
+          className: l(i.button, i[`button_height_${t}`]),
+          focusableWhenDisabled: !!h.loading,
+          render: s
+        }
+      ),
+      ...h,
+      children: [
+        o ? /* @__PURE__ */ _(e, { name: o, size: t }) : null,
+        g(u, { size: t, color: "inherit" }),
+        n ? /* @__PURE__ */ _(e, { name: n, size: t }) : null
+      ]
+    }
+  );
+}
+export {
+  N as Button
+};

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

@@ -0,0 +1,9 @@
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+import { Color } from '../view';
+export interface CheckboxProps extends CheckboxPrimitive.Root.Props {
+    /** Optional color for checkbox. Defaults to "primary". */
+    color?: Color;
+    /** Optional label. If one is provided, we wrap radio in a label element. Otherwise, we just return a standard radio. */
+    label?: string;
+}
+export declare function Checkbox({ color, label, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;