armtek-uikit-react 1.0.267 → 1.0.268

package/lib/esm/ui/Form/FormControls/const.js

@@ -0,0 +1,6 @@
+const FORM_CONTROLS_CLASSNAME = "arm-form-controls";
+const FORM_CONTROLS_SKIP_REPLACE_CLASSNAME = "_skip_replace";
+export {
+  FORM_CONTROLS_CLASSNAME,
+  FORM_CONTROLS_SKIP_REPLACE_CLASSNAME
+};

package/lib/esm/ui/Form/FormControls/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FormControls';
+export { type FormControlsProps } from './FormControls';

package/lib/esm/ui/Form/FormControls/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./FormControls.js";
+export {
+  default2 as default
+};

package/lib/esm/ui/Form/FormControls.d.ts

@@ -0,0 +1 @@
+export * from './FormControls/index'

package/lib/esm/ui/Form/FormControls.js

@@ -0,0 +1 @@
+export * from './FormControls/index.js'

package/lib/esm/ui/Form/Interval/Interval.d.ts

@@ -0,0 +1,14 @@
+import { TextFieldProps } from '../TextField/TextField';
+type OwnProps<ValueType = number | number[]> = {
+    min: number;
+    max: number;
+    value?: ValueType;
+    onChange?: (value: ValueType) => void;
+    labelStart?: string;
+    labelEnd?: string;
+    defaultValue?: ValueType;
+    range?: boolean;
+};
+export type IntervalProps<ValueType = number | number[]> = OwnProps<ValueType> & Omit<TextFieldProps, keyof OwnProps>;
+declare function Interval<ValueType = number | number[]>(props: IntervalProps<ValueType>): import("react/jsx-runtime").JSX.Element;
+export default Interval;

package/lib/esm/ui/Form/Interval/Interval.js

@@ -0,0 +1,76 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { TextFieldContainer, TextFieldInput } from "../TextField/TextField.js";
+import HelperText from "../../HelperText/HelperText.js";
+function Interval(props) {
+  const {
+    value,
+    defaultValue,
+    labelStart,
+    labelEnd,
+    onChange,
+    helperText,
+    error,
+    disabled,
+    min = 0,
+    max = 0,
+    range,
+    ...inputProps
+  } = props;
+  const [focused, setFocused] = useState(false);
+  const [currentMin, setCurrentMin] = useState(min);
+  const [currentMax, setCurrentMax] = useState(!range ? min : max);
+  const handleChange = (v, type) => {
+    if (type === "max") {
+      setCurrentMax(v);
+      onChange == null ? void 0 : onChange([Array.isArray(value) && value.length === 2 ? value[0] : min, v]);
+      return;
+    }
+    if (!range) {
+      setCurrentMax(v);
+      if (onChange) onChange(v);
+    } else {
+      v = v < min ? min : v;
+      setCurrentMin(v);
+      if (onChange) {
+        const changeValue = [v, Array.isArray(value) && value.length === 2 ? value[1] : max];
+        onChange(changeValue);
+      }
+    }
+  };
+  const handleFocus = () => {
+    setFocused(true);
+  };
+  const handleBlur = () => {
+    setFocused(false);
+  };
+  const handleMin = (e) => {
+    let val = 0;
+    if (e.target.value) val = parseInt(e.target.value);
+    if (val > max) return;
+    handleChange(val, "min");
+  };
+  const handleMax = (e) => {
+    let val = max;
+    if (e.target.value) val = parseInt(e.target.value);
+    val = val > max ? max : val;
+    handleChange(val, "max");
+  };
+  let realMin = currentMin;
+  let realMax = currentMax;
+  if (value !== void 0 && Array.isArray(value) && value.length === 2) {
+    realMin = value[0];
+    realMax = value[1];
+  }
+  if (!range) realMin = value !== void 0 ? value : currentMax;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { "data-testid": "interval", children: [
+    /* @__PURE__ */ jsx(TextFieldContainer, { focused, error, disabled, size: inputProps.size, variant: inputProps.variant, children: /* @__PURE__ */ jsxs("div", { className: "arm-interval", children: [
+      /* @__PURE__ */ jsx("div", { className: "arm-interval__item", children: /* @__PURE__ */ jsx(TextFieldInput, { ...inputProps, "data-testid": "interval-input-min", value: realMin, label: labelStart, type: "text", onFocus: handleFocus, onBlur: handleBlur, focused: true, onChange: handleMin }) }),
+      range && /* @__PURE__ */ jsx("div", { className: "arm-interval__item", children: /* @__PURE__ */ jsx(TextFieldInput, { ...inputProps, "data-testid": "interval-input-max", value: realMax, label: labelEnd, type: "text", onFocus: handleFocus, onBlur: handleBlur, className: "arm-interval__end", focused: true, onChange: handleMax }) })
+    ] }) }),
+    helperText && /* @__PURE__ */ jsx(HelperText, { className: "arm-interval__helper", error, children: helperText })
+  ] }) });
+}
+export {
+  Interval as default
+};

