@techsio/ui-kit 0.6.0 → 0.7.0

package/dist/molecules/slider.js

@@ -114,23 +114,125 @@ const sliderVariants = tv({
         size: "md"
     }
 });
+const resolveFiniteNumber = (value, fallbackValue)=>{
+    if ("number" != typeof value || Number.isNaN(value) || !Number.isFinite(value)) return fallbackValue;
+    return value;
+};
+const clampNumber = (value, min, max)=>{
+    if (!Number.isFinite(value)) return min;
+    return Math.max(min, Math.min(max, value));
+};
+const countDecimals = (value)=>{
+    if (!Number.isFinite(value)) return 0;
+    const [, decimalPart = ""] = value.toString().split(".");
+    return decimalPart.length;
+};
+const roundToStepPrecision = (value, step)=>{
+    const precision = countDecimals(step);
+    if (precision <= 0) return Math.round(value);
+    return Number(value.toFixed(precision));
+};
+const snapToStep = (value, min, step)=>{
+    const snappedValue = Math.round((value - min) / step) * step + min;
+    return roundToStepPrecision(snappedValue, step);
+};
+const resolveThumbCount = (value, defaultValue)=>{
+    if (Array.isArray(value) && value.length > 0) return value.length;
+    if (Array.isArray(defaultValue) && defaultValue.length > 0) return defaultValue.length;
+    return 2;
+};
+const resolveSliderConfig = (min, max, step, minStepsBetweenThumbs, thumbCount)=>{
+    const resolvedMin = resolveFiniteNumber(min, 0);
+    const resolvedStepCandidate = resolveFiniteNumber(step, 1);
+    const resolvedStep = resolvedStepCandidate > 0 ? resolvedStepCandidate : 1;
+    const maxCandidate = resolveFiniteNumber(max, resolvedMin + resolvedStep);
+    const resolvedMax = maxCandidate > resolvedMin ? maxCandidate : resolvedMin + resolvedStep;
+    const span = resolvedMax - resolvedMin;
+    const stepsInSpan = Math.max(0, Math.floor((span + Number.EPSILON) / resolvedStep));
+    const maxMinStepsBetweenThumbs = thumbCount > 1 ? Math.floor(stepsInSpan / (thumbCount - 1)) : 0;
+    const normalizedMinSteps = Math.trunc(resolveFiniteNumber(minStepsBetweenThumbs, 0));
+    const resolvedMinStepsBetweenThumbs = clampNumber(normalizedMinSteps, 0, maxMinStepsBetweenThumbs);
+    return {
+        min: resolvedMin,
+        max: resolvedMax,
+        step: resolvedStep,
+        minStepsBetweenThumbs: resolvedMinStepsBetweenThumbs
+    };
+};
+const createFallbackValues = (thumbCount, min, max)=>{
+    if (thumbCount <= 1) return [
+        min
+    ];
+    if (2 === thumbCount) return [
+        min,
+        max
+    ];
+    const span = max - min;
+    return Array.from({
+        length: thumbCount
+    }, (_, index)=>{
+        const ratio = index / (thumbCount - 1);
+        return min + span * ratio;
+    });
+};
+const normalizeSliderValues = (values, fallbackValues, config)=>{
+    const sourceValues = Array.isArray(values) && values.length > 0 ? values : fallbackValues;
+    const normalizedValues = sourceValues.slice(0, fallbackValues.length).map((rawValue, index)=>{
+        const fallbackValue = fallbackValues[index] ?? config.min;
+        const safeValue = resolveFiniteNumber(rawValue, fallbackValue);
+        const snappedValue = snapToStep(safeValue, config.min, config.step);
+        return clampNumber(snappedValue, config.min, config.max);
+    });
+    while(normalizedValues.length < fallbackValues.length)normalizedValues.push(fallbackValues[normalizedValues.length] ?? config.min);
+    normalizedValues.sort((left, right)=>left - right);
+    const gap = config.minStepsBetweenThumbs * config.step;
+    for(let index = 0; index < normalizedValues.length; index += 1){
+        const currentValue = normalizedValues[index] ?? config.min;
+        const minAllowed = 0 === index ? config.min : (normalizedValues[index - 1] ?? config.min) + gap;
+        normalizedValues[index] = Math.max(currentValue, minAllowed);
+    }
+    for(let index = normalizedValues.length - 1; index >= 0; index -= 1){
+        const currentValue = normalizedValues[index] ?? config.max;
+        const maxAllowed = index === normalizedValues.length - 1 ? config.max : (normalizedValues[index + 1] ?? config.max) - gap;
+        normalizedValues[index] = Math.min(currentValue, maxAllowed);
+    }
+    return normalizedValues.map((rawValue, index)=>{
+        const minAllowed = 0 === index ? config.min : (normalizedValues[index - 1] ?? config.min) + gap;
+        const maxAllowed = index === normalizedValues.length - 1 ? config.max : (normalizedValues[index + 1] ?? config.max) - gap;
+        const safeValue = rawValue ?? fallbackValues[index] ?? config.min;
+        const snappedValue = snapToStep(safeValue, config.min, config.step);
+        return clampNumber(snappedValue, minAllowed, maxAllowed);
+    });
+};
+const apiValueFallback = (value, defaultValue, fallbackValues)=>{
+    if (Array.isArray(value) && value.length > 0) return value;
+    if (Array.isArray(defaultValue) && defaultValue.length > 0) return defaultValue;
+    return fallbackValues;
+};
 function Slider({ id, name, label, validateStatus, helpText, showHelpTextIcon = true, value, origin, thumbAlignment = "center", defaultValue = [
     25,
     75
 ], min = 0, max = 100, step = 1, minStepsBetweenThumbs = 0, disabled = false, readOnly = false, dir = "ltr", orientation = "horizontal", size = "md", showMarkers = false, markerCount = 5, showValueText = false, formatRangeText, formatValue = (val)=>val.toString(), className, onChange, onChangeEnd }) {
     const generatedId = useId();
     const uniqueId = id || generatedId;
+    const thumbCount = resolveThumbCount(value, defaultValue);
+    const resolvedConfig = resolveSliderConfig(min, max, step, minStepsBetweenThumbs, thumbCount);
+    const fallbackValues = createFallbackValues(thumbCount, resolvedConfig.min, resolvedConfig.max);
+    const isControlled = void 0 !== value;
+    const resolvedValue = isControlled ? normalizeSliderValues(value, fallbackValues, resolvedConfig) : void 0;
+    const resolvedDefaultValue = isControlled ? void 0 : normalizeSliderValues(defaultValue, fallbackValues, resolvedConfig);
+    const valueTextValues = apiValueFallback(resolvedValue, resolvedDefaultValue, fallbackValues);
     const service = useMachine(machine, {
         id: uniqueId,
         name,
-        value,
-        defaultValue,
-        min,
-        max,
+        value: resolvedValue,
+        defaultValue: resolvedDefaultValue,
+        min: resolvedConfig.min,
+        max: resolvedConfig.max,
         origin,
         thumbAlignment,
-        step,
-        minStepsBetweenThumbs,
+        step: resolvedConfig.step,
+        minStepsBetweenThumbs: resolvedConfig.minStepsBetweenThumbs,
         disabled,
         readOnly,
         dir,
@@ -162,7 +264,7 @@ function Slider({ id, name, label, validateStatus, helpText, showHelpTextIcon =
                         ...api.getValueTextProps(),
                         children: [
                             /*#__PURE__*/ jsx("b", {
-                                children: formatRangeText ? formatRangeText(api.value || defaultValue) : api.value && 2 === api.value.length && void 0 !== api.value[0] && void 0 !== api.value[1] ? `${formatValue(api.value[0])} - ${formatValue(api.value[1])}` : ""
+                                children: formatRangeText ? formatRangeText(api.value || valueTextValues) : api.value && 2 === api.value.length && void 0 !== api.value[0] && void 0 !== api.value[1] ? `${formatValue(api.value[0])} - ${formatValue(api.value[1])}` : ""
                             }),
                             " "
                         ]
@@ -189,7 +291,7 @@ function Slider({ id, name, label, validateStatus, helpText, showHelpTextIcon =
                                 children: Array.from({
                                     length: markerCount
                                 }).map((_, index)=>{
-                                    const markerValue = 1 === markerCount ? min : min + (max - min) / (markerCount - 1) * index;
+                                    const markerValue = 1 === markerCount ? resolvedConfig.min : resolvedConfig.min + (resolvedConfig.max - resolvedConfig.min) / (markerCount - 1) * index;
                                     return /*#__PURE__*/ jsxs("div", {
                                         className: marker(),
                                         ...api.getMarkerProps({

package/dist/src/molecules/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/molecules/slider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAKrD,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA2FlB,CAAA;AAEF,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACtE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IACnB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IACnC,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACrC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,MAAM,CAAA;IAC9C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACzC;AAED,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,cAAc,EACd,QAAQ,EACR,gBAAuB,EACvB,KAAK,EACL,MAAM,EACN,cAAyB,EACzB,YAAuB,EACvB,GAAO,EACP,GAAS,EACT,IAAQ,EACR,qBAAyB,EACzB,QAAgB,EAChB,QAAgB,EAChB,GAAW,EACX,WAA0B,EAC1B,IAAW,EACX,WAAmB,EACnB,WAAe,EACf,aAAqB,EACrB,eAAe,EACf,WAA6C,EAC7C,SAAS,EACT,QAAQ,EACR,WAAW,GACZ,EAAE,WAAW,2CAkIb"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/molecules/slider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAKrD,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA2FlB,CAAA;AAEF,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACtE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IACnB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IACnC,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACrC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,MAAM,CAAA;IAC9C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACzC;AAqMD,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,cAAc,EACd,QAAQ,EACR,gBAAuB,EACvB,KAAK,EACL,MAAM,EACN,cAAyB,EACzB,YAAuB,EACvB,GAAO,EACP,GAAS,EACT,IAAQ,EACR,qBAAyB,EACzB,QAAgB,EAChB,QAAgB,EAChB,GAAW,EACX,WAA0B,EAC1B,IAAW,EACX,WAAmB,EACnB,WAAe,EACf,aAAqB,EACrB,eAAe,EACf,WAA6C,EAC7C,SAAS,EACT,QAAQ,EACR,WAAW,GACZ,EAAE,WAAW,2CA8Jb"}

package/dist/stories/molecules/slider.stories.d.ts

@@ -9,6 +9,7 @@ export declare const WithValidation: Story;
 export declare const WithMarkers: Story;
 export declare const VerticalOrientation: Story;
 export declare const Controlled: Story;
+export declare const DynamicBoundsControlled: Story;
 export declare const SingleVsMultiThumb: Story;
 export declare const Origin: Story;
 export declare const ThumbAlignment: Story;

package/dist/stories/molecules/slider.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/slider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAItD,OAAO,EACL,MAAM,EAEP,MAAM,4BAA4B,CAAA;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAyI7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AASpC,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA0B5B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAqDjC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAyCxB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA4BhC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA+BpB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA2B5B,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAqCnC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAuBxB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAiD9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAwIzB,CAAA"}
+{"version":3,"file":"slider.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/slider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAItD,OAAO,EACL,MAAM,EAEP,MAAM,4BAA4B,CAAA;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAyI7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AASpC,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA0B5B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAqDjC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAyCxB,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,KA0CrC,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA4BhC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA+BpB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA2B5B,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAqCnC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAuBxB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAiD9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAwIzB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "repository": {
     "type": "git",

package/src/tokens/components/atoms/_icon.css

@@ -207,4 +207,4 @@
 
 @utility token-icon-decrement {
   @apply token-icon-chevron-down;
-}
+}