@koide-labs/ui 0.1.1 → 0.1.2

package/dist/components/spinner/spinner.js

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

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

@@ -1,53 +1,53 @@
 import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import { c as v } from "../../clsx-OuTLNxxd.js";
-import { T as x } from "../../tooltip-oCp-elli.js";
-import { View as r } from "../view/view.js";
-import { Avatar as o } from "../avatar/avatar.js";
+import { c as o } from "../../clsx-OuTLNxxd.js";
+import { T as n } from "../../tooltip-DZkByWDR.js";
+import { View as i } from "../view/view.js";
+import { Avatar as d } from "../avatar/avatar.js";
 import { Text as k } from "../text/text.js";
 import '../../stacked-avatars.css';const a = {
-  "stacked-avatars": "_stacked-avatars_qhxl3_2",
-  "stacked-avatars__avatar": "_stacked-avatars__avatar_qhxl3_8",
-  "stacked-avatars__avatar_color": "_stacked-avatars__avatar_color_qhxl3_13",
-  "stacked-avatars__visible": "_stacked-avatars__visible_qhxl3_17",
-  "stacked-avatars__visible_size_sm": "_stacked-avatars__visible_size_sm_qhxl3_35",
-  "stacked-avatars__visible_size_md": "_stacked-avatars__visible_size_md_qhxl3_39",
-  "stacked-avatars__visible_size_lg": "_stacked-avatars__visible_size_lg_qhxl3_43",
-  "stacked-avatars__visible_size_xl": "_stacked-avatars__visible_size_xl_qhxl3_47",
-  "stacked-avatars__visible_size_2xl": "_stacked-avatars__visible_size_2xl_qhxl3_51",
-  "stacked-avatars__visible_size_3xl": "_stacked-avatars__visible_size_3xl_qhxl3_55",
-  "stacked-avatars__tooltip-content": "_stacked-avatars__tooltip-content_qhxl3_60",
-  "stacked-avatars__tooltip-user": "_stacked-avatars__tooltip-user_qhxl3_70",
-  "stacked-avatars__tooltip-text": "_stacked-avatars__tooltip-text_qhxl3_78"
+  "stacked-avatars": "_stacked-avatars_1iola_2",
+  "stacked-avatars__avatar": "_stacked-avatars__avatar_1iola_8",
+  "stacked-avatars__avatar_color": "_stacked-avatars__avatar_color_1iola_13",
+  "stacked-avatars__visible": "_stacked-avatars__visible_1iola_17",
+  "stacked-avatars__visible_size_sm": "_stacked-avatars__visible_size_sm_1iola_35",
+  "stacked-avatars__visible_size_md": "_stacked-avatars__visible_size_md_1iola_39",
+  "stacked-avatars__visible_size_lg": "_stacked-avatars__visible_size_lg_1iola_43",
+  "stacked-avatars__visible_size_xl": "_stacked-avatars__visible_size_xl_1iola_47",
+  "stacked-avatars__visible_size_2xl": "_stacked-avatars__visible_size_2xl_1iola_51",
+  "stacked-avatars__visible_size_3xl": "_stacked-avatars__visible_size_3xl_1iola_55",
+  "stacked-avatars__tooltip-content": "_stacked-avatars__tooltip-content_1iola_60",
+  "stacked-avatars__tooltip-user": "_stacked-avatars__tooltip-user_1iola_70",
+  "stacked-avatars__tooltip-text": "_stacked-avatars__tooltip-text_1iola_78"
 };