package/lib/esm/ui/Form/Interval/IntervalSlide.d.ts

@@ -0,0 +1,5 @@
+import { IntervalProps } from './Interval';
+import { SliderProps } from '../../Slider/Slider';
+type PropsType<ValueType = number | number[]> = Omit<IntervalProps<ValueType>, 'color' | 'step'> & Partial<Pick<SliderProps<ValueType>, 'color' | 'step'>>;
+declare function IntervalSlide<ValueType = number | number[]>(props: PropsType<ValueType>): import("react/jsx-runtime").JSX.Element;
+export default IntervalSlide;

package/lib/esm/ui/Form/Interval/IntervalSlide.js

@@ -0,0 +1,29 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import Interval from "./Interval.js";
+import { useState } from "react";
+import Slider from "../../Slider/Slider.js";
+function IntervalSlide(props) {
+  const {
+    onChange,
+    color,
+    step,
+    ...restProps
+  } = props;
+  const defaultValue = restProps.defaultValue || (restProps.range ? [restProps.min, restProps.max] : restProps.min !== void 0 ? restProps.min : 0);
+  const [currentValue, setCurrentValue] = useState(defaultValue);
+  const handleChange = (value) => {
+    let newValue = value;
+    if (onChange) onChange(newValue);
+  };
+  const handleSlide = (value) => {
+    handleChange(value);
+    setCurrentValue(value);
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Interval, { value: currentValue, ...restProps, onChange: handleSlide }),
+    /* @__PURE__ */ jsx("div", { className: "arm-intervalslide__slider", children: /* @__PURE__ */ jsx(Slider, { min: props.min, max: props.max, disabled: props.disabled, color, value: restProps.value !== void 0 ? restProps.value : currentValue, size: props.size, onChange: handleSlide, range: props.range, step }) })
+  ] }) });
+}
+export {
+  IntervalSlide as default
+};

package/lib/esm/ui/Form/Interval/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Interval';
+export { default as IntervalSlide } from './IntervalSlide';
+export { type IntervalProps } from './Interval';

package/lib/esm/ui/Form/Interval/index.js

@@ -0,0 +1,6 @@
+import { default as default2 } from "./Interval.js";
+import { default as default3 } from "./IntervalSlide.js";
+export {
+  default3 as IntervalSlide,
+  default2 as default
+};

package/lib/esm/ui/Form/Interval.d.ts

@@ -0,0 +1,2 @@
+export * from './Interval/index'
+export { default } from './Interval/index'

package/lib/esm/ui/Form/Interval.js

@@ -0,0 +1,2 @@
+export * from './Interval/index.js'
+export { default } from './Interval/index.js'

package/lib/esm/ui/Form/Password/Password.d.ts

@@ -0,0 +1,20 @@
+export declare const Password: import("react").ForwardRefExoticComponent<{
+    label?: string;
+    size?: Exclude<import("../../../types/theme").SizeType, "extraLarge" | "medium">;
+    variant?: import("../../../types/theme").VariantType;
+    error?: boolean;
+    errorTooltip?: string;
+    success?: boolean;
+    helperText?: string | import("react").ReactNode;
+    endAdornment?: string | import("react").ReactNode;
+    multiline?: boolean;
+    focused?: boolean;
+    editable?: boolean;
+    classes?: Partial<{
+        input: string;
+        root: string;
+        wrapper: string;
+    }>;
+    WrapperProps?: import("react").ComponentPropsWithoutRef<"div">;
+} & Omit<import("react").InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
+export default Password;

package/lib/esm/ui/Form/Password/Password.js

