@redneckz/wildless-cms-uni-blocks 0.16.1 → 0.16.2-credit

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

@@ -1,73 +1,106 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { handlerDecorator } from '../../external/handlerDecorator';
+import { type AspectsDef } from '../../model/AspectsProps';
 import { type ButtonVersion } from '../../model/ButtonVersion';
+import { type ComponentType } from '../../model/ComponentType';
+import { type ColorPalette } from '../../model/ContentPageBase';
+import { type DisabledProps } from '../../model/DisabledProps';
+import { getAspectsAttributes } from '../../utils/dataAttributes';
+import { noop } from '../../utils/noop';
 import { style } from '../../utils/style';
 import { type ARIAProps } from '../ARIAProps';
-import { type ControlStateProps } from '../ControlStateProps';
 import { type PreventableEvent } from '../PreventableEvent';
-import { useButton } from './useButton';
 
-const buttonStyleMap: Record<ButtonVersion, string> = {
-  primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
-  secondary:
-    'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
-};
-
-const secondaryButtonStyleMap: Record<ButtonVersion, string> = {
+export const themeStyle: Record<ButtonVersion, string> = {
   primary: style(
+    'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
     'group-data-secondary:text-primary-main group-data-secondary:bg-white',
     'group-data-secondary:hover:text-white group-data-secondary:hover:bg-primary-hover',
     'group-data-secondary:active:bg-primary-active',
   ),
   secondary: style(
+    'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
     'group-data-secondary:text-white group-data-secondary:bg-white/20',
     'group-data-secondary:hover:bg-primary-hover',
     'group-data-secondary:active:bg-primary-active',
   ),
 };
 
-export interface ButtonProps extends ControlStateProps, ARIAProps {
-  className?: string;
+const embeddedStyle = style(
+  'group/btn-embedded',
+  'bg-transparent border border-transparent outline-none',
+);
+
+const disabledStyle = style('bg-main-gray text-main-disabled cursor-not-allowed');
+
+export interface ButtonProps extends DisabledProps, ARIAProps, ComponentType {
+  type?: 'button' | 'submit' | 'reset';
   version?: ButtonVersion;
-  type?: 'button' | 'submit' | 'reset' | undefined;
-  rounded?: boolean;
+  shape?: 'default' | 'round' | 'square';
+  embedded?: boolean;
   role?: string;
-  onClick?: (ev?: PreventableEvent) => void;
+  ariaLabel?: string;
+  data?: AspectsDef[];
+  dataTheme?: ColorPalette;
+  onClick?: (ev: PreventableEvent) => void;
+  wcmsIgnore?: boolean;
 }
 
-export const Button = JSX<ButtonProps>(({ children, ...props }) => {
-  const button = useButton();
-
-  const {
+export const Button = JSX<ButtonProps>(
+  ({
     className,
+    type = 'button',
     version = 'primary',
-    active,
+    shape = 'default',
+    embedded,
     disabled,
-    type = 'button',
-    rounded = true,
     role,
-    onClick,
-  } = button(props);
+    ariaLabel,
+    data,
+    dataTheme,
+    children,
+    wcmsIgnore,
+    onClick = noop,
+  }) => {
+    const handleClick = useCallback(role !== 'tab' ? handlerDecorator(onClick) : onClick, [
+      role,
+      onClick,
+    ]);
+    const aspectsAttrs = useMemo(() => getAspectsAttributes(data), [data]);
+
+    const isRound = shape === 'round';
 
-  return (
-    <button
-      className={style(
-        'font-sans px-9 py-4',
-        'flex justify-center items-center gap-xs',
-        {
-          'text-white bg-primary-active': active,
-          'bg-main-gray text-main-disabled cursor-not-allowed': disabled,
-          'rounded-md': rounded,
-        },
-        !active && !disabled
-          ? style(buttonStyleMap[version], secondaryButtonStyleMap[version])
-          : '',
-        className,
-      )}
-      type={type}
-      role={role}
-      onClick={onClick}
-    >
-      {children}
-    </button>
-  );
-});
+    return (
+      <button
+        className={style(
+          'font-sans flex items-center gap-xs',
+          {
+            [themeStyle[version]]: !disabled && !embedded,
+            [embeddedStyle]: embedded,
+            [disabledStyle]: disabled,
+          },
+          embedded ? 'justify-between' : 'justify-center',
+          embedded || isRound ? 'p-0' : 'px-9 py-4',
+          {
+            'rounded-md': shape === 'default',
+            'rounded-full': isRound,
+          },
+          className,
+        )}
+        type={type}
+        role={role}
+        aria-label={ariaLabel}
+        disabled={disabled}
+        aria-disabled={disabled ? 'true' : undefined}
+        data-theme={dataTheme}
+        data-wcms-ignore={wcmsIgnore}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...aspectsAttrs}
+        onClick={handleClick}
+      >
+        {children}
+      </button>
+    );
+  },
+);

package/src/ui-kit/Button/ButtonTitle.tsx

@@ -0,0 +1,14 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
+import { style } from '../../utils/style';
+
+export const ButtonTitle = JSX<ComponentType>(({ className, children }) => (
+  <span
+    className={style(
+      'inline-flex items-center text-start gap-s group-[]/btn-embedded:text-primary-main',
+      className,
+    )}
+  >
+    {children}
+  </span>
+));

package/src/ui-kit/Button/IconButton.tsx

@@ -0,0 +1,15 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type IconName } from '../../icons/IconName';
+import { style } from '../../utils/style';
+import { Icon } from '../Icon/Icon';
+import { Button, type ButtonProps } from './Button';
+
+export interface IconButtonProps extends ButtonProps {
+  name: IconName;
+}
+
+export const IconButton = JSX<IconButtonProps>(({ className, name, ...props }) => (
+  <Button className={style('w-12 h-12 min-w-12 min-h-12', className)} shape="round" {...props}>
+    <Icon name={name} iconVersion="" size="small" />
+  </Button>
+));

