adnbn-ui 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "adnbn-ui",
-  "version": "0.2.4",
+  "type": "module",
+  "version": "0.2.6",
   "description": "A comprehensive React UI component library designed exclusively for the AddonBone browser extension framework with customizable theming and consistent design patterns",
   "keywords": [
     "react",
@@ -16,7 +17,6 @@
   ],
   "author": "Addon Bone",
   "license": "MIT",
-  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/addonbone/addonbone-ui.git"
@@ -55,13 +55,12 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "adnbn": "^0.2.1",
     "autosize": "^6.0.1",
     "classnames": "^2.5.1",
     "odometer": "^0.4.8",
     "radix-ui": "^1.1.3",
-    "sass": "^1.85.1",
     "react-highlight-words": "^0.21.0",
+    "sass": "^1.85.1",
     "ts-deepmerge": "^7.0.3"
   },
   "devDependencies": {
@@ -79,24 +78,26 @@
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/browser": "^3.0.8",
     "@vitest/coverage-v8": "^3.0.8",
+    "adnbn": "^0.2.7",
+    "depcheck": "^1.4.7",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
-    "playwright": "^1.51.0",
-    "rspack-plugin-virtual-module": "^1.0.0",
-    "storybook": "^8.6.4",
+    "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "rspack-plugin-virtual-module": "^1.0.0",
+    "storybook": "^8.6.4",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
     "vite": "^6.2.1",
-    "vitest": "^3.0.8",
-    "prettier": "^3.5.3"
+    "vitest": "^3.0.8"
   },
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
+    "adnbn": ">=0.2.7",
     "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
     "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
   },

package/src/components/Avatar/Avatar.tsx

@@ -1,22 +1,12 @@
-import React, {FC, memo, ReactNode} from "react";
+import React, {memo, ReactNode, forwardRef, ForwardRefRenderFunction} from "react";
 import classnames from "classnames";
 import {AvatarFallbackProps, AvatarImageProps, Fallback, Image, Root} from "@radix-ui/react-avatar";
 
 import {useComponentProps} from "../../providers";
 
-import styles from "./avatar.module.scss";
-
-export enum AvatarSize {
-    Small = "small",
-    Medium = "medium",
-    Large = "large",
-}
+import {AvatarRadius, AvatarSize} from "./types";
 
-export enum AvatarRadius {
-    Small = "small",
-    Medium = "medium",
-    Large = "large",
-}
+import styles from "./avatar.module.scss";
 
 export interface AvatarProps extends AvatarImageProps, Pick<AvatarFallbackProps, "delayMs"> {
     imageClassName?: string;
@@ -27,7 +17,7 @@ export interface AvatarProps extends AvatarImageProps, Pick<AvatarFallbackProps,
     cursorPointer?: boolean;
 }
 
