welcome-ui 0.0.0-dev.1759222868187 → 0.0.0-dev.1759252708223

package/dist/Slider.css

@@ -0,0 +1 @@
+@layer components{._slider-root_4d202_2{display:flex;flex-direction:column;position:relative;width:100%}._range-root_4d202_8{width:100%;display:flex;flex-direction:column;position:relative}._input-wrapper_4d202_14{align-items:center;display:flex;gap:var(--spacing-sm);--inputTextWrapperWidth: 72px}._hint_4d202_20{margin-top:0}._slider-wrapper_4d202_23{display:flex;flex-direction:column;flex-grow:1;height:1.25rem;position:relative}._range-wrapper_4d202_30{position:relative;flex-grow:1}._tick-markers_4d202_34{height:24px;margin-left:10px;margin-right:10px;margin-top:5px;position:relative}._input-range-wrapper_4d202_41{height:1.25rem;padding-bottom:var(--spacing-sm);position:relative;padding-top:var(--spacing-sm);width:100%;--inputTextWrapperWidth: 72px}._input-range_4d202_41{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:var(--spacing-xs);margin:auto 0}._input-range_4d202_41::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-neutral-90);border:var(--border-width-md) solid var(--color-neutral-10);border-radius:50%;cursor:pointer;height:1.25rem;width:1.25rem;transform:scale(1);border:var(--border-width-md) solid var(--borderColor, var(--color-neutral-10));transition:background-color var(--duration-medium),border-color var(--duration-medium),transform .1s ease-in-out}._input-range_4d202_41::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-neutral-90);border:var(--border-width-md) solid var(--color-neutral-10);border-radius:50%;cursor:pointer;height:1.25rem;width:1.25rem;transform:scale(1);border:var(--border-width-md) solid var(--borderColor, var(--color-neutral-10));transition:background-color var(--duration-medium),border-color var(--duration-medium),transform .1s ease-in-out}._input-range_4d202_41:active,._input-range_4d202_41:focus-visible{outline:none}._input-range_4d202_41:active::-webkit-slider-thumb,._input-range_4d202_41:focus-visible::-webkit-slider-thumb{transform:scale(1.2);outline:var(--border-width-md) solid var(--color-yellow-40)}._input-range_4d202_41:active::-moz-range-thumb,._input-range_4d202_41:focus-visible::-moz-range-thumb{transform:scale(1.2);outline:var(--border-width-md) solid var(--color-yellow-40)}._input-range_4d202_41:disabled{background-image:linear-gradient(var(--color-beige-60),var(--color-beige-60));cursor:not-allowed}._input-range_4d202_41:disabled::-webkit-slider-thumb{background-color:var(--color-beige-60);cursor:not-allowed}._input-range_4d202_41:disabled::-moz-range-thumb{background-color:var(--color-beige-60);cursor:not-allowed}._input-range_4d202_41:disabled:active::-webkit-slider-thumb{transform:none;outline:none}._input-range_4d202_41:disabled:active::-moz-range-thumb{transform:none;outline:none}._border-selector-secondary-blue_4d202_110{--borderColor: var(--color-secondary-blue)}._border-selector-secondary-green_4d202_113{--borderColor: var(--color-secondary-green)}._border-selector-secondary-orange_4d202_116{--borderColor: var(--color-secondary-orange)}._border-selector-secondary-pink_4d202_119{--borderColor: var(--color-secondary-pink)}._border-selector-secondary-teal_4d202_122{--borderColor: var(--color-secondary-teal)}._border-selector-secondary-violet_4d202_125{--borderColor: var(--color-secondary-violet)}._slider-input-range_4d202_128{background-color:var(--color-beige-40);background-image:linear-gradient(var(--color-yellow-40),var(--color-yellow-40));cursor:pointer;background-repeat:no-repeat;border-radius:0}._range-input-range_4d202_135{pointer-events:none;position:absolute;outline:none;z-index:1}._range-input-range_4d202_135::-webkit-slider-thumb{pointer-events:all;position:relative}._range-input-range_4d202_135::-moz-range-thumb{pointer-events:all;position:relative}._output_4d202_149{opacity:0;visibility:hidden;transition:opacity .15s ease-in-out,visibility .15s ease-in-out,transform .15s ease-in-out;position:absolute;text-align:center;transform:translate(-50%,calc(-100% + -var(--spacing-xs)))}._output-visible_4d202_157{opacity:100;visibility:visible;transform:translate(-50%,calc(-100% + -var(--spacing-sm)))}._tooltip_4d202_162{background-color:var(--color-neutral-90);border:var(--border-width-sm) solid var(--color-neutral-70);color:var(--color-neutral-10);flex:1 1 auto;margin:auto;min-width:var(--spacing-xxs);padding:var(--spacing-xs) var(--spacing-sm)}._thick_4d202_171{position:absolute;flex-direction:column}._thick_4d202_171:before{content:"";position:absolute;background-color:var(--color-neutral-30);height:6px;width:1px}._thick-label_4d202_182{position:absolute;top:0;transform:translate(-50%,50%);white-space:nowrap}._range-track_4d202_188{position:absolute;width:100%;height:var(--spacing-xs);background-color:var(--color-beige-40)}._range_4d202_8{position:absolute;width:100%;height:var(--spacing-xs);background-color:var(--color-yellow-40)}._range-disabled_4d202_200{background-image:linear-gradient(var(--color-beige-60),var(--color-beige-60));cursor:not-allowed}}

