welcome-ui 10.0.0-alpha.4 → 10.0.0-alpha.5

package/dist/Slider.js

@@ -1,15 +1,16 @@
 "use client";
-import { jsxs as D, jsx as l, Fragment as ie } from "react/jsx-runtime";
-import { forwardRef as Y, useState as $, useRef as S, useCallback as Z, useEffect as U, useId as ee } from "react";
+import './Slider.css';
+import { jsxs as D, jsx as l, Fragment as se } from "react/jsx-runtime";
+import { forwardRef as Y, useState as $, useRef as C, useCallback as Z, useEffect as U, useId as ee } from "react";
 import { Hint as H } from "./Hint.js";
 import { InputText as O } from "./InputText.js";
 import { Text as re } from "./Text.js";
 import { c as ne } from "./index-PAaZGbyz.js";
-const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162", ue = "_thick_6xzwz_171", de = "_range_6xzwz_8", te = {
+const ce = "_hint_6xzwz_20", ue = "_output_6xzwz_149", de = "_tooltip_6xzwz_162", fe = "_thick_6xzwz_171", pe = "_range_6xzwz_8", te = {
   "slider-root": "_slider-root_6xzwz_2",
   "range-root": "_range-root_6xzwz_8",
   "input-wrapper": "_input-wrapper_6xzwz_14",
-  hint: oe,
+  hint: ce,
   "slider-wrapper": "_slider-wrapper_6xzwz_23",
   "range-wrapper": "_range-wrapper_6xzwz_30",
   "tick-markers": "_tick-markers_6xzwz_34",
@@ -23,36 +24,36 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
   "border-selector-secondary-violet": "_border-selector-secondary-violet_6xzwz_125",
   "slider-input-range": "_slider-input-range_6xzwz_128",
   "range-input-range": "_range-input-range_6xzwz_135",
-  output: se,
+  output: ue,
   "output-visible": "_output-visible_6xzwz_157",
-  tooltip: ce,
-  thick: ue,
+  tooltip: de,
+  thick: fe,
   "thick-label": "_thick-label_6xzwz_182",
   "range-track": "_range-track_6xzwz_188",
-  range: de,
+  range: pe,
   "range-disabled": "_range-disabled_6xzwz_200"
 }, X = 20, g = ne(te), P = ({
   min: d,
   step: _,
   toCompare: p,
-  value: x
+  value: y
 }) => {
-  let h = Math.min(x, p - 1 * _);
+  let h = Math.min(y, p - 1 * _);
   return h = Math.max(h, d), q(h, _);
 }, T = ({
   max: d,
   step: _,
   toCompare: p,
-  value: x
+  value: y
 }) => {
-  let h = Math.max(x, p + 1 * _);
+  let h = Math.max(y, p + 1 * _);
   return h = Math.min(h, d), q(h, _);
-}, fe = Y(
+}, ae = Y(
   ({
     borderSelectorColor: d,
     className: _,
     disabled: p,
-    hint: x,
+    hint: y,
     label: h,
     max: a,
     min: t,
@@ -64,7 +65,7 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
     values: B,
     ...W
   }, G) => {
-    const [o, k] = $(t), [s, I] = $(a), [R, z] = $(t), [v, N] = $(a), A = S(null), E = S(null), M = S(null), K = S(null), L = S(null), [C, j] = $(!1), [n, c] = $(!1), ae = (e) => {
+    const [o, k] = $(t), [s, I] = $(a), [R, z] = $(t), [v, x] = $(a), A = C(null), E = C(null), M = C(null), S = C(null), L = C(null), [K, j] = $(!1), [n, c] = $(!1), ie = (e) => {
       const r = P({
         min: t,
         step: i,
@@ -72,14 +73,14 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
         value: parseInt(e.target.value, 10)
       });
       z(r), k(r), e.target.value = r.toString();
-    }, le = (e) => {
+    }, oe = (e) => {
       const r = T({
         max: a,
         step: i,
         toCompare: o,
         value: parseInt(e.target.value, 10)
       });
-      N(r), I(r), e.target.value = r.toString();
+      x(r), I(r), e.target.value = r.toString();
     }, Q = (e, r) => {
       if (e.preventDefault(), r === "min") {
         let u = o;
@@ -87,7 +88,7 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
       }
       if (r === "max") {
         let u = s;
-        e.key === "ArrowRight" && (u = T({ max: a, step: i, toCompare: o, value: u + i })), e.key === "ArrowLeft" && (u = T({ max: a, step: i, toCompare: o, value: u - i })), N(u), I(u), w({ max: u, min: o });
+        e.key === "ArrowRight" && (u = T({ max: a, step: i, toCompare: o, value: u + i })), e.key === "ArrowLeft" && (u = T({ max: a, step: i, toCompare: o, value: u - i })), x(u), I(u), w({ max: u, min: o });
       }
     }, V = Z(
       (e) => {
@@ -104,9 +105,9 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
     }, [o, V]), U(() => {
       if (A.current) {
         const e = V(parseInt(A.current.value, 10)), r = V(s);
-        if (M.current && (M.current.style.width = `${r - e}%`), K.current) {
+        if (M.current && (M.current.style.width = `${r - e}%`), S.current) {
           const u = V(o) / 100;
-          K.current.style.left = `calc(${u * 100}% + ${(0.5 - u) * X}px)`;
+          S.current.style.left = `calc(${u * 100}% + ${(0.5 - u) * X}px)`;
         }
         if (L.current) {
           const u = V(s) / 100;
@@ -121,7 +122,7 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
         }
         if (!isNaN(f.max) && f.max !== s) {
           const e = T({ max: a, step: i, toCompare: o, value: f.max || a });
-          I(e), N(e);
+          I(e), x(e);
         }
       }
     }, [f]);
@@ -165,12 +166,12 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
           }
         ) : /* @__PURE__ */ l("div", { children: t })),
         /* @__PURE__ */ D("div", { className: g("range-wrapper"), children: [
-          b ? /* @__PURE__ */ D(ie, { children: [
+          b ? /* @__PURE__ */ D(se, { children: [
             /* @__PURE__ */ l(
               "output",
               {
-                className: g("output", C && "output-visible"),
-                ref: K,
+                className: g("output", K && "output-visible"),
+                ref: S,
                 children: /* @__PURE__ */ l("div", { children: o })
               }
             ),
@@ -197,10 +198,10 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
                 id: `${J}-min`,
                 max: a,
                 min: t,
-                onChange: ae,
+                onChange: ie,
                 onKeyDown: (e) => Q(e, "min"),
                 onMouseDown: () => {
-                  b && C === !1 && j(!0);
+                  b && K === !1 && j(!0);
                 },
                 onMouseUp: () => {
                   w({ max: s, min: o }), b && j(!1);
@@ -224,7 +225,7 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
                 id: `${J}-max`,
                 max: a,
                 min: t,
-                onChange: le,
+                onChange: oe,
                 onKeyDown: (e) => Q(e, "max"),
                 onMouseDown: () => {
                   b && n === !1 && c(!0);
@@ -264,11 +265,11 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
                 toCompare: o,
                 value: v
               });
-              N(e), I(e), w({ max: e, min: o });
+              x(e), I(e), w({ max: e, min: o });
             },
             onChange: (e) => {
               let r = parseInt(e.target.value, 10);
-              isNaN(r) && (r = 0), N(r);
+              isNaN(r) && (r = 0), x(r);
             },
             onKeyDown: (e) => {
               if (e.key === "Enter") {
@@ -278,7 +279,7 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
                   toCompare: o,
                   value: v
                 });
-                N(r), I(r), w({ max: r, min: o });
+                x(r), I(r), w({ max: r, min: o });
               }
             },
             size: "md",
@@ -287,15 +288,17 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
           }
         ) : /* @__PURE__ */ l("div", { children: a }))
       ] }),
-      x ? /* @__PURE__ */ l(H, { className: g("hint"), children: x }) : null
+      y ? /* @__PURE__ */ l(H, { className: g("hint"), children: y }) : null
     ] });
   }
