addon-ui 0.5.0 → 0.6.0

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

@@ -4,6 +4,7 @@ export declare enum AvatarSize {
     Large = "large"
 }
 export declare enum AvatarRadius {
+    None = "none",
     Small = "small",
     Medium = "medium",
     Large = "large"

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

@@ -6,7 +6,9 @@ export declare enum ButtonVariant {
 export declare enum ButtonColor {
     Primary = "primary",
     Secondary = "secondary",
-    Accent = "accent"
+    Accent = "accent",
+    Error = "error",
+    Success = "success"
 }
 export declare enum ButtonSize {
     Small = "small",

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { TabsProps as TabsRadixProps } from "@radix-ui/react-tabs";
+export interface TabsProps extends Omit<TabsRadixProps, "orientation"> {
+    reverse?: boolean;
+}
+declare const _default: React.NamedExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+//# sourceMappingURL=Tabs.d.ts.map

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

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

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { TabsListProps as TabsListRadixProps } from "@radix-ui/react-tabs";
+export interface TabsListProps extends TabsListRadixProps {
+    separator?: boolean;
+    indicator?: boolean;
+    roundedEdges?: boolean;
+    indicatorClassname?: string;
+}
+declare const _default: React.NamedExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+//# sourceMappingURL=TabsList.d.ts.map

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { TabsTriggerProps as TabsTriggerRadixProps } from "@radix-ui/react-tabs";
+export interface TabsTriggerProps extends TabsTriggerRadixProps {
+    before?: number | string;
+    after?: number | string;
+    afterClassname?: string;
+    beforeClassname?: string;
+}
+declare const _default: React.NamedExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;
+//# sourceMappingURL=TabsTrigger.d.ts.map

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

@@ -0,0 +1,6 @@
+export * from "./types";
+export { default as Tabs, type TabsProps } from "./Tabs";
+export { default as TabsList, type TabsListProps } from "./TabsList";
+export { default as TabsTrigger, type TabsTriggerProps } from "./TabsTrigger";
+export { default as TabsContent, type TabsContentProps } from "./TabsContent";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,6 @@
+export declare enum TabsColor {
+    Primary = "primary",
+    Secondary = "secondary",
+    Accent = "accent"
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -1,13 +1,15 @@
 import React, { ReactElement, ReactNode } from "react";
 import { ToastProps as ToastRootProps, ToastProviderProps } from "@radix-ui/react-toast";
 import { IconButtonProps } from "../IconButton";
-import { ToastSide, ToastRadius, ToastColor } from "./types";
+import { ToastSide, ToastRadius, ToastColor, ToastAnimation } from "./types";
 export interface ToastProps extends Omit<ToastRootProps, "title">, Omit<ToastProviderProps, "children"> {
     side?: ToastSide;
     color?: ToastColor;
     radius?: ToastRadius;
     title?: ReactNode;
     action?: ReactNode;
+    animationIn?: ToastAnimation;
+    animationOut?: ToastAnimation;
     description?: ReactNode;
     closeIcon?: ReactElement;
     closeProps?: IconButtonProps;

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

@@ -16,4 +16,8 @@ export declare enum ToastColor {
     Error = "error",
     Success = "success"
 }
+export declare enum ToastAnimation {
+    Slide = "slide",
+    Opacity = "opacity"
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1,9 @@
+import React, { ComponentProps } from "react";
+export interface TruncateProps extends ComponentProps<"span"> {
+    text?: string;
+    middle?: boolean;
+    separator?: string;
+}
+declare const _default: React.NamedExoticComponent<Omit<TruncateProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export default _default;
+//# sourceMappingURL=Truncate.d.ts.map

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

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

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { OverflowListProps } from "react-responsive-overflow-list";
+export type TruncateListProps<T = unknown> = OverflowListProps<T> & {
+    counterClassName?: string;
+};
+declare const TruncateList: {
+    <T>(props: TruncateListProps<T> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }): React.ReactElement | null;
+    displayName?: string;
+};
+export default TruncateList;
+//# sourceMappingURL=TruncateList.d.ts.map

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

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

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

@@ -16,11 +16,14 @@ export * from "./Odometer";
 export * from "./ScrollArea";
 export * from "./SvgSprite";
 export * from "./Switch";
+export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextArea";
 export * from "./TextField";
 export * from "./Toast";
 export * from "./Tooltip";
+export * from "./Truncate";
+export * from "./TruncateList";
 export * from "./View";
 export * from "./ViewDrawer";
 export * from "./ViewModal";

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, TagProps, TextAreaProps, TextFieldProps, ToastProps, TooltipProps, ViewProps, ViewDrawerProps, ViewModalProps } from "../components";
+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";
 export interface ComponentsProps {
     avatar?: Pick<AvatarProps, "size" | "radius" | "cursorPointer" | "delayMs">;
     button?: Pick<ButtonProps, "variant" | "color" | "size" | "radius">;
@@ -16,11 +16,17 @@ export interface ComponentsProps {
     odometer?: Pick<OdometerProps, "auto" | "format" | "duration">;
     scrollArea?: ScrollAreaProps;
     switch?: SwitchProps;
+    tabs?: TabsProps;
+    tabsContent?: TabsContentProps;
+    tabsList?: TabsListProps;
+    tabsTrigger?: TabsTriggerProps;
     tag?: Pick<TagProps, "variant" | "size" | "color" | "radius" | "clickable">;
     textArea?: TextAreaProps;
     textField?: TextFieldProps;
     toast?: Pick<ToastProps, "side" | "duration" | "swipeDirection" | "swipeThreshold" | "closeProps" | "closeIcon" | "fullWidth" | "sticky" | "radius" | "color">;
     tooltip?: Omit<TooltipProps, "content">;
+    truncate?: TruncateProps;
+    truncateList?: TruncateListProps;
     view?: ViewProps;
     viewDrawer?: ViewDrawerProps;
     viewModal?: ViewModalProps;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "addon-ui",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.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",
@@ -83,18 +83,20 @@
     "odometer": "^0.4.8",
     "radix-ui": "^1.1.3",
     "react-highlight-words": "^0.21.0",
+    "react-responsive-overflow-list": "^0.2.1",
     "sass": "^1.85.1",
     "ts-deepmerge": "^7.0.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.0.0",
     "@commitlint/config-conventional": "^20.0.0",
-    "@release-it/conventional-changelog": "^10.0.1",
-    "@types/chrome": "^0.1.12",
-    "@types/jest": "^30.0.0",
     "@eslint/js": "^9.21.0",
+    "@release-it/conventional-changelog": "^10.0.1",
     "@rsbuild/plugin-sass": "^1.4.0",
     "@storybook/react": "^9.1.3",
+    "@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",
@@ -104,12 +106,12 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
-    "prettier": "^3.5.3",
     "husky": "^9.1.7",
     "jest": "^30.1.3",
-    "release-it": "^19.0.5",
+    "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "release-it": "^19.0.5",
     "rspack-plugin-virtual-module": "^1.0.0",
     "storybook": "^9.1.3",
     "storybook-react-rsbuild": "^2.1.0",

package/src/components/Avatar/avatar.module.scss

@@ -42,6 +42,10 @@ $root: avatar;
   }
 
   // Radius
+  &--none-radius {
+    border-radius: 0;
+  }
+
   &--small-radius {
     border-radius: var(--avatar-border-radius-sm, 20%);
   }

package/src/components/Avatar/types.ts

@@ -5,6 +5,7 @@ export enum AvatarSize {
 }
 
 export enum AvatarRadius {
+    None = "none",
     Small = "small",
     Medium = "medium",
     Large = "large",

package/src/components/Button/button.module.scss

@@ -5,7 +5,7 @@ $root: button;
   font-weight: var(--button-font-weight, 500);
   font-size: var(--button-font-size, var(--font-size, 14px));
   letter-spacing: var(--button-letter-spacing, 0.5px);
-  line-height: var(--button-line-height, var(--line-height, 1 rem));
+  line-height: var(--button-line-height, var(--line-height, 1rem));
   height: var(--button-height, 34px);
   border-radius: var(--button-border-radius, 10px);
   padding: var(--button-padding, 0 16px);
@@ -38,6 +38,16 @@ $root: button;
       color: #fff;
       background: var(--accent-color);
     }
+
+    &.#{$root}--error-color {
+      color: #fff;
+      background: var(--error-color);
+    }
+
+    &.#{$root}--success-color {
+      color: #fff;
+      background: var(--success-color);
+    }
   }
 
   &--outlined {
@@ -55,17 +65,27 @@ $root: button;
 
     &.#{$root}--primary-color {
       color: var(--primary-color);
-      border-color: var(--button-outlined-border-primary-color);
+      border-color: var(--button-outlined-border-primary-color, var(--primary-color));
     }
 
     &.#{$root}--secondary-color {
       color: var(--secondary-color);
-      border-color: var(--button-outlined-border-secondary-color);
+      border-color: var(--button-outlined-border-secondary-color, var(--secondary-color));
     }
 
     &.#{$root}--accent-color {
       color: var(--accent-color);
-      border-color: var(--button-outlined-border-accent-color);
+      border-color: var(--button-outlined-border-accent-color, var(--accent-color-color));
+    }
+
+    &.#{$root}--error-color {
+      color: var(--error-color);
+      border-color: var(--button-outlined-border-error-color, var(--error-color));
+    }
+
+    &.#{$root}--success-color {
+      color: var(--success-color);
+      border-color: var(--button-outlined-border-success-color, var(--success-color));
     }
   }
 
