@viasat/beam-react 2.0.0

package/lib/SideNav/SideNavContext.es.js

@@ -0,0 +1,73 @@
+import { jsx as w } from "react/jsx-runtime";
+import { createContext as C, useState as s, useContext as E, useRef as g, useMemo as S, useEffect as L } from "react";
+import { F as M } from "../../chunks/constants.BBi77pmH.js";
+import { d as P } from "../../chunks/helpers.Wv7n4ip7.js";
+import { useRTLDirection as x } from "../../utils/hooks/index.es.js";
+const y = "mobile", R = "provided", I = C(void 0), V = ({
+  children: l,
+  sideNavConfig: { withMobile: a, defaultOpen: r } = {}
+}) => {
+  const i = a ?? !0, t = r ?? !1, [e, o] = s(!1), [c, n] = s(t), [f, O] = s(!1), [m, T] = s(null), h = g(null), N = x(h);
+  L(() => {
+    if (typeof window > "u") return;
+    if (!i) {
+      e && o(!1);
+      return;
+    }
+    const u = (d) => {
+      !e && d && n(!1), e && !d && n(t), o(d);
+    }, v = P((d) => {
+      u(d.matches);
+    }, M), p = window.matchMedia("screen and (max-width: 1199px)");
+    return p.addEventListener("change", v), v(p), () => p.removeEventListener("change", v);
+  }, [t, e, o, i]);
+  const b = S(
+    () => ({
+      withMobile: i,
+      isMobile: e,
+      isSideNavOpen: c,
+      setIsSideNavOpen: n,
+      toggleSideNav: () => {
+        f || O(!0), requestAnimationFrame(() => n((u) => !u));
+      },
+      navigation: m,
+      setNavigation: T,
+      triggerType: e ? y : R,
+      interactedWith: f,
+      isRTL: N,
+      rootRef: h
+    }),
+    [c, m, e, i, f, N]
+  );
+  return /* @__PURE__ */ w(I.Provider, { value: b, children: l });
+}, q = () => {
+  const [l, a] = s(!1), [r, i] = s(!1);
+  let t = E(I);
+  const e = g(null), o = x(e), c = S(
+    () => ({
+      withMobile: !1,
+      isMobile: !1,
+      isSideNavOpen: l,
+      setIsSideNavOpen: a,
+      toggleSideNav: () => {
+        r || i(!0), requestAnimationFrame(() => a((n) => !n));
+      },
+      navigation: null,
+      setNavigation: () => null,
+      triggerType: R,
+      interactedWith: r,
+      isRTL: o,
+      rootRef: e
+    }),
+    [l, a, r, o]
+  );
+  return t || (console.log(
+    `If useSideNavContext is called outside of SideNavProvider the components that use it will have only UI functionalities. 
+      The SideNavContext provides support for displaying the navigation on mobile devices in the SideNav,
+       and the ability to control the open/closed state from outside of the SideNav component.`
+  ), t = c), t;
+};
+export {
+  V as SideNavProvider,
+  q as useSideNavContext
+};

package/lib/SideNav/SideNavExpandableContext.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),t=require("react"),i=0,o=t.createContext(void 0),c=1.75,u=e=>e===0?!1:e===1?1.25:1.25+(e-1)*c,x=({children:e,initialLevel:r=1})=>{const a=t.useContext(o),n=a?a.level+1:r,s=t.useMemo(()=>({level:n,indent:u(n)}),[n]);return d.jsx(o.Provider,{value:s,children:e})},l=()=>t.useContext(o)??{level:i,indent:!1};exports.SideNavExpandableContextProvider=x;exports.useSideNavExpandableContext=l;

package/lib/SideNav/SideNavExpandableContext.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface SideNavExpandableContextValue {
+    level: number;
+    indent: number | boolean;
+}
+export declare const SideNavExpandableContextProvider: React.FC<{
+    children: React.ReactNode;
+    initialLevel?: number;
+}>;
+export declare const useSideNavExpandableContext: () => SideNavExpandableContextValue;

package/lib/SideNav/SideNavExpandableContext.es.js

