addon-ui 0.10.0 → 0.11.0

package/README.md

@@ -68,8 +68,10 @@ This library now ships with dedicated documentation files for each component in
 - [List](docs/List.md) (covers List and ListItem)
 - [Modal](docs/Modal.md)
 - [Odometer](docs/Odometer.md) (component + `useOdometer` hook)
+- [Popover](docs/Popover.md)
 - [ScrollArea](docs/ScrollArea.md)
 - [Select](docs/Select.md)
+- [Shift](docs/Shift.md)
 - [SvgSprite](docs/SvgSprite.md)
 - [Switch](docs/Switch.md)
 - [Tabs](docs/Tabs.md) (includes `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`)
@@ -77,6 +79,7 @@ This library now ships with dedicated documentation files for each component in
 - [TextArea](docs/TextArea.md)
 - [TextField](docs/TextField.md)
 - [Toast](docs/Toast.md)
+- [ToggleGroup](docs/ToggleGroup.md)
 - [Tooltip](docs/Tooltip.md)
 - [Truncate](docs/Truncate.md)
 - [TruncateList](docs/TruncateList.md)

package/dist-types/components/Popover/Popover.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { PopoverProps } from "@radix-ui/react-popover";
+export { type PopoverProps };
+declare const _default: React.NamedExoticComponent<PopoverProps>;
+export default _default;
+//# sourceMappingURL=Popover.d.ts.map

package/dist-types/components/Popover/PopoverAnchor.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { PopoverAnchorProps } from "@radix-ui/react-popover";
+export type { PopoverAnchorProps };
+declare const _default: React.NamedExoticComponent<PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+//# sourceMappingURL=PopoverAnchor.d.ts.map

package/dist-types/components/Popover/PopoverClose.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { PopoverCloseProps } from "@radix-ui/react-popover";
+export type { PopoverCloseProps };
+declare const _default: React.NamedExoticComponent<PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;
+//# sourceMappingURL=PopoverClose.d.ts.map

package/dist-types/components/Popover/PopoverContent.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { PopoverContentProps as PopoverContentRadixProps, PopoverPortalProps } from "@radix-ui/react-popover";
+export interface PopoverContentProps extends PopoverContentRadixProps, PopoverPortalProps {
+    maxWidth?: number;
+    minWidth?: number;
+    fullWidth?: boolean;
+    arrow?: boolean;
+    arrowWidth?: number;
+    arrowHeight?: number;
+    overlay?: boolean;
+    overlayClassname?: string;
+}
+declare const _default: React.NamedExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+//# sourceMappingURL=PopoverContent.d.ts.map

package/dist-types/components/Popover/PopoverTrigger.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { PopoverTriggerProps as PopoverTriggerRadixProps } from "@radix-ui/react-popover";
+export interface PopoverTriggerProps extends PopoverTriggerRadixProps {
+    center?: boolean;
+}
+declare const _default: React.NamedExoticComponent<PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;
+//# sourceMappingURL=PopoverTrigger.d.ts.map

package/dist-types/components/Popover/index.d.ts

@@ -0,0 +1,6 @@
+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";
+//# sourceMappingURL=index.d.ts.map

package/dist-types/components/Select/SelectItemIndicator.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { SelectItemIndicatorProps } from "@radix-ui/react-select";
+export { type SelectItemIndicatorProps };
+declare const _default: React.NamedExoticComponent<SelectItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;
+//# sourceMappingURL=SelectItemIndicator.d.ts.map

package/dist-types/components/Select/SelectItemText.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { SelectItemTextProps } from "@radix-ui/react-select";
+export { type SelectItemTextProps };
+declare const _default: React.NamedExoticComponent<SelectItemTextProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;
+//# sourceMappingURL=SelectItemText.d.ts.map

package/dist-types/components/Select/index.d.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";

package/dist-types/components/Shift/Shift.d.ts

@@ -0,0 +1,10 @@
+import React, { ComponentProps } from "react";
+export interface ShiftProps extends ComponentProps<"div"> {
+    active?: number;
+    height?: number;
+    adaptiveHeight?: boolean;
+    itemClassName?: string;
+}
+declare const _default: React.NamedExoticComponent<Omit<ShiftProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+//# sourceMappingURL=Shift.d.ts.map

