From d71cc2c8ba0825a8d0416d923fb750f031fd9fa2 Mon Sep 17 00:00:00 2001
From: Rostyslav Nihrutsa <RostyslavNihrutsa@users.noreply.github.com>
Date: Thu, 12 Mar 2026 17:34:02 +0200
Subject: [PATCH 1/8] style: update styles for Button, TextArea, TextField,
 Tooltip

---
 src/components/Button/button.module.scss       |  1 -
 src/components/TextArea/text-area.module.scss  |  5 +++++
 .../TextField/text-field.module.scss           |  2 +-
 src/components/Tooltip/tooltip.module.scss     |  1 +
 src/components/types.ts                        | 18 +++++++++---------
 src/providers/ui/styles/default.scss           |  4 ++++
 6 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
index 82575f9..a66e649 100644
--- a/src/components/Button/button.module.scss
+++ b/src/components/Button/button.module.scss
@@ -9,7 +9,6 @@ $root: button;
   height: var(--button-height, 34px);
   border-radius: var(--button-border-radius, 10px);
   padding: var(--button-padding, 0 16px);
-  will-change: background, color, transform;
   transition:
     color var(--button-speed-color, var(--speed-color)),
     background var(--button-speed-bg, var(--speed-color)),
diff --git a/src/components/TextArea/text-area.module.scss b/src/components/TextArea/text-area.module.scss
index af93d31..d45a06c 100644
--- a/src/components/TextArea/text-area.module.scss
+++ b/src/components/TextArea/text-area.module.scss
@@ -26,6 +26,11 @@ $root: text-area;
     cursor: not-allowed;
   }
 
+  &::placeholder {
+    color: var(--text-area-placeholder-color, var(--placeholder-color));
+    transition: color var(--text-area-speed-color, var(--speed-color));
+  }
+
   &--full-width {
     width: 100% !important;
   }
diff --git a/src/components/TextField/text-field.module.scss b/src/components/TextField/text-field.module.scss
index 4f29653..17b15c5 100644
--- a/src/components/TextField/text-field.module.scss
+++ b/src/components/TextField/text-field.module.scss
@@ -54,7 +54,7 @@ $root: text-field;
     }
 
     &::placeholder {
-      color: var(--text-field-placeholder-color, var(--text-secondary-color));
+      color: var(--text-field-placeholder-color, var(--placeholder-color));
       transition: color var(--text-field-speed-color, var(--speed-color));
     }
 
diff --git a/src/components/Tooltip/tooltip.module.scss b/src/components/Tooltip/tooltip.module.scss
index 8f4fa97..0e71661 100644
--- a/src/components/Tooltip/tooltip.module.scss
+++ b/src/components/Tooltip/tooltip.module.scss
@@ -20,6 +20,7 @@ $root: tooltip;
     animation-duration: var(--tooltip-speed-animation, var(--speed-md));
     will-change: transform, opacity;
     box-shadow: var(--tooltip-box-shadow-offset, 0 0 5px 0) var(--tooltip-box-shadow-color, rgba(210, 208, 208, 0.47));
+    z-index: var(--tooltip-z-index, 10000);
     transition:
       border-color var(--tooltip-speed-border-color, var(--speed-color)),
       box-shadow var(--tooltip-speed-box-shadow, var(--speed-color)),