@@ -0,0 +1,25 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { TextField } from "../TextField/TextField.js";
+import { forwardRef, useState, useRef } from "react";
+import ButtonIcon from "../../ButtonIcon/ButtonIcon.js";
+const Password = forwardRef((props, ref) => {
+  let {
+    onChange,
+    ...restProps
+  } = props;
+  let [value, setValue] = useState("");
+  let [isPassword, setIsPassword] = useState(true);
+  const inputRef = useRef(ref);
+  const handleChange = (e) => {
+    setValue(e.target.value);
+    if (onChange) onChange(e);
+  };
+  const handleClick = () => {
+    setIsPassword((prev) => !prev);
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(TextField, { value, ref: inputRef, ...restProps, type: isPassword ? "password" : "text", onChange: handleChange, endAdornment: /* @__PURE__ */ jsx(ButtonIcon, { size: "medium", variant: "transparent", color: "neutral", onClick: handleClick, children: /* @__PURE__ */ jsx("span", { className: "material_icon", children: isPassword ? "visibility_off" : "visibility" }) }) }) });
+});
+export {
+  Password,
+  Password as default
+};

package/lib/esm/ui/Form/Password/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Password';

package/lib/esm/ui/Form/Password/index.js

@@ -0,0 +1,4 @@
+import { Password } from "./Password.js";
+export {
+  Password as default
+};

package/lib/esm/ui/Form/Password.d.ts

@@ -0,0 +1,2 @@
+export * from './Password/index'
+export { default } from './Password/index'

package/lib/esm/ui/Form/Password.js

@@ -0,0 +1,2 @@
+export * from './Password/index.js'
+export { default } from './Password/index.js'

package/lib/esm/ui/Form/Period/Period.d.ts

@@ -0,0 +1,32 @@
+import { TextFieldProps } from '../TextField/TextField';
+import { DatePickerProps } from '../DatePicker/DatePicker';
+export type PeriodChangeEvent = (Event & {
+    target: {
+        value: [Date | null, Date | null];
+        name: string;
+    };
+});
+export type PeriodProps = {
+    onChange?: (e: PeriodChangeEvent) => void;
+    value?: [Date | null, Date | null];
+    defaultValue?: [Date | null, Date | null];
+    disableSameDate?: boolean;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    showMonthDropdown?: boolean;
+    showYearDropdown?: boolean;
+    datePickerProps?: DatePickerProps;
+} & Omit<TextFieldProps, 'value' | 'onChange' | 'defaultValue'>;
+export declare function getPeriodDisplay(date1: Date | null | undefined, date2: Date | null | undefined): string;
+declare const Period: import("react").ForwardRefExoticComponent<{
+    onChange?: (e: PeriodChangeEvent) => void;
+    value?: [Date | null, Date | null];
+    defaultValue?: [Date | null, Date | null];
+    disableSameDate?: boolean;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    showMonthDropdown?: boolean;
+    showYearDropdown?: boolean;
+    datePickerProps?: DatePickerProps;
+} & Omit<TextFieldProps, "onChange" | "defaultValue" | "value"> & import("react").RefAttributes<unknown>>;
+export default Period;

package/lib/esm/ui/Form/Period/Period.js

