@viasat/beam-react 2.0.0

package/lib/Slider/SingleSlider.es.js

@@ -0,0 +1,215 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import P, { useState as _, useCallback as R } from "react";
+import { s as v } from "../../chunks/slider.module.BW1fy3GU.js";
+import { Label as F } from "../Label/Label.es.js";
+import { SliderTickMarks as q } from "./Slider.TickMarks.es.js";
+import { SliderValueAxisLabels as B } from "./Slider.ValueAxisLabels.es.js";
+import { SliderError as H } from "./Slider.Error.es.js";
+import { SliderTextField as X } from "./Slider.TextField.es.js";
+import { SliderThumb as j } from "./Slider.Thumb.es.js";
+import { useSingleSliderLogic as W } from "./hooks/useSingleSliderLogic.es.js";
+import "../../chunks/constants.BBi77pmH.js";
+import "../../chunks/form.context.CNWjF5qA.js";
+import { LabelProvider as $ } from "../Form/contexts/label.context.es.js";
+import { HelperTextProvider as Q } from "../Form/contexts/helperText.context.es.js";
+import "../../chunks/CSSLookup.Cjf6o2Gz.js";
+import "../../utils/hooks/useId.es.js";
+import { validateSingleSliderDefaultValue as U } from "./utils/slider.validation.utils.es.js";
+import { clientXToValue as Z, calculatePercentage as G } from "./utils/slider.rendering.utils.es.js";
+import { toCqw as J, ZERO_CQW as K, DEFAULT_TEXT_FIELD_WIDTH as Y } from "./slider.constants.es.js";
+import { useSliderFormReset as b, useSliderPointerEvents as rr } from "./hooks/useSliderEvents.es.js";
+const Lr = P.forwardRef(function({
+  base: r,
+  value: h,
+  defaultValue: z,
+  marksSource: y = "none",
+  restrictToValueAxis: c = !1,
+  showTextField: L = !1,
+  textFieldWidth: S = Y,
+  persistentTooltip: M = !1,
+  disabledTooltip: T = !1,
+  helperText: k,
+  contentBefore: u,
+  contentAfter: f,
+  onChange: E,
+  ...V
+}) {
+  const t = U(
+    z,
+    r.normalizedMin,
+    r.normalizedMax
+  ), [s, o] = _(!1), {
+    value: a,
+    setValue: l,
+    markValues: p,
+    step: m,
+    getValidValue: d
+  } = W({
+    value: h,
+    defaultValue: t,
+    range: r.normalizedRange,
+    min: r.normalizedMin,
+    max: r.normalizedMax,
+    step: r.normalizedStep,
+    valueAxis: r.valueAxis,
+    restrictToValueAxis: c,
+    onChange: E
+  });
+  b(
+    r.internalInputRef,
+    t ?? r.normalizedMin ?? r.normalizedRange[0],
+    (i) => l(d(i)),
+    [
+      t,
+      r.normalizedMin,
+      r.normalizedRange,
+      l,
+      d
+    ]
+  );
+  const N = R(
+    (i) => {
+      r.disabled || r.readOnly || l(i);
+    },
+    [r.disabled, r.readOnly, l]
+  ), g = R(
+    (i) => {
+      if (r.disabled || r.readOnly || !r.trackRef.current) return;
+      const D = r.trackRef.current.getBoundingClientRect(), [O, I] = r.normalizedRange, w = Z(
+        i,
+        D,
+        O,
+        I,
+        r.isRTL
+      );
+      l(w), o(!0);
+    },
+    [r.disabled, r.readOnly, r.normalizedRange, r.isRTL, l]
+  );
+  rr(s, g, () => o(!1));
+  const [A, C] = r.normalizedRange, x = G(Number(a), A, C);
+  return /* @__PURE__ */ n("div", { ref: r.containerRef, className: r.classNames.container, ...V, children: [
+    /* @__PURE__ */ e(
+      $,
+      {
+        ctxHtmlFor: r.ids.input,
+        ctxDisabled: r.disabled,
+        ctxRequired: r.required,
+        ctxId: r.aria.labelledBy,
+        children: r.label && typeof r.label == "string" ? /* @__PURE__ */ e(F, { children: r.label }) : r.label
+      }
+    ),
+    /* @__PURE__ */ n("div", { className: r.classNames.contentContainer, role: "group", children: [
+      u && /* @__PURE__ */ e("div", { className: v[`${r.bem.subElementClassPrefix}content-before`], children: u }),
+      /* @__PURE__ */ n("div", { style: { width: "100%" }, children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            ref: r.trackRef,
+            className: r.classNames.track,
+            onPointerDown: (i) => {
+              r.disabled || r.readOnly || g(i.clientX);
+            },
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: r.classNames.fill,
+                  style: {
+                    [r.bem.variable("min-percentage")]: K,
+                    [r.bem.variable("max-percentage")]: J(x)
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(
+                q,
+                {
+                  valueAxis: r.valueAxis,
+                  markValues: p,
+                  range: r.normalizedRange,
+                  step: m,
+                  marksSource: y
+                }
+              ),
+              /* @__PURE__ */ e(
+                j,
+                {
+                  isRTL: r.isRTL,
+                  error: r.hasError,
+                  isDragging: s,
+                  setIsDragging: o,
+                  currentPercentage: x,
+                  disabled: r.disabled,
+                  readOnly: r.readOnly,
+                  value: a,
+                  range: r.normalizedRange,
+                  min: r.normalizedMin,
+                  max: r.normalizedMax,
+                  step: m,
+                  persistentTooltip: M,
+                  disabledTooltip: T,
+                  getValidValue: d,
+                  setValue: l,
+                  ariaLabelledby: r.aria.labelledBy,
+                  ariaLabel: r.aria.label,
+                  valueAxis: r.valueAxis,
+                  restrictToValueAxis: c
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          B,
+          {
+            valueAxis: r.valueAxis,
+            markValues: p,
+            range: r.normalizedRange,
+            showValueAxisLabels: r.showValueAxisLabels,
+            onMarkClick: N,
+            isRTL: r.isRTL
+          }
+        )
+      ] }),
+      L && /* @__PURE__ */ e(
+        X,
+        {
+          value: a,
+          readOnly: r.readOnly,
+          disabled: r.disabled,
+          error: r.hasError,
+          getValidValue: d,
+          setValue: l,
+          textFieldWidth: S,
+          min: r.normalizedMin,
+          max: r.normalizedMax,
+          step: m,
+          errorId: r.ids.error,
+          ariaLabelledby: r.aria.labelledBy,
+          ariaLabel: r.aria.label
+        }
+      ),
+      f && /* @__PURE__ */ e("div", { className: v[`${r.bem.subElementClassPrefix}content-after`], children: f })
+    ] }),
+    r.name && /* @__PURE__ */ e(
+      "input",
+      {
+        type: "hidden",
+        ref: r.internalInputRef,
+        id: r.ids.input,
+        name: r.name,
+        value: a,
+        disabled: r.disabled
+      }
+    ),
+    /* @__PURE__ */ n(Q, { ctxId: r.ids.helperText, ctxDisabled: r.disabled, children: [
+      k,
+      /* @__PURE__ */ e(H, { error: r.error, errorId: r.ids.error })
+    ] }),
+    r.showErrors(r.ids.validationErrors)
+  ] });
+});
+export {
+  Lr as SingleSlider,
+  Lr as default
+};

package/lib/Slider/Slider.Error.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("react"),l=require("clsx"),n=require("../../chunks/slider.module.Ds7jMW6I.js"),o=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const c=require("../../chunks/form.context.B1PXIJNq.js"),u=i.memo(function({error:e,errorId:r}){if(!e)return null;const{subElementClassPrefix:s}=o.getBEMClassNames("slider");return t.jsx(c.HelperText,{appearance:"negative",size:"sm",className:l(n.styles[`${s}error`]),id:r,children:e})});exports.SliderError=u;

package/lib/Slider/Slider.Error.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface ErrorProps {
+    error?: string;
+    errorId?: string;
+}
+export declare const SliderError: React.NamedExoticComponent<ErrorProps>;
+export {};

package/lib/Slider/Slider.Error.es.js

@@ -0,0 +1,27 @@
+import { jsx as o } from "react/jsx-runtime";
+import t from "react";
+import m from "clsx";
+import { s as i } from "../../chunks/slider.module.BW1fy3GU.js";
+import { g as a } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { H as l } from "../../chunks/form.context.CNWjF5qA.js";
+const g = t.memo(function({
+  error: r,
+  errorId: e
+}) {
+  if (!r) return null;
+  const { subElementClassPrefix: s } = a("slider");
+  return /* @__PURE__ */ o(
+    l,
+    {
+      appearance: "negative",
+      size: "sm",
+      className: m(i[`${s}error`]),
+      id: e,
+      children: r
+    }
+  );
+});
+export {
+  g as SliderError
+};

package/lib/Slider/Slider.TextField.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react/jsx-runtime"),i=require("react"),E=require("clsx"),j=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const k=require("../../chunks/slider.module.Ds7jMW6I.js"),M=require("../TextField/TextField.cjs.js"),P=i.memo(function({value:e,getValidValue:s,setValue:n,readOnly:S,disabled:N,error:f,textFieldWidth:F,errorId:T,min:g,max:q,step:c,ariaLabelledby:a,ariaLabel:y}){const[o,l]=i.useState(String(e)),[d,m]=i.useState(Number(e));i.useEffect(()=>{l(String(e)),m(Number(e))},[e]);const C=i.useCallback(t=>{const r=t.target.value;l(r);const u=Number(r);if(!isNaN(u)&&Math.abs(u-d)===c){const x=s(u);n(x),m(x)}},[s,n,d,c]),b=i.useCallback(()=>{const t=Number(o);if(isNaN(t))l(String(e));else{const r=s(t);n(r),l(String(r))}},[o,s,n,e]),{subElementClassPrefix:h}=j.getBEMClassNames("slider");return w.jsx(M.TextField,{width:F,type:"number",min:g,max:q,step:c,readOnly:S,disabled:N,error:f,value:o,onChange:C,onBlur:b,onKeyDown:t=>{t.key==="Enter"&&b()},"aria-describedby":T,"aria-labelledby":a,"aria-label":a?void 0:y,className:E(k.styles[`${h}textfield`])})});exports.SliderTextField=P;

package/lib/Slider/Slider.TextField.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { TextFieldProps } from '../TextField';
+interface SliderTextFieldProps extends Omit<TextFieldProps, 'onChange' | 'error'> {
+    getValidValue: (value: number) => number;
+    setValue: (value: number) => void;
+    textFieldWidth: string;
+    errorId?: string;
+    min: number;
+    max: number;
+    step: number;
+    ariaLabelledby?: string;
+    ariaLabel?: string;
+    error?: boolean;
+}
+export declare const SliderTextField: React.NamedExoticComponent<SliderTextFieldProps>;
+export {};

package/lib/Slider/Slider.TextField.es.js

@@ -0,0 +1,73 @@
+import { jsx as E } from "react/jsx-runtime";
+import k, { useState as x, useEffect as B, useCallback as b } from "react";
+import M from "clsx";
+import { g as P } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { s as _ } from "../../chunks/slider.module.BW1fy3GU.js";
+import { TextField as j } from "../TextField/TextField.es.js";
+const A = k.memo(function({
+  value: e,
+  getValidValue: i,
+  setValue: o,
+  readOnly: N,
+  disabled: p,
+  error: S,
+  textFieldWidth: F,
+  errorId: g,
+  min: T,
+  max: h,
+  step: s,
+  ariaLabelledby: a,
+  ariaLabel: y
+}) {
+  const [m, n] = x(String(e)), [c, f] = x(Number(e));
+  B(() => {
+    n(String(e)), f(Number(e));
+  }, [e]);
+  const C = b(
+    (t) => {
+      const r = t.target.value;
+      n(r);
+      const l = Number(r);
+      if (!isNaN(l) && Math.abs(l - c) === s) {
+        const u = i(l);
+        o(u), f(u);
+      }
+    },
+    [i, o, c, s]
+  ), d = b(() => {
+    const t = Number(m);
+    if (isNaN(t))
+      n(String(e));
+    else {
+      const r = i(t);
+      o(r), n(String(r));
+    }
+  }, [m, i, o, e]), { subElementClassPrefix: w } = P("slider");
+  return /* @__PURE__ */ E(
+    j,
+    {
+      width: F,
+      type: "number",
+      min: T,
+      max: h,
+      step: s,
+      readOnly: N,
+      disabled: p,
+      error: S,
+      value: m,
+      onChange: C,
+      onBlur: d,
+      onKeyDown: (t) => {
+        t.key === "Enter" && d();
+      },
+      "aria-describedby": g,
+      "aria-labelledby": a,
+      "aria-label": a ? void 0 : y,
+      className: M(_[`${w}textfield`])
+    }
+  );
+});
+export {
+  A as SliderTextField
+};

package/lib/Slider/Slider.Thumb.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),P=require("react"),I=require("clsx"),l=require("../../chunks/slider.module.Ds7jMW6I.js"),J=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const Q=require("../Tooltip/Tooltip.cjs.js"),U=require("./hooks/useAxisPoints.cjs.js"),W=require("./hooks/useSliderApi.cjs.js"),X=require("./hooks/useSliderThumbNavigation.cjs.js");require("../../chunks/form.context.B1PXIJNq.js");require("../Form/contexts/label.context.cjs.js");require("../Form/contexts/helperText.context.cjs.js");require("../../chunks/CSSLookup.DESAWWRT.js");require("../../utils/hooks/useId.cjs.js");const Y=require("./utils/slider.rendering.utils.cjs.js"),Z=require("./slider.constants.cjs.js"),G=P.memo(function({isRTL:c=!1,error:C,isDragging:u,setIsDragging:m,currentPercentage:d,disabled:i,readOnly:r,value:e,range:[O,V],min:b,max:_,step:q,persistentTooltip:o,disabledTooltip:h=!1,errorId:w,getValidValue:y,setValue:j,ariaLabelledby:f,ariaLabel:k,valueAxis:t,restrictToValueAxis:s,thumbSide:S,otherThumbValue:n,minGap:x=q}){const{subElementClassPrefix:v,classModifierPrefix:p,variable:D}=J.getBEMClassNames("slider"),g=U.useAxisPoints({restrictToValueAxis:s,valueAxis:t}),M=S==="right"&&n!==void 0?Math.max(b,n+x):b,N=S==="left"&&n!==void 0?Math.min(_,n-x):_,{increment:T,decrement:$,gotoFirst:E,gotoLast:K}=W.useSliderApi({value:e,min:M,max:N,step:q,axisPoints:g,restrictToValueAxis:s,getValidValue:y,setValue:j}),z=X.useSliderThumbNavigation({disabled:i,readOnly:r,isRTL:c,restrictToValueAxis:s,axisPoints:g,increment:T,decrement:$,gotoFirst:E,gotoLast:K}),A=P.useCallback(H=>{i||r||(H.preventDefault(),m(!0))},[i,r,m]),B=I(l.styles[`${v}thumb`],u&&l.styles[`${p}thumb--active`]),F=l.styles[`${v}thumb-container`],R=()=>t&&t[e]?t[e]:String(e);return a.jsx("div",{className:F,"aria-invalid":C,style:{[D("thumb-percentage")]:Z.toCqw(d),touchAction:"none"},onPointerDown:A,children:a.jsx(Q.Tooltip,{text:e,open:h?!1:o||u||void 0,placement:Y.getTooltipPlacement(o,d,c),disabled:h,children:a.jsx("div",{className:B,role:"slider","aria-valuenow":Number(e),"aria-valuemin":M,"aria-valuemax":N,"aria-disabled":i,"aria-readonly":r,tabIndex:i||r?-1:0,onKeyDown:z,"aria-describedby":w,"aria-labelledby":f,"aria-label":f?void 0:k,"aria-valuetext":R(),"aria-orientation":"horizontal"})})})});exports.SliderThumb=G;

