addon-ui 0.6.1 → 0.7.1

package/README.md

@@ -54,6 +54,7 @@ yarn add addon-ui
 
 This library now ships with dedicated documentation files for each component in the docs/ directory. Start here:
 
+- [Accordion](docs/Accordion.md)
 - [Avatar](docs/Avatar.md)
 - [Button](docs/Button.md)
 - [Checkbox](docs/Checkbox.md)
@@ -70,10 +71,14 @@ This library now ships with dedicated documentation files for each component in
 - [ScrollArea](docs/ScrollArea.md)
 - [SvgSprite](docs/SvgSprite.md)
 - [Switch](docs/Switch.md)
+- [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)
+- [Tooltip](docs/Tooltip.md)
+- [Truncate](docs/Truncate.md)
+- [TruncateList](docs/TruncateList.md)
 - [View](docs/View.md)
 - [ViewDrawer](docs/ViewDrawer.md)
 - [ViewModal](docs/ViewModal.md)

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+export { default as Accordion, type AccordionProps } from "./Accordion";
+export { default as AccordionItem, type AccordionItemProps } from "./AccordionItem";
+export { default as AccordionHeader, type AccordionHeaderProps } from "./AccordionHeader";
+export { default as AccordionTrigger, type AccordionTriggerProps } from "./AccordionTrigger";
+export { default as AccordionContent, type AccordionContentProps } from "./AccordionContent";
+//# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,4 @@
+export * from "./Accordion";
 export * from "./Avatar";
 export * from "./BaseButton";
 export * from "./Button";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "addon-ui",
   "type": "module",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "description": "A comprehensive React UI component library designed exclusively for the AddonBone browser extension framework with customizable theming and consistent design patterns",
   "keywords": [
     "react",

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,16 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+import classnames from "classnames";
+
+import {AccordionMultipleProps, AccordionSingleProps, Root} from "@radix-ui/react-accordion";
+
+import styles from "./accordion.module.scss";
+
+export type AccordionProps = AccordionMultipleProps | AccordionSingleProps;
+
+const Accordion: ForwardRefRenderFunction<HTMLDivElement, AccordionProps> = (props, ref) => {
+    const {className, ...other} = props;
+
+    return <Root ref={ref} className={classnames(styles["accordion"], className)} {...other} />;
+};
+
+export default memo(forwardRef(Accordion));

package/src/components/Accordion/AccordionContent.tsx

@@ -0,0 +1,16 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+import classnames from "classnames";
+
+import {AccordionContentProps as AccordionContentRadixProps, Content} from "@radix-ui/react-accordion";
+
+import styles from "./accordion.module.scss";
+
+export type AccordionContentProps = AccordionContentRadixProps;
+
+const AccordionContent: ForwardRefRenderFunction<HTMLDivElement, AccordionContentProps> = (props, ref) => {
+    const {className, ...other} = props;
+
+    return <Content ref={ref} className={classnames(styles["accordion-content"], className)} {...other} />;
+};
+
+export default memo(forwardRef(AccordionContent));

package/src/components/Accordion/AccordionHeader.tsx

@@ -0,0 +1,16 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+import classnames from "classnames";
+
+import {AccordionHeaderProps as AccordionHeaderRadixProps, Header} from "@radix-ui/react-accordion";
+
+import styles from "./accordion.module.scss";
+
+export type AccordionHeaderProps = AccordionHeaderRadixProps;
+
+const AccordionHeader: ForwardRefRenderFunction<HTMLDivElement, AccordionHeaderProps> = (props, ref) => {
+    const {className, ...other} = props;
+
+    return <Header ref={ref} className={classnames(styles["accordion-header"], className)} {...other} />;
+};
+
+export default memo(forwardRef(AccordionHeader));

package/src/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,16 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+import classnames from "classnames";
+
+import {AccordionItemProps as AccordionItemRadixProps, Item} from "@radix-ui/react-accordion";
+
+import styles from "./accordion.module.scss";
+
+export type AccordionItemProps = AccordionItemRadixProps;
+
+const AccordionItem: ForwardRefRenderFunction<HTMLDivElement, AccordionItemProps> = (props, ref) => {
+    const {className, ...other} = props;
+
+    return <Item ref={ref} className={classnames(styles["accordion-item"], className)} {...other} />;
+};
+
+export default memo(forwardRef(AccordionItem));

package/src/components/Accordion/AccordionTrigger.tsx

@@ -0,0 +1,23 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+import classnames from "classnames";
+
+import {AccordionTriggerProps as AccordionTriggerRadixProps, Trigger} from "@radix-ui/react-accordion";
+
+import styles from "./accordion.module.scss";
+
+export type AccordionTriggerProps = AccordionTriggerRadixProps;
+
+const AccordionTrigger: ForwardRefRenderFunction<HTMLButtonElement, AccordionTriggerProps> = (props, ref) => {
+    const {className, asChild = true, ...other} = props;
+
+    return (
+        <Trigger
+            ref={ref}
+            asChild={asChild}
+            className={classnames(styles["accordion-trigger"], className)}
+            {...other}
+        />
+    );
+};
+
+export default memo(forwardRef(AccordionTrigger));

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

@@ -0,0 +1,58 @@
+$root: accordion;
+
+.#{$root} {
+  &-item {
+  }
+
+  &-header {
+    position: relative;
+    padding: var(--accordion-header-pading);
+    display: flex;
+    align-items: center;
+    background-color: var(--accordion-header-bg-color, var(--bg-primary-color));
+    will-change: background-color;
+    transition: background-color var(--accordion-speed-bg, var(--speed-color));
+
+    &:hover {
+      background: var(--accordion-header-hover-bg-color);
+    }
+  }
+
+  &-trigger {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  &-content {
+    background-color: var(--accordion-content-bg-color);
+    will-change: background-color;
+    transition: background-color var(--accordion-speed-bg, var(--speed-color));
+
+    &[data-state="open"] {
+      animation: slideDown var(--accordion-speed-animation, var(--speed-sm)) ease-in-out;
+    }
+
+    &[data-state="closed"] {
+      animation: slideUp var(--accordion-speed-animation, var(--speed-sm)) ease-in-out;
+    }
+  }
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

package/src/components/Accordion/index.ts

@@ -0,0 +1,5 @@
+export {default as Accordion, type AccordionProps} from "./Accordion";
+export {default as AccordionItem, type AccordionItemProps} from "./AccordionItem";
+export {default as AccordionHeader, type AccordionHeaderProps} from "./AccordionHeader";
+export {default as AccordionTrigger, type AccordionTriggerProps} from "./AccordionTrigger";
+export {default as AccordionContent, type AccordionContentProps} from "./AccordionContent";

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

@@ -17,6 +17,9 @@ $root: avatar;
   border-style: var(--avatar-border-style);
   font-size: var(--avatar-font-size, 18px);
   font-weight: var(--avatar-font-weight, 500);
+  transition:
+    border-color var(--avatar-speed-border-color, var(--speed-color)),
+    background-color var(--avatar-speed-bg, var(--speed-color));
 
   &--cursor-pointer {
     cursor: pointer;
@@ -73,10 +76,14 @@ $root: avatar;
     align-items: center;
     justify-content: center;
     color: var(--avatar-fallback-color);
-    line-height: var(--fallback-line-height, var(--line-height, 1 rem));
+    line-height: var(--fallback-line-height, var(--line-height, 1rem));
     background-color: var(--avatar-fallback-bg-color, var(--avatar-bg-color));
     border-width: var(--avatar-fallback-border-width, var(--avatar-border-width));
     border-color: var(--avatar-fallback-border-color, var(--avatar-border-color));
     border-style: var(--avatar-fallback-border-style, var(--avatar-border-style));
+    transition:
+      color var(--avatar-speed-color, var(--speed-color)),
+      border-color var(--avatar-speed-border-color, var(--speed-color)),
+      background-color var(--avatar-speed-bg, var(--speed-color));
   }
 }

package/src/components/BaseButton/base-button.module.scss

@@ -9,11 +9,6 @@
   vertical-align: middle;
   justify-content: center;
   gap: var(--base-button-gap, 8px);
-  will-change: background, color, transform;
-  transition:
-    background var(--transition-speed-sm),
-    color var(--transition-speed-sm),
-    transform var(--transition-speed-sm);
 
   &__after,
   &__before,

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

@@ -9,6 +9,11 @@ $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)),
+    transform var(--button-speed-transform, var(--speed-sm));
 
   &:active:not(:disabled) {
     transform: scale(var(--button-scale, 0.98));
@@ -164,5 +169,6 @@ $root: button;
     overflow: hidden;
     max-width: var(--button-max-width, 160px);
     line-height: initial;
+    transition: color var(--button-speed-color, var(--speed-color));
   }
 }

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

