@cleen/ui 0.1.0 → 0.1.1

package/src/components/rangeSlider/RangeSlider.tsx

@@ -1,366 +0,0 @@
-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

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

package/src/components/select/Select.tsx

@@ -1,349 +0,0 @@
-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>
-  );
-});