@cleen/ui 0.1.0

package/src/components/rangeSlider/RangeSlider.tsx

@@ -0,0 +1,366 @@
+import { InfoLabels } from '@/components/infoLabels';
+import type { InfoLabelsProps } from '@/components/infoLabels/InfoLabels';
+import { Tooltip, type TooltipProps } from '@/components/tooltip/Tooltip';
+import { cn } from '@cleen/ui-core';
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+
+export interface RangeSliderProps {
+  key?: string | number;
+  minValue?: number;
+  maxValue?: number;
+  step?: number;
+  value?: [number, number];
+  defaultValue?: [number, number];
+  onChange?: (value: [number, number]) => void;
+  onChangeEnd?: (value: [number, number]) => void;
+  className?: string;
+  classNames?: {
+    container?: string;
+    track?: string;
+    filledTrack?: string;
+    thumb?: string;
+  };
+  style?: CSSProperties;
+  styles?: {
+    container?: CSSProperties;
+    track?: CSSProperties;
+    filledTrack?: CSSProperties;
+    thumb?: CSSProperties;
+  };
+  disabled?: boolean;
+  label?: ReactNode;
+  labels?: {
+    minLabel?: ReactNode;
+    maxLabel?: ReactNode;
+  };
+  tooltips?: {
+    min?: TooltipProps;
+    max?: TooltipProps;
+    shared?: TooltipProps;
+  };
+  infoLabels?: InfoLabelsProps;
+}
+
+/**
+ * Dual-handle range slider for selecting a numeric interval.
+ *
+ * - Supports controlled mode via `value` (`[min, max]`) + `onChange`, and uncontrolled via `defaultValue`.
+ * - Configure bounds with `minValue` / `maxValue` and increment with `step`.
+ * - Attach tooltip configuration to each thumb via `tooltips.min`, `tooltips.max`, or a shared preset via `tooltips.shared`.
+ * - Accepts `classNames` and `styles` for keys: `container`, `track`, `filledTrack`, `thumb`, `infoLabels`.
+ */
+export const RangeSlider: React.FC<RangeSliderProps> = ({
+  minValue = 0,
+  maxValue = 100,
+  step = 1,
+  defaultValue = [minValue, maxValue],
+  value,
+  onChange,
+  onChangeEnd,
+  className,
+  classNames,
+  style,
+  styles,
+  disabled = false,
+  label,
+  labels,
+  tooltips,
+  infoLabels,
+}) => {
+  const [internalValue, setInternalValue] = useState<[number, number]>(
+    defaultValue ?? [minValue, maxValue]
+  );
+  const sliderValue = value !== undefined ? value : internalValue;
+  const trackRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef<null | 'min' | 'max'>(null);
+
+  const clamp = (val: number) => {
+    const stepped = Math.round((val - minValue) / step) * step + minValue;
+    return Math.min(maxValue, Math.max(minValue, stepped));
+  };
+
+  const percentMin =
+    ((sliderValue[0] - minValue) / (maxValue - minValue)) * 100;
+  const percentMax =
+    ((sliderValue[1] - minValue) / (maxValue - minValue)) * 100;
+
+  const setValue = useCallback(
+    (val: [number, number]) => {
+      const clamped: [number, number] = [
+        clamp(Math.min(val[0], val[1])),
+        clamp(Math.max(val[0], val[1])),
+      ];
+
+      if (value === undefined) {
+        setInternalValue(clamped);
+      }
+
+      onChange?.(clamped);
+    },
+    [minValue, maxValue, step, value, onChange]
+  );
+
+  const getValueFromPosition = (clientX: number) => {
+    const track = trackRef.current;
+
+    if (!track) {
+      return minValue;
+    }
+
+    const rect = track.getBoundingClientRect();
+    const ratio = (clientX - rect.left) / rect.width;
+    return clamp(minValue + ratio * (maxValue - minValue));
+  };
+
+  const handleThumbMouseDown =
+    (thumb: 'min' | 'max') => (e: React.MouseEvent) => {
+      if (disabled) {
+        return;
+      }
+
+      e.preventDefault();
+
+      dragging.current = thumb;
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    };
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!dragging.current) {
+      return;
+    }
+
+    const pos = getValueFromPosition(e.clientX);
+
+    if (dragging.current === 'min') {
+      setValue([pos, sliderValue[1]]);
+    } else {
+      setValue([sliderValue[0], pos]);
+    }
+  };
+
+  const handleMouseUp = (e: MouseEvent) => {
+    const pos = getValueFromPosition(e.clientX);
+    const sliderV: [number, number] =
+      dragging.current === 'min'
+        ? [pos, sliderValue[1]]
+        : [sliderValue[0], pos];
+
+    dragging.current = null;
+    onChangeEnd?.(sliderV);
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  };
+
+  const handleTrackClick = (e: React.MouseEvent) => {
+    if (disabled) {
+      return;
+    }
+
+    const pos = getValueFromPosition(e.clientX);
+
+    const distMin = Math.abs(pos - sliderValue[0]);
+    const distMax = Math.abs(pos - sliderValue[1]);
+
+    if (distMin < distMax) {
+      setValue([pos, sliderValue[1]]);
+    } else {
+      setValue([sliderValue[0], pos]);
+    }
+  };
+
+  // Touch support
+  const handleThumbTouchStart =
+    (thumb: 'min' | 'max') => (e: React.TouchEvent) => {
+      if (disabled) {
+        return;
+      }
+      e.preventDefault();
+      dragging.current = thumb;
+      document.addEventListener('touchmove', handleTouchMove);
+      document.addEventListener('touchend', handleTouchEnd);
+    };
+
+  const handleTouchMove = (e: TouchEvent) => {
+    if (!dragging.current) {
+      return;
+    }
+
+    if (e.touches.length > 0) {
+      const pos = getValueFromPosition(e.touches[0].clientX);
+
+      if (dragging.current === 'min') {
+        setValue([pos, sliderValue[1]]);
+      } else {
+        setValue([sliderValue[0], pos]);
+      }
+    }
+  };
+
+  const handleTouchEnd = (e: TouchEvent) => {
+    const pos = getValueFromPosition(e.touches[0].clientX);
+    const sliderV: [number, number] =
+      dragging.current === 'min'
+        ? [pos, sliderValue[1]]
+        : [sliderValue[0], pos];
+
+    dragging.current = null;
+    onChangeEnd?.(sliderV);
+    document.removeEventListener('touchmove', handleTouchMove);
+    document.removeEventListener('touchend', handleTouchEnd);
+  };
+
+  useEffect(() => {
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('touchmove', handleTouchMove);
+      document.removeEventListener('touchend', handleTouchEnd);
+    };
+  }, []);
+
+  return (
+    <div className={cn('cleen', className)} style={style}>
+      <div
+        className={cn('cleen-w-full', classNames?.container)}
+        style={styles?.container}
+      >
+        {label && (
+          <span className="cleen-font-medium cleen-text-sm cleen-text-gray">
+            {label}
+          </span>
+        )}
+
+        <div
+          ref={trackRef}
+          className={cn(
+            'cleen-relative cleen-w-full cleen-h-8 cleen-touch-none',
+            {
+              'cleen-opacity-60': disabled,
+            },
+            classNames?.track
+          )}
+          style={styles?.track}
+          aria-disabled={disabled}
+          onClick={handleTrackClick}
+        >
+          <div
+            className={cn(
+              'cleen-absolute cleen-left-0 cleen-right-0 cleen-top-1/2 cleen-h-1 cleen-bg-gray/20 dark:cleen-bg-black cleen-rounded-sm -cleen-translate-y-1/2',
+              disabled ? 'cleen-cursor-not-allowed' : 'cleen-cursor-pointer'
+            )}
+          >
+            <div
+              className={cn(
+                'cleen-absolute cleen-top-0 cleen-h-full cleen-bg-primary cleen-rounded-sm',
+                classNames?.filledTrack
+              )}
+              style={{
+                left: `${percentMin}%`,
+                width: `${percentMax - percentMin}%`,
+                ...styles?.filledTrack,
+              }}
+            />
+          </div>
+
+          {/* Min Thumb */}
+          <Tooltip
+            invertColors
+            label={sliderValue[0]}
+            {...tooltips?.shared}
+            {...tooltips?.min}
+            className={cn(
+              'cleen-absolute cleen-top-1/2 -cleen-translate-y-1/2',
+              tooltips?.shared?.className,
+              tooltips?.min?.className
+            )}
+            style={{
+              left: `calc(${percentMin}% - 8px)`,
+              ...tooltips?.shared?.style,
+              ...tooltips?.min?.style,
+            }}
+          >
+            <div
+              className={cn(
+                'cleen-size-4 cleen-bg-white dark:cleen-bg-black cleen-border cleen-border-gray/60 cleen-rounded-full cleen-transition-all cleen-duration-200 hover:cleen-scale-125 hover:cleen-border-primary',
+                disabled ? 'cleen-cursor-not-allowed' : 'cleen-cursor-pointer',
+                classNames?.thumb
+              )}
+              style={styles?.thumb}
+              tabIndex={disabled ? -1 : 0}
+              role="slider"
+              aria-valuenow={sliderValue[0]}
+              aria-valuemin={minValue}
+              aria-valuemax={sliderValue[1]}
+              aria-disabled={disabled}
+              onMouseDown={handleThumbMouseDown('min')}
+              onTouchStart={handleThumbTouchStart('min')}
+            />
+          </Tooltip>
+
+          {/* Max Thumb */}
+          <Tooltip
+            invertColors
+            label={sliderValue[1]}
+            {...tooltips?.shared}
+            {...tooltips?.max}
+            className={cn(
+              'cleen-absolute cleen-top-1/2 -cleen-translate-y-1/2',
+              tooltips?.shared?.className,
+              tooltips?.max?.className
+            )}
+            style={{
+              left: `calc(${percentMax}% - 8px)`,
+              ...tooltips?.shared?.style,
+              ...tooltips?.max?.style,
+            }}
+          >
+            <div
+              className={cn(
+                'cleen-size-4 cleen-bg-white dark:cleen-bg-black cleen-border cleen-border-gray/60 cleen-rounded-full cleen-transition-all cleen-duration-200 hover:cleen-scale-125 hover:cleen-border-primary',
+                disabled ? 'cleen-cursor-not-allowed' : 'cleen-cursor-pointer',
+                classNames?.thumb
+              )}
+              style={styles?.thumb}
+              tabIndex={disabled ? -1 : 0}
+              role="slider"
+              aria-valuenow={sliderValue[1]}
+              aria-valuemin={sliderValue[0]}
+              aria-valuemax={maxValue}
+              aria-disabled={disabled}
+              onMouseDown={handleThumbMouseDown('max')}
+              onTouchStart={handleThumbTouchStart('max')}
+            />
+          </Tooltip>
+        </div>
+
+        {(labels?.minLabel || labels?.maxLabel) && (
+          <div className="cleen-flex cleen-items-center cleen-justify-between cleen-w-full">
+            {labels?.minLabel && (
+              <span className="cleen-font-medium cleen-text-xs cleen-text-gray">
+                {labels?.minLabel}
+              </span>
+            )}
+
+            {labels?.maxLabel && (
+              <span className="cleen-font-medium cleen-text-xs cleen-text-gray">
+                {labels?.maxLabel}
+              </span>
+            )}
+          </div>
+        )}
+
+        {(infoLabels?.errorMessage ||
+          infoLabels?.infoMessage ||
+          infoLabels?.subtitle) && <InfoLabels {...infoLabels} />}
+      </div>
+    </div>
+  );
+};

