@viasat/beam-react 2.0.0

package/lib/Slider/Slider.es.js

@@ -0,0 +1,65 @@
+import { jsx as l } from "react/jsx-runtime";
+import D from "react";
+import { SingleSlider as L } from "./SingleSlider.es.js";
+import { DualSlider as R } from "./DualSlider.es.js";
+import { useSliderBase as g } from "./hooks/useSliderBase.es.js";
+const w = D.forwardRef(
+  function(e, i) {
+    const {
+      name: o,
+      validationRules: s,
+      disabled: t,
+      readOnly: d,
+      required: n,
+      className: u,
+      range: m,
+      step: f,
+      min: b,
+      max: c,
+      label: y,
+      valueAxis: S,
+      showValueAxisLabels: A,
+      error: p,
+      "aria-label": x,
+      "aria-labelledby": v,
+      ...a
+    } = e, r = g(
+      {
+        name: o,
+        validationRules: s,
+        disabled: t,
+        readOnly: d,
+        required: n,
+        className: u,
+        range: m,
+        step: f,
+        min: b,
+        max: c,
+        label: y,
+        valueAxis: S,
+        showValueAxisLabels: A,
+        error: p,
+        ariaLabel: x,
+        ariaLabelledBy: v
+      },
+      i
+    );
+    return Array.isArray(e.value) || Array.isArray(e.defaultValue) ? /* @__PURE__ */ l(
+      R,
+      {
+        base: r,
+        ...a
+      }
+    ) : /* @__PURE__ */ l(
+      L,
+      {
+        base: r,
+        ...a
+      }
+    );
+  }
+), C = w;
+export {
+  C as Slider,
+  C as default
+};

package/lib/Slider/Slider.types.cjs.js

@@ -0,0 +1 @@
+"use strict";

package/lib/Slider/Slider.types.d.ts

@@ -0,0 +1,152 @@
+import { ReactNode } from 'react';
+import { FormValidator } from '@viasat/beam-shared/components/form';
+export type MarksSource = 'step' | 'valueAxis' | 'none';
+/**
+ * Base props shared between Single and Dual slider modes
+ */
+interface BaseSliderProps extends Omit<React.ComponentPropsWithRef<'input'>, 'onChange' | 'value' | 'defaultValue'> {
+    /**
+     * Specify the range of the Slider, minimum and maximum values
+     * @default [0, 100]
+     */
+    range?: [number, number];
+    /**
+     * Specify the label for the Slider
+     */
+    label?: string | React.ReactNode;
+    /**
+     * Specify whether the Slider is read-only
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Specify whether the Slider is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Specify the step value of the Slider
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Specify custom className for the Slider container
+     */
+    className?: string;
+    /**
+     * Specify error text and display error state of Slider
+     */
+    error?: string;
+    /**
+     * Specify the name of the Slider input, useful for form submission.
+     */
+    name?: string;
+    /**
+     * Specify the value axis marks & labels
+     */
+    valueAxis?: {
+        [value: number]: string;
+    };
+    /**
+     * Show the value axis under the Slider
+     * @default true
+     */
+    showValueAxisLabels?: boolean;
+    /**
+     * Set the source of the marks. `step` will render marks based on the step value, `valueAxis` based on the `valueAxis` prop and `none` will not render any marks
+     * @default none
+     */
+    marksSource?: MarksSource;
+    /**
+     * Restrict Slider value to only the provided value axis
+     * @default false
+     */
+    restrictToValueAxis?: boolean;
+    /**
+     * Specify whether or not the Slider should display the TextField
+     * @default false
+     */
+    showTextField?: boolean;
+    /**
+     * Specify the width of the TextField
+     * @default 3.625rem
+     */
+    textFieldWidth?: string;
+    /**
+     * Specify whether the tooltip should be always visible
+     * @default false
+     */
+    persistentTooltip?: boolean;
+    /**
+     * Specify whether to hide the tooltip on the slider handle
+     * @default false
+     */
+    disabledTooltip?: boolean;
+    /**
+     * Specify HelperText for Slider
+     */
+    helperText?: ReactNode;
+    /**
+     * Specify content to display before selection
+     */
+    contentBefore?: ReactNode;
+    /**
+     * Specify content to display after selection
+     */
+    contentAfter?: ReactNode;
+    /**
+     * Specify a minimum value for the Slider value
+     */
+    min?: number;
+    /**
+     * Specify a maximum value for the Slider value
+     */
+    max?: number;
+    /**
+     * Validation rules for the Slider component
+     */
+    validationRules?: FormValidator[];
+}
+/**
+ * Props for single-value slider mode
+ */
+export interface SingleSliderProps extends BaseSliderProps {
+    /**
+     * The value of the Slider (controlled mode)
+     */
+    value?: number;
+    /**
+     * Specify the initial value of the Slider
+     */
+    defaultValue?: number;
+    /**
+     * Callback fired when the value changes
+     */
+    onChange?: (value: number) => void;
+}
+/**
+ * Props for dual-handle slider mode
+ */
+export interface DualSliderProps extends BaseSliderProps {
+    /**
+     * The value of the Slider (controlled mode). [min, max]
+     */
+    value?: [number, number];
+    /**
+     * Specify the initial value of the Slider. [min, max]
+     */
+    defaultValue?: [number, number];
+    /**
+     * Callback fired when the value changes
+     */
+    onChange?: (value: [number, number]) => void;
+    /**
+     * Minimum gap between the two handles. Defaults to step value
+     */
+    minGap?: number;
+}
+/**
+ * Union type for public API - supports both single and dual modes
+ */
+export type SliderProps = SingleSliderProps | DualSliderProps;
+export {};