@@ -0,0 +1,140 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { TextField } from "../TextField/TextField.js";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import ButtonIcon from "../../ButtonIcon/ButtonIcon.js";
+import Card from "../../Card/Card.js";
+import DatePicker from "../DatePicker/DatePicker.js";
+import { DateService, isDateEqual, isDateBigger } from "../../../lib/services/DateService.js";
+import { AdornmentContainer } from "../../Adornment/Adornment.js";
+import { Popper } from "../../Popper/Popper.js";
+import "@popperjs/core";
+import "clsx";
+const DELIMITER = " - ";
+const format = "dd.MM.yyyy";
+function getPeriodDisplay(date1, date2) {
+  if (date1 && date2) return DateService(date1).format(format) + DELIMITER + DateService(date2).format(format);
+  return "";
+}
+function validateDate(date, minDate, maxDate) {
+  const startParts = date.split(".");
+  const startTimeStamp = Date.parse(`${startParts[2]}-${startParts[1]}-${startParts[0]}`);
+  if (isNaN(startTimeStamp) === false) {
+    const startDate = new Date(startTimeStamp);
+    if (minDate && isDateBigger(minDate, startDate)) return null;
+    else if (maxDate && isDateBigger(startDate, maxDate)) return null;
+    return startDate;
+  }
+  return null;
+}
+const Period = forwardRef((props, ref) => {
+  const {
+    onChange,
+    onInput,
+    maxDate,
+    minDate,
+    disableSameDate,
+    value,
+    defaultValue,
+    showYearDropdown,
+    showMonthDropdown,
+    datePickerProps,
+    disabled,
+    ...restProps
+  } = props;
+  const [active, setActive] = useState(false);
+  const [currentValue, setCurrentValue] = useState(defaultValue || [null, null]);
+  const displayText = defaultValue ? getPeriodDisplay(defaultValue[0], defaultValue[1]) : "";
+  const [textValue, setTextValue] = useState(displayText);
+  const btnRef = useRef();
+  const [startValue, endValue] = value || [];
+  useEffect(() => {
+    if (startValue && endValue) setTextValue(getPeriodDisplay(startValue, endValue));
+    else if (startValue === null && endValue === null) setTextValue("");
+  }, [startValue, endValue]);
+  const handleClick = (e) => {
+    e.stopPropagation();
+    setActive((prev) => !prev);
+  };
+  const handleSelect = (date) => {
+    if (disabled) return;
+    if (date[0] && date[1] && disableSameDate && isDateEqual(date[0], date[1])) {
+      setTextValue("");
+      return;
+    }
+    setCurrentValue(date);
+    if (date[0] && date[1]) setTextValue(getPeriodDisplay(date[0], date[1]));
+    if (date[0] && date[1]) setActive(false);
+    if (onChange) {
+      const e = new Event("input", {
+        bubbles: true
+      });
+      Object.defineProperty(e, "target", {
+        writable: false,
+        value: {
+          name: props.name,
+          value: date
+        }
+      });
+      onChange(e);
+    }
+  };
+  const handleChange = (e) => {
+    if (disabled) return;
+    let value2 = e.target.value;
+    const bs = (textValue.endsWith(".") || textValue.endsWith(" ") || textValue.endsWith("-")) && textValue.length > value2.length;
+    if (!bs) {
+      value2 = value2.replace(/[^\d -.]/g, "").replace(/^(\d{2})$/, "$1.").replace(/^(\d{2})(\d)$/, "$1.$2").replace(/^(\d{2})\.(\d{2})$/, "$1.$2.").replace(/^(\d{2})\.(\d{2})(\d)$/, "$1.$2.$3").replace(/^(\d{2})\.(\d{2})\.(\d{4})$/, "$1.$2.$3" + DELIMITER).replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2})$`), `$1.$2.$3${DELIMITER}$4.`).replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2})(d)$`), `$1.$2.$3${DELIMITER}$4.$5`).replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2}).(\\d{2})$`), "$1.$2.$3 - $4.$5.").replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2}).(\\d{2})(d)$`), "$1.$2.$3 - $4.$5.$6").replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2}).(\\d{2}).(\\d{4})$`), "$1.$2.$3 - $4.$5.$6").replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2}).(\\d{2}).(\\d{4})(\\d)$`), "$1.$2.$3 - $4.$5.$6");
+    }
+    let startDateValid = null;
+    let endDateValid = null;
+    const valueParts = value2.split(DELIMITER);
+    if (valueParts[0].match(/^\d{2}\.\d{2}\.\d{4}$/)) {
+      startDateValid = validateDate(valueParts[0], minDate, maxDate);
+      if (!startDateValid) {
+        setTextValue("");
+        handleSelect([null, null]);
+        return;
+      }
+    }
+    setTextValue(value2);
+    setCurrentValue([null, null]);
+    if (value2.match(new RegExp(`\\d{2}\\.\\d{2}\\.\\d{4}${DELIMITER}\\d{2}\\.\\d{2}\\.\\d{4}`))) {
+      if (valueParts.length === 2) {
+        endDateValid = validateDate(valueParts[1], minDate, maxDate);
+        if (!endDateValid) {
+          setTextValue("");
+        }
+      }
+    }
+    if (startDateValid && endDateValid && startDateValid.getTime() <= endDateValid.getTime()) {
+      handleSelect([startDateValid, endDateValid]);
+    }
+  };
+  const handleBlur = (e) => {
+    setActive(false);
+    const value2 = e.target.value;
+    const valueParts = value2.split(DELIMITER);
+    const startDateValid = valueParts[0] ? validateDate(valueParts[0], minDate, maxDate) : null;
+    const endDateValid = valueParts[1] ? validateDate(valueParts[1], minDate, maxDate) : null;
+    if (!startDateValid || !endDateValid || startDateValid && endDateValid && endDateValid.getTime() < startDateValid.getTime()) {
+      setTextValue("");
+      handleSelect([null, null]);
+    }
+  };
+  const handleClickOutside = (e) => {
+    if (!e.target.closest("[data-calendar-btn]") && !e.target.closest(".arm-datepicker__select-option")) setActive(false);
+  };
+  let realValue = Array.isArray(props.value) ? props.value : currentValue;
+  const endAdornment = /* @__PURE__ */ jsxs(AdornmentContainer, { children: [
+    restProps.endAdornment,
+    /* @__PURE__ */ jsx(ButtonIcon, { "data-calendar-btn": true, size: "medium", "data-testid": "period-btn", variant: "transparent", color: "neutral", disabled, onClick: handleClick, children: /* @__PURE__ */ jsx("span", { className: "material_icon", ref: btnRef, children: "calendar_today" }) })
+  ] });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "arm-period", "data-testid": "period", children: [
+    /* @__PURE__ */ jsx(TextField, { ref, placeholder: "дд.мм.гггг - дд.мм.гггг", ...restProps, disabled, value: textValue, onBlur: handleBlur, onChange: handleChange, onFocus: () => setActive(false), autoComplete: "off", endAdornment }),
+    active && /* @__PURE__ */ jsx(Popper, { anchorEl: btnRef.current, open: active, placement: "bottom-end", children: /* @__PURE__ */ jsx(Card, { className: "arm-period__picker", "data-testid": "period_card", children: /* @__PURE__ */ jsx(DatePicker, { onClickOutside: handleClickOutside, onChange: handleSelect, selectsRange: true, selected: realValue[0], startDate: realValue[0], endDate: realValue[1], minDate: minDate || void 0, maxDate: maxDate || void 0, showMonthDropdown, showYearDropdown, ...datePickerProps }) }) })
+  ] }) });
+});
+export {
+  Period as default,
+  getPeriodDisplay
+};

