@kubit-ui-web/react-components 2.0.0-beta.47 → 2.0.0-beta.49

package/dist/esm/components/selectorBoxFile/selectorBoxFileStandAlone.js

@@ -1,4 +1,47 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as o,useId as s}from"react";import{STATES as n}from"../../lib/types/states/states.js";import{SelectorBoxFileAnimation as a}from"./components/selectorBoxFileAnimation.js";import{SelectorBoxFileContainerBox as i}from"./components/selectorBoxFileContainerBox.js";const l=o(({accept:o,containerBoxStateContent:l,cssClasses:c,filename:r,focus:m,id:d,multiple:p,name:f,onAnimationCompleted:u,onBlur:C,onChange:x,onClick:h,onFocus:B,percentage:b,state:g,...F},j)=>{const A=`selectorboxfile-${s().replace(/:/g,"")}`,k=d??A,v=F["data-testid"]??"selector-box-file";/* @__PURE__ */
-return e("div",{ref:j,children:[
-/* @__PURE__ */t("div",{className:c?.selector_box_file,"data-testid":v,children:/* @__PURE__ */t("div",{className:c?.header,children:/* @__PURE__ */t(a,{cssClasses:c,"data-testid":v,focus:m,percentage:b,state:g,onAnimationCompleted:u,children:/* @__PURE__ */t(i,{containerBoxStateContent:l,cssClasses:c,filename:r,focus:!1,htmlFor:k,state:g})})})}),
-/* @__PURE__ */t("input",{accept:o,className:"kbt-sr-only",disabled:g===n.DISABLED,id:k,multiple:p,name:f,type:"file",onBlur:C,onChange:x,onClick:h,onFocus:B})]})});export{l as SelectorBoxFileStandAlone};
+import { STATES } from "../../lib/types/states/states.js";
+import { SelectorBoxFileAnimation } from "./components/selectorBoxFileAnimation.js";
+import { SelectorBoxFileContainerBox } from "./components/selectorBoxFileContainerBox.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const SelectorBoxFileStandAlone = forwardRef(({ accept: e, containerBoxStateContent: t, cssClasses: n, filename: r, focus: i, id: a, multiple: o, name: s, onAnimationCompleted: c, onBlur: l, onChange: u, onClick: d, onFocus: f, percentage: p, state: m, ...h }, g) => {
+	let _ = `selectorboxfile-${useId().replace(/:/g, "")}`, v = a ?? _, y = h["data-testid"] ?? "selector-box-file";
+	return /* @__PURE__ */ jsxs("div", {
+		ref: g,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: n?.selector_box_file,
+			"data-testid": y,
+			children: /* @__PURE__ */ jsx("div", {
+				className: n?.header,
+				children: /* @__PURE__ */ jsx(SelectorBoxFileAnimation, {
+					cssClasses: n,
+					"data-testid": y,
+					focus: i,
+					percentage: p,
+					state: m,
+					onAnimationCompleted: c,
+					children: /* @__PURE__ */ jsx(SelectorBoxFileContainerBox, {
+						containerBoxStateContent: t,
+						cssClasses: n,
+						filename: r,
+						focus: !1,
+						htmlFor: v,
+						state: m
+					})
+				})
+			})
+		}), /* @__PURE__ */ jsx("input", {
+			accept: e,
+			className: "kbt-sr-only",
+			disabled: m === STATES.DISABLED,
+			id: v,
+			multiple: o,
+			name: s,
+			type: "file",
+			onBlur: l,
+			onChange: u,
+			onClick: d,
+			onFocus: f
+		})]
+	});
+});
+export { SelectorBoxFileStandAlone };

package/dist/esm/components/selectorBoxFile/utils/animation/animation.js

