welcome-ui 8.4.0 → 9.0.0-alpha.1

package/dist/Shape.mjs

@@ -1,37 +0,0 @@
-"use client";
-import { j as m } from "./jsx-runtime-Bqq1Hxg9.mjs";
-import { forwardRef as n } from "./System.mjs";
-import l, { system as o, css as s } from "@xstyled/styled-components";
-import { Box as p } from "./Box.mjs";
-import { g as r } from "./get-max-width-height-DoUro2T7.mjs";
-const c = (t, e, i) => s`
-  width: ${r(t, e)};
-  height: ${r(t, e)};
-  border-radius: ${i === "circle" && "50%"};
-`, f = l(p)(
-  ({ h: t, shape: e, w: i }) => s`
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    img {
-      object-fit: cover;
-      overflow: hidden;
-      width: 100%;
-      height: 100%;
-    }
-
-    ${o};
-
-    /* we must override shapeStyles (let this line under ${o}) */
-    ${e && c(i, t, e)}
-  `
-), h = n(
-  ({ children: t, dataTestId: e, shape: i, ...a }, d) => /* @__PURE__ */ m.jsx(f, { "data-testid": e, ref: d, shape: i, ...a, children: t })
-);
-h.displayName = "Shape";
-export {
-  h as Shape
-};

package/dist/Slider.mjs