diff --git a/src/components/types.ts b/src/components/types.ts
index d9d5f86..97d673b 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -7,34 +7,34 @@ import type {
     FooterProps,
     HeaderProps,
     HighlightProps,
-    IconProps,
     IconButtonProps,
-    ListProps,
+    IconProps,
     ListItemProps,
+    ListProps,
     ModalProps,
     OdometerProps,
     ScrollAreaProps,
-    SelectProps,
-    SelectItemProps,
-    SelectIconProps,
-    SelectValueProps,
     SelectContentProps,
+    SelectIconProps,
+    SelectItemProps,
+    SelectProps,
     SelectTriggerProps,
+    SelectValueProps,
     SwitchProps,
-    TabsProps,
     TabsContentProps,
     TabsListProps,
+    TabsProps,
     TabsTriggerProps,
     TagProps,
     TextAreaProps,
     TextFieldProps,
     ToastProps,
     TooltipProps,
-    TruncateProps,
     TruncateListProps,
-    ViewProps,
+    TruncateProps,
     ViewDrawerProps,
     ViewModalProps,
+    ViewProps,
 } from "../components";
 
 export interface ComponentsProps {
diff --git a/src/providers/ui/styles/default.scss b/src/providers/ui/styles/default.scss
index b66708d..082021b 100644
--- a/src/providers/ui/styles/default.scss
+++ b/src/providers/ui/styles/default.scss
@@ -44,11 +44,14 @@
   --bg-secondary-color: #e9ecef;
 
   --text-default-color: #000;
+  --text-revers-color: #fff;
   --text-primary-color: #2e4453;
   --text-secondary-color: #25282b;
   --text-accent-color: var(--accent-color);
   --text-disabled-color: #333337;
 
+  --placeholder-color: #a3a3a3;
+
   --separator-color: #ccc;
 
   /* Components colors */
@@ -76,6 +79,7 @@
   --bg-secondary-color: #3f404b;
 
   --text-default-color: #fff;
+  --text-revers-color: #000;
   --text-primary-color: #ededed;
   --text-secondary-color: #fbfbfb;
   --text-accent-color: var(--accent-color);

From 307735071b1dfd831bbec300502e31b2e8ad5fe5 Mon Sep 17 00:00:00 2001
From: Rostyslav Nihrutsa <RostyslavNihrutsa@users.noreply.github.com>
Date: Thu, 12 Mar 2026 17:34:31 +0200
Subject: [PATCH 2/8] feat(Popover): add Popover component with subcomponents

---
 src/components/Popover/Popover.stories.tsx | 128 +++++++++++++++++++++
 src/components/Popover/Popover.tsx         |  15 +++
 src/components/Popover/PopoverAnchor.tsx   |  23 ++++
 src/components/Popover/PopoverClose.tsx    |  23 ++++
 src/components/Popover/PopoverContent.tsx  |  73 ++++++++++++
 src/components/Popover/PopoverTrigger.tsx  |  35 ++++++
 src/components/Popover/index.ts            |   5 +
 src/components/Popover/popover.module.scss |  77 +++++++++++++
 src/components/index.ts                    |   1 +
 src/components/types.ts                    |  10 ++
 10 files changed, 390 insertions(+)
 create mode 100644 src/components/Popover/Popover.stories.tsx
 create mode 100644 src/components/Popover/Popover.tsx
 create mode 100644 src/components/Popover/PopoverAnchor.tsx
 create mode 100644 src/components/Popover/PopoverClose.tsx
 create mode 100644 src/components/Popover/PopoverContent.tsx
 create mode 100644 src/components/Popover/PopoverTrigger.tsx
 create mode 100644 src/components/Popover/index.ts
 create mode 100644 src/components/Popover/popover.module.scss

diff --git a/src/components/Popover/Popover.stories.tsx b/src/components/Popover/Popover.stories.tsx
new file mode 100644
index 0000000..be2137a
--- /dev/null
+++ b/src/components/Popover/Popover.stories.tsx
@@ -0,0 +1,128 @@
+import React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+
+import {
+    Popover as PopoverComponent,
+    PopoverAnchor,
+    PopoverContent,
+    PopoverContentProps,
+    PopoverProps,
+    PopoverTrigger,
+    PopoverTriggerProps,
+} from "./index";
+
+import {TextArea, TextField} from "../index";
+
+type Props = PopoverProps &
+    PopoverContentProps &
+    PopoverTriggerProps & {
+        withAnchor: boolean;
+        triggerWidth: number;
+    };
+
+const meta: Meta<Props> = {
+    title: "Components/Popover",
+    component: PopoverComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        // Root
+        modal: {table: {category: "Root"}},
+
+        // Trigger
+        center: {table: {category: "Trigger"}},
+
+        // Content
+        side: {
+            options: ["top", "right", "bottom", "left"],
+            control: {type: "select"},
+            table: {category: "Content"},
+        },
+        align: {
+            options: ["start", "center", "end"],
+            control: {type: "select"},
+            table: {category: "Content"},
+        },
+        sticky: {
+            options: ["partial", "always"],
+            control: {type: "select"},
+            table: {category: "Content"},
+        },
+        alignOffset: {table: {category: "Content"}},
+        sideOffset: {table: {category: "Content"}},
+        minWidth: {table: {category: "Content"}, control: {type: "number"}},
+        maxWidth: {table: {category: "Content"}, control: {type: "number"}},
+        fullWidth: {table: {category: "Content"}},
+        overlay: {table: {category: "Content"}},
+        avoidCollisions: {table: {category: "Content"}},
+        collisionPadding: {table: {category: "Content"}},
+        hideWhenDetached: {table: {category: "Content"}},
+        arrow: {table: {category: "Content"}},
+        arrowWidth: {table: {category: "Content"}},
+        arrowHeight: {table: {category: "Content"}},
+
+        // Storybook view
+        withAnchor: {table: {category: "Storybook_view"}},
+        triggerWidth: {table: {category: "Storybook_view"}, control: {type: "number"}},
+    },
+};
+
+export default meta;
+
+export const Popover: StoryObj<Props> = {
+    args: {
+        modal: false,
+
+        center: false,
+
+        side: "bottom",
+        sideOffset: 10,
+        align: "center",
+        alignOffset: 0,
+        minWidth: undefined,
+        maxWidth: undefined,
+        fullWidth: false,
+        overlay: true,
+        avoidCollisions: true,
+        collisionPadding: 0,
+        sticky: "partial",
+        hideWhenDetached: false,
+        arrow: true,
+        arrowWidth: 10,
+        arrowHeight: 5,
+
+        withAnchor: false,
+        triggerWidth: undefined,
+    },
+    render: args => {
+        const {modal, center, withAnchor, triggerWidth, ...other} = args;
+
+        return (
+            <PopoverComponent modal={modal}>
+                <PopoverTrigger center={center} style={{width: triggerWidth}}>
+                    <span>Open Popover</span>
+                    {withAnchor && <PopoverAnchor>➕</PopoverAnchor>}
+                </PopoverTrigger>
+
+                <PopoverContent {...other}>
+                    <div style={{display: "flex", flexDirection: "column", gap: 15}}>
+                        {["Name", "Surname", "Age"].map(item => (
+                            <div key={item} style={{display: "flex", alignItems: "center", gap: 5}}>
+                                <label style={{fontSize: "16px", fontWeight: 600, flex: 1}} htmlFor={item}>
+                                    {item}
+                                </label>
+                                <div style={{flex: 1}}>
+                                    <TextField
+                                        id={item}
+                                        type={item === "Age" ? "number" : "text"}
+                                        placeholder={`Enter ${item}`}
+                                    />
+                                </div>
+                            </div>
+                        ))}
+                        <TextArea placeholder="Enter your message" />
+                    </div>
+                </PopoverContent>
+            </PopoverComponent>
+        );
+    },
+};
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
new file mode 100644
index 0000000..10a3f49
--- /dev/null
+++ b/src/components/Popover/Popover.tsx
@@ -0,0 +1,15 @@
+import React, {FC, memo} from "react";
+
+import {PopoverProps, Root} from "@radix-ui/react-popover";
+
+import {useComponentProps} from "../../providers";
+
+export {type PopoverProps};
+
+const Popover: FC<PopoverProps> = props => {
+    const mergedProps = {...useComponentProps("popover"), ...props};
+
+    return <Root {...mergedProps} />;
+};
+
+export default memo(Popover);
diff --git a/src/components/Popover/PopoverAnchor.tsx b/src/components/Popover/PopoverAnchor.tsx
new file mode 100644
index 0000000..b72d3e0
--- /dev/null
+++ b/src/components/Popover/PopoverAnchor.tsx
@@ -0,0 +1,23 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {Anchor, PopoverAnchorProps} from "@radix-ui/react-popover";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./popover.module.scss";
+
+export type {PopoverAnchorProps};
+
+const PopoverAnchor: ForwardRefRenderFunction<HTMLDivElement, PopoverAnchorProps> = (props, ref) => {
+    const {className, children, ...other} = {...useComponentProps("popoverAnchor"), ...props};
+
+    return (
+        <Anchor ref={ref} className={classnames(styles["popover__anchor"], className)} {...other}>
+            {children}
+        </Anchor>
+    );
+};
+
+export default memo(forwardRef(PopoverAnchor));
diff --git a/src/components/Popover/PopoverClose.tsx b/src/components/Popover/PopoverClose.tsx
new file mode 100644
index 0000000..d0a4f29
--- /dev/null
+++ b/src/components/Popover/PopoverClose.tsx
@@ -0,0 +1,23 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {Close, PopoverCloseProps} from "@radix-ui/react-popover";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./popover.module.scss";
+
+export type {PopoverCloseProps};
+
+const PopoverClose: ForwardRefRenderFunction<HTMLButtonElement, PopoverCloseProps> = (props, ref) => {
+    const {className, children, ...other} = {...useComponentProps("popoverClose"), ...props};
+
+    return (
+        <Close ref={ref} className={classnames(styles["popover__close"], className)} {...other}>
+            {children}
+        </Close>
+    );
+};
+
+export default memo(forwardRef(PopoverClose));
diff --git a/src/components/Popover/PopoverContent.tsx b/src/components/Popover/PopoverContent.tsx
new file mode 100644
index 0000000..7fe268d
--- /dev/null
+++ b/src/components/Popover/PopoverContent.tsx
@@ -0,0 +1,73 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {
+    Arrow,
+    Content,
+    PopoverContentProps as PopoverContentRadixProps,
+    PopoverPortalProps,
+    Portal,
+} from "@radix-ui/react-popover";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./popover.module.scss";
+
+export interface PopoverContentProps extends PopoverContentRadixProps, PopoverPortalProps {
+    maxWidth?: number;
+    minWidth?: number;
+    fullWidth?: boolean;
+    arrow?: boolean;
+    arrowWidth?: number;
+    arrowHeight?: number;
+    overlay?: boolean;
+    overlayClassname?: string;
+}
+
+const PopoverContent: ForwardRefRenderFunction<HTMLDivElement, PopoverContentProps> = (props, ref) => {
+    const {
+        maxWidth,
+        minWidth,
+        arrow,
+        arrowWidth,
+        arrowHeight,
+        fullWidth,
+        overlay,
+        overlayClassname,
+        container,
+        className,
+        style,
+        children,
+        ...other
+    } = {...useComponentProps("popoverContent"), ...props};
+
+    return (
+        <Portal container={container}>
+            <>
+                {overlay && <div className={classnames(styles["popover__overlay"], overlayClassname)} />}
+                <Content
+                    ref={ref}
+                    className={classnames(
+                        styles["popover__content"],
+                        {
+                            [styles["popover__content--full-width"]]: fullWidth,
+                        },
+                        className
+                    )}
+                    {...other}
+                    style={{
+                        minWidth: minWidth ? minWidth : undefined,
+                        maxWidth: maxWidth ? maxWidth : undefined,
+                        ...style,
+                    }}
+                >
+                    {children}
+                    {arrow && <Arrow className={styles["popover__arrow"]} width={arrowWidth} height={arrowHeight} />}
+                </Content>
+            </>
+        </Portal>
+    );
+};
+
+export default memo(forwardRef(PopoverContent));
diff --git a/src/components/Popover/PopoverTrigger.tsx b/src/components/Popover/PopoverTrigger.tsx
new file mode 100644
index 0000000..48a9f37
--- /dev/null
+++ b/src/components/Popover/PopoverTrigger.tsx
@@ -0,0 +1,35 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {PopoverTriggerProps as PopoverTriggerRadixProps, Trigger} from "@radix-ui/react-popover";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./popover.module.scss";
+
+export interface PopoverTriggerProps extends PopoverTriggerRadixProps {
+    center?: boolean;
+}
+
+const PopoverTrigger: ForwardRefRenderFunction<HTMLButtonElement, PopoverTriggerProps> = (props, ref) => {
+    const {center, className, children, ...other} = {...useComponentProps("popoverTrigger"), ...props};
+
+    return (
+        <Trigger
+            ref={ref}
+            className={classnames(
+                styles["popover__trigger"],
+                {
+                    [styles["popover__trigger--center"]]: center,
+                },
+                className
+            )}
+            {...other}
+        >
+            {children}
+        </Trigger>
+    );
+};
+
+export default memo(forwardRef(PopoverTrigger));
diff --git a/src/components/Popover/index.ts b/src/components/Popover/index.ts
new file mode 100644
index 0000000..217e678
--- /dev/null
+++ b/src/components/Popover/index.ts
@@ -0,0 +1,5 @@
+export {default as Popover, type PopoverProps} from "./Popover";
+export {default as PopoverClose, type PopoverCloseProps} from "./PopoverClose";
+export {default as PopoverAnchor, type PopoverAnchorProps} from "./PopoverAnchor";
+export {default as PopoverTrigger, type PopoverTriggerProps} from "./PopoverTrigger";
+export {default as PopoverContent, type PopoverContentProps} from "./PopoverContent";
diff --git a/src/components/Popover/popover.module.scss b/src/components/Popover/popover.module.scss
new file mode 100644
index 0000000..f67bba9
--- /dev/null
+++ b/src/components/Popover/popover.module.scss
@@ -0,0 +1,77 @@
+$root: popover;
+
+.#{$root} {
+  &__overlay {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: var(--popover-overlay-bg, var(--overlay-bg, rgba(0, 0, 0, 0.5)));
+  }
+
+  &__anchor {
+    height: 100%;
+  }
+
+  &__trigger {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    box-sizing: border-box;
+    color: var(--popover-trigger-color);
+    background: var(--popover-trigger-bg-color, var(--bg-secondary-color));
+    box-shadow: var(--popover-trigger-shadow-offset) var(--popover-trigger-shadow-color);
+
+    border-width: var(--popover-trigger-border-width, 1px);
+    border-style: var(--popover-trigger-border-style, solid);
+    border-color: var(--popover-trigger-border-color, var(--border-color));
+    border-radius: var(--popover-trigger-border-radius, 10px);
+
+    font-size: var(--popover-trigger-font-size, var(--popover-font-size, 14px));
+    font-weight: var(--popover-trigger-font-weight, 500);
+    padding: var(--popover-trigger-padding, 8px 12px);
+    height: var(--popover-trigger-height);
+    gap: var(--popover-trigger-gap, 5px);
+    transition:
+      color var(--popover-speed-color, var(--speed-color)),
+      background var(--popover-speed-background, var(--speed-color)),
+      box-shadow var(--popover-speed-shadow, var(--speed-color)),
+      border-color var(--popover-speed-border-color, var(--speed-color));
+
+    &--center {
+      justify-content: center;
+    }
+
+    &:hover {
+      box-shadow: var(--popover-trigger-shadow-offset-hover) var(--popover-trigger-shadow-color);
+      border-width: var(--popover-trigger-border-width-hover, var(--popover-trigger-border-width, 1px));
+      border-color: var(--popover-trigger-border-color-hover, var(--popover-trigger-border-color, var(--border-color)));
+    }
+  }
+
+  &__content {
+    overflow: hidden;
+    padding: var(--popover-content-padding, 16px);
+    background: var(--popover-content-bg-color, var(--bg-primary-color));
+    border-radius: var(--popover-content-border-radius, 8px);
+    box-shadow: var(--popover-content-shadow-offset, 0 0 5px 0) var(--popover-content-shadow-color, rgba(0, 0, 0, 0.25));
+    height: var(--popover-content-height);
+    max-height: var(--popover-content-max-height, var(--radix-popover-content-available-height));
+    transition:
+      background var(--popover-speed-background, var(--speed-color)),
+      box-shadow var(--popover-speed-shadow, var(--speed-color));
+
+    &--full-width {
+      width: var(--popover-content-full-width, var(--radix-popover-content-available-width));
+    }
+  }
+
+  &__arrow {
+    & > polygon {
+      fill: var(--popover-arrow-bg-color, var(--popover-content-bg-color, var(--bg-primary-color)));
+    }
+  }
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 0d193c0..27f18bc 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -14,6 +14,7 @@ export * from "./List";
 export * from "./ListItem";
 export * from "./Modal";
 export * from "./Odometer";