package/lib/Slider/Slider.Thumb.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+interface ThumbProps {
+    isRTL?: boolean;
+    error?: boolean;
+    isDragging: boolean;
+    setIsDragging: (isDragging: boolean) => void;
+    currentPercentage: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    value: number;
+    range: [number, number];
+    min: number;
+    max: number;
+    step: number;
+    persistentTooltip?: boolean;
+    disabledTooltip?: boolean;
+    errorId?: string;
+    getValidValue: (val: number) => number;
+    setValue: (val: number) => void;
+    ariaLabelledby?: string;
+    ariaLabel?: string;
+    valueAxis?: {
+        [value: number]: string;
+    };
+    restrictToValueAxis?: boolean;
+    thumbSide?: 'left' | 'right';
+    otherThumbValue?: number;
+    minGap?: number;
+}
+export declare const SliderThumb: React.NamedExoticComponent<ThumbProps>;
+export {};

package/lib/Slider/Slider.Thumb.es.js

@@ -0,0 +1,115 @@
+import { jsx as m } from "react/jsx-runtime";
+import Q, { useCallback as R } from "react";
+import U from "clsx";
+import { s } from "../../chunks/slider.module.BW1fy3GU.js";
+import { g as W } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { Tooltip as X } from "../Tooltip/Tooltip.es.js";
+import { useAxisPoints as Y } from "./hooks/useAxisPoints.es.js";
+import { useSliderApi as Z } from "./hooks/useSliderApi.es.js";
+import { useSliderThumbNavigation as A } from "./hooks/useSliderThumbNavigation.es.js";
+import "../../chunks/form.context.CNWjF5qA.js";
+import "../Form/contexts/label.context.es.js";
+import "../Form/contexts/helperText.context.es.js";
+import "../../chunks/CSSLookup.Cjf6o2Gz.js";
+import "../../utils/hooks/useId.es.js";
+import { getTooltipPlacement as G } from "./utils/slider.rendering.utils.es.js";
+import { toCqw as L } from "./slider.constants.es.js";
+const xt = Q.memo(function({
+  isRTL: c = !1,
+  error: P,
+  isDragging: f,
+  setIsDragging: l,
+  currentPercentage: p,
+  disabled: o,
+  readOnly: r,
+  value: t,
+  range: [O, V],
+  min: d,
+  max: h,
+  step: u,
+  persistentTooltip: a,
+  disabledTooltip: b = !1,
+  errorId: S,
+  getValidValue: D,
+  setValue: $,
+  ariaLabelledby: x,
+  ariaLabel: y,
+  valueAxis: i,
+  restrictToValueAxis: n,
+  thumbSide: v,
+  otherThumbValue: e,
+  minGap: M = u
+}) {
+  const { subElementClassPrefix: C, classModifierPrefix: E, variable: K } = W("slider"), N = Y({ restrictToValueAxis: n, valueAxis: i }), g = v === "right" && e !== void 0 ? Math.max(d, e + M) : d, w = v === "left" && e !== void 0 ? Math.min(h, e - M) : h, { increment: _, decrement: j, gotoFirst: k, gotoLast: q } = Z({
+    value: t,
+    min: g,
+    max: w,
+    step: u,
+    axisPoints: N,
+    restrictToValueAxis: n,
+    getValidValue: D,
+    setValue: $
+  }), z = A({
+    disabled: o,
+    readOnly: r,
+    isRTL: c,
+    restrictToValueAxis: n,
+    axisPoints: N,
+    increment: _,
+    decrement: j,
+    gotoFirst: k,
+    gotoLast: q
+  }), B = R(
+    (J) => {
+      o || r || (J.preventDefault(), l(!0));
+    },
+    [o, r, l]
+  ), F = U(
+    s[`${C}thumb`],
+    f && s[`${E}thumb--active`]
+  ), H = s[`${C}thumb-container`], I = () => i && i[t] ? i[t] : String(t);
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: H,
+      "aria-invalid": P,
+      style: {
+        [K("thumb-percentage")]: L(p),
+        touchAction: "none"
+      },
+      onPointerDown: B,
+      children: /* @__PURE__ */ m(
+        X,
+        {
+          text: t,
+          open: b ? !1 : a || f || void 0,
+          placement: G(a, p, c),
+          disabled: b,
+          children: /* @__PURE__ */ m(
+            "div",
+            {
+              className: F,
+              role: "slider",
+              "aria-valuenow": Number(t),
+              "aria-valuemin": g,
+              "aria-valuemax": w,
+              "aria-disabled": o,
+              "aria-readonly": r,
+              tabIndex: o || r ? -1 : 0,
+              onKeyDown: z,
+              "aria-describedby": S,
+              "aria-labelledby": x,
+              "aria-label": x ? void 0 : y,
+              "aria-valuetext": I(),
+              "aria-orientation": "horizontal"
+            }
+          )
+        }
+      )
+    }
+  );
+});
+export {
+  xt as SliderThumb
+};