@@ -1 +1,10 @@
-import{translateValue as t}from"../translateValue/translateValue.js";const a=(a,u,n)=>a>n?100:t({inputMax:n,inputMin:u,outputMax:100,outputMin:0,value:a}),u=t=>a(t,0,25),n=t=>a(t,25,50),e=t=>a(t,50,75),o=t=>a(t,75,100);export{e as getBottomBarWith,o as getLeftBarHeight,n as getRightBarHeight,u as getTopBarWith};
+import { translateValue } from "../translateValue/translateValue.js";
+var FIRST_QUARTER = 25, SECOND_QUARTER = 50, THIRD_QUARTER = 75, MAX = 100, getBarMeasure = (t, n, r) => t > r ? MAX : translateValue({
+	inputMax: r,
+	inputMin: n,
+	outputMax: MAX,
+	outputMin: 0,
+	value: t
+});
+const getTopBarWith = (e) => getBarMeasure(e, 0, FIRST_QUARTER), getRightBarHeight = (e) => getBarMeasure(e, FIRST_QUARTER, SECOND_QUARTER), getBottomBarWith = (e) => getBarMeasure(e, SECOND_QUARTER, THIRD_QUARTER), getLeftBarHeight = (e) => getBarMeasure(e, THIRD_QUARTER, MAX);
+export { getBottomBarWith, getLeftBarHeight, getRightBarHeight, getTopBarWith };

package/dist/esm/components/selectorBoxFile/utils/state/state.js

@@ -1 +1,3 @@
-import{STATES as t}from"../../../../lib/types/states/states.js";const s=(s,e,o,D)=>D?t.DISABLED:o?t.ERROR:e?t.SUCCESS:s?t.LOADING:t.DEFAULT;export{s as getState};
+import { STATES } from "../../../../lib/types/states/states.js";
+const getState = (e, t, n, r) => r ? STATES.DISABLED : n ? STATES.ERROR : t ? STATES.SUCCESS : e ? STATES.LOADING : STATES.DEFAULT;
+export { getState };

package/dist/esm/components/selectorBoxFile/utils/translateValue/translateValue.js

@@ -1 +1,6 @@
-const t=({inputMax:t,inputMin:n,outputMax:u,outputMin:a,value:i})=>{if(n===t)return a;const M=a+(i-n)/(t-n)*(u-a);return Math.min(u,Math.max(a,M))};export{t as translateValue};
+const translateValue = ({ inputMax: e, inputMin: t, outputMax: n, outputMin: r, value: i }) => {
+	if (t === e) return r;
+	let a = e - t, o = n - r, s = r + (i - t) / a * o;
+	return Math.min(n, Math.max(r, s));
+};
+export { translateValue };

package/dist/esm/components/skeleton/skeleton2.js

@@ -0,0 +1,21 @@
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { SkeletonStandAlone } from "./skeletonStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Skeleton = forwardRef(({ additionalClasses: e, additionalShapeClasses: t, shapeVariant: n, variant: r, ...i }, a) => {
+	let o = useClassName({
+		component: "SKELETON",
+		variant: r
+	}), s = useClassName({
+		component: "SKELETON",
+		variant: n
+	});
+	return /* @__PURE__ */ jsx(SkeletonStandAlone, {
+		...i,
+		ref: a,
+		cssClasses: o,
+		cssShapeClasses: s,
+		shapeVariant: r
+	});
+});
+export { Skeleton };

package/dist/esm/components/skeleton/skeletonStandAlone.js

