@techsio/ui-kit 0.3.2 → 0.4.0

package/dist/molecules/slider.js

@@ -2,124 +2,122 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { normalizeProps, useMachine } from "@zag-js/react";
 import { connect, machine } from "@zag-js/slider";
 import { useId } from "react";
-import { ErrorText } from "../atoms/error-text.js";
-import { ExtraText } from "../atoms/extra-text.js";
 import { Label } from "../atoms/label.js";
+import { StatusText } from "../atoms/status-text.js";
 import { slugify, tv } from "../utils.js";
 const sliderVariants = tv({
     slots: {
         root: [
-            'flex flex-col w-full gap-slider-root',
-            'data-[orientation=vertical]:h-full',
-            'data-[disabled]:cursor-not-allowed'
+            "flex w-full flex-col gap-slider-root",
+            "data-[orientation=vertical]:h-full",
+            "data-disabled:cursor-not-allowed"
         ],
         header: [
-            'flex items-center justify-between'
+            "flex items-center justify-between"
         ],
         value: [
-            'text-slider-value-size'
+            "text-slider-value-size"
         ],
         label: [
-            'block font-medium'
+            "block font-medium"
         ],
         control: [
-            'relative grid place-items-center ',
-            'data-[orientation=vertical]:h-full data-[orientation=vertical]:grid-rows-1'
+            "relative grid place-items-center",
+            "data-[orientation=vertical]:h-full data-[orientation=vertical]:grid-rows-1"
         ],
         track: [
-            'rounded-slider-track bg-slider-track-bg flex-1',
-            'data-[orientation=horizontal]:w-full',
-            'data-[orientation=vertical]:h-full ',
-            'data-[disabled]:bg-slider-bg-disabled',
-            'border-(length:--border-width-slider) border-slider-border',
-            'data-[disabled]:border-slider-border-disabled',
-            'transition-colors duration-200',
-            'hover:bg-slider-track-bg-hover',
-            'data-[invalid=true]:border-slider-border-error'
+            "flex-1 rounded-slider-track bg-slider-track-bg",
+            "data-[orientation=horizontal]:w-full",
+            "data-[orientation=vertical]:h-full",
+            "data-disabled:bg-slider-bg-disabled",
+            "border-(length:--border-width-slider) border-slider-border",
+            "data-disabled:border-slider-border-disabled",
+            "transition-colors duration-200 motion-reduce:transition-none",
+            "hover:bg-slider-track-bg-hover",
+            "data-[invalid=true]:border-(length:--border-width-validation)",
+            "data-[invalid=true]:border-slider-border-error"
         ],
         range: [
-            'bg-slider-range-bg rounded-slider-track h-full',
-            'data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-full',
-            'data-[disabled]:bg-slider-range-bg-disabled',
-            'hover:bg-slider-range-bg-hover',
-            'data-[invalid=true]:bg-slider-range-bg-error'
+            "h-full rounded-slider-track bg-slider-range-bg",
+            "data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-full",
+            "data-disabled:bg-slider-range-bg-disabled",
+            "hover:bg-slider-range-bg-hover",
+            "data-[invalid=true]:bg-slider-range-bg-error",
+            "transition-colors duration-200 motion-reduce:transition-none"
         ],
         thumb: [
-            'flex items-center justify-center',
-            'rounded-slider-thumb bg-slider-thumb-bg',
-            'focus:outline-none',
-            'focus-visible:ring',
-            'focus-visible:ring-slider-ring',
-            'data-[disabled]:bg-slider-thumb-bg-disabled',
-            'border-(length:--border-width-slider) border-slider-border',
-            'data-[disabled]:border-slider-border-disabled',
-            'hover:bg-slider-thumb-bg-hover',
-            'cursor-grab data-[dragging]:cursor-grabbing data-[disabled]:cursor-not-allowed',
-            'transition-colors duration-200',
-            'shadow-slider-thumb'
+            "flex items-center justify-center",
+            "rounded-slider-thumb bg-slider-thumb-bg",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-slider-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "focus-visible:scale-110",
+            "data-disabled:bg-slider-thumb-bg-disabled",
+            "border-(length:--border-width-slider) border-slider-border",
+            "data-disabled:border-slider-border-disabled",
+            "hover:bg-slider-thumb-bg-hover",
+            "cursor-grab data-disabled:cursor-not-allowed data-dragging:cursor-grabbing",
+            "shadow-slider-thumb"
         ],
         markerGroup: [
-            'relative h-full flex items-center'
+            "relative flex h-full items-center"
         ],
         marker: [
-            'relative h-full flex flex-col justify-center items-center',
-            'data-[orientation=vertical]:w-full',
-            'data-[orientation=vertical]:h-marker-vertical',
-            'data-[orientation=vertical]:flex-row'
+            "relative flex h-full flex-col items-center justify-center",
+            "data-[orientation=vertical]:w-full",
+            "data-[orientation=vertical]:h-marker-vertical",
+            "data-[orientation=vertical]:flex-row"
         ],
         markerLine: [
-            'w-slider-marker h-full bg-slider-marker-bg',
-            'data-[orientation=vertical]:h-slider-marker data-[orientation=vertical]:w-full'
+            "h-full w-slider-marker bg-slider-marker-bg",
+            "data-[orientation=vertical]:h-slider-marker data-[orientation=vertical]:w-full"
         ],
         markerText: [
-            'absolute top-full',
-            'data-[orientation=vertical]:top-0 data-[orientation=vertical]:left-full',
-            'data-[orientation=vertical]:h-full',
-            'data-[orientation=vertical]:p-marker-text'
-        ],
-        footer: [
-            'flex flex-col'
+            "absolute top-full",
+            "data-[orientation=vertical]:top-0 data-[orientation=vertical]:left-full",
+            "data-[orientation=vertical]:h-full",
+            "data-[orientation=vertical]:p-marker-text"
         ]
     },
     variants: {
         size: {
             sm: {
                 track: [
-                    'h-slider-track-sm data-[orientation=vertical]:w-slider-track-sm'
+                    "h-slider-track-sm data-[orientation=vertical]:w-slider-track-sm"
                 ],
                 thumb: [
-                    'w-slider-thumb-sm',
-                    'h-slider-thumb-sm'
+                    "w-slider-thumb-sm",
+                    "h-slider-thumb-sm"
                 ]
             },
             md: {
                 track: [
-                    'h-slider-track-md data-[orientation=vertical]:w-slider-track-md'
+                    "h-slider-track-md data-[orientation=vertical]:w-slider-track-md"
                 ],
                 thumb: [
-                    'w-slider-thumb-md',
-                    'h-slider-thumb-md'
+                    "w-slider-thumb-md",
+                    "h-slider-thumb-md"
                 ]
             },
             lg: {
                 track: [
-                    'h-slider-track-lg data-[orientation=vertical]:w-slider-track-lg'
+                    "h-slider-track-lg data-[orientation=vertical]:w-slider-track-lg"
                 ],
                 thumb: [
-                    'w-slider-thumb-lg',
-                    'h-slider-thumb-lg'
+                    "w-slider-thumb-lg",
+                    "h-slider-thumb-lg"
                 ]
             }
         }
     },
     defaultVariants: {
-        size: 'md'
+        size: "md"
     }
 });