+export * from "./Popover";
 export * from "./ScrollArea";
 export * from "./Select";
 export * from "./SvgSprite";
diff --git a/src/components/types.ts b/src/components/types.ts
index 97d673b..4016533 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -13,6 +13,11 @@ import type {
     ListProps,
     ModalProps,
     OdometerProps,
+    PopoverAnchorProps,
+    PopoverCloseProps,
+    PopoverContentProps,
+    PopoverProps,
+    PopoverTriggerProps,
     ScrollAreaProps,
     SelectContentProps,
     SelectIconProps,
@@ -52,6 +57,11 @@ export interface ComponentsProps {
     listItem?: ListItemProps;
     modal?: ModalProps;
     odometer?: Pick<OdometerProps, "auto" | "format" | "duration">;
+    popover: PopoverProps;
+    popoverClose: PopoverCloseProps;
+    popoverAnchor: PopoverAnchorProps;
+    popoverTrigger: PopoverTriggerProps;
+    popoverContent: PopoverContentProps;
     scrollArea?: ScrollAreaProps;
     select?: SelectProps;
     selectItem?: SelectItemProps;

From 06712c63427cd2bda786aad6dd0690c13f3a4fe6 Mon Sep 17 00:00:00 2001
From: Rostyslav Nihrutsa <RostyslavNihrutsa@users.noreply.github.com>
Date: Thu, 12 Mar 2026 17:34:49 +0200
Subject: [PATCH 3/8] feat(Shift): add Shift component

---
 src/components/Shift/Shift.stories.tsx | 53 ++++++++++++++
 src/components/Shift/Shift.tsx         | 96 ++++++++++++++++++++++++++
 src/components/Shift/index.ts          |  1 +
 src/components/Shift/shift.module.scss | 21 ++++++
 src/components/index.ts                |  1 +
 5 files changed, 172 insertions(+)
 create mode 100644 src/components/Shift/Shift.stories.tsx
 create mode 100644 src/components/Shift/Shift.tsx
 create mode 100644 src/components/Shift/index.ts
 create mode 100644 src/components/Shift/shift.module.scss

diff --git a/src/components/Shift/Shift.stories.tsx b/src/components/Shift/Shift.stories.tsx
new file mode 100644
index 0000000..6558c1c
--- /dev/null
+++ b/src/components/Shift/Shift.stories.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+
+import ShiftComponent, {ShiftProps} from "./Shift";
+import {TextField} from "../index";
+
+type Props = ShiftProps & {
+    height?: number;
+};
+
+const meta: Meta<Props> = {
+    title: "Components/Shift",
+    component: ShiftComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        active: {control: {type: "number"}},
+        height: {control: {type: "number"}},
+        adaptiveHeight: {control: {type: "boolean"}},
+    },
+};
+
+export default meta;
+
+export const Shift: StoryObj<Props> = {
+    args: {
+        active: 1,
+        adaptiveHeight: false,
+        height: undefined,
+    },
+    render: args => {
+        return (
+            <ShiftComponent {...args} style={{border: "1px solid red", width: 300}}>
+                <div
+                    style={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                    }}
+                >
+                    <div>
+                        <h2>Title</h2>
+                        <br />
+                        <span>Subtitle</span>
+                    </div>
+                    <span>🔍</span>
+                </div>
+                <div>
+                    <TextField after={"X"} />
+                </div>
+            </ShiftComponent>
+        );
+    },
+};
diff --git a/src/components/Shift/Shift.tsx b/src/components/Shift/Shift.tsx
new file mode 100644
index 0000000..875f616
--- /dev/null
+++ b/src/components/Shift/Shift.tsx
@@ -0,0 +1,96 @@
+import React, {
+    Children,
+    cloneElement,
+    ComponentProps,
+    createElement,
+    CSSProperties,
+    forwardRef,
+    ForwardRefRenderFunction,
+    isValidElement,
+    memo,
+    useImperativeHandle,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from "react";
+
+import classnames from "classnames";
+
+import styles from "./shift.module.scss";
+
+export interface ShiftProps extends ComponentProps<"div"> {
+    active?: number;
+    height?: number;
+    adaptiveHeight?: boolean;
+    itemClassName?: string;
+}
+
+const Shift: ForwardRefRenderFunction<HTMLDivElement, ShiftProps> = (props, ref) => {
+    const {
+        active = 1,
+        height,
+        adaptiveHeight = true,
+        itemClassName,
+        className,
+        style,
+        children: childrenProps,
+        ...other
+    } = props;
+
+    const [currentHeight, setCurrentHeight] = useState<number>();
+
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const children = Children.map(childrenProps, (child, index) => {
+        const item = index + 1;
+
+        const className = classnames(styles["shift-item"], itemClassName);
+
+        const style: CSSProperties = {
+            opacity: 0,
+        };
+
+        if (item > active) {
+            style.transform = `translate3d(0, ${(item - active) * 100}%, 0)`;
+        } else if (item < active) {
+            style.transform = `translate3d(0, -${(active - item) * 100}%, 0)`;
+        } else {
+            style.opacity = 1;
+            style.transform = "translate3d(0, 0, 0)";
+        }
+
+        if (!isValidElement<Record<string, any>>(child)) {
+            return createElement("span", {className, style}, child);
+        }
+
+        return cloneElement(child, {
+            style: {...child.props.style, ...style},
+            className: classnames(className, child.props.className),
+        });
+    });
+
+    useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);
+
+    useLayoutEffect(() => {
+        const el = containerRef.current?.children[active - 1] as HTMLElement;
+
+        el && setCurrentHeight(el.offsetHeight);
+    }, [active]);
+
+    return (
+        <div
+            ref={containerRef}
+            className={classnames(styles["shift"], className)}
+            style={{
+                ...style,
+                ...(adaptiveHeight ? {height: currentHeight} : {}),
+                ...(height ? {height} : {}),
+            }}
+            {...other}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default memo(forwardRef(Shift));
diff --git a/src/components/Shift/index.ts b/src/components/Shift/index.ts
new file mode 100644
index 0000000..42b30d2
--- /dev/null
+++ b/src/components/Shift/index.ts
@@ -0,0 +1 @@
+export {default as Shift, type ShiftProps} from "./Shift";
diff --git a/src/components/Shift/shift.module.scss b/src/components/Shift/shift.module.scss
new file mode 100644
index 0000000..e8c8b45
--- /dev/null
+++ b/src/components/Shift/shift.module.scss
@@ -0,0 +1,21 @@
+.shift {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  transition: height var(--shift-speed-height, var(--speed-sm));
+
+  &-item {
+    position: absolute;
+    width: 100%;
+    box-sizing: border-box;
+    left: 0;
+    top: 0;
+    transition:
+      transform var(--shift-speed-transform, var(--speed-sm)),
+      opacity var(--shift-speed-opacity, var(--speed-sm));
+  }
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 27f18bc..051c1d3 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -17,6 +17,7 @@ export * from "./Odometer";
 export * from "./Popover";
 export * from "./ScrollArea";
 export * from "./Select";
+export * from "./Shift";
 export * from "./SvgSprite";
 export * from "./Switch";
 export * from "./Tabs";

From b724242a6f371fcfcf02a9c184cfe9f0e0cd179d Mon Sep 17 00:00:00 2001
From: Rostyslav Nihrutsa <RostyslavNihrutsa@users.noreply.github.com>
Date: Thu, 12 Mar 2026 17:35:15 +0200
Subject: [PATCH 4/8] feat(ToggleGroup): add ToggleGroup component

---
 .../ToggleGroup/ToggleGroup.stories.tsx       | 55 +++++++++++++++++++
 src/components/ToggleGroup/ToggleGroup.tsx    | 25 +++++++++
 .../ToggleGroup/ToggleGroupIndicator.tsx      | 17 ++++++
 .../ToggleGroup/ToggleGroupItem.tsx           | 28 ++++++++++
 src/components/ToggleGroup/index.ts           |  8 +++
 .../ToggleGroup/toggleGroup.module.scss       | 32 +++++++++++
 src/components/index.ts                       |  1 +
 src/components/types.ts                       |  4 ++
 8 files changed, 170 insertions(+)
 create mode 100644 src/components/ToggleGroup/ToggleGroup.stories.tsx
 create mode 100644 src/components/ToggleGroup/ToggleGroup.tsx
 create mode 100644 src/components/ToggleGroup/ToggleGroupIndicator.tsx
 create mode 100644 src/components/ToggleGroup/ToggleGroupItem.tsx
 create mode 100644 src/components/ToggleGroup/index.ts
 create mode 100644 src/components/ToggleGroup/toggleGroup.module.scss

diff --git a/src/components/ToggleGroup/ToggleGroup.stories.tsx b/src/components/ToggleGroup/ToggleGroup.stories.tsx
new file mode 100644
index 0000000..c6e395a
--- /dev/null
+++ b/src/components/ToggleGroup/ToggleGroup.stories.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+
+import {Button} from "../index";
+import {ToggleGroup as ToggleGroupComponent, ToggleGroupItem, ToggleGroupIndicator, ToggleGroupProps} from "./index";
+
+type Props = ToggleGroupProps;
+
+const meta: Meta<Props> = {
+    title: "Components/ToggleGroup",
+    component: ToggleGroupComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        type: {
+            options: ["single", "multiple"],
+            control: {type: "select"},
+        },
+        orientation: {
+            options: ["horizontal", "vertical", undefined],
+            control: {type: "select"},
+        },
+        dir: {
+            options: ["ltr", "rtl", undefined],
+            control: {type: "select"},
+        },
+    },
+};
+
+export default meta;
+
+export const ToggleGroup: StoryObj<Props> = {
+    args: {
+        type: "single",
+        orientation: undefined,
+        dir: undefined,
+        disabled: false,
+        rovingFocus: true,
+        loop: true,
+    },
+
+    render: (props: Props) => {
+        return (
+            <ToggleGroupComponent {...props}>
+                {[1, 2, 3, 4].map(item => (
+                    <ToggleGroupItem value={String(item)} key={item}>
+                        <Button>
+                            {`Option ${item}`}
+                            <ToggleGroupIndicator>✅</ToggleGroupIndicator>
+                        </Button>
+                    </ToggleGroupItem>
+                ))}
+            </ToggleGroupComponent>
+        );
+    },
+};
diff --git a/src/components/ToggleGroup/ToggleGroup.tsx b/src/components/ToggleGroup/ToggleGroup.tsx
new file mode 100644
index 0000000..1b6d271
--- /dev/null
+++ b/src/components/ToggleGroup/ToggleGroup.tsx
@@ -0,0 +1,25 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {Root, ToggleGroupMultipleProps, ToggleGroupSingleProps} from "@radix-ui/react-toggle-group";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./toggleGroup.module.scss";
+
+export type {ToggleGroupSingleProps, ToggleGroupMultipleProps};
+
+export type ToggleGroupProps = React.ComponentProps<typeof Root>;
+
+const ToggleGroup: ForwardRefRenderFunction<HTMLDivElement, ToggleGroupProps> = (props, ref) => {
+    const {className, children, ...other} = {...useComponentProps("toggleGroup"), ...props};
+
+    return (
+        <Root ref={ref} className={classnames(styles["toggle-group"], className)} {...other}>
+            {children}
+        </Root>
+    );
+};
+
+export default memo(forwardRef(ToggleGroup));
diff --git a/src/components/ToggleGroup/ToggleGroupIndicator.tsx b/src/components/ToggleGroup/ToggleGroupIndicator.tsx
new file mode 100644
index 0000000..a7728b4
--- /dev/null
+++ b/src/components/ToggleGroup/ToggleGroupIndicator.tsx
@@ -0,0 +1,17 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo, ComponentProps} from "react";
+
+import classnames from "classnames";
+
+import styles from "./toggleGroup.module.scss";
+
+const ToggleGroupIndicator: ForwardRefRenderFunction<HTMLDivElement, ComponentProps<"div">> = (props, ref) => {
+    const {children, className, ...other} = props;
+
+    return (
+        <div ref={ref} className={classnames(styles["toggle-group__indicator"], className)} {...other}>
+            {children}
+        </div>
+    );
+};
+
+export default memo(forwardRef(ToggleGroupIndicator));
diff --git a/src/components/ToggleGroup/ToggleGroupItem.tsx b/src/components/ToggleGroup/ToggleGroupItem.tsx
new file mode 100644
index 0000000..859ea40
--- /dev/null
+++ b/src/components/ToggleGroup/ToggleGroupItem.tsx
@@ -0,0 +1,28 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {ToggleGroupItem as ToggleGroupItemRadix, ToggleGroupItemProps} from "@radix-ui/react-toggle-group";
+
+import {useComponentProps} from "../../providers";
+
+export type {ToggleGroupItemProps};
+
+import styles from "./toggleGroup.module.scss";
+
+const ToggleGroupItem: ForwardRefRenderFunction<HTMLButtonElement, ToggleGroupItemProps> = (props, ref) => {
+    const {asChild = true, children, className, ...other} = {...useComponentProps("toggleGroupItem"), ...props};
+
+    return (
+        <ToggleGroupItemRadix
+            {...other}
+            ref={ref}
+            asChild={asChild}
+            className={classnames(styles["toggle-group__item"], className)}
+        >
+            {children}
+        </ToggleGroupItemRadix>
+    );
+};
+
+export default memo(forwardRef(ToggleGroupItem));
diff --git a/src/components/ToggleGroup/index.ts b/src/components/ToggleGroup/index.ts
new file mode 100644
index 0000000..e0364ef
--- /dev/null
+++ b/src/components/ToggleGroup/index.ts
@@ -0,0 +1,8 @@
+export {
+    default as ToggleGroup,
+    type ToggleGroupProps,
+    type ToggleGroupSingleProps,
+    type ToggleGroupMultipleProps,
+} from "./ToggleGroup";
+export {default as ToggleGroupItem, type ToggleGroupItemProps} from "./ToggleGroupItem";
+export {default as ToggleGroupIndicator} from "./ToggleGroupIndicator";
diff --git a/src/components/ToggleGroup/toggleGroup.module.scss b/src/components/ToggleGroup/toggleGroup.module.scss
new file mode 100644
index 0000000..5e18146
--- /dev/null
+++ b/src/components/ToggleGroup/toggleGroup.module.scss
@@ -0,0 +1,32 @@
+$root: toggle-group;
+
+.#{$root} {
+  display: flex;
+  gap: var(--toggle-group-gap, 10px);
+  padding: var(--toggle-group-padding, 0);
+  transition: background var(--toggle-group-speed-bg, var(--speed-color));
+
+  &[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  &__item {
+    color: var(--text-primary-color);
+    transition:
+      background var(--toggle-group-item-speed-bg, var(--speed-color)),
+      color var(--toggle-group-item-speed-color, var(--speed-color));
+
+    &[data-state="on"] {
+      background: var(--toggle-group-item-checked-bg, var(--primary-color));
+      color: var(--toggle-group-item-checked-color);
+    }
+  }
+
+  &__indicator {
+    display: none;
+
+    .#{$root}__item[data-state="on"] & {
+      display: inline-flex;
+    }
+  }
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 051c1d3..e14975f 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -25,6 +25,7 @@ export * from "./Tag";
 export * from "./TextArea";
 export * from "./TextField";
 export * from "./Toast";
+export * from "./ToggleGroup";
 export * from "./Tooltip";
 export * from "./Truncate";
 export * from "./TruncateList";
diff --git a/src/components/types.ts b/src/components/types.ts
index 4016533..384cd93 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -34,6 +34,8 @@ import type {
     TextAreaProps,
     TextFieldProps,
     ToastProps,
+    ToggleGroupItemProps,
+    ToggleGroupProps,
     TooltipProps,
     TruncateListProps,
     TruncateProps,
@@ -90,6 +92,8 @@ export interface ComponentsProps {
         | "radius"
         | "color"
     >;
+    toggleGroup: Omit<ToggleGroupProps, "type" | "value" | "defaultValue" | "onValueChange">;
+    toggleGroupItem: Omit<ToggleGroupItemProps, "value">;
     tooltip?: Omit<TooltipProps, "content">;
     truncate?: TruncateProps;
     truncateList?: TruncateListProps;

From 0113fabfeabdd1544ad67b6213f56f41478db5ac Mon Sep 17 00:00:00 2001
From: Rostyslav Nihrutsa <RostyslavNihrutsa@users.noreply.github.com>
Date: Thu, 12 Mar 2026 17:35:40 +0200
Subject: [PATCH 5/8] refactor(Select): improve Select component

---
 src/components/Select/Select.stories.tsx      | 148 +++++++++++++-----
 src/components/Select/SelectContent.tsx       |   6 +-
 src/components/Select/SelectItem.tsx          |  17 +-
 src/components/Select/SelectItemIndicator.tsx |  17 ++
 src/components/Select/SelectItemText.tsx      |  17 ++
 src/components/Select/index.ts                |   2 +
 src/components/Select/select.module.scss      |   8 +-
 7 files changed, 161 insertions(+), 54 deletions(-)
 create mode 100644 src/components/Select/SelectItemIndicator.tsx
 create mode 100644 src/components/Select/SelectItemText.tsx

diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 3cef0b2..5481308 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -1,16 +1,23 @@
 import React from "react";
 import {Meta, StoryObj} from "@storybook/react";
 
-import {Header} from "../Header";
-import {Footer} from "../Footer";
-import {ViewportProvider} from "../Viewport";
+import {
+    Select as SelectComponent,
+    SelectContent,
+    SelectContentProps,
+    SelectItem,
+    SelectItemProps,
+    SelectProps,
+    SelectTrigger,
+    SelectTriggerProps,
+} from "./index";
 
-import SelectComponent, {SelectProps} from "./Select";
-import SelectItem from "./SelectItem";
-import SelectTrigger, {SelectTriggerProps} from "./SelectTrigger";
-import SelectContent, {SelectContentProps} from "./SelectContent";
-
-type Props = SelectProps & SelectContentProps & SelectTriggerProps;
+type Props = SelectProps &
+    SelectContentProps &
+    SelectTriggerProps &
+    SelectItemProps & {
+        firstItem?: string;
+    };
 
 const items = ["Apple", "Banana", "Blueberry", "Orange", "Strawberry"];
 
@@ -18,45 +25,102 @@ const meta: Meta<Props> = {
     title: "Components/Select",
     component: SelectComponent,
     tags: ["autodocs"],
-    argTypes: {},
+    argTypes: {
+        // Content
+        position: {
+            options: ["item-aligned", "popper"],
+            control: {type: "select"},
+            table: {category: "Content"},
+        },
+        side: {
+            options: ["top", "right", "bottom", "left"],
+            control: {type: "select"},
+            table: {category: "Content"},
+        },
+        sideOffset: {table: {category: "Content"}},
+        align: {
+            options: ["start", "center", "end"],
+            control: {type: "select"},
+            table: {category: "Content"},
+        },
+        alignOffset: {table: {category: "Content"}},
+        avoidCollisions: {table: {category: "Content"}},
+        collisionPadding: {table: {category: "Content"}},
+        sticky: {
+            options: ["partial", "always"],
+            control: {type: "select"},
+            table: {category: "Content"},
+        },
+        fullWidth: {table: {category: "Content"}},
+        hideWhenDetached: {table: {category: "Content"}},
+        arrowPadding: {table: {category: "Content"}},
+        arrow: {table: {category: "Content"}},
+        arrowWidth: {table: {category: "Content"}},
+        arrowHeight: {table: {category: "Content"}},
+
+        // Trigger
+        icon: {table: {category: "Trigger"}},
+        center: {table: {category: "Trigger"}},
+        ellipsis: {table: {category: "Trigger"}},
+        placeholder: {table: {category: "Trigger"}},
+
+        // Item
+        indicator: {table: {category: "Item"}},
+
+        firstItem: {table: {category: "Storybook_view"}},
+    },
 };
 
 export default meta;
 
 export const Select: StoryObj<Props> = {
-    render: () => {
+    args: {
+        icon: "➕",
+        center: false,
+        ellipsis: false,
+        placeholder: "Select a fruit…",
+
+        position: "popper",
+        side: "bottom",
+        sideOffset: 0,
+        align: "start",
+        alignOffset: 0,
+        avoidCollisions: true,
+        collisionPadding: 10,
+        arrowPadding: 0,
+        fullWidth: true,
+        sticky: "partial",
+        hideWhenDetached: false,
+        arrow: true,
+        arrowWidth: 10,
+        arrowHeight: 5,
+
+        indicator: "✅",
+
+        firstItem: "",
+    },
+    render: args => {
+        const {indicator, firstItem, center, icon, placeholder, ...other} = args;
+
+        const arr = firstItem ? [firstItem, ...items] : items;
+
         return (
-            <ViewportProvider style={{border: "1px solid black", borderRadius: "10px"}}>
-                <Header title="Select Component" style={{paddingBottom: "10px"}} />
-                <div style={{flex: 1, display: "flex", justifyContent: "center", alignItems: "center"}}>
-                    <SelectComponent>
-                        <SelectTrigger style={{width: "200px"}} placeholder="Select a fruit…" icon={"➕"} />
-                        <SelectContent
-                            position="popper"
-                            // side='top'
-                            sideOffset={9}
-                            // alignOffset={20}
-                            arrowPadding={80}
-                            // align="center"
-                            fullWidth={true}
-                            // arrow={true}
-                            // arrowHeight={15}
-                            // arrowWidth={25}
-                        >
-                            {items.map(item => (
-                                <SelectItem
-                                    key={item}
-                                    value={item}
-                                    textValue={item}
-                                    disabled={item === "Banana"}
-                                    // indicator={"❤️"}
-                                ></SelectItem>
-                            ))}
-                        </SelectContent>
-                    </SelectComponent>
-                </div>
-                <Footer left={"❤️"} right={"⭐"} shadow={true} style={{paddingTop: "10px"}} />
-            </ViewportProvider>
+            <div style={{flex: 1, display: "flex", justifyContent: "center", alignItems: "center"}}>
+                <SelectComponent>
+                    <SelectTrigger style={{width: "200px"}} placeholder={placeholder} center={center} icon={icon} />
+                    <SelectContent {...other}>
+                        {arr.map(item => (
+                            <SelectItem
+                                key={item}
+                                value={item}
+                                textValue={item}
+                                disabled={item === "Banana"}
+                                indicator={indicator}
+                            />
+                        ))}
+                    </SelectContent>
+                </SelectComponent>
+            </div>
         );
     },
 };
diff --git a/src/components/Select/SelectContent.tsx b/src/components/Select/SelectContent.tsx
index 5218acf..c80e3f2 100644
--- a/src/components/Select/SelectContent.tsx
+++ b/src/components/Select/SelectContent.tsx
@@ -33,7 +33,8 @@ const SelectContent: ForwardRefRenderFunction<HTMLDivElement, SelectContentProps
         arrow,
         arrowWidth,
         arrowHeight,
-        fullWidth,
+        fullWidth = true,
+        position = "popper",
         container,
         viewportProps,
         scrollUpButton,
@@ -54,6 +55,7 @@ const SelectContent: ForwardRefRenderFunction<HTMLDivElement, SelectContentProps
                     },
                     className
                 )}
+                position={position}
                 {...other}
             >
                 {scrollUpButton && (
@@ -75,7 +77,7 @@ const SelectContent: ForwardRefRenderFunction<HTMLDivElement, SelectContentProps
                     </SelectScrollDownButton>
                 )}
 
-                {arrow && <Arrow width={arrowWidth} height={arrowHeight} />}
+                {arrow && <Arrow className={styles["select__arrow"]} width={arrowWidth} height={arrowHeight} />}
             </Content>
         </Portal>
     );