package/lib/Slider/Slider.types.es.js

@@ -0,0 +1 @@
+

package/lib/Slider/hooks/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useAxisPoints.cjs.js"),i=require("./useSliderApi.cjs.js"),s=require("./useSliderThumbNavigation.cjs.js"),r=require("./useSingleSliderLogic.cjs.js"),l=require("./useDualSliderLogic.cjs.js"),o=require("./useSliderBase.cjs.js");exports.useAxisPoints=e.useAxisPoints;exports.useSliderApi=i.useSliderApi;exports.useSliderThumbNavigation=s.useSliderThumbNavigation;exports.useSingleSliderLogic=r.useSingleSliderLogic;exports.useDualSliderLogic=l.useDualSliderLogic;exports.useSliderBase=o.useSliderBase;

package/lib/Slider/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from './useAxisPoints';
+export * from './useSliderApi';
+export * from './useSliderThumbNavigation';
+export * from './useSingleSliderLogic';
+export * from './useDualSliderLogic';
+export * from './useSliderBase';

package/lib/Slider/hooks/index.es.js

@@ -0,0 +1,14 @@
+import { useAxisPoints as o } from "./useAxisPoints.es.js";
+import { useSliderApi as s } from "./useSliderApi.es.js";
+import { useSliderThumbNavigation as u } from "./useSliderThumbNavigation.es.js";
+import { useSingleSliderLogic as m } from "./useSingleSliderLogic.es.js";
+import { useDualSliderLogic as x } from "./useDualSliderLogic.es.js";
+import { useSliderBase as S } from "./useSliderBase.es.js";
+export {
+  o as useAxisPoints,
+  x as useDualSliderLogic,
+  m as useSingleSliderLogic,
+  s as useSliderApi,
+  S as useSliderBase,
+  u as useSliderThumbNavigation
+};

package/lib/Slider/hooks/useAxisPoints.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react");function u({restrictToValueAxis:t,valueAxis:e}){return o.useMemo(()=>!t||!e?[]:Object.keys(e).map(Number).sort((r,n)=>r-n),[t,e])}exports.useAxisPoints=u;

package/lib/Slider/hooks/useAxisPoints.d.ts

@@ -0,0 +1,8 @@
+interface UseAxisPointsProps {
+    restrictToValueAxis?: boolean;
+    valueAxis?: {
+        [value: number]: string;
+    };
+}
+export declare function useAxisPoints({ restrictToValueAxis, valueAxis, }: UseAxisPointsProps): number[];
+export {};

package/lib/Slider/hooks/useAxisPoints.es.js