@@ -1,2 +1,20 @@
-import{jsx as s}from"react/jsx-runtime";/* empty css            */import{forwardRef as t}from"react";import{classNames as e}from"../../lib/utils/classNames/classNames.js";import{pickCustomAttributes as o}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";const i=t(({cssClasses:t,cssShapeClasses:i,duration:r="1.2s",height:l,width:a,...m},n)=>{const c=o(m);/* @__PURE__ */
-return s("div",{ref:n,className:e("kbt-skeleton",t?.skeleton,i?.skeleton),"data-testid":"skeleton",style:{"--skeleton-duration":r,"--skeleton-height":l,"--skeleton-width":a},...c})});export{i as SkeletonStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { classNames } from "../../lib/utils/classNames/classNames.js";
+/* empty css         */
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const SkeletonStandAlone = forwardRef(({ cssClasses: e, cssShapeClasses: t, duration: n = "1.2s", height: r, width: i, ...a }, o) => {
+	let s = pickCustomAttributes(a);
+	return /* @__PURE__ */ jsx("div", {
+		ref: o,
+		className: classNames("kbt-skeleton", e?.skeleton, t?.skeleton),
+		"data-testid": "skeleton",
+		style: {
+			"--skeleton-duration": n,
+			"--skeleton-height": r,
+			"--skeleton-width": i
+		},
+		...s
+	});
+});
+export { SkeletonStandAlone };

package/dist/esm/components/slider/components/sliderButtonStandAlone.js

@@ -1 +1,12 @@
-import{jsx as t}from"react/jsx-runtime";import{Button as e}from"../../button/button.js";const n=({content:n,cssClasses:s,customAttributes:o,...r})=>{const i=s?.decrement_button_variant,a=s?.decrement_button_size;return i&&a?/* @__PURE__ */t(e,{...r,additionalSizeClasses:a,additionalVariantClasses:i,children:n}):null};export{n as SliderButtonStandAlone};
+import { Button } from "../../button/button.js";
+import { jsx } from "react/jsx-runtime";
+const SliderButtonStandAlone = ({ content: e, cssClasses: t, customAttributes: n, ...r }) => {
+	let i = t?.decrement_button_variant, a = t?.decrement_button_size;
+	return !i || !a ? null : /* @__PURE__ */ jsx(Button, {
+		...r,
+		additionalSizeClasses: a,
+		additionalVariantClasses: i,
+		children: e
+	});
+};
+export { SliderButtonStandAlone };

package/dist/esm/components/slider/components/sliderHelperTextStandAlone.js

@@ -1 +1,25 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Text as r}from"../../text/text.js";const s=({cssClasses:s,customAttributes:l,leftHelperText:i,leftHelperTextId:n,rightHelperText:a,rightHelperTextId:c})=>i||a?/* @__PURE__ */e("div",{className:s?.helpertextcontainer,children:[!!i&&/* @__PURE__ */t("div",{className:s?.helpertextleftcontainer,children:/* @__PURE__ */t(r,{additionalClasses:{text:s?.helpertext},component:"span",customAttributes:l,id:n,children:i})}),!!a&&/* @__PURE__ */t("div",{className:s?.helpertextrightcontainer,children:/* @__PURE__ */t(r,{additionalClasses:{text:s?.helpertext},component:"span",customAttributes:l,id:c,children:a})})]}):null;export{s as SliderHelperTextStandAlone};
+import { Text } from "../../text/text2.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const SliderHelperTextStandAlone = ({ cssClasses: e, customAttributes: t, leftHelperText: n, leftHelperTextId: r, rightHelperText: i, rightHelperTextId: a }) => !n && !i ? null : /* @__PURE__ */ jsxs("div", {
+	className: e?.helpertextcontainer,
+	children: [!!n && /* @__PURE__ */ jsx("div", {
+		className: e?.helpertextleftcontainer,
+		children: /* @__PURE__ */ jsx(Text, {
+			additionalClasses: { text: e?.helpertext },
+			component: "span",
+			customAttributes: t,
+			id: r,
+			children: n
+		})
+	}), !!i && /* @__PURE__ */ jsx("div", {
+		className: e?.helpertextrightcontainer,
+		children: /* @__PURE__ */ jsx(Text, {
+			additionalClasses: { text: e?.helpertext },
+			component: "span",
+			customAttributes: t,
+			id: a,
+			children: i
+		})
+	})]
+});
+export { SliderHelperTextStandAlone };

package/dist/esm/components/slider/components/sliderScaleStandAlone.js

@@ -1,2 +1,21 @@
-import{jsx as t}from"react/jsx-runtime";import{useId as s,useState as r,useRef as e,useEffect as c}from"react";import{pickCustomAttributes as i}from"../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";const o=({cssClasses:o,customAttributes:l,scaleOffsets:a,showScale:n})=>{const u=`tickmarks-${s().replace(/:/g,"")}`,[m,p]=r("0px"),f=e(null);return c(()=>{f.current&&p(`${f.current.offsetWidth}px`)},[f.current]),n&&n?/* @__PURE__ */t("div",{className:o?.scalecontainer,id:u,...i(l),children:a.map((s,r)=>{const e={left:`calc(${s}% - ${m} / 2)`};/* @__PURE__ */
-return t("span",{className:o?.scaleoption,style:e},`${u}-${r.toString()}`)})}):null};export{o as SliderScaleStandAlone};
+import { pickCustomAttributes } from "../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+const SliderScaleStandAlone = ({ cssClasses: r, customAttributes: i, scaleOffsets: a, showScale: o }) => {
+	let s = `tickmarks-${useId().replace(/:/g, "")}`, [c, l] = useState("0px"), u = useRef(null);
+	return useEffect(() => {
+		u.current && l(`${u.current.offsetWidth}px`);
+	}, [u.current]), !o || !o ? null : /* @__PURE__ */ jsx("div", {
+		className: r?.scalecontainer,
+		id: s,
+		...pickCustomAttributes(i),
+		children: a.map((e, t) => {
+			let n = { left: `calc(${e}% - ${c} / 2)` };
+			return /* @__PURE__ */ jsx("span", {
+				className: r?.scaleoption,
+				style: n
+			}, `${s}-${t.toString()}`);
+		})
+	});
+};
+export { SliderScaleStandAlone };

