addon-ui 0.3.0

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

@@ -0,0 +1,97 @@
+@use "../../styles/mixins" as dir;
+
+$root: modal;
+
+.#{$root} {
+  &-overlay {
+    background-color: var(--modal-overlay-bg-color, var(--dialog-overlay-bg-color, #111));
+  }
+
+  &-content {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--modal-width, 90vw);
+    max-width: var(--modal-max-width, 350px);
+    max-height: var(--modal-max-height, 85vh);
+    padding: var(--modal-padding, 0);
+    border-radius: var(--modal-border-radius, 10px);
+    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),
+      color var(--transition-speed-sm);
+
+    &[data-state="open"] {
+      animation-name: contentShow;
+    }
+
+    &[data-state="closed"] {
+      animation-name: contentHide;
+    }
+
+    &--fullscreen {
+      max-width: 100%;
+      max-height: 100%;
+      width: 100%;
+      height: 100%;
+      border-radius: 0 !important;
+    }
+
+    &--none-radius {
+      border-radius: 0;
+    }
+
+    &--small-radius {
+      border-radius: var(--modal-border-radius-sm, 5px);
+    }
+
+    &--medium-radius {
+      border-radius: var(--modal-border-radius-sm, 15px);
+    }
+
+    &--large-radius {
+      border-radius: var(--modal-border-radius-sm, 20px);
+    }
+  }
+
+  &-children {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-close {
+    position: absolute !important;
+    top: var(--modal-close-offset, 5px);
+
+    @include dir.ltr {
+      right: var(--modal-close-offset, 5px);
+    }
+
+    @include dir.rtl {
+      left: var(--modal-close-offset, 5px);
+    }
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(var(--modal-animation-content-scale, 0.96));
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes contentHide {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(var(--modal-animation-content-scale, 0.96));
+  }
+}

package/src/components/Modal/types.ts

@@ -0,0 +1,6 @@
+export enum ModalRadius {
+    None = "none",
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}

package/src/components/Odometer/Odometer.tsx

@@ -0,0 +1,45 @@
+import React, {FC, memo, useRef} from "react";
+
+import classNames from "classnames";
+
+import {useComponentProps} from "../../providers";
+
+import useOdometer, {OdometerOptions} from "./hooks/useOdometer";
+
+import styles from "./odometer.module.scss";
+
+export interface OdometerProps extends OdometerOptions {
+    value: number;
+    className?: string;
+}
+
+const Odometer: FC<OdometerProps> = props => {
+    const {
+        value,
+        auto = false,
+        format = "d",
+        duration = 250,
+        className,
+        ...other
+    } = {...useComponentProps("odometer"), ...props};
+
+    const targetRef = useRef(null);
+
+    useOdometer(targetRef, value, {
+        ...other,
+        auto,
+        format,
+        duration,
+    });
+
+    return (
+        <span
+            ref={targetRef}
+            dir="ltr"
+            style={{"--speed": `${duration}ms`} as React.CSSProperties}
+            className={classNames(styles["odometer"], className)}
+        />
+    );
+};
+
+export default memo(Odometer);

package/src/components/Odometer/hooks/useOdometer.tsx

@@ -0,0 +1,24 @@
+import {RefObject, useEffect, useRef} from "react";
+import Odometer from "odometer";
+
+export interface OdometerOptions {
+    auto?: boolean;
+    format?: string;
+    duration?: number;
+}
+
+export default (ref: RefObject<HTMLElement | null>, value: number, options: OdometerOptions = {}) => {
+    const od = useRef<Odometer | null>(null);
+
+    useEffect(() => {
+        if (ref.current === null) return;
+
+        od.current = new Odometer({...options, el: ref.current, value});
+    }, [ref, options, value]);
+
+    useEffect(() => {
+        od.current?.update(value);
+    }, [value]);
+
+    return od.current;
+};

package/src/components/Odometer/index.ts

@@ -0,0 +1,2 @@
+export {default as Odometer, type OdometerProps} from "./Odometer";
+export {default as useOdometer} from "./hooks/useOdometer";

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

@@ -0,0 +1,81 @@
+$root: odometer;
+
+.#{$root} {
+  display: inline-block;
+  position: relative;
+  color: var(--odometer-color, var(--text-primary-color));
+  font-family: var(--odometer-font-family, var(--font-family)), sans-serif;
+
+  &-digit {
+    display: inline-block;
+    position: relative;
+
+    &-spacer {
+      display: inline-block;
+      visibility: hidden;
+    }
+
+    &-inner {
+      text-align: left;
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      overflow: hidden;
+    }
+  }
+
+  &-ribbon {
+    display: block;
+
+    &-inner {
+      display: block;
+      -webkit-backface-visibility: hidden;
+
+      .#{$root}-animating-up & {
+        transition: transform var(--speed);
+      }
+
+      .#{$root}-animating-up.#{$root}-animating & {
+        transform: translateY(-100%);
+      }
+
+      .#{$root}-animating-down & {
+        transform: translateY(-100%);
+      }
+
+      .#{$root}-animating-down.#{$root}-animating & {
+        transition: transform var(--speed);
+        transform: translateY(0);
+      }
+    }
+  }
+
+  &-value {
+    display: block;
+    text-align: center;
+    transform: translateZ(0);
+  }
+
+  &-last-value {
+    position: absolute;
+  }
+
+  &-inside {
+    transition:
+      all var(--speed),
+      color var(--transition-speed-sm);
+
+    &:before {
+      content: "";
+      width: 0;
+      display: inline-block;
+      color: inherit;
+      transition:
+        all var(--speed),
+        color var(--transition-speed-sm);
+    }
+  }
+}