@@ -13,8 +13,8 @@ $root: checkbox;
   border: var(--checkbox-border-width, 1px) solid var(--checkbox-border-color, #999);
   will-change: background, color;
   transition:
-    background var(--transition-speed-sm),
-    color var(--transition-speed-sm);
+    background var(--checkbox-speed-bg, var(--speed-color)),
+    color var(--checkbox-speed-color, var(--speed-color));
 
   &:disabled {
     opacity: var(--checkbox-disabled-opacity, 0.6);

package/src/components/Dialog/dialog.module.scss

@@ -23,10 +23,10 @@ $root: dialog;
     position: fixed;
     z-index: 9999;
     transition:
-      background-color var(--transition-speed-sm),
-      transform var(--transition-speed-sm),
-      opacity var(--transition-speed-sm),
-      color var(--transition-speed-sm);
+      background-color var(--dialog-speed-bg, var(--speed-color)),
+      transform var(--dialog-speed-transform, var(--speed-sm)),
+      opacity var(--dialog-speed-opacity, var(--speed-sm)),
+      color var(--dialog-speed-color, var(--speed-color));
     animation-timing-function: ease-in-out;
   }
 

package/src/components/Drawer/drawer.module.scss

@@ -9,6 +9,7 @@ $root: drawer;
     padding: var(--drawer-padding, 0);
     box-shadow: var(--drawer-box-shadow, 0 0 4px rgba(0, 0, 0, 0.5));
     background-color: var(--drawer-bg-color, var(--bg-secondary-color));
+    transition: background-color var(--drawer-speed-bg, var(--speed-color));
 
     &[data-state="open"] {
       &.#{$root}-content--left-side {

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

@@ -10,8 +10,8 @@ $root: footer;
   padding-top: 0;
   background-color: var(--footer-bg-color, transparent);
   transition:
-    background-color var(--transition-speed-sm),
-    box-shadow var(--transition-speed-sm);
+    background-color var(--footer-speed-bg, var(--speed-color)),
+    box-shadow var(--footer-speed-box-shadow, var(--speed-color));
 
   [dir="rtl"] & {
     flex-direction: row-reverse;

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

@@ -8,6 +8,7 @@ $root: header;
   gap: var(--header-gap, 10px);
   padding: var(--header-padding, var(--side-padding-sm));
   padding-bottom: 0;
+  transition: background var(--header-speed-bg, var(--speed-color));
 
   &__wrap {
     display: flex;
@@ -22,6 +23,7 @@ $root: header;
     margin: 0;
     overflow: hidden;
     text-overflow: ellipsis;
+    transition: color var(--header-speed-color, var(--speed-color));
   }
 
   &__title {
@@ -34,7 +36,6 @@ $root: header;
     font-weight: var(--header-title-font-weight, 700);
     line-height: var(--header-title-line-height, 120%);
     will-change: color;
-    transition: color var(--header-title-transition-speed, var(--transition-speed-md));
 
     .#{$root}--center & {
       justify-content: center;

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

@@ -4,12 +4,15 @@ $root: highlight;
   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, 1 rem));
+  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);

package/src/components/Icon/icon.module.scss

@@ -1,8 +1,8 @@
 .icon {
   color: var(--icon-color);
   transition:
-    transform var(--transition-speed-sm),
-    color var(--transition-speed-sm);
+    transform var(--icon-speed-transform, var(--speed-sm)),
+    color var(--icon-speed-color, var(--speed-color));
 
   &:hover {
     color: var(--icon-color-hover);

package/src/components/IconButton/icon-button.module.scss

@@ -7,6 +7,9 @@ $root: icon-button;
   height: var(--icon-button-size, 25px);
   color: var(--icon-button-color);
   background: none;
+  transition:
+    color var(--icon-button-speed-color, var(--speed-color)),
+    background var(--icon-button-speed-bg, var(--speed-color));
 
   &:hover:not(:disabled) {
     color: var(--icon-button-color-hover);

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

@@ -6,4 +6,5 @@
   padding: 0;
   margin: 0;
   list-style: none;
+  transition: background-color var(--list-speed-bg, var(--speed-color));
 }

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

@@ -5,7 +5,8 @@
   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));
+  line-height: var(--list-item-line-height, var(--line-height, 1rem));
+  transition: background-color var(--list-item-speed-bg, var(--speed-color));
 
   [dir="rtl"] & {
     flex-direction: row-reverse;
@@ -25,9 +26,11 @@
     white-space: nowrap;
     text-overflow: ellipsis;
   }
+
   &__primary {
     color: var(--list-item-primary-color, var(--text-primary-color));
   }
+
   &__secondary {
     color: var(--list-item-secondary-color, var(--text-secondary-color));
   }
@@ -38,4 +41,14 @@
     align-items: center;
     justify-content: center;
   }
