addon-ui 0.9.2 → 0.11.0

package/README.md

@@ -67,23 +67,26 @@ This library now ships with dedicated documentation files for each component in
 - [IconButton](docs/IconButton.md)
 - [List](docs/List.md) (covers List and ListItem)
 - [Modal](docs/Modal.md)
-- [Odometer](docs/Odometer.md) (component + useOdometer hook)
+- [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)
+- [Tabs](docs/Tabs.md) (includes `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`)
 - [Tag](docs/Tag.md)
 - [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)
 - [View](docs/View.md)
 - [ViewDrawer](docs/ViewDrawer.md)
 - [ViewModal](docs/ViewModal.md)
-- [Viewport](docs/Viewport.md) (ViewportProvider + useViewport)
+- [Viewport](docs/Viewport.md) (`ViewportProvider` + `useViewport`)
 
 Notes:
 
@@ -134,15 +137,40 @@ export default defineConfig({
     plugins: [
         ui({
             themeDir: "./theme", // Directory for theme files
-            configFileName: "ui.config", // Name of config files
-            styleFileName: "ui.style", // Name of style files
+            configName: "ui.config", // Name of config files
+            styleName: "ui.style", // Name of style files
             mergeConfig: true, // Merge configs from different directories
             mergeStyles: true, // Merge styles from different directories
+            splitChunks: true, // Enable automatic chunk splitting for components
         }),
     ],
 });
 ```
 
+### Plugin Options
+
+| Option        | Type                                               | Default       | Description                                                                                            |
+| :------------ | :------------------------------------------------- | :------------ | :----------------------------------------------------------------------------------------------------- |
+| `themeDir`    | `string`                                           | `"."`         | Directory path where plugin configuration and style files are located.                                 |
+| `configName`  | `string`                                           | `"config.ui"` | Name of the configuration file.                                                                        |
+| `styleName`   | `string`                                           | `"style.ui"`  | Name of the SCSS style file.                                                                           |
+| `mergeConfig` | `boolean`                                          | `true`        | Whether to merge configuration files from different directories.                                       |
+| `mergeStyles` | `boolean`                                          | `true`        | Whether to merge style files from different directories.                                               |
+| `splitChunks` | `boolean \| (name: string) => string \| undefined` | `true`        | Enables automatic chunk splitting. If a function is provided, it can be used to customize chunk names. |
+
+#### Customizing Chunk Names
+
+You can pass a callback function to `splitChunks` to customize the generated chunk names:
+
+```ts
+ui({
+    splitChunks: name => {
+        if (name === "button") return "ui-core-button";
+        return `ui-${name}`;
+    },
+});
+```
+
 ### Configuration Files
 
 The `addon-ui` configuration is designed to retrieve configuration from each extension separately, allowing for
@@ -271,7 +299,7 @@ extensions with the same functionality but different visual appearances.
 
 ### Global Theme Customization
 
-You can customize the theme globally by passing props to the UIProvider:
+You can customize the theme globally by passing props to the `UIProvider`:
 
 ```jsx
 import {UIProvider} from "addon-ui";