@@ -0,0 +1,13 @@
+import { jsx as c } from "react/jsx-runtime";
+import { createContext as d, useContext as r, useMemo as i } from "react";
+const x = 0, n = d(void 0), l = 1.75, u = (t) => t === 0 ? !1 : t === 1 ? 1.25 : 1.25 + (t - 1) * l, f = ({ children: t, initialLevel: a = 1 }) => {
+  const o = r(n), e = o ? o.level + 1 : a, s = i(
+    () => ({ level: e, indent: u(e) }),
+    [e]
+  );
+  return /* @__PURE__ */ c(n.Provider, { value: s, children: t });
+}, m = () => r(n) ?? { level: x, indent: !1 };
+export {
+  f as SideNavExpandableContextProvider,
+  m as useSideNavExpandableContext
+};

package/lib/SideNav/SideNavFooter.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("clsx"),i=require("../../chunks/sideNav.module.B3wMOMTH.js"),c=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const{baseClassNamePrefix:l}=c.getBEMClassNames("side-nav__footer"),n=({children:s,className:r,...o})=>{const t=a(i.styles[`${l}`],r);return e.jsx("div",{className:t,role:"group",...o,children:e.jsx("div",{children:s})})};exports.SideNavFooter=n;

package/lib/SideNav/SideNavFooter.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from 'react';
+export interface SideNavFooterProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * The content of the SideNav.Footer
+     * @default null
+     */
+    children: React.ReactNode;
+}
+export declare const SideNavFooter: ({ children, className: _className, ...restProps }: SideNavFooterProps) => import("react/jsx-runtime").JSX.Element;

package/lib/SideNav/SideNavFooter.es.js

@@ -0,0 +1,16 @@
+import { jsx as s } from "react/jsx-runtime";
+import a from "clsx";
+import { s as m } from "../../chunks/sideNav.module.DBN2ryFs.js";
+import { g as i } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+const { baseClassNamePrefix: l } = i("side-nav__footer"), N = ({
+  children: o,
+  className: r,
+  ...e
+}) => {
+  const t = a(m[`${l}`], r);
+  return /* @__PURE__ */ s("div", { className: t, role: "group", ...e, children: /* @__PURE__ */ s("div", { children: o }) });
+};
+export {
+  N as SideNavFooter
+};

package/lib/SideNav/SideNavHeader.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("clsx"),c=require("../../chunks/sideNav.module.B3wMOMTH.js"),n=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const{baseClassNamePrefix:o}=n.getBEMClassNames("side-nav__header"),d=({children:e,className:s,...a})=>{const r=i(c.styles[`${o}`],s);return t.jsx("div",{className:r,...a,children:e})};exports.SideNavHeader=d;