@@ -0,0 +1,10 @@
+import { useMemo as o } from "react";
+function u({
+  restrictToValueAxis: t,
+  valueAxis: r
+}) {
+  return o(() => !t || !r ? [] : Object.keys(r).map(Number).sort((e, n) => e - n), [t, r]);
+}
+export {
+  u as useAxisPoints
+};

package/lib/Slider/hooks/useDualSliderLogic.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),n=require("../utils/sliderLogic.utils.cjs.js");function D({value:g,defaultValue:S,range:[f,k],min:l,max:e,step:a,valueAxis:C,restrictToValueAxis:b=!1,onChange:d,minGap:h}){const o=h??a,r=c.useMemo(()=>n.calculateMarkValues(C,f,k),[C,f,k]),_=c.useCallback(u=>n.getClosestMark(u,r,l,e),[r,l,e]),F=c.useCallback(u=>n.getClosestStep(u,l,e,a),[l,e,a]),i=c.useCallback(u=>n.getValidValue(u,b,r,l,e,a),[b,r,l,e,a]),V=g!==void 0,L=()=>S!==void 0?S:[l,e],[q,w]=c.useState(L()),M=V?g:q,y=c.useCallback(u=>{let[t,s]=u;t=i(t),s=i(s),s-t<o&&(t!==M[0]?t=Math.min(t,s-o):s=Math.max(s,t+o)),t=Math.max(l,Math.min(t,e-o)),s=Math.max(t+o,Math.min(s,e));const v=[t,s];V||w(v),d&&d(v)},[i,V,d,M,o,l,e]);return{value:M,setValue:y,markValues:r,getClosestMark:_,getClosestStep:F,getValidValue:i,min:l,max:e,step:a}}exports.useDualSliderLogic=D;

package/lib/Slider/hooks/useDualSliderLogic.d.ts

@@ -0,0 +1,23 @@
+export interface UseDualSliderLogicProps {
+    value?: [number, number];
+    defaultValue?: [number, number];
+    range: [number, number];
+    min: number;
+    max: number;
+    step: number;
+    valueAxis?: Record<number, string>;
+    restrictToValueAxis?: boolean;
+    onChange?: (value: [number, number]) => void;
+    minGap?: number;
+}
+export declare function useDualSliderLogic({ value: controlledValue, defaultValue, range: [rangeMin, rangeMax], min, max, step, valueAxis, restrictToValueAxis, onChange, minGap, }: UseDualSliderLogicProps): {
+    value: [number, number];
+    setValue: (newValue: [number, number]) => void;
+    markValues: number[];
+    getClosestMark: (val: number) => number;
+    getClosestStep: (val: number) => number;
+    getValidValue: (val: number) => number;
+    min: number;
+    max: number;
+    step: number;
+};

package/lib/Slider/hooks/useDualSliderLogic.es.js

@@ -0,0 +1,60 @@
+import { useMemo as I, useCallback as n, useState as L } from "react";
+import { calculateMarkValues as U, getClosestMark as j, getClosestStep as q, getValidValue as y } from "../utils/sliderLogic.utils.es.js";
+function H({
+  value: f,
+  defaultValue: d,
+  range: [g, k],
+  min: l,
+  max: e,
+  step: a,
+  valueAxis: C,
+  restrictToValueAxis: S = !1,
+  onChange: V,
+  minGap: h
+}) {
+  const r = h ?? a, u = I(
+    () => U(C, g, k),
+    [C, g, k]
+  ), F = n(
+    (s) => j(s, u, l, e),
+    [u, l, e]
+  ), p = n(
+    (s) => q(s, l, e, a),
+    [l, e, a]
+  ), c = n(
+    (s) => y(s, S, u, l, e, a),
+    [S, u, l, e, a]
+  ), i = f !== void 0, w = () => d !== void 0 ? d : [l, e], [b, D] = L(
+    w()
+  ), M = i ? f : b, G = n(
+    (s) => {
+      let [t, o] = s;
+      t = c(t), o = c(o), o - t < r && (t !== M[0] ? t = Math.min(t, o - r) : o = Math.max(o, t + r)), t = Math.max(l, Math.min(t, e - r)), o = Math.max(t + r, Math.min(o, e));
+      const v = [t, o];
+      i || D(v), V && V(v);
+    },
+    [
+      c,
+      i,
+      V,
+      M,
+      r,
+      l,
+      e
+    ]
+  );
+  return {
+    value: M,
+    setValue: G,
+    markValues: u,
+    getClosestMark: F,
+    getClosestStep: p,
+    getValidValue: c,
+    min: l,
+    max: e,
+    step: a
+  };
+}
+export {
+  H as useDualSliderLogic
+};

