addon-ui 0.3.0

package/src/components/Checkbox/types.ts

@@ -0,0 +1,15 @@
+export enum CheckboxVariant {
+    Classic = "classic",
+    Soft = "soft",
+}
+
+export enum CheckboxSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum CheckboxRadius {
+    Small = "small",
+    Large = "large",
+}

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,126 @@
+import React, {memo, useEffect, useRef, forwardRef, ForwardRefRenderFunction} from "react";
+import classnames from "classnames";
+import {
+    Content,
+    Description,
+    DialogContentProps,
+    DialogPortalProps,
+    DialogProps as DialogRootProps,
+    Overlay,
+    Portal,
+    Root,
+    Title,
+} from "@radix-ui/react-dialog";
+import {VisuallyHidden} from "radix-ui";
+
+import {useComponentProps} from "../../providers";
+import {cloneOrCreateElement} from "../../utils";
+
+import styles from "./dialog.module.scss";
+
+export interface DialogProps extends DialogRootProps, DialogPortalProps, DialogContentProps {
+    speed?: number;
+    description?: string;
+    fullscreen?: boolean;
+    className?: string;
+    overlayClassName?: string;
+    childrenClassName?: string;
+}
+
+export const dialogPropsKeys = new Set<keyof DialogProps>([
+    // Dialog keys
+    "speed",
+    "description",
+    "fullscreen",
+    "className",
+    "overlayClassName",
+    "childrenClassName",
+
+    // Extended Dialog keys
+    "open",
+    "defaultOpen",
+    "onOpenChange",
+    "modal",
+    "container",
+    "title",
+]);
+
+const Dialog: ForwardRefRenderFunction<HTMLDivElement, DialogProps> = (props, ref) => {
+    const {
+        speed = 200,
+        open,
+        defaultOpen,
+        onOpenChange,
+        modal,
+        children,
+        container,
+        title,
+        description,
+        className,
+        overlayClassName,
+        childrenClassName,
+        ...other
+    } = {...useComponentProps("dialog"), ...props};
+
+    const timeoutId = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+    const intervalId = useRef<ReturnType<typeof setInterval> | undefined>(undefined);
+
+    useEffect(() => {
+        clearInterval(intervalId.current);
+        clearTimeout(timeoutId.current);
+
+        if (open) {
+            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+            document.body.style.overflow = "hidden";
+            document.body.style.boxSizing = "border-box";
+            document.body.style.setProperty("padding-right", `${scrollbarWidth}px`, "important");
+        } else {
+            intervalId.current = setInterval(() => {
+                const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+                if (scrollbarWidth) {
+                    document.body.style.overflow = "";
+                    document.body.style.paddingRight = "";
+                    clearInterval(intervalId.current);
+                }
+            }, 10);
+
+            timeoutId.current = setTimeout(() => {
+                clearInterval(intervalId.current);
+            }, speed + 100);
+        }
+
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [open, speed]);
+
+    return (
+        <Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} modal={modal}>
+            <Portal container={container}>
+                <Overlay
+                    className={classnames(styles["dialog-overlay"], overlayClassName)}
+                    style={{animationDuration: `${speed}ms`}}
+                />
+                <Content
+                    ref={ref}
+                    className={classnames(styles["dialog-content"], className)}
+                    style={{animationDuration: `${speed}ms`}}
+                    {...other}
+                >
+                    <VisuallyHidden.Root>
+                        <Title>{title}</Title>
+                        <Description>{description}</Description>
+                    </VisuallyHidden.Root>
+
+                    {cloneOrCreateElement(
+                        children,
+                        {className: classnames(styles["dialog-children"], childrenClassName)},
+                        "div"
+                    )}
+                </Content>
+            </Portal>
+        </Root>
+    );
+};
+
+export default memo(forwardRef(Dialog));

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

@@ -0,0 +1,55 @@
+$root: dialog;
+
+.#{$root} {
+  &-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 999;
+    background-color: var(--dialog-overlay-bg-color, #111);
+    opacity: var(--dialog-animation-overlay-opacity, 0.9);
+    animation-timing-function: ease-in-out;
+
+    &[data-state="open"] {
+      animation-name: overlayShow;
+    }
+
+    &[data-state="closed"] {
+      animation-name: overlayHide;
+    }
+  }
+
+  &-content {
+    box-sizing: border-box;
+    position: fixed;
+    z-index: 9999;
+    transition:
+      background-color var(--transition-speed-sm),
+      color var(--transition-speed-sm);
+    animation-timing-function: ease-in-out;
+  }
+
+  &-children {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: var(--dialog-animation-overlay-opacity, 0.9);
+  }
+}
+
+@keyframes overlayHide {
+  from {
+    opacity: var(--dialog-animation-overlay-opacity, 0.9);
+  }
+  to {
+    opacity: 0;
+  }
+}

package/src/components/Dialog/index.ts