@@ -289,6 +317,8 @@ const customTheme = {
     icons: {
         // Custom icons
     },
+    // Specify the DOM element to set theme/view/browser attributes on
+    container: "#app-root",
 };
 
 function App() {
@@ -296,6 +326,17 @@ function App() {
 }
 ```
 
+### UIProvider Props
+
+| Prop         | Type                           | Default     | Description                                               |
+| :----------- | :----------------------------- | :---------- | :-------------------------------------------------------- |
+| `components` | `ComponentsProps`              | `{}`        | Component-specific configuration overrides.               |
+| `icons`      | `Icons`                        | `{}`        | Custom SVG icons registration.                            |
+| `extra`      | `ExtraProps`                   | `{}`        | App-wide extra properties.                                |
+| `storage`    | `ThemeStorageContract \| true` | `undefined` | Persistence storage for theme settings.                   |
+| `container`  | `string \| Element \| false`   | `"html"`    | Target element for attributes. Set to `false` to disable. |
+| `view`       | `string`                       | `undefined` | Custom view identifier for specific styling.              |
+
 ### Using Extra Props
 
 Extra Props is a powerful feature that allows you to extend component props with custom properties. This is particularly
@@ -438,12 +479,13 @@ function App() {
 
 ## Theming and style reuse
 
-- Global theme tokens (colors, typography, spacing, transitions) live in your ui.style.scss. Components consume them
-  through fallbacks.
-- Each component also exposes its own `--component-*` variables. See the CSS variables tables in the docs to know
-  exactly what you can override.
-- Light/dark modes: use `@import "addon-ui/theme";` and the provided `@include light { ... }` / `@include dark { ... }`
-  mixins in your theme SCSS to scope tokens per color scheme.
+- Global theme tokens (colors, typography, spacing, transitions) live in your `ui.style.scss`.
+- Each component also exposes its own `--component-*` variables. See the CSS variables tables in the docs to know exactly what you can override.
+- **Theme Mixins**: Use `@import "addon-ui/theme";` to access `@include light { ... }` and `@include dark { ... }` mixins.
+- **Universal Targeting**: These mixins are container-agnostic. They work correctly whether the `theme` attribute is on a parent element or directly on the component itself.
+- **Context-Aware**:
+    - When used at the top level, they generate global selectors: `[theme="dark"] { ... }`.
+    - When used inside a component, they generate scoped selectors: `[theme="dark"] .my-comp, .my-comp[theme="dark"] { ... }`.
 
 ## Radix UI and third-party integrations
 

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/Select.d.ts

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

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

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { SelectValueProps } from "@radix-ui/react-select";
-export { SelectValueProps };
+export { type 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

@@ -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/TextField/TextField.d.ts

@@ -1,5 +1,5 @@
 import React, { ComponentProps, ReactNode } from "react";
-import { TextFieldVariant, TextFieldSize, TextFieldRadius, TextFieldAccent } from "./types";
+import { TextFieldAccent, TextFieldRadius, TextFieldSize, TextFieldVariant } from "./types";
 export interface TextFieldActions {
     select(): void;
     focus(): void;
@@ -20,6 +20,7 @@ export interface TextFieldProps extends ComponentProps<"input"> {
     inputClassName?: string;
     afterClassName?: string;
     beforeClassName?: string;
+    strict?: boolean;
 }
 declare const _default: React.NamedExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<TextFieldActions>>;
 export default _default;

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

@@ -0,0 +1,8 @@
+/**
+ * Normalizes user-typed numeric input.
+ *
+ * - Allows partial values ("-", ".", "1e", "1e-")
+ * - Supports decimals and scientific notation
+ */
+export declare const normalizeNumberInput: (raw: string) => string;
+//# sourceMappingURL=utils.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/Truncate/Truncate.d.ts

@@ -1,10 +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">;
+    contentClassname?: string;
+    render?: (text: string) => React.ReactNode;
 }
 declare const _default: React.NamedExoticComponent<Omit<TruncateProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

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

@@ -0,0 +1,2 @@
+export declare const calculateMiddleTruncate: (text: string, maxWidth: number, font: string, letterSpacing: string, separator: string) => string;
+//# sourceMappingURL=utils.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/dist-types/plugin/index.d.ts

@@ -1,9 +1,35 @@
 export interface PluginOptions {
+    /**
+     * Directory path where plugin configuration and style files are located, relative to the project root.
+     * @default "."
+     */
     themeDir?: string;
-    configFileName?: string;
-    styleFileName?: string;
+    /**
+     * Name of the configuration file.
+     * @default "config.ui"
+     */
+    configName?: string;
+    /**
+     * Name of the style file.
+     * @default "style.ui"
+     */
+    styleName?: string;
+    /**
+     * Whether to merge configuration files from different app directories.
+     * @default true
+     */
     mergeConfig?: boolean;
+    /**
+     * Whether to merge style files from different app directories.
+     * @default true
+     */
     mergeStyles?: boolean;
+    /**
+     * Configuration for splitting chunks.
+     * Can be a boolean to enable/disable or a callback to customize chunk names.
+     * @default true
+     */
+    splitChunks?: boolean | ((name: string) => string | undefined);
 }
 declare const _default: import("adnbn").PluginDefinition<[options?: PluginOptions | undefined]>;
 export default _default;

package/dist-types/providers/theme/ThemeProvider.d.ts

@@ -2,7 +2,95 @@ import { FC, PropsWithChildren } from "react";
 import { ThemeStorageContract } from "../../types/theme";
 import { Config } from "../../types/config";
 export interface ThemeProviderProps extends Pick<Config, "components"> {
+    /**
+     * Theme persistence storage configuration.
+     *
+     * @remarks
+     * - When `undefined`, theme changes are stored only in component state (memory) and reset on page reload.
+     * - When `true`, uses the default `ThemeStorage` implementation (typically localStorage).
+     * - When a custom `ThemeStorageContract` object is provided, uses that implementation for theme persistence.
+     *
+     * The storage is used to save, retrieve, and watch for theme changes across sessions or tabs.
+     *
+     * @default undefined
+     *
+     * @example
+     * ```tsx
+     * // No persistence (memory only)
+     * <ThemeProvider>
+     *   <App />
+     * </ThemeProvider>
+     * ```
+     *
+     * @example
+     * ```tsx
+     * // Use default storage (localStorage)
+     * <ThemeProvider storage={true}>
+     *   <App />
+     * </ThemeProvider>
+     * ```
+     *
+     * @example
+     * ```tsx
+     * // Use custom storage implementation
+     * const customStorage: ThemeStorageContract = {
+     *   get: async () => { ... },
+     *   change: async (theme) => { ... },
+     *   toggle: async () => { ... },
+     *   watch: (callback) => { ... }
+     * };
+     *
+     * <ThemeProvider storage={customStorage}>
+     *   <App />
+     * </ThemeProvider>
+     * ```
+     */
     storage?: ThemeStorageContract | true;
+    /**
+     * The DOM element where the provider will set attributes "browser"
+     *
+     * @remarks
+     * - When a string is provided, it's used as a CSS selector to find the element via `document.querySelector`.
+     * - When an Element is provided, attributes are set directly on that element.
+     * - When `false`, no element attributes are set.
+     *
+     * Attributes are automatically cleaned up when the component unmounts.
+     *
+     * @default "html"
+     *
+     * @example
+     * ```tsx
+     * // Use default html element
+     * <ThemeProviderProps>
+     *   <App />
+     * </ThemeProviderProps>
+     * ```
+     *
+     * @example
+     * ```tsx
+     * // Use custom selector
+     * <ThemeProviderProps container="#app-root">
+     *   <App />
+     * </ThemeProviderProps>
+     * ```
+     *
+     * @example
+     * ```tsx
+     * // Use direct element reference
+     * <ThemeProviderProps container={document.body}>
+     *   <App />
+     * </ThemeProviderProps>
+     * ```
+     *
+     * @example
+     * ```tsx
+     * // Disable container attributes
+     * <ThemeProviderProps container={false}>
+     *   <App />
+     * </ThemeProviderProps>
+     * ```
+     */
+    container?: string | Element | false;
 }
 declare const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>>;
 export default ThemeProvider;

package/dist-types/providers/ui/UIProvider.d.ts

@@ -4,7 +4,28 @@ import { Config } from "../../types/config";
 import "./styles/default.scss";
 import "./styles/reset.scss";
 import "addon-ui-style.scss";
-export interface UIProviderProps extends Partial<Config>, Pick<ThemeProviderProps, "storage"> {
+export interface UIProviderProps extends Partial<Config>, Pick<ThemeProviderProps, "storage" | "container"> {
+    /**
+     * A custom view identifier that allows developers to specify a unique name for styling customization.
+     * This value is set as a "view" attribute on the container element and can be targeted through SCSS mixins
+     * to apply view-specific styles and behavior.
+     *
+     * @example
+     * ```tsx
+     * <UIProvider view="dashboard">
+     *   <App />
+     * </UIProvider>
+     * ```
+     *
+     * @example
+     * ```scss
+     * @include view("dashboard") {
+     *   .some-class {
+     *     // Custom styles for dashboard view
+     *   }
+     * }
+     * ```
+     */
     view?: string;
 }
 declare const UIProvider: FC<PropsWithChildren<UIProviderProps>>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "addon-ui",
   "type": "module",
-  "version": "0.9.2",
+  "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,19 +95,21 @@
     "@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",
     "@types/node": "^22.13.10",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "adnbn": "^0.5.4",
+    "adnbn": "^0.5.7",
     "depcheck": "^1.4.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"
   },
@@ -141,16 +140,6 @@
   },
   "overrides": {
     "flat-cache": "^6.1.18",
-    "html-rspack-tags-plugin": {
-      "glob": "^10.4.5"
-    },
-    "test-exclude": {
-      "glob": "^10.4.5"
-    }
-  },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
+    "glob": "^13.0.0"
   }
 }

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