package/lib/Slider/hooks/useSingleSliderLogic.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),r=require("../utils/sliderLogic.utils.cjs.js");function q({value:d,defaultValue:g,range:[n,S],min:e,max:l,step:o,valueAxis:V,restrictToValueAxis:k=!1,onChange:c}){const u=s.useMemo(()=>r.calculateMarkValues(V,n,S),[V,n,S]),b=s.useCallback(t=>r.getClosestMark(t,u,e,l),[u,e,l]),f=s.useCallback(t=>r.getClosestStep(t,e,l,o),[e,l,o]),a=s.useCallback(t=>r.getValidValue(t,k,u,e,l,o),[k,u,e,l,o]),i=d!==void 0,v=()=>g!==void 0?g:e,[M,_]=s.useState(v()),F=i?d:M,L=s.useCallback(t=>{const C=a(t);i||_(C),c&&c(C)},[a,i,c]);return{value:F,setValue:L,markValues:u,getClosestMark:b,getClosestStep:f,getValidValue:a,min:e,max:l,step:o}}exports.useSingleSliderLogic=q;

package/lib/Slider/hooks/useSingleSliderLogic.d.ts

@@ -0,0 +1,22 @@
+export interface UseSingleSliderLogicProps {
+    value?: number;
+    defaultValue?: number;
+    range: [number, number];
+    min: number;
+    max: number;
+    step: number;
+    valueAxis?: Record<number, string>;
+    restrictToValueAxis?: boolean;
+    onChange?: (value: number) => void;
+}
+export declare function useSingleSliderLogic({ value: controlledValue, defaultValue, range: [rangeMin, rangeMax], min, max, step, valueAxis, restrictToValueAxis, onChange, }: UseSingleSliderLogicProps): {
+    value: number;
+    setValue: (newValue: number) => void;
+    markValues: number[];
+    getClosestMark: (val: number) => number;
+    getClosestStep: (val: number) => number;
+    getValidValue: (val: number) => number;
+    min: number;
+    max: number;
+    step: number;
+};

package/lib/Slider/hooks/useSingleSliderLogic.es.js

@@ -0,0 +1,49 @@
+import { useMemo as I, useCallback as r, useState as L } from "react";
+import { calculateMarkValues as U, getClosestMark as j, getClosestStep as q, getValidValue as w } from "../utils/sliderLogic.utils.es.js";
+function B({
+  value: V,
+  defaultValue: d,
+  range: [g, i],
+  min: e,
+  max: t,
+  step: o,
+  valueAxis: n,
+  restrictToValueAxis: S = !1,
+  onChange: u
+}) {
+  const s = I(
+    () => U(n, g, i),
+    [n, g, i]
+  ), k = r(
+    (l) => j(l, s, e, t),
+    [s, e, t]
+  ), C = r(
+    (l) => q(l, e, t, o),
+    [e, t, o]
+  ), a = r(
+    (l) => w(l, S, s, e, t, o),
+    [S, s, e, t, o]
+  ), c = V !== void 0, v = () => d !== void 0 ? d : e, [F, M] = L(
+    v()
+  ), p = c ? V : F, b = r(
+    (l) => {
+      const f = a(l);
+      c || M(f), u && u(f);
+    },
+    [a, c, u]
+  );
+  return {
+    value: p,
+    setValue: b,
+    markValues: s,
+    getClosestMark: k,
+    getClosestStep: C,
+    getValidValue: a,
+    min: e,
+    max: t,
+    step: o
+  };
+}
+export {
+  B as useSingleSliderLogic
+};