-), pe = 20, q = (d, _) => Math.round(d / _) * _, F = (d, _, p, x) => (d = q(d, x), d < _ ? _ : d > p ? p : d), y = ne(te), _e = Y(
+);
+ae.displayName = "Slider.Range";
+const _e = 20, q = (d, _) => Math.round(d / _) * _, F = (d, _, p, y) => (d = q(d, y), d < _ ? _ : d > p ? p : d), N = ne(te), le = Y(
   ({
     borderSelectorColor: d,
     className: _,
     disabled: p,
-    hint: x,
+    hint: y,
     label: h,
     max: a,
     min: t,
@@ -307,43 +310,43 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
     values: B,
     ...W
   }, G) => {
-    const o = S(null), k = S(null), [s, I] = $(!1), [R, z] = $(F(f, t, a, i)), [v, N] = $(F(f, t, a, i)), A = (n) => {
-      n = q(n, i), N(n);
+    const o = C(null), k = C(null), [s, I] = $(!1), [R, z] = $(F(f, t, a, i)), [v, x] = $(F(f, t, a, i)), A = (n) => {
+      n = q(n, i), x(n);
     }, E = (n) => {
       n.preventDefault();
       let c = v;
-      n.key === "ArrowRight" && (c = F(c + i, t, a, i)), n.key === "ArrowLeft" && (c = F(c - i, t, a, i)), N(c), z(c), w(c);
+      n.key === "ArrowRight" && (c = F(c + i, t, a, i)), n.key === "ArrowLeft" && (c = F(c - i, t, a, i)), x(c), z(c), w(c);
     }, M = (n) => {
       let c = parseInt(n.target.value, 10);
       isNaN(c) && (c = 0), z(c);
-    }, K = () => {
+    }, S = () => {
       const n = F(R, t, a, i);
-      z(n), N(n), w(n);
+      z(n), x(n), w(n);
     }, L = (n) => {
-      n.key === "Enter" && K();
-    }, C = Z(
+      n.key === "Enter" && S();
+    }, K = Z(
       (n) => Math.round((n - t) / (a - t) * 100),
       [t, a]
     );
     U(() => {
-      if (o.current && (o.current.style.backgroundSize = `${C(v)}% 100%`), k.current) {
-        const n = C(v) / 100;
-        k.current.style.left = `calc(${n * 100}% + ${(0.5 - n) * pe}px)`;
+      if (o.current && (o.current.style.backgroundSize = `${K(v)}% 100%`), k.current) {
+        const n = K(v) / 100;
+        k.current.style.left = `calc(${n * 100}% + ${(0.5 - n) * _e}px)`;
       }
-    }, [v, C]), U(() => {
+    }, [v, K]), U(() => {
       !isNaN(f) && f !== v && f && (A(f), z(f));
     }, [f]);
     const j = ee();
-    return /* @__PURE__ */ D("div", { className: y("slider-root", _), ref: G, children: [
+    return /* @__PURE__ */ D("div", { className: N("slider-root", _), ref: G, children: [
       h ? /* @__PURE__ */ l(re, { as: "label", htmlFor: j, variant: "body-md", children: h }) : null,
-      /* @__PURE__ */ D("div", { className: y("input-wrapper"), children: [
+      /* @__PURE__ */ D("div", { className: N("input-wrapper"), children: [
         (m === "inline" || m === "left-field") && (m === "left-field" ? /* @__PURE__ */ l(
           O,
           {
             disabled: p,
             max: a,
             min: t,
-            onBlur: K,
+            onBlur: S,
             onChange: M,
             onKeyDown: L,
             size: "md",
@@ -351,11 +354,11 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
             value: R.toString()
           }
         ) : /* @__PURE__ */ l("div", { children: t })),
-        /* @__PURE__ */ D("div", { className: y("slider-wrapper"), children: [
+        /* @__PURE__ */ D("div", { className: N("slider-wrapper"), children: [
           /* @__PURE__ */ l(
             "input",
             {
-              className: y(
+              className: N(
                 "input-range",
                 "slider-input-range",
                 d && `border-selector-${d}`
@@ -383,13 +386,13 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
               ...W
             }
           ),
-          b ? /* @__PURE__ */ l("output", { className: y("output", s && "output-visible"), ref: k, children: /* @__PURE__ */ l("div", { className: y("tooltip"), children: v }) }) : null,
-          B ? /* @__PURE__ */ l("div", { className: y("thick-markers"), children: B.reduce((n, c) => n.includes(c) ? n : [...n, c], []).filter((n) => n >= t && n <= a).map((n, c) => /* @__PURE__ */ l(
+          b ? /* @__PURE__ */ l("output", { className: N("output", s && "output-visible"), ref: k, children: /* @__PURE__ */ l("div", { className: N("tooltip"), children: v }) }) : null,
+          B ? /* @__PURE__ */ l("div", { className: N("thick-markers"), children: B.reduce((n, c) => n.includes(c) ? n : [...n, c], []).filter((n) => n >= t && n <= a).map((n, c) => /* @__PURE__ */ l(
             "div",
             {
-              className: y("thick"),
-              style: { left: `${C(n)}%` },
-              children: /* @__PURE__ */ l(H, { className: y("thick-label"), children: n })
+              className: N("thick"),
+              style: { left: `${K(n)}%` },
+              children: /* @__PURE__ */ l(H, { className: N("thick-label"), children: n })
             },
             `${n}-${c}`
           )) }) : null
@@ -397,11 +400,11 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
         (m === "inline" || m === "right-field") && (m === "right-field" ? /* @__PURE__ */ l(
           O,
           {
-            className: y("input-text"),
+            className: N("input-text"),
             disabled: p,
             max: a,
             min: t,
-            onBlur: K,
+            onBlur: S,
             onChange: M,
             onKeyDown: L,
             size: "md",
@@ -410,14 +413,16 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
           }
         ) : /* @__PURE__ */ l("div", { children: a }))
       ] }),
-      x ? /* @__PURE__ */ l(H, { className: y("hint"), children: x }) : null
+      y ? /* @__PURE__ */ l(H, { className: N("hint"), children: y }) : null
     ] });
   }
-), xe = Object.assign(_e, { Range: fe });
+);
+le.displayName = "Slider";
+const ye = Object.assign(le, { Range: ae });
 export {
-  xe as Slider,
-  _e as SliderComponent,
+  ye as Slider,
+  le as SliderComponent,
   F as ensureMinMax,
   q as round,
-  pe as thumbWidth
+  _e as thumbWidth
 };

package/dist/Stepper.js

@@ -1,42 +1,49 @@
 "use client";
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { Icon as n } from "./Icon.js";
-import { c as p } from "./index-PAaZGbyz.js";
-import { Text as _ } from "./Text.js";
-const u = "_root_1wnun_2", f = "_separator_1wnun_28", d = "_item_1wnun_31", b = "_clickable_1wnun_64", k = "_completed_1wnun_73", w = {
-  root: u,
-  separator: f,
-  item: d,
-  clickable: b,
-  completed: k
+import './Stepper.css';
+import { jsx as e, jsxs as _ } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { Icon as a } from "./Icon.js";
+import { c as u } from "./index-PAaZGbyz.js";
+import { Text as f } from "./Text.js";
+const b = "_root_1wnun_2", N = "_separator_1wnun_28", S = "_item_1wnun_31", k = "_clickable_1wnun_64", w = "_completed_1wnun_73", g = {
+  root: b,
+  separator: N,
+  item: S,
+  clickable: k,
+  completed: w
 };
-function g({
+function x({
   icon: t,
-  isCompleted: r,
-  isOpen: o
+  isCompleted: o,
+  isOpen: r
 }) {
-  return t || (r ? /* @__PURE__ */ e(n, { name: "check-circle" }) : o ? /* @__PURE__ */ e(n, { name: "folder-open" }) : /* @__PURE__ */ e(n, { name: "folder" }));
+  return t || (o ? /* @__PURE__ */ e(a, { name: "check-circle" }) : r ? /* @__PURE__ */ e(a, { name: "folder-open" }) : /* @__PURE__ */ e(a, { name: "folder" }));
 }
-const c = p(w), x = m(
-  ({ children: t, className: r }, o) => /* @__PURE__ */ e("ol", { className: c("root", r), ref: o, children: t })
-), h = () => /* @__PURE__ */ e("div", { className: c("separator"), children: /* @__PURE__ */ e(n, { name: "angle-right-b", size: "lg" }) }), I = ({ children: t, icon: r, isCompleted: o, isOpen: a, onClick: s }) => {
-  const l = g({ icon: r, isCompleted: o, isOpen: a });
-  return /* @__PURE__ */ i(
+const n = u(g), l = d(
+  ({ children: t, className: o }, r) => /* @__PURE__ */ e("ol", { className: n("root", o), ref: r, children: t })
+);
+l.displayName = "Stepper";
+const m = () => /* @__PURE__ */ e("div", { className: n("separator"), children: /* @__PURE__ */ e(a, { name: "angle-right-b", size: "lg" }) });
+m.displayName = "Stepper.Separator";
+const i = ({ children: t, icon: o, isCompleted: r, isOpen: c, onClick: s }) => {
+  const p = x({ icon: o, isCompleted: r, isOpen: c });
+  return /* @__PURE__ */ _(
     "li",
     {
-      "aria-current": a,
-      className: c("item", !!s && "clickable", o && "completed"),
+      "aria-current": c,
+      className: n("item", !!s && "clickable", r && "completed"),
       onClick: s,
       children: [
-        l,
-        /* @__PURE__ */ e(_, { variant: "label-md", children: t })
+        p,
+        /* @__PURE__ */ e(f, { variant: "label-md", children: t })
       ]
     }
   );
-}, B = Object.assign(x, {
-  Item: I,
-  Separator: h
+};
+i.displayName = "Stepper.Item";
+const B = Object.assign(l, {
+  Item: i,
+  Separator: m
 });
 export {
   B as Stepper

package/dist/StickyNote.js

@@ -1,13 +1,14 @@
 "use client";
+import './StickyNote.css';
 import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
-import { CloseButton as u } from "./CloseButton.js";
-import { c as r } from "./index-PAaZGbyz.js";
-import { Button as j } from "./Button.js";
-import { Icon as p } from "./Icon.js";
-import { Text as d } from "./Text.js";
-const f = "_root_1m1jb_2", g = "_content_1m1jb_110", h = "_title_1m1jb_38", N = "_action_1m1jb_132", i = {
-  root: f,
+import { forwardRef as j } from "react";
+import { CloseButton as d } from "./CloseButton.js";
+import { c as i } from "./index-PAaZGbyz.js";
+import { Button as N } from "./Button.js";
+import { Icon as y } from "./Icon.js";
+import { Text as f } from "./Text.js";
+const g = "_root_1m1jb_2", h = "_content_1m1jb_110", k = "_title_1m1jb_38", x = "_action_1m1jb_132", r = {
+  root: g,
   "shape-rectangle": "_shape-rectangle_1m1jb_26",
   "shape-square": "_shape-square_1m1jb_30",
   "variant-brand": "_variant-brand_1m1jb_34",
@@ -19,23 +20,29 @@ const f = "_root_1m1jb_2", g = "_content_1m1jb_110", h = "_title_1m1jb_38", N =
   "variant-orange": "_variant-orange_1m1jb_84",
   "variant-teal": "_variant-teal_1m1jb_94",
   "close-button": "_close-button_1m1jb_104",
-  content: g,
-  title: h,
-  action: N
-}, x = r(i), B = ({ children: n, className: a, ...o }) => /* @__PURE__ */ t(j, { className: x("action", a), ...o, size: "sm", variant: "primary-neutral", children: n }), s = r(i), k = ({ children: n, icon: a = "lightbulb-alt" }) => /* @__PURE__ */ c(d, { as: "div", className: s("title"), variant: "body-md-strong", children: [
-  /* @__PURE__ */ t("div", { className: s("title-icon"), children: /* @__PURE__ */ t(p, { name: a }) }),
-  /* @__PURE__ */ t("span", { children: n })
-] }), e = r(i), y = v(
-  ({ children: n, className: a, handleClose: o, shape: _ = "square", variant: m = "brand" }, l) => {
-    const b = !!o;
-    return /* @__PURE__ */ c("div", { className: e("root", `variant-${m}`, `shape-${_}`, a), ref: l, children: [
-      b ? /* @__PURE__ */ t(u, { className: e("close-button"), onClick: o, size: "sm" }) : null,
-      /* @__PURE__ */ t("div", { className: e("content"), children: n })
+  content: h,
+  title: k,
+  action: x
+}, B = i(r), m = ({ children: a, className: n, ...o }) => /* @__PURE__ */ t(N, { className: B("action", n), ...o, size: "sm", variant: "primary-neutral", children: a });
+m.displayName = "StickyNote.Button";
+const s = i(r), _ = ({ children: a, icon: n = "lightbulb-alt" }) => /* @__PURE__ */ c(f, { as: "div", className: s("title"), variant: "body-md-strong", children: [
+  /* @__PURE__ */ t("div", { className: s("title-icon"), children: /* @__PURE__ */ t(y, { name: n }) }),
+  /* @__PURE__ */ t("span", { children: a })
+] });
+_.displayName = "StickyNote.Title";
+const e = i(r), l = j(
+  ({ children: a, className: n, handleClose: o, shape: b = "square", variant: v = "brand" }, p) => {
+    const u = !!o;
+    return /* @__PURE__ */ c("div", { className: e("root", `variant-${v}`, `shape-${b}`, n), ref: p, children: [
+      u ? /* @__PURE__ */ t(d, { className: e("close-button"), onClick: o, size: "sm" }) : null,
+      /* @__PURE__ */ t("div", { className: e("content"), children: a })
     ] });
   }
-), I = Object.assign(y, {
-  Button: B,
-  Title: k
+);
+l.displayName = "StickyNote";
+const I = Object.assign(l, {
+  Button: m,
+  Title: _
 });
 export {
   I as StickyNote