;
+
+export const Default = {
+ args: {
+ children: "Default Typography",
+ },
+} satisfies Story;
+
+export const Fonts = {
+ decorators: [
+ () => (
+
+ Font: manrope
+ Font: inter
+ Font: geist Sans
+ Font: geist Mono
+
+ ),
+ ],
+} satisfies Story;
+
+export const Sizes = {
+ decorators: [
+ () => (
+
+ Extra Small Text (xs)
+ Small Text (sm)
+ Medium Text (md)
+ Large Text (lg)
+ Extra Large Text (xl)
+ 2X Large Text (2xl)
+
+ ),
+ ],
+} satisfies Story;
+
+export const Weights = {
+ decorators: [
+ () => (
+
+ Regular Weight
+ Medium Weight
+ Semi Bold Weight
+ Bold Weight
+ Extra Bold Weight
+ Black Weight
+
+ ),
+ ],
+} satisfies Story;
+
+export const Colors = {
+ decorators: [
+ () => (
+
+ Default Color
+
+ Primary Color
+
+ Secondary Color
+ Destructive Color
+ Success Color
+ Muted Color
+ Card Color
+ Accent Color
+
+ ),
+ ],
+} satisfies Story;
+
+export const Alignments = {
+ decorators: [
+ () => (
+
+ Left Aligned Text
+ Center Aligned Text
+ Right Aligned Text
+
+ ),
+ ],
+} satisfies Story;
+
+export const AsElements = {
+ decorators: [
+ () => (
+
+
+ Heading 1
+
+
+ Heading 2
+
+
+ Heading 3
+
+
+ Paragraph text with regular styling
+
+
+ Small span text
+
+
+ ),
+ ],
+} satisfies Story;
+
+export const Headings = {
+ decorators: [
+ () => (
+
+
+ Main Heading
+
+
+ Section Heading
+
+
+ Subsection Heading
+
+
+ This is a paragraph of text that demonstrates how the typography
+ component can be used for body content with proper spacing and
+ readability.
+
+
+ ),
+ ],
+} satisfies Story;
+
+export const CustomStyles = {
+ args: {
+ children: "Custom Styled Text",
+ className: "bg-blue-100 text-blue-800 px-4 py-2 rounded-lg",
+ size: "lg",
+ weight: "bold",
+ },
+} satisfies Story;
diff --git a/src/components/ui/Typography/Typography.tsx b/src/components/ui/Typography/Typography.tsx
new file mode 100644
index 0000000..6a14b96
--- /dev/null
+++ b/src/components/ui/Typography/Typography.tsx
@@ -0,0 +1,92 @@
+import { createElement, JSX, ReactNode } from "react";
+import { cva, VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const typographyVariants = cva(cn("text-center text-foreground block"), {
+ variants: {
+ size: {
+ xs: "text-xs",
+ sm: "text-sm",
+ md: "text-base",
+ lg: "text-lg",
+ xl: "text-xl",
+ "2xl": "text-2xl",
+ "3xl": "text-3xl",
+ "4xl": "text-4xl",
+ },
+ weight: {
+ regular: "font-normal",
+ medium: "font-medium",
+ semiBold: "font-semibold",
+ bold: "font-bold",
+ extraBold: "font-extrabold",
+ black: "font-black",
+ },
+ color: {
+ default: "text-foreground",
+ primary: "text-primary-foreground",
+ secondary: "text-secondary-foreground",
+ destructive: "text-destructive",
+ success: "text-success",
+ card: "text-card-foreground",
+ accent: "text-accent-foreground",
+ muted: "text-muted-foreground",
+ },
+ align: {
+ center: "text-center",
+ left: "text-left",
+ right: "text-right",
+ },
+ font: {
+ manrope: "font-manrope",
+ inter: "font-inter",
+ geistSans: "font-geist-sans",
+ geistMono: "font-geist-mono",
+ },
+ },
+ defaultVariants: {
+ size: "md",
+ weight: "regular",
+ color: "default",
+ align: "center",
+ font: "inter",
+ },
+});
+
+type TypographyElements = Pick<
+ JSX.IntrinsicElements,
+ "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div"
+>;
+
+export type TypographyProps =
+ VariantProps &
+ Omit & {
+ as?: T;
+ children: ReactNode;
+ };
+
+export default function Typography<
+ T extends keyof TypographyElements = "span"
+>({
+ as: Component = "span" as T,
+ children,
+ className,
+ weight,
+ size,
+ color,
+ align,
+ font,
+ ...props
+}: TypographyProps) {
+ return createElement(
+ Component,
+ {
+ className: cn(
+ typographyVariants({ size, weight, color, align, font }),
+ className
+ ),
+ ...props,
+ },
+ children
+ );
+}
diff --git a/src/components/ui/button.stories.tsx b/src/components/ui/button.stories.tsx
new file mode 100644
index 0000000..f439ad1
--- /dev/null
+++ b/src/components/ui/button.stories.tsx
@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { Button } from "./button";
+import Link from "next/link";
+import { fn } from "storybook/test";
+
+/** Reusable Button Component */
+const meta: Meta = {
+ title: "Shadcn UI/Button",
+ component: Button,
+ parameters: {
+ layout: "centered",
+ },
+ tags: ["autodocs"],
+ args: {
+ disabled: false,
+ asChild: false,
+ onClick: fn(),
+ },
+ argTypes: {
+ asChild: {
+ control: { type: "boolean" },
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default = {
+ args: {
+ children: "Button",
+ },
+} satisfies Story;
+
+export const Disabled = {
+ args: {
+ children: "Disabled",
+ disabled: true,
+ },
+} satisfies Story;
+
+export const AsChild = {
+ args: {
+ asChild: true,
+ children: Link Button,
+ },
+} satisfies Story;
+
+export const CustomStyles = {
+ args: {
+ children: "Custom Styled",
+ className:
+ "bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600 shadow-lg",
+ },
+} satisfies Story;
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..4af26a6
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import { Slot } from "@radix-ui/react-slot";
+
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const buttonVariants = cva(
+ cn(
+ "cursor-pointer",
+ "px-4 py-2",
+ "disabled:cursor-not-allowed disabled:opacity-70",
+ "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+ ),
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground",
+ destructive:
+ "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline:
+ "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost:
+ "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+);
+
+interface ButtonProps
+ extends React.ComponentProps<"button">,
+ VariantProps {
+ asChild?: boolean;
+}
+
+function Button({
+ className,
+ asChild = false,
+ variant,
+ ...props
+}: ButtonProps) {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+
+ );
+}
+
+export { Button };
diff --git a/src/components/ui/checkbox.stories.tsx b/src/components/ui/checkbox.stories.tsx
new file mode 100644
index 0000000..4139357
--- /dev/null
+++ b/src/components/ui/checkbox.stories.tsx
@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { Checkbox } from "./checkbox";
+import { fn } from "storybook/test";
+
+/** Reusable Checkbox Component */
+const meta: Meta = {
+ title: "Shadcn UI/Checkbox",
+ component: Checkbox,
+ parameters: {
+ layout: "centered",
+ },
+ tags: ["autodocs"],
+ args: {
+ disabled: false,
+ onCheckedChange: fn(),
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default = {} satisfies Story;
+
+export const Disabled = {
+ args: {
+ disabled: true,
+ },
+} satisfies Story;
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..42667ac
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Checkbox({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+
+ );
+}
+
+export { Checkbox };
diff --git a/src/components/ui/input.stories.tsx b/src/components/ui/input.stories.tsx
new file mode 100644
index 0000000..ed6fa4f
--- /dev/null
+++ b/src/components/ui/input.stories.tsx
@@ -0,0 +1,78 @@
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { Input } from "./input";
+import { fn } from "storybook/test";
+
+/** Reusable Input Component */
+const meta: Meta = {
+ title: "Shadcn UI/Input",
+ component: Input,
+ parameters: {
+ layout: "centered",
+ },
+ tags: ["autodocs"],
+ args: {
+ disabled: false,
+ placeholder: "Placeholder",
+ onChange: fn(),
+ onFocus: fn(),
+ onBlur: fn(),
+ },
+ argTypes: {
+ type: {
+ control: { type: "select" },
+ options: ["text", "email", "password", "number"],
+ },
+ disabled: {
+ control: { type: "boolean" },
+ },
+ placeholder: {
+ control: { type: "text" },
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default = {} satisfies Story;
+
+export const WithValue = {
+ args: {
+ defaultValue: "Value",
+ },
+} satisfies Story;
+
+export const Email = {
+ args: {
+ type: "email",
+ placeholder: "example@email.com",
+ },
+} satisfies Story;
+
+export const Password = {
+ args: {
+ type: "password",
+ placeholder: "Password",
+ },
+} satisfies Story;
+
+export const Number = {
+ args: {
+ type: "number",
+ placeholder: "Number",
+ },
+} satisfies Story;
+
+export const Disabled = {
+ args: {
+ placeholder: "Disabled",
+ disabled: true,
+ },
+} satisfies Story;
+
+export const WithError = {
+ args: {
+ placeholder: "With Error",
+ "aria-invalid": true,
+ },
+} satisfies Story;
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..041c0af
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,19 @@
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+ return (
+
+ );
+}
+
+export { Input };
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..a24fb9d
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+import { cn } from "@/lib/utils";
+
+function Label({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+export { Label };
diff --git a/src/components/ui/progress.stories.tsx b/src/components/ui/progress.stories.tsx
new file mode 100644
index 0000000..d3171cd
--- /dev/null
+++ b/src/components/ui/progress.stories.tsx
@@ -0,0 +1,103 @@
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { Progress } from "./progress";
+import { ActionButton } from "./ActionButton/ActionButton";
+import { useState } from "react";
+
+/** Reusable Progress Component */
+const meta: Meta = {
+ title: "Shadcn UI/Progress",
+ component: Progress,
+ parameters: {
+ layout: "centered",
+ },
+ tags: ["autodocs"],
+ args: {
+ value: 50,
+ },
+ argTypes: {
+ value: {
+ control: { type: "range", min: 0, max: 100, step: 1 },
+ description: "Progress value from 0 to 100",
+ },
+ label: {
+ control: { type: "text" },
+ description: "Progress label",
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default = {
+ args: {
+ value: 50,
+ },
+} satisfies Story;
+
+export const Empty = {
+ args: {
+ value: 0,
+ },
+} satisfies Story;
+
+export const Quarter = {
+ args: {
+ value: 25,
+ },
+} satisfies Story;
+
+export const Half = {
+ args: {
+ value: 50,
+ },
+} satisfies Story;
+
+export const ThreeQuarters = {
+ args: {
+ value: 75,
+ },
+} satisfies Story;
+
+export const Complete = {
+ args: {
+ value: 100,
+ },
+} satisfies Story;
+
+export const CustomColors = {
+ args: {
+ value: 80,
+ classNameProgress: "bg-green-200 [&>div]:bg-green-600",
+ },
+} satisfies Story;
+
+export const Animated = {
+ args: {
+ value: 0,
+ },
+ decorators: [
+ (Story) => {
+ const [progress, setProgress] = useState(0);
+
+ const handleSetRandomValue = () => {
+ setProgress(Math.floor(Math.random() * 100));
+ };
+
+ return (
+
+
+
+ Set random value
+
+
+ {label && (
+
+ )}
+
+
+
+
+ {answers.map((answer) => (
+ onAnswerClick(answer)}
+ active={activeAnswers?.includes(answer)}
+ />
+ ))}
+
+ );
+}
+
+export { AnswersList };
diff --git a/src/components/widgets/BottomActionButton/BottomActionButton.stories.tsx b/src/components/widgets/BottomActionButton/BottomActionButton.stories.tsx
new file mode 100644
index 0000000..8947f49
--- /dev/null
+++ b/src/components/widgets/BottomActionButton/BottomActionButton.stories.tsx
@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { BottomActionButton } from "./BottomActionButton";
+import Typography from "@/components/ui/Typography/Typography";
+
+/** Reusable BottomActionButton Component */
+const meta: Meta = {
+ title: "Widgets/BottomActionButton",
+ component: BottomActionButton,
+ tags: ["autodocs"],
+ args: {
+ actionButtonProps: {
+ children: "Continue",
+ },
+ },
+ argTypes: {},
+ render: (args) => (
+
+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates
+ ipsam ea sit libero minus cum consequatur. Atque reprehenderit
+ perspiciatis dolores accusamus hic, sapiente veniam ex dolorem ullam.
+ Aspernatur, vitae debitis.
+
+
+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates
+ ipsam ea sit libero minus cum consequatur. Atque reprehenderit
+ perspiciatis dolores accusamus hic, sapiente veniam ex dolorem ullam.
+ Aspernatur, vitae debitis.
+
+
+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates
+ ipsam ea sit libero minus cum consequatur. Atque reprehenderit
+ perspiciatis dolores accusamus hic, sapiente veniam ex dolorem ullam.
+ Aspernatur, vitae debitis.
+
+
+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates
+ ipsam ea sit libero minus cum consequatur. Atque reprehenderit
+ perspiciatis dolores accusamus hic, sapiente veniam ex dolorem ullam.
+ Aspernatur, vitae debitis.
+
+
+
+ ),
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default = {} satisfies Story;
diff --git a/src/components/widgets/BottomActionButton/BottomActionButton.tsx b/src/components/widgets/BottomActionButton/BottomActionButton.tsx
new file mode 100644
index 0000000..3d64263
--- /dev/null
+++ b/src/components/widgets/BottomActionButton/BottomActionButton.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { GradientBlur } from "../GradientBlur/GradientBlur";
+import { ActionButton } from "@/components/ui/ActionButton/ActionButton";
+
+export interface BottomActionButtonProps extends React.ComponentProps<"div"> {
+ actionButtonProps?: React.ComponentProps;
+}
+
+function BottomActionButton({
+ actionButtonProps,
+ className,
+ ...props
+}: BottomActionButtonProps) {
+ return (
+
+ );
+}
+
+export { BottomActionButton };
diff --git a/src/components/widgets/Coupon/Coupon.stories.tsx b/src/components/widgets/Coupon/Coupon.stories.tsx
new file mode 100644
index 0000000..98b14df
--- /dev/null
+++ b/src/components/widgets/Coupon/Coupon.stories.tsx
@@ -0,0 +1,44 @@
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { Coupon } from "./Coupon";
+import { fn } from "storybook/test";
+import Typography from "@/components/ui/Typography/Typography";
+
+/** Reusable Coupon Component */
+const meta: Meta = {
+ title: "Widgets/Coupon",
+ component: Coupon,
+ tags: ["autodocs"],
+ args: {
+ title: {
+ children: "Special Offer",
+ },
+ offer: {
+ title: {
+ children: "94% OFF",
+ },
+ description: {
+ children: "Одноразовая эксклюзивная скидка",
+ },
+ },
+ promoCode: {
+ children: "HAIR50",
+ },
+ footer: {
+ children: (
+ <>
+ Скопируйте или нажмите{" "}
+
+ Continue
+
+
+ ),
+ },
+ onCopyPromoCode: fn(),
+ },
+ argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default = {} satisfies Story;
diff --git a/src/components/widgets/Coupon/Coupon.tsx b/src/components/widgets/Coupon/Coupon.tsx
new file mode 100644
index 0000000..cdaf4e2
--- /dev/null
+++ b/src/components/widgets/Coupon/Coupon.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import Typography, {
+ TypographyProps,
+} from "@/components/ui/Typography/Typography";
+import { Separator } from "@/components/ui/separator";
+import { Files } from "lucide-react";
+
+interface CouponProps extends Omit, "title"> {
+ title: TypographyProps<"h3">;
+ offer: {
+ title: TypographyProps<"h3">;
+ description: TypographyProps<"p">;
+ };
+ promoCode: TypographyProps<"span">;
+ footer: TypographyProps<"p">;
+ onCopyPromoCode: (code: string) => void;
+}
+
+function Coupon({
+ className,
+ title,
+ offer,
+ promoCode,
+ footer,
+ onCopyPromoCode,
+ ...props
+}: CouponProps) {
+ return (
+
+
+
+ {offer && (
+
+
+
+
+ )}
+
+
+
+ {promoCode && (
+
onCopyPromoCode(promoCode.children as string)}
+ >
+
+
+
+ )}
+ {footer && (
+
+ )}
+
+
+
+
+ Children
+
+ ),
+ },
+ argTypes: {},
+ render: (args) => (
+
+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates
+ ipsam ea sit libero minus cum consequatur. Atque reprehenderit
+ perspiciatis dolores accusamus hic, sapiente veniam ex dolorem ullam.
+ Aspernatur, vitae debitis.
+
+
+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates
+ ipsam ea sit libero minus cum consequatur. Atque reprehenderit
+ perspiciatis dolores accusamus hic, sapiente veniam ex dolorem ullam.
+ Aspernatur, vitae debitis.
+
+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates
+ ipsam ea sit libero minus cum consequatur. Atque reprehenderit
+ perspiciatis dolores accusamus hic, sapiente veniam ex dolorem ullam.
+ Aspernatur, vitae debitis.
+
+
+
+
+
+ {children}
+ {isActiveBlur && (
+
+ )}
+
+ {answers.map((answer) => (
+ handleAnswerClick(answer)}
+ active={selectedAnswer?.id === answer.id}
+ />
+ ))}
+
+ );
+}
+
+export { RadioAnswersList };
diff --git a/src/components/widgets/SelectAnswersList/SelectAnswersList.stories.tsx b/src/components/widgets/SelectAnswersList/SelectAnswersList.stories.tsx
new file mode 100644
index 0000000..79c7df0
--- /dev/null
+++ b/src/components/widgets/SelectAnswersList/SelectAnswersList.stories.tsx
@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { SelectAnswersList } from "./SelectAnswersList";
+import { fn } from "storybook/test";
+
+/** Reusable SelectAnswersList Component */
+const meta: Meta = {
+ title: "Widgets/SelectAnswersList",
+ component: SelectAnswersList,
+ tags: ["autodocs"],
+ args: {
+ answers: [
+ {
+ children: "Receding hairline, want to slow its progress",
+ isCheckbox: true,
+ id: "hairline",
+ },
+ {
+ children: "Experiencing hair loss, exploring",
+ isCheckbox: true,
+ id: "exploring",
+ },
+ {
+ children: "Experiencing hair loss, ready to start",
+ isCheckbox: true,
+ id: "ready-to-start",
+ },
+ {
+ children: "Experiencing hair loss, ready to start",
+ id: "ready-to-start-text",
+ },
+ {
+ children: "Experiencing hair loss, ready to start",
+ emoji: "👩🏼",
+ id: "ready-to-start-emoji",
+ },
+ {
+ children: "Experiencing hair loss, ready to start",
+ emoji: "👩🏼",
+ isCheckbox: true,
+ id: "ready-to-start-emoji-checkbox",
+ },
+ ],
+ activeAnswers: [
+ {
+ children: "Experiencing hair loss, ready to start",
+ isCheckbox: true,
+ id: "ready-to-start",
+ },
+ ],
+ onChangeSelectedAnswers: fn(),
+ },
+ argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default = {} satisfies Story;
diff --git a/src/components/widgets/SelectAnswersList/SelectAnswersList.tsx b/src/components/widgets/SelectAnswersList/SelectAnswersList.tsx
new file mode 100644
index 0000000..4841713
--- /dev/null
+++ b/src/components/widgets/SelectAnswersList/SelectAnswersList.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import {
+ MainButton,
+ MainButtonProps,
+} from "@/components/ui/MainButton/MainButton";
+import { useEffect, useState } from "react";
+
+export interface SelectAnswersListProps extends React.ComponentProps<"div"> {
+ answers: MainButtonProps[];
+ activeAnswers: MainButtonProps[] | null;
+ onChangeSelectedAnswers?: (answers: MainButtonProps[] | null) => void;
+ onAnswerClick?: (answer: MainButtonProps | null) => void;
+}
+
+function SelectAnswersList({
+ className,
+ answers,
+ activeAnswers,
+ onChangeSelectedAnswers,
+ onAnswerClick,
+ ...props
+}: SelectAnswersListProps) {
+ const [selectedAnswers, setSelectedAnswers] = useState<
+ MainButtonProps[] | null
+ >(activeAnswers);
+
+ const handleAnswerClick = (answer: MainButtonProps) => {
+ if (selectedAnswers?.some((a) => a.id === answer.id)) {
+ setSelectedAnswers(
+ (prev) => prev?.filter((a) => a.id !== answer.id) || null
+ );
+ } else {
+ setSelectedAnswers((prev) => [...(prev || []), answer]);
+ }
+ onAnswerClick?.(answer);
+ };
+
+ useEffect(() => {
+ onChangeSelectedAnswers?.(selectedAnswers);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [selectedAnswers]);
+
+ return (
+
+ {answers.map((answer) => (
+ handleAnswerClick(answer)}
+ active={selectedAnswers?.some((a) => a.id === answer.id)}
+ />
+ ))}
+
+ );
+}
+
+export { SelectAnswersList };
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..f024556
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,35 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig } from 'vitest/config';
+
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
+const dirname =
+ typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default defineConfig({
+ test: {
+ projects: [
+ {
+ extends: true,
+ plugins: [
+ // The plugin will run tests for the stories defined in your Storybook config
+ // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+ storybookTest({ configDir: path.join(dirname, '.storybook') }),
+ ],
+ test: {
+ name: 'storybook',
+ browser: {
+ enabled: true,
+ headless: true,
+ provider: 'playwright',
+ instances: [{ browser: 'chromium' }]
+ },
+ setupFiles: ['.storybook/vitest.setup.ts'],
+ },
+ },
+ ],
+ },
+});
diff --git a/vitest.shims.d.ts b/vitest.shims.d.ts
new file mode 100644
index 0000000..f923d47
--- /dev/null
+++ b/vitest.shims.d.ts
@@ -0,0 +1 @@
+///
\ No newline at end of file