package/src/components/Odometer/odometr.d.ts

@@ -0,0 +1,9 @@
+declare module "odometer" {
+    class Odometer {
+        constructor(options: {el: HTMLElement; auto?: boolean; value?: number; format?: string; duration?: number});
+
+        update(value: number): void;
+    }
+
+    export default Odometer;
+}

package/src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,75 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+import classnames from "classnames";
+import {
+    Corner,
+    Root,
+    ScrollAreaProps as ScrollAreaRootProps,
+    Scrollbar,
+    Thumb,
+    Viewport,
+} from "@radix-ui/react-scroll-area";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./scroll-area.module.scss";
+
+export interface ScrollAreaProps extends ScrollAreaRootProps {
+    xOffset?: number;
+    yOffset?: number;
+    horizontalScroll?: boolean;
+    thumbClassName?: string;
+    cornerClassName?: string;
+    viewportClassName?: string;
+    scrollbarClassName?: string;
+}
+
+const ScrollArea: ForwardRefRenderFunction<HTMLDivElement, ScrollAreaProps> = (props, ref) => {
+    const {
+        xOffset,
+        yOffset,
+        children,
+        className,
+        horizontalScroll,
+        thumbClassName,
+        cornerClassName,
+        viewportClassName,
+        scrollbarClassName,
+        ...other
+    } = {...useComponentProps("scrollArea"), ...props};
+
+    return (
+        <Root ref={ref} className={classnames(styles["scroll-area"], className)} {...other}>
+            <Viewport
+                className={classnames(
+                    styles["scroll-area__viewport"],
+                    {
+                        [styles["scroll-area__viewport--horizontal"]]: !horizontalScroll,
+                    },
+                    viewportClassName
+                )}
+            >
+                {children}
+            </Viewport>
+
+            <Scrollbar
+                orientation="vertical"
+                style={{padding: `0 ${xOffset}px`}}
+                className={classnames(styles["scroll-area__scrollbar"], scrollbarClassName)}
+            >
+                <Thumb className={classnames(styles["scroll-area__thumb"], thumbClassName)} />
+            </Scrollbar>
+
+            <Scrollbar
+                orientation="horizontal"
+                style={{padding: `${yOffset}px 0`}}
+                className={classnames(styles["scroll-area__scrollbar"], scrollbarClassName)}
+            >
+                <Thumb className={classnames(styles["scroll-area__thumb"], thumbClassName)} />
+            </Scrollbar>
+
+            <Corner className={classnames(styles["scroll-area__corner"], cornerClassName)} />
+        </Root>
+    );
+};
+
+export default memo(forwardRef(ScrollArea));

package/src/components/ScrollArea/index.ts

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

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

@@ -0,0 +1,58 @@
+$root: scroll-area;
+
+.#{$root} {
+  box-sizing: border-box;
+  overflow: hidden;
+
+  &__viewport {
+    width: 100%;
+    height: 100%;
+
+    &--horizontal > div {
+      display: inherit !important;
+    }
+  }
+
+  &__scrollbar {
+    display: flex;
+    user-select: none;
+    touch-action: none;
+    padding: var(--scroll-area-scrollbar-padding, 3px);
+    background: var(--scroll-area-scrollbar-bg-color, transparent);
+    transition: background var(--transition-speed-sm) ease-in-out;
+
+    &:hover {
+      background: var(--scroll-area-scrollbar-bg-color-hover, transparent);
+    }
+
+    &[data-orientation="vertical"] {
+      width: var(--scroll-area-scrollbar-size, 9px);
+      padding: 0 var(--scroll-area-scrollbar-offset, var(--scroll-area-scrollbar-x-offset, 2px));
+    }
+
+    &[data-orientation="horizontal"] {
+      flex-direction: column;
+      height: var(--scroll-area-scrollbar-size, 9px);
+      padding: var(--scroll-area-scrollbar-offset, var(--scroll-area-scrollbar-y-offset, 2px)) 0;
+    }
+  }
+
+  &__thumb {
+    flex: 1;
+    position: relative;
+    background: var(--scroll-area-thumb-bg-color);
+    border-radius: var(--scroll-area-thumb-border-radius, 100px);
+
+    &:hover {
+      background: var(--scroll-area-thumb-bg-color-hover, var(--scroll-area-thumb-bg-color));
+    }
+  }
+
+  &__corner {
+    background: var(--scroll-area-scrollbar-bg-color, transparent);
+
+    &:hover {
+      background: var(--scroll-area-scrollbar-bg-color-hover, transparent);
+    }
+  }
+}