package/lib/Slider/Slider.TickMarks.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("react"),f=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const M=require("../../chunks/slider.module.Ds7jMW6I.js"),g=require("./slider.constants.cjs.js"),_=d.memo(function({valueAxis:o,markValues:c,range:[e,s],step:l,marksSource:r}){if(r==="none"||r==="valueAxis"&&(!o||c.length===0)||r==="step"&&!l)return null;const{subElementClassPrefix:u}=f.getBEMClassNames("slider"),a=r==="step"?Array.from({length:Math.floor((s-e)/l)+1},(t,i)=>e+i*l):c;return n.jsx(n.Fragment,{children:a.map(t=>{if(t===e||t===s)return null;const i=(t-e)/(s-e)*100;return n.jsx("div",{className:M.styles[`${u}tick`],style:{left:`calc(${i}% - ${g.TICK_MARK_OFFSET})`},"aria-hidden":"true"},t)})})});exports.SliderTickMarks=_;

package/lib/Slider/Slider.TickMarks.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { MarksSource } from './Slider.types';
+interface TickMarksProps {
+    valueAxis?: {
+        [value: number]: string;
+    };
+    markValues: number[];
+    range: [number, number];
+    step: number;
+    marksSource: MarksSource;
+}
+export declare const SliderTickMarks: React.NamedExoticComponent<TickMarksProps>;
+export {};