package/dist/esm/components/slider/components/sliderThumbStandAlone.js

@@ -1 +1,82 @@
-import{jsx as e}from"react/jsx-runtime";import{TooltipUnControlled as a}from"../../tooltip/tooltipUnControlled.js";import{ElementOrIcon as o}from"../../../lib/components/elementOrIcon/elementOrIcon.js";import{useMediaDevice as t}from"../../../lib/hooks/useMediaDevice/useMediaDevice.js";import{pickCustomAttributes as i}from"../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{isTooltipVisible as r}from"../utils/ui.utils.js";const s=({ariaDescribedBy:s,ariaLabel:l,ariaLabelBy:n,cssClasses:d,customAttributes:u,disabled:c,hover:m,icon:b,max:p,min:h,onFocus:v,onKeyDown:y,onMouseOut:M,onMouseOver:O,onTouchStart:x,pressed:f,rightThumb:j,style:A,tooltip:D,tooltipAlign:g="top",value:w,...B})=>{const C=t(),N=i({...B,...u}),I=i(u);return r(D,f,C)&&d?.tooltip?/* @__PURE__ */e("div",{"data-disabled":c,"data-hover":m,"data-pressed":f,role:"presentation",style:A,...N,className:d?.thumb,children:/* @__PURE__ */e(a,{additionalClasses:d?.tooltip,align:g,childrenAsButton:!1,content:{content:D?.content},tooltipAsModal:!1,children:/* @__PURE__ */e("div",{"aria-describedby":s,"aria-disabled":c,"aria-label":l,"aria-labelledby":n,"aria-valuemax":p,"aria-valuemin":h,"aria-valuenow":w,className:d.innerthumbtooltip,"data-disabled":c,"data-hover":m,"data-pressed":f,role:"slider",tabIndex:0,onBlur:M,onFocus:v,onKeyDown:y,onMouseOut:M,onMouseOver:O,onTouchStart:x,...I,children:/* @__PURE__ */e(o,{className:j?d?.rightthumbicon:d?.thumbicon,...b})})})}):/* @__PURE__ */e("div",{"aria-describedby":s,"aria-disabled":c,"aria-label":l,"aria-labelledby":n,"aria-valuemax":p,"aria-valuemin":h,"aria-valuenow":w,className:d?.thumb,"data-disabled":c,"data-hover":m,"data-position":j?"right":void 0,"data-pressed":f,role:"slider",style:A,tabIndex:0,onBlur:M,onFocus:v,onKeyDown:y,onMouseOut:M,onMouseOver:O,onTouchStart:x,...N,children:/* @__PURE__ */e(o,{className:d?.thumbicon,...b})})};export{s as SliderThumbStandAlone};
+import { pickCustomAttributes } from "../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { ElementOrIcon } from "../../../lib/components/elementOrIcon/elementOrIcon.js";
+import { useMediaDevice } from "../../../lib/hooks/useMediaDevice/useMediaDevice.js";
+import { TooltipUnControlled } from "../../tooltip/tooltipUnControlled.js";
+import { isTooltipVisible } from "../utils/ui.utils.js";
+import { jsx } from "react/jsx-runtime";
+const SliderThumbStandAlone = ({ ariaDescribedBy: e, ariaLabel: t, ariaLabelBy: n, cssClasses: r, customAttributes: i, disabled: a, hover: o, icon: s, max: c, min: l, onFocus: u, onKeyDown: d, onMouseOut: f, onMouseOver: p, onTouchStart: m, pressed: h, rightThumb: g, style: _, tooltip: v, tooltipAlign: y = "top", value: b, ...x }) => {
+	let S = useMediaDevice(), C = pickCustomAttributes({
+		...x,
+		...i
+	}), w = pickCustomAttributes(i);
+	return !isTooltipVisible(v, h, S) || !r?.tooltip ? /* @__PURE__ */ jsx("div", {
+		"aria-describedby": e,
+		"aria-disabled": a,
+		"aria-label": t,
+		"aria-labelledby": n,
+		"aria-valuemax": c,
+		"aria-valuemin": l,
+		"aria-valuenow": b,
+		className: r?.thumb,
+		"data-disabled": a,
+		"data-hover": o,
+		"data-position": g ? "right" : void 0,
+		"data-pressed": h,
+		role: "slider",
+		style: _,
+		tabIndex: 0,
+		onBlur: f,
+		onFocus: u,
+		onKeyDown: d,
+		onMouseOut: f,
+		onMouseOver: p,
+		onTouchStart: m,
+		...C,
+		children: /* @__PURE__ */ jsx(ElementOrIcon, {
+			className: r?.thumbicon,
+			...s
+		})
+	}) : /* @__PURE__ */ jsx("div", {
+		"data-disabled": a,
+		"data-hover": o,
+		"data-pressed": h,
+		role: "presentation",
+		style: _,
+		...C,
+		className: r?.thumb,
+		children: /* @__PURE__ */ jsx(TooltipUnControlled, {
+			additionalClasses: r?.tooltip,
+			align: y,
+			childrenAsButton: !1,
+			content: { content: v?.content },
+			tooltipAsModal: !1,
+			children: /* @__PURE__ */ jsx("div", {
+				"aria-describedby": e,
+				"aria-disabled": a,
+				"aria-label": t,
+				"aria-labelledby": n,
+				"aria-valuemax": c,
+				"aria-valuemin": l,
+				"aria-valuenow": b,
+				className: r.innerthumbtooltip,
+				"data-disabled": a,
+				"data-hover": o,
+				"data-pressed": h,
+				role: "slider",
+				tabIndex: 0,
+				onBlur: f,
+				onFocus: u,
+				onKeyDown: d,
+				onMouseOut: f,
+				onMouseOver: p,
+				onTouchStart: m,
+				...w,
+				children: /* @__PURE__ */ jsx(ElementOrIcon, {
+					className: g ? r?.rightthumbicon : r?.thumbicon,
+					...s
+				})
+			})
+		})
+	});
+};
+export { SliderThumbStandAlone };