+
+  &__center,
+  &__primary,
+  &__secondary,
+  &__left,
+  &__right {
+    transition:
+      color var(--list-item-speed-color, var(--speed-color)),
+      background var(--list-item-speed-bg, var(--speed-color));
+  }
 }

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

@@ -20,10 +20,10 @@ $root: modal;
     box-shadow: var(--modal-box-shadow, 0 0 4px rgba(0, 0, 0, 0.5));
     background-color: var(--modal-bg-color, var(--bg-primary-color));
     transition:
-      background-color var(--transition-speed-sm),
-      transform var(--transition-speed-sm),
-      opacity var(--transition-speed-sm),
-      color var(--transition-speed-sm) !important;
+      background-color var(--modal-speed-bg, var(--speed-color)),
+      transform var(--modal-speed-transform, var(--speed-sm)),
+      opacity var(--modal-speed-opacity, var(--speed-sm)),
+      color var(--modal-speed-color, var(--speed-color)) !important;
 
     &[data-state="open"] {
       &.#{$root}-content {

package/src/components/Odometer/odometer.module.scss

@@ -5,6 +5,7 @@ $root: odometer;
   position: relative;
   color: var(--odometer-color, var(--text-primary-color));
   font-family: var(--odometer-font-family, var(--font-family)), sans-serif;
+  transition: color var(--odometer-speed-color, var(--speed-color));
 
   &-digit {
     display: inline-block;
@@ -66,7 +67,7 @@ $root: odometer;
   &-inside {
     transition:
       all var(--speed),
-      color var(--transition-speed-sm);
+      color var(--odometer-speed-color, var(--speed-color));
 
     &:before {
       content: "";
@@ -75,7 +76,7 @@ $root: odometer;
       color: inherit;
       transition:
         all var(--speed),
-        color var(--transition-speed-sm);
+        color var(--odometer-speed-color, var(--speed-color));
     }
   }
 }

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

@@ -27,7 +27,7 @@ $root: scroll-area;
     touch-action: none;
     padding: var(--scroll-area-scrollbar-padding, 3px);
     background: var(--scroll-area-scrollbar-bg-color, transparent);
-    transition: background var(--transition-speed-sm);
+    transition: background var(--scroll-area-speed-bg, var(--speed-color));
 
     &:hover {
       background: var(--scroll-area-scrollbar-bg-color-hover, transparent);
@@ -50,7 +50,7 @@ $root: scroll-area;
     position: relative;
     background: var(--scroll-area-thumb-bg-color);
     border-radius: var(--scroll-area-thumb-border-radius, 100px);
-    transition: background var(--transition-speed-sm);
+    transition: background var(--scroll-area-speed-bg, var(--speed-color));
 
     &:hover {
       background: var(--scroll-area-thumb-bg-color-hover, var(--scroll-area-thumb-bg-color));
@@ -59,6 +59,7 @@ $root: scroll-area;
 
   &__corner {
     background: var(--scroll-area-scrollbar-bg-color, transparent);
+    transition: background var(--scroll-area-speed-bg, var(--speed-color));
 
     &:hover {
       background: var(--scroll-area-scrollbar-bg-color-hover, transparent);

package/src/components/Switch/switch.module.scss

@@ -30,7 +30,7 @@ $root: switch;
   border-radius: var(--switch-border-radius, 9999px);
   background: var(--switch-bg-color, #bbb);
   will-change: background;
-  transition: background var(--transition-speed-sm);
+  transition: background var(--switch-speed-bg, var(--speed-color));
 
   &[data-state="checked"] {
     background-color: var(--switch-cheked-bg-color, var(--primary-color));
@@ -50,7 +50,9 @@ $root: switch;
     background-color: var(--switch-thumb-bg-color, white);
     border-radius: var(--switch-border-radius, 9999px);
     will-change: transform;
-    transition: transform var(--transition-speed-sm) ease-in-out;
+    transition:
+      transform var(--switch-speed-transform, var(--speed-sm)) ease-in-out,
+      background-color var(--switch-speed-bg, var(--speed-color));
 
     @include dir.rtl {
       margin-right: calc(#{switch-width()} / 2);

package/src/components/Tabs/TabsList.tsx

@@ -64,7 +64,9 @@ const TabsList: ForwardRefRenderFunction<HTMLDivElement, TabsListProps> = (props
         });
     }, []);
 
-    const updateIndicator = useCallback(_debounce(updateIndicatorImmediate, 50), [updateIndicatorImmediate]);
+    const updateIndicator = useCallback(() => {
+        return _debounce(updateIndicatorImmediate, 50)();
+    }, [updateIndicatorImmediate]);
 
     useLayoutEffect(() => {
         updateIndicatorImmediate();
@@ -91,8 +93,8 @@ const TabsList: ForwardRefRenderFunction<HTMLDivElement, TabsListProps> = (props
             window.removeEventListener("resize", updateIndicator);
             resizeObserver.disconnect();
             mutationObserver.disconnect();
-            updateIndicator.cancel();
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     return (

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

@@ -19,7 +19,7 @@ $border-width: 1px;
     position: relative;
     display: flex;
     justify-content: space-between;
-    transition: border-bottom-color var(--transition-speed-sm);
+    transition: border-bottom-color var(--tabs-speed-border-color, var(--speed-color));
 
     @include theme.rtl() {
       & {
@@ -55,8 +55,8 @@ $border-width: 1px;
     font-weight: var(--tabs-trigger-font-weight, 400);
     color: var(--tabs-trigger-color, var(--text-primary-color));
     transition:
-      color var(--transition-speed-sm) ease,
-      font-weight var(--transition-speed-sm) ease;
+      color var(--tabs-speed-color, var(--speed-color)) ease,
+      font-weight var(--tabs-speed-font-weight, var(--speed-sm)) ease;
 
     &[data-state="active"] {
       font-weight: var(--tabs-trigger-font-weight-active, 600);
@@ -80,8 +80,8 @@ $border-width: 1px;
       color: var(--tabs-trigger-badge-color, var(--text-secondary-color));
       background-color: var(--tabs-trigger-badge-bg-color, var(--bg-secondary-color));
       transition:
-        background-color var(--transition-speed-sm) ease,
-        color var(--transition-speed-sm) ease;
+        background-color var(--tabs-speed-bg, var(--speed-color)) ease,
+        color var(--tabs-speed-color, var(--speed-color)) ease;
 
       .#{$root}__trigger[data-state="active"] & {
         color: var(--tabs-trigger-badge-active-color, white);
@@ -107,9 +107,10 @@ $border-width: 1px;
     border-radius: #{$radius} #{$radius} 0 0;
     will-change: opacity, left, width;
     transition:
-      opacity var(--transition-speed-sm) ease,
-      left var(--transition-speed-sm) ease,
-      width var(--transition-speed-sm) ease;
+      opacity var(--tabs-speed-opacity, var(--speed-sm)) ease,
+      left var(--tabs-speed-left, var(--speed-sm)) ease,
+      width var(--tabs-speed-width, var(--speed-sm)) ease,
+      background-color var(--tabs-speed-bg, var(--speed-color)) ease;
 
     .#{$root}--reverse & {
       bottom: auto;

package/src/components/Tag/tag.module.scss

@@ -13,6 +13,9 @@ $root: tag;
   border-radius: var(--tag-border-radius, 999px);
   color: var(--tag-color, var(--text-secondary-color));
   background: var(--tag-bg-color, var(--bg-secondary-color));
+  transition:
+    background var(--tag-speed-bg, var(--speed-color)),
+    color var(--tag-speed-color, var(--speed-color));
 
   &--clickable {
     cursor: pointer;

package/src/components/TextArea/text-area.module.scss

@@ -12,9 +12,9 @@ $root: text-area;
   border-radius: var(--text-area-border-radius, 8px);
   min-width: var(--text-area-min-width, 200px);
   transition:
-    border-color var(--transition-speed-sm),
-    box-shadow var(--transition-speed-sm),
-    background var(--transition-speed-sm);
+    border-color var(--text-area-speed-border-color, var(--speed-color)),
+    box-shadow var(--text-area-speed-box-shadow, var(--speed-color)),
+    background var(--text-area-speed-bg, var(--speed-color));
 
   &:focus {
     border-color: var(--text-area-focus-border-color, color-mix(in srgb, white 40%, var(--primary-color)));

package/src/components/TextField/text-field.module.scss

@@ -14,9 +14,9 @@ $root: text-field;
   padding: var(--text-field-padding, 8px 12px);
   border-radius: var(--text-field-border-radius, 8px);
   transition:
-    border-color var(--transition-speed-sm),
-    box-shadow var(--transition-speed-sm),
-    background var(--transition-speed-sm);
+    border-color var(--text-field-speed-border-color, var(--speed-color)),
+    box-shadow var(--text-field-speed-box-shadow, var(--speed-color)),
+    background var(--text-field-speed-bg, var(--speed-color));
 
   @include dir.rtl {
     flex-direction: row-reverse;
@@ -42,6 +42,7 @@ $root: text-field;
     border: none;
     outline: none;
     background: transparent;
+    transition: color var(--text-field-speed-color, var(--speed-color));
 
     &:focus {
       outline: none;
@@ -52,6 +53,13 @@ $root: text-field;
 
     &::placeholder {
       color: var(--text-field-placeholder-color, var(--text-secondary-color));
+      transition: color var(--text-field-speed-color, var(--speed-color));
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
     }
   }
 

package/src/components/Toast/toast.module.scss

@@ -13,55 +13,56 @@ $root: toast;
   background-color: var(--toast-bg-color, var(--bg-secondary-color));
   border-radius: var(--toast-border-radius, 10px);
   padding: var(--toast-padding, var(--side-padding-xs));
+  transition: background-color var(--toast-speed-bg, var(--speed-color));
 
   &[data-state="open"] {
     &.#{$root}--opacity-animation-in {
-      animation: show var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      animation: show var(--toast-speed-animation, var(--speed-md)) ease-out;
     }
 
     &.#{$root}--slide-animation-in {
       &.#{$root}--top-left,
       &.#{$root}--bottom-left {
-        animation: slideInLeft var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+        animation: slideInLeft var(--toast-speed-animation, var(--speed-md)) ease-out;
       }
 
       &.#{$root}--top-right,
       &.#{$root}--bottom-right {
-        animation: slideInRight var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+        animation: slideInRight var(--toast-speed-animation, var(--speed-md)) ease-out;
       }
 
       &.#{$root}--top-center {
-        animation: slideInTop var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+        animation: slideInTop var(--toast-speed-animation, var(--speed-md)) ease-out;
       }
 
       &.#{$root}--bottom-center {
-        animation: slideInBottom var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+        animation: slideInBottom var(--toast-speed-animation, var(--speed-md)) ease-out;
       }
     }
   }
 
   &[data-state="closed"] {
     &.#{$root}--opacity-animation-out {
-      animation: hide var(--toast-transition-speed, var(--transition-speed-md)) ease-in;
+      animation: hide var(--toast-speed-animation, var(--speed-md)) ease-in;
     }
 
     &.#{$root}--slide-animation-out {
       &.#{$root}--top-left,
       &.#{$root}--bottom-left {
-        animation: swipeOutLeft var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+        animation: swipeOutLeft var(--toast-speed-animation, var(--speed-md)) ease-out;
       }
 
       &.#{$root}--top-right,
       &.#{$root}--bottom-right {
-        animation: swipeOutRight var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+        animation: swipeOutRight var(--toast-speed-animation, var(--speed-md)) ease-out;
       }
 
       &.#{$root}--top-center {
-        animation: swipeOutTop var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+        animation: swipeOutTop var(--toast-speed-animation, var(--speed-md)) ease-out;
       }
 
       &.#{$root}--bottom-center {
-        animation: swipeOutBottom var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+        animation: swipeOutBottom var(--toast-speed-animation, var(--speed-md)) ease-out;
       }
     }
   }
@@ -72,26 +73,26 @@ $root: toast;
 
   &[data-swipe="cancel"] {
     transform: translateX(0) translateY(0);
-    transition: transform var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+    transition: transform var(--toast-speed-transform, var(--speed-sm)) ease-out;
   }
 
   &[data-swipe="end"] {
     &.#{$root}--top-left,
     &.#{$root}--bottom-left {
-      animation: swipeOutLeft var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      animation: swipeOutLeft var(--toast-speed-animation, var(--speed-md)) ease-out;
     }
 
     &.#{$root}--top-right,
     &.#{$root}--bottom-right {
-      animation: swipeOutRight var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      animation: swipeOutRight var(--toast-speed-animation, var(--speed-md)) ease-out;
     }
 
     &.#{$root}--top-center {
-      animation: swipeOutTop var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      animation: swipeOutTop var(--toast-speed-animation, var(--speed-md)) ease-out;
     }
 
     &.#{$root}--bottom-center {
-      animation: swipeOutBottom var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      animation: swipeOutBottom var(--toast-speed-animation, var(--speed-md)) ease-out;
     }
   }
 