package/lib/Slider/Slider.TickMarks.es.js

@@ -0,0 +1,37 @@
+import { jsx as n, Fragment as p } from "react/jsx-runtime";
+import d from "react";
+import { g as u } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { s as g } from "../../chunks/slider.module.BW1fy3GU.js";
+import { TICK_MARK_OFFSET as m } from "./slider.constants.es.js";
+const E = d.memo(function({
+  valueAxis: f,
+  markValues: i,
+  range: [t, l],
+  step: s,
+  marksSource: r
+}) {
+  if (r === "none" || r === "valueAxis" && (!f || i.length === 0) || r === "step" && !s)
+    return null;
+  const { subElementClassPrefix: c } = u("slider"), a = r === "step" ? Array.from(
+    { length: Math.floor((l - t) / s) + 1 },
+    (e, o) => t + o * s
+  ) : i;
+  return /* @__PURE__ */ n(p, { children: a.map((e) => {
+    if (e === t || e === l)
+      return null;
+    const o = (e - t) / (l - t) * 100;
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        className: g[`${c}tick`],
+        style: { left: `calc(${o}% - ${m})` },
+        "aria-hidden": "true"
+      },
+      e
+    );
+  }) });
+});
+export {
+  E as SliderTickMarks
+};

package/lib/Slider/Slider.ValueAxisLabels.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),y=require("react"),d=require("clsx"),l=require("../../chunks/slider.module.Ds7jMW6I.js"),p=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const N=y.memo(function({valueAxis:t,markValues:u,range:[o,x],showValueAxisLabels:m,onMarkClick:b,isRTL:f}){if(!m||!t||u.length===0)return null;const{subElementClassPrefix:s}=p.getBEMClassNames("slider"),h=d(l.styles[`${s}value-axis-label`]),g=d(l.styles[`${s}value-axis-label`],l.styles[`${s}value-axis-helper`]);return c.jsxs("div",{className:l.styles[`${s}value-axis`]||"",children:[u.map(e=>{let a=(e-o)/(x-o)*100;f&&(a=100-a);const r=Math.max(0,Math.min(100,a));let n="center",i="-50%";return r===0?(n="left",i="0"):r===100&&(n="right",i="-100%"),c.jsx("button",{type:"button",tabIndex:-1,className:h,style:{left:`${r}%`,transform:`translateX(${i})`,textAlign:n},"aria-label":t[e],onClick:()=>b(e),children:t[e]},e)}),c.jsx("div",{className:g,children:"-"})]})});exports.SliderValueAxisLabels=N;