-const Avatar: FC<AvatarProps> = props => {
+const Avatar: ForwardRefRenderFunction<HTMLSpanElement, AvatarProps> = (props, ref) => {
     const {
         size,
         radius,
@@ -42,6 +32,7 @@ const Avatar: FC<AvatarProps> = props => {
 
     return (
         <Root
+            ref={ref}
             className={classnames(
                 styles["avatar"],
                 {
@@ -62,4 +53,4 @@ const Avatar: FC<AvatarProps> = props => {
     );
 };
 
-export default memo(Avatar);
+export default memo(forwardRef(Avatar));

package/src/components/Avatar/index.ts

@@ -1,2 +1,2 @@
-export {default as Avatar, AvatarSize, AvatarRadius} from "./Avatar";
-export type {AvatarProps} from "./Avatar";
+export * from "./types";
+export {default as Avatar, type AvatarProps} from "./Avatar";

package/src/components/Avatar/types.ts

@@ -0,0 +1,11 @@
+export enum AvatarSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum AvatarRadius {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}

package/src/components/BaseButton/BaseButton.tsx

@@ -1,4 +1,4 @@
-import React, {ComponentProps, FC, memo, ReactNode} from "react";
+import React, {ComponentProps, memo, ReactNode, forwardRef, ForwardRefRenderFunction} from "react";
 import classnames from "classnames";
 
 import {cloneOrCreateElement} from "../../utils";
@@ -13,11 +13,11 @@ export interface BaseButtonProps extends ComponentProps<"button"> {
     childrenClassName?: string;
 }
 
-const BaseButton: FC<BaseButtonProps> = props => {
+const BaseButton: ForwardRefRenderFunction<HTMLButtonElement, BaseButtonProps> = (props, ref) => {
     const {after, before, children, className, afterClassName, beforeClassName, childrenClassName, ...other} = props;
 
     return (
-        <button className={classnames(styles["base-button"], className)} {...other}>
+        <button ref={ref} className={classnames(styles["base-button"], className)} {...other}>
             {cloneOrCreateElement(before, {
                 className: classnames(styles["base-button__before"], beforeClassName),
             })}
@@ -33,4 +33,4 @@ const BaseButton: FC<BaseButtonProps> = props => {
     );
 };
 
-export default memo(BaseButton);
+export default memo(forwardRef(BaseButton));

package/src/components/BaseButton/index.ts

@@ -1,2 +1 @@
-export {default as BaseButton} from "./BaseButton";
-export type {BaseButtonProps} from "./BaseButton";
+export {default as BaseButton, type BaseButtonProps} from "./BaseButton";

package/src/components/Button/Button.tsx

@@ -1,35 +1,12 @@
-import React, {FC, memo} from "react";
+import React, {memo, forwardRef, ForwardRefRenderFunction} from "react";
 import classnames from "classnames";
 import {BaseButton, BaseButtonProps} from "../BaseButton";
 
 import {useComponentProps} from "../../providers";
 
-import styles from "./button.module.scss";
-
-export enum ButtonVariant {
-    Contained = "contained",
-    Outlined = "outlined",
-    Text = "text",
-}
-
-export enum ButtonColor {
-    Primary = "primary",
-    Secondary = "secondary",
-    Accent = "accent",
-}
+import {ButtonColor, ButtonRadius, ButtonSize, ButtonVariant} from "./types";
 
-export enum ButtonSize {
-    Small = "small",
-    Medium = "medium",
-    Large = "large",
-}
-
-export enum ButtonRadius {
-    Small = "small",
-    Medium = "medium",
-    Large = "large",
-    Full = "full",
-}
+import styles from "./button.module.scss";
 
 export interface ButtonProps extends BaseButtonProps {
     variant?: ButtonVariant;
@@ -38,7 +15,7 @@ export interface ButtonProps extends BaseButtonProps {
     radius?: ButtonRadius;
 }
 
-const Button: FC<ButtonProps> = props => {
+const Button: ForwardRefRenderFunction<HTMLButtonElement, ButtonProps> = (props, ref) => {
     const {
         variant = ButtonVariant.Contained,
         color,
@@ -52,6 +29,7 @@ const Button: FC<ButtonProps> = props => {
 
     return (
         <BaseButton
+            ref={ref}
             {...other}
             className={classnames(
                 styles["button"],
@@ -70,4 +48,4 @@ const Button: FC<ButtonProps> = props => {
     );
 };
 
-export default memo(Button);
+export default memo(forwardRef(Button));

package/src/components/Button/index.ts

@@ -1,2 +1,2 @@
-export {default as Button, ButtonVariant, ButtonRadius, ButtonColor, ButtonSize} from "./Button";
-export type {ButtonProps} from "./Button";
+export * from "./types";
+export {default as Button, type ButtonProps} from "./Button";

package/src/components/Button/types.ts

@@ -0,0 +1,24 @@
+export enum ButtonVariant {
+    Contained = "contained",
+    Outlined = "outlined",
+    Text = "text",
+}
+
+export enum ButtonColor {
+    Primary = "primary",
+    Secondary = "secondary",
+    Accent = "accent",
+}
+
+export enum ButtonSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum ButtonRadius {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+    Full = "full",
+}

package/src/components/Checkbox/Checkbox.tsx

@@ -1,29 +1,15 @@
-import React, {FC, memo, ReactElement} from "react";
+import React, {memo, ReactElement, forwardRef, ForwardRefRenderFunction} from "react";
 import classnames from "classnames";
 import {CheckboxProps as CheckboxRootProps, Indicator, Root} from "@radix-ui/react-checkbox";
 
 import {useComponentProps} from "../../providers";
 
+import {CheckboxVariant, CheckboxSize, CheckboxRadius} from "./types";
+
 import styles from "./checkbox.module.scss";
 
 export type {CheckedState} from "@radix-ui/react-checkbox";
 
-export enum CheckboxVariant {
-    Classic = "classic",
-    Soft = "soft",
-}
-
-export enum CheckboxSize {
-    Small = "small",
-    Medium = "medium",
-    Large = "large",
-}
-
-export enum CheckboxRadius {
-    Small = "small",
-    Large = "large",
-}
-
 export interface CheckboxProps extends CheckboxRootProps {
     indicatorClassName?: string;
     size?: CheckboxSize;
@@ -33,7 +19,7 @@ export interface CheckboxProps extends CheckboxRootProps {
     indeterminateIcon?: ReactElement;
 }
 
-const Checkbox: FC<CheckboxProps> = props => {
+const Checkbox: ForwardRefRenderFunction<HTMLButtonElement, CheckboxProps> = (props, ref) => {
     const {
         checked,
         size,
@@ -48,6 +34,7 @@ const Checkbox: FC<CheckboxProps> = props => {
 
     return (
         <Root
+            ref={ref}
             {...other}
             checked={checked}
             className={classnames(
@@ -68,4 +55,4 @@ const Checkbox: FC<CheckboxProps> = props => {
     );
 };
 
-export default memo(Checkbox);
+export default memo(forwardRef(Checkbox));

package/src/components/Checkbox/index.ts

@@ -1,2 +1,2 @@
-export {default as Checkbox, CheckboxVariant, CheckboxSize, CheckboxRadius} from "./Checkbox";
-export type {CheckboxProps, CheckedState} from "./Checkbox";
+export * from "./types";
+export {default as Checkbox, type CheckboxProps, type CheckedState} from "./Checkbox";

package/src/components/Checkbox/types.ts

@@ -0,0 +1,15 @@
+export enum CheckboxVariant {
+    Classic = "classic",
+    Soft = "soft",
+}
+
+export enum CheckboxSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum CheckboxRadius {
+    Small = "small",
+    Large = "large",
+}

package/src/components/Dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import React, {FC, memo, useEffect, useRef} from "react";
+import React, {memo, useEffect, useRef, forwardRef, ForwardRefRenderFunction} from "react";
 import classnames from "classnames";
 import {
     Content,
@@ -45,7 +45,7 @@ export const dialogPropsKeys = new Set<keyof DialogProps>([
     "title",
 ]);
 
-const Dialog: FC<DialogProps> = props => {
+const Dialog: ForwardRefRenderFunction<HTMLDivElement, DialogProps> = (props, ref) => {
     const {
         speed = 200,
         open,
@@ -102,6 +102,7 @@ const Dialog: FC<DialogProps> = props => {
                     style={{animationDuration: `${speed}ms`}}
                 />
                 <Content
+                    ref={ref}
                     className={classnames(styles["dialog-content"], className)}
                     style={{animationDuration: `${speed}ms`}}
                     {...other}
@@ -122,4 +123,4 @@ const Dialog: FC<DialogProps> = props => {
     );
 };
 
-export default memo(Dialog);
+export default memo(forwardRef(Dialog));

package/src/components/Dialog/index.ts

@@ -1,2 +1 @@
-export {default as Dialog, dialogPropsKeys} from "./Dialog";
-export type {DialogProps} from "./Dialog";
+export {default as Dialog, dialogPropsKeys, type DialogProps} from "./Dialog";

package/src/components/Drawer/Drawer.tsx

@@ -1,4 +1,4 @@
-import React, {FC, memo} from "react";
+import React, {memo, forwardRef, ForwardRefRenderFunction} from "react";
 import classnames from "classnames";
 
 import {useComponentProps} from "../../providers";
@@ -6,14 +6,9 @@ import {cloneOrCreateElement} from "../../utils";
 
 import {Dialog, DialogProps, dialogPropsKeys} from "../Dialog";
 
-import styles from "./drawer.module.scss";
+import {DrawerSide} from "./types";
 
-export enum DrawerSide {
-    Left = "left",
-    Right = "right",
-    Top = "top",
-    Bottom = "bottom",
-}
+import styles from "./drawer.module.scss";
 
 export interface DrawerProps extends DialogProps {
     side?: DrawerSide;
@@ -21,7 +16,7 @@ export interface DrawerProps extends DialogProps {
 
 export const drawerPropsKeys = new Set<keyof DrawerProps>(["side", ...dialogPropsKeys]);
 
-const Drawer: FC<DrawerProps> = props => {
+const Drawer: ForwardRefRenderFunction<HTMLDivElement, DrawerProps> = (props, ref) => {
     const {
         side = DrawerSide.Left,
         fullscreen,
@@ -34,6 +29,7 @@ const Drawer: FC<DrawerProps> = props => {
 
     return (
         <Dialog
+            ref={ref}
             {...other}
             overlayClassName={classnames(styles["drawer-overlay"], overlayClassName)}
             className={classnames(
@@ -54,4 +50,4 @@ const Drawer: FC<DrawerProps> = props => {
     );
 };
 
-export default memo(Drawer);
+export default memo(forwardRef(Drawer));

package/src/components/Drawer/index.ts

@@ -1,2 +1,2 @@
-export {default as Drawer, DrawerSide, drawerPropsKeys} from "./Drawer";
-export type {DrawerProps} from "./Drawer";
+export * from "./types";
+export {default as Drawer, drawerPropsKeys, type DrawerProps} from "./Drawer";

package/src/components/Drawer/types.ts

@@ -0,0 +1,6 @@
+export enum DrawerSide {
+    Left = "left",
+    Right = "right",
+    Top = "top",
+    Bottom = "bottom",
+}

package/src/components/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import React, {ComponentProps, FC, memo, ReactNode} from "react";
+import React, {ComponentProps, memo, ReactNode, forwardRef, ForwardRefRenderFunction} from "react";
 import classnames from "classnames";
 
 import {cloneOrCreateElement} from "../../utils";
@@ -16,7 +16,7 @@ export interface FooterProps extends ComponentProps<"footer"> {
     childrenClassName?: string;
 }
 
-const Footer: FC<FooterProps> = props => {
+const Footer: ForwardRefRenderFunction<HTMLElement, FooterProps> = (props, ref) => {
     const {
         left,
         right,
@@ -32,6 +32,7 @@ const Footer: FC<FooterProps> = props => {
 
     return (
         <footer
+            ref={ref}
             {...other}
             className={classnames(
                 styles["footer"],
@@ -55,4 +56,4 @@ const Footer: FC<FooterProps> = props => {
     );
 };
 
-export default memo(Footer);
+export default memo(forwardRef(Footer));

package/src/components/Footer/footer.module.scss

@@ -4,10 +4,11 @@ $root: footer;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   width: 100%;
   padding: var(--footer-padding, var(--side-padding-sm));
   padding-top: 0;
-  background-color: var(--footer-background-color, transparent);
+  background-color: var(--footer-bg-color, transparent);
   transition:
     background-color var(--transition-speed-sm),
     box-shadow var(--transition-speed-sm);

package/src/components/Footer/index.ts

@@ -1,2 +1 @@
-export {default as Footer} from "./Footer";
-export type {FooterProps} from "./Footer";
+export {default as Footer, type FooterProps} from "./Footer";

package/src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React, {ComponentProps, FC, memo, ReactNode} from "react";
+import React, {ComponentProps, memo, ReactNode, forwardRef, ForwardRefRenderFunction} from "react";
 import classnames from "classnames";
 
 import {cloneOrCreateElement} from "../../utils";
@@ -20,7 +20,7 @@ export interface HeaderProps extends Omit<ComponentProps<"header">, "title"> {
     alignCenter?: boolean;
 }
 
-const Header: FC<HeaderProps> = props => {
+const Header: ForwardRefRenderFunction<HTMLElement, HeaderProps> = (props, ref) => {
     const {
         title,
         before,
@@ -40,6 +40,7 @@ const Header: FC<HeaderProps> = props => {
 
     return (
         <header
+            ref={ref}
             {...other}
             className={classnames(
                 styles["header"],
@@ -70,4 +71,4 @@ const Header: FC<HeaderProps> = props => {
     );
 };
 
-export default memo(Header);
+export default memo(forwardRef(Header));

package/src/components/Header/header.module.scss

@@ -34,7 +34,7 @@ $root: header;
     font-weight: var(--header-title-font-weight, 700);
     line-height: var(--header-title-line-height, 120%);
     will-change: color;
-    transition: color var(--transition-speed);
+    transition: color var(--header-title-transition-speed, var(--transition-speed-md));
 
     .#{$root}--center & {
       justify-content: center;

package/src/components/Header/index.ts

@@ -1,2 +1 @@
-export {default as Header} from "./Header";
-export type {HeaderProps} from "./Header";
+export {default as Header, type HeaderProps} from "./Header";

package/src/components/Highlight/Highlight.tsx

@@ -4,13 +4,9 @@ import Highlighter, {HighlighterProps} from "react-highlight-words";
 
 import {useComponentProps} from "../../providers";
 
-import styles from "./highlight.module.scss";
+import {HighlightColor} from "./types";
 
-export enum HighlightColor {
-    Primary = "primary",
-    Secondary = "secondary",
-    Accent = "accent",
-}
+import styles from "./highlight.module.scss";
 
 export interface HighlightProps extends HighlighterProps {
     color?: HighlightColor;

package/src/components/Highlight/index.ts

@@ -1,2 +1,2 @@
-export {default as Highlight, HighlightColor} from "./Highlight";
-export type {HighlightProps} from "./Highlight";
+export * from "./types";
+export {default as Highlight, type HighlightProps} from "./Highlight";

package/src/components/Highlight/types.ts

@@ -0,0 +1,5 @@
+export enum HighlightColor {
+    Primary = "primary",
+    Secondary = "secondary",
+    Accent = "accent",
+}

package/src/components/Icon/Icon.tsx

@@ -1,4 +1,4 @@
-import React, {FC, memo, useEffect, ComponentProps} from "react";
+import React, {memo, useEffect, ComponentProps, forwardRef, ForwardRefRenderFunction} from "react";
 import classnames from "classnames";
 import {useComponentProps, useIcons} from "../../providers";
 
@@ -9,7 +9,7 @@ export interface IconProps extends ComponentProps<"svg"> {
     size?: number;
 }
 
-const Icon: FC<IconProps> = props => {
+const Icon: ForwardRefRenderFunction<SVGSVGElement, IconProps> = (props, ref) => {
     const {
         name,
         className,
@@ -37,10 +37,10 @@ const Icon: FC<IconProps> = props => {
     }
 
     return (
-        <svg className={classnames(styles["icon"], className)} width={width} height={height} {...other}>
+        <svg ref={ref} className={classnames(styles["icon"], className)} width={width} height={height} {...other}>
             <use href={`#${name}`} />
         </svg>
     );
 };
 
-export default memo(Icon);
+export default memo(forwardRef(Icon));

package/src/components/Icon/index.ts

@@ -1,2 +1 @@
-export {default as Icon} from "./Icon";
-export type {IconProps} from "./Icon";
+export {default as Icon, type IconProps} from "./Icon";

package/src/components/IconButton/IconButton.tsx

@@ -1,4 +1,4 @@
-import React, {FC, memo} from "react";
+import React, {memo, forwardRef, ForwardRefRenderFunction} from "react";
 import classnames from "classnames";
 
 import {Tooltip, TooltipProps} from "../Tooltip";
@@ -6,25 +6,9 @@ import {BaseButton, BaseButtonProps} from "../BaseButton";
 
 import {useComponentProps} from "../../providers";
 
-import styles from "./icon-button.module.scss";
-
-export enum IconButtonVariant {
-    Contained = "contained",
-    Outlined = "outlined",
-    Ghost = "ghost",
-}
+import {IconButtonVariant, IconButtonSize, IconButtonRadius} from "./types";
 
-export enum IconButtonSize {
-    Small = "small",
-    Medium = "medium",
-    Large = "large",
-}
-
-export enum IconButtonRadius {
-    Small = "small",
-    Medium = "medium",
-    Large = "large",
-}
+import styles from "./icon-button.module.scss";
 
 export interface IconButtonProps extends BaseButtonProps {
     size?: IconButtonSize;
@@ -33,7 +17,7 @@ export interface IconButtonProps extends BaseButtonProps {
     tooltip?: Omit<TooltipProps, "children">;
 }
 
-const IconButton: FC<IconButtonProps> = props => {
+const IconButton: ForwardRefRenderFunction<HTMLButtonElement, IconButtonProps> = (props, ref) => {
     const {size, radius, variant, tooltip, className, children, ...other} = {
         ...useComponentProps("iconButton"),
         ...props,
@@ -41,6 +25,7 @@ const IconButton: FC<IconButtonProps> = props => {
 
     const iconButton = (
         <BaseButton
+            ref={ref}
             {...other}
             className={classnames(
                 styles["icon-button"],
@@ -62,4 +47,4 @@ const IconButton: FC<IconButtonProps> = props => {
     return iconButton;
 };
 
-export default memo(IconButton);
+export default memo(forwardRef(IconButton));

package/src/components/IconButton/index.ts

@@ -1,2 +1,2 @@
-export {default as IconButton, IconButtonVariant, IconButtonRadius, IconButtonSize} from "./IconButton";
-export type {IconButtonProps} from "./IconButton";
+export * from "./types";
+export {default as IconButton, type IconButtonProps} from "./IconButton";

package/src/components/IconButton/types.ts

@@ -0,0 +1,17 @@
+export enum IconButtonVariant {
+    Contained = "contained",
+    Outlined = "outlined",
+    Ghost = "ghost",
+}
+
+export enum IconButtonSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum IconButtonRadius {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}