diff --git a/src/components/Select/SelectItem.tsx b/src/components/Select/SelectItem.tsx
index a8c40ae..5ec3807 100644
--- a/src/components/Select/SelectItem.tsx
+++ b/src/components/Select/SelectItem.tsx
@@ -2,10 +2,13 @@ import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
 
 import classnames from "classnames";
 
-import {Item, ItemIndicator, ItemText, SelectItemProps as SelectItemRadixProps} from "@radix-ui/react-select";
+import {Item, SelectItemProps as SelectItemRadixProps} from "@radix-ui/react-select";
 
 import {useComponentProps} from "../../providers";
 
+import SelectItemIndicator from "./SelectItemIndicator";
+import SelectItemText from "./SelectItemText";
+
 import styles from "./select.module.scss";
 
 export interface SelectItemProps extends SelectItemRadixProps {
@@ -14,24 +17,20 @@ export interface SelectItemProps extends SelectItemRadixProps {
 }
 
 const SelectItem: ForwardRefRenderFunction<HTMLDivElement, SelectItemProps> = (props, ref) => {
-    const {indicator, textValue, className, indicatorClassname, children, ...other} = {
+    const {textValue, indicator, indicatorClassname, className, children, ...other} = {
         ...useComponentProps("selectItem"),
         ...props,
     };
 
     return (
-        <Item ref={ref} className={classnames(styles["select__item"], className)} textValue={textValue} {...other}>
+        <Item ref={ref} textValue={textValue} className={classnames(styles["select__item"], className)} {...other}>
             {children && children}
 
             {!children && (
                 <>
-                    {indicator && (
-                        <ItemIndicator className={classnames(styles["select__item__indicator"], indicatorClassname)}>
-                            {indicator}
-                        </ItemIndicator>
-                    )}
+                    {indicator && <SelectItemIndicator className={indicatorClassname}>{indicator}</SelectItemIndicator>}
 
-                    {textValue && <ItemText className={classnames(styles["select__item__text"])}>{textValue}</ItemText>}
+                    {textValue && <SelectItemText>{textValue}</SelectItemText>}
                 </>
             )}
         </Item>
diff --git a/src/components/Select/SelectItemIndicator.tsx b/src/components/Select/SelectItemIndicator.tsx
new file mode 100644
index 0000000..8931fdc
--- /dev/null
+++ b/src/components/Select/SelectItemIndicator.tsx
@@ -0,0 +1,17 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {ItemIndicator, SelectItemIndicatorProps} from "@radix-ui/react-select";
+
+import styles from "./select.module.scss";
+
+export {type SelectItemIndicatorProps};
+
+const SelectItemIndicator: ForwardRefRenderFunction<HTMLSpanElement, SelectItemIndicatorProps> = (props, ref) => {
+    const {className, ...other} = props;
+
+    return <ItemIndicator ref={ref} className={classnames(styles["select__item__indicator"], className)} {...other} />;
+};
+
+export default memo(forwardRef(SelectItemIndicator));
diff --git a/src/components/Select/SelectItemText.tsx b/src/components/Select/SelectItemText.tsx
new file mode 100644
index 0000000..07563ab
--- /dev/null
+++ b/src/components/Select/SelectItemText.tsx
@@ -0,0 +1,17 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {ItemText, SelectItemTextProps} from "@radix-ui/react-select";
+
+import styles from "./select.module.scss";
+
+export {type SelectItemTextProps};
+
+const SelectItemText: ForwardRefRenderFunction<HTMLSpanElement, SelectItemTextProps> = (props, ref) => {
+    const {className, ...other} = props;
+
+    return <ItemText ref={ref} className={classnames(styles["select__item__text"], className)} {...other} />;
+};
+
+export default memo(forwardRef(SelectItemText));
diff --git a/src/components/Select/index.ts b/src/components/Select/index.ts
index 7dd282b..bc8a039 100644
--- a/src/components/Select/index.ts
+++ b/src/components/Select/index.ts
@@ -1,5 +1,7 @@
 export {default as Select, type SelectProps} from "./Select";
 export {default as SelectItem, type SelectItemProps} from "./SelectItem";
+export {default as SelectItemText, type SelectItemTextProps} from "./SelectItemText";
+export {default as SelectItemIndicator, type SelectItemIndicatorProps} from "./SelectItemIndicator";
 export {default as SelectIcon, type SelectIconProps} from "./SelectIcon";
 export {default as SelectValue, type SelectValueProps} from "./SelectValue";
 export {default as SelectTrigger, type SelectTriggerProps} from "./SelectTrigger";
diff --git a/src/components/Select/select.module.scss b/src/components/Select/select.module.scss
index 16b6cfb..56f25dd 100644
--- a/src/components/Select/select.module.scss
+++ b/src/components/Select/select.module.scss
@@ -46,7 +46,7 @@ $root: select;
     }
 
     &[data-placeholder] {
-      color: var(--text-disabled-color);
+      color: var(--select-placeholder-color, var(--placeholder-color));
     }
 
     @include theme.rtl {
@@ -147,4 +147,10 @@ $root: select;
       background-color: var(--select-scroll-btn-hover-bg-color, var(--bg-secondary-color));
     }
   }
+
+  &__arrow {
+    & > polygon {
+      fill: var(--select-arrow-bg-color, var(--select-content-bg-color, var(--bg-primary-color)));
+    }
+  }
 }

From 08519ecccbcf3fa0adcc1b28fbe6003c2f7cfee0 Mon Sep 17 00:00:00 2001
From: Rostyslav Nihrutsa <RostyslavNihrutsa@users.noreply.github.com>
Date: Thu, 12 Mar 2026 17:52:43 +0200
Subject: [PATCH 6/8] refactor(Shift): update type checks and improve style
 merging logic

---
 src/components/Shift/Shift.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Shift/Shift.tsx b/src/components/Shift/Shift.tsx
index 875f616..bf26d4b 100644
--- a/src/components/Shift/Shift.tsx
+++ b/src/components/Shift/Shift.tsx
@@ -59,12 +59,12 @@ const Shift: ForwardRefRenderFunction<HTMLDivElement, ShiftProps> = (props, ref)
             style.transform = "translate3d(0, 0, 0)";
         }
 
