@koide-labs/ui 0.0.15 → 0.1.1

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

@@ -0,0 +1,22 @@
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import { Button } from '../button';
+import { BaseDialogProps } from './dialog.types';
+interface DialogRootProps extends Omit<DialogPrimitive.Root.Props, "children">, BaseDialogProps {
+    /**
+     * Show close icon
+     */
+    closable?: boolean;
+}
+declare function DialogRoot({ title, description, trigger, width, background, centered, closable, children, className, ...props }: DialogRootProps): import("react/jsx-runtime").JSX.Element;
+type DialogCloseProps = Button.Props;
+declare function DialogClose(props: DialogCloseProps): import("react/jsx-runtime").JSX.Element;
+export declare const Dialog: typeof DialogRoot & {
+    Close: typeof DialogClose;
+};
+export declare namespace Dialog {
+    type Props = DialogRootProps;
+    namespace DialogClose {
+        type Props = DialogCloseProps;
+    }
+}
+export {};

package/dist/components/dialog/dialog.js

@@ -0,0 +1,140 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { c as f } from "../../clsx-OuTLNxxd.js";
+import { t as h } from "../../transitions.module-D9mMAtfI.js";
+import { u as y, D as T, a as b, b as O, c as k, d as v, e as N, s as n, f as S, g as w, h as B, i as P } from "../../dialog.module-DsbQRp-d.js";
+import { Surface as j } from "../surface/surface.js";
+import { View as V } from "../view/view.js";
+import { Text as x } from "../text/text.js";
+import { IconButton as $ } from "../icon-button/icon-button.js";
+import { Button as z } from "../button/button.js";
+import * as M from "react";
+import { a as W } from "../../useRenderElement-DngNDu_P.js";
+function q(t) {
+  const {
+    children: a,
+    open: r,
+    defaultOpen: l = !1,
+    onOpenChange: d,
+    onOpenChangeComplete: u,
+    disablePointerDismissal: i = !1,
+    modal: s = !0,
+    actionsRef: p,
+    handle: g,
+    triggerId: m,
+    defaultTriggerId: C = null
+  } = t, D = y(!0), _ = !!D, o = W(() => g?.store ?? new T({
+    open: r ?? l,
+    activeTriggerId: m !== void 0 ? m : C,
+    modal: s,
+    disablePointerDismissal: i,
+    nested: _
+  })).current;
+  o.useControlledProp("open", r, l), o.useControlledProp("activeTriggerId", m, C), o.useSyncedValues({
+    disablePointerDismissal: i,
+    nested: _,
+    modal: s
+  }), o.useContextCallback("onOpenChange", d), o.useContextCallback("onOpenChangeComplete", u);
+  const R = o.useState("payload");
+  b({
+    store: o,
+    actionsRef: p,
+    parentContext: D?.store.context
+  });
+  const I = M.useMemo(() => ({
+    store: o
+  }), [o]);
+  return /* @__PURE__ */ e(O.Provider, {
+    value: I,
+    children: typeof a == "function" ? a({
+      payload: R
+    }) : a
+  });
+}
+function A({
+  title: t,
+  description: a,
+  trigger: r,
+  width: l = "md",
+  background: d = "root",
+  centered: u,
+  closable: i,
+  children: s,
+  className: p,
+  ...g
+}) {
+  return /* @__PURE__ */ c(q, { ...g, children: [
+    r ? /* @__PURE__ */ e(k, { render: r }) : null,
+    /* @__PURE__ */ c(v, { children: [
+      /* @__PURE__ */ e(
+        N,
+        {
+          className: f(
+            n.dialog__backdrop,
+            h.transition_opacity
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        S,
+        {
+          className: f(
+            n.dialog__popup,
+            u && n.dialog__popup_centered,
+            h.transition_scale
+          ),
+          children: /* @__PURE__ */ c(
+            j,
+            {
+              background: d,
+              className: f(
+                n.dialog__content,
+                n[`dialog__content_width_${l}`],
+                p
+              ),
+              children: [
+                t || a ? /* @__PURE__ */ c(V, { className: n.dialog__header, children: [
+                  t ? /* @__PURE__ */ e(x, { render: /* @__PURE__ */ e(w, {}), size: "2xl", children: t }) : null,
+                  a ? /* @__PURE__ */ e(
+                    x,
+                    {
+                      multiline: !0,
+                      color: "dimmer",
+                      render: /* @__PURE__ */ e(B, {}),
+                      children: a
+                    }
+                  ) : null
+                ] }) : null,
+                s,
+                i ? /* @__PURE__ */ e(
+                  P,
+                  {
+                    "data-framework-close": !0,
+                    className: n.dialog__close,
+                    render: /* @__PURE__ */ e(
+                      $,
+                      {
+                        size: "sm",
+                        icon: "close-line",
+                        alt: "Close",
+                        interactive: "no-fill"
+                      }
+                    )
+                  }
+                ) : null
+              ]
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+function E(t) {
+  return /* @__PURE__ */ e(P, { render: /* @__PURE__ */ e(z, { ...t }) });
+}
+const Z = Object.assign(A, {
+  Close: E
+});
+export {
+  Z as Dialog
+};

package/dist/components/dialog/dialog.types.d.ts

@@ -0,0 +1,38 @@
+import { ReactElement, ReactNode } from 'react';
+import { Size } from '../../styles/tokens';
+import { Background } from '../surface';
+export interface BaseDialogProps {
+    /**
+     * The title of the dialog.
+     * Renders DialogPrimitive.Title at "2xl" size.
+     */
+    title?: string;
+    /**
+     * The description of the dialog.
+     * Renders DialogPrimitive.Description at default size & dimmer color.
+     */
+    description?: string;
+    /** Dialog content */
+    children?: ReactNode;
+    /**
+     * Specify trigger to open alert. You can still used a {@link https://base-ui.com/react/components/dialog#detached-triggers detached trigger}
+     */
+    trigger?: ReactElement;
+    /**
+     * Maximum width of the dialog. Defaults to "md".
+     */
+    width?: Extract<Size, "sm" | "md" | "lg">;
+    /**
+     * Override popup background. Defaults to "root"
+     */
+    background?: Background;
+    /**
+     * Vertically center dialog (or not). You probably shouldn't if you suspect
+     * content will overflow.
+     */
+    centered?: boolean;
+    /**
+     * Apply className to the dialog content
+     */
+    className?: string;
+}

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

@@ -1,48 +1 @@
-import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
-import { ReactElement, ReactNode } from 'react';
-import { Size } from '../../styles/tokens';
-import { ButtonProps } from '../button';
-import { Background } from '../surface';
-export type BaseDialogProps = {
-    /**
-     * The title of the dialog.
-     * Renders DialogPrimitive.Title at "2xl" size.
-     */
-    title?: string;
-    /**
-     * The description of the dialog.
-     * Renders DialogPrimitive.Description at default size & dimmer color.
-     */
-    description?: string;
-    /** Dialog content */
-    children?: ReactNode;
-    /**
-     * Specify trigger to open alert. You can still used a {@link https://base-ui.com/react/components/dialog#detached-triggers detached trigger}
-     */
-    trigger?: ReactElement;
-    /**
-     * Maximum width of the dialog. Defaults to "md".
-     */
-    width?: Extract<Size, "sm" | "md" | "lg">;
-    /**
-     * Override popup background. Defaults to "root"
-     */
-    background?: Background;
-    /**
-     * Vertically center dialog (or not). You probably shouldn't if you suspect
-     * content will overflow.
-     */
-    centered?: boolean;
-    /**
-     * Apply className to the dialog content
-     */
-    className?: string;
-};
-export type DialogProps = DialogPrimitive.Root.Props & BaseDialogProps & {
-    /**
-     * Show close icon
-     */
-    closable?: boolean;
-};
-export declare function Dialog({ title, description, trigger, width, background, centered, closable, children, className, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
-export declare function DialogClose(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export { Dialog } from './dialog';

package/dist/components/dialog/index.js

@@ -1,139 +1,5 @@
 "use client";
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { c as f } from "../../clsx-OuTLNxxd.js";
-import { Button as y } from "../button/index.js";
-import { IconButton as T } from "../icon-button/index.js";
-import { Surface as b } from "../surface/index.js";
-import { Text as D } from "../text/index.js";
-import { View as k } from "../view/index.js";
-import { t as x } from "../../transitions.module-CWX8e5cx.js";
-import { u as v, a as N, D as O, b as S, c as w, d as B, e as V, f as j, s as a, g as z, h as $, i as P } from "../../dialog.module-BeF-6XAo.js";
-import * as M from "react";
-import { a as W } from "../../useRenderElement-DwToLA61.js";
-function q(t) {
-  const {
-    children: r,
-    open: n,
-    defaultOpen: l = !1,
-    onOpenChange: d,
-    onOpenChangeComplete: u,
-    disablePointerDismissal: i = !1,
-    modal: s = !0,
-    actionsRef: p,
-    handle: g,
-    triggerId: m,
-    defaultTriggerId: C = null
-  } = t, _ = v(!0), h = !!_, o = W(() => g?.store ?? new S({
-    open: n ?? l,
-    activeTriggerId: m !== void 0 ? m : C,
-    modal: s,
-    disablePointerDismissal: i,
-    nested: h
-  })).current;
-  o.useControlledProp("open", n, l), o.useControlledProp("activeTriggerId", m, C), o.useSyncedValues({
-    disablePointerDismissal: i,
-    nested: h,
-    modal: s
-  }), o.useContextCallback("onOpenChange", d), o.useContextCallback("onOpenChangeComplete", u);
-  const I = o.useState("payload");
-  N({
-    store: o,
-    actionsRef: p,
-    parentContext: _?.store.context
-  });
-  const R = M.useMemo(() => ({
-    store: o
-  }), [o]);
-  return /* @__PURE__ */ e(O.Provider, {
-    value: R,
-    children: typeof r == "function" ? r({
-      payload: I
-    }) : r
-  });
-}
-function X({
-  title: t,
-  description: r,
-  trigger: n,
-  width: l = "md",
-  background: d = "root",
-  centered: u,
-  closable: i,
-  children: s,
-  className: p,
-  ...g
-}) {
-  return /* @__PURE__ */ c(q, { ...g, children: [
-    n ? /* @__PURE__ */ e(w, { render: n }) : null,
-    /* @__PURE__ */ c(B, { children: [
-      /* @__PURE__ */ e(
-        V,
-        {
-          className: f(
-            a.dialog__backdrop,
-            x.transition_opacity
-          )
-        }
-      ),
-      /* @__PURE__ */ e(
-        j,
-        {
-          className: f(
-            a.dialog__popup,
-            u && a.dialog__popup_centered,
-            x.transition_scale
-          ),
-          children: /* @__PURE__ */ c(
-            b,
-            {
-              background: d,
-              className: f(
-                a.dialog__content,
-                a[`dialog__content_width_${l}`],
-                p
-              ),
-              children: [
-                t || r ? /* @__PURE__ */ c(k, { className: a.dialog__header, children: [
-                  t ? /* @__PURE__ */ e(D, { render: /* @__PURE__ */ e(z, {}), size: "2xl", children: t }) : null,
-                  r ? /* @__PURE__ */ e(
-                    D,
-                    {
-                      multiline: !0,
-                      color: "dimmer",
-                      render: /* @__PURE__ */ e($, {}),
-                      children: r
-                    }
-                  ) : null
-                ] }) : null,
-                s,
-                i ? /* @__PURE__ */ e(
-                  P,
-                  {
-                    "data-framework-close": !0,
-                    className: a.dialog__close,
-                    render: /* @__PURE__ */ e(
-                      T,
-                      {
-                        size: "sm",
-                        icon: "close-line",
-                        alt: "Close",
-                        interactive: "no-fill"
-                      }
-                    )
-                  }
-                ) : null
-              ]
-            }
-          )
-        }
-      )
-    ] })
-  ] });
-}
-function Y(t) {
-  return /* @__PURE__ */ e(P, { render: /* @__PURE__ */ e(y, { ...t }) });
-}
+import { Dialog as i } from "./dialog.js";
 export {
-  X as Dialog,
-  Y as DialogClose
+  i as Dialog
 };

package/dist/components/heading/heading.d.ts

@@ -0,0 +1,25 @@
+import { useRender } from '@base-ui/react';
+import { Size } from '../../styles/tokens';
+import { Text } from '../text';
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
+interface HeadingProps extends useRender.ComponentProps<"h1"> {
+    /**
+     * Explicitly set heading level, which determines size.
+     * Defaults to level provided by section.
+     */
+    level?: Level;
+    /**
+     * Override text size.
+     * For example, you may want an h2 but render it as "sm".
+     */
+    size?: Size;
+    /**
+     * Override text color.
+     */
+    color?: Text.Props["color"];
+}
+declare function Heading({ level, size, color, render, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export { Heading };
+export declare namespace Heading {
+    type Props = HeadingProps;
+}

package/dist/components/heading/heading.js

@@ -0,0 +1,36 @@
+import { jsx as l } from "react/jsx-runtime";
+import { createContext as i, useContext as x } from "react";
+import { Text as c } from "../text/text.js";
+import { u as d } from "../../useRender-C3vlzS3t.js";
+import { m as p } from "../../useRenderElement-DngNDu_P.js";
+import '../../heading.css';const f = "_heading_m8x05_2", g = {
+  heading: f
+}, u = i(0), h = {
+  1: "3xl",
+  2: "2xl",
+  3: "xl",
+  4: "lg",
+  5: "md",
+  6: "md"
+};
+function v(e = 1) {
+  return Math.max(Math.min(e, 6), 1);
+}
+function _({ level: e, size: o, color: n, render: r, ...m }) {
+  const s = x(u), t = v(e || s), a = d({
+    defaultTagName: `h${t}`,
+    render: r,
+    props: p(m, { className: g.heading })
+  });
+  return /* @__PURE__ */ l(
+    c,
+    {
+      render: a,
+      size: o || h[t],
+      color: n
+    }
+  );
+}
+export {
+  _ as Heading
+};

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

@@ -1,44 +1 @@
-import { useRender } from '@base-ui/react';
-import { Size } from '../../styles/tokens';
-import { TextProps } from '../text';
-type Level = 1 | 2 | 3 | 4 | 5 | 6;
-export interface HeadingProps extends useRender.ComponentProps<"h1"> {
-    /**
-     * Explicitly set heading level, which determines size.
-     * Defaults to level provided by section.
-     */
-    level?: Level;
-    /**
-     * Override text size.
-     * For example, you may want an h2 but render it as "sm".
-     */
-    size?: Size;
-    /**
-     * Override text color.
-     */
-    color?: TextProps["color"];
-}
-export declare function Heading({ level, size, color, render, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
-export interface SectionProps extends useRender.ComponentProps<"section"> {
-    /**
-     * Explicitly set section level, but does not override heading level
-     * Automatically increases by one level from the current section
-     *
-     * @example
-     * <Section level={1}>
-     *    <Heading>1</Heading>
-     * </Section>
-     *
-     * @example
-     * <Section>
-     *    <Heading>1</Heading>
-     *    <Section>
-     *        <Heading>2</Heading>
-     *        <Heading level={6}>6</Heading>
-     *    </Section>
-     * </Section>
-     */
-    level?: Level;
-}
-export declare function Section({ level, render, ...props }: SectionProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export { Heading } from './heading';

package/dist/components/heading/index.js

@@ -1,52 +1,5 @@
 "use client";
-import { jsx as m } from "react/jsx-runtime";
-import { createContext as f, useContext as i } from "react";
-import { Text as x } from "../text/index.js";
-import { u as c } from "../../useRender-CLx7dR_1.js";
-import { m as g } from "../../useRenderElement-DwToLA61.js";
-import '../../index11.css';const p = "_heading_qlffn_1", v = {
-  heading: p
-}, h = {
-  1: "3xl",
-  2: "2xl",
-  3: "xl",
-  4: "lg",
-  5: "md",
-  6: "md"
-}, s = f(0);
-function _({
-  level: e,
-  size: t,
-  color: n,
-  render: o,
-  ...r
-}) {
-  const l = i(s), a = d(e || l), u = c({
-    defaultTagName: `h${a}`,
-    render: o,
-    props: g(r, { className: v.heading })
-  });
-  return /* @__PURE__ */ m(
-    x,
-    {
-      render: u,
-      size: t || h[a],
-      color: n
-    }
-  );
-}
-function M({ level: e, render: t, ...n }) {
-  const o = i(s) ?? 0, r = d(e || o + 1), l = c({
-    defaultTagName: "section",
-    render: t,
-    props: n
-  });
-  return /* @__PURE__ */ m(s.Provider, { value: r, children: l });
-}
-function d(e = 1) {
-  return Math.max(Math.min(e, 6), 1);
-}
+import { Heading as n } from "./heading.js";
 export {
-  _ as Heading,
-  M as Section
+  n as Heading
 };

package/dist/components/icon/icon.d.ts

@@ -0,0 +1,28 @@
+import { ComponentProps } from 'react';
+import { ColorToken, Size } from '../../styles/tokens';
+import { IconName } from './icon.types';
+interface IconProps extends Omit<ComponentProps<"svg">, "name"> {
+    /**
+     * Overrides the icon size provider.
+     * Defaults to "md".
+     */
+    size?: Size;
+    /** Icon name */
+    name: IconName;
+    /**
+     * Icon fill color
+     * You probably should provide a color token, but we allow any color
+     */
+    color?: ColorToken | (string & {});
+    /**
+     * Use like `img alt` attribute.
+     * Leave empty if icon is purely decorative.
+     */
+    alt?: string;
+}
+declare function Icon({ size, name, color, alt, className, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export { Icon };
+export declare namespace Icon {
+    type Props = IconProps;
+    type Name = IconName;
+}

package/dist/components/icon/icon.js

@@ -0,0 +1,43 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { c as z } from "../../clsx-OuTLNxxd.js";
+import "react";
+import x from "remixicon/fonts/remixicon.symbol.svg";
+import '../../icon.css';const m = "_icon_ol0rk_2", d = "_icon_size_sm_ol0rk_14", f = "_icon_size_md_ol0rk_19", p = "_icon_size_lg_ol0rk_23", k = "_icon_size_xl_ol0rk_27", g = "_icon_size_2xl_ol0rk_31", a = "_icon_size_3xl_ol0rk_35", s = {
+  icon: m,
+  icon_size_sm: d,
+  icon_size_md: f,
+  icon_size_lg: p,
+  icon_size_xl: k,
+  icon_size_2xl: g,
+  icon_size_3xl: a
+};
+function $({
+  size: n = "md",
+  name: c,
+  color: e,
+  alt: i,
+  className: l,
+  ...r
+}) {
+  const _ = `${x}#ri-${c}`;
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      preserveAspectRatio: "xMidYMin",
+      viewBox: "0 0 24 24",
+      "aria-hidden": !i,
+      focusable: !1,
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: e || "currentColor",
+      className: z(s.icon, s[`icon_size_${n}`], l),
+      ...r,
+      children: [
+        i ? /* @__PURE__ */ o("title", { children: i }) : null,
+        /* @__PURE__ */ o("use", { xlinkHref: _, href: _ })
+      ]
+    }
+  );
+}
+export {
+  $ as Icon
+};