addon-ui 0.3.0

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

@@ -0,0 +1,267 @@
+@use "../../styles/mixins" as dir;
+
+$root: toast;
+
+.#{$root} {
+  box-sizing: border-box;
+  position: relative;
+  display: grid;
+  align-items: center;
+  grid-template-areas: "title action" "description action";
+  grid-template-columns: auto max-content;
+  column-gap: var(--toast-gap, 15px);
+  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));
+
+  &[data-state="open"] {
+    &.#{$root}--top-left,
+    &.#{$root}--bottom-left {
+      animation: slideInLeft 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}--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;
+  }
+
+  &[data-swipe="move"] {
+    transform: translateX(var(--radix-toast-swipe-move-x)) translateY(var(--radix-toast-swipe-move-y));
+  }
+
+  &[data-swipe="cancel"] {
+    transform: translateX(0) translateY(0);
+    transition: transform var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+  }
+
+  &[data-swipe="end"] {
+    &.#{$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;
+    }
+  }
+
+  &--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);
+  }
+
+  &--error-color {
+    background-color: var(--toast-error-bg-color, var(--error-color));
+  }
+
+  &--success-color {
+    background-color: var(--toast-success-bg-color, var(--success-color));
+  }
+
+  &__title,
+  &__description {
+    .#{$root}--error-color & {
+      color: var(--toast-error-text-color, white);
+    }
+    .#{$root}--success-color & {
+      color: var(--toast-success-text-color, white);
+    }
+  }
+
+  &__title {
+    grid-area: title;
+    margin-bottom: 5px;
+    font-weight: 500;
+    color: var(--text-primary-color);
+    font-size: 15px;
+  }
+
+  &__description {
+    grid-area: description;
+    margin: 0;
+    color: var(--text-secondary-color);
+    font-size: 13px;
+    line-height: 1.3;
+  }
+
+  &__action {
+    grid-area: action;
+  }
+
+  &__close {
+    position: absolute !important;
+    top: var(--toast-close-offset, 5px);
+
+    @include dir.ltr {
+      right: var(--toast-close-offset, 5px);
+    }
+
+    @include dir.rtl {
+      left: var(--toast-close-offset, 5px);
+    }
+  }
+
+  &__viewport {
+    box-sizing: border-box;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    gap: var(--toast-viewport-gap, 10px);
+    width: var(--toast-width, 300px);
+    padding: var(--toast-viewport-padding, var(--side-padding-xs));
+    max-width: 100vw;
+    margin: 0;
+    list-style: none;
+    z-index: 999999;
+    outline: none;
+
+    &:has(.#{$root}--full-width) {
+      width: 100%;
+    }
+
+    &:has(.#{$root}--sticky) {
+      padding: 0;
+    }
+
+    &:has(.#{$root}--top-center) {
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &:has(.#{$root}--top-left) {
+      top: 0;
+      left: 0;
+    }
+
+    &:has(.#{$root}--top-right) {
+      top: 0;
+      right: 0;
+    }
+
+    &:has(.#{$root}--bottom-right) {
+      bottom: 0;
+      right: 0;
+    }
+
+    &:has(.#{$root}--bottom-left) {
+      bottom: 0;
+      left: 0;
+    }
+
+    &:has(.#{$root}--bottom-center) {
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+}
+
+@keyframes hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInTop {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInBottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes swipeOutRight {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes swipeOutLeft {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes swipeOutTop {
+  from {
+    transform: translateY(var(--radix-toast-swipe-end-y));
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes swipeOutBottom {
+  from {
+    transform: translateY(var(--radix-toast-swipe-end-y));
+  }
+  to {
+    transform: translateY(100%);
+  }
+}

package/src/components/Toast/types.ts

@@ -0,0 +1,20 @@
+export enum ToastSide {
+    TopCenter = "top-center",
+    TopLeft = "top-left",
+    TopRight = "top-right",
+    BottomRight = "bottom-right",
+    BottomLeft = "bottom-left",
+    BottomCenter = "bottom-center",
+}
+
+export enum ToastRadius {
+    None = "none",
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum ToastColor {
+    Error = "error",
+    Success = "success",
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,82 @@
+import React, {memo, ReactNode, forwardRef, ForwardRefRenderFunction} from "react";
+import classnames from "classnames";
+import {
+    Arrow,
+    Content,
+    Portal,
+    Provider,
+    Root,
+    TooltipContentProps,
+    TooltipProps as TooltipRootProps,
+    Trigger,
+} from "@radix-ui/react-tooltip";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./tooltip.module.scss";
+
+export interface TooltipProps extends TooltipRootProps, Omit<TooltipContentProps, "content"> {
+    content: ReactNode;
+    arrowWidth?: number;
+    arrowHeight?: number;
+    matchTriggerWidth?: boolean;
+    arrowClassName?: string;
+    contentClassName?: string;
+}
+
+const Tooltip: ForwardRefRenderFunction<HTMLDivElement, TooltipProps> = (props, ref) => {
+    const {
+        open,
+        defaultOpen,
+        disableHoverableContent,
+        delayDuration,
+        onOpenChange,
+
+        arrowWidth,
+        arrowHeight,
+        collisionPadding = 8,
+        matchTriggerWidth,
+        content,
+        arrowClassName,
+        contentClassName,
+        children,
+        ...other
+    } = {...useComponentProps("tooltip"), ...props};
+
+    return (
+        <Provider>
+            <Root
+                open={open}
+                defaultOpen={defaultOpen}
+                disableHoverableContent={disableHoverableContent}
+                onOpenChange={onOpenChange}
+                delayDuration={delayDuration}
+            >
+                <Trigger asChild>{children}</Trigger>
+                <Portal>
+                    <Content
+                        ref={ref}
+                        className={classnames(
+                            styles["tooltip-content"],
+                            {
+                                [styles["tooltip-content--trigger-width"]]: matchTriggerWidth,
+                            },
+                            contentClassName
+                        )}
+                        collisionPadding={collisionPadding}
+                        {...other}
+                    >
+                        {content}
+                        <Arrow
+                            width={arrowWidth}
+                            height={arrowHeight}
+                            className={classnames(styles["tooltip-arrow"], arrowClassName)}
+                        />
+                    </Content>
+                </Portal>
+            </Root>
+        </Provider>
+    );
+};
+
+export default memo(forwardRef(Tooltip));

package/src/components/Tooltip/index.ts

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

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

@@ -0,0 +1,123 @@
+$root: tooltip;
+
+.#{$root} {
+  &-content {
+    box-sizing: border-box;
+    font-family: var(--tooltip-font-family, var(--font-family)), sans-serif;
+    font-weight: var(--tooltip-font-weight, 500);
+    font-size: var(--tooltip-font-size, var(--font-size, 14px));
+    line-height: var(--tooltip-line-height, var(--line-height, 1rem));
+    color: var(--tooltip-color, var(--text-secondary-color));
+    background-color: var(--tooltip-bg-color, var(--bg-secondary-color));
+    border-radius: var(--tooltip-border-radius, 5px);
+    border-width: var(--tooltip-border-width, 1px);
+    border-color: var(--tooltip-border-color, var(--tooltip-bg-color, var(--bg-secondary-color)));
+    border-style: solid;
+    padding: var(--tooltip-padding, 7px 10px);
+    max-width: var(--tooltip-max-width, 300px);
+    word-wrap: break-word;
+    user-select: none;
+    animation-duration: var(--transition-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));
+
+    &--trigger-width {
+      width: var(--radix-tooltip-trigger-width);
+    }
+
+    &[data-state="delayed-open"][data-side="top"] {
+      animation-name: slideDownAndFade;
+    }
+
+    &[data-state="delayed-open"][data-side="right"] {
+      animation-name: slideLeftAndFade;
+    }
+
+    &[data-state="delayed-open"][data-side="bottom"] {
+      animation-name: slideUpAndFade;
+    }
+
+    &[data-state="delayed-open"][data-side="left"] {
+      animation-name: slideRightAndFade;
+    }
+
+    &:before {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      z-index: 100000;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      border: calc(var(--tooltip-border-width, 1px) + 2px) solid var(--tooltip-bg-color, var(--bg-secondary-color));
+      border-radius: calc(var(--tooltip-border-radius, 5px) - var(--tooltip-border-width, 1px));
+    }
+
+    & > span {
+      &:before {
+        content: "";
+        position: absolute;
+        border-radius: 100%;
+        width: 1px;
+        height: 1px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        box-shadow: var(--tooltip-arrow-box-shadow-offset, 0 1px 4px 2px)
+          var(--tooltip-box-shadow-color, rgba(210, 208, 208, 0.47));
+      }
+    }
+  }
+
+  &-arrow {
+    position: relative;
+    fill: var(--tooltip-bg-color, var(--bg-secondary-color));
+    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);
+  }
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(var(--tooltip-slide-distance, 2px));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(calc(0px - var(--tooltip-slide-distance, 2px)));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(calc(0px - var(--tooltip-slide-distance, 2px)));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(var(--tooltip-slide-distance, 2px));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

package/src/components/View/View.tsx

@@ -0,0 +1,68 @@
+import React, {FC, memo} from "react";
+import classnames from "classnames";
+
+import {useComponentProps} from "../../providers";
+import {Header, HeaderProps} from "../Header";
+
+import styles from "./view.module.scss";
+
+export interface ViewProps extends HeaderProps {
+    center?: boolean;
+    showSeparate?: boolean;
+    bodyClassName?: string;
+    headerClassName?: string;
+}
+
+export const viewPropsKeys = new Set<keyof ViewProps>([
+    // View keys
+    "center",
+    "showSeparate",
+    "bodyClassName",
+    "headerClassName",
+    "children",
+
+    // Header keys
+    "title",
+    "before",
+    "after",
+    "subtitle",
+    "wrapClassName",
+    "titleClassName",
+    "beforeClassName",
+    "afterClassName",
+    "subtitleClassName",
+    "alignCenter",
+]);
+
+const View: FC<ViewProps> = props => {
+    const {center, showSeparate, className, bodyClassName, headerClassName, children, ...other} = {
+        ...useComponentProps("view"),
+        ...props,
+    };
+
+    return (
+        <div
+            className={classnames(
+                styles["view"],
+                {
+                    [styles["view--center"]]: center,
+                },
+                className
+            )}
+        >
+            <Header
+                className={classnames(
+                    styles["view-header"],
+                    {
+                        [styles[`view-header--separate`]]: showSeparate,
+                    },
+                    headerClassName
+                )}
+                {...other}
+            />
+            <div className={classnames(styles["view-body"], bodyClassName)}>{children}</div>
+        </div>
+    );
+};
+
+export default memo(View);

package/src/components/View/index.ts

@@ -0,0 +1 @@
+export {default as View, viewPropsKeys, type ViewProps} from "./View";

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

@@ -0,0 +1,38 @@
+$root: view;
+
+.#{$root} {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+
+  &-header {
+    padding-bottom: var(--view-header-padding-bottom, var(--header-padding, var(--side-padding-sm)));
+    justify-content: flex-end;
+
+    &__title {
+      color: var(--view-header-title-color, var(--text-primary-color));
+      font-family: var(--view-header-title-font-family, var(--font-family)), sans-serif;
+    }
+
+    &--separate {
+      border-bottom: var(--view-header-separate-width, 1px) solid
+        var(--view-header-separate-color, var(--separator-color));
+      justify-content: space-between;
+      will-change: border;
+      transition: border-bottom-color var(--transition-speed-sm);
+    }
+  }
+
+  &-body {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+
+    .#{$root}--center & {
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

package/src/components/ViewDrawer/ViewDrawer.tsx

@@ -0,0 +1,24 @@
+import React, {FC, memo} from "react";
+
+import {splitProps} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import {Drawer, DrawerProps, drawerPropsKeys} from "../Drawer";
+import {View, ViewProps, viewPropsKeys} from "../View";
+
+export type ViewDrawerProps = Omit<DrawerProps, "title"> & ViewProps;
+
+const ViewDrawer: FC<ViewDrawerProps> = props => {
+    const mergedProps = {...useComponentProps("viewDrawer"), ...props};
+
+    const drawerProps = splitProps<DrawerProps>(mergedProps, drawerPropsKeys);
+    const viewProps = splitProps<ViewProps>(mergedProps, viewPropsKeys);
+
+    return (
+        <Drawer {...drawerProps}>
+            <View {...viewProps} />
+        </Drawer>
+    );
+};
+
+export default memo(ViewDrawer);

package/src/components/ViewDrawer/index.ts

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

package/src/components/ViewModal/ViewModal.tsx

@@ -0,0 +1,24 @@
+import React, {FC, memo} from "react";
+
+import {splitProps} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import {Modal, ModalProps, modalPropsKeys} from "../Modal";
+import {View, ViewProps, viewPropsKeys} from "../View";
+
+export type ViewModalProps = Omit<ModalProps, "title"> & ViewProps;
+
+const ViewModal: FC<ViewModalProps> = props => {
+    const mergedProps = {...useComponentProps("viewModal"), ...props};
+
+    const modalProps = splitProps<ModalProps>(mergedProps, modalPropsKeys);
+    const viewProps = splitProps<ViewProps>(mergedProps, viewPropsKeys);
+
+    return (
+        <Modal {...modalProps}>
+            <View {...viewProps} />
+        </Modal>
+    );
+};
+
+export default memo(ViewModal);

package/src/components/ViewModal/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,27 @@
+export * from "./Avatar";
+export * from "./BaseButton";
+export * from "./Button";
+export * from "./Checkbox";
+export * from "./Dialog";
+export * from "./Drawer";
+export * from "./Footer";
+export * from "./Header";
+export * from "./Highlight";
+export * from "./Icon";
+export * from "./IconButton";
+export * from "./Layout";
+export * from "./List";
+export * from "./ListItem";
+export * from "./Modal";
+export * from "./Odometer";
+export * from "./ScrollArea";
+export * from "./SvgSprite";
+export * from "./Switch";
+export * from "./Tag";
+export * from "./TextArea";
+export * from "./TextField";
+export * from "./Toast";
+export * from "./Tooltip";
+export * from "./View";
+export * from "./ViewDrawer";
+export * from "./ViewModal";