package/dist/Slider.js

@@ -0,0 +1,423 @@
+"use client";
+import { jsxs as R, jsx as l, Fragment as ie } from "react/jsx-runtime";
+import { forwardRef as Y, useState as D, useRef as A, 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 "./classNames-qiokGROM.js";
+const oe = "_hint_4d202_20", se = "_output_4d202_149", ce = "_tooltip_4d202_162", ue = "_thick_4d202_171", de = "_range_4d202_8", te = {
+  "slider-root": "_slider-root_4d202_2",
+  "range-root": "_range-root_4d202_8",
+  "input-wrapper": "_input-wrapper_4d202_14",
+  hint: oe,
+  "slider-wrapper": "_slider-wrapper_4d202_23",
+  "range-wrapper": "_range-wrapper_4d202_30",
+  "tick-markers": "_tick-markers_4d202_34",
+  "input-range-wrapper": "_input-range-wrapper_4d202_41",
+  "input-range": "_input-range_4d202_41",
+  "border-selector-secondary-blue": "_border-selector-secondary-blue_4d202_110",
+  "border-selector-secondary-green": "_border-selector-secondary-green_4d202_113",
+  "border-selector-secondary-orange": "_border-selector-secondary-orange_4d202_116",
+  "border-selector-secondary-pink": "_border-selector-secondary-pink_4d202_119",
+  "border-selector-secondary-teal": "_border-selector-secondary-teal_4d202_122",
+  "border-selector-secondary-violet": "_border-selector-secondary-violet_4d202_125",
+  "slider-input-range": "_slider-input-range_4d202_128",
+  "range-input-range": "_range-input-range_4d202_135",
+  output: se,
+  "output-visible": "_output-visible_4d202_157",
+  tooltip: ce,
+  thick: ue,
+  "thick-label": "_thick-label_4d202_182",
+  "range-track": "_range-track_4d202_188",
+  range: de,
+  "range-disabled": "_range-disabled_4d202_200"
+}, X = 20, g = ne(te), P = ({
+  min: d,
+  step: _,
+  toCompare: p,
+  value: k
+}) => {
+  let h = Math.min(k, p - 1 * _);
+  return h = Math.max(h, d), q(h, _);
+}, T = ({
+  max: d,
+  step: _,
+  toCompare: p,
+  value: k
+}) => {
+  let h = Math.max(k, p + 1 * _);
+  return h = Math.min(h, d), q(h, _);
+}, fe = Y(
+  ({
+    borderSelectorColor: d,
+    className: _,
+    disabled: p,
+    hint: k,
+    label: h,
+    max: a,
+    min: t,
+    onChange: v,
+    step: i = 1,
+    tooltip: M,
+    type: m,
+    value: f,
+    values: B,
+    ...W
+  }, G) => {
+    const [o, V] = D(t), [s, x] = D(a), [K, N] = D(t), [y, b] = D(a), z = A(null), E = A(null), $ = A(null), C = A(null), L = A(null), [S, j] = D(!1), [n, c] = D(!1), ae = (e) => {
+      const r = P({
+        min: t,
+        step: i,
+        toCompare: s,
+        value: parseInt(e.target.value, 10)
+      });
+      N(r), V(r), e.target.value = r.toString();
+    }, le = (e) => {
+      const r = T({
+        max: a,
+        step: i,
+        toCompare: o,
+        value: parseInt(e.target.value, 10)
+      });
+      b(r), x(r), e.target.value = r.toString();
+    }, Q = (e, r) => {
+      if (e.preventDefault(), r === "min") {
+        let u = o;
+        e.key === "ArrowRight" && (u = P({ min: t, step: i, toCompare: s, value: u + i })), e.key === "ArrowLeft" && (u = P({ min: t, step: i, toCompare: s, value: u - i })), N(u), V(u), v({ max: s, min: u });
+      }
+      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 })), b(u), x(u), v({ max: u, min: o });
+      }
+    }, I = Z(
+      (e) => {
+        const r = Math.round((e - t) / (a - t) * 100);
+        return r < 0 ? 0 : r > 100 ? 100 : r;
+      },
+      [t, a]
+    );
+    U(() => {
+      if (E.current) {
+        const e = I(o), r = I(parseInt(E.current.value, 10));
+        $.current && ($.current.style.left = `${e}%`, $.current.style.width = `${r - e}%`);
+      }
+    }, [o, I]), U(() => {
+      if (z.current) {
+        const e = I(parseInt(z.current.value, 10)), r = I(s);
+        if ($.current && ($.current.style.width = `${r - e}%`), C.current) {
+          const u = I(o) / 100;
+          C.current.style.left = `calc(${u * 100}% + ${(0.5 - u) * X}px)`;
+        }
+        if (L.current) {
+          const u = I(s) / 100;
+          L.current.style.left = `calc(${u * 100}% + ${(0.5 - u) * X}px)`;
+        }
+      }
+    }, [o, s, I]), U(() => {
+      if (f) {
+        if (!isNaN(f.min) && f.min !== o) {
+          const e = P({ min: t, step: i, toCompare: s, value: f.min || t });
+          V(e), N(e);
+        }
+        if (!isNaN(f.max) && f.max !== s) {
+          const e = T({ max: a, step: i, toCompare: o, value: f.max || a });
+          x(e), b(e);
+        }
+      }
+    }, [f]);
+    const J = ee();
+    return /* @__PURE__ */ R("div", { className: g("range-root", _), ref: G, children: [
+      h ? /* @__PURE__ */ l(re, { as: "label", htmlFor: `${J}-min`, variant: "sm", children: h }) : null,
+      /* @__PURE__ */ R("div", { className: g("input-wrapper"), children: [
+        (m === "inline" || m === "fields") && (m === "fields" ? /* @__PURE__ */ l(
+          O,
+          {
+            disabled: p,
+            max: s,
+            min: t,
+            onBlur: () => {
+              const e = P({
+                min: t,
+                step: i,
+                toCompare: s,
+                value: K
+              });
+              N(e), V(e), v({ max: s, min: e });
+            },
+            onChange: (e) => {
+              let r = parseInt(e.target.value, 10);
+              isNaN(r) && (r = 0), N(r);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                const r = P({
+                  min: t,
+                  step: i,
+                  toCompare: s,
+                  value: K
+                });
+                N(r), V(r), v({ max: s, min: r });
+              }
+            },
+            size: "sm",
+            type: "number",
+            value: K.toString()
+          }
+        ) : /* @__PURE__ */ l("div", { children: t })),
+        /* @__PURE__ */ R("div", { className: g("range-wrapper"), children: [
+          M ? /* @__PURE__ */ R(ie, { children: [
+            /* @__PURE__ */ l(
+              "output",
+              {
+                className: g("output", S && "output-visible"),
+                ref: C,
+                children: /* @__PURE__ */ l("div", { children: o })
+              }
+            ),
+            /* @__PURE__ */ l(
+              "output",
+              {
+                className: g("output", n && "output-visible"),
+                ref: L,
+                children: /* @__PURE__ */ l("div", { children: s })
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ R("div", { className: g("input-range-wrapper"), children: [
+            /* @__PURE__ */ l(
+              "input",
+              {
+                ...W,
+                className: g(
+                  "input-range",
+                  "range-input-range",
+                  d && `border-selector-${d}`
+                ),
+                disabled: p,
+                id: `${J}-min`,
+                max: a,
+                min: t,
+                onChange: ae,
+                onKeyDown: (e) => Q(e, "min"),
+                onMouseDown: () => {
+                  M && S === !1 && j(!0);
+                },
+                onMouseUp: () => {
+                  v({ max: s, min: o }), M && j(!1);
+                },
+                ref: z,
+                step: i,
+                type: "range",
+                value: o
+              }
+            ),
+            /* @__PURE__ */ l(
+              "input",
+              {
+                ...W,
+                className: g(
+                  "input-range",
+                  "range-input-range",
+                  d && `border-selector-${d}`
+                ),
+                disabled: p,
+                id: `${J}-max`,
+                max: a,
+                min: t,
+                onChange: le,
+                onKeyDown: (e) => Q(e, "max"),
+                onMouseDown: () => {
+                  M && n === !1 && c(!0);
+                },
+                onMouseUp: () => {
+                  v({ max: s, min: o }), M && c(!1);
+                },
+                ref: E,
+                step: i,
+                type: "range",
+                value: s
+              }
+            ),
+            /* @__PURE__ */ l("div", { className: g("range-track") }),
+            /* @__PURE__ */ l("div", { className: g("range", p && "range-disabled"), ref: $ })
+          ] }),
+          B ? /* @__PURE__ */ l("div", { className: g("thicks-markers"), children: B.reduce((e, r) => e.includes(r) ? e : [...e, r], []).filter((e) => e >= t && e <= a).map((e, r) => /* @__PURE__ */ l(
+            "div",
+            {
+              className: g("thick"),
+              style: { left: `${I(e)}%` },
+              children: /* @__PURE__ */ l(H, { className: g("thick-label"), children: e })
+            },
+            `${e}-${r}`
+          )) }) : null
+        ] }),
+        (m === "inline" || m === "fields") && (m === "fields" ? /* @__PURE__ */ l(
+          O,
+          {
+            disabled: p,
+            max: a,
+            min: o + 1,
+            onBlur: () => {
+              const e = T({
+                max: a,
+                step: i,
+                toCompare: o,
+                value: y
+              });
+              b(e), x(e), v({ max: e, min: o });
+            },
+            onChange: (e) => {
+              let r = parseInt(e.target.value, 10);
+              isNaN(r) && (r = 0), b(r);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                const r = T({
+                  max: a,
+                  step: i,
+                  toCompare: o,
+                  value: y
+                });
+                b(r), x(r), v({ max: r, min: o });
+              }
+            },
+            size: "sm",
+            type: "number",
+            value: y.toString()
+          }
+        ) : /* @__PURE__ */ l("div", { children: a }))
+      ] }),
+      k ? /* @__PURE__ */ l(H, { className: g("hint"), children: k }) : null
+    ] });
+  }
+), pe = 20, q = (d, _) => Math.round(d / _) * _, F = (d, _, p, k) => (d = q(d, k), d < _ ? _ : d > p ? p : d), w = ne(te), _e = Y(
+  ({
+    borderSelectorColor: d,
+    className: _,
+    disabled: p,
+    hint: k,
+    label: h,
+    max: a,
+    min: t,
+    onChange: v,
+    step: i = 1,
+    tooltip: M,
+    type: m,
+    value: f,
+    values: B,
+    ...W
+  }, G) => {
+    const o = A(null), V = A(null), [s, x] = D(!1), [K, N] = D(F(f, t, a, i)), [y, b] = D(F(f, t, a, i)), z = (n) => {
+      n = q(n, i), b(n);
+    }, E = (n) => {
+      n.preventDefault();
+      let c = y;
+      n.key === "ArrowRight" && (c = F(c + i, t, a, i)), n.key === "ArrowLeft" && (c = F(c - i, t, a, i)), b(c), N(c), v(c);
+    }, $ = (n) => {
+      let c = parseInt(n.target.value, 10);
+      isNaN(c) && (c = 0), N(c);
+    }, C = () => {
+      const n = F(K, t, a, i);
+      N(n), b(n), v(n);
+    }, L = (n) => {
+      n.key === "Enter" && C();
+    }, S = Z(
+      (n) => Math.round((n - t) / (a - t) * 100),
+      [t, a]
+    );
+    U(() => {
+      if (o.current && (o.current.style.backgroundSize = `${S(y)}% 100%`), V.current) {
+        const n = S(y) / 100;
+        V.current.style.left = `calc(${n * 100}% + ${(0.5 - n) * pe}px)`;
+      }
+    }, [y, S]), U(() => {
+      !isNaN(f) && f !== y && f && (z(f), N(f));
+    }, [f]);
+    const j = ee();
+    return /* @__PURE__ */ R("div", { className: w("slider-root", _), ref: G, children: [
+      h ? /* @__PURE__ */ l(re, { as: "label", htmlFor: j, variant: "sm", children: h }) : null,
+      /* @__PURE__ */ R("div", { className: w("input-wrapper"), children: [
+        (m === "inline" || m === "left-field") && (m === "left-field" ? /* @__PURE__ */ l(
+          O,
+          {
+            disabled: p,
+            max: a,
+            min: t,
+            onBlur: C,
+            onChange: $,
+            onKeyDown: L,
+            size: "sm",
+            type: "number",
+            value: K.toString()
+          }
+        ) : /* @__PURE__ */ l("div", { children: t })),
+        /* @__PURE__ */ R("div", { className: w("slider-wrapper"), children: [
+          /* @__PURE__ */ l(
+            "input",
+            {
+              className: w(
+                "input-range",
+                "slider-input-range",
+                d && `border-selector-${d}`
+              ),
+              disabled: p,
+              id: j,
+              list: "tickmarks",
+              max: a,
+              min: t,
+              onChange: (n) => {
+                const c = parseInt(n.target.value, 10);
+                z(c), N(c);
+              },
+              onKeyDown: E,
+              onMouseDown: () => {
+                M && s === !1 && x(!0);
+              },
+              onMouseUp: () => {
+                v(y), M && x(!1);
+              },
+              ref: o,
+              step: i,
+              type: "range",
+              value: y,
+              ...W
+            }
+          ),
+          M ? /* @__PURE__ */ l("output", { className: w("output", s && "output-visible"), ref: V, children: /* @__PURE__ */ l("div", { className: w("tooltip"), children: y }) }) : null,
+          B ? /* @__PURE__ */ l("div", { className: w("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: w("thick"),
+              style: { left: `${S(n)}%` },
+              children: /* @__PURE__ */ l(H, { className: w("thick-label"), children: n })
+            },
+            `${n}-${c}`
+          )) }) : null
+        ] }),
+        (m === "inline" || m === "right-field") && (m === "right-field" ? /* @__PURE__ */ l(
+          O,
+          {
+            className: w("input-text"),
+            disabled: p,
+            max: a,
+            min: t,
+            onBlur: C,
+            onChange: $,
+            onKeyDown: L,
+            size: "sm",
+            type: "number",
+            value: K.toString()
+          }
+        ) : /* @__PURE__ */ l("div", { children: a }))
+      ] }),
+      k ? /* @__PURE__ */ l(H, { className: w("hint"), children: k }) : null
+    ] });
+  }
+), ke = Object.assign(_e, { Range: fe });
+export {
+  ke as Slider,
+  _e as SliderComponent,
+  F as ensureMinMax,
+  q as round,
+  pe as thumbWidth
+};