package/src/components/rangeSlider/index.ts

@@ -0,0 +1 @@
+export { RangeSlider, type RangeSliderProps } from './RangeSlider';

package/src/components/select/Select.tsx

@@ -0,0 +1,349 @@
+import {
+  InfoLabels,
+  type InfoLabelsProps,
+} from '@/components/infoLabels/InfoLabels';
+import { SelectOption } from '@/components/select/blocks/SelectOption';
+import { SelectSingleValue } from '@/components/select/blocks/SelectSingleValue';
+import { cn } from '@cleen/ui-core';
+import {
+  forwardRef,
+  useState,
+  type ComponentProps,
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+import ReactSelect, {
+  type FilterOptionOption,
+  type GroupBase,
+  type SelectInstance,
+} from 'react-select';
+import { SelectCustomMenuList } from './blocks/SelectCustomMenuList';
+import { SelectNoOptionsMessage } from './blocks/SelectNoOptionsMessage';
+
+export interface SelectProps extends Omit<
+  ComponentPropsWithoutRef<ReactSelect>,
+  'isDisabled'
+> {
+  label?: ReactNode;
+  sublabel?: ReactNode;
+  emboldenOptions?: boolean;
+  disabled?: boolean;
+  labels?: {
+    noDataFound?: string;
+  };
+  infoLabels?: InfoLabelsProps;
+  classNames?: ComponentProps<ReactSelect>['classNames'] & {
+    cleenContainer?: string;
+    labels?: {
+      container?: string;
+      label?: string;
+      sublabel?: string;
+    };
+    inputOuterContainer?: string;
+  };
+  style?: CSSProperties;
+  styles?: ComponentProps<ReactSelect>['styles'] & {
+    cleenContainer?: CSSProperties;
+    labels?: {
+      container?: CSSProperties;
+      label?: CSSProperties;
+      sublabel?: CSSProperties;
+    };
+  };
+  createNewOptionCallback?: (value: string) => void;
+  createNewOptionLabelStringCb?: (inputValue: string) => string;
+}
+
+type OptionWithLabelString = {
+  label?: ReactNode;
+  labelString?: string;
+};
+
+const hasSearchableLabel = (data: unknown): data is OptionWithLabelString =>
+  typeof data === 'object' &&
+  data !== null &&
+  ('labelString' in data || 'label' in data);
+
+/**
+ * Select component is a customizable dropdown select input field that allows users to choose one or more options from a list.
+ */
+export const Select = forwardRef<
+  SelectInstance<unknown, boolean, GroupBase<unknown>>,
+  SelectProps
+>(function Select(
+  {
+    label,
+    sublabel,
+    id,
+    name,
+    required,
+    className,
+    classNames,
+    isLoading = false,
+    disabled,
+    emboldenOptions = false,
+    labels,
+    components,
+    style,
+    styles,
+    infoLabels,
+    createNewOptionCallback,
+    createNewOptionLabelStringCb,
+    ...props
+  },
+  ref
+) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+
+  // Optional filter support for JSX labels
+  const filterOption = (option: FilterOptionOption<unknown>, input: string) => {
+    if (!hasSearchableLabel(option.data)) {
+      return false;
+    }
+
+    const { labelString, label } = option.data;
+
+    if (labelString) {
+      return labelString.toLowerCase().includes(input.toLowerCase());
+    }
+
+    if (typeof label === 'string') {
+      return label.toLowerCase().includes(input.toLowerCase());
+    }
+
+    return false;
+  };
+
+  // Optional label getter
+  const getOptionLabel = (option: unknown) => {
+    if (!hasSearchableLabel(option)) {
+      return '';
+    }
+
+    return (
+      option.labelString ??
+      (typeof option.label === 'string' ? option.label : '')
+    );
+  };
+
+  return (
+    <div className={cn('cleen', className)} style={style}>
+      <div
+        className={cn(
+          'cleen-flex cleen-flex-col cleen-gap-1.5 cleen-rounded-md cleen-w-full cleen-text-gray',
+          classNames?.cleenContainer
+        )}
+        style={styles?.cleenContainer}
+      >
+        {(label || sublabel) && (
+          <div
+            className={cn(
+              'cleen-flex cleen-flex-col cleen-gap-1',
+              classNames?.labels?.container
+            )}
+            style={styles?.labels?.container}
+          >
+            {label && (
+              <label
+                htmlFor={id || name}
+                className={cn(
+                  'cleen-block cleen-mb-1.5 cleen-font-medium cleen-text-gray/90 cleen-text-sm cleen-leading-6',
+                  classNames?.labels?.label
+                )}
+                style={styles?.labels?.label}
+              >
+                {label}
+                {required && (
+                  <span className="cleen-ml-1 cleen-text-error/60">*</span>
+                )}
+              </label>
+            )}
+
+            {sublabel && (
+              <span
+                className={cn(
+                  'cleen-font-normal cleen-text-gray/80 cleen-text-sm',
+                  classNames?.labels?.sublabel
+                )}
+                style={styles?.labels?.sublabel}
+              >
+                {sublabel}
+              </span>
+            )}
+          </div>
+        )}
+
+        <ReactSelect
+          {...(createNewOptionCallback && {
+            menuIsOpen: isMenuOpen,
+            inputValue,
+            onInputChange: e => setInputValue(e),
+            onMenuOpen: () => setIsMenuOpen(true),
+            onMenuClose: () => setIsMenuOpen(false),
+          })}
+          {...(!props.filterOption && { filterOption })}
+          {...(!props.getOptionLabel && { getOptionLabel })}
+          id={id || name}
+          classNames={classNames}
+          isDisabled={disabled}
+          ref={ref}
+          {...props}
+          className={cn(
+            'cleen-shadow-none cleen-font-normal cleen-text-gray cleen-text-sm',
+            classNames?.inputOuterContainer
+          )}
+          styles={{
+            ...styles,
+            control: (base, state) => {
+              const controlStyles = {
+                ...base,
+                minHeight: 44,
+                borderWidth: 1,
+                borderRadius: 8,
+                padding: 3,
+                transition: 'border-color 200ms',
+                fontWeight: emboldenOptions && state.hasValue ? '600' : '400',
+                borderColor: infoLabels?.errorMessage
+                  ? 'rgba(var(--cleen-error), 0.5)'
+                  : 'rgba(var(--cleen-gray), 0.1)',
+                backgroundColor: state.isDisabled
+                  ? 'rgba(var(--cleen-gray), 0.05)'
+                  : 'rgba(var(--cleen-white))',
+                boxShadow: 'none',
+                cursor: 'pointer',
+                caretColor: !createNewOptionCallback
+                  ? 'transparent'
+                  : 'rgba(var(--cleen-gray))',
+                '&:hover': {
+                  borderColor: 'rgba(var(--cleen-gray), 0.3)',
+                },
+              };
+
+              return styles?.control
+                ? styles?.control(controlStyles, state)
+                : controlStyles;
+            },
+            option: (base, state) => {
+              const optionStyles = {
+                ...base,
+                backgroundColor: state.isSelected
+                  ? 'rgba(var(--cleen-primary))'
+                  : 'rgba(var(--cleen-white))',
+                color: state.isSelected
+                  ? 'rgba(var(--cleen-white))'
+                  : 'rgba(var(--cleen-gray))',
+                fontWeight: emboldenOptions ? '600' : '400',
+                '&:hover': !state.isSelected
+                  ? {
+                      backgroundColor: 'rgba(var(--cleen-primary))',
+                      color: 'rgba(var(--cleen-white))',
+                      cursor: 'pointer',
+                    }
+                  : {},
+                p: {
+                  color: state.isSelected
+                    ? 'rgba(var(--cleen-white))'
+                    : 'rgba(var(--cleen-gray), .6)',
+                },
+                '&:hover p': {
+                  color: 'rgba(var(--cleen-white))',
+                },
+                '&:active': {
+                  backgroundColor: 'rgba(var(--cleen-primary))',
+                  color: 'rgba(var(--cleen-white))',
+                },
+              };
+
+              return styles?.option
+                ? styles?.option(optionStyles, state)
+                : optionStyles;
+            },
+            menu: (base, state) => {
+              const menuStyles = {
+                ...base,
+                backgroundColor: 'rgba(var(--cleen-white))',
+                border: '1px solid rgba(var(--cleen-gray), 0.2)',
+                ...styles?.menu,
+              };
+
+              return styles?.menu
+                ? styles?.menu(menuStyles, state)
+                : menuStyles;
+            },
+            menuList: (base, state) => {
+              const menuListStyles = {
+                ...base,
+                '::-webkit-scrollbar': {
+                  width: '6px',
+                  height: '0px',
+                },
+                '::-webkit-scrollbar-track': {
+                  background: 'rgb(var(--cleen-background))',
+                },
+                '::-webkit-scrollbar-thumb': {
+                  background: 'rgba(var(--cleen-gray), .2)',
+                },
+                '::-webkit-scrollbar-thumb:hover': {
+                  background: 'rgba(var(--cleen-gray), .4)',
+                },
+                ...styles?.menuList,
+              };
+
+              return styles?.menuList
+                ? styles?.menuList(menuListStyles, state)
+                : menuListStyles;
+            },
+            singleValue: (base, state) => {
+              const singleValueStyles = {
+                ...base,
+                color: 'rgba(var(--cleen-gray))',
+              };
+
+              return styles?.singleValue
+                ? styles?.singleValue(singleValueStyles, state)
+                : singleValueStyles;
+            },
+            input: (base, state) => {
+              const inputStyles = {
+                ...base,
+                color: 'rgba(var(--cleen-gray))',
+              };
+
+              return styles?.input
+                ? styles?.input(inputStyles, state)
+                : inputStyles;
+            },
+          }}
+          components={{
+            IndicatorSeparator: () => null,
+            SingleValue: props => <SelectSingleValue {...props} />,
+            NoOptionsMessage: props => (
+              <SelectNoOptionsMessage
+                isLoading={isLoading}
+                noDataFound={labels?.noDataFound}
+                {...props}
+              />
+            ),
+            MenuList: props => (
+              <SelectCustomMenuList
+                isLoading={isLoading}
+                inputValue={inputValue}
+                createNewOptionCallback={createNewOptionCallback}
+                createNewOptionLabelStringCb={createNewOptionLabelStringCb}
+                {...props}
+              />
+            ),
+            Option: SelectOption,
+            ...components,
+          }}
+        />
+
+        {(infoLabels?.errorMessage ||
+          infoLabels?.infoMessage ||
+          infoLabels?.subtitle) && <InfoLabels {...infoLabels} />}
+      </div>
+    </div>
+  );
+});