-function f({
+function N({
   users: s,
   visibleUsers: e = 3,
-  size: d = "md"
+  size: v = "md"
 }) {
   return /* @__PURE__ */ t(
-    x,
+    n,
     {
       className: a["stacked-avatars__tooltip-content"],
-      trigger: /* @__PURE__ */ c(r, { className: a["stacked-avatars"], children: [
-        s.slice(0, e).map(({ color: l, className: i, ..._ }, m) => /* @__PURE__ */ t(r, { color: l, children: /* @__PURE__ */ t(
-          o,
+      trigger: /* @__PURE__ */ c(i, { className: a["stacked-avatars"], children: [
+        s.slice(0, e).map(({ color: r, className: l, ..._ }, m) => /* @__PURE__ */ t(i, { color: r, children: /* @__PURE__ */ t(
+          d,
           {
-            size: d,
-            className: v(
+            size: v,
+            className: o(
               a["stacked-avatars__avatar"],
               a["stacked-avatars__avatar_color"],
-              i
+              l
             ),
             style: { zIndex: m },
             ..._
           }
         ) }, _.username)),
         s.length > e && /* @__PURE__ */ t(
-          r,
+          i,
           {
-            className: v(
+            className: o(
               a["stacked-avatars__visible"],
-              a[`stacked-avatars__visible_size_${d}`]
+              a[`stacked-avatars__visible_size_${v}`]
             ),
             style: { zIndex: e + 1 },
             children: /* @__PURE__ */ c(k, { size: "sm", children: [
@@ -57,16 +57,16 @@ function f({
           }
         )
       ] }),
-      children: s.map(({ color: l, className: i, ..._ }) => /* @__PURE__ */ c(
-        r,
+      children: s.map(({ color: r, className: l, ..._ }) => /* @__PURE__ */ c(
+        i,
         {
-          color: l,
+          color: r,
           className: a["stacked-avatars__tooltip-user"],
           children: [
             /* @__PURE__ */ t(
-              o,
+              d,
               {
-                className: v(a["stacked-avatars__avatar_color"], i),
+                className: o(a["stacked-avatars__avatar_color"], l),
                 ..._,
                 size: "sm"
               },
@@ -88,5 +88,5 @@ function f({
   );
 }
 export {
-  f as StackedAvatars
+  N as StackedAvatars
 };

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

@@ -1,19 +1,19 @@
-import { jsxs as _, jsx as s } from "react/jsx-runtime";
+import { jsxs as _, jsx as a } from "react/jsx-runtime";
 import { c as b } from "../../clsx-OuTLNxxd.js";
 import { View as i } from "../view/view.js";
 import { Icon as d } from "../icon/icon.js";
-import { Heading as p } from "../heading/heading.js";
-import { Text as y } from "../text/text.js";
+import { Heading as v } from "../heading/heading.js";
+import { Text as p } from "../text/text.js";
 import '../../status-banner.css';const t = {
-  "status-banner": "_status-banner_1ci6y_2",
-  "status-banner_variant_neutral": "_status-banner_variant_neutral_1ci6y_15",
-  "status-banner_variant_colorway": "_status-banner_variant_colorway_1ci6y_21",
-  "status-banner_size_md": "_status-banner_size_md_1ci6y_27",
-  "status-banner_size_lg": "_status-banner_size_lg_1ci6y_33",
-  "status-banner__content": "_status-banner__content_1ci6y_39",
-  "status-banner__description": "_status-banner__description_1ci6y_45",
-  "status-banner__close": "_status-banner__close_1ci6y_50"
-}, a = {
+  "status-banner": "_status-banner_vyl9a_2",
+  "status-banner_variant_neutral": "_status-banner_variant_neutral_vyl9a_15",
+  "status-banner_variant_colorway": "_status-banner_variant_colorway_vyl9a_21",
+  "status-banner_size_md": "_status-banner_size_md_vyl9a_27",
+  "status-banner_size_lg": "_status-banner_size_lg_vyl9a_33",
+  "status-banner__content": "_status-banner__content_vyl9a_39",
+  "status-banner__description": "_status-banner__description_vyl9a_45",
+  "status-banner__close": "_status-banner__close_vyl9a_50"
+}, s = {
   md: {
     icon: "md",
     title: "md",
@@ -28,35 +28,35 @@ import '../../status-banner.css';const t = {
 function w({
   color: e,
   icon: r,
-  title: c,
+  title: l,
   description: o,
   size: n = "lg",
-  render: l,
-  className: u,
+  render: u,
+  className: c,
   ...m
 }) {
   return /* @__PURE__ */ _(
     i,
     {
-      render: l,
+      render: u,
       ...m,
       color: e,
       className: b(
         t["status-banner"],
         t[`status-banner_size_${n}`],
         e ? t["status-banner_variant_colorway"] : t["status-banner_variant_neutral"],
-        u
+        c
       ),
       children: [
-        r ? /* @__PURE__ */ s(d, { name: r, size: a[n].icon }) : null,
+        r ? /* @__PURE__ */ a(d, { name: r, size: s[n].icon }) : null,
         /* @__PURE__ */ _(i, { className: t["status-banner__content"], children: [
-          /* @__PURE__ */ s(p, { level: 1, size: a[n].title, color: "inherit", children: c }),
-          /* @__PURE__ */ s(
-            y,
+          /* @__PURE__ */ a(v, { level: 1, size: s[n].title, color: "inherit", children: l }),
+          /* @__PURE__ */ a(
+            p,
             {
               className: t["status-banner__description"],
               multiline: !0,
-              size: a[n].description,
+              size: s[n].description,
               color: "inherit",
               children: o
             }

package/dist/components/surface/surface.js

@@ -1,25 +1,25 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import { c as u } from "../../clsx-OuTLNxxd.js";
 import { createContext as i, useContext as h } from "react";
 import { View as l } from "../view/view.js";
-import '../../surface.css';const _ = "_surface_38ylh_2", s = {
+import '../../surface.css';const _ = "_surface_8k4fs_2", a = {
   surface: _,
-  "surface--root": "_surface--root_38ylh_6",
-  "surface--default": "_surface--default_38ylh_14",
-  "surface--higher": "_surface--higher_38ylh_22",
-  "surface--highest": "_surface--highest_38ylh_30"
-}, c = i(0);
-function p({ background: e, elevated: r, className: n, ...f }) {
-  let t = h(c);
-  return e ? t = m(e) : r && t++, /* @__PURE__ */ a(c.Provider, { value: t, children: /* @__PURE__ */ a(
+  "surface--root": "_surface--root_8k4fs_6",
+  "surface--default": "_surface--default_8k4fs_14",
+  "surface--higher": "_surface--higher_8k4fs_22",
+  "surface--highest": "_surface--highest_8k4fs_30"
+}, f = i(0);
+function p({ background: e, elevated: r, className: c, ...n }) {
+  let t = h(f);
+  return e ? t = m(e) : r && t++, /* @__PURE__ */ s(f.Provider, { value: t, children: /* @__PURE__ */ s(
     l,
     {
       className: u(
-        s.surface,
-        s[`surface--${g(t)}`],
-        n
+        a.surface,
+        a[`surface--${g(t)}`],
+        c
       ),
-      ...f
+      ...n
     }
   ) });
 }

package/dist/components/switch/switch.js

@@ -1,12 +1,12 @@
-import { jsxs as ae, jsx as d } from "react/jsx-runtime";
+import { jsxs as ae, jsx as c } from "react/jsx-runtime";
 import { View as se } from "../view/view.js";
 import * as s from "react";
 import { f as ie } from "../../formatErrorMessage-BqPuTBN-.js";
-import { d as re, m as ce, u as M } from "../../useRenderElement-DngNDu_P.js";
-import { f as de, c as le, a as O, u as ue, b as fe } from "../../LabelableContext-Be1u-eFg.js";
+import { d as re, m as de, u as M } from "../../useRenderElement-DngNDu_P.js";
+import { f as ce, c as le, a as O, u as ue, b as fe } from "../../LabelableContext-Be1u-eFg.js";
 import { u as me } from "../../useControlled-Du4sJyMj.js";
-import { u as pe } from "../../useStableCallback-DKZHlUAT.js";
-import { u as he } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
+import { u as he } from "../../useStableCallback-DKZHlUAT.js";
+import { u as pe } 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-CX4tcfzK.js";
@@ -25,7 +25,7 @@ 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,
+  ...ce,
   checked(e) {
     return e ? {
       [B.checked]: ""
@@ -37,8 +37,8 @@ const T = {
   const {
     checked: b,
     className: j,
-    defaultChecked: p,
-    id: h,
+    defaultChecked: h,
+    id: p,
     inputRef: k,
     name: v,
     nativeButton: U = !1,
@@ -65,13 +65,13 @@ const T = {
     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,
+  } = ue(), o = Y || z, r = Z ?? v, _ = he(H), d = s.useRef(null), E = re(d, k, n.inputRef), f = s.useRef(null), N = ve(), R = Ce({
+    id: p,
     implicit: !1,
     controlRef: f
   }), [t, P] = me({
     controlled: b,
-    default: !!p,
+    default: !!h,
     name: "Switch",
     state: "checked"
   });
@@ -82,9 +82,9 @@ const T = {
     controlRef: f,
     name: r,
     getValue: () => t
-  }), he(() => {
-    c.current && C(c.current.checked);
-  }, [c, C]), we(t, () => {
+  }), pe(() => {
+    d.current && C(d.current.checked);
+  }, [d, C]), we(t, () => {
     G(r), K(t !== Q.initialValue), C(t), W() ? n.commit(t) : n.commit(t, !0);
   });
   const {
@@ -103,13 +103,13 @@ const T = {
       o || x(!0);
     },
     onBlur() {
-      const a = c.current;
+      const a = d.current;
       !a || o || (J(!0), x(!1), X === "onBlur" && n.commit(a.checked));
     },
     onClick(a) {
-      l || o || (a.preventDefault(), c?.current?.click());
+      l || o || (a.preventDefault(), d?.current?.click());
     }
-  }, ne = s.useMemo(() => ce({
+  }, ne = s.useMemo(() => de({
     checked: t,
     disabled: o,
     id: R,
@@ -143,11 +143,11 @@ const T = {
   });
   return /* @__PURE__ */ ae(y.Provider, {
     value: V,
-    children: [oe, !t && r && w !== void 0 && /* @__PURE__ */ d("input", {
+    children: [oe, !t && r && w !== void 0 && /* @__PURE__ */ c("input", {
       type: "hidden",
       name: r,
       value: w
-    }), /* @__PURE__ */ d("input", {
+    }), /* @__PURE__ */ c("input", {
       ...ne
     })]
   });
@@ -157,34 +157,34 @@ const L = /* @__PURE__ */ s.forwardRef(function(i, m) {
   const {
     render: b,
     className: j,
-    ...p
+    ...h
   } = i, {
-    state: h
+    state: p
   } = O(), k = xe(), v = {
-    ...h,
+    ...p,
     ...k
   };
   return M("span", i, {
     state: v,
     ref: m,
     stateAttributesMapping: T,
-    props: p
+    props: h
   });
 });
 process.env.NODE_ENV !== "production" && (L.displayName = "SwitchThumb");
-const _e = "_switch__thumb_m68cc_25", F = {
-  switch: "_switch_m68cc_2",
+const _e = "_switch__thumb_1hdfo_25", F = {
+  switch: "_switch_1hdfo_2",
   switch__thumb: _e
 };
 function Ue({ color: e = "primary", ...i }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     se,
     {
-      render: /* @__PURE__ */ d(q, { ...i }),
+      render: /* @__PURE__ */ c(q, { ...i }),
       className: F.switch,
       interactive: "fill-outline",
       color: e,
-      children: /* @__PURE__ */ d(L, { className: F.switch__thumb })
+      children: /* @__PURE__ */ c(L, { className: F.switch__thumb })
     }
   );
 }