package/dist/esm/components/slider/slider.js

@@ -1 +1,182 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as t,useRef as n,useState as i,useCallback as r,useEffect as o}from"react";import{useClassName as a}from"../../lib/hooks/useClassName/useClassName.js";import{SliderStandAlone as s}from"./sliderStandAlone.js";import{calcNewValueAfterKeyPress as l,incrementValue as u,decrementValue as c}from"./utils/accessibility.utils.js";import{calcDefaultValue as m,focusThumb as d,equalsRangeValues as f,getScale as v,getOffset as p,calculateChange as g,calcValueByOffset as h,calcNewRangeValue as b,calcScaleValue as w}from"./utils/slider.utils.js";const x=t(({additionalClasses:t,ariaLabel:x,ariaLabelBy:L,decrementButton:B,defaultValue:C,disabled:T=!1,incrementButton:E,initialStepOffset:S,label:y,leftHelperText:P,max:k=100,min:A=0,onChange:O,onDragEnd:R,onDragStart:j,range:H=!1,rightAriaLabel:I,rightAriaLabelBy:D,rightHelperText:N,rightThumbIcon:V,rightTooltip:z,step:q=1,thumbExceedsTrack:K=!0,thumbIcon:M,tooltip:F,type:G="discrete",value:J,variant:Q},U)=>{const W=e=>m({initialStepOffset:S,max:k,min:A,range:H,step:q,value:e}),X=n(null),[Y,Z]=i(W(J??C)),[$,_]=i(!1),[ee,te]=i(!1),ne=n("left"),[ie,re]=i({max:100,min:0}),oe=n();d({container:X.current,currentActivePointer:ne.current,range:H});const ae=r(e=>{O&&(clearTimeout(oe.current),oe.current=setTimeout(()=>{O(e)},50))},[O]),se=e=>{if(!X.current||T)return;const t=g({container:X.current,event:e,offsetBoundaries:ie}),n=h({max:k,min:A,offset:t,offsetBoundaries:ie,step:q}),i=w({initialStepOffset:S,max:k,min:A,step:q,value:n});Z(e=>{let t=i;return H&&(t=b({activePointer:ne,newValue:i,prevValue:e})),ae(t),t})},le=()=>{R?.(),te(!1),ve()},{scaleOffsets:ue,showScale:ce}=v({initialStepOffset:S,max:k,min:A,step:q,type:G}),{offset:me,offsetLeft:de,offsetRight:fe}=p({max:k,min:A,offsetBoundaries:ie,range:H,value:Y}),ve=()=>{window.removeEventListener("mousemove",se),window.removeEventListener("mouseup",le),window.removeEventListener("touchend",le)},pe=a({additionalClassNames:t,component:"SLIDER",variant:Q}),ge=r(()=>{if(K)return void re({max:100,min:0});if(!X.current)return;const e=X.current.querySelector('[role="slider"]');if(!e)return;const t=X.current.getBoundingClientRect().width,n=e.getBoundingClientRect().width/t*100/2;re({max:100-n,min:n})},[K]);return o(()=>(ge(),K||window.addEventListener("resize",ge),()=>{K||window.removeEventListener("resize",ge)}),[K]),o(()=>{void 0!==J&&(H&&!f({values1:J,values2:Y})||!H&&J!==Y)&&Z(W(J))},[J]),o(()=>ve,[]),/* @__PURE__ */e(s,{ref:U,activePointer:ne,ariaLabel:x,ariaLabelBy:L,containerRef:X,cssClasses:pe,decrementButton:{...B,disabled:T||B?.disabled,onClick:e=>{const t=c({activePointer:ne.current,min:A,range:H,step:q,value:Y});void 0!==t&&(Z(t),ae(t)),B?.onClick?.(e)}},disabled:T,hover:$,incrementButton:{...E,disabled:T||E?.disabled,onClick:e=>{const t=u({activePointer:ne.current,max:k,range:H,step:q,value:Y});void 0!==t&&(Z(t),ae(t)),E?.onClick?.(e)}},label:y,leftHelperText:P,max:k,min:A,offset:me,offsetLeft:de,offsetRight:fe,pressed:ee,range:H,rightAriaLabel:I,rightAriaLabelBy:D,rightHelperText:N,rightThumbIcon:V,rightTooltip:z,scaleOffsets:ue,setHover:_,showScale:ce,step:q,thumbIcon:M,tooltip:F,value:Y,onChange:se,onKeyPress:e=>{if(T)return;const t=l({activePointer:ne.current,event:e,max:k,min:A,range:H,step:q,value:Y});void 0!==t&&(Z(t),ae(t))},onMouseDown:e=>{j?.(),te(!0),se(e),window.addEventListener("mousemove",se),window.addEventListener("mouseup",le)},onTouchStart:e=>{j?.(),te(!0),se(e),window.addEventListener("touchend",le)}})});export{x as Slider};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { calcNewValueAfterKeyPress, decrementValue, incrementValue } from "./utils/accessibility.utils.js";
+import { SliderStandAlone } from "./sliderStandAlone.js";
+import { calcDefaultValue, calcNewRangeValue, calcScaleValue, calcValueByOffset, calculateChange, equalsRangeValues, focusThumb, getOffset, getScale } from "./utils/slider.utils.js";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var ON_CHANGE_DEBOUNCE_TIMEOUT = 50;
+const Slider = forwardRef(({ additionalClasses: r, ariaLabel: i, ariaLabelBy: a, decrementButton: o, defaultValue: s, disabled: c = !1, incrementButton: l, initialStepOffset: u, label: d, leftHelperText: f, max: p = 100, min: m = 0, onChange: h, onDragEnd: g, onDragStart: _, range: v = !1, rightAriaLabel: ee, rightAriaLabelBy: y, rightHelperText: b, rightThumbIcon: x, rightTooltip: S, step: C = 1, thumbExceedsTrack: w = !0, thumbIcon: T, tooltip: E, type: te = "discrete", value: D, variant: O }, k) => {
+	let A = (e) => calcDefaultValue({
+		initialStepOffset: u,
+		max: p,
+		min: m,
+		range: v,
+		step: C,
+		value: e
+	}), j = useRef(null), [M, N] = useState(A(D ?? s)), [P, F] = useState(!1), [I, L] = useState(!1), R = useRef("left"), [z, B] = useState({
+		max: 100,
+		min: 0
+	}), V = useRef();
+	focusThumb({
+		container: j.current,
+		currentActivePointer: R.current,
+		range: v
+	});
+	let H = useCallback((e) => {
+		h && (clearTimeout(V.current), V.current = setTimeout(() => {
+			h(e);
+		}, ON_CHANGE_DEBOUNCE_TIMEOUT));
+	}, [h]), U = (e) => {
+		if (!j.current || c) return;
+		let t = calcScaleValue({
+			initialStepOffset: u,
+			max: p,
+			min: m,
+			step: C,
+			value: calcValueByOffset({
+				max: p,
+				min: m,
+				offset: calculateChange({
+					container: j.current,
+					event: e,
+					offsetBoundaries: z
+				}),
+				offsetBoundaries: z,
+				step: C
+			})
+		});
+		N((e) => {
+			let n = t;
+			return v && (n = calcNewRangeValue({
+				activePointer: R,
+				newValue: t,
+				prevValue: e
+			})), H(n), n;
+		});
+	}, W = (e) => {
+		if (c) return;
+		let n = calcNewValueAfterKeyPress({
+			activePointer: R.current,
+			event: e,
+			max: p,
+			min: m,
+			range: v,
+			step: C,
+			value: M
+		});
+		n !== void 0 && (N(n), H(n));
+	}, G = (e) => {
+		let t = incrementValue({
+			activePointer: R.current,
+			max: p,
+			range: v,
+			step: C,
+			value: M
+		});
+		t !== void 0 && (N(t), H(t)), l?.onClick?.(e);
+	}, K = (e) => {
+		let t = decrementValue({
+			activePointer: R.current,
+			min: m,
+			range: v,
+			step: C,
+			value: M
+		});
+		t !== void 0 && (N(t), H(t)), o?.onClick?.(e);
+	}, q = () => {
+		g?.(), L(!1), Q();
+	}, { scaleOffsets: J, showScale: Y } = getScale({
+		initialStepOffset: u,
+		max: p,
+		min: m,
+		step: C,
+		type: te
+	}), { offset: X, offsetLeft: Z, offsetRight: ne } = getOffset({
+		max: p,
+		min: m,
+		offsetBoundaries: z,
+		range: v,
+		value: M
+	}), Q = () => {
+		window.removeEventListener("mousemove", U), window.removeEventListener("mouseup", q), window.removeEventListener("touchend", q);
+	}, re = useClassName({
+		additionalClassNames: r,
+		component: "SLIDER",
+		variant: O
+	}), $ = useCallback(() => {
+		if (w) {
+			B({
+				max: 100,
+				min: 0
+			});
+			return;
+		}
+		if (!j.current) return;
+		let e = j.current.querySelector("[role=\"slider\"]");
+		if (!e) return;
+		let t = j.current.getBoundingClientRect().width, n = e.getBoundingClientRect().width / t * 100 / 2;
+		B({
+			max: 100 - n,
+			min: n
+		});
+	}, [w]);
+	useEffect(() => ($(), w || window.addEventListener("resize", $), () => {
+		w || window.removeEventListener("resize", $);
+	}), [w]), useEffect(() => {
+		D !== void 0 && (v && !equalsRangeValues({
+			values1: D,
+			values2: M
+		}) || !v && D !== M) && N(A(D));
+	}, [D]), useEffect(() => Q, []);
+	let ie = (e) => {
+		_?.(), L(!0), U(e), window.addEventListener("mousemove", U), window.addEventListener("mouseup", q);
+	}, ae = (e) => {
+		_?.(), L(!0), U(e), window.addEventListener("touchend", q);
+	};
+	return /* @__PURE__ */ jsx(SliderStandAlone, {
+		ref: k,
+		activePointer: R,
+		ariaLabel: i,
+		ariaLabelBy: a,
+		containerRef: j,
+		cssClasses: re,
+		decrementButton: {
+			...o,
+			disabled: c || o?.disabled,
+			onClick: K
+		},
+		disabled: c,
+		hover: P,
+		incrementButton: {
+			...l,
+			disabled: c || l?.disabled,
+			onClick: G
+		},
+		label: d,
+		leftHelperText: f,
+		max: p,
+		min: m,
+		offset: X,
+		offsetLeft: Z,
+		offsetRight: ne,
+		pressed: I,
+		range: v,
+		rightAriaLabel: ee,
+		rightAriaLabelBy: y,
+		rightHelperText: b,
+		rightThumbIcon: x,
+		rightTooltip: S,
+		scaleOffsets: J,
+		setHover: F,
+		showScale: Y,
+		step: C,
+		thumbIcon: T,
+		tooltip: E,
+		value: M,
+		onChange: U,
+		onKeyPress: W,
+		onMouseDown: ie,
+		onTouchStart: ae
+	});
+});
+export { Slider };