addon-ui 0.5.0 → 0.6.1

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

@@ -0,0 +1,166 @@
+@use "../../styles/mixins" as theme;
+
+$root: tabs;
+$radius: var(--tabs-indicator-radius, 10px);
+$border-width: 1px;
+
+.#{$root} {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  &--reverse {
+    flex-direction: column-reverse;
+  }
+
+  &__list {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    transition: border-bottom-color var(--transition-speed-sm);
+
+    @include theme.rtl() {
+      & {
+        flex-direction: row-reverse;
+      }
+    }
+
+    &--separator {
+      border-bottom: var(--tabs-list-border-width, #{$border-width}) solid
+        var(--tabs-list-border-color, var(--separator-color));
+
+      .#{$root}--reverse & {
+        border-bottom: none;
+        border-top: var(--tabs-list-border-width, #{$border-width}) solid
+          var(--tabs-list-border-color, var(--separator-color));
+      }
+    }
+  }
+
+  &__trigger {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    align-self: center;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+    padding: var(--tabs-trigger-padding, 10px) 0;
+    height: var(--tabs-trigger-height, 40px);
+    font-size: var(--tabs-trigger-font-size, 14px);
+    font-family: var(--tabs-trigger-font-family, var(--font-family)), sans-serif;
+    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;
+
+    &[data-state="active"] {
+      font-weight: var(--tabs-trigger-font-weight-active, 600);
+    }
+
+    &[data-disabled] {
+      cursor: default;
+      opacity: var(--tabs-trigger-dissabled-opacity, 0.6);
+    }
+
+    &__before,
+    &__after {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: var(--tabs-trigger-badge-min-width, 18px);
+      font-size: var(--tabs-trigger-badge-font-size, 12px);
+      font-weight: var(--tabs-trigger-badge-font-weight, 700);
+      padding: var(--tabs-trigger-badge-padding, 2px 4px);
+      border-radius: var(--tabs-trigger-badge-radius, 4px);
+      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;
+
+      .#{$root}__trigger[data-state="active"] & {
+        color: var(--tabs-trigger-badge-active-color, white);
+        background-color: var(--tabs-trigger-badge-active-bg-color, var(--primary-color));
+      }
+    }
+
+    &-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      gap: var(--tabs-trigger-gap, 4px);
+    }
+  }
+
+  &__indicator {
+    opacity: 0;
+    position: absolute;
+    bottom: calc(-1 * var(--tabs-list-border-width, #{$border-width}));
+    height: var(--tabs-indicator-size, 4px);
+    background-color: var(--tabs-indicator-color, var(--primary-color));
+    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;
+
+    .#{$root}--reverse & {
+      bottom: auto;
+      top: calc(-1 * var(--tabs-list-border-width, #{$border-width}));
+      border-radius: 0 0 #{$radius} #{$radius};
+    }
+
+    &--show {
+      opacity: 1;
+    }
+
+    &--first {
+      @include theme.ltr() {
+        &:not(.#{$root}__indicator--rounded_edges) {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+      }
+
+      @include theme.rtl() {
+        &:not(.#{$root}__indicator--rounded_edges) {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+    }
+
+    &--last {
+      @include theme.ltr() {
+        &:not(.#{$root}__indicator--rounded_edges) {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+
+      @include theme.rtl() {
+        &:not(.#{$root}__indicator--rounded_edges) {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+      }
+    }
+  }
+
+  &__content {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    &[data-state="active"] {
+      flex: 1;
+    }
+  }
+}

package/src/components/Tabs/types.ts

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

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

@@ -49,21 +49,24 @@ $root: tag;
     color: var(--tag-outlined-color, var(--tag-color, var(--text-secondary-color)));
     border: var(--tag-border-width, 1px) solid
       var(--tag-outlined-border-color, var(--tag-outlined-color, var(--text-secondary-color)));
-    background: none;
+    background: var(--tag-outlined-bg-color, none);
 
     &.#{$root}--primary-color {
-      color: var(--primary-color);
-      border-color: var(--tag-outlined-border-primary-color, var(--primary-color));
+      color: var(--tag-outlined-color-primary-color, var(--primary-color));
+      border-color: var(--tag-outlined-border-color-primary-color, var(--primary-color));
+      background: var(--tag-outlined-bg-color-primary-color, none);
     }
 
     &.#{$root}--secondary-color {
-      color: var(--secondary-color);
-      border-color: var(--tag-outlined-border-secondary-color, var(--secondary-color));
+      color: var(--tag-outlined-color-secondary-color, var(--secondary-color));
+      border-color: var(--tag-outlined-border-color-secondary-color, var(--secondary-color));
+      background: var(--tag-outlined-bg-color-secondary-color, none);
     }
 
     &.#{$root}--accent-color {
-      color: var(--accent-color);
-      border-color: var(--tag-outlined-border-accent-color, var(--accent-color));
+      color: var(--tag-outlined-color-accent-color, var(--accent-color));
+      border-color: var(--tag-outlined-border-color-accent-color, var(--accent-color));
+      background: var(--tag-outlined-bg-color-accent-color, none);
     }
   }
 

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

@@ -1,3 +1,5 @@
+@use "../../styles/mixins" as dir;
+
 $root: text-field;
 
 .#{$root} {
@@ -16,6 +18,10 @@ $root: text-field;
     box-shadow var(--transition-speed-sm),
     background var(--transition-speed-sm);
 
+  @include dir.rtl {
+    flex-direction: row-reverse;
+  }
+
   &:has(&__input:focus) {
     border-color: var(--text-field-focus-border-color, color-mix(in srgb, white 40%, var(--primary-color)));
     box-shadow: var(--text-field-focus-shadow, 0 0 4px var(--primary-color));
@@ -43,6 +49,10 @@ $root: text-field;
     &:disabled {
       cursor: not-allowed;
     }
+
+    &::placeholder {
+      color: var(--text-field-placeholder-color, var(--text-secondary-color));
+    }
   }
 
   &__before,
@@ -107,12 +117,12 @@ $root: text-field;
 
   &--medium-size {
     padding: var(--text-field-padding-md, 10px 14px);
-    font-size: var(--text-field-font-size-sm, 16px);
+    font-size: var(--text-field-font-size-md, 16px);
   }
 
   &--large-size {
     padding: var(--text-field-padding-lg, 12px 16px);
-    font-size: var(--text-field-font-size-sm, 18px);
+    font-size: var(--text-field-font-size-lg, 18px);
   }
 
   // Accents

package/src/components/Toast/Toast.tsx

@@ -14,7 +14,7 @@ import {IconButton, IconButtonProps} from "../IconButton";
 import {cloneOrCreateElement} from "../../utils";
 import {useComponentProps} from "../../providers";
 
-import {ToastSide, ToastRadius, ToastColor} from "./types";
+import {ToastSide, ToastRadius, ToastColor, ToastAnimation} from "./types";
 
 import styles from "./toast.module.scss";
 
@@ -33,6 +33,8 @@ export interface ToastProps extends Omit<ToastRootProps, "title">, Omit<ToastPro
     radius?: ToastRadius;
     title?: ReactNode;
     action?: ReactNode;
+    animationIn?: ToastAnimation;
+    animationOut?: ToastAnimation;
     description?: ReactNode;
     closeIcon?: ReactElement;
     closeProps?: IconButtonProps;
@@ -54,6 +56,8 @@ const Toast: ForwardRefRenderFunction<HTMLLIElement, ToastProps> = (props, ref)
         radius,
         title,
         action,
+        animationIn = ToastAnimation.Slide,
+        animationOut = ToastAnimation.Slide,
         description,
         fullWidth,
         sticky,
@@ -87,6 +91,8 @@ const Toast: ForwardRefRenderFunction<HTMLLIElement, ToastProps> = (props, ref)
                         [styles[`toast--${side}`]]: side,
                         [styles[`toast--${color}-color`]]: color,
                         [styles[`toast--${radius}-radius`]]: radius,
+                        [styles[`toast--${animationIn}-animation-in`]]: animationIn,
+                        [styles[`toast--${animationOut}-animation-out`]]: animationOut,
                         [styles["toast--sticky"]]: sticky,
                         [styles["toast--full-width"]]: fullWidth,
                     },

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

@@ -15,27 +15,55 @@ $root: toast;
   padding: var(--toast-padding, var(--side-padding-xs));
 
   &[data-state="open"] {
-    &.#{$root}--top-left,
-    &.#{$root}--bottom-left {
-      animation: slideInLeft var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+    &.#{$root}--opacity-animation-in {
+      animation: show var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
     }
 
-    &.#{$root}--top-right,
-    &.#{$root}--bottom-right {
-      animation: slideInRight var(--toast-transition-speed, var(--transition-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;
+      }
 
-    &.#{$root}--top-center {
-      animation: slideInTop var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
-    }
+      &.#{$root}--top-right,
+      &.#{$root}--bottom-right {
+        animation: slideInRight var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      }
 
-    &.#{$root}--bottom-center {
-      animation: slideInBottom var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      &.#{$root}--top-center {
+        animation: slideInTop var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      }
+
+      &.#{$root}--bottom-center {
+        animation: slideInBottom var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      }
     }
   }
 
   &[data-state="closed"] {
-    animation: hide var(--toast-transition-speed, var(--transition-speed-md)) ease-in;
+    &.#{$root}--opacity-animation-out {
+      animation: hide var(--toast-transition-speed, var(--transition-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;
+      }
+
+      &.#{$root}--top-right,
+      &.#{$root}--bottom-right {
+        animation: swipeOutRight var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      }
+
+      &.#{$root}--top-center {
+        animation: swipeOutTop var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      }
+
+      &.#{$root}--bottom-center {
+        animation: swipeOutBottom var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      }
+    }
   }
 
   &[data-swipe="move"] {
@@ -52,6 +80,7 @@ $root: toast;
     &.#{$root}--bottom-left {
       animation: swipeOutLeft var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
     }