package/lib/esm/ui/Form/Period/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Period';
+export { type PeriodChangeEvent } from './Period';

package/lib/esm/ui/Form/Period/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./Period.js";
+export {
+  default2 as default
+};

package/lib/esm/ui/Form/Period.d.ts

@@ -0,0 +1,2 @@
+export * from './Period/index'
+export { default } from './Period/index'

package/lib/esm/ui/Form/Period.js

@@ -0,0 +1,2 @@
+export * from './Period/index.js'
+export { default } from './Period/index.js'

package/lib/esm/ui/Form/PeriodSelect/PeriodSelect.d.ts

@@ -0,0 +1,2 @@
+declare const PeriodSelect: () => import("react/jsx-runtime").JSX.Element;
+export default PeriodSelect;

package/lib/esm/ui/Form/PeriodSelect/PeriodSelect.js

@@ -0,0 +1,15 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import DatePicker from "../DatePicker/DatePicker.js";
+import { useState } from "react";
+const PeriodSelect = () => {
+  const [startDate, setStartDate] = useState(/* @__PURE__ */ new Date());
+  const [endDate, setEndDate] = useState(null);
+  const handleChange = (date) => {
+    setStartDate(date[0]);
+    setEndDate(date[1]);
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(DatePicker, { selected: startDate, onChange: handleChange, startDate, endDate, selectsRange: true }) });
+};
+export {
+  PeriodSelect as default
+};

package/lib/esm/ui/Form/PeriodSelect/index.d.ts

@@ -0,0 +1 @@
+export { default } from './PeriodSelect';

package/lib/esm/ui/Form/PeriodSelect/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./PeriodSelect.js";
+export {
+  default2 as default
+};

package/lib/esm/ui/Form/PeriodSelect.d.ts

@@ -0,0 +1,2 @@
+export * from './PeriodSelect/index'
+export { default } from './PeriodSelect/index'

package/lib/esm/ui/Form/PeriodSelect.js

@@ -0,0 +1,2 @@
+export * from './PeriodSelect/index.js'
+export { default } from './PeriodSelect/index.js'

package/lib/esm/ui/Form/Radio/Radio.d.ts

@@ -0,0 +1,3 @@
+import { CheckboxProps } from '../Checkbox/Checkbox';
+declare const Radio: (props: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export default Radio;

package/lib/esm/ui/Form/Radio/Radio.js

@@ -0,0 +1,9 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import Checkbox from "../Checkbox/Checkbox.js";
+import clsx from "clsx";
+const Radio = (props) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Checkbox, { ...props, className: clsx(props.className, "arm-radio"), type: "radio" }) });
+};
+export {
+  Radio as default
+};

package/lib/esm/ui/Form/Radio/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Radio';

package/lib/esm/ui/Form/Radio/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./Radio.js";
+export {
+  default2 as default
+};