@@ -92,6 +112,14 @@ $root: button;
     &.#{$root}--accent-color {
       color: var(--accent-color);
     }
+
+    &.#{$root}--error-color {
+      color: var(--error-color);
+    }
+
+    &.#{$root}--success-color {
+      color: var(--success-color);
+    }
   }
 
   // Sizes

package/src/components/Button/types.ts

@@ -8,6 +8,8 @@ export enum ButtonColor {
     Primary = "primary",
     Secondary = "secondary",
     Accent = "accent",
+    Error = "error",
+    Success = "success",
 }
 
 export enum ButtonSize {

package/src/components/List/list.module.scss

@@ -1,7 +1,8 @@
 .list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: var(--list-gap, 10px);
+  width: 100%;
   padding: 0;
   margin: 0;
   list-style: none;

package/src/components/ListItem/list-item.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 10px;
+  gap: var(--list-item-gap, 10px);
   flex-wrap: nowrap;
   box-sizing: border-box;
   line-height: var(--list-item-line-height, var(--line-height, 1 rem));

package/src/components/ScrollArea/ScrollArea.tsx

@@ -40,21 +40,8 @@ const ScrollArea: ForwardRefRenderFunction<HTMLDivElement, ScrollAreaProps> = (p
     const rootRef = React.useRef<HTMLDivElement | null>(null);
     const viewportRef = React.useRef<HTMLDivElement | null>(null);
 
-    useImperativeHandle(
-        ref,
-        () => ({
-            ...rootRef.current!,
-            scrollTo: ((optionsOrX?: ScrollToOptions | number, y?: number) => {
-                if (typeof optionsOrX === 'number') {
-                    viewportRef.current?.scrollTo(optionsOrX, y!);
-                } else {
-                    viewportRef.current?.scrollTo(optionsOrX);
-                }
-            }) as HTMLElement['scrollTo'],
+    useImperativeHandle(ref, () => viewportRef.current!, []);
 
-        }),
-        []
-    );
     return (
         <Root ref={rootRef} className={classnames(styles["scroll-area"], className)} {...other}>
             <Viewport
@@ -76,7 +63,7 @@ const ScrollArea: ForwardRefRenderFunction<HTMLDivElement, ScrollAreaProps> = (p
                 style={{padding: `0 ${xOffset}px`}}
                 className={classnames(styles["scroll-area__scrollbar"], scrollbarClassName)}
             >
-                <Thumb className={classnames(styles["scroll-area__thumb"], thumbClassName)}/>
+                <Thumb className={classnames(styles["scroll-area__thumb"], thumbClassName)} />
             </Scrollbar>
 
             <Scrollbar
@@ -84,10 +71,10 @@ const ScrollArea: ForwardRefRenderFunction<HTMLDivElement, ScrollAreaProps> = (p
                 style={{padding: `${yOffset}px 0`}}
                 className={classnames(styles["scroll-area__scrollbar"], scrollbarClassName)}
             >
-                <Thumb className={classnames(styles["scroll-area__thumb"], thumbClassName)}/>
+                <Thumb className={classnames(styles["scroll-area__thumb"], thumbClassName)} />
             </Scrollbar>
 
-            <Corner className={classnames(styles["scroll-area__corner"], cornerClassName)}/>
+            <Corner className={classnames(styles["scroll-area__corner"], cornerClassName)} />
         </Root>
     );
 };

package/src/components/ScrollArea/scroll-area.module.scss

@@ -3,13 +3,21 @@ $root: scroll-area;
 .#{$root} {
   box-sizing: border-box;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 
   &__viewport {
     width: 100%;
     height: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
 
-    &--horizontal > div {
-      display: inherit !important;
+    & > div {
+      flex: 1;
+      display: flex !important;
+      flex-direction: column;
     }
   }
 

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,32 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+import classnames from "classnames";
+
+import {Root, TabsProps as TabsRadixProps} from "@radix-ui/react-tabs";
+import {useComponentProps} from "../../providers";
+
+import styles from "./tabs.module.scss";
+
+export interface TabsProps extends Omit<TabsRadixProps, "orientation"> {
+    reverse?: boolean;
+}
+const Tabs: ForwardRefRenderFunction<HTMLDivElement, TabsProps> = (props, ref) => {
+    const {reverse, className, children, ...other} = {...useComponentProps("tabs"), ...props};
+
+    return (
+        <Root
+            ref={ref}
+            className={classnames(
+                styles["tabs"],
+                {
+                    [styles["tabs--reverse"]]: reverse,
+                },
+                className
+            )}
+            {...other}
+        >
+            {children}
+        </Root>
+    );
+};
+
+export default memo(forwardRef(Tabs));

package/src/components/Tabs/TabsContent.tsx

@@ -0,0 +1,21 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+import classnames from "classnames";
+
+import {Content, TabsContentProps as TabsContentRadixProps} from "@radix-ui/react-tabs";
+import {useComponentProps} from "../../providers";
+
+import styles from "./tabs.module.scss";
+
+export type TabsContentProps = TabsContentRadixProps;
+
+const TabsList: ForwardRefRenderFunction<HTMLDivElement, TabsContentProps> = (props, ref) => {
+    const {className, children, ...other} = {...useComponentProps("tabsContent"), ...props};
+
+    return (
+        <Content ref={ref} className={classnames(styles["tabs__content"], className)} {...other}>
+            {children}
+        </Content>
+    );
+};
+
+export default memo(forwardRef(TabsList));

package/src/components/Tabs/TabsList.tsx

@@ -0,0 +1,131 @@
+import React, {
+    forwardRef,
+    ForwardRefRenderFunction,
+    memo,
+    useCallback,
+    useImperativeHandle,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from "react";
+import classnames from "classnames";
+import _debounce from "lodash/debounce";
+
+import {List, TabsListProps as TabsListRadixProps} from "@radix-ui/react-tabs";
+import {useComponentProps} from "../../providers";
+
+import styles from "./tabs.module.scss";
+
+export interface TabsListProps extends TabsListRadixProps {
+    separator?: boolean;
+    indicator?: boolean;
+    roundedEdges?: boolean;
+    indicatorClassname?: string;
+}
+
+const TabsList: ForwardRefRenderFunction<HTMLDivElement, TabsListProps> = (props, ref) => {
+    const {
+        separator = true,
+        indicator = true,
+        roundedEdges,
+        className,
+        indicatorClassname,
+        children,
+        ...other
+    } = {...useComponentProps("tabsList"), ...props};
+
+    const listRef = useRef<HTMLDivElement | null>(null);
+    const indicatorRef = useRef<HTMLSpanElement | null>(null);
+
+    const [mounted, setMounted] = useState(false);
+    const [modificators, setModificators] = useState<{first?: boolean; last?: boolean}>({});
+
+    useImperativeHandle(ref, () => listRef.current!, []);
+
+    const updateIndicatorImmediate = useCallback(() => {
+        const list = listRef.current;
+        const indicator = indicatorRef.current;
+        const activeTrigger = list?.querySelector("[data-state='active']") as HTMLElement | null;
+
+        if (!list || !indicator || !activeTrigger) return;
+
+        const triggers = Array.from(list.querySelectorAll("[data-state]")) as HTMLElement[];
+        const first = triggers[0];
+        const last = triggers[triggers.length - 1];
+
+        const listRect = list.getBoundingClientRect();
+        const triggerRect = activeTrigger.getBoundingClientRect();
+        indicator.style.left = `${triggerRect.left - listRect.left + list.scrollLeft}px`;
+        indicator.style.width = `${triggerRect.width}px`;
+
+        setModificators({
+            first: activeTrigger === first,
+            last: activeTrigger === last,
+        });
+    }, []);
+
+    const updateIndicator = useCallback(_debounce(updateIndicatorImmediate, 50), [updateIndicatorImmediate]);
+
+    useLayoutEffect(() => {
+        updateIndicatorImmediate();
+
+        setMounted(true);
+
+        const resizeObserver = new ResizeObserver(updateIndicator);
+        const mutationObserver = new MutationObserver(updateIndicator);
+
+        if (listRef.current) {
+            resizeObserver.observe(listRef.current);
+
+            mutationObserver.observe(listRef.current, {
+                attributes: true,
+                attributeFilter: ["data-state"],
+                subtree: true,
+                childList: true,
+            });
+        }
+
+        window.addEventListener("resize", updateIndicator);
+
+        return () => {
+            window.removeEventListener("resize", updateIndicator);
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+            updateIndicator.cancel();
+        };
+    }, []);
+
+    return (
+        <List
+            ref={listRef}
+            className={classnames(
+                styles["tabs__list"],
+                {
+                    [styles["tabs__list--separator"]]: separator,
+                },
+                className
+            )}
+            {...other}
+        >
+            {children}
+            {mounted && (
+                <span
+                    ref={indicatorRef}
+                    aria-hidden={!mounted || !indicator}
+                    className={classnames(
+                        styles["tabs__indicator"],
+                        {
+                            [styles["tabs__indicator--show"]]: indicator,
+                            [styles["tabs__indicator--rounded_edges"]]: roundedEdges,
+                            [styles["tabs__indicator--first"]]: modificators.first,
+                            [styles["tabs__indicator--last"]]: modificators.last,
+                        },
+                        indicatorClassname
+                    )}
+                />
+            )}
+        </List>
+    );
+};
+
+export default memo(forwardRef<HTMLDivElement, TabsListProps>(TabsList));

package/src/components/Tabs/TabsTrigger.tsx

@@ -0,0 +1,43 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+import classnames from "classnames";
+
+import {TabsTriggerProps as TabsTriggerRadixProps, Trigger} from "@radix-ui/react-tabs";
+import {useComponentProps} from "../../providers";
+
+import styles from "./tabs.module.scss";
+
+export interface TabsTriggerProps extends TabsTriggerRadixProps {
+    before?: number | string;
+    after?: number | string;
+    afterClassname?: string;
+    beforeClassname?: string;
+}
+
+const TabsTrigger: ForwardRefRenderFunction<HTMLButtonElement, TabsTriggerProps> = (props, ref) => {
+    const {
+        after,
+        before,
+        className,
+        afterClassname,
+        beforeClassname,
+        children,
+        asChild = true,
+        ...other
+    } = {...useComponentProps("tabsTrigger"), ...props};
+
+    return (
+        <Trigger ref={ref} asChild={asChild} className={classnames(styles["tabs__trigger"], className)} {...other}>
+            <div className={classnames(styles["tabs__trigger-wrapper"])}>
+                {before && (
+                    <span className={classnames(styles["tabs__trigger__before"], beforeClassname)}>{before}</span>
+                )}
+
+                {typeof children === "string" ? <span>{children}</span> : children}
+
+                {after && <span className={classnames(styles["tabs__trigger__after"], afterClassname)}>{after}</span>}
+            </div>
+        </Trigger>
+    );
+};
+
+export default memo(forwardRef(TabsTrigger));

package/src/components/Tabs/index.ts

@@ -0,0 +1,5 @@
+export * from "./types";
+export {default as Tabs, type TabsProps} from "./Tabs";
+export {default as TabsList, type TabsListProps} from "./TabsList";
+export {default as TabsTrigger, type TabsTriggerProps} from "./TabsTrigger";
+export {default as TabsContent, type TabsContentProps} from "./TabsContent";