@koide-labs/ui 0.1.2 → 0.1.4

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

@@ -1,72 +1,72 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-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 { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { c as v } from "../../clsx-OuTLNxxd.js";
+import { T as b } from "../../tooltip-JPnUwFFR.js";
+import { View as r } from "../view/view.js";
+import { Avatar as o } from "../avatar/avatar.js";
 import { Text as k } from "../text/text.js";
 import '../../stacked-avatars.css';const a = {
-  "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"
+  "stacked-avatars": "_stacked-avatars_1bugq_3",
+  "stacked-avatars__avatar": "_stacked-avatars__avatar_1bugq_9",
+  "stacked-avatars__avatar_color": "_stacked-avatars__avatar_color_1bugq_14",
+  "stacked-avatars__visible": "_stacked-avatars__visible_1bugq_18",
+  "stacked-avatars__visible_size_sm": "_stacked-avatars__visible_size_sm_1bugq_36",
+  "stacked-avatars__visible_size_md": "_stacked-avatars__visible_size_md_1bugq_40",
+  "stacked-avatars__visible_size_lg": "_stacked-avatars__visible_size_lg_1bugq_44",
+  "stacked-avatars__visible_size_xl": "_stacked-avatars__visible_size_xl_1bugq_48",
+  "stacked-avatars__visible_size_2xl": "_stacked-avatars__visible_size_2xl_1bugq_52",
+  "stacked-avatars__visible_size_3xl": "_stacked-avatars__visible_size_3xl_1bugq_56",
+  "stacked-avatars__tooltip-content": "_stacked-avatars__tooltip-content_1bugq_61",
+  "stacked-avatars__tooltip-user": "_stacked-avatars__tooltip-user_1bugq_71",
+  "stacked-avatars__tooltip-text": "_stacked-avatars__tooltip-text_1bugq_79"
 };
-function N({
+function q({
   users: s,
   visibleUsers: e = 3,
-  size: v = "md"
+  size: d = "md"
 }) {
   return /* @__PURE__ */ t(
-    n,
+    b,
     {
       className: a["stacked-avatars__tooltip-content"],
-      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,
+      trigger: /* @__PURE__ */ l(r, { className: a["stacked-avatars"], children: [
+        s.slice(0, e).map(({ color: i, className: c, ..._ }, m) => /* @__PURE__ */ t(r, { color: i, children: /* @__PURE__ */ t(
+          o,
           {
-            size: v,
-            className: o(
+            size: d,
+            className: v(
               a["stacked-avatars__avatar"],
               a["stacked-avatars__avatar_color"],
-              l
+              c
             ),
             style: { zIndex: m },
             ..._
           }
         ) }, _.username)),
         s.length > e && /* @__PURE__ */ t(
-          i,
+          r,
           {
-            className: o(
+            className: v(
               a["stacked-avatars__visible"],
-              a[`stacked-avatars__visible_size_${v}`]
+              a[`stacked-avatars__visible_size_${d}`]
             ),
             style: { zIndex: e + 1 },
-            children: /* @__PURE__ */ c(k, { size: "sm", children: [
+            children: /* @__PURE__ */ l(k, { size: "sm", children: [
               "+",
               s.length - e
             ] })
           }
         )
       ] }),
-      children: s.map(({ color: r, className: l, ..._ }) => /* @__PURE__ */ c(
-        i,
+      children: s.map(({ color: i, className: c, ..._ }) => /* @__PURE__ */ l(
+        r,
         {
-          color: r,
+          color: i,
           className: a["stacked-avatars__tooltip-user"],
           children: [
             /* @__PURE__ */ t(
-              d,
+              o,
               {
-                className: o(a["stacked-avatars__avatar_color"], l),
+                className: v(a["stacked-avatars__avatar_color"], c),
                 ..._,
                 size: "sm"
               },
@@ -88,5 +88,5 @@ function N({
   );
 }
 export {
-  N as StackedAvatars
+  q as StackedAvatars
 };

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

@@ -1,19 +1,19 @@
-import { jsxs as _, jsx as a } from "react/jsx-runtime";
+import { jsxs as _, jsx as s } 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 v } from "../heading/heading.js";
-import { Text as p } from "../text/text.js";
+import { Heading as p } from "../heading/heading.js";
+import { Text as x } from "../text/text.js";
 import '../../status-banner.css';const t = {
-  "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 = {
+  "status-banner": "_status-banner_x87er_3",
+  "status-banner_variant_neutral": "_status-banner_variant_neutral_x87er_16",
+  "status-banner_variant_colorway": "_status-banner_variant_colorway_x87er_22",
+  "status-banner_size_md": "_status-banner_size_md_x87er_28",
+  "status-banner_size_lg": "_status-banner_size_lg_x87er_34",
+  "status-banner__content": "_status-banner__content_x87er_40",
+  "status-banner__description": "_status-banner__description_x87er_46",
+  "status-banner__close": "_status-banner__close_x87er_51"
+}, a = {
   md: {
     icon: "md",
     title: "md",
@@ -25,11 +25,11 @@ import '../../status-banner.css';const t = {
     description: "md"
   }
 };
-function w({
+function y({
   color: e,
   icon: r,
-  title: l,
-  description: o,
+  title: o,
+  description: l,
   size: n = "lg",
   render: u,
   className: c,
@@ -48,17 +48,17 @@ function w({
         c
       ),
       children: [
-        r ? /* @__PURE__ */ a(d, { name: r, size: s[n].icon }) : null,
+        r ? /* @__PURE__ */ s(d, { name: r, size: a[n].icon }) : null,
         /* @__PURE__ */ _(i, { className: t["status-banner__content"], children: [
-          /* @__PURE__ */ a(v, { level: 1, size: s[n].title, color: "inherit", children: l }),
-          /* @__PURE__ */ a(
-            p,
+          /* @__PURE__ */ s(p, { level: 1, size: a[n].title, color: "inherit", children: o }),
+          /* @__PURE__ */ s(
+            x,
             {
               className: t["status-banner__description"],
               multiline: !0,
-              size: s[n].description,
+              size: a[n].description,
               color: "inherit",
-              children: o
+              children: l
             }
           )
         ] })
@@ -67,5 +67,5 @@ function w({
   );
 }
 export {
-  w as StatusBanner
+  y as StatusBanner
 };

package/dist/components/surface/surface.js

@@ -1,30 +1,30 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as a } 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_8k4fs_2", a = {
-  surface: _,
-  "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(
+import '../../surface.css';const m = "_surface_4hgme_3", s = {
+  surface: m,
+  "surface--root": "_surface--root_4hgme_7",
+  "surface--default": "_surface--default_4hgme_15",
+  "surface--higher": "_surface--higher_4hgme_23",
+  "surface--highest": "_surface--highest_4hgme_31"
+}, c = i(0);
+function C({ background: e, elevated: r, className: n, ...f }) {
+  let t = h(c);
+  return e ? t = _(e) : r && t++, /* @__PURE__ */ a(c.Provider, { value: t, children: /* @__PURE__ */ a(
     l,
     {
       className: u(
-        a.surface,
-        a[`surface--${g(t)}`],
-        c
+        s.surface,
+        s[`surface--${g(t)}`],
+        n
       ),
-      ...n
+      ...f
     }
   ) });
 }
 const o = ["root", "default", "higher", "highest"];
-function m(e = "root") {
+function _(e = "root") {
   const r = o.indexOf(e);
   return Math.min(Math.max(r, 0), o.length - 1);
 }
@@ -32,5 +32,5 @@ function g(e = 0) {
   return o[e] || "root";
 }
 export {
-  p as Surface
+  C as Surface
 };

package/dist/components/switch/switch.js

@@ -1,12 +1,12 @@
-import { jsxs as ae, jsx as c } from "react/jsx-runtime";
+import { jsxs as ae, jsx as d } 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 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 { 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 { u as me } from "../../useControlled-Du4sJyMj.js";
-import { u as he } from "../../useStableCallback-DKZHlUAT.js";
-import { u as pe } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
+import { u as pe } from "../../useStableCallback-DKZHlUAT.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-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 = {
-  ...ce,
+  ...de,
   checked(e) {
     return e ? {
       [B.checked]: ""
@@ -37,8 +37,8 @@ const T = {
   const {
     checked: b,
     className: j,
-    defaultChecked: h,
-    id: p,
+    defaultChecked: p,
+    id: h,
     inputRef: k,
     name: v,
     nativeButton: U = !1,
@@ -65,13 +65,13 @@ const T = {
     validation: n
   } = O(), {
     labelId: $
-  } = 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,
+  } = 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: b,
-    default: !!h,
+    default: !!p,
     name: "Switch",
     state: "checked"
   });
@@ -82,9 +82,9 @@ const T = {
     controlRef: f,
     name: r,
     getValue: () => t
-  }), pe(() => {
-    d.current && C(d.current.checked);
-  }, [d, C]), we(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 {
@@ -103,13 +103,13 @@ const T = {
       o || x(!0);
     },
     onBlur() {
-      const a = d.current;
+      const a = c.current;
       !a || o || (J(!0), x(!1), X === "onBlur" && n.commit(a.checked));
     },
     onClick(a) {
-      l || o || (a.preventDefault(), d?.current?.click());
+      l || o || (a.preventDefault(), c?.current?.click());
     }
-  }, ne = s.useMemo(() => de({
+  }, ne = s.useMemo(() => ce({
     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__ */ c("input", {
+    children: [oe, !t && r && w !== void 0 && /* @__PURE__ */ d("input", {
       type: "hidden",
       name: r,
       value: w
-    }), /* @__PURE__ */ c("input", {
+    }), /* @__PURE__ */ d("input", {
       ...ne
     })]
   });
@@ -157,34 +157,34 @@ const L = /* @__PURE__ */ s.forwardRef(function(i, m) {
   const {
     render: b,
     className: j,
-    ...h
+    ...p
   } = i, {
-    state: p
+    state: h
   } = O(), k = xe(), v = {
-    ...p,
+    ...h,
     ...k
   };
   return M("span", i, {
     state: v,
     ref: m,
     stateAttributesMapping: T,
-    props: h
+    props: p
   });
 });
 process.env.NODE_ENV !== "production" && (L.displayName = "SwitchThumb");
-const _e = "_switch__thumb_1hdfo_25", F = {
-  switch: "_switch_1hdfo_2",
+const _e = "_switch__thumb_ap37s_26", F = {
+  switch: "_switch_ap37s_3",
   switch__thumb: _e
 };
 function Ue({ color: e = "primary", ...i }) {
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ d(
     se,
     {
-      render: /* @__PURE__ */ c(q, { ...i }),
+      render: /* @__PURE__ */ d(q, { ...i }),
       className: F.switch,
       interactive: "fill-outline",
       color: e,
-      children: /* @__PURE__ */ c(L, { className: F.switch__thumb })
+      children: /* @__PURE__ */ d(L, { className: F.switch__thumb })
     }
   );
 }