@koide-labs/ui 0.0.14 → 0.1.0

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

@@ -0,0 +1,36 @@
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import { Button } from '../button';
+import { BaseDialogProps } from '../dialog/dialog.types';
+/**
+ * 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
+ */
+interface AlertDialogRootProps extends Omit<AlertDialogPrimitive.Root.Props, "children">, 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<Button.Props>;
+}
+declare function AlertDialogRoot({ title, description, children, actions, trigger, width, background, centered, className, ...props }: AlertDialogRootProps): import("react/jsx-runtime").JSX.Element;
+type AlertDialogCloseProps = Button.Props;
+declare function AlertDialogClose(props: AlertDialogCloseProps): import("react/jsx-runtime").JSX.Element;
+export declare const AlertDialog: typeof AlertDialogRoot & {
+    Close: typeof AlertDialogClose;
+};
+export declare namespace AlertDialog {
+    type Props = AlertDialogRootProps;
+    namespace Close {
+        type Props = AlertDialogCloseProps;
+    }
+}
+export {};

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

@@ -0,0 +1,138 @@
+import { jsx as o, jsxs as u } from "react/jsx-runtime";
+import { c as _ } from "../../clsx-OuTLNxxd.js";
+import { t as h } from "../../transitions.module-D9mMAtfI.js";
+import { u as v, D as y, a as I, b as T, c as b, d as O, e as w, s as n, f as N, g as S, h as k, i as A } from "../../dialog.module-DsbQRp-d.js";
+import { Surface as B } from "../surface/surface.js";
+import { View as C } from "../view/view.js";
+import { Text as D } from "../text/text.js";
+import { Button as j } from "../button/button.js";
+import * as V from "react";
+import { a as $ } from "../../useRenderElement-DngNDu_P.js";
+import '../../alert-dialog.css';function z(t) {
+  const {
+    children: r,
+    open: i,
+    defaultOpen: a = !1,
+    onOpenChange: s,
+    onOpenChangeComplete: p,
+    actionsRef: m,
+    handle: f,
+    triggerId: l,
+    defaultTriggerId: c = null
+  } = t, d = v(), g = !!d, e = $(() => f?.store ?? new y({
+    open: i ?? a,
+    activeTriggerId: l !== void 0 ? l : c,
+    modal: !0,
+    disablePointerDismissal: !0,
+    nested: g,
+    role: "alertdialog"
+  })).current;
+  e.useControlledProp("open", i, a), e.useControlledProp("activeTriggerId", l, c), e.useSyncedValue("nested", g), e.useContextCallback("onOpenChange", s), e.useContextCallback("onOpenChangeComplete", p);
+  const P = e.useState("payload");
+  I({
+    store: e,
+    actionsRef: m,
+    parentContext: d?.store.context
+  });
+  const R = V.useMemo(() => ({
+    store: e
+  }), [e]);
+  return /* @__PURE__ */ o(T.Provider, {
+    value: R,
+    children: typeof r == "function" ? r({
+      payload: P
+    }) : r
+  });
+}
+const M = {
+  "alert-dialog__actions": "_alert-dialog__actions_ndpfw_2"
+};
+function W({
+  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__ */ u(z, { ...c, children: [
+    s ? /* @__PURE__ */ o(b, { render: s }) : null,
+    /* @__PURE__ */ u(O, { children: [
+      /* @__PURE__ */ o(
+        w,
+        {
+          className: _(
+            n.dialog__backdrop,
+            h.transition_opacity
+          )
+        }
+      ),
+      /* @__PURE__ */ o(
+        N,
+        {
+          className: _(
+            n.dialog__popup,
+            f && n.dialog__popup_centered,
+            h.transition_scale
+          ),
+          children: /* @__PURE__ */ u(
+            B,
+            {
+              background: m,
+              className: _(
+                n.dialog__content,
+                n[`dialog__content_width_${p}`],
+                l
+              ),
+              children: [
+                t || r ? /* @__PURE__ */ u(C, { className: n.dialog__header, children: [
+                  t ? /* @__PURE__ */ o(D, { render: /* @__PURE__ */ o(S, {}), size: "2xl", children: t }) : null,
+                  r ? /* @__PURE__ */ o(
+                    D,
+                    {
+                      multiline: !0,
+                      color: "dimmer",
+                      render: /* @__PURE__ */ o(k, {}),
+                      children: r
+                    }
+                  ) : null
+                ] }) : null,
+                i,
+                /* @__PURE__ */ o(C, { className: M["alert-dialog__actions"], children: a.map(({ children: d, ...g }, e) => /* @__PURE__ */ o(
+                  x,
+                  {
+                    ...Y(g, e + 1 === a.length),
+                    children: d
+                  },
+                  e
+                )) })
+              ]
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+function x(t) {
+  return /* @__PURE__ */ o(A, { render: /* @__PURE__ */ o(j, { ...t }) });
+}
+function Y(t, r) {
+  return r ? {
+    interactive: "negative_fill",
+    ...t
+  } : {
+    interactive: !0,
+    ...t
+  };
+}
+const U = Object.assign(W, {
+  Close: x
+});
+export {
+  U as AlertDialog
+};

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

@@ -1,26 +1 @@
-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;
+export { AlertDialog } from './alert-dialog';

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

@@ -1,137 +1,5 @@
 "use client";
-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 '../../index19.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
-  };
-}
+import { AlertDialog as o } from "./alert-dialog.js";
 export {
-  Q as AlertDialog,
-  M as AlertDialogClose
+  o as AlertDialog
 };

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

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

package/dist/components/anchor/anchor.js

@@ -0,0 +1,21 @@
+import { u as n } from "../../useRender-C3vlzS3t.js";
+import { m as a } from "../../useRenderElement-DngNDu_P.js";
+import '../../anchor.css';const t = "_anchor_1bdhy_2", s = {
+  anchor: t
+};
+function h({ external: e, render: r, ...o }) {
+  return n({
+    defaultTagName: "a",
+    render: r,
+    props: a(o, {
+      className: s.anchor,
+      ...e ? {
+        target: "_blank",
+        rel: "noreferrer"
+      } : {}
+    })
+  });
+}
+export {
+  h as Anchor
+};

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

@@ -1,8 +1 @@
-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, ...props }: AnchorProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export { Anchor } from './anchor';

package/dist/components/anchor/index.js

@@ -1,22 +1,5 @@
 "use client";
-import { u as o } from "../../useRender-CLx7dR_1.js";
-import { m as t } from "../../useRenderElement-DwToLA61.js";
-import '../../index7.css';const a = "_anchor_zl00p_1", s = {
-  anchor: a
-};
-function p({ external: e, render: r, ...n }) {
-  return o({
-    defaultTagName: "a",
-    render: r,
-    props: t(n, {
-      className: s.anchor,
-      ...e ? {
-        target: "_blank",
-        rel: "noreferrer"
-      } : {}
-    })
-  });
-}
+import { Anchor as r } from "./anchor.js";
 export {
-  p as Anchor
+  r as Anchor
 };

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

@@ -0,0 +1,25 @@
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
+import { Size } from '../../styles/tokens';
+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;
+}
+declare function Avatar({ image, username, fullName, size, className, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export { Avatar };
+export declare namespace Avatar {
+    type Props = AvatarProps;
+}

package/dist/components/avatar/avatar.js

@@ -0,0 +1,161 @@
+import { jsx as v, 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-DngNDu_P.js";
+import { f as k } from "../../formatErrorMessage-BqPuTBN-.js";
+import { u as C } from "../../useStableCallback-DKZHlUAT.js";
+import { u as N } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
+import { u as M } from "../../useTimeout-BNni6aw5.js";
+import '../../avatar.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: l,
+    render: i,
+    ...r
+  } = a, [t, c] = o.useState("idle"), _ = o.useMemo(() => ({
+    imageLoadingStatus: t
+  }), [t]), u = o.useMemo(() => ({
+    imageLoadingStatus: t,
+    setImageLoadingStatus: c
+  }), [t, c]), n = f("span", a, {
+    state: _,
+    ref: s,
+    props: r,
+    stateAttributesMapping: p
+  });
+  return /* @__PURE__ */ v(g.Provider, {
+    value: u,
+    children: n
+  });
+});
+process.env.NODE_ENV !== "production" && (z.displayName = "AvatarRoot");
+function w(e, {
+  referrerPolicy: a,
+  crossOrigin: s
+}) {
+  const [l, i] = o.useState("idle");
+  return N(() => {
+    if (!e)
+      return i("error"), h;
+    let r = !0;
+    const t = new window.Image(), c = (_) => () => {
+      r && i(_);
+    };
+    return i("loading"), t.onload = c("loaded"), t.onerror = c("error"), a && (t.referrerPolicy = a), t.crossOrigin = s ?? null, t.src = e, () => {
+      r = !1;
+    };
+  }, [e, s, a]), l;
+}
+const S = /* @__PURE__ */ o.forwardRef(function(a, s) {
+  const {
+    className: l,
+    render: i,
+    onLoadingStatusChange: r,
+    referrerPolicy: t,
+    crossOrigin: c,
+    ..._
+  } = a, u = b(), n = w(a.src, {
+    referrerPolicy: t,
+    crossOrigin: c
+  }), 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: l,
+    render: i,
+    delay: r,
+    ...t
+  } = a, {
+    imageLoadingStatus: c
+  } = 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: c
+  }), [c]);
+  return f("span", a, {
+    state: d,
+    ref: s,
+    props: t,
+    stateAttributesMapping: p,
+    enabled: c !== "loaded" && _
+  });
+});
+process.env.NODE_ENV !== "production" && (E.displayName = "AvatarFallback");
+const y = "_avatar_1886r_2", I = "_avatar__image_1886r_16", O = "_avatar__fallback_1886r_22", D = "_avatar_size_sm_1886r_35", V = "_avatar_size_md_1886r_39", F = "_avatar_size_lg_1886r_43", P = "_avatar_size_xl_1886r_47", j = "_avatar_size_2xl_1886r_51", U = "_avatar_size_3xl_1886r_55", m = {
+  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: l = "md",
+  className: i,
+  ...r
+}) {
+  const t = B(a, s);
+  return /* @__PURE__ */ L(
+    z,
+    {
+      className: R(
+        m.avatar,
+        m[`avatar_size_${l}`],
+        i
+      ),
+      ...r,
+      children: [
+        e ? /* @__PURE__ */ v(
+          S,
+          {
+            src: e,
+            className: m.avatar__image
+          }
+        ) : null,
+        /* @__PURE__ */ v(E, { className: m.avatar__fallback, children: t })
+      ]
+    }
+  );
+}
+function B(e, a) {
+  let s = e.substring(0, 2);
+  if (a) {
+    const [l, i] = a.split(" ");
+    s = l && i ? l.charAt(0) + i.charAt(0) : a.substring(0, 2);
+  }
+  return s.toLocaleUpperCase();
+}
+export {
+  W as Avatar
+};

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

@@ -1,21 +1 @@
-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;
+export { Avatar } from './avatar';