diff --git a/src/components/funnel/templates/layouts/TemplateLayout.tsx b/src/components/funnel/templates/layouts/TemplateLayout.tsx index f739998..ce59e6d 100644 --- a/src/components/funnel/templates/layouts/TemplateLayout.tsx +++ b/src/components/funnel/templates/layouts/TemplateLayout.tsx @@ -10,6 +10,7 @@ import { buildTemplateBottomActionButtonProps, } from "@/lib/funnel/mappers"; import type { ScreenDefinition } from "@/lib/funnel/types"; +import { cn } from "@/lib/utils"; interface TemplateLayoutProps { screen: ScreenDefinition; @@ -132,7 +133,7 @@ export function TemplateLayout({ const autoPrivacyTermsConsent = shouldShowPrivacyTermsConsent ? ( )} diff --git a/src/components/ui/SystemSelectInput/SystemSelectInput.tsx b/src/components/ui/SystemSelectInput/SystemSelectInput.tsx new file mode 100644 index 0000000..21d8a86 --- /dev/null +++ b/src/components/ui/SystemSelectInput/SystemSelectInput.tsx @@ -0,0 +1,84 @@ +"use client"; + +import { cn } from "@/lib/utils"; +import { useId } from "react"; +import Typography from "../Typography/Typography"; + +type Option = { + value: string | number; + label: string; +}; + +export interface SelectInputProps extends React.ComponentProps<"select"> { + error?: boolean; + options: Option[]; + placeholder?: string; + label?: string; + labelProps?: React.ComponentProps<"label">; + errorProps?: React.ComponentProps; +} + +export default function SelectInput({ + error, + options, + placeholder, + label, + labelProps, + errorProps, + ...props +}: SelectInputProps) { + const id = useId(); + + return ( +
+ {label && ( + + )} + + {error && ( + + {errorProps?.children} + + )} +
+ ); +} diff --git a/src/components/widgets/BottomActionButton/BottomActionButton.tsx b/src/components/widgets/BottomActionButton/BottomActionButton.tsx index 2be9245..213f20d 100644 --- a/src/components/widgets/BottomActionButton/BottomActionButton.tsx +++ b/src/components/widgets/BottomActionButton/BottomActionButton.tsx @@ -21,6 +21,8 @@ export interface BottomActionButtonProps extends React.ComponentProps<"div"> { showGradientBlur?: boolean; /** Синхронизировать CSS-переменную --bottom-action-button-height на */ syncCssVar?: boolean; + + gradientBlurProps?: React.ComponentProps; } const BottomActionButton = forwardRef( @@ -32,6 +34,7 @@ const BottomActionButton = forwardRef( showGradientBlur = true, className, syncCssVar = true, + gradientBlurProps, ...props }, ref @@ -81,7 +84,11 @@ const BottomActionButton = forwardRef( )} {...props} > - + {childrenAboveButton && (
{childrenAboveButton} diff --git a/src/components/widgets/DateInput/DateInput.tsx b/src/components/widgets/DateInput/DateInput.tsx index ceef5ce..4ee6fee 100644 --- a/src/components/widgets/DateInput/DateInput.tsx +++ b/src/components/widgets/DateInput/DateInput.tsx @@ -1,15 +1,13 @@ "use client"; -import SelectInput, { - SelectInputProps, -} from "@/components/ui/SelectInput/SelectInput"; +import SystemSelectInput from "@/components/ui/SystemSelectInput/SystemSelectInput"; import Typography from "@/components/ui/Typography/Typography"; import { useDateInput } from "@/hooks/useDateInput"; type LocalSelectInputProps = Omit< - SelectInputProps, - "value" | "onValueChange" | "options" + React.ComponentProps, + "value" | "onChange" | "options" >; export interface DateInputProps { @@ -58,30 +56,30 @@ export default function DateInput({ const inputs = { d: ( - handleDayChange(e.target.value)} options={dayOptions} placeholder="DD" {...daySelectProps} /> ), m: ( - handleMonthChange(e.target.value)} options={monthOptions} placeholder="MM" {...monthSelectProps} /> ), y: ( - handleYearChange(e.target.value)} options={yearOptions} placeholder="YYYY" {...yearSelectProps}