@@ -0,0 +1 @@
+export {default as Dialog, dialogPropsKeys, type DialogProps} from "./Dialog";

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,53 @@
+import React, {memo, forwardRef, ForwardRefRenderFunction} from "react";
+import classnames from "classnames";
+
+import {useComponentProps} from "../../providers";
+import {cloneOrCreateElement} from "../../utils";
+
+import {Dialog, DialogProps, dialogPropsKeys} from "../Dialog";
+
+import {DrawerSide} from "./types";
+
+import styles from "./drawer.module.scss";
+
+export interface DrawerProps extends DialogProps {
+    side?: DrawerSide;
+}
+
+export const drawerPropsKeys = new Set<keyof DrawerProps>(["side", ...dialogPropsKeys]);
+
+const Drawer: ForwardRefRenderFunction<HTMLDivElement, DrawerProps> = (props, ref) => {
+    const {
+        side = DrawerSide.Left,
+        fullscreen,
+        children,
+        className,
+        overlayClassName,
+        childrenClassName,
+        ...other
+    } = {...useComponentProps("drawer"), ...props};
+
+    return (
+        <Dialog
+            ref={ref}
+            {...other}
+            overlayClassName={classnames(styles["drawer-overlay"], overlayClassName)}
+            className={classnames(
+                styles["drawer-content"],
+                {
+                    [styles["drawer-content--fullscreen"]]: fullscreen,
+                    [styles[`drawer-content--${side}-side`]]: side,
+                },
+                className
+            )}
+        >
+            {cloneOrCreateElement(
+                children,
+                {className: classnames(styles["drawer-children"], childrenClassName)},
+                "div"
+            )}
+        </Dialog>
+    );
+};
+
+export default memo(forwardRef(Drawer));

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

@@ -0,0 +1,170 @@
+$root: drawer;
+
+.#{$root} {
+  &-overlay {
+    background-color: var(--drawer-overlay-bg-color, var(--dialog-overlay-bg-color, #111));
+  }
+
+  &-content {
+    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));
+
+    &[data-state="open"] {
+      &.#{$root}-content--left-side {
+        animation-name: slideInLeft;
+      }
+
+      &.#{$root}-content--right-side {
+        animation-name: slideInRight;
+      }
+
+      &.#{$root}-content--top-side {
+        animation-name: slideInTop;
+      }
+
+      &.#{$root}-content--bottom-side {
+        animation-name: slideInBottom;
+      }
+    }
+
+    &[data-state="closed"] {
+      &.#{$root}-content--left-side {
+        animation-name: slideOutLeft;
+      }
+
+      &.#{$root}-content--right-side {
+        animation-name: slideOutRight;
+      }
+
+      &.#{$root}-content--top-side {
+        animation-name: slideOutTop;
+      }
+
+      &.#{$root}-content--bottom-side {
+        animation-name: slideOutBottom;
+      }
+    }
+
+    &--left-side {
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: var(--drawer-width, 90vw);
+
+      &.#{$root}-content--fullscreen {
+        width: 100%;
+      }
+    }
+
+    &--right-side {
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: var(--drawer-width, 90vw);
+
+      &.#{$root}-content--fullscreen {
+        width: 100%;
+      }
+    }
+
+    &--top-side {
+      top: 0;
+      left: 0;
+      right: 0;
+      height: var(--drawer-height, 90vh);
+
+      &.#{$root}-content--fullscreen {
+        height: 100%;
+      }
+    }
+
+    &--bottom-side {
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: var(--drawer-height, 90vh);
+
+      &.#{$root}-content--fullscreen {
+        height: 100%;
+      }
+    }
+  }
+
+  &-children {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@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: translateY(0);
+  }
+}
+
+@keyframes slideInBottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOutRight {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slideOutTop {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes slideOutBottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}

package/src/components/Drawer/index.ts

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

package/src/components/Drawer/types.ts

@@ -0,0 +1,6 @@
+export enum DrawerSide {
+    Left = "left",
+    Right = "right",
+    Top = "top",
+    Bottom = "bottom",
+}

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,59 @@
+import React, {ComponentProps, memo, ReactNode, forwardRef, ForwardRefRenderFunction} from "react";
+import classnames from "classnames";
+
+import {cloneOrCreateElement} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import styles from "./footer.module.scss";
+
+export interface FooterProps extends ComponentProps<"footer"> {
+    left?: ReactNode;
+    right?: ReactNode;
+    shadow?: boolean;
+    reverse?: boolean;
+    leftClassName?: string;
+    rightClassName?: string;
+    childrenClassName?: string;
+}
+
+const Footer: ForwardRefRenderFunction<HTMLElement, FooterProps> = (props, ref) => {
+    const {
+        left,
+        right,
+        shadow,
+        reverse,
+        children,
+        className,
+        leftClassName,
+        rightClassName,
+        childrenClassName,
+        ...other
+    } = {...useComponentProps("footer"), ...props};
+
+    return (
+        <footer
+            ref={ref}
+            {...other}
+            className={classnames(
+                styles["footer"],
+                {
+                    [styles["footer--shadow"]]: shadow,
+                    [styles["footer--reverse"]]: reverse,
+                },
+                className
+            )}
+        >
+            {cloneOrCreateElement(
+                children,
+                {className: classnames(styles["footer-children"], childrenClassName)},
+                "div"
+            )}
+            {!children &&
+                cloneOrCreateElement(left, {className: classnames(styles["footer-left"], leftClassName)}, "div")}
+            {!children &&
+                cloneOrCreateElement(right, {className: classnames(styles["footer-right"], rightClassName)}, "div")}
+        </footer>
+    );
+};
+
+export default memo(forwardRef(Footer));

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

@@ -0,0 +1,45 @@
+$root: footer;
+
+.#{$root} {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: var(--footer-padding, var(--side-padding-sm));
+  padding-top: 0;
+  background-color: var(--footer-bg-color, transparent);
+  transition:
+    background-color var(--transition-speed-sm),
+    box-shadow var(--transition-speed-sm);
+
+  &--shadow {
+    box-shadow: var(--footer-box-shadow, 0px -4px 4px 0px rgba(0, 0, 0, 0.03));
+  }
+
+  &--reverse {
+    flex-direction: row-reverse;
+  }
+
+  &-children {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .#{$root}--reverse & {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &-left {
+    display: flex;
+    align-items: center;
+    gap: var(--footer-left-gap, var(--footer-gap, 15px));
+  }
+
+  &-right {
+    display: flex;
+    align-items: center;
+    gap: var(--footer-right-gap, var(--footer-gap, 15px));
+  }
+}