@@ -1,558 +0,0 @@
-"use client";
-import { j as r } from "./jsx-runtime-Bqq1Hxg9.mjs";
-import { useState as D, useRef as S, useCallback as ne, useEffect as F } from "react";
-import { Box as p } from "./Box.mjs";
-import { Hint as X } from "./Hint.mjs";
-import { InputText as O } from "./InputText.mjs";
-import { forwardRef as re } from "./System.mjs";
-import { Text as se } from "./Text.mjs";
-import R, { th as l, css as x } from "@xstyled/styled-components";
-const W = x`
-  appearance: none;
-  cursor: pointer;
-  height: 20;
-  width: 20;
-  transform: scale(1);
-  transition:
-    background-color ${l.transition("medium")},
-    border-color ${l.transition("medium")},
-    transform 100ms ease-in-out;
-`, H = x`
-  ${l("sliders.focused")};
-  transform: scale(1.2);
-`, ie = x`
-  position: absolute;
-  width: 100%;
-  height: ${l("space.xs")};
-`, de = R.input(
-  ({ borderSelectorColor: i, disabled: c }) => x`
-    ${l("sliders.default")};
-    appearance: none;
-    cursor: pointer;
-    background-repeat: no-repeat;
-    border-radius: 0;
-    margin: auto 0;
-    width: 100%;
-    height: ${l("space.xs")};
-
-    &::-webkit-slider-thumb {
-      ${l("sliders.selector")};
-      ${W};
-      border-color: ${i || "transparent"};
-    }
-
-    &::-moz-range-thumb {
-      ${l("sliders.selector")};
-      ${W};
-      border-color: ${i || "transparent"};
-    }
-
-    &:active,
-    &:focus-visible {
-      outline: none;
-
-      &::-webkit-slider-thumb {
-        ${H};
-      }
-
-      &::-moz-range-thumb {
-        ${H};
-      }
-    }
-
-    ${c && x`
-      ${l("sliders.disabled")}
-      cursor: not-allowed;
-
-      &::-webkit-slider-thumb {
-        ${l("sliders.selector.disabled")};
-        cursor: not-allowed;
-      }
-
-      &::-moz-range-thumb {
-        ${l("sliders.selector.disabled")};
-        cursor: not-allowed;
-      }
-
-      &:active {
-        &::-webkit-slider-thumb {
-          ${l("sliders.focused.disabled")};
-        }
-
-        &::-moz-range-thumb {
-          ${l("sliders.focused.disabled")};
-        }
-      }
-    `};
-  `
-), ee = R.input(
-  ({ borderSelectorColor: i, disabled: c }) => x`
-    ${l("sliders.rangeInput")}
-    appearance: none;
-    pointer-events: none;
-    position: absolute;
-    height: 0;
-    width: 100%;
-    outline: none;
-    z-index: 1;
-    top: ${l("space.xxs")};
-
-    &::-webkit-slider-thumb {
-      ${l("sliders.selector")};
-      ${W};
-
-      border-color: ${i || "transparent"};
-      top: ${l("space.sm")};
-      pointer-events: all;
-      position: relative;
-    }
-
-    &::-moz-range-thumb {
-      ${l("sliders.selector")};
-      ${W};
-
-      border-color: ${i || "transparent"};
-      top: ${l("space.sm")};
-      pointer-events: all;
-      position: relative;
-    }
-
-    &:active,
-    &:focus-visible {
-      &::-webkit-slider-thumb {
-        ${H};
-      }
-
-      &::-moz-range-thumb {
-        ${H};
-      }
-    }
-
-    ${c && x`
-      &::-webkit-slider-thumb {
-        ${l("sliders.selector.disabled")};
-        cursor: not-allowed;
-      }
-
-      &::-moz-range-thumb {
-        ${l("sliders.selector.disabled")};
-        cursor: not-allowed;
-      }
-
-      &:active {
-        &::-webkit-slider-thumb {
-          ${l("sliders.focused.disabled")};
-        }
-
-        &::-moz-range-thumb {
-          ${l("sliders.focused.disabled")};
-        }
-      }
-    `};
-  `
-), fe = R(p)(
-  () => x`
-    ${ie};
-    background-color: beige-40;
-  `
-), me = R(p)(
-  ({ disabled: i }) => x`
-    ${ie};
-    background-color: primary-40;
-
-    ${i && x`
-      ${l("sliders.disabled")}
-      cursor: not-allowed;
-    `};
-  `
-), oe = R(p)(
-  () => x`
-    position: absolute;
-
-    :before {
-      content: '';
-      position: absolute;
-      background-color: neutral-30;
-      height: 6;
-      width: 1;
-      transform: translate(-50%);
-    }
-  `
-), le = R(X)(
-  () => x`
-    position: absolute;
-    color: neutral-50;
-    top: 0;
-    transform: translate(-50%);
-    white-space: nowrap;
-  `
-), J = R.outputBox(
-  ({ isVisible: i }) => x`
-    opacity: 0;
-    visibility: hidden;
-    transition:
-      opacity 150ms ease-in-out,
-      visibility 150ms ease-in-out,
-      transform 150ms ease-in-out;
-    position: absolute;
-    text-align: center;
-    transform: translate(-50%, calc(-100% + -${l("space.xs")}));
-
-    ${i && x`
-      opacity: 100;
-      visibility: visible;
-      transform: translate(-50%, calc(-100% + -${l("space.sm")}));
-    `}
-  `
-), Q = R(p)(
-  () => x`
-    ${l("sliders.output.tooltip")};
-    flex: 1 1 auto;
-    margin: auto;
-    min-width: ${l("space.xxs")};
-    padding: ${l("space.xs")} ${l("space.sm")};
-  `
-), te = 20, C = ({
-  min: i,
-  step: c,
-  toCompare: b,
-  value: j
-}) => {
-  let n = Math.min(j, b - 1 * c);
-  return n = Math.max(n, i), _(n, c);
-}, L = ({
-  max: i,
-  step: c,
-  toCompare: b,
-  value: j
-}) => {
-  let n = Math.max(j, b + 1 * c);
-  return n = Math.min(n, i), _(n, c);
-}, he = re(
-  ({
-    borderSelectorColor: i = "neutral-10",
-    disabled: c,
-    hint: b,
-    label: j,
-    max: n,
-    min: o,
-    onChange: g,
-    step: a = 1,
-    tooltip: M,
-    type: $,
-    value: h,
-    values: E,
-    ...G
-  }, q) => {
-    const [u, k] = D(o), [d, z] = D(n), [N, w] = D(n), [v, y] = D(n), A = S(null), P = S(null), V = S(null), K = S(null), B = S(null), [T, s] = D(!1), [f, Y] = D(!1), ce = (e) => {
-      const t = C({
-        min: o,
-        step: a,
-        toCompare: d,
-        value: parseInt(e.target.value, 10)
-      });
-      w(t), k(t), e.target.value = t.toString();
-    }, ue = (e) => {
-      const t = L({
-        max: n,
-        step: a,
-        toCompare: u,
-        value: parseInt(e.target.value, 10)
-      });
-      y(t), z(t), e.target.value = t.toString();
-    }, Z = (e, t) => {
-      if (e.preventDefault(), t === "min") {
-        let m = u;
-        e.key === "ArrowRight" && (m = C({ min: o, step: a, toCompare: d, value: m + a })), e.key === "ArrowLeft" && (m = C({ min: o, step: a, toCompare: d, value: m - a })), w(m), k(m), g({ max: d, min: m });
-      }
-      if (t === "max") {
-        let m = d;
-        e.key === "ArrowRight" && (m = L({ max: n, step: a, toCompare: u, value: m + a })), e.key === "ArrowLeft" && (m = L({ max: n, step: a, toCompare: u, value: m - a })), y(m), z(m), g({ max: m, min: u });
-      }
-    }, I = ne(
-      (e) => {
-        const t = Math.round((e - o) / (n - o) * 100);
-        return t < 0 ? 0 : t > 100 ? 100 : t;
-      },
-      [o, n]
-    );
-    return F(() => {
-      if (P.current) {
-        const e = I(u), t = I(parseInt(P.current.value, 10));
-        V.current && (V.current.style.left = `${e}%`, V.current.style.width = `${t - e}%`);
-      }
-    }, [u, I]), F(() => {
-      if (A.current) {
-        const e = I(parseInt(A.current.value, 10)), t = I(d);
-        if (V.current && (V.current.style.width = `${t - e}%`), K.current) {
-          const m = I(u) / 100;
-          K.current.style.left = `calc(${m * 100}% + ${(0.5 - m) * te}px)`;
-        }
-        if (B.current) {
-          const m = I(d) / 100;
-          B.current.style.left = `calc(${m * 100}% + ${(0.5 - m) * te}px)`;
-        }
-      }
-    }, [u, d, I]), F(() => {
-      if (h) {
-        if (!isNaN(h.min) && h.min !== u) {
-          const e = C({ min: o, step: a, toCompare: d, value: h.min || o });
-          k(e), w(e);
-        }
-        if (!isNaN(h.max) && h.max !== d) {
-          const e = L({ max: n, step: a, toCompare: u, value: h.max || n });
-          z(e), y(e);
-        }
-      }
-    }, [h]), /* @__PURE__ */ r.jsxs(p, { position: "relative", ref: q, w: "100%", children: [
-      j ? /* @__PURE__ */ r.jsx(se, { as: "label", variant: "sm", children: j }) : null,
-      /* @__PURE__ */ r.jsxs(p, { alignItems: "center", display: "flex", gap: "sm", children: [
-        ($ === "inline" || $ === "fields") && ($ === "fields" ? /* @__PURE__ */ r.jsx(
-          O,
-          {
-            disabled: c,
-            max: d,
-            min: o,
-            onBlur: () => {
-              const e = C({
-                min: o,
-                step: a,
-                toCompare: d,
-                value: N
-              });
-              w(e), k(e), g({ max: d, min: e });
-            },
-            onChange: (e) => {
-              let t = parseInt(e.target.value, 10);
-              isNaN(t) && (t = 0), w(t);
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter") {
-                const t = C({
-                  min: o,
-                  step: a,
-                  toCompare: d,
-                  value: N
-                });
-                w(t), k(t), g({ max: d, min: t });
-              }
-            },
-            size: "sm",
-            type: "number",
-            value: N.toString(),
-            w: 72
-          }
-        ) : /* @__PURE__ */ r.jsx(p, { children: o })),
-        /* @__PURE__ */ r.jsxs(p, { flexGrow: "1", position: "relative", children: [
-          M ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-            /* @__PURE__ */ r.jsx(J, { isVisible: T, ref: K, children: /* @__PURE__ */ r.jsx(Q, { children: u }) }),
-            /* @__PURE__ */ r.jsx(J, { isVisible: f, ref: B, children: /* @__PURE__ */ r.jsx(Q, { children: d }) })
-          ] }) : null,
-          /* @__PURE__ */ r.jsxs(p, { h: 20, pb: "sm", position: "relative", pt: "sm", w: "100%", children: [
-            /* @__PURE__ */ r.jsx(
-              ee,
-              {
-                ...G,
-                borderSelectorColor: i,
-                disabled: c,
-                max: n,
-                min: o,
-                onChange: ce,
-                onKeyDown: (e) => Z(e, "min"),
-                onMouseDown: () => {
-                  M && T === !1 && s(!0);
-                },
-                onMouseUp: () => {
-                  g({ max: d, min: u }), M && s(!1);
-                },
-                ref: A,
-                step: a,
-                type: "range",
-                value: u
-              }
-            ),
-            /* @__PURE__ */ r.jsx(
-              ee,
-              {
-                ...G,
-                borderSelectorColor: i,
-                disabled: c,
-                max: n,
-                min: o,
-                onChange: ue,
-                onKeyDown: (e) => Z(e, "max"),
-                onMouseDown: () => {
-                  M && f === !1 && Y(!0);
-                },
-                onMouseUp: () => {
-                  g({ max: d, min: u }), M && Y(!1);
-                },
-                ref: P,
-                step: a,
-                type: "range",
-                value: d
-              }
-            ),
-            /* @__PURE__ */ r.jsx(fe, {}),
-            /* @__PURE__ */ r.jsx(me, { disabled: c, ref: V })
-          ] }),
-          E ? /* @__PURE__ */ r.jsx(p, { h: 24, ml: 10, mr: 10, position: "relative", children: E.reduce((e, t) => e.includes(t) ? e : [...e, t], []).filter((e) => e >= o && e <= n).map((e, t) => /* @__PURE__ */ r.jsx(oe, { left: `${I(e)}%`, children: /* @__PURE__ */ r.jsx(le, { children: e }) }, `${e}-${t}`)) }) : null
-        ] }),
-        ($ === "inline" || $ === "fields") && ($ === "fields" ? /* @__PURE__ */ r.jsx(
-          O,
-          {
-            disabled: c,
-            max: n,
-            min: u + 1,
-            onBlur: () => {
-              const e = L({
-                max: n,
-                step: a,
-                toCompare: u,
-                value: v
-              });
-              y(e), z(e), g({ max: e, min: u });
-            },
-            onChange: (e) => {
-              let t = parseInt(e.target.value, 10);
-              isNaN(t) && (t = 0), y(t);
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter") {
-                const t = L({
-                  max: n,
-                  step: a,
-                  toCompare: u,
-                  value: v
-                });
-                y(t), z(t), g({ max: t, min: u });
-              }
-            },
-            size: "sm",
-            type: "number",
-            value: v.toString(),
-            w: 72
-          }
-        ) : /* @__PURE__ */ r.jsx(p, { children: n }))
-      ] }),
-      b ? /* @__PURE__ */ r.jsx(X, { color: "neutral-50", mt: 0, children: b }) : null
-    ] });
-  }
-), pe = 20, _ = (i, c) => Math.round(i / c) * c, U = (i, c, b, j) => (i = _(i, j), i < c ? c : i > b ? b : i), ae = re(
-  ({
-    borderSelectorColor: i = "neutral-10",
-    disabled: c,
-    hint: b,
-    label: j,
-    max: n,
-    min: o,
-    onChange: g,
-    step: a = 1,
-    tooltip: M,
-    type: $,
-    value: h,
-    values: E,
-    ...G
-  }, q) => {
-    const u = S(null), k = S(null), [d, z] = D(!1), [N, w] = D(U(h, o, n, a)), [v, y] = D(U(h, o, n, a)), A = (s) => {
-      s = _(s, a), y(s);
-    }, P = (s) => {
-      s.preventDefault();
-      let f = v;
-      s.key === "ArrowRight" && (f = U(f + a, o, n, a)), s.key === "ArrowLeft" && (f = U(f - a, o, n, a)), y(f), w(f), g(f);
-    }, V = (s) => {
-      let f = parseInt(s.target.value, 10);
-      isNaN(f) && (f = 0), w(f);
-    }, K = () => {
-      const s = U(N, o, n, a);
-      w(s), y(s), g(s);
-    }, B = (s) => {
-      s.key === "Enter" && K();
-    }, T = ne(
-      (s) => Math.round((s - o) / (n - o) * 100),
-      [o, n]
-    );
-    return F(() => {
-      if (u.current && (u.current.style.backgroundSize = `${T(v)}% 100%`), k.current) {
-        const s = T(v) / 100;
-        k.current.style.left = `calc(${s * 100}% + ${(0.5 - s) * pe}px)`;
-      }
-    }, [v, T]), F(() => {
-      !isNaN(h) && h !== v && h && (A(h), w(h));
-    }, [h]), /* @__PURE__ */ r.jsxs(p, { display: "flex", flexDirection: "column", position: "relative", ref: q, children: [
-      j ? /* @__PURE__ */ r.jsx(se, { as: "label", variant: "sm", children: j }) : null,
-      /* @__PURE__ */ r.jsxs(p, { alignItems: "center", display: "flex", gap: "sm", children: [
-        ($ === "inline" || $ === "left-field") && ($ === "left-field" ? /* @__PURE__ */ r.jsx(
-          O,
-          {
-            disabled: c,
-            max: n,
-            min: o,
-            onBlur: K,
-            onChange: V,
-            onKeyDown: B,
-            size: "sm",
-            type: "number",
-            value: N.toString(),
-            w: 72
-          }
-        ) : /* @__PURE__ */ r.jsx(p, { children: o })),
-        /* @__PURE__ */ r.jsxs(p, { display: "flex", flexDirection: "column", flexGrow: "1", h: 20, position: "relative", children: [
-          /* @__PURE__ */ r.jsx(
-            de,
-            {
-              borderSelectorColor: i,
-              disabled: c,
-              list: "tickmarks",
-              max: n,
-              min: o,
-              onChange: (s) => {
-                const f = parseInt(s.target.value, 10);
-                A(f), w(f);
-              },
-              onKeyDown: P,
-              onMouseDown: () => {
-                M && d === !1 && z(!0);
-              },
-              onMouseUp: () => {
-                g(v), M && z(!1);
-              },
-              ref: u,
-              step: a,
-              type: "range",
-              value: v,
-              ...G
-            }
-          ),
-          M ? /* @__PURE__ */ r.jsx(J, { isVisible: d, ref: k, children: /* @__PURE__ */ r.jsx(Q, { children: v }) }) : null,
-          E ? /* @__PURE__ */ r.jsx(p, { h: 24, ml: 10, mr: 10, mt: 5, position: "relative", children: E.reduce((s, f) => s.includes(f) ? s : [...s, f], []).filter((s) => s >= o && s <= n).map((s, f) => /* @__PURE__ */ r.jsx(oe, { left: `${T(s)}%`, children: /* @__PURE__ */ r.jsx(le, { children: s }) }, `${s}-${f}`)) }) : null
-        ] }),
-        ($ === "inline" || $ === "right-field") && ($ === "right-field" ? /* @__PURE__ */ r.jsx(
-          O,
-          {
-            disabled: c,
-            max: n,
-            min: o,
-            onBlur: K,
-            onChange: V,
-            onKeyDown: B,
-            size: "sm",
-            type: "number",
-            value: N.toString(),
-            w: 72
-          }
-        ) : /* @__PURE__ */ r.jsx(p, { children: n }))
-      ] }),
-      b ? /* @__PURE__ */ r.jsx(X, { color: "neutral-50", mt: 0, children: b }) : null
-    ] });
-  }
-);
-ae.displayName = "Slider";
-const Me = Object.assign(ae, { Range: he });
-export {
-  Me as Slider,
-  ae as SliderComponent,
-  U as ensureMinMax,
-  _ as round,
-  pe as thumbWidth
-};

package/dist/Stack.mjs

@@ -1,33 +0,0 @@
-"use client";
-import { j as i } from "./jsx-runtime-Bqq1Hxg9.mjs";
-import { Children as f, isValidElement as x } from "react";
-import { Box as t } from "./Box.mjs";
-import { forwardRef as h } from "./System.mjs";
-const u = h(
-  ({ as: r = "div", children: e, dataTestId: o, direction: l = "column", spacing: d = "md", ...s }, a) => {
-    const c = f.toArray(e).filter(x);
-    return /* @__PURE__ */ i.jsx(
-      t,
-      {
-        as: r,
-        "data-testid": o,
-        display: "flex",
-        flexDirection: l,
-        gap: d,
-        ref: a,
-        ...s,
-        children: c.map((m, n) => {
-          const p = {
-            as: r === "ol" || r === "ul" ? "li" : "div",
-            key: `stack-item-${n}`
-          };
-          return /* @__PURE__ */ i.jsx(t, { ...p, children: m });
-        })
-      }
-    );
-  }
-);
-u.displayName = "Stack";
-export {
-  u as Stack
-};