package/dist-types/components/Shift/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Shift, type ShiftProps } from "./Shift";
+//# sourceMappingURL=index.d.ts.map

package/dist-types/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { Root, ToggleGroupMultipleProps, ToggleGroupSingleProps } from "@radix-ui/react-toggle-group";
+export type { ToggleGroupSingleProps, ToggleGroupMultipleProps };
+export type ToggleGroupProps = React.ComponentProps<typeof Root>;
+declare const _default: React.NamedExoticComponent<(Omit<ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+//# sourceMappingURL=ToggleGroup.d.ts.map

package/dist-types/components/ToggleGroup/ToggleGroupIndicator.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const _default: React.NamedExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+//# sourceMappingURL=ToggleGroupIndicator.d.ts.map

package/dist-types/components/ToggleGroup/ToggleGroupItem.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ToggleGroupItemProps } from "@radix-ui/react-toggle-group";
+export type { ToggleGroupItemProps };
+declare const _default: React.NamedExoticComponent<ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;
+//# sourceMappingURL=ToggleGroupItem.d.ts.map

package/dist-types/components/ToggleGroup/index.d.ts

@@ -0,0 +1,4 @@
+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";
+//# sourceMappingURL=index.d.ts.map

package/dist-types/components/index.d.ts

@@ -14,8 +14,10 @@ export * from "./List";
 export * from "./ListItem";
 export * from "./Modal";
 export * from "./Odometer";
+export * from "./Popover";
 export * from "./ScrollArea";
 export * from "./Select";
+export * from "./Shift";
 export * from "./SvgSprite";
 export * from "./Switch";
 export * from "./Tabs";
@@ -23,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";

package/dist-types/components/types.d.ts

@@ -1,4 +1,4 @@
-import type { AvatarProps, ButtonProps, CheckboxProps, DialogProps, DrawerProps, FooterProps, HeaderProps, HighlightProps, IconProps, IconButtonProps, ListProps, ListItemProps, ModalProps, OdometerProps, ScrollAreaProps, SelectProps, SelectItemProps, SelectIconProps, SelectValueProps, SelectContentProps, SelectTriggerProps, SwitchProps, TabsProps, TabsContentProps, TabsListProps, TabsTriggerProps, TagProps, TextAreaProps, TextFieldProps, ToastProps, TooltipProps, TruncateProps, TruncateListProps, ViewProps, ViewDrawerProps, ViewModalProps } from "../components";
+import type { AvatarProps, ButtonProps, CheckboxProps, DialogProps, DrawerProps, FooterProps, HeaderProps, HighlightProps, IconButtonProps, IconProps, ListItemProps, ListProps, ModalProps, OdometerProps, PopoverAnchorProps, PopoverCloseProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ScrollAreaProps, SelectContentProps, SelectIconProps, SelectItemProps, SelectProps, SelectTriggerProps, SelectValueProps, SwitchProps, TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps, TagProps, TextAreaProps, TextFieldProps, ToastProps, ToggleGroupItemProps, ToggleGroupProps, TooltipProps, TruncateListProps, TruncateProps, ViewDrawerProps, ViewModalProps, ViewProps } from "../components";
 export interface ComponentsProps {
     avatar?: Pick<AvatarProps, "size" | "radius" | "cursorPointer" | "delayMs">;
     button?: Pick<ButtonProps, "variant" | "color" | "size" | "radius">;
@@ -14,6 +14,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;
@@ -30,6 +35,8 @@ export interface ComponentsProps {
     textArea?: TextAreaProps;
     textField?: TextFieldProps;
     toast?: Pick<ToastProps, "side" | "duration" | "swipeDirection" | "swipeThreshold" | "closeProps" | "closeIcon" | "fullWidth" | "sticky" | "radius" | "color">;
+    toggleGroup?: Omit<ToggleGroupProps, "type" | "value" | "defaultValue" | "onValueChange">;
+    toggleGroupItem?: Omit<ToggleGroupItemProps, "value">;
     tooltip?: Omit<TooltipProps, "content">;
     truncate?: TruncateProps;
     truncateList?: TruncateListProps;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "addon-ui",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "A comprehensive React UI component library designed exclusively for the AddonBone browser extension framework with customizable theming and consistent design patterns",
   "keywords": [
     "react",
@@ -15,10 +15,7 @@
     "typescript",
     "design-system"
   ],
-  "author": "Addon Stack <addonbonedev@gmail.com>",
-  "contributors": [
-    "Anjey Tsibylskij (https://github.com/atldays)"
-  ],
+  "author": "Anjey Tsibylskij (https://github.com/atldays)",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -98,8 +95,9 @@
     "@commitlint/config-conventional": "^20.0.0",
     "@eslint/js": "^9.21.0",
     "@release-it/conventional-changelog": "^10.0.4",
-    "@rsbuild/plugin-sass": "^1.4.0",
-    "@storybook/react": "^9.1.3",
+    "@rsbuild/core": "^1.7.3",
+    "@rsbuild/plugin-sass": "^1.5.1",
+    "@storybook/react": "^10.2.18",
     "@types/chrome": "^0.1.12",
     "@types/jest": "^30.0.0",
     "@types/lodash": "^4.17.20",
@@ -111,6 +109,7 @@
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "10.2.18",
     "globals": "^15.15.0",
     "husky": "^9.1.7",
     "jest": "^30.1.3",
@@ -119,8 +118,8 @@
     "react-dom": "^19.1.0",
     "release-it": "^19.2.3",
     "rspack-plugin-virtual-module": "^1.0.0",
-    "storybook": "^9.1.3",
-    "storybook-react-rsbuild": "^2.1.0",
+    "storybook": "^10.2.18",
+    "storybook-react-rsbuild": "^3.3.2",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1"
   },
@@ -142,10 +141,5 @@
   "overrides": {
     "flat-cache": "^6.1.18",
     "glob": "^13.0.0"
-  },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
   }
 }

