@koide-labs/ui 0.0.3 → 0.0.4

package/dist/components/icon-button/index.js

@@ -1,10 +1,10 @@
+"use client";
 import { jsx as t } from "react/jsx-runtime";
 import { c as s } from "../../clsx-OuTLNxxd.js";
-import "../../styles/tokens.js";
 import { Icon as u } from "../icon/index.js";
 import { View as b } from "../view/index.js";
 import { B as m } from "../../Button-DrPFFzo7.js";
-import '../../index11.css';const n = {
+import '../../index12.css';const _ = {
   "icon-button": "_icon-button_1xtat_1",
   "icon-button_size_sm": "_icon-button_size_sm_1xtat_11",
   "icon-button_size_md": "_icon-button_size_md_1xtat_15",
@@ -13,12 +13,12 @@ import '../../index11.css';const n = {
   "icon-button_size_2xl": "_icon-button_size_2xl_1xtat_27",
   "icon-button_size_3xl": "_icon-button_size_3xl_1xtat_31"
 };
-function f({
+function d({
   icon: i,
   alt: e,
   size: o = "md",
   render: c,
-  ..._
+  ...n
 }) {
   return /* @__PURE__ */ t(
     b,
@@ -28,18 +28,18 @@ function f({
         m,
         {
           className: s(
-            n["icon-button"],
-            n[`icon-button_size_${o}`]
+            _["icon-button"],
+            _[`icon-button_size_${o}`]
           ),
-          focusableWhenDisabled: !!_.loading,
+          focusableWhenDisabled: !!n.loading,
           render: c
         }
       ),
-      ..._,
+      ...n,
       children: /* @__PURE__ */ t(u, { name: i, size: o, alt: e })
     }
   );
 }
 export {
-  f as IconButton
+  d as IconButton
 };

package/dist/components/inline-code/index.js

@@ -1,19 +1,20 @@
+"use client";
 import { jsx as e } from "react/jsx-runtime";
-import { c as r } from "../../clsx-OuTLNxxd.js";
-import { Surface as c } from "../surface/index.js";
+import { c } from "../../clsx-OuTLNxxd.js";
+import { Surface as r } from "../surface/index.js";
 import { Text as l } from "../text/index.js";
-import '../../index12.css';const i = {
+import '../../index13.css';const o = {
   "inline-code": "_inline-code_ai49m_1",
   "inline-code_colorway": "_inline-code_colorway_ai49m_11"
-}, a = ({ color: o, ...n }) => /* @__PURE__ */ e(
-  c,
+}, a = ({ color: i, ...n }) => /* @__PURE__ */ e(
+  r,
   {
     elevated: !0,
-    className: r(
-      i["inline-code"],
-      o && i["inline-code_colorway"]
+    className: c(
+      o["inline-code"],
+      i && o["inline-code_colorway"]
     ),
-    color: o,
+    color: i,
     children: /* @__PURE__ */ e(l, { size: "sm", color: "inherit", children: /* @__PURE__ */ e("code", { ...n }) })
   }
 );

package/dist/components/input/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as u } from "react/jsx-runtime";
 import { c as O } from "../../clsx-OuTLNxxd.js";
 import { View as S } from "../view/index.js";
@@ -19,16 +20,16 @@ const V = /* @__PURE__ */ d.forwardRef(function(a, i) {
     value: o,
     disabled: E = !1,
     onValueChange: F,
-    defaultValue: f,
+    defaultValue: c,
     ...I
   } = a, {
-    state: c,
+    state: f,
     name: D,
     disabled: P
   } = g(), s = P || E, m = D ?? y, T = d.useMemo(() => ({
-    ...c,
+    ...f,
     disabled: s
-  }), [c, s]), {
+  }), [f, s]), {
     setTouched: p,
     setDirty: h,
     validityData: w,
@@ -47,7 +48,7 @@ const V = /* @__PURE__ */ d.forwardRef(function(a, i) {
   }, [t.inputRef, r, o]);
   const [C, L] = j({
     controlled: o,
-    default: f,
+    default: c,
     name: "FieldControl",
     state: "value"
   }), k = o !== void 0, B = _((e, n) => {
@@ -72,7 +73,7 @@ const V = /* @__PURE__ */ d.forwardRef(function(a, i) {
       ...k ? {
         value: C
       } : {
-        defaultValue: f
+        defaultValue: c
       },
       onChange(e) {
         const n = e.currentTarget.value;

package/dist/components/meter/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as m, jsxs as M, Fragment as g } from "react/jsx-runtime";
 import { c as j } from "../../clsx-OuTLNxxd.js";
 import { Text as h } from "../text/index.js";

package/dist/components/multiline-input/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as T } from "react/jsx-runtime";
 import { c as R } from "../../clsx-OuTLNxxd.js";
 import { useRef as W, useEffect as Y } from "react";

package/dist/components/number-input/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as Ue, jsx as se } from "react/jsx-runtime";
 import { c as Ot } from "../../clsx-OuTLNxxd.js";
 import * as o from "react";

package/dist/components/password-input/index.js

@@ -1,15 +1,16 @@
+"use client";
 import { jsxs as n, jsx as s } from "react/jsx-runtime";
 import { useState as i } from "react";
 import { IconButton as _ } from "../icon-button/index.js";
 import { Input as a } from "../input/index.js";
-import { View as w } from "../view/index.js";
-import '../../index13.css';const t = {
+import { View as u } from "../view/index.js";
+import '../../index14.css';const t = {
   "password-input__root": "_password-input__root_g27z2_1",
   "password-input__eye": "_password-input__eye_g27z2_5"
 };
 function y(e) {
   const [o, r] = i(!1);
-  return /* @__PURE__ */ n(w, { className: t["password-input__root"], children: [
+  return /* @__PURE__ */ n(u, { className: t["password-input__root"], children: [
     /* @__PURE__ */ s(a, { type: o ? "text" : "password", ...e }),
     /* @__PURE__ */ s(
       _,

package/dist/components/pill/index.js

@@ -1,12 +1,13 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { c as e } from "../../clsx-OuTLNxxd.js";
-import { textify as m } from "../../-utils.js";
+"use client";
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { c } from "../../clsx-OuTLNxxd.js";
+import { textify as s } from "../../-utils.js";
 import { Icon as r } from "../icon/index.js";
-import { View as s } from "../view/index.js";
-import '../../index14.css';const f = "_pill_wezrb_1", a = "_pill_icon_left_wezrb_16", x = "_pill_icon_right_wezrb_20", _ = {
+import { View as m } from "../view/index.js";
+import '../../index15.css';const f = "_pill_wezrb_1", a = "_pill_icon_left_wezrb_16", u = "_pill_icon_right_wezrb_20", _ = {
   pill: f,
   pill_icon_left: a,
-  pill_icon_right: x
+  pill_icon_right: u
 };
 function g({
   leftIcon: l,
@@ -15,10 +16,10 @@ function g({
   children: n,
   ...p
 }) {
-  return /* @__PURE__ */ c(
-    s,
+  return /* @__PURE__ */ e(
+    m,
     {
-      className: e(
+      className: c(
         _.pill,
         l && _.pill_icon_left,
         i && _.pill_icon_right,
@@ -27,7 +28,7 @@ function g({
       ...p,
       children: [
         l ? /* @__PURE__ */ o(r, { name: l }) : null,
-        m(n, { color: "inherit" }),
+        s(n, { color: "inherit" }),
         i ? /* @__PURE__ */ o(r, { name: i }) : null
       ]
     }

package/dist/components/popover/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as u, jsxs as Y } from "react/jsx-runtime";
 import { c as Re } from "../../clsx-OuTLNxxd.js";
 import { Heading as be } from "../heading/index.js";

package/dist/components/preview-card/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as P, jsxs as q } from "react/jsx-runtime";
 import { c as pe } from "../../clsx-OuTLNxxd.js";
 import { Surface as fe } from "../surface/index.js";
@@ -30,25 +31,25 @@ function x() {
 }
 const Z = 600, $ = 300;
 function Ue(t, s = {}) {
-  const d = t.useState("domReferenceElement"), f = t.context.dataRef, {
-    delay: u
-  } = s, a = he(), n = e.useRef(!1);
+  const u = t.useState("domReferenceElement"), f = t.context.dataRef, {
+    delay: d
+  } = s, i = he(), n = e.useRef(!1);
   e.useEffect(() => {
-    const r = ye(d);
+    const r = ye(u);
     function c() {
-      const i = t.select("domReferenceElement");
-      !t.select("open") && Re(i) && i === Q(xe(i)) && (n.current = !0);
+      const a = t.select("domReferenceElement");
+      !t.select("open") && Re(a) && a === Q(xe(a)) && (n.current = !0);
     }
     return r.addEventListener("blur", c), () => {
       r.removeEventListener("blur", c);
     };
-  }, [t, d]);
+  }, [t, u]);
   const p = e.useMemo(() => ({
     onFocus(r) {
       const {
         nativeEvent: c
-      } = r, i = typeof u == "function" ? u() : u;
-      a.start(i ?? 0, () => {
+      } = r, a = typeof d == "function" ? d() : d;
+      i.start(a ?? 0, () => {
         t.setOpen(!0, G(L, c));
       });
     },
@@ -56,14 +57,14 @@ function Ue(t, s = {}) {
       n.current = !1;
       const {
         relatedTarget: c,
-        nativeEvent: i
+        nativeEvent: a
       } = r;
-      a.start(0, () => {
+      i.start(0, () => {
         const l = t.select("domReferenceElement"), m = Q(l ? l.ownerDocument : document);
-        !c && m === l || X(f.current.floatingContext?.refs.floating.current, m) || X(l, m) || t.setOpen(!1, G(L, i));
+        !c && m === l || X(f.current.floatingContext?.refs.floating.current, m) || X(l, m) || t.setOpen(!1, G(L, a));
       });
     }
-  }), [u, t, f, a]);
+  }), [d, t, f, i]);
   return e.useMemo(() => ({
     reference: p
   }), [p]);
@@ -71,15 +72,15 @@ function Ue(t, s = {}) {
 function Fe(t) {
   const {
     open: s,
-    defaultOpen: d,
+    defaultOpen: u,
     onOpenChange: f,
-    onOpenChangeComplete: u,
-    actionsRef: a
+    onOpenChangeComplete: d,
+    actionsRef: i
   } = t, n = e.useRef(Z), p = e.useRef($), r = V((v) => {
     n.current = v.delay ?? Z, p.current = v.closeDelay ?? $;
-  }), [c, i] = e.useState(null), [l, m] = e.useState(null), [w, h] = e.useState(), S = e.useRef(null), [C, T] = Ee({
+  }), [c, a] = e.useState(null), [l, m] = e.useState(null), [w, h] = e.useState(), S = e.useRef(null), [C, T] = Ee({
     controlled: s,
-    default: d,
+    default: u,
     name: "PreviewCard",
     state: "open"
   }), y = V(f), {
@@ -87,26 +88,26 @@ function Fe(t) {
     setMounted: N,
     transitionStatus: D
   } = De(C), O = V(() => {
-    N(!1), u?.(!1);
+    N(!1), d?.(!1);
   });
   ee({
-    enabled: !a,
+    enabled: !i,
     open: C,
     ref: S,
     onComplete() {
       C || O();
     }
-  }), e.useImperativeHandle(a, () => ({
+  }), e.useImperativeHandle(i, () => ({
     unmount: O
   }), [O]);
   const o = V((v, E) => {
-    const de = E.reason === J, Y = v && E.reason === L, ue = !v && (E.reason === Ne || E.reason === Oe);
+    const ue = E.reason === J, Y = v && E.reason === L, de = !v && (E.reason === Ne || E.reason === Oe);
     if (y(v, E), E.isCanceled)
       return;
     function K() {
       T(v);
     }
-    de ? ve.flushSync(K) : K(), Y || ue ? h(Y ? "focus" : "dismiss") : E.reason === J && h(void 0);
+    ue ? ve.flushSync(K) : K(), Y || de ? h(Y ? "focus" : "dismiss") : E.reason === J && h(void 0);
   }), g = Me({
     elements: {
       reference: c,
@@ -122,17 +123,17 @@ function Fe(t) {
     delay: () => ({
       close: I()
     })
-  }), ie = Ue(g, {
+  }), ae = Ue(g, {
     delay: _
   }), ce = Pe(g), {
     getReferenceProps: j,
     getFloatingProps: W
-  } = Ce([b, ie, ce]), le = e.useMemo(() => ({
+  } = Ce([b, ae, ce]), le = e.useMemo(() => ({
     open: C,
     setOpen: o,
     mounted: R,
     setMounted: N,
-    setTriggerElement: i,
+    setTriggerElement: a,
     positionerElement: l,
     setPositionerElement: m,
     popupRef: S,
@@ -141,9 +142,9 @@ function Fe(t) {
     floatingRootContext: g,
     instantType: M,
     transitionStatus: D,
-    onOpenChangeComplete: u,
+    onOpenChangeComplete: d,
     writeDelayRefs: r
-  }), [C, o, R, N, l, j, W, g, M, D, u, r]);
+  }), [C, o, R, N, l, j, W, g, M, D, d, r]);
   return /* @__PURE__ */ P(H.Provider, {
     value: le,
     children: t.children
@@ -157,38 +158,38 @@ function He() {
     throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: <PreviewCard.Portal> is missing." : F(48));
   return t;
 }
-const te = /* @__PURE__ */ e.forwardRef(function(s, d) {
+const te = /* @__PURE__ */ e.forwardRef(function(s, u) {
   const {
     keepMounted: f = !1,
-    ...u
+    ...d
   } = s, {
-    mounted: a
+    mounted: i
   } = x();
-  return a || f ? /* @__PURE__ */ P(k.Provider, {
+  return i || f ? /* @__PURE__ */ P(k.Provider, {
     value: f,
     children: /* @__PURE__ */ P(Ie, {
-      ref: d,
-      ...u
+      ref: u,
+      ...d
     })
   }) : null;
 });
 process.env.NODE_ENV !== "production" && (te.displayName = "PreviewCardPortal");
-const oe = /* @__PURE__ */ e.forwardRef(function(s, d) {
+const oe = /* @__PURE__ */ e.forwardRef(function(s, u) {
   const {
     render: f,
-    className: u,
-    delay: a,
+    className: d,
+    delay: i,
     closeDelay: n,
     ...p
   } = s, {
     open: r,
     triggerProps: c,
-    setTriggerElement: i,
+    setTriggerElement: a,
     writeDelayRefs: l
   } = x();
   Te(() => {
     l({
-      delay: a,
+      delay: i,
       closeDelay: n
     });
   });
@@ -196,7 +197,7 @@ const oe = /* @__PURE__ */ e.forwardRef(function(s, d) {
     open: r
   }), [r]);
   return A("a", s, {
-    ref: [i, d],
+    ref: [a, u],
     state: m,
     props: [c, p],
     stateAttributesMapping: we
@@ -211,16 +212,16 @@ function ne() {
     throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: <PreviewCard.Popup> and <PreviewCard.Arrow> must be used within the <PreviewCard.Positioner> component" : F(49));
   return t;
 }
-const re = /* @__PURE__ */ e.forwardRef(function(s, d) {
+const re = /* @__PURE__ */ e.forwardRef(function(s, u) {
   const {
     render: f,
-    className: u,
-    anchor: a,
+    className: d,
+    anchor: i,
     positionMethod: n = "absolute",
     side: p = "bottom",
     align: r = "center",
     sideOffset: c = 0,
-    alignOffset: i = 0,
+    alignOffset: a = 0,
     collisionBoundary: l = "clipping-ancestors",
     collisionPadding: m = 5,
     arrowPadding: w = 5,
@@ -234,14 +235,14 @@ const re = /* @__PURE__ */ e.forwardRef(function(s, d) {
     floatingRootContext: N,
     setPositionerElement: D
   } = x(), O = He(), o = _e({
-    anchor: a,
+    anchor: i,
     floatingRootContext: N,
     positionMethod: n,
     mounted: R,
     side: p,
     sideOffset: c,
     align: r,
-    alignOffset: i,
+    alignOffset: a,
     arrowPadding: w,
     collisionBoundary: l,
     collisionPadding: m,
@@ -272,7 +273,7 @@ const re = /* @__PURE__ */ e.forwardRef(function(s, d) {
     arrowStyles: o.arrowStyles
   }), [o.side, o.align, o.arrowRef, o.arrowUncentered, o.arrowStyles]), I = A("div", s, {
     state: M,
-    ref: [D, d],
+    ref: [D, u],
     props: [g, T],
     stateAttributesMapping: U
   });
@@ -285,17 +286,17 @@ process.env.NODE_ENV !== "production" && (re.displayName = "PreviewCardPositione
 const ke = {
   ...U,
   ...Se
-}, se = /* @__PURE__ */ e.forwardRef(function(s, d) {
+}, se = /* @__PURE__ */ e.forwardRef(function(s, u) {
   const {
     className: f,
-    render: u,
-    ...a
+    render: d,
+    ...i
   } = s, {
     open: n,
     transitionStatus: p,
     popupRef: r,
     onOpenChangeComplete: c,
-    popupProps: i
+    popupProps: a
   } = x(), {
     side: l,
     align: m
@@ -314,53 +315,53 @@ const ke = {
     transitionStatus: p
   }), [n, l, m, p]);
   return A("div", s, {
-    ref: [r, d],
+    ref: [r, u],
     state: w,
-    props: [i, be(p), a],
+    props: [a, be(p), i],
     stateAttributesMapping: ke
   });
 });
 process.env.NODE_ENV !== "production" && (se.displayName = "PreviewCardPopup");
-const ae = /* @__PURE__ */ e.forwardRef(function(s, d) {
+const ie = /* @__PURE__ */ e.forwardRef(function(s, u) {
   const {
     render: f,
-    className: u,
-    ...a
+    className: d,
+    ...i
   } = s, {
     open: n
   } = x(), {
     arrowRef: p,
     side: r,
     align: c,
-    arrowUncentered: i,
+    arrowUncentered: a,
     arrowStyles: l
   } = ne(), m = e.useMemo(() => ({
     open: n,
     side: r,
     align: c,
-    uncentered: i
-  }), [n, r, c, i]);
+    uncentered: a
+  }), [n, r, c, a]);
   return A("div", s, {
     state: m,
-    ref: [p, d],
+    ref: [p, u],
     props: [{
       style: l,
       "aria-hidden": !0
-    }, a],
+    }, i],
     stateAttributesMapping: U
   });
 });
-process.env.NODE_ENV !== "production" && (ae.displayName = "PreviewCardArrow");
+process.env.NODE_ENV !== "production" && (ie.displayName = "PreviewCardArrow");
 const Be = {
   "preview-card": "_preview-card_1o167_1"
 };
 function ct({
   align: t,
   side: s,
-  background: d,
+  background: u,
   trigger: f,
-  children: u,
-  className: a,
+  children: d,
+  className: i,
   ...n
 }) {
   return /* @__PURE__ */ q(Fe, { ...n, children: [
@@ -374,22 +375,22 @@ function ct({
         children: /* @__PURE__ */ q(
           se,
           {
-            render: /* @__PURE__ */ P(fe, { background: d }),
+            render: /* @__PURE__ */ P(fe, { background: u }),
             className: pe(
               z.tooltip,
               Be["preview-card"],
               ge.transition_scale,
-              a
+              i
             ),
             children: [
               /* @__PURE__ */ P(
-                ae,
+                ie,
                 {
                   className: z.tooltip__arrow,
                   children: /* @__PURE__ */ P(me, {})
                 }
               ),
-              u
+              d
             ]
           }
         )