package/lib/esm/ui/Form/Radio.d.ts

@@ -0,0 +1,2 @@
+export * from './Radio/index'
+export { default } from './Radio/index'

package/lib/esm/ui/Form/Radio.js

@@ -0,0 +1,2 @@
+export * from './Radio/index.js'
+export { default } from './Radio/index.js'

package/lib/esm/ui/Form/Rating/Rating.d.ts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef, JSX } from 'react';
+import { SizeType } from '../../../types/theme';
+type BaseProps = {
+    size?: Exclude<SizeType, 'extraLarge'>;
+    value?: number | null;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    error?: boolean;
+    slots?: {
+        Icon?: JSX.ElementType;
+    };
+    slotsProps?: {
+        Icon?: {
+            active: boolean;
+            index: number;
+        };
+    };
+    disabled?: boolean;
+    name?: string;
+};
+export type RatingProps = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>;
+declare const Rating: (props: RatingProps) => import("react/jsx-runtime").JSX.Element;
+export default Rating;

package/lib/esm/ui/Form/Rating/Rating.js

@@ -0,0 +1,50 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useState, createElement } from "react";
+import clsx from "clsx";
+import "../../Icon/Icon.js";
+import { Mi } from "../../Icon/Mi.js";
+import { Mis } from "../../Icon/Mis.js";
+import { RATING_CLASSES } from "./const.js";
+const Rating = (props) => {
+  let {
+    size = "large",
+    onChange,
+    slots,
+    slotsProps,
+    error,
+    name,
+    className,
+    onMouseLeave,
+    ...restProps
+  } = props;
+  let [value, setValue] = useState(props.defaultValue || 0);
+  let [hovered, setHovered] = useState(0);
+  let realValue = props.value !== void 0 ? props.value === null ? 0 : props.value : value;
+  const handleClick = (index) => () => {
+    setValue(index);
+    if (onChange) onChange(index);
+  };
+  const handleMouseEnter = (index) => () => {
+    setHovered(index);
+  };
+  const handleLeaveRating = (e) => {
+    setHovered(realValue);
+    onMouseLeave == null ? void 0 : onMouseLeave(e);
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { "data-testid": "rating", ...restProps, className: clsx("arm-rating", className), onMouseLeave: handleLeaveRating, children: [
+    /* @__PURE__ */ jsx("input", { value: realValue, name, type: "hidden", "data-testid": "rating-input" }),
+    [...Array(5)].map((_, index) => {
+      const active = index + 1 <= hovered || index + 1 <= realValue;
+      let IconComponent = active ? Mis : Mi;
+      return /* @__PURE__ */ jsx("div", { className: "arm-rating__item_container", onClick: handleClick(index + 1), onMouseEnter: handleMouseEnter(index + 1), "data-testid": "rating-item-btn", children: (slots == null ? void 0 : slots.Icon) ? /* @__PURE__ */ createElement(slots.Icon, { ...slotsProps == null ? void 0 : slotsProps.Icon, active, index: index + 1, key: index }) : /* @__PURE__ */ jsx(IconComponent, { "data-testid": "rating-icon", icon: "star", className: clsx({
+        "arm-rating__item_error": !!error,
+        [RATING_CLASSES.active]: active,
+        "arm-rating__item_disabled": !!restProps.disabled,
+        ["arm-rating__item_" + size]: !!size
+      }, RATING_CLASSES.item) }) }, index);
+    })
+  ] }) });
+};
+export {
+  Rating as default
+};

package/lib/esm/ui/Form/Rating/const.d.ts

@@ -0,0 +1,4 @@
+export declare const RATING_CLASSES: {
+    active: string;
+    item: string;
+};

package/lib/esm/ui/Form/Rating/const.js

@@ -0,0 +1,7 @@
+const RATING_CLASSES = {
+  active: "arm-rating__item_active",
+  item: "arm-rating__item"
+};
+export {
+  RATING_CLASSES
+};

package/lib/esm/ui/Form/Rating/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Rating';
+export { type RatingProps } from './Rating';

package/lib/esm/ui/Form/Rating/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./Rating.js";
+export {
+  default2 as default
+};

package/lib/esm/ui/Form/Rating.d.ts

@@ -0,0 +1,2 @@
+export * from './Rating/index'
+export { default } from './Rating/index'

package/lib/esm/ui/Form/Rating.js

@@ -0,0 +1,2 @@
+export * from './Rating/index.js'
+export { default } from './Rating/index.js'