@redneckz/wildless-cms-uni-blocks 0.2.76 → 0.2.79

package/src/ui-kit/InputRange/InputRange.tsx

@@ -0,0 +1,63 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { InputRangeProps } from './InputRangeProps';
+
+export const InputRange = JSX<InputRangeProps>(
+  ({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
+    const handleChange = (value: string) => {
+      if (!onChange) return;
+
+      const sanitizedValue = Number(value.replace(/\D/g, ''));
+      onChange(sanitizedValue);
+    };
+
+    const inputStyle = {
+      backgroundSize: `${(value * 100) / max - 1}% 100%`,
+    };
+
+    const handleBlur = () => {
+      if (!onChange) return;
+
+      if (value < min) onChange(min);
+      if (value > max) onChange(max);
+    };
+
+    return (
+      <div className={className}>
+        <div className="relative">
+          {title ? (
+            <span className="absolute text-xs text-secondary-text top-1 mt-0.5 pl-4 ml-0.5">
+              {title}
+            </span>
+          ) : null}
+          <input
+            className={`m-0 font-sans text-sm w-full h-12 border-2 border-solid border-main-divider rounded-md outline-none p-0 pl-4 m-0 box-border text-primary-text ${
+              title ? 'pt-4' : ''
+            }`}
+            value={String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ' ')}
+            onChange={(e) => handleChange(e.target.value)}
+            onBlur={handleBlur}
+          />
+          <div className="absolute inset-x-0 mt-0.5 top-8 px-4">
+            <input
+              className="box-border w-full m-0 cursor-pointer slider"
+              type="range"
+              min={min}
+              max={max}
+              step={step}
+              value={value}
+              onChange={(e) => handleChange(e.target.value)}
+              style={inputStyle}
+            />
+          </div>
+        </div>
+        <div className="flex justify-between mt-3 mb-4">
+          {items.map((item, i) => (
+            <span key={String(i)} className="text-xs text-secondary-text pl-4">
+              {item}
+            </span>
+          ))}
+        </div>
+      </div>
+    );
+  },
+);

package/src/ui-kit/InputRange/InputRangeProps.ts

@@ -0,0 +1,10 @@
+export interface InputRangeProps {
+  className?: string;
+  items?: string[];
+  min?: number;
+  max?: number;
+  step?: number;
+  value?: number;
+  title?: string;
+  onChange?: (value: number) => void;
+}

package/src/utils/clamp.ts

@@ -0,0 +1,2 @@
+export const clamp = (value: number, min: number, max: number) =>
+  Math.max(min, Math.min(value, max));