package/src/ui-kit/Button/SubmitButton.tsx

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { Loader } from '../Loader/Loader';
+import { Button, type ButtonProps } from './Button';
+
+export interface SubmitButtonProps extends ButtonProps {
+  isLoading?: boolean;
+}
+
+export const SubmitButton = JSX<SubmitButtonProps>(
+  ({ isLoading, disabled, children, className, ...rest }) => (
+    <Button
+      type="submit"
+      className={style('relative', className)}
+      disabled={isLoading || disabled}
+      {...rest}
+    >
+      {isLoading ? <Loader blur={true} size="small" /> : null}
+      {children}
+    </Button>
+  ),
+);

package/src/ui-kit/Calculator/CalculatorProps.ts

@@ -1,4 +1,5 @@
 import { type JSONRefObject } from '../../data/JSONRefObject';
+import { type ComponentType } from '../../model/ComponentType';
 import { type Footnote } from '../../model/Footnote';
 import { type TitleProps } from '../../model/HeadlineType';
 import { type ButtonsSectionContent } from '../LinkButton/ButtonsSectionContent';
@@ -22,8 +23,7 @@ export type RateProps = {
   rate: number;
 };
 
-export interface CalcCurrencyProps {
-  className?: string;
+export interface CalcCurrencyProps extends ComponentType {
   title?: string;
   value?: number | string;
   fractionDigits?: number;

package/src/ui-kit/Calculator/CalculatorStyle.tsx

@@ -1,5 +1,5 @@
 export const CalculatorStyle = {
-  wrapper: 'flex flex-col justify-between @4xl:flex-row gap-x-4xl gap-y-7 @xl:gap-y-4xl',
-  input: 'flex flex-col lg:max-w-80 lg:w-1/2 gap-2xl',
+  wrapper: 'flex flex-col justify-between lg:flex-row gap-4xl',
+  input: 'flex flex-col lg:w-1/2 gap-2xl',
   result: 'flex flex-col gap-y-xl min-w-52',
 };

package/src/ui-kit/Calculator/Rate.tsx

@@ -28,7 +28,7 @@ export const Rate = JSX<RateProps>(
         {title}
       </Text>
       <div className="relative">
-        <div className="flex @xl:justify-center gradient-color-text">
+        <div className="flex @xl:justify-center gradient-color-text gap-xs">
           <span className="font-mohave text-title-huge -mt-m tracking-[-15px]">
             {toLocalNumberFormat(fractionDigits, { fixed: true })(rate)}
           </span>

package/src/ui-kit/Calculator/UnknownRate.tsx

@@ -5,28 +5,18 @@ import { Text } from '../Text/Text';
 
 export interface UnknownRateProps {
   title?: string;
-  isUnavailableByTerm?: boolean;
 }
 
-export const UnknownRate = JSX<UnknownRateProps>(
-  ({ title = 'Ставка', isUnavailableByTerm = false }) => (
-    <div className="space-y-s min-w-96">
-      <Text size="text-l" font="font-light" color="text-secondary-text">
-        {title}
-      </Text>
-      <Icon className="w-10 h-10 @5xl:h-auto @5xl:w-40" name="PercentIcon" />
-      <div className="w-64">
-        {isUnavailableByTerm ? (
-          <Paragraph size="text-xl" font="font-light" color="text-primary-text">
-            Процентная ставка для срока <strong>1-30 дней</strong> устанавливается при обращении в
-            Банк
-          </Paragraph>
-        ) : (
-          <Paragraph size="text-xl" font="font-light" color="text-primary-text">
-            Выберите другую сумму или срок
-          </Paragraph>
-        )}
-      </div>
+export const UnknownRate = JSX<UnknownRateProps>(({ title = 'Ставка' }) => (
+  <div className="space-y-s min-w-96">
+    <Text size="text-l" font="font-light" color="text-secondary-text">
+      {title}
+    </Text>
+    <Icon className="w-10 h-auto lg:w-40" name="PercentIcon" />
+    <div className="w-64">
+      <Paragraph size="text-xl" font="font-light" color="text-primary-text">
+        Процентная ставка не найдена, выберите другие параметры
+      </Paragraph>
     </div>
-  ),
-);
+  </div>
+));

package/src/ui-kit/Calculator/getDefaultParams.tsx

@@ -1,4 +1,5 @@
-import { type DepositCalculatorSourceBookParams } from '../../components/CalculatorDeposit/getDepositCalculatorParams';
+import { type DepositCalculatorSourceBookParams } from '../../components/CalculatorDeposit/CalculatorDepositContent';
+import { type Option } from '../Select/Option';
 import { type CalcDefaultParamsProps } from './CalculatorProps';
 
 export const getDefaultParamsMin = (rateRows?: CalcDefaultParamsProps[]) =>
@@ -9,11 +10,17 @@ export const getDefaultParamsMin = (rateRows?: CalcDefaultParamsProps[]) =>
 export const getDefaultParamsMax = (
   rateRows: DepositCalculatorSourceBookParams[] = [],
   isNewClient = false,
-) =>
-  getDefaultParams(
-    [(i: number, acc: number) => i > acc, (i, prev) => i?.minSum < prev?.minSum],
-    rateRows?.filter((_) => isNewClient === Boolean(_?.isNewClient)),
-  );
+  extraPercents: Option[] = [],
+) => {
+  return {
+    ...getDefaultParams(
+      [(i: number, acc: number) => i > acc, (i, prev) => i?.minSum < prev?.minSum],
+      rateRows?.filter((_) => isNewClient === Boolean(_?.isNewClient)),
+    ),
+    extraPercent: extraPercents.at(-1),
+    extraPercents,
+  };
+};
 
 const getDefaultParams = (
   comparators: [

package/src/ui-kit/Calculator/renderBinaryRadioButtonGroup.tsx

@@ -1,3 +1,7 @@
+import { type ComponentType } from '../../model/ComponentType';
+import type { ControlProps } from '../../model/ControlProps';
+import { type DisabledProps } from '../../model/DisabledProps';
+import { type TitleProps } from '../../model/HeadlineType';
 import { type ListOrientation } from '../../model/ListOrientation';
 import {
   RadioButtonGroup,
@@ -5,46 +9,36 @@ import {
 } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { Text } from '../../ui-kit/Text/Text';
 
-export interface BinaryRadioButtonGroupProps {
+export interface BinaryRadioButtonGroupProps
+  extends ComponentType,
+    DisabledProps,
+    TitleProps,
+    ControlProps<boolean> {
   items: [truthy: RadioButtonItem, falsy: RadioButtonItem];
-  title?: string;
-  mobileTitle?: string;
   orientation?: ListOrientation;
-  value?: boolean;
-  className?: string;
-  onChange?: (value: boolean) => void;
-  disabled?: boolean;
 }
 
 export const renderBinaryRadioButtonGroup = ({
   items,
   title,
-  mobileTitle = title,
   orientation = 'horizontal',
   value,
   onChange,
   ...rest
 }: BinaryRadioButtonGroupProps) => (
-  <div className="grid gap-s whitespace-nowrap">
+  <div className="grid gap-s whitespace-nowrap lg:sm:col-span-1 col-span-2">
     {title ? (
-      <div className="hidden @5xl:block" role="radiogroup" aria-label={title}>
+      <div role="radiogroup" aria-label={title}>
         <Text color="text-secondary-text" font="font-light">
           {title}
         </Text>
       </div>
     ) : null}
-    {mobileTitle ? (
-      <div className="@5xl:hidden" role="radiogroup" aria-label={mobileTitle}>
-        <Text color="text-secondary-text" font="font-light">
-          {mobileTitle}
-        </Text>
-      </div>
-    ) : null}
 
     <RadioButtonGroup
       orientation={orientation}
       items={items}
-      checkedItem={items[value ? 0 : 1].id}
+      value={items[value ? 0 : 1].id}
       onChange={(_) => onChange && onChange(_ === items[0].id)}
       {...rest}
     />

package/src/ui-kit/Calculator/renderPaymentType.tsx

@@ -6,6 +6,8 @@ import {
 export const renderPaymentType = (props: Partial<BinaryRadioButtonGroupProps>) =>
   renderBinaryRadioButtonGroup({
     ...props,
+    title: 'Тип платежа',
+    orientation: 'vertical',
     className: 'sm:flex-col',
     items: [
       { id: 'annuity', text: 'Аннуитетный' },

package/src/ui-kit/Calculator/renderPayout.tsx

@@ -6,6 +6,8 @@ import {
 export const renderPayout = (props: Partial<BinaryRadioButtonGroupProps>) =>
   renderBinaryRadioButtonGroup({
     ...props,
+    title: 'Выплата процентов',
+    orientation: 'vertical',
     items: [
       { id: 'everyMonth', text: 'Ежемесячно' },
       { id: 'atEndTerm', text: 'В конце срока' },

package/src/ui-kit/Calculator/renderRate.tsx

@@ -4,7 +4,6 @@ import { Rate, type RateProps } from './Rate';
 import { UnknownRate, type UnknownRateProps } from './UnknownRate';
 
 interface RenderRateProps extends RateProps, UnknownRateProps {
-  isUnknownRateShown?: boolean;
   children?: VNode;
 }
 
@@ -13,16 +12,13 @@ export const renderRate = ({
   rate = 0,
   unit = '%',
   fractionDigits = 2,
-  isUnknownRateShown = true,
   color = 'text-secondary-text',
   children,
   ...rest
 }: RenderRateProps) =>
-  isUnknownRateShown && rate === 0 ? (
-    <UnknownRate title={title} {...rest} />
-  ) : (
+  rate ? (
     <div className="flex flex-col">
-      <div className="hidden @xl:block min-w-96">
+      <div className="hidden lg:block min-w-96">
         <Rate
           title={title}
           rate={rate}
@@ -33,7 +29,7 @@ export const renderRate = ({
         />
       </div>
       <CalculatorValue
-        className="@xl:hidden"
+        className="lg:hidden"
         title={title}
         value={rate}
         postfix={unit}
@@ -44,4 +40,6 @@ export const renderRate = ({
       />
       {children}
     </div>
+  ) : (
+    <UnknownRate title={title} {...rest} />
   );

package/src/ui-kit/Calculator/setDefaultParamsCalc.tsx

@@ -5,8 +5,8 @@ import {
 import {
   type DepositCalculatorParams,
   type DepositCalculatorSourceBookParams,
-} from '../../components/CalculatorDeposit/getDepositCalculatorParams';
-import { type FormFieldRegisterer } from '../../hooks/useForm';
+} from '../../components/CalculatorDeposit/CalculatorDepositContent';
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
 import { clamp } from '../../utils/clamp';
 
 interface ParamsCalcProps {

package/src/ui-kit/Checkbox/CheckboxProps.ts

@@ -1,9 +1,5 @@
-export interface CheckboxProps {
-  className?: string;
-  value?: boolean;
-  text?: string;
-  disabled?: boolean;
+import { type CommonInputProps } from '../../model/CommonInputProps';
+
+export interface CheckboxProps extends CommonInputProps<boolean> {
   isRadio?: boolean;
-  onChange?: (value: boolean) => void;
-  error?: string;
 }

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
 import { noop } from '../../utils/noop';
 import { renderCalendarCells } from './renderCalendarCells';
 
@@ -12,16 +12,10 @@ interface CalendarProps {
   min?: Date;
   max?: Date;
   onDateSelect?: (date: Date) => void;
-  setValue?: (value: boolean) => void;
 }
 
 export const Calendar = JSX<CalendarProps>(
-  ({ today, currentMonth, currentYear, min, max, onDateSelect = noop, setValue = noop }) => {
-    const handleDateClick = useCallback((date: Date) => {
-      onDateSelect(date);
-      setValue(false);
-    }, []);
-
+  ({ today, currentMonth, currentYear, min, max, onDateSelect = noop }) => {
     const { firstDayOfWeek, totalDays } = useMemo(
       () => ({
         firstDayOfWeek: new Date(currentYear, currentMonth, 1).getDay() - 1,
@@ -50,7 +44,7 @@ export const Calendar = JSX<CalendarProps>(
             currentMonth,
             min,
             max,
-            onDateClick: handleDateClick,
+            onDateClick: onDateSelect,
           })}
         </tbody>
       </table>

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

@@ -1,18 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+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 { formatDate } from '../../utils/formatDate';
 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';
-import { Paragraph } from '../Paragraph/Paragraph';
 import { Select } from '../Select/Select';
 import { Calendar } from './Calendar';
 import { months } from './months';
+import { renderDatePickerForm } from './renderDatePickerForm';
 import { useDatePickerManager } from './useDatePickerManager';
 
 const ICON_PROPS: { name: IconName; iconVersion: IconVersion; width: string; height: string } = {
@@ -28,23 +30,27 @@ const SELECT_PROPS: { className: string; iconVersion: IconVersion; isBorder: boo
   isBorder: false,
 };
 
-const formStyle =
-  'flex justify-between items-center h-14 px-m py-s border rounded-md cursor-pointer ' +
-  'hover:border-black active:border-black focus:border-black';
-
-interface DatePickerProps extends ControlProps<Date>, LabelProps {
-  className?: string;
+interface DatePickerProps extends ControlProps<Date>, ComponentType, LabelProps, DisabledProps {
   minDate?: Date;
   maxDate?: Date;
   valid?: boolean;
 }
 
 export const DatePicker = JSX<DatePickerProps>(
-  ({ className = '', label = '', value, valid = true, minDate, maxDate, onChange }) => {
-    const [showCalendar, { setValue }] = useBool(false);
+  // eslint-disable-next-line max-lines-per-function
+  ({ className = '', label = '', value, valid = true, minDate, maxDate, disabled, onChange }) => {
+    const [isCalendarVisible, { setValue, setFalse: hideCalendar }] = useBool(false);
     const [selectedMonth, setSelectedMonth] = useState(value?.getMonth() || new Date().getMonth());
     const [selectedYear, setSelectedYear] = useState(
-      value?.getFullYear() || new Date().getFullYear(),
+      value?.getFullYear() ?? new Date().getFullYear(),
+    );
+
+    const handleDateSelect = useCallback(
+      (date: Date) => {
+        onChange?.(date);
+        hideCalendar();
+      },
+      [onChange],
     );
 
     const {
@@ -62,16 +68,32 @@ export const DatePicker = JSX<DatePickerProps>(
       onShowCalendar: setValue,
       selectedYear,
       selectedMonth,
-      showCalendar,
+      showCalendar: isCalendarVisible,
+      onChange,
+      value,
     });
 
+    const spaceAbove = useElementSpace(ref, 370);
+
     return (
       <div className={style('space-y-xs', className)} ref={ref}>
         {renderLabel(label)}
         <div className="relative">
-          {renderDatePickerForm(handleChangeVisibleCalendar, value, valid)}
-          {showCalendar ? (
-            <div className="absolute bg-white z-20 select-none bottom-full">
+          {renderDatePickerForm({
+            handleChangeVisibleCalendar,
+            value,
+            valid,
+            onChange,
+            disabled,
+            setSelectedMonth,
+            setSelectedYear,
+          })}
+          {isCalendarVisible && !disabled ? (
+            <div
+              className={style('absolute bg-white z-20 select-none', {
+                'bottom-full': spaceAbove,
+              })}
+            >
               <div className="flex gap-s">
                 <div className="my-auto" onClick={handlePrevMonth}>
                   <Icon {...ICON_PROPS} className="-rotate-90 cursor-pointer" />
@@ -96,9 +118,9 @@ export const DatePicker = JSX<DatePickerProps>(
                 today={value}
                 currentMonth={selectedMonth}
                 currentYear={selectedYear}
-                onDateSelect={onChange}
                 min={minDate}
                 max={maxDate}
+                onDateSelect={handleDateSelect}
               />
             </div>
           ) : null}
@@ -107,17 +129,3 @@ export const DatePicker = JSX<DatePickerProps>(
     );
   },
 );
-
-const renderDatePickerForm = (
-  handleChangeVisibleCalendar: () => void,
-  value: Date | undefined,
-  valid: boolean,
-) => (
-  <div
-    onClick={handleChangeVisibleCalendar}
-    className={style(formStyle, valid ? 'border-gray' : 'border-error')}
-  >
-    <Paragraph>{value && formatDate(value)}</Paragraph>
-    <Icon {...ICON_PROPS} name="CalendarIcon" />
-  </div>
-);

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

@@ -1,25 +1,19 @@
 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 { renderErrorText } from '../Input/renderErrorText';
 import { DatePicker } from './DatePicker';
 
-export interface DatePickerControlProps {
-  className?: string;
-  label: string;
-  value?: Date;
-  error?: string;
-  errors?: string[];
-  onChange?: (value: Date) => void;
+export interface DatePickerControlProps extends DefaultControlType, ControlProps<Date> {
+  minDate?: Date;
 }
 
 export const DatePickerControl = JSX<DatePickerControlProps>(
-  ({ className, label, error, ...rest }) => (
+  ({ className, label, error, errors, ...rest }) => (
     <div className={style('shrink-0 w-full', className)}>
-      <DatePicker
-        label={label && rest?.errors ? `${label}*` : label}
-        valid={Boolean(!error)}
-        {...rest}
-      />
+      <DatePicker label={getRequiredLabel({ label, errors })} valid={Boolean(!error)} {...rest} />
       {renderErrorText(error)}
     </div>
   ),