package/src/components/Footer/index.ts

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

package/src/components/Header/Header.tsx

@@ -0,0 +1,74 @@
+import React, {ComponentProps, memo, ReactNode, forwardRef, ForwardRefRenderFunction} from "react";
+import classnames from "classnames";
+
+import {cloneOrCreateElement} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import styles from "./header.module.scss";
+
+export interface HeaderProps extends Omit<ComponentProps<"header">, "title"> {
+    title?: ReactNode;
+    before?: ReactNode;
+    after?: ReactNode;
+    subtitle?: ReactNode;
+    wrapClassName?: string;
+    titleClassName?: string;
+    beforeClassName?: string;
+    afterClassName?: string;
+    subtitleClassName?: string;
+    childrenClassName?: string;
+    alignCenter?: boolean;
+}
+
+const Header: ForwardRefRenderFunction<HTMLElement, HeaderProps> = (props, ref) => {
+    const {
+        title,
+        before,
+        after,
+        subtitle,
+        className,
+        wrapClassName,
+        titleClassName,
+        beforeClassName,
+        afterClassName,
+        subtitleClassName,
+        childrenClassName,
+        alignCenter = true,
+        children,
+        ...other
+    } = {...useComponentProps("header"), ...props};
+
+    return (
+        <header
+            ref={ref}
+            {...other}
+            className={classnames(
+                styles["header"],
+                {
+                    [styles["header--center"]]: alignCenter,
+                },
+                className
+            )}
+        >
+            {(title || subtitle) && (
+                <div className={classnames(styles["header__wrap"], wrapClassName)}>
+                    <h1 className={classnames(styles["header__title"], titleClassName)}>
+                        {cloneOrCreateElement(before, {className: beforeClassName})}
+                        {title}
+                        {cloneOrCreateElement(after, {className: afterClassName})}
+                    </h1>
+
+                    {cloneOrCreateElement(
+                        subtitle,
+                        {className: classnames(styles["header__subtitle"], subtitleClassName)},
+                        "h2"
+                    )}
+                </div>
+            )}
+
+            {cloneOrCreateElement(children, {className: childrenClassName}, "div")}
+        </header>
+    );
+};
+
+export default memo(forwardRef(Header));

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

@@ -0,0 +1,56 @@
+$root: header;
+
+.#{$root} {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  gap: var(--header-gap, 10px);
+  padding: var(--header-padding, var(--side-padding-sm));
+  padding-bottom: 0;
+
+  &__wrap {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    white-space: nowrap;
+    gap: var(--header-wrap-gap, 10px);
+  }
+
+  &__title,
+  &__subtitle {
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: var(--header-title-gap, 12px);
+    color: var(--header-title-color, var(--text-primary-color));
+    font-size: var(--header-title-font-size, 25px);
+    font-family: var(--header-title-font-family, var(--font-family)), "sans-serif";
+    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;
+    }
+  }
+
+  &__subtitle {
+    color: var(--header-subtitle-color, var(--text-secondary-color));
+    font-size: var(--header-subtitle-font-size, 14px);
+    font-family: var(--header-subtitle-font-family, var(--font-family)), "sans-serif";
+    font-weight: var(--header-subtitle-font-weight, 400);
+    line-height: var(--header-subtitle-line-height, 120%);
+    white-space: wrap;
+
+    .#{$root}--center & {
+      text-align: center;
+    }
+  }
+}

package/src/components/Header/index.ts

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