@aegov/design-system-react/dist/components/RangeSlider/RangeSlider.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactSlider = require("@radix-ui/react-slider");
var _reactLabel = require("@radix-ui/react-label");
var _tailwindMerge = require("tailwind-merge");
var _zod = require("zod");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const RangeSliderSchema = _zod.z.object({
  value: _zod.z.number().optional(),
  defaultValue: _zod.z.number().optional(),
  min: _zod.z.number().optional(),
  max: _zod.z.number().optional(),
  step: _zod.z.number().optional(),
  onValueChange: _zod.z.function().optional(),
  onValueCommit: _zod.z.function().optional(),
  disabled: _zod.z.boolean().optional(),
  required: _zod.z.boolean().optional(),
  name: _zod.z.string().optional(),
  label: _zod.z.string().optional(),
  helperText: _zod.z.string().optional(),
  error: _zod.z.string().optional(),
  size: _zod.z.enum(['sm', 'base', 'lg']).optional(),
  variant: _zod.z.enum(['primary', 'secondary']).optional(),
  className: _zod.z.string().optional()
});
const sizeStyles = {
  sm: {
    track: 'h-1',
    thumb: 'h-3.5 w-3.5',
    label: 'text-sm',
    helperText: 'text-xs'
  },
  base: {
    track: 'h-1.5',
    thumb: 'h-4 w-4',
    label: 'text-base',
    helperText: 'text-sm'
  },
  lg: {
    track: 'h-2',
    thumb: 'h-5 w-5',
    label: 'text-lg',
    helperText: 'text-base'
  }
};
const variantStyles = {
  primary: {
    track: 'bg-primary-100',
    range: 'bg-primary-600',
    thumb: 'border-primary-600 focus:ring-primary-500'
  },
  secondary: {
    track: 'bg-secondary-100',
    range: 'bg-secondary-800',
    thumb: 'border-secondary-800 focus:ring-secondary-500'
  }
};
const RangeSlider = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
  const {
    value,
    defaultValue = 20,
    min = 0,
    max = 100,
    step = 1,
    onValueChange,
    onValueCommit,
    disabled,
    required,
    name,
    label,
    helperText,
    error,
    size = 'base',
    variant = 'primary',
    className,
    ...rest
  } = RangeSliderSchema.parse(props);

  // Generate a unique ID for accessibility
  const id = _react.default.useMemo(() => name || `range-${Math.random().toString(36).slice(2)}`, [name]);

  // Convert single number to array for Radix UI Slider
  const sliderValue = value !== undefined ? [value] : undefined;
  const sliderDefaultValue = [defaultValue];
  const handleValueChange = newValue => onValueChange?.(newValue[0]);
  const handleValueCommit = newValue => onValueCommit?.(newValue[0]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _tailwindMerge.twMerge)('w-full', className)
  }, label && /*#__PURE__*/_react.default.createElement(_reactLabel.Root, {
    htmlFor: id,
    className: (0, _tailwindMerge.twMerge)('mb-1.5 block font-medium text-gray-900', sizeStyles[size].label, error && 'text-red-600', required && 'after:ml-0.5 after:text-red-500 after:content-["*"]', disabled && 'opacity-50')
  }, label), /*#__PURE__*/_react.default.createElement("div", {
    className: "flex items-center gap-4"
  }, /*#__PURE__*/_react.default.createElement(_reactSlider.Root, _extends({
    ref: ref,
    id: id,
    value: sliderValue,
    defaultValue: sliderDefaultValue,
    min: min,
    max: max,
    step: step,
    onValueChange: handleValueChange,
    onValueCommit: handleValueCommit,
    disabled: disabled,
    name: name,
    className: "relative flex w-full touch-none select-none items-center"
  }, rest), /*#__PURE__*/_react.default.createElement(_reactSlider.Track, {
    className: (0, _tailwindMerge.twMerge)('relative grow rounded-full', sizeStyles[size].track, variantStyles[variant].track, disabled && 'opacity-50')
  }, /*#__PURE__*/_react.default.createElement(_reactSlider.Range, {
    className: (0, _tailwindMerge.twMerge)('absolute rounded-full', sizeStyles[size].track, variantStyles[variant].range, disabled && 'opacity-50')
  })), /*#__PURE__*/_react.default.createElement(_reactSlider.Thumb, {
    className: (0, _tailwindMerge.twMerge)('block rounded-full border-2 bg-white shadow-sm transition-colors', 'focus:outline-none focus:ring-2 focus:ring-offset-2', 'disabled:pointer-events-none disabled:opacity-50', sizeStyles[size].thumb, variantStyles[variant].thumb)
  })), /*#__PURE__*/_react.default.createElement("output", {
    htmlFor: id,
    className: (0, _tailwindMerge.twMerge)('w-12 text-right text-gray-900', sizeStyles[size].label, disabled && 'opacity-50')
  }, value ?? defaultValue)), (helperText || error) && /*#__PURE__*/_react.default.createElement("p", {
    className: (0, _tailwindMerge.twMerge)('mt-1.5', sizeStyles[size].helperText, error ? 'text-red-600' : 'text-gray-500')
  }, error || helperText));
});
RangeSlider.displayName = 'RangeSlider';
var _default = exports.default = RangeSlider;