-        if (!isValidElement<Record<string, any>>(child)) {
+        if (!isValidElement<React.HTMLAttributes<HTMLElement>>(child)) {
             return createElement("span", {className, style}, child);
         }
 
         return cloneElement(child, {
-            style: {...child.props.style, ...style},
+            style: {...(child.props?.style ?? {}), ...style},
             className: classnames(className, child.props.className),
         });
     });
@@ -74,7 +74,9 @@ const Shift: ForwardRefRenderFunction<HTMLDivElement, ShiftProps> = (props, ref)
     useLayoutEffect(() => {
         const el = containerRef.current?.children[active - 1] as HTMLElement;
 
-        el && setCurrentHeight(el.offsetHeight);
+        if (el) {
+            setCurrentHeight(el.offsetHeight);
+        }
     }, [active]);
 
     return (

From db1805400baec60313da3c688faee8ae03df3a73 Mon Sep 17 00:00:00 2001
From: Rostyslav Nihrutsa <RostyslavNihrutsa@users.noreply.github.com>
Date: Thu, 12 Mar 2026 17:56:59 +0200
Subject: [PATCH 7/8] refactor(types): make various component props optional

---
 src/components/types.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/types.ts b/src/components/types.ts
index 384cd93..8e8593c 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -59,11 +59,11 @@ export interface ComponentsProps {
     listItem?: ListItemProps;
     modal?: ModalProps;
     odometer?: Pick<OdometerProps, "auto" | "format" | "duration">;
-    popover: PopoverProps;
-    popoverClose: PopoverCloseProps;
-    popoverAnchor: PopoverAnchorProps;
-    popoverTrigger: PopoverTriggerProps;
-    popoverContent: PopoverContentProps;
+    popover?: PopoverProps;
+    popoverClose?: PopoverCloseProps;
+    popoverAnchor?: PopoverAnchorProps;
+    popoverTrigger?: PopoverTriggerProps;
+    popoverContent?: PopoverContentProps;
     scrollArea?: ScrollAreaProps;
     select?: SelectProps;
     selectItem?: SelectItemProps;
@@ -92,8 +92,8 @@ export interface ComponentsProps {
         | "radius"
         | "color"
     >;
-    toggleGroup: Omit<ToggleGroupProps, "type" | "value" | "defaultValue" | "onValueChange">;
-    toggleGroupItem: Omit<ToggleGroupItemProps, "value">;
+    toggleGroup?: Omit<ToggleGroupProps, "type" | "value" | "defaultValue" | "onValueChange">;
+    toggleGroupItem?: Omit<ToggleGroupItemProps, "value">;
     tooltip?: Omit<TooltipProps, "content">;
     truncate?: TruncateProps;
     truncateList?: TruncateListProps;

From b58c89563632cf8d577a8dac1001eac992b1961d Mon Sep 17 00:00:00 2001
From: Rostyslav Nihrutsa <RostyslavNihrutsa@users.noreply.github.com>
Date: Thu, 12 Mar 2026 18:49:09 +0200
Subject: [PATCH 8/8] style: set `overflow: hidden` for body in reset styles

---
 src/providers/ui/styles/reset.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/providers/ui/styles/reset.scss b/src/providers/ui/styles/reset.scss
index 8870811..2ad21bc 100644
--- a/src/providers/ui/styles/reset.scss
+++ b/src/providers/ui/styles/reset.scss
@@ -111,6 +111,7 @@ button:focus {
 }
 
 body {
+  overflow: hidden;
   background-color: var(--bg-primary-color);
   color: var(--text-primary-color);
   font-family: var(--font-family), "sans-serif";