package/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)),

package/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);

package/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));

package/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));

package/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));

package/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));

package/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";

package/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)));
+    }
+  }
+}

package/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>
     );

package/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>

package/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));

package/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));

package/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";

package/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)));
+    }
+  }
 }

package/src/components/Shift/Shift.tsx

@@ -0,0 +1,98 @@
+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<React.HTMLAttributes<HTMLElement>>(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;
+
+        if (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));

package/src/components/Shift/index.ts

@@ -0,0 +1 @@
+export {default as Shift, type ShiftProps} from "./Shift";

package/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));
+  }
+}

package/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;
   }

package/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));
     }
 

package/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));

package/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));

package/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));

package/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";

package/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;
+    }
+  }
+}

package/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)),

package/src/components/index.ts

@@ -14,8 +14,10 @@ export * from "./List";
 export * from "./ListItem";
 export * from "./Modal";
 export * from "./Odometer";
+export * from "./Popover";
 export * from "./ScrollArea";
 export * from "./Select";
+export * from "./Shift";
 export * from "./SvgSprite";
 export * from "./Switch";
 export * from "./Tabs";
@@ -23,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";

package/src/components/types.ts

@@ -7,34 +7,41 @@ import type {
     FooterProps,
     HeaderProps,
     HighlightProps,
-    IconProps,
     IconButtonProps,
-    ListProps,
+    IconProps,
     ListItemProps,
+    ListProps,
     ModalProps,
     OdometerProps,
+    PopoverAnchorProps,
+    PopoverCloseProps,
+    PopoverContentProps,
+    PopoverProps,
+    PopoverTriggerProps,
     ScrollAreaProps,
-    SelectProps,
-    SelectItemProps,
-    SelectIconProps,
-    SelectValueProps,
     SelectContentProps,
+    SelectIconProps,
+    SelectItemProps,
+    SelectProps,
     SelectTriggerProps,
+    SelectValueProps,
     SwitchProps,
-    TabsProps,
     TabsContentProps,
     TabsListProps,
+    TabsProps,
     TabsTriggerProps,
     TagProps,
     TextAreaProps,
     TextFieldProps,
     ToastProps,
+    ToggleGroupItemProps,
+    ToggleGroupProps,
     TooltipProps,
-    TruncateProps,
     TruncateListProps,
-    ViewProps,
+    TruncateProps,
     ViewDrawerProps,
     ViewModalProps,
+    ViewProps,
 } from "../components";
 
 export interface ComponentsProps {
@@ -52,6 +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;
     scrollArea?: ScrollAreaProps;
     select?: SelectProps;
     selectItem?: SelectItemProps;
@@ -80,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;

package/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);

package/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";