@@ -121,6 +122,8 @@ $root: toast;
 
   &__title,
   &__description {
+    transition: color var(--toast-speed-color, var(--speed-color));
+
     .#{$root}--error-color & {
       color: var(--toast-error-text-color, white);
     }

package/src/components/Tooltip/tooltip.module.scss

@@ -17,9 +17,14 @@ $root: tooltip;
     max-width: var(--tooltip-max-width, 300px);
     word-wrap: break-word;
     user-select: none;
-    animation-duration: var(--transition-speed-md);
+    animation-duration: var(--tooltip-speed-animation, var(--speed-md));
     will-change: transform, opacity;
     box-shadow: var(--tooltip-box-shadow-offset, 0 0 5px 0) var(--tooltip-box-shadow-color, rgba(210, 208, 208, 0.47));
+    transition:
+      border-color var(--tooltip-speed-border-color, var(--speed-color)),
+      box-shadow var(--tooltip-speed-box-shadow, var(--speed-color)),
+      color var(--tooltip-speed-color, var(--speed-color)),
+      background-color var(--tooltip-speed-bg, var(--speed-color));
 
     &--trigger-width {
       width: var(--radix-tooltip-trigger-width);
@@ -75,6 +80,9 @@ $root: tooltip;
     stroke: var(--tooltip-border-color, var(--tooltip-bg-color, var(--bg-secondary-color)));
     stroke-width: var(--tooltip-border-width, 1px);
     margin-top: calc(var(--tooltip-border-width, 1px) * -1);
+    transition:
+      fill var(--tooltip-speed-fill, var(--speed-color)),
+      stroke var(--tooltip-speed-stroke, var(--speed-color));
   }
 }
 

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