-function Slider({ id, name, label, helperText, error, errorText, value, origin, thumbAlignment = 'center', defaultValue = [
+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 }) {
+], 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 service = useMachine(machine, {
@@ -141,7 +139,7 @@ function Slider({ id, name, label, helperText, error, errorText, value, origin,
         onValueChangeEnd: (details)=>onChangeEnd?.(details.value)
     });
     const api = connect(service, normalizeProps);
-    const { root, label: labelSlot, control, track, range, thumb, header, value: valueSlot, markerGroup, marker, markerLine, markerText, footer } = sliderVariants({
+    const { root, label: labelSlot, control, track, range, thumb, header, value: valueSlot, markerGroup, marker, markerLine, markerText } = sliderVariants({
         className,
         size
     });
@@ -164,9 +162,9 @@ function Slider({ id, name, label, helperText, error, errorText, value, origin,
                         ...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 || 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])}` : ""
                             }),
-                            ' '
+                            " "
                         ]
                     })
                 ]
@@ -178,12 +176,12 @@ function Slider({ id, name, label, helperText, error, errorText, value, origin,
                     /*#__PURE__*/ jsxs("div", {
                         className: track(),
                         ...api.getTrackProps(),
-                        "data-invalid": error,
+                        "data-invalid": "error" === validateStatus,
                         children: [
                             /*#__PURE__*/ jsx("div", {
                                 className: range(),
                                 ...api.getRangeProps(),
-                                "data-invalid": error
+                                "data-invalid": "error" === validateStatus
                             }),
                             showMarkers && /*#__PURE__*/ jsx("div", {
                                 ...api.getMarkerGroupProps(),
@@ -198,7 +196,7 @@ function Slider({ id, name, label, helperText, error, errorText, value, origin,
                                             value: markerValue
                                         }),
                                         children: [
-                                            !('center' === thumbAlignment && (0 === index || index === markerCount - 1)) && /*#__PURE__*/ jsx("div", {
+                                            !("center" === thumbAlignment && (0 === index || index === markerCount - 1)) && /*#__PURE__*/ jsx("div", {
                                                 className: markerLine(),
                                                 "data-orientation": orientation
                                             }),
@@ -223,25 +221,14 @@ function Slider({ id, name, label, helperText, error, errorText, value, origin,
                                     index
                                 })
                             })
-                        }, index))
+                        }, `thumb-${index}`))
                 ]
             }),
-            (helperText || errorText) && /*#__PURE__*/ jsxs("div", {
-                className: footer(),
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: error ? 'block' : 'invisible h-0 overflow-hidden',
-                        children: /*#__PURE__*/ jsx(ErrorText, {
-                            children: errorText
-                        })
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        className: !error && helperText ? 'block' : 'invisible h-0 overflow-hidden',
-                        children: /*#__PURE__*/ jsx(ExtraText, {
-                            children: helperText
-                        })
-                    })
-                ]
+            helpText && /*#__PURE__*/ jsx(StatusText, {
+                status: validateStatus,
+                showIcon: showHelpTextIcon,
+                size: size,
+                children: helpText
             })
         ]
     });