addon-ui 0.7.1 → 0.9.0

package/README.md

@@ -69,6 +69,7 @@ This library now ships with dedicated documentation files for each component in
 - [Modal](docs/Modal.md)
 - [Odometer](docs/Odometer.md) (component + useOdometer hook)
 - [ScrollArea](docs/ScrollArea.md)
+- [Select](docs/Select.md)
 - [SvgSprite](docs/SvgSprite.md)
 - [Switch](docs/Switch.md)
 - [Tabs](docs/Tabs.md) (includes Tabs, TabsList, TabsTrigger, TabsContent)

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

@@ -1,8 +1,9 @@
 import React from "react";
 import { HighlighterProps } from "react-highlight-words";
 import { HighlightColor } from "./types";
-export interface HighlightProps extends HighlighterProps {
+export interface HighlightProps extends Omit<HighlighterProps, "searchWords"> {
     color?: HighlightColor;
+    searchWords?: string | RegExp | (string | RegExp)[];
 }
 declare const _default: React.NamedExoticComponent<HighlightProps>;
 export default _default;

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

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

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { SelectContentProps as SelectContentRadixProps, SelectPortalProps, SelectViewportProps } from "@radix-ui/react-select";
+export interface SelectContentProps extends SelectContentRadixProps, SelectPortalProps {
+    arrow?: boolean;
+    arrowWidth?: number;
+    arrowHeight?: number;
+    fullWidth?: boolean;
+    viewportProps?: SelectViewportProps;
+    scrollUpButton?: React.ReactNode;
+    scrollDownButton?: React.ReactNode;
+}
+declare const _default: React.NamedExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+//# sourceMappingURL=SelectContent.d.ts.map

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

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

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { SelectItemProps as SelectItemRadixProps } from "@radix-ui/react-select";
+export interface SelectItemProps extends SelectItemRadixProps {
+    indicator?: React.ReactNode;
+    indicatorClassname?: string;
+}
+declare const _default: React.NamedExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+//# sourceMappingURL=SelectItem.d.ts.map

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { SelectIconProps, SelectTriggerProps as SelectTriggerRadixProps, SelectValueProps } from "@radix-ui/react-select";
+export interface SelectTriggerProps extends SelectTriggerRadixProps {
+    center?: boolean;
+    fullWidth?: boolean;
+    ellipsis?: boolean;
+    icon?: React.ReactNode;
+    placeholder?: React.ReactNode;
+    valueProps?: SelectValueProps;
+    iconProps?: SelectIconProps;
+}
+declare const _default: React.NamedExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;
+//# sourceMappingURL=SelectTrigger.d.ts.map

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

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

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

@@ -0,0 +1,7 @@
+export { default as Select, type SelectProps } from "./Select";
+export { default as SelectItem, type SelectItemProps } from "./SelectItem";
+export { default as SelectIcon, type SelectIconProps } from "./SelectIcon";
+export { default as SelectValue, type SelectValueProps } from "./SelectValue";
+export { default as SelectTrigger, type SelectTriggerProps } from "./SelectTrigger";
+export { default as SelectContent, type SelectContentProps } from "./SelectContent";
+//# sourceMappingURL=index.d.ts.map

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

@@ -1,8 +1,10 @@
 import React, { ComponentProps } from "react";
+import { HighlightProps } from "../Highlight";
 export interface TruncateProps extends ComponentProps<"span"> {
     text?: string;
     middle?: boolean;
     separator?: string;
+    highlight?: Omit<HighlightProps, "textToHighlight">;
 }
 declare const _default: React.NamedExoticComponent<Omit<TruncateProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

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

@@ -15,6 +15,7 @@ export * from "./ListItem";
 export * from "./Modal";
 export * from "./Odometer";
 export * from "./ScrollArea";
+export * from "./Select";
 export * from "./SvgSprite";
 export * from "./Switch";
 export * from "./Tabs";

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, 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, 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";
 export interface ComponentsProps {
     avatar?: Pick<AvatarProps, "size" | "radius" | "cursorPointer" | "delayMs">;
     button?: Pick<ButtonProps, "variant" | "color" | "size" | "radius">;
@@ -7,7 +7,7 @@ export interface ComponentsProps {
     drawer?: DrawerProps;
     footer?: FooterProps;
     header?: Pick<HeaderProps, "alignCenter" | "before" | "after">;
-    highlight?: HighlightProps;
+    highlight?: Omit<HighlightProps, "textToHighlight">;
     icon?: Omit<IconProps, "name">;
     iconButton?: Pick<IconButtonProps, "variant" | "size" | "radius">;
     list?: ListProps;
@@ -15,6 +15,12 @@ export interface ComponentsProps {
     modal?: ModalProps;
     odometer?: Pick<OdometerProps, "auto" | "format" | "duration">;
     scrollArea?: ScrollAreaProps;
+    select?: SelectProps;
+    selectItem?: SelectItemProps;
+    selectIcon?: SelectIconProps;
+    selectValue?: SelectValueProps;
+    selectContent?: SelectContentProps;
+    selectTrigger?: SelectTriggerProps;
     switch?: SwitchProps;
     tabs?: TabsProps;
     tabsContent?: TabsContentProps;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "addon-ui",
   "type": "module",
-  "version": "0.7.1",
+  "version": "0.9.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",
@@ -22,7 +22,11 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/addon-stack/addon-ui"
+    "url": "git+https://github.com/addon-stack/addon-ui.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
   },
   "bugs": {
     "url": "https://github.com/addon-stack/addon-ui/issues"
@@ -80,6 +84,7 @@
     "@types/react-highlight-words": "^0.20.0",
     "autosize": "^6.0.1",
     "classnames": "^2.5.1",
+    "debounce": "^2.2.0",
     "odometer": "^0.4.8",
     "radix-ui": "^1.1.3",
     "react-highlight-words": "^0.21.0",
@@ -91,7 +96,7 @@
     "@commitlint/cli": "^20.0.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@eslint/js": "^9.21.0",
-    "@release-it/conventional-changelog": "^10.0.1",
+    "@release-it/conventional-changelog": "^10.0.4",
     "@rsbuild/plugin-sass": "^1.4.0",
     "@storybook/react": "^9.1.3",
     "@types/chrome": "^0.1.12",
@@ -100,7 +105,7 @@
     "@types/node": "^22.13.10",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "adnbn": "^0.4.2",
+    "adnbn": "^0.5.4",
     "depcheck": "^1.4.7",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
@@ -111,7 +116,7 @@
     "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "release-it": "^19.0.5",
+    "release-it": "^19.2.3",
     "rspack-plugin-virtual-module": "^1.0.0",
     "storybook": "^9.1.3",
     "storybook-react-rsbuild": "^2.1.0",

package/src/components/Accordion/accordion.module.scss

@@ -28,6 +28,7 @@ $root: accordion;
     background-color: var(--accordion-content-bg-color);
     will-change: background-color;
     transition: background-color var(--accordion-speed-bg, var(--speed-color));
+    overflow: hidden;
 
     &[data-state="open"] {
       animation: slideDown var(--accordion-speed-animation, var(--speed-sm)) ease-in-out;

package/src/components/Checkbox/checkbox.module.scss

@@ -5,7 +5,7 @@ $root: checkbox;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  padding: 2px;
+  padding: var(--checkbox-padding, 2px);
   width: var(--checkbox-size, 18px);
   height: var(--checkbox-size, 18px);
   border-radius: var(--checkbox-border-radius, 4px);

package/src/components/Highlight/Highlight.tsx

@@ -1,4 +1,4 @@
-import React, {FC, memo} from "react";
+import React, {FC, memo, useMemo} from "react";
 import classnames from "classnames";
 import Highlighter, {HighlighterProps} from "react-highlight-words";
 
@@ -8,26 +8,42 @@ import {HighlightColor} from "./types";
 
 import styles from "./highlight.module.scss";
 
-export interface HighlightProps extends HighlighterProps {
+export interface HighlightProps extends Omit<HighlighterProps, "searchWords"> {
     color?: HighlightColor;
+    searchWords?: string | RegExp | (string | RegExp)[];
 }
 
 const Highlight: FC<HighlightProps> = props => {
-    const {color, activeClassName, highlightClassName, ...other} = {
+    const {color, className, activeClassName, highlightClassName, searchWords, textToHighlight, ...other} = {
         ...useComponentProps("highlight"),
         ...props,
     };
 
+    const search = useMemo(() => {
+        if (!searchWords) {
+            return [];
+        }
+
+        if (Array.isArray(searchWords)) {
+            return searchWords;
+        }
+
+        return [searchWords];
+    }, [searchWords]);
+
     return (
         <Highlighter
-            highlightClassName={classnames(
+            className={classnames(
                 styles["highlight"],
                 {
                     [styles[`highlight--${color}-color`]]: color,
                 },
-                highlightClassName
+                className
             )}
-            activeClassName={classnames(styles["highlight--active"], activeClassName)}
+            highlightClassName={classnames(styles["highlight-mark"], highlightClassName)}
+            activeClassName={classnames(styles["highlight-mark--active"], activeClassName)}
+            searchWords={search}
+            textToHighlight={textToHighlight}
             {...other}
         />
     );

package/src/components/Highlight/highlight.module.scss

@@ -1,51 +1,55 @@
 $root: highlight;
 
 .#{$root} {
-  font-size: var(--highlight-font-size, inherit);
-  font-weight: var(--highlight-font-weight, inherit);
-  font-family: var(--highlight-font-family, inherit), sans-serif;
-  line-height: var(--highlight-line-height, var(--line-height, 1rem));
-  color: var(--highlight-color, #fff);
-  background-color: var(--highlight-bg-color, #ffd60a);
-  padding: var(--highlight-y-padding, 2px) var(--highlight-x-padding, 3px);
-  margin: 0 calc(-1 * var(--highlight-x-padding, 3px));
-  border-radius: var(--highlight-border-radius, 2px);
-  transition:
-    color var(--highlight-speed-color, var(--speed-color)),
-    background-color var(--highlight-speed-bg, var(--speed-color));
-
-  &--primary-color {
-    color: var(--highlight-primary-color, #fff);
-    background-color: var(--primary-color);
-  }
+  display: inline;
+
+  &-mark {
+    font-size: var(--highlight-font-size, inherit);
+    font-weight: var(--highlight-font-weight, inherit);
+    font-family: var(--highlight-font-family, inherit), sans-serif;
+    line-height: var(--highlight-line-height, var(--line-height, 1rem));
+    color: var(--highlight-color, #fff);
+    background-color: var(--highlight-bg-color, #ffd60a);
+    padding: var(--highlight-y-padding, 2px) var(--highlight-x-padding, 3px);
+    margin: 0 calc(-1 * var(--highlight-x-padding, 3px));
+    border-radius: var(--highlight-border-radius, 2px);
+    transition:
+      color var(--highlight-speed-color, var(--speed-color)),
+      background-color var(--highlight-speed-bg, var(--speed-color));
+
+    .#{$root}--primary-color & {
+      color: var(--highlight-primary-color, #fff);
+      background-color: var(--primary-color);
+    }
 
-  &--secondary-color {
-    color: var(--highlight-secondary-color, #fff);
-    background-color: var(--secondary-color);
-  }
+    .#{$root}--secondary-color & {
+      color: var(--highlight-secondary-color, #fff);
+      background-color: var(--secondary-color);
+    }
 
-  &--accent-color {
-    color: var(--highlight-accent-color, #fff);
-    background-color: var(--accent-color);
-  }
+    .#{$root}--accent-color & {
+      color: var(--highlight-accent-color, #fff);
+      background-color: var(--accent-color);
+    }
 
-  &--active {
-    color: var(--highlight-active-color, var(--highlight-color, #fff));
-    background-color: var(--highlight-active-bg-color, #ff801f);
+    &--active {
+      color: var(--highlight-active-color, var(--highlight-color, #fff));
+      background-color: var(--highlight-active-bg-color, #ff801f);
 
-    &.#{$root}--primary-color {
-      color: var(--highlight-active-primary-color, var(--highlight-primary-color, #fff));
-      background-color: color-mix(in srgb, black 40%, var(--primary-color));
-    }
+      .#{$root}--primary-color & {
+        color: var(--highlight-active-primary-color, var(--highlight-primary-color, #fff));
+        background-color: color-mix(in srgb, black 40%, var(--primary-color));
+      }
 
-    &.#{$root}--secondary-color {
-      color: var(--highlight-active-secondary-color, var(--highlight-secondary-color, #fff));
-      background-color: color-mix(in srgb, black 40%, var(--secondary-color));
-    }
+      .#{$root}--secondary-color & {
+        color: var(--highlight-active-secondary-color, var(--highlight-secondary-color, #fff));
+        background-color: color-mix(in srgb, black 40%, var(--secondary-color));
+      }
 
-    &.#{$root}--accent-color {
-      color: var(--highlight-active-accent-color, var(--highlight-accent-color, #fff));
-      background-color: color-mix(in srgb, black 40%, var(--accent-color));
+      .#{$root}--accent-color & {
+        color: var(--highlight-active-accent-color, var(--highlight-accent-color, #fff));
+        background-color: color-mix(in srgb, black 40%, var(--accent-color));
+      }
     }
   }
 }

package/src/components/Modal/modal.module.scss

@@ -77,6 +77,7 @@ $root: modal;
   &-children {
     display: flex;
     flex-direction: column;
+    overflow: hidden;
   }
 
   &-close {

package/src/components/Select/Select.tsx

@@ -0,0 +1,19 @@
+import React, {FC, memo} from "react";
+
+import {useLocale} from "adnbn/locale/react";
+
+import {Root, SelectProps} from "@radix-ui/react-select";
+
+import {useComponentProps} from "../../providers";
+
+export {SelectProps};
+
+const Select: FC<SelectProps> = props => {
+    const {...other} = {...useComponentProps("select"), ...props};
+
+    const {dir} = useLocale();
+
+    return <Root dir={dir} {...other} />;
+};
+
+export default memo(Select);

package/src/components/Select/SelectContent.tsx

@@ -0,0 +1,84 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {
+    Arrow,
+    Content,
+    Portal,
+    SelectContentProps as SelectContentRadixProps,
+    SelectPortalProps,
+    SelectScrollDownButton,
+    SelectScrollUpButton,
+    SelectViewportProps,
+    Viewport,
+} from "@radix-ui/react-select";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./select.module.scss";
+
+export interface SelectContentProps extends SelectContentRadixProps, SelectPortalProps {
+    arrow?: boolean;
+    arrowWidth?: number;
+    arrowHeight?: number;
+    fullWidth?: boolean;
+    viewportProps?: SelectViewportProps;
+    scrollUpButton?: React.ReactNode;
+    scrollDownButton?: React.ReactNode;
+}
+
+const SelectContent: ForwardRefRenderFunction<HTMLDivElement, SelectContentProps> = (props, ref) => {
+    const {
+        arrow,
+        arrowWidth,
+        arrowHeight,
+        fullWidth,
+        container,
+        viewportProps,
+        scrollUpButton,
+        scrollDownButton,
+        className,
+        children,
+        ...other
+    } = {...useComponentProps("selectContent"), ...props};
+
+    return (
+        <Portal container={container}>
+            <Content
+                ref={ref}
+                className={classnames(
+                    styles["select__content"],
+                    {
+                        [styles["select__content--full-width"]]: fullWidth,
+                    },
+                    className
+                )}
+                {...other}
+            >
+                {scrollUpButton && (
+                    <SelectScrollUpButton className={classnames(styles["select__scroll-button"])}>
+                        {scrollUpButton}
+                    </SelectScrollUpButton>
+                )}
+
+                <Viewport
+                    {...viewportProps}
+                    className={classnames(styles["select__viewport"], viewportProps?.className)}
+                >
+                    {children}
+                </Viewport>
+
+                {scrollDownButton && (
+                    <SelectScrollDownButton className={classnames(styles["select__scroll-button"])}>
+                        {scrollDownButton}
+                    </SelectScrollDownButton>
+                )}
+
+                {arrow && <Arrow width={arrowWidth} height={arrowHeight} />}
+            </Content>
+        </Portal>
+    );
+};
+
+export default memo(forwardRef(SelectContent));

package/src/components/Select/SelectIcon.tsx

@@ -0,0 +1,19 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {SelectIconProps, Icon} from "@radix-ui/react-select";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./select.module.scss";
+
+export {SelectIconProps};
+
+const SelectIcon: ForwardRefRenderFunction<HTMLSpanElement, SelectIconProps> = (props, ref) => {
+    const {className, ...other} = {...useComponentProps("selectIcon"), ...props};
+
+    return <Icon ref={ref} className={classnames(styles["select__icon"], className)} {...other} />;
+};
+
+export default memo(forwardRef(SelectIcon));

package/src/components/Select/SelectItem.tsx

@@ -0,0 +1,41 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {Item, ItemIndicator, ItemText, SelectItemProps as SelectItemRadixProps} from "@radix-ui/react-select";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./select.module.scss";
+
+export interface SelectItemProps extends SelectItemRadixProps {
+    indicator?: React.ReactNode;
+    indicatorClassname?: string;
+}
+
+const SelectItem: ForwardRefRenderFunction<HTMLDivElement, SelectItemProps> = (props, ref) => {
+    const {indicator, textValue, className, indicatorClassname, children, ...other} = {
+        ...useComponentProps("selectItem"),
+        ...props,
+    };
+
+    return (
+        <Item ref={ref} className={classnames(styles["select__item"], className)} textValue={textValue} {...other}>
+            {children && children}
+
+            {!children && (
+                <>
+                    {indicator && (
+                        <ItemIndicator className={classnames(styles["select__item__indicator"], indicatorClassname)}>
+                            {indicator}
+                        </ItemIndicator>
+                    )}
+
+                    {textValue && <ItemText className={classnames(styles["select__item__text"])}>{textValue}</ItemText>}
+                </>
+            )}
+        </Item>
+    );
+};
+
+export default memo(forwardRef(SelectItem));

package/src/components/Select/SelectTrigger.tsx

@@ -0,0 +1,71 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {
+    Icon,
+    SelectIconProps,
+    SelectTriggerProps as SelectTriggerRadixProps,
+    SelectValueProps,
+    Trigger,
+    Value,
+} from "@radix-ui/react-select";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./select.module.scss";
+
+export interface SelectTriggerProps extends SelectTriggerRadixProps {
+    center?: boolean;
+    fullWidth?: boolean;
+    ellipsis?: boolean;
+    icon?: React.ReactNode;
+    placeholder?: React.ReactNode;
+    valueProps?: SelectValueProps;
+    iconProps?: SelectIconProps;
+}
+
+const SelectTrigger: ForwardRefRenderFunction<HTMLButtonElement, SelectTriggerProps> = (props, ref) => {
+    const {
+        center,
+        ellipsis = true,
+        icon,
+        placeholder,
+        valueProps,
+        iconProps,
+        className,
+        children,
+        ...other
+    } = {...useComponentProps("selectTrigger"), ...props};
+
+    return (
+        <Trigger
+            ref={ref}
+            className={classnames(
+                styles["select__trigger"],
+                {
+                    [styles["select__trigger--center"]]: center,
+                    [styles["select__trigger--ellipsis"]]: ellipsis,
+                },
+                className
+            )}
+            {...other}
+        >
+            {children && children}
+
+            {!children && (
+                <>
+                    <Value placeholder={placeholder} {...valueProps} className={classnames(styles["select__value"])} />
+
+                    {icon && (
+                        <Icon className={classnames(styles["select__icon"], iconProps?.className)} {...iconProps}>
+                            {icon}
+                        </Icon>
+                    )}
+                </>
+            )}
+        </Trigger>
+    );
+};
+
+export default memo(forwardRef(SelectTrigger));

package/src/components/Select/SelectValue.tsx

@@ -0,0 +1,19 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {SelectValueProps, Value} from "@radix-ui/react-select";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./select.module.scss";
+
+export {SelectValueProps};
+
+const SelectValue: ForwardRefRenderFunction<HTMLSpanElement, SelectValueProps> = (props, ref) => {
+    const {className, ...other} = {...useComponentProps("selectValue"), ...props};
+
+    return <Value ref={ref} className={classnames(styles["select__value"], className)} {...other} />;
+};
+
+export default memo(forwardRef(SelectValue));

package/src/components/Select/index.ts

@@ -0,0 +1,6 @@
+export {default as Select, type SelectProps} from "./Select";
+export {default as SelectItem, type SelectItemProps} from "./SelectItem";
+export {default as SelectIcon, type SelectIconProps} from "./SelectIcon";
+export {default as SelectValue, type SelectValueProps} from "./SelectValue";
+export {default as SelectTrigger, type SelectTriggerProps} from "./SelectTrigger";
+export {default as SelectContent, type SelectContentProps} from "./SelectContent";

package/src/components/Select/select.module.scss

@@ -0,0 +1,150 @@
+@use "../../styles/mixins" as theme;
+
+$root: select;
+
+.#{$root} {
+  &__trigger {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    box-sizing: border-box;
+    color: var(--select-trigger-color);
+    background-color: var(--select-trigger-bg-color, var(--bg-secondary-color));
+    box-shadow: var(--select-trigger-shadow-offset) var(--select-trigger-shadow-color);
+
+    border-width: var(--select-trigger-border-width, 1px);
+    border-style: var(--select-trigger-border-style, solid);
+    border-color: var(--select-trigger-border-color, var(--border-color));
+    border-radius: var(--select-trigger-border-radius, 10px);
+
+    font-size: var(--select-trigger-font-size, var(--select-font-size, 14px));
+    font-weight: var(--select-trigger-font-weight, 500);
+    padding: var(--select-trigger-padding, 8px 12px);
+    height: var(--select-trigger-height);
+    gap: var(--select-trigger-gap, 5px);
+
+    &--center {
+      justify-content: center;
+    }
+
+    &--ellipsis > span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &:hover {
+      box-shadow: var(--select-trigger-shadow-offset-hover) var(--select-trigger-shadow-color);
+      border-width: var(--select-trigger-border-width-hover, var(--select-trigger-border-width, 1px));
+      border-color: var(--select-trigger-border-color-hover, var(--select-trigger-border-color, var(--border-color)));
+    }
+
+    &[data-disabled] {
+      color: var(--text-disabled-color);
+    }
+
+    &[data-placeholder] {
+      color: var(--text-disabled-color);
+    }
+
+    @include theme.rtl {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__content {
+    overflow: hidden;
+    background-color: var(--select-content-bg-color, var(--bg-primary-color));
+    border-radius: var(--select-content-border-radius, 8px);
+    box-shadow: var(--select-content-shadow-offset, 0 0 5px 0) var(--select-content-shadow-color, rgba(0, 0, 0, 0.25));
+    height: var(--select-content-height);
+    max-height: var(--select-content-max-height, var(--radix-select-content-available-height));
+
+    &--full-width {
+      width: var(--select-content-full-width, var(--radix-select-trigger-width));
+    }
+  }
+
+  &__viewport {
+    padding: var(--select-viewport-padding, 5px 0);
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    white-space: nowrap;
+    font-size: var(--select-item-font-size, var(--select-font-size, 14px));
+    font-weight: var(--select-item-font-weight, 400);
+    color: var(--select-item-color, var(--text-primary-color));
+    background-color: var(--select-content-bg-color, --bg-primary-color);
+    border-radius: var(--select-item-border-radius);
+    height: var(--select-item-height);
+    padding: var(--select-item-padding, 10px);
+    user-select: none;
+
+    &__text {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      @include theme.rtl {
+        text-align: end;
+      }
+    }
+
+    &__indicator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &[data-state="checked"] {
+      pointer-events: none;
+      font-weight: var(--select-item-checked-font-weight, 600);
+      color: var(--select-item-checked-color);
+      background-color: var(--select-item-checked-bg-color, var(--bg-secondary-color));
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+      opacity: var(--select-item-disabled-opacity, 0.7);
+      color: var(--select-item-disabled-color, var(--text-disabled-color));
+      background-color: var(--select-item-disabled-bg-color);
+    }
+
+    &[data-highlighted] {
+      outline: none;
+      color: var(--select-item-highlighted-color, var(--text-primary-color));
+      background-color: var(--select-item-highlighted-bg-color, var(--bg-secondary-color));
+    }
+
+    @include theme.rtl {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &__scroll-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--select-scroll-btn-height, 25px);
+    color: var(--select-scroll-btn-color, var(--text-primary-color));
+    background-color: var(--select-scroll-btn-bg-color, var(--select-content-bg-color, var(--bg-primary-color)));
+    cursor: var(--select-scroll-btn-cursor, default);
+
+    &:hover {
+      background-color: var(--select-scroll-btn-hover-bg-color, var(--bg-secondary-color));
+    }
+  }
+}

package/src/components/Tabs/tabs.module.scss

@@ -19,7 +19,10 @@ $border-width: 1px;
     position: relative;
     display: flex;
     justify-content: space-between;
-    transition: border-bottom-color var(--tabs-speed-border-color, var(--speed-color));
+    background-color: var(--tabs-list-bg-color);
+    transition:
+      border-bottom-color var(--tabs-speed-border-color, var(--speed-color)),
+      background-color var(--tabs-speed-bg-list-color, var(--speed-color));
 
     @include theme.rtl() {
       & {

package/src/components/TextArea/TextArea.tsx

@@ -59,8 +59,8 @@ const TextArea = forwardRef<TextAreaActions, TextAreaProps>((props, ref) => {
 
     const handleChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>(
         event => {
-            onChange?.(event);
             setValue(event.currentTarget.value);
+            onChange?.(event);
         },
         [onChange]
     );

package/src/components/TextField/TextField.tsx

@@ -91,8 +91,8 @@ const TextField = forwardRef<TextFieldActions, TextFieldProps>((props, ref) => {
 
     const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
         event => {
-            onChange?.(event);
             setValue(event.currentTarget.value);
+            onChange?.(event);
         },
         [onChange]
     );

package/src/components/Truncate/Truncate.tsx

@@ -5,19 +5,24 @@ import React, {
     memo,
     useImperativeHandle,
     useLayoutEffect,
+    useMemo,
     useRef,
     useState,
 } from "react";
+import debounce from "debounce";
 import classnames from "classnames";
 
 import {useComponentProps} from "../../providers";
 
+import {Highlight, HighlightProps} from "../Highlight";
+
 import styles from "./truncate.module.scss";
 
 export interface TruncateProps extends ComponentProps<"span"> {
     text?: string;
     middle?: boolean;
     separator?: string;
+    highlight?: Omit<HighlightProps, "textToHighlight">;
 }
 
 const trimMiddle = (el: HTMLElement, text: string, separator: string) => {
@@ -50,52 +55,48 @@ const trimMiddle = (el: HTMLElement, text: string, separator: string) => {
 };
 
 const Truncate: ForwardRefRenderFunction<HTMLSpanElement, TruncateProps> = (props, ref) => {
-    const {text = "", middle, separator = "...", className, ...other} = {...useComponentProps("truncate"), ...props};
+    const {
+        text = "",
+        middle,
+        separator = "...",
+        className,
+        highlight,
+        ...other
+    } = {...useComponentProps("truncate"), ...props};
 
     const innerRef = useRef<HTMLSpanElement | null>(null);
     const [displayedText, setDisplayedText] = useState(text);
 
+    const finalText = useMemo(() => {
+        return middle ? displayedText : text;
+    }, [displayedText, text, middle]);
+
     useImperativeHandle(ref, () => innerRef.current!, []);
 
     useLayoutEffect(() => {
         const el = innerRef.current;
         if (!el || !middle) return;
 
-        let animationFrameId: number;
         let observer: ResizeObserver | null = null;
 
-        const measureAndTrim = () => {
-            animationFrameId = requestAnimationFrame(() => {
-                const newText = trimMiddle(el, text, separator);
-                if (newText !== displayedText) {
-                    setDisplayedText(newText);
-                }
-            });
-        };
+        const measureAndTrim = debounce(() => {
+            setDisplayedText(trimMiddle(el, text, separator));
+        }, 150);
 
         measureAndTrim();
 
-        if ("ResizeObserver" in window) {
-            observer = new ResizeObserver(() => {
-                cancelAnimationFrame(animationFrameId);
-                measureAndTrim();
-            });
-            observer.observe(el);
-        }
+        observer = new ResizeObserver(() => measureAndTrim());
 
-        window.addEventListener("resize", measureAndTrim);
+        observer.observe(el);
 
         return () => {
-            window.removeEventListener("resize", measureAndTrim);
+            measureAndTrim.clear();
             observer?.disconnect();
-            cancelAnimationFrame(animationFrameId);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [text, separator, middle]);
 
     return (
         <span
-            ref={innerRef}
             className={classnames(
                 styles["truncate"],
                 {
@@ -105,7 +106,9 @@ const Truncate: ForwardRefRenderFunction<HTMLSpanElement, TruncateProps> = (prop
             )}
             {...other}
         >
-            {middle ? displayedText : text}
+            <span ref={innerRef} className={styles["truncate__hidden"]} />
+
+            {highlight ? <Highlight {...highlight} textToHighlight={finalText} /> : finalText}
         </span>
     );
 };

package/src/components/Truncate/truncate.module.scss

@@ -1,6 +1,7 @@
 @use "../../styles/mixins" as theme;
 
 .truncate {
+  position: relative;
   display: block;
   width: 100%;
   white-space: nowrap;
@@ -8,6 +9,15 @@
   text-overflow: ellipsis;
   transition: color var(--truncate-speed-color, var(--speed-color));
 
+  &__hidden {
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   &--middle {
     text-overflow: clip;
 

package/src/components/index.ts

@@ -15,6 +15,7 @@ export * from "./ListItem";
 export * from "./Modal";
 export * from "./Odometer";
 export * from "./ScrollArea";
+export * from "./Select";
 export * from "./SvgSprite";
 export * from "./Switch";
 export * from "./Tabs";

package/src/components/types.ts

@@ -14,6 +14,12 @@ import type {
     ModalProps,
     OdometerProps,
     ScrollAreaProps,
+    SelectProps,
+    SelectItemProps,
+    SelectIconProps,
+    SelectValueProps,
+    SelectContentProps,
+    SelectTriggerProps,
     SwitchProps,
     TabsProps,
     TabsContentProps,
@@ -39,7 +45,7 @@ export interface ComponentsProps {
     drawer?: DrawerProps;
     footer?: FooterProps;
     header?: Pick<HeaderProps, "alignCenter" | "before" | "after">;
-    highlight?: HighlightProps;
+    highlight?: Omit<HighlightProps, "textToHighlight">;
     icon?: Omit<IconProps, "name">;
     iconButton?: Pick<IconButtonProps, "variant" | "size" | "radius">;
     list?: ListProps;
@@ -47,6 +53,12 @@ export interface ComponentsProps {
     modal?: ModalProps;
     odometer?: Pick<OdometerProps, "auto" | "format" | "duration">;
     scrollArea?: ScrollAreaProps;
+    select?: SelectProps;
+    selectItem?: SelectItemProps;
+    selectIcon?: SelectIconProps;
+    selectValue?: SelectValueProps;
+    selectContent?: SelectContentProps;
+    selectTrigger?: SelectTriggerProps;
     switch?: SwitchProps;
     tabs?: TabsProps;
     tabsContent?: TabsContentProps;