@@ -6,6 +6,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  transition: color var(--truncate-speed-color, var(--speed-color));
 
   &--middle {
     text-overflow: clip;

package/src/components/TruncateList/truncate-list.module.scss

@@ -16,5 +16,8 @@
     padding: var(--truncate-list-counter-padding, 0px 4px);
     color: var(--truncate-list-counter-color, var(--text-secondary-color));
     font-size: var(--truncate-list-counter-font-size, inherit);
+    transition:
+      color var(--truncate-list-speed-color, var(--speed-color)),
+      background var(--truncate-list-speed-bg, var(--speed-color));
   }
 }

package/src/components/View/view.module.scss

@@ -21,7 +21,7 @@ $root: view;
         var(--view-header-separate-color, var(--separator-color));
       justify-content: space-between;
       will-change: border;
-      transition: border-bottom-color var(--transition-speed-sm);
+      transition: border-bottom-color var(--view-speed-border-color, var(--speed-color));
     }
   }
 

package/src/components/Viewport/viewport.module.scss

@@ -9,12 +9,12 @@
 
   &--transition {
     transition:
-      height var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
-      width var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
-      min-height var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
-      min-width var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
-      max-height var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
-      max-width var(--transition-viewport, var(--transition-speed-md)) ease-in-out;
+      height var(--viewport-speed-height, var(--speed-md)) ease-in-out,
+      width var(--viewport-speed-width, var(--speed-md)) ease-in-out,
+      min-height var(--viewport-speed-min-height, var(--speed-md)) ease-in-out,
+      min-width var(--viewport-speed-min-width, var(--speed-md)) ease-in-out,
+      max-height var(--viewport-speed-max-height, var(--speed-md)) ease-in-out,
+      max-width var(--viewport-speed-max-width, var(--speed-md)) ease-in-out;
   }
 
   &--expanded {

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from "./Accordion";
 export * from "./Avatar";
 export * from "./BaseButton";
 export * from "./Button";

package/src/providers/ui/styles/default.scss

@@ -23,10 +23,11 @@
   --side-padding-md: 25px;
   --side-padding-lg: 30px;
 
-  --transition-speed-xs: 100ms;
-  --transition-speed-sm: 200ms;
-  --transition-speed-md: 250ms;
-  --transition-speed-lg: 500ms;
+  --speed-color: 200ms;
+  --speed-xs: 100ms;
+  --speed-sm: 200ms;
+  --speed-md: 250ms;
+  --speed-lg: 500ms;
 
   /* Common colors */
   --primary-color: #5959ff;

package/src/providers/ui/styles/reset.scss

@@ -122,8 +122,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   will-change: background-color, color;
   transition:
-    background-color var(--transition-speed-md),
-    border-color var(--transition-speed-md),
-    background var(--transition-speed-md),
-    color var(--transition-speed-md);
+    color var(--body-speed-color, var(--speed-color)),
+    background-color var(--body-speed-bg, var(--speed-color)),
+    border-color var(--body-speed-border-color, var(--speed-color));
 }