package/lib/Slider/Slider.ValueAxisLabels.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+interface ValueAxisLabelsProps {
+    valueAxis?: {
+        [value: number]: string;
+    };
+    markValues: number[];
+    range: [number, number];
+    showValueAxisLabels: boolean;
+    onMarkClick: (mark: number) => void;
+    isRTL: boolean;
+}
+export declare const SliderValueAxisLabels: React.NamedExoticComponent<ValueAxisLabelsProps>;
+export {};

package/lib/Slider/Slider.ValueAxisLabels.es.js

@@ -0,0 +1,49 @@
+import { jsxs as g, jsx as c } from "react/jsx-runtime";
+import N from "react";
+import f from "clsx";
+import { s as l } from "../../chunks/slider.module.BW1fy3GU.js";
+import { g as $ } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+const P = N.memo(function({
+  valueAxis: s,
+  markValues: o,
+  range: [m, p],
+  showValueAxisLabels: u,
+  onMarkClick: x,
+  isRTL: d
+}) {
+  if (!u || !s || o.length === 0) return null;
+  const { subElementClassPrefix: t } = $("slider"), b = f(l[`${t}value-axis-label`]), h = f(
+    l[`${t}value-axis-label`],
+    l[`${t}value-axis-helper`]
+  );
+  return /* @__PURE__ */ g("div", { className: l[`${t}value-axis`] || "", children: [
+    o.map((e) => {
+      let a = (e - m) / (p - m) * 100;
+      d && (a = 100 - a);
+      const r = Math.max(0, Math.min(100, a));
+      let i = "center", n = "-50%";
+      return r === 0 ? (i = "left", n = "0") : r === 100 && (i = "right", n = "-100%"), /* @__PURE__ */ c(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          className: b,
+          style: {
+            left: `${r}%`,
+            transform: `translateX(${n})`,
+            textAlign: i
+          },
+          "aria-label": s[e],
+          onClick: () => x(e),
+          children: s[e]
+        },
+        e
+      );
+    }),
+    /* @__PURE__ */ c("div", { className: h, children: "-" })
+  ] });
+});
+export {
+  P as SliderValueAxisLabels
+};

package/lib/Slider/Slider.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),v=require("react"),j=require("./SingleSlider.cjs.js"),D=require("./DualSlider.cjs.js"),M=require("./hooks/useSliderBase.cjs.js"),R=v.forwardRef(function(e,s){const{name:u,validationRules:d,disabled:t,readOnly:n,required:o,className:S,range:c,step:b,min:_,max:y,label:f,valueAxis:m,showValueAxisLabels:q,error:x,"aria-label":A,"aria-labelledby":g,...r}=e,l=M.useSliderBase({name:u,validationRules:d,disabled:t,readOnly:n,required:o,className:S,range:c,step:b,min:_,max:y,label:f,valueAxis:m,showValueAxisLabels:q,error:x,ariaLabel:A,ariaLabelledBy:g},s);return Array.isArray(e.value)||Array.isArray(e.defaultValue)?a.jsx(D.DualSlider,{base:l,...r}):a.jsx(j.SingleSlider,{base:l,...r})}),i=R;exports.Slider=i;exports.default=i;

package/lib/Slider/Slider.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { SliderProps } from './Slider.types';
+export declare const Slider: (props: SliderProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement;
+export default Slider;
+export type { SliderProps } from './Slider.types';