@redneckz/wildless-cms-uni-blocks 0.14.838 → 0.14.840

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

@@ -2,10 +2,12 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useElementSpace } from '../../hooks/useElementSpace';
+import { type ComponentType } from '../../model/ComponentType';
+import { type ControlProps } from '../../model/ControlProps';
+import { type DisabledProps } from '../../model/DisabledProps';
 import { type LabelProps } from '../../model/HeadlineType';
 import { type IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
-import { type ControlProps } from '../ControlProps';
 import { Icon } from '../Icon/Icon';
 import { type IconName } from '../Icon/IconProps';
 import { renderLabel } from '../Input/renderLabel';
@@ -28,12 +30,10 @@ const SELECT_PROPS: { className: string; iconVersion: IconVersion; isBorder: boo
   isBorder: false,
 };
 
-interface DatePickerProps extends ControlProps<Date>, LabelProps {
-  className?: string;
+interface DatePickerProps extends ControlProps<Date>, ComponentType, LabelProps, DisabledProps {
   minDate?: Date;
   maxDate?: Date;
   valid?: boolean;
-  disabled?: boolean;
 }
 
 export const DatePicker = JSX<DatePickerProps>(

package/src/ui-kit/DatePicker/DatePickerControl.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ControlProps } from '../../model/ControlProps';
 import { type DefaultControlType } from '../../model/DefaultControlType';
 import { getRequiredLabel } from '../../utils/getRequiredLabel';
 import { style } from '../../utils/style';
-import { type ControlProps } from '../ControlProps';
 import { renderErrorText } from '../Input/renderErrorText';
 import { DatePicker } from './DatePicker';
 

package/src/ui-kit/DatePicker/DatePickerInput.tsx

@@ -1,5 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { type ComponentType } from '../../model/ComponentType';
+import { type DisabledProps } from '../../model/DisabledProps';
 import { type IconVersion } from '../../model/IconVersion';
 import { normalizeWithMask } from '../../utils/normalizeWithMask';
 import { style } from '../../utils/style';
@@ -14,14 +16,12 @@ const ICON_PROPS: { name: IconName; iconVersion: IconVersion; width: string; hei
   height: '24',
 };
 
-interface DatePickerInputProps {
+interface DatePickerInputProps extends ComponentType, DisabledProps {
   setSelectedMonth: (selectedMonth: number) => void;
   setSelectedYear: (selectedYear: number) => void;
-  className?: string;
   value?: string;
   onChange?: (value: Date) => void;
   onClick?: () => void;
-  disabled?: boolean;
 }
 
 interface UpdateSelectedDateProps {

package/src/ui-kit/DatePicker/renderDatePickerForm.tsx

@@ -1,3 +1,5 @@
+import { type ControlProps } from '../../model/ControlProps';
+import { type DisabledProps } from '../../model/DisabledProps';
 import { formatDate } from '../../utils/formatDate';
 import { style } from '../../utils/style';
 import { DatePickerInput } from './DatePickerInput';
@@ -14,15 +16,13 @@ export const renderDatePickerForm = ({
   setSelectedMonth,
   setSelectedYear,
   disabled = false,
-}: {
-  handleChangeVisibleCalendar: () => void;
-  value: Date | undefined;
-  valid: boolean;
-  setSelectedMonth: (selectedMonth: number) => void;
-  setSelectedYear: (selectedYear: number) => void;
-  onChange?: (value: Date) => void;
-  disabled?: boolean;
-}) => (
+}: DisabledProps &
+  ControlProps<Date> & {
+    handleChangeVisibleCalendar: () => void;
+    valid: boolean;
+    setSelectedMonth: (selectedMonth: number) => void;
+    setSelectedYear: (selectedYear: number) => void;
+  }) => (
   <DatePickerInput
     onChange={onChange}
     disabled={disabled}

package/src/ui-kit/DatePicker/useDatePickerManager.ts

@@ -1,5 +1,6 @@
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
+import { type ControlProps } from '../../model/ControlProps';
 import { type Option } from '../Select/Option';
 import { getYears } from './getYears';
 import { months } from './months';
@@ -10,15 +11,13 @@ const YEARS_OPTIONS = getYears()
   .reverse()
   .map((key) => ({ key: String(key) }));
 
-interface UseDatePickerManagerParams {
+interface UseDatePickerManagerParams extends ControlProps<Date> {
   onShowCalendar: (bool: boolean) => void;
   showCalendar: boolean;
   selectedMonth: number;
   onMonthSelect: (num: number) => void;
   selectedYear: number;
   onYearSelect: (num: number) => void;
-  onChange?: (date: Date) => void;
-  value?: Date;
 }
 
 export const useDatePickerManager = ({
@@ -108,12 +107,10 @@ const handleChangeMonth = ({
   selectedMonth,
   value,
   onChange,
-}: {
+}: ControlProps<Date> & {
   maxDateOfMonth: number;
   selectedYear: number;
   selectedMonth: number;
-  value?: Date;
-  onChange?: (value: Date) => void;
 }) => {
   value &&
     onChange?.(new Date(selectedYear, selectedMonth, Math.min(maxDateOfMonth, value.getDate())));

package/src/ui-kit/DialogManager/CloseButton.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
 import { type PreventableEvent } from '../PreventableEvent';
 
-interface CloseButtonProps {
-  className?: string;
+interface CloseButtonProps extends ComponentType {
   onClose?: (ev: PreventableEvent) => void;
 }
 

package/src/ui-kit/DialogManager/Dialog.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { type VNode } from '../../model/VNode';
 import { style } from '../../utils/style';
 import { type PreventableEvent } from '../PreventableEvent';
 import { CloseButton } from './CloseButton';
 
-export interface DialogProps {
-  className?: string;
+export interface DialogProps extends ComponentType {
   head?: VNode;
   onClose?: () => void;
   onClick?: (e: PreventableEvent) => void;

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

@@ -1,10 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 import { type ARIAProps } from '../ARIAProps';
 
-export interface FoldableProps extends ARIAProps {
-  className?: string;
-}
+export interface FoldableProps extends ARIAProps, ComponentType {}
 
 // TODO Не особо полезно, в итоге
 export const Foldable = JSX<FoldableProps>(({ className, role = 'tablist', children }) => (

package/src/ui-kit/Foldable/FoldableSection.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { useResizeObserver } from '../../hooks/useResizeObserver';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 
-export interface FoldableSectionProps {
-  className?: string;
+export interface FoldableSectionProps extends ComponentType {
   isUnfolded?: boolean;
 }
 

package/src/ui-kit/FormField/getObjectValidator.tsx

@@ -30,7 +30,7 @@ export const validatorObj: Record<string, Validator> = {
   sufferedFrom: defaultValidator(),
   applierType: defaultValidator(),
   surname: nameValidator('Укажите свою фамилию на кириллице'),
-  name: nameValidator('Укажите своё имя на кириллице'),
+  name: nameValidator('Укажите своё имя на кириллице (без сокращений)'),
   middleName: nameValidator('Укажите своё отчество на кириллице'),
   birthday: defaultValidator('Укажите дату рождения'),
   phone: phoneValidator('Укажите номер телефона'),

package/src/ui-kit/Heading/HeadingProps.ts

@@ -1,3 +1,4 @@
+import { type ComponentType } from '../../model/ComponentType';
 import { type TitleProps } from '../../model/HeadlineType';
 
 /**
@@ -17,7 +18,4 @@ export interface HeadingCommonProps extends TitleProps {
   headingType?: HeadingType;
 }
 
-export interface HeadingProps extends HeadingCommonProps {
-  /** @hidden */
-  className?: string;
-}
+export interface HeadingProps extends HeadingCommonProps, ComponentType {}

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

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useRouter } from '../../external/useRouter';
+import { type ComponentType } from '../../model/ComponentType';
 import { type IconVersion } from '../../model/IconVersion';
 import { projectSettings } from '../../ProjectSettings';
 import { adjustHref } from '../../utils/adjustHref';
@@ -87,7 +88,7 @@ const getInlineStyle = (className?: string, height?: string) =>
     : { height: isOnlyDigits(height) ? `${height}px` : height, width: 'auto' };
 
 // TODO И это тоже
-const Background = JSX<{ className?: string }>(({ className, children }) =>
+const Background = JSX<ComponentType>(({ className, children }) =>
   className ? (
     <div role="img" className={className}>
       {children}

package/src/ui-kit/Icon/IconProps.ts

@@ -1,4 +1,5 @@
 import { type IconName } from '../../icons/IconName';
+import { type ComponentType } from '../../model/ComponentType';
 import { type IconVersion } from '../../model/IconVersion';
 
 export type { IconName };
@@ -38,9 +39,9 @@ export interface IconCompatibilityFields {
   height?: string;
 }
 
-export type IconProps = IconCompatibilityFields & {
-  className?: string;
-  imageClassName?: string;
-  name?: IconName;
-  iconVersion?: IconVersion;
-};
+export type IconProps = IconCompatibilityFields &
+  ComponentType & {
+    imageClassName?: string;
+    name?: IconName;
+    iconVersion?: IconVersion;
+  };

package/src/ui-kit/Img/ImgProps.ts

@@ -1,3 +1,4 @@
+import { type ComponentType } from '../../model/ComponentType';
 import { type Picture } from '../../model/Picture';
 import { type IconCompatibilityFields } from '../Icon/IconProps';
 
@@ -5,7 +6,6 @@ export interface ImageContent {
   image?: Picture;
 }
 
-export interface ImageProps extends ImageContent, IconCompatibilityFields {
-  className?: string;
+export interface ImageProps extends ImageContent, IconCompatibilityFields, ComponentType {
   imageClassName?: string;
 }

package/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -1,14 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type TariffsTableCellIndexProps } from '../../components/TariffsTable/TariffsTableContent';
+import { type ComponentType } from '../../model/ComponentType';
 import { DefaultFoldButton } from '../Foldable/DefaultFoldButton';
 import { type TariffsTableInnerContent } from './InnerTableProps';
 
 export interface InnerTableButtonProps
   extends Partial<TariffsTableCellIndexProps>,
-    TariffsTableInnerContent {
+    TariffsTableInnerContent,
+    ComponentType {
   onClick?: () => void;
   isOpen?: boolean;
-  className?: string;
 }
 
 export const TableInnerButton = JSX<InnerTableButtonProps>(

package/src/ui-kit/Input/InputControl.tsx

@@ -1,73 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
-import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
-import { getRequiredLabel } from '../../utils/getRequiredLabel';
-import { noop } from '../../utils/noop';
-import { style } from '../../utils/style';
-import { Input } from './Input';
 import { type InputProps } from './InputProps';
-import { renderErrorText } from './renderErrorText';
+import { InputWrapper } from './InputWrapper';
 
-export const InputControl = JSX<InputProps>(
-  ({
-    className,
-    label,
-    value = '',
-    placeholder,
-    error,
-    errors,
-    onChange = noop,
-    onBlur,
-    isTextarea,
-    type,
-    isInteger = false,
-    maxLength,
-    disabled = false,
-  }) => {
-    const [isOpen, { setFalse: close, setTrue: open }] = useBool();
-    const popupRef = useOutsideClick<HTMLDivElement>(close);
+export const InputControl = JSX<InputProps>((props) => {
+  const [isOpen, { setFalse: close, setTrue: open }] = useBool();
 
-    const handleChange = useCallback(
-      (v: string) => {
-        !isOpen && open();
-        maxLength ? v.length <= maxLength && onChange(v) : onChange(v);
-      },
-      [isOpen, onChange],
-    );
-
-    useEffect(() => {
-      isInteger && value ? onChange(normalizeInteger(value)) : null;
-    }, [value]);
-
-    return (
-      <div
-        className={style('shrink-0 w-full', className)}
-        ref={popupRef}
-        onBlur={close}
-        onFocus={open}
-      >
-        <div>
-          <Input
-            disabled={disabled}
-            type={type || 'text'}
-            aria-label={label}
-            label={getRequiredLabel({ label, errors })}
-            valid={Boolean(!error)}
-            value={value}
-            onChange={handleChange}
-            onBlur={onBlur}
-            isTextarea={isTextarea}
-            placeholder={getPlaceholder(placeholder, errors, label)}
-          />
-        </div>
-        {renderErrorText(error)}
-      </div>
-    );
-  },
-);
-
-const normalizeInteger = (val = '') => val.replace(/[^\d]+/g, '');
-
-const getPlaceholder = (placeholder?: string, errors?: string[], label?: string) =>
-  errors && !label ? `${placeholder}*` : placeholder;
+  return <InputWrapper isOpen={isOpen} onOpen={open} onClose={close} {...props} />;
+});

package/src/ui-kit/Input/InputProps.ts

@@ -1,6 +1,6 @@
+import { type ControlProps } from '../../model/ControlProps';
 import { type DefaultControlType } from '../../model/DefaultControlType';
 import { type InputTypes } from '../../model/InputTypes';
-import { type ControlProps } from '../ControlProps';
 import { type PreventableEventWithTarget } from '../PreventableEvent';
 
 export interface InputProps<V = string> extends DefaultControlType, ControlProps<V> {
@@ -11,9 +11,9 @@ export interface InputProps<V = string> extends DefaultControlType, ControlProps
   onFocus?: (ev: PreventableEventWithTarget) => void;
   onBlur?: (ev?: PreventableEventWithTarget) => void;
   valid?: boolean;
-  disabled?: boolean;
   autoFocus?: boolean;
   isTextarea?: boolean;
   maxLength?: number;
   isInteger?: boolean;
+  inputRef?: { current: HTMLDivElement | null };
 }

package/src/ui-kit/Input/InputWrapper.tsx

@@ -0,0 +1,78 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
+import { type DefaultControlType } from '../../model/DefaultControlType';
+import { getRequiredLabel } from '../../utils/getRequiredLabel';
+import { noop } from '../../utils/noop';
+import { style } from '../../utils/style';
+import { Input } from './Input';
+import { type InputProps } from './InputProps';
+import { renderErrorText } from './renderErrorText';
+
+type InputWrapperProps = InputProps & {
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+};
+
+export const InputWrapper = JSX<InputWrapperProps>(
+  ({
+    className,
+    label,
+    value = '',
+    error,
+    errors,
+    type,
+    isInteger,
+    placeholder,
+    maxLength,
+    inputRef,
+    isOpen,
+    onOpen,
+    onClose,
+    onChange = noop,
+    ...rest
+  }) => {
+    const popupRef = useOutsideClick<HTMLDivElement>(onClose);
+
+    const handleChange = useCallback(
+      (v: string) => {
+        const isOverMax = maxLength && v.length > maxLength;
+        !isOpen && onOpen();
+        if (!isOverMax) {
+          onChange(normalizeInteger(v, isInteger));
+        }
+      },
+      [isOpen, onChange],
+    );
+
+    return (
+      <div
+        className={style('shrink-0 w-full', className)}
+        ref={popupRef}
+        onBlur={onClose}
+        onFocus={onOpen}
+      >
+        <div ref={inputRef}>
+          <Input
+            type={type || 'text'}
+            aria-label={label}
+            label={getRequiredLabel({ label, errors })}
+            valid={Boolean(!error)}
+            onChange={handleChange}
+            placeholder={getPlaceholder({ placeholder, errors, label })}
+            value={value}
+            {...rest}
+          />
+        </div>
+        {renderErrorText(error)}
+      </div>
+    );
+  },
+);
+
+const normalizeInteger = (val = '', isInteger = false) =>
+  isInteger && val ? val.replace(/[^\d]+/g, '') : val;
+
+const getPlaceholder = ({ placeholder, errors, label }: DefaultControlType) =>
+  errors && !label ? `${placeholder}*` : placeholder;

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

@@ -1,12 +1,12 @@
+import { type DisabledProps } from '../../model/DisabledProps';
+import { type TitleProps } from '../../model/HeadlineType';
 import { type InputProps } from '../Input/InputProps';
 
-export interface InputRangeProps extends InputProps<number> {
+export interface InputRangeProps extends InputProps<number>, DisabledProps, TitleProps {
   items?: string[];
   min?: number;
   max?: number;
   list?: number[];
   step?: number;
-  title?: string;
-  disabled?: boolean;
   onChange?: (value: number) => void;
 }

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

@@ -1,14 +1,13 @@
+import { type ControlProps } from '../../model/ControlProps';
+import { type DisabledProps } from '../../model/DisabledProps';
 import { style } from '../../utils/style';
 import { parseDecimal } from './parseDecimal';
 
-interface RangeWithTicksProps {
+interface RangeWithTicksProps extends ControlProps<number>, DisabledProps {
   list: number[];
   min: number;
   max: number;
   step: number;
-  disabled?: boolean;
-  value?: number;
-  onChange?: (value: number) => void;
 }
 
 export function renderRangeWithTicks({

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

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
+import { type ComponentType } from '../../model/ComponentType';
 import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { type LinkProps as BaseLinkProps } from '../../model/LinkProps';
 import { getAspectsAttributes } from '../../utils/dataAttributes';
@@ -18,8 +19,7 @@ const themeStyle: Record<LinkButtonVersion, string> = {
   '': '',
 };
 
-export interface LinkProps extends BaseLinkProps {
-  className?: string;
+export interface LinkProps extends BaseLinkProps, ComponentType {
   version?: LinkButtonVersion;
   aboveText?: string;
   rel?: string;

package/src/ui-kit/LinkButton/GetButtonClassParams.ts

@@ -1,8 +1,8 @@
+import { type ComponentType } from '../../model/ComponentType';
 import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 
 /** @deprecated */
-export type GetButtonClassParams = {
-  className?: string;
+export type GetButtonClassParams = ComponentType & {
   rounded?: boolean;
   version?: LinkButtonVersion;
 };

package/src/ui-kit/LinkButton/LinkButtonProps.ts

@@ -1,14 +1,14 @@
+import { type ComponentType } from '../../model/ComponentType';
+import { type DisabledProps } from '../../model/DisabledProps';
 import { type VNode } from '../../model/VNode';
 import { type PreventableEvent } from '../PreventableEvent';
-import { type LinkButtonContent } from './LinkButtonContent';
+import { type LinkButtonContent } from './LinkButtonContent'; /** @deprecated */
 
 /** @deprecated */
 /**
  * @title Кнопка
  */
-export interface LinkButtonProps extends LinkButtonContent {
-  className?: string;
-  disabled?: boolean;
+export interface LinkButtonProps extends LinkButtonContent, ComponentType, DisabledProps {
   rel?: string;
   ariaLabel?: string;
   appendLeft?: VNode;

package/src/ui-kit/LinkButton/renderArrows.tsx

@@ -1,16 +1,17 @@
+import { type ComponentType } from '../../model/ComponentType';
+import { type DisabledProps } from '../../model/DisabledProps';
 import { style } from '../../utils/style';
 import { ArrowLeftButton, ArrowRightButton } from './ArrowButton';
 
 /** @deprecated */
-export type RenderArrowsProps = {
-  dec: () => void;
-  inc: () => void;
-  canInc: boolean;
-  canDec: boolean;
-  btnClass: [string, string];
-  className?: string;
-  isDisabled?: boolean;
-};
+export type RenderArrowsProps = ComponentType &
+  DisabledProps & {
+    dec: () => void;
+    inc: () => void;
+    canInc: boolean;
+    canDec: boolean;
+    btnClass: [string, string];
+  };
 
 /** @deprecated */
 export const renderArrows = ({

package/src/ui-kit/LinkButton/renderButtonsSection.tsx

@@ -1,3 +1,4 @@
+import { type ComponentType } from '../../model/ComponentType';
 import { type Picture } from '../../model/Picture';
 import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
@@ -5,8 +6,7 @@ import { Img } from '../Img/Img';
 import { LinkButton } from './LinkButton';
 import { type LinkButtonContent } from './LinkButtonContent';
 
-interface ButtonsSectionOptions {
-  className?: string;
+interface ButtonsSectionOptions extends ComponentType {
   buttonClassName?: string;
   isVertical?: boolean;
 }

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

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import { type AspectsProps } from '../../model/AspectsProps';
+import { type ComponentType } from '../../model/ComponentType';
 import { type Target } from '../../model/LinkProps';
 import { getAspectsAttributes } from '../../utils/dataAttributes';
 import { style } from '../../utils/style';
 
-interface LinkWrapperProps extends AspectsProps {
-  className?: string;
+interface LinkWrapperProps extends AspectsProps, ComponentType {
   href?: string;
   target?: Target;
   onClick?: () => void;

package/src/ui-kit/ListControlProps.ts

@@ -1,4 +1,4 @@
-import { type ControlProps } from './ControlProps';
+import { type ControlProps } from '../model/ControlProps';
 
 export interface ListControlProps<T> extends ControlProps<T> {
   items: T[];

package/src/ui-kit/LocationDialog/SearchBar.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 import { inputValidStyle } from '../Input/inputValidStyle';
 import { type PreventableEvent } from '../PreventableEvent';
 
-export interface SearchBarInnerProps {
-  className?: string;
+export interface SearchBarInnerProps extends ComponentType {
   searchTerm?: string;
   onSearch: (_: string) => void;
 }

package/src/ui-kit/Radio/RadioProps.ts

@@ -1,8 +1,8 @@
-export interface RadioProps {
+import { type ComponentType } from '../../model/ComponentType';
+import { type ControlProps } from '../../model/ControlProps';
+
+export interface RadioProps extends ComponentType, ControlProps<string> {
   name: string;
   text?: string;
-  value: string;
   checked: boolean;
-  onChange?: (value: string) => void;
-  className?: string;
 }