package/src/components/SvgSprite/SvgSprite.tsx

@@ -0,0 +1,21 @@
+import React, {ComponentProps, FC, memo} from "react";
+
+export interface SvgSpriteProps {
+    icons: Record<string, FC<ComponentProps<"svg">>>;
+}
+
+const SvgSprite: FC<SvgSpriteProps> = ({icons}) => {
+    return (
+        <svg style={{display: "none"}} aria-hidden="true">
+            <defs>
+                {Object.entries(icons).map(([name, Icon]) => (
+                    <symbol id={name} key={name} viewBox="0 0 24 24">
+                        <Icon />
+                    </symbol>
+                ))}
+            </defs>
+        </svg>
+    );
+};
+
+export default memo(SvgSprite);

package/src/components/SvgSprite/index.ts

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

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,24 @@
+import React, {memo, forwardRef, ForwardRefRenderFunction} from "react";
+import classnames from "classnames";
+import {Root, SwitchProps as SwitchRootProps, Thumb} from "@radix-ui/react-switch";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./switch.module.scss";
+
+export interface SwitchProps extends SwitchRootProps {
+    thumbClassName?: string;
+}
+
+const Switch: ForwardRefRenderFunction<HTMLButtonElement, SwitchProps> = (props, ref) => {
+    const {className, thumbClassName, children, ...other} = {...useComponentProps("switch"), ...props};
+
+    return (
+        <Root ref={ref} {...other} className={classnames(styles["switch"], className)}>
+            <Thumb className={classnames(styles["switch__thumb"], thumbClassName)} />
+            {children}
+        </Root>
+    );
+};
+
+export default memo(forwardRef(Switch));

package/src/components/Switch/index.ts

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

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