package/lib/Slider/hooks/useSliderApi.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react");function y({value:d,min:M,max:S,step:g,axisPoints:n,restrictToValueAxis:b,getValidValue:r,setValue:h}){const o=C.useCallback(c=>{const m=n.indexOf(c);return m!==-1?m:n.reduce((t,e,f)=>Math.abs(e-c)<Math.abs(n[t]-c)?f:t,0)},[n]),k=C.useCallback((c,m=1)=>{let t;if(b&&n.length>0){const e=o(Number(d)),f=c==="increment"?Math.min(n.length-1,e+m):Math.max(0,e-m);t=n[f]}else{const e=g*m;t=c==="increment"?Number(d)+e:Number(d)-e}h(r(t))},[b,n,d,g,h,r,o]),u=C.useCallback((c=1)=>k("increment",c),[k]),w=C.useCallback((c=1)=>k("decrement",c),[k]),I=C.useCallback(()=>{const c=b&&n.length?n[0]:M;h(r(c))},[b,n,M,h,r]),N=C.useCallback(()=>{const c=b&&n.length?n[n.length-1]:S;h(r(c))},[b,n,S,h,r]);return{increment:u,decrement:w,gotoFirst:I,gotoLast:N}}exports.useSliderApi=y;

package/lib/Slider/hooks/useSliderApi.d.ts

@@ -0,0 +1,17 @@
+interface UseSliderApiProps {
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    axisPoints: number[];
+    restrictToValueAxis?: boolean;
+    getValidValue: (val: number) => number;
+    setValue: (val: number) => void;
+}
+export declare function useSliderApi({ value, min, max, step, axisPoints, restrictToValueAxis, getValidValue, setValue, }: UseSliderApiProps): {
+    increment: (multiplier?: any) => void;
+    decrement: (multiplier?: any) => void;
+    gotoFirst: () => void;
+    gotoLast: () => void;
+};
+export {};

package/lib/Slider/hooks/useSliderApi.es.js

@@ -0,0 +1,59 @@
+import { useCallback as M } from "react";
+function S({
+  value: d,
+  min: N,
+  max: t,
+  step: C,
+  axisPoints: n,
+  restrictToValueAxis: m,
+  getValidValue: h,
+  setValue: r
+}) {
+  const g = M(
+    (c) => {
+      const b = n.indexOf(c);
+      return b !== -1 ? b : n.reduce(
+        (f, e, I) => Math.abs(e - c) < Math.abs(n[f] - c) ? I : f,
+        0
+      );
+    },
+    [n]
+  ), w = M(
+    (c, b = 1) => {
+      let f;
+      if (m && n.length > 0) {
+        const e = g(Number(d)), I = c === "increment" ? Math.min(n.length - 1, e + b) : Math.max(0, e - b);
+        f = n[I];
+      } else {
+        const e = C * b;
+        f = c === "increment" ? Number(d) + e : Number(d) - e;
+      }
+      r(h(f));
+    },
+    [
+      m,
+      n,
+      d,
+      C,
+      r,
+      h,
+      g
+    ]
+  ), k = M(
+    (c = 1) => w("increment", c),
+    [w]
+  ), o = M(
+    (c = 1) => w("decrement", c),
+    [w]
+  ), F = M(() => {
+    const c = m && n.length ? n[0] : N;
+    r(h(c));
+  }, [m, n, N, r, h]), L = M(() => {
+    const c = m && n.length ? n[n.length - 1] : t;
+    r(h(c));
+  }, [m, n, t, r, h]);
+  return { increment: k, decrement: o, gotoFirst: F, gotoLast: L };
+}
+export {
+  S as useSliderApi
+};