package/lib/SideNav/SideNavHeader.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from 'react';
+export interface SideNavHeaderProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * The content of the SideNav.Header
+     * @default null
+     */
+    children: React.ReactNode;
+}
+export declare const SideNavHeader: ({ children, className: _className, ...restProps }: SideNavHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/lib/SideNav/SideNavHeader.es.js

@@ -0,0 +1,16 @@
+import { jsx as m } from "react/jsx-runtime";
+import o from "clsx";
+import { s as t } from "../../chunks/sideNav.module.DBN2ryFs.js";
+import { g as i } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+const { baseClassNamePrefix: c } = i("side-nav__header"), N = ({
+  children: s,
+  className: e,
+  ...a
+}) => {
+  const r = o(t[`${c}`], e);
+  return /* @__PURE__ */ m("div", { className: r, ...a, children: s });
+};
+export {
+  N as SideNavHeader
+};

package/lib/SideNav/SideNavLayoutContext.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("react"),o=e.createContext(void 0),i=({children:t,value:r})=>n.jsx(o.Provider,{value:r,children:t}),u=()=>{const t=e.useContext(o);if(!t)throw new Error("useSideNavLayoutContext must be used within a SideNavLayoutContextProvider");return t};exports.SideNavLayoutContextProvider=i;exports.useSideNavLayoutContext=u;

package/lib/SideNav/SideNavLayoutContext.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { OpenLayout, ClosedLayout } from './SideNav';
+export interface SideNavLayoutContextType {
+    currentLayout: OpenLayout | 'hidden';
+    openLayout?: OpenLayout;
+    closedLayout?: ClosedLayout;
+}
+export declare const SideNavLayoutContextProvider: ({ children, value, }: {
+    children: ReactNode;
+    value: SideNavLayoutContextType;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useSideNavLayoutContext: () => SideNavLayoutContextType;

package/lib/SideNav/SideNavLayoutContext.es.js

@@ -0,0 +1,19 @@
+import { jsx as r } from "react/jsx-runtime";
+import { createContext as n, useContext as i } from "react";
+const o = n(
+  void 0
+), d = ({
+  children: t,
+  value: e
+}) => /* @__PURE__ */ r(o.Provider, { value: e, children: t }), s = () => {
+  const t = i(o);
+  if (!t)
+    throw new Error(
+      "useSideNavLayoutContext must be used within a SideNavLayoutContextProvider"
+    );
+  return t;
+};
+export {
+  d as SideNavLayoutContextProvider,
+  s as useSideNavLayoutContext
+};

package/lib/SideNav/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SideNav.cjs.js"),A=require("./SideNavContext.cjs.js");exports.DRAWER_LAYOUT=e.DRAWER_LAYOUT;exports.HIDDEN_LAYOUT=e.HIDDEN_LAYOUT;exports.LOCAL_STORAGE_SIDE_NAV_WIDTH_VAR_NAME=e.LOCAL_STORAGE_SIDE_NAV_WIDTH_VAR_NAME;exports.NO_LAYOUT=e.NO_LAYOUT;exports.OPAQUE_BACKDROP=e.OPAQUE_BACKDROP;exports.RAIL_LAYOUT=e.RAIL_LAYOUT;exports.Root=e.Root;exports.SideNav=e.SideNav;exports.SideNavBackdrops=e.SideNavBackdrops;exports.SideNavClosedLayouts=e.SideNavClosedLayouts;exports.SideNavOpenLayouts=e.SideNavOpenLayouts;exports.TRANSPARENT_BACKDROP=e.TRANSPARENT_BACKDROP;exports.SideNavProvider=A.SideNavProvider;exports.useSideNavContext=A.useSideNavContext;

package/lib/SideNav/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SideNav';
+export * from './SideNavContext';

package/lib/SideNav/index.es.js

@@ -0,0 +1,18 @@
+import { DRAWER_LAYOUT as o, HIDDEN_LAYOUT as N, LOCAL_STORAGE_SIDE_NAV_WIDTH_VAR_NAME as _, NO_LAYOUT as O, OPAQUE_BACKDROP as R, RAIL_LAYOUT as a, Root as d, SideNav as L, SideNavBackdrops as S, SideNavClosedLayouts as T, SideNavOpenLayouts as i, TRANSPARENT_BACKDROP as r } from "./SideNav.es.js";
+import { SideNavProvider as v, useSideNavContext as D } from "./SideNavContext.es.js";
+export {
+  o as DRAWER_LAYOUT,
+  N as HIDDEN_LAYOUT,
+  _ as LOCAL_STORAGE_SIDE_NAV_WIDTH_VAR_NAME,
+  O as NO_LAYOUT,
+  R as OPAQUE_BACKDROP,
+  a as RAIL_LAYOUT,
+  d as Root,
+  L as SideNav,
+  S as SideNavBackdrops,
+  T as SideNavClosedLayouts,
+  i as SideNavOpenLayouts,
+  v as SideNavProvider,
+  r as TRANSPARENT_BACKDROP,
+  D as useSideNavContext
+};

package/lib/Slider/DualSlider.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),m=require("react"),P=require("../../chunks/slider.module.Ds7jMW6I.js"),K=require("../Label/Label.cjs.js"),Q=require("./Slider.TickMarks.cjs.js"),W=require("./Slider.ValueAxisLabels.cjs.js"),Y=require("./Slider.Error.cjs.js"),A=require("./Slider.TextField.cjs.js"),I=require("./Slider.Thumb.cjs.js"),Z=require("./hooks/useDualSliderLogic.cjs.js");require("../../chunks/constants.hwjHOsvT.js");require("../../chunks/form.context.B1PXIJNq.js");const b=require("../Form/contexts/label.context.cjs.js"),ee=require("../Form/contexts/helperText.context.cjs.js");require("../../chunks/CSSLookup.DESAWWRT.js");require("../../utils/hooks/useId.cjs.js");const le=require("./utils/slider.validation.utils.cjs.js"),S=require("./utils/slider.rendering.utils.cjs.js"),R=require("./slider.constants.cjs.js"),$=require("./hooks/useSliderEvents.cjs.js"),C=m.forwardRef(function({base:e,value:N,defaultValue:F,marksSource:w="none",restrictToValueAxis:x=!1,showTextField:L=!1,textFieldWidth:y=R.DEFAULT_TEXT_FIELD_WIDTH,persistentTooltip:T=!1,disabledTooltip:z=!1,helperText:B,contentBefore:q,contentAfter:p,minGap:g,onChange:H,...X}){const _=le.validateDualSliderDefaultValue(F,e.normalizedMin,e.normalizedMax),[t,u]=m.useState(!1),{value:r,setValue:a,markValues:j,step:n,getValidValue:s}=Z.useDualSliderLogic({value:N,defaultValue:_,range:e.normalizedRange,min:e.normalizedMin,max:e.normalizedMax,step:e.normalizedStep,valueAxis:e.valueAxis,restrictToValueAxis:x,onChange:H,minGap:g});$.useSliderFormReset(e.internalInputRef,_??[e.normalizedMin??e.normalizedRange[0],e.normalizedMax??e.normalizedRange[1]],a,[_,e.normalizedMin,e.normalizedMax,e.normalizedRange,a]);const U=m.useCallback(l=>{if(e.disabled||e.readOnly)return;const[o,c]=r,f=Math.abs(l-o),h=Math.abs(l-c);f<h?a([l,c]):a([o,l])},[e.disabled,e.readOnly,a,r]),D=m.useCallback((l,o)=>{if(e.disabled||e.readOnly||!e.trackRef.current)return;const c=e.trackRef.current.getBoundingClientRect(),[f,h]=e.normalizedRange,d=S.clientXToValue(l,c,f,h,e.isRTL),[v,M]=r;if(o==="left")a([d,M]);else if(o==="right")a([v,d]);else{const G=Math.abs(d-v),J=Math.abs(d-M);G<J?(a([d,M]),u("left")):(a([v,d]),u("right"))}},[e.disabled,e.readOnly,e.normalizedRange,e.isRTL,a,r]);$.useSliderPointerEvents(t,D,()=>u(!1),()=>[t==="left"?"left":t==="right"?"right":void 0]);const[V,k]=e.normalizedRange,E=S.calculatePercentage(r[0],V,k),O=S.calculatePercentage(r[1],V,k);return i.jsxs("div",{ref:e.containerRef,className:e.classNames.container,...X,children:[i.jsx(b.LabelProvider,{ctxHtmlFor:e.ids.input,ctxRequired:e.required,ctxDisabled:e.disabled,ctxId:e.aria.labelledBy,children:e.label&&typeof e.label=="string"?i.jsx(K.Label,{children:e.label}):e.label}),i.jsxs("div",{className:e.classNames.contentContainer,role:"group",children:[q&&i.jsx("div",{className:P.styles[`${e.bem.subElementClassPrefix}content-before`],children:q}),L&&i.jsx(A.SliderTextField,{value:r[0],readOnly:e.readOnly,disabled:e.disabled,error:e.hasError,getValidValue:s,setValue:l=>{e.isRTL?a([r[0],l]):a([l,r[1]])},textFieldWidth:y,min:e.normalizedMin,max:e.normalizedMax,step:n,errorId:e.ids.error,ariaLabelledby:e.aria.labelledBy,ariaLabel:e.isRTL?e.aria.label?`${e.aria.label} (maximum)`:"Maximum value":e.aria.label?`${e.aria.label} (minimum)`:"Minimum value"}),i.jsxs("div",{style:{width:"100%"},children:[i.jsxs("div",{ref:e.trackRef,className:e.classNames.track,onPointerDown:l=>{e.disabled||e.readOnly||D(l.clientX)},children:[i.jsx("div",{className:e.classNames.fill,style:{[e.bem.variable("min-percentage")]:R.toCqw(E),[e.bem.variable("max-percentage")]:R.toCqw(O)}}),i.jsx(Q.SliderTickMarks,{valueAxis:e.valueAxis,markValues:j,range:e.normalizedRange,step:n,marksSource:w}),i.jsx(I.SliderThumb,{isRTL:e.isRTL,error:e.hasError,isDragging:t==="left",setIsDragging:l=>u(l?"left":!1),currentPercentage:E,disabled:e.disabled,readOnly:e.readOnly,value:r[0],range:e.normalizedRange,min:e.normalizedMin,max:e.normalizedMax,step:n,persistentTooltip:T,disabledTooltip:z,getValidValue:s,setValue:l=>a([l,r[1]]),ariaLabelledby:e.aria.labelledBy,ariaLabel:e.aria.label?`${e.aria.label} (minimum)`:"Minimum value",valueAxis:e.valueAxis,restrictToValueAxis:x,thumbSide:"left",otherThumbValue:r[1],minGap:g??n}),i.jsx(I.SliderThumb,{isRTL:e.isRTL,error:e.hasError,isDragging:t==="right",setIsDragging:l=>u(l?"right":!1),currentPercentage:O,disabled:e.disabled,readOnly:e.readOnly,value:r[1],range:e.normalizedRange,min:e.normalizedMin,max:e.normalizedMax,step:n,persistentTooltip:T,disabledTooltip:z,getValidValue:s,setValue:l=>a([r[0],l]),ariaLabelledby:e.aria.labelledBy,ariaLabel:e.aria.label?`${e.aria.label} (maximum)`:"Maximum value",valueAxis:e.valueAxis,restrictToValueAxis:x,thumbSide:"right",otherThumbValue:r[0],minGap:g??n})]}),i.jsx(W.SliderValueAxisLabels,{valueAxis:e.valueAxis,markValues:j,range:e.normalizedRange,showValueAxisLabels:e.showValueAxisLabels,onMarkClick:U,isRTL:e.isRTL})]}),L&&i.jsx(A.SliderTextField,{value:r[1],readOnly:e.readOnly,disabled:e.disabled,error:e.hasError,getValidValue:s,setValue:l=>{e.isRTL?a([l,r[1]]):a([r[0],l])},textFieldWidth:y,min:e.normalizedMin,max:e.normalizedMax,step:n,errorId:e.ids.error,ariaLabelledby:e.aria.labelledBy,ariaLabel:e.isRTL?e.aria.label?`${e.aria.label} (minimum)`:"Minimum value":e.aria.label?`${e.aria.label} (maximum)`:"Maximum value"}),p&&i.jsx("div",{className:P.styles[`${e.bem.subElementClassPrefix}content-after`],children:p})]}),e.name&&i.jsxs(i.Fragment,{children:[i.jsx("input",{type:"hidden",ref:e.internalInputRef,id:`${e.ids.input}-min`,name:`${e.name}-min`,value:r[0],disabled:e.disabled}),i.jsx("input",{type:"hidden",id:`${e.ids.input}-max`,name:`${e.name}-max`,value:r[1],disabled:e.disabled})]}),i.jsxs(ee.HelperTextProvider,{ctxId:e.ids.helperText,ctxDisabled:e.disabled,children:[B,i.jsx(Y.SliderError,{error:e.error,errorId:e.ids.error})]}),e.showErrors(e.ids.validationErrors)]})});exports.DualSlider=C;exports.default=C;

package/lib/Slider/DualSlider.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { UseSliderBaseReturn } from './hooks';
+import { DualSliderProps } from './Slider.types';
+interface DualSliderInternalProps extends Omit<DualSliderProps, 'name' | 'validationRules' | 'disabled' | 'readOnly' | 'required' | 'className' | 'range' | 'step' | 'min' | 'max' | 'label' | 'valueAxis' | 'showValueAxisLabels' | 'error' | 'aria-label' | 'aria-labelledby'> {
+    base: UseSliderBaseReturn;
+}
+export declare const DualSlider: React.ForwardRefExoticComponent<Omit<DualSliderInternalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default DualSlider;

package/lib/Slider/DualSlider.es.js

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

package/lib/Slider/SingleSlider.cjs.js

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

package/lib/Slider/SingleSlider.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { UseSliderBaseReturn } from './hooks';
+import { SingleSliderProps } from './Slider.types';
+interface SingleSliderInternalProps extends Omit<SingleSliderProps, 'name' | 'validationRules' | 'disabled' | 'readOnly' | 'required' | 'className' | 'range' | 'step' | 'min' | 'max' | 'label' | 'valueAxis' | 'showValueAxisLabels' | 'error' | 'aria-label' | 'aria-labelledby'> {
+    base: UseSliderBaseReturn;
+}
+export declare const SingleSlider: React.ForwardRefExoticComponent<Omit<SingleSliderInternalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SingleSlider;