+
     &.#{$root}--top-right,
     &.#{$root}--bottom-right {
       animation: swipeOutRight var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
@@ -60,6 +89,7 @@ $root: toast;
     &.#{$root}--top-center {
       animation: swipeOutTop var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
     }
+
     &.#{$root}--bottom-center {
       animation: swipeOutBottom var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
     }
@@ -68,12 +98,15 @@ $root: toast;
   &--none-radius {
     border-radius: 0;
   }
+
   &--small-radius {
     border-radius: var(--toast-border-radius, 6px);
   }
+
   &--medium-radius {
     border-radius: var(--toast-border-radius, 15px);
   }
+
   &--large-radius {
     border-radius: var(--toast-border-radius, 20px);
   }
@@ -91,6 +124,7 @@ $root: toast;
     .#{$root}--error-color & {
       color: var(--toast-error-text-color, white);
     }
+
     .#{$root}--success-color & {
       color: var(--toast-success-text-color, white);
     }
@@ -194,6 +228,15 @@ $root: toast;
   }
 }
 
+@keyframes show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @keyframes slideInRight {
   from {
     transform: translateX(100%);

package/src/components/Toast/types.ts

@@ -18,3 +18,8 @@ export enum ToastColor {
     Error = "error",
     Success = "success",
 }
+
+export enum ToastAnimation {
+    Slide = "slide",
+    Opacity = "opacity",
+}

package/src/components/Truncate/Truncate.tsx

@@ -0,0 +1,115 @@
+import React, {
+    ComponentProps,
+    forwardRef,
+    ForwardRefRenderFunction,
+    memo,
+    useImperativeHandle,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from "react";
+import classnames from "classnames";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./truncate.module.scss";
+
+export interface TruncateProps extends ComponentProps<"span"> {
+    text?: string;
+    middle?: boolean;
+    separator?: string;
+}
+
+const trimMiddle = (el: HTMLElement, text: string, separator: string) => {
+    const measure = (txt: string) => {
+        el.textContent = txt;
+        return el.scrollWidth <= el.clientWidth;
+    };
+
+    if (measure(text)) return text;
+
+    let low = 0;
+    let high = text.length - 2;
+    let result = "";
+
+    while (low <= high) {
+        const size = Math.floor((low + high) / 2);
+        const left = text.slice(0, Math.ceil(size / 2));
+        const right = text.slice(text.length - Math.floor(size / 2));
+        const trimmed = left + separator + right;
+
+        if (measure(trimmed)) {
+            result = trimmed;
+            low = size + 1;
+        } else {
+            high = size - 1;
+        }
+    }
+
+    return result || text.charAt(0) + separator + text.charAt(text.length - 1);
+};
+
+const Truncate: ForwardRefRenderFunction<HTMLSpanElement, TruncateProps> = (props, ref) => {
+    const {text = "", middle, separator = "...", className, ...other} = {...useComponentProps("truncate"), ...props};
+
+    const innerRef = useRef<HTMLSpanElement | null>(null);
+    const [displayedText, setDisplayedText] = useState(text);
+
+    useImperativeHandle(ref, () => innerRef.current!, []);
+
+    useLayoutEffect(() => {
+        const el = innerRef.current;
+        if (!el || !middle) return;
+
+        let animationFrameId: number;
+        let observer: ResizeObserver | null = null;
+
+        const measureAndTrim = () => {
+            animationFrameId = requestAnimationFrame(() => {
+                const newText = trimMiddle(el, text, separator);
+                if (newText !== displayedText) {
+                    setDisplayedText(newText);
+                }
+            });
+        };
+
+        measureAndTrim();
+
+        if ("ResizeObserver" in window) {
+            observer = new ResizeObserver(() => {
+                cancelAnimationFrame(animationFrameId);
+                measureAndTrim();
+            });
+            observer.observe(el);
+        }
+
+        window.addEventListener("resize", measureAndTrim);
+
+        return () => {
+            window.removeEventListener("resize", measureAndTrim);
+            observer?.disconnect();
+            cancelAnimationFrame(animationFrameId);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [text, separator, middle]);
+
+    return (
+        <span
+            ref={innerRef}
+            className={classnames(
+                styles["truncate"],
+                {
+                    [styles["truncate--middle"]]: middle,
+                },
+                className
+            )}
+            {...other}
+        >
+            {middle ? displayedText : text}
+        </span>
+    );
+};
+
+Truncate.displayName = "Truncate";
+
+export default memo(forwardRef(Truncate));

package/src/components/Truncate/index.ts

@@ -0,0 +1 @@
+export {default as Truncate, type TruncateProps} from "./Truncate";

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

@@ -0,0 +1,20 @@
+@use "../../styles/mixins" as theme;
+
+.truncate {
+  display: block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &--middle {
+    text-overflow: clip;
+
+    padding-right: var(--truncate-around-space, 8px);
+
+    @include theme.rtl() {
+      padding-right: 0;
+      padding-left: var(--truncate-around-space, 8px);
+    }
+  }
+}

package/src/components/TruncateList/TruncateList.tsx

@@ -0,0 +1,47 @@
+import React, {forwardRef, memo, useCallback} from "react";
+import classnames from "classnames";
+import {OverflowList, OverflowListProps} from "react-responsive-overflow-list";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./truncate-list.module.scss";
+import {Tag} from "../Tag";
+
+export type TruncateListProps<T = unknown> = OverflowListProps<T> & {
+    counterClassName?: string;
+};
+
+function TruncateListBase<T>(props: TruncateListProps<T>, ref: React.Ref<HTMLDivElement>) {
+    const {renderOverflow, className, counterClassName, ...other} = {...useComponentProps("truncateList"), ...props};
+
+    const RenderOverflow = useCallback(
+        (hiddenItems: T[]) => {
+            if (renderOverflow) return renderOverflow(hiddenItems);
+
+            return (
+                <Tag className={classnames(styles["truncate-list__counter"], counterClassName)}>
+                    {`+${hiddenItems.length}`}
+                </Tag>
+            );
+        },
+        [renderOverflow, counterClassName]
+    );
+
+    return (
+        <OverflowList
+            ref={ref}
+            renderOverflow={RenderOverflow}
+            className={classnames(styles["truncate-list"], className)}
+            {...(other as OverflowListProps<T>)}
+        />
+    );
+}
+
+const TruncateList = memo(forwardRef(TruncateListBase)) as unknown as {
+    <T>(props: TruncateListProps<T> & {ref?: React.Ref<HTMLDivElement>}): React.ReactElement | null;
+    displayName?: string;
+};
+
+TruncateList.displayName = "TruncateList";
+
+export default TruncateList;

package/src/components/TruncateList/index.ts

@@ -0,0 +1 @@
+export {default as TruncateList, type TruncateListProps} from "./TruncateList";

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

@@ -0,0 +1,20 @@
+@use "../../styles/mixins" as theme;
+
+.truncate-list {
+  gap: var(--truncate-list-gap, 8px);
+
+  @include theme.rtl() {
+    flex-direction: row-reverse;
+  }
+
+  &__counter {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--truncate-list-counter-br-radius, 9999px);
+    background: var(--truncate-list-counter-bg-color, var(--bg-secondary-color));
+    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);
+  }
+}

package/src/components/Viewport/Provider.tsx

@@ -49,7 +49,7 @@ const Provider: ForwardRefRenderFunction<HTMLDivElement, PropsWithChildren<Viewp
             setSizes,
             setMode,
             resetSizes,
-            withTransition
+            withTransition,
         }),
         [mode, setSizes, setMode, resetSizes]
     );

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

@@ -8,12 +8,13 @@
   max-height: var(--viewport-max-height);
 
   &--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;
+    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;
   }
 
   &--expanded {

package/src/components/index.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";