package/lib/Slider/hooks/useSliderBase.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),W=require("../../../chunks/classNames.DAeKwerT.js"),m=require("../../../chunks/slider.module.Ds7jMW6I.js"),X=require("../../Form/hooks/useUniversalRef.hook.cjs.js"),s=require("../../Form/hooks/useAccessibleId.hook.cjs.js");require("react/jsx-runtime");const Y=require("../../../chunks/form.context.B1PXIJNq.js");require("../../Form/contexts/label.context.cjs.js");require("../../Form/contexts/helperText.context.cjs.js");const Z=require("../../../utils/hooks/index.cjs.js"),$=require("../utils/slider.validation.utils.cjs.js"),r=require("../utils/slider.rendering.utils.cjs.js"),q=require("../slider.constants.cjs.js");function ee(p,x){const{name:l,validationRules:A=[],disabled:C=!1,readOnly:R=!1,required:I=!1,className:L,range:N=q.DEFAULT_RANGE,step:y=q.DEFAULT_STEP,min:E=null,max:P=null,label:i,valueAxis:a,showValueAxisLabels:n=!0,error:t,ariaLabel:S,ariaLabelledBy:g}=p,{showErrors:h,isInvalid:o,disabled:d,readOnly:c,required:k}=Y.useFormField({name:l,validationRules:A,disabledProp:C,readOnlyProp:R,requiredProp:I}),{normalizedRange:v,normalizedStep:T,normalizedMin:F,normalizedMax:B}=$.validateSliderRange(N,y,E,P),{refFn:M}=X.useUniversalRef(x),u=f.useRef(null),O=f.useRef(null),{id:z}=s.useAccessibleId(),{id:U}=s.useAccessibleId(),{id:b}=s.useAccessibleId(),{id:D}=s.useAccessibleId(),{id:w}=s.useAccessibleId(),H=Z.useRTLDirection(u),e=W.getBEMClassNames("slider"),_=!!t||o,{containerClassName:j,trackClassName:G,fillClassName:V}=r.getSliderClassNames(e.baseClassNamePrefix,e.subElementClassPrefix,e.classModifierPrefix,d,c,_,L,m.styles),J=r.getContentContainerClassName(e.subElementClassPrefix,e.classModifierPrefix,n,a,m.styles),{finalAriaLabel:K,finalAriaLabelledBy:Q}=r.getAriaLabelProps(S,g,i,b);return{showErrors:h,isInvalid:o,disabled:d,readOnly:c,required:k,normalizedRange:v,normalizedStep:T,normalizedMin:F,normalizedMax:B,containerRef:M,trackRef:u,internalInputRef:O,ids:{validationErrors:z,error:U,fallbackLabel:b,helperText:D,input:w},isRTL:H,bem:e,classNames:{container:j,track:G,fill:V,contentContainer:J},aria:{label:K,labelledBy:Q},hasError:_,label:i,valueAxis:a,showValueAxisLabels:n,name:l,error:t}}exports.useSliderBase=ee;

package/lib/Slider/hooks/useSliderBase.d.ts

@@ -0,0 +1,65 @@
+import { FormValidator } from '@viasat/beam-shared/components/form';
+export interface UseSliderBaseProps {
+    name?: string;
+    validationRules?: FormValidator[];
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    className?: string;
+    range?: [number, number];
+    step?: number;
+    min?: number | null;
+    max?: number | null;
+    label?: string | React.ReactNode;
+    valueAxis?: Record<number, string>;
+    showValueAxisLabels?: boolean;
+    error?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+}
+export interface UseSliderBaseReturn {
+    showErrors: (id: string) => React.ReactNode;
+    isInvalid: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
+    normalizedRange: [number, number];
+    normalizedStep: number;
+    normalizedMin: number;
+    normalizedMax: number;
+    containerRef: (element: HTMLDivElement) => void;
+    trackRef: React.RefObject<HTMLDivElement>;
+    internalInputRef: React.RefObject<HTMLInputElement>;
+    ids: {
+        validationErrors: string;
+        error: string;
+        fallbackLabel: string;
+        helperText: string;
+        input: string;
+    };
+    isRTL: boolean;
+    bem: {
+        baseClassNamePrefix: string;
+        subElementClassPrefix: string;
+        classModifierPrefix: string;
+        variablePrefix: string;
+        variable: (name: string) => keyof CSSStyleDeclaration;
+    };
+    classNames: {
+        container: string;
+        track: string;
+        fill: string;
+        contentContainer: string;
+    };
+    aria: {
+        label: string | undefined;
+        labelledBy: string | undefined;
+    };
+    hasError: boolean;
+    label: string | React.ReactNode;
+    valueAxis: Record<number, string> | undefined;
+    showValueAxisLabels: boolean;
+    name: string | undefined;
+    error: string | undefined;
+}
+export declare function useSliderBase(props: UseSliderBaseProps, ref: React.ForwardedRef<HTMLDivElement>): UseSliderBaseReturn;