welcome-ui 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/Slider.mjs

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

package/dist/Stack.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("./Box.js"),f=require("./System.js"),i=f.forwardRef(({as:t="div",children:l,dataTestId:c,direction:a="column",spacing:o="md",...n},s)=>{const d=e.Children.toArray(l).filter(e.isValidElement);return e.createElement(r.Box,{as:t,"data-testid":c,display:"flex",flexDirection:a,gap:o,ref:s,...n},d.map((u,m)=>{const y={as:t==="ol"||t==="ul"?"li":"div",key:`stack-item-${m}`};return e.createElement(r.Box,{...y},u)}))});i.displayName="Stack";exports.Stack=i;

package/dist/Stack.mjs

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