@@ -0,0 +1,65 @@
+@use "../../styles/mixins" as dir;
+
+@function switch-width() {
+  @return var(--switch-width, 36px);
+}
+
+@function switch-height() {
+  @return var(--switch-height, 22px);
+}
+
+@function switch-thumb-width() {
+  @return var(--switch-thumb-width, 18px);
+}
+
+@function switch-thumb-height() {
+  @return var(--switch-thumb-height, 18px);
+}
+
+$root: switch;
+
+.#{$root} {
+  margin: 0;
+  padding: 0;
+  border: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  position: relative;
+  width: switch-width();
+  height: switch-height();
+  border-radius: var(--switch-border-radius, 9999px);
+  background: var(--switch-bg-color, #bbb);
+  will-change: background;
+  transition: background var(--transition-speed-sm);
+
+  &[data-state="checked"] {
+    background-color: var(--switch-cheked-bg-color, var(--primary-color));
+  }
+
+  &:disabled {
+    opacity: var(--switch-disabled-opacity, 0.6);
+    cursor: default;
+  }
+
+  &__thumb {
+    box-sizing: border-box;
+    display: block;
+    width: switch-thumb-width();
+    height: switch-thumb-height();
+    transform: translateX(calc((#{switch-height()} - #{switch-thumb-height()}) / 2));
+    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;
+
+    @include dir.rtl {
+      margin-right: calc(#{switch-width()} / 2);
+    }
+
+    &[data-state="checked"] {
+      transform: translateX(
+        calc(#{switch-width()} - #{switch-thumb-width()} - (#{switch-height()} - #{switch-thumb-height()}) / 2)
+      );
+    }
+  }
+}

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,50 @@
+import React, {ComponentProps, memo, forwardRef, ForwardRefRenderFunction} from "react";
+import classnames from "classnames";
+import {useComponentProps} from "../../providers";
+
+import {TagVariant, TagColor, TagSize, TagRadius} from "./types";
+
+import styles from "./tag.module.scss";
+
+export interface TagProps extends ComponentProps<"span"> {
+    size?: TagSize;
+    color?: TagColor;
+    radius?: TagRadius;
+    variant?: TagVariant;
+    clickable?: boolean;
+}
+
+const Tag: ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (props, ref) => {
+    const {
+        size,
+        color,
+        radius,
+        variant = TagVariant.Contained,
+        clickable,
+        children,
+        className,
+        ...other
+    } = {...useComponentProps("tag"), ...props};
+
+    return (
+        <span
+            ref={ref}
+            {...other}
+            className={classnames(
+                styles["tag"],
+                {
+                    [styles[`tag--${variant}`]]: variant,
+                    [styles[`tag--${radius}-radius`]]: radius,
+                    [styles[`tag--${color}-color`]]: color,
+                    [styles[`tag--${size}-size`]]: size,
+                    [styles["tag--clickable"]]: clickable,
+                },
+                className
+            )}
+        >
+            {children}
+        </span>
+    );
+};
+
+export default memo(forwardRef(Tag));

package/src/components/Tag/index.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export {default as Tag, type TagProps} from "./Tag";

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

@@ -0,0 +1,118 @@
+$root: tag;
+
+.#{$root} {
+  cursor: default;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--tag-font-size, 13px);
+  font-weight: var(--tag-font-weight, 500);
+  line-height: var(--tag-line-height, var(--line-height, 1 rem));
+  letter-spacing: var(--tag-letter-spacing, 0.5px);
+  padding: var(--tag-padding, 4px 8px);
+  border-radius: var(--tag-border-radius, 999px);
+  color: var(--tag-color, var(--text-secondary-color));
+  background: var(--tag-bg-color, var(--bg-secondary-color));
+
+  &--clickable {
+    cursor: pointer;
+
+    &:active {
+      transform: scale(var(--tag-scale, 0.98));
+      user-select: none;
+    }
+  }
+
+  // Variants
+  &--contained {
+    color: var(--tag-contained-color, var(--tag-color, var(--text-secondary-color)));
+    background: var(--tag-contained-bg-color, var(--tag-bg-color, var(--bg-secondary-color)));
+    border: none;
+
+    &.#{$root}--primary-color {
+      color: var(--tag-contained-primary-color, #fff);
+      background: var(--primary-color);
+    }
+
+    &.#{$root}--secondary-color {
+      color: var(--tag-contained-secondary-color, #fff);
+      background: var(--secondary-color);
+    }
+
+    &.#{$root}--accent-color {
+      color: var(--tag-contained-accent-color, #fff);
+      background: var(--accent-color);
+    }
+  }
+
+  &--outlined {
+    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;
+
+    &.#{$root}--primary-color {
+      color: var(--primary-color);
+      border-color: var(--tag-outlined-border-primary-color, var(--primary-color));
+    }
+
+    &.#{$root}--secondary-color {
+      color: var(--secondary-color);
+      border-color: var(--tag-outlined-border-secondary-color, var(--secondary-color));
+    }
+
+    &.#{$root}--accent-color {
+      color: var(--accent-color);
+      border-color: var(--tag-outlined-border-accent-color, var(--accent-color));
+    }
+  }
+
+  &--soft {
+    color: var(--tag-soft-color, var(--tag-color, var(--text-secondary-color)));
+    background-color: color-mix(in srgb, white 30%, var(--tag-bg-color, var(--bg-secondary-color)));
+
+    &.#{$root}--primary-color {
+      color: var(--tag-soft-primary-color, #fff);
+      background-color: color-mix(in srgb, white 30%, var(--primary-color));
+    }
+
+    &.#{$root}--secondary-color {
+      color: var(--tag-soft-secondary-color, #fff);
+      background-color: color-mix(in srgb, white 30%, var(--secondary-color));
+    }
+
+    &.#{$root}--accent-color {
+      color: var(--tag-soft-accent-color, #fff);
+      background-color: color-mix(in srgb, white 30%, var(--accent-color));
+    }
+  }
+
+  // Sizes
+  &--small-size {
+    padding: var(--tag-padding, 3px 6px);
+    font-size: var(--tag-font-size-sm, 12px);
+  }
+
+  &--medium-size {
+    padding: var(--tag-padding, 5px 10px);
+    font-size: var(--tag-font-size-sm, 14px);
+  }
+
+  &--large-size {
+    padding: var(--tag-padding, 6px 12px);
+    font-size: var(--tag-font-size-sm, 16px);
+  }
+
+  //Radius
+  &--small-radius {
+    border-radius: var(--tag-border-radius-sm, 5px);
+  }
+
+  &--medium-radius {
+    border-radius: var(--tag-border-radius-md, 8px);
+  }
+
+  &--large-radius {
+    border-radius: var(--tag-border-radius-lg, 10px);
+  }
+}