addon-ui 0.3.0

package/src/components/Tag/types.ts

@@ -0,0 +1,23 @@
+export enum TagVariant {
+    Contained = "contained",
+    Outlined = "outlined",
+    Soft = "soft",
+}
+
+export enum TagColor {
+    Primary = "primary",
+    Secondary = "secondary",
+    Accent = "accent",
+}
+
+export enum TagSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum TagRadius {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}

package/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,126 @@
+import React, {
+    ChangeEventHandler,
+    ComponentProps,
+    forwardRef,
+    memo,
+    useCallback,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from "react";
+
+import classnames from "classnames";
+import autosize from "autosize";
+
+import {useComponentProps} from "../../providers";
+
+import {TextAreaVariant, TextAreaSize, TextAreaRadius} from "./types";
+
+import styles from "./text-area.module.scss";
+
+export interface TextAreaActions {
+    select(): void;
+
+    focus(): void;
+
+    setValue(value: string): void;
+}
+
+export interface TextAreaProps extends ComponentProps<"textarea"> {
+    variant?: TextAreaVariant;
+    radius?: TextAreaRadius;
+    size?: TextAreaSize;
+    fullWidth?: boolean;
+    label?: string;
+    children?: string | ReadonlyArray<string> | number | undefined;
+}
+
+const TextArea = forwardRef<TextAreaActions, TextAreaProps>((props, ref) => {
+    const {
+        variant = TextAreaVariant.Regular,
+        radius,
+        size,
+        fullWidth,
+        label,
+        id,
+        name,
+        rows = 4,
+        value: propValue = "",
+        children,
+        onChange,
+        className,
+        ...other
+    } = {...useComponentProps("textArea"), ...props};
+
+    const [value, setValue] = useState(propValue || children);
+
+    const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+    const handleChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>(
+        event => {
+            onChange?.(event);
+            setValue(event.currentTarget.value);
+        },
+        [onChange]
+    );
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            select() {
+                textareaRef.current?.select();
+            },
+            focus() {
+                textareaRef.current?.focus();
+            },
+            setValue(value: string) {
+                setValue(value);
+            },
+        }),
+        []
+    );
+
+    useEffect(() => {
+        const textarea = textareaRef.current;
+
+        if (textarea) {
+            autosize(textarea);
+        }
+
+        return () => {
+            if (textarea) {
+                autosize.destroy(textarea);
+            }
+        };
+    }, []);
+
+    useEffect(() => {
+        setValue(propValue || children);
+    }, [propValue, children]);
+
+    return (
+        <textarea
+            {...other}
+            ref={textareaRef}
+            id={id}
+            name={name || id}
+            value={value}
+            rows={rows}
+            aria-label={label}
+            onChange={handleChange}
+            className={classnames(
+                styles["text-area"],
+                {
+                    [styles[`text-area--${variant}`]]: variant,
+                    [styles[`text-area--${size}-size`]]: size,
+                    [styles[`text-area--${radius}-radius`]]: radius,
+                    [styles["text-area--full-width"]]: fullWidth,
+                },
+                className
+            )}
+        />
+    );
+});
+
+export default memo(TextArea);

package/src/components/TextArea/index.ts

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

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

@@ -0,0 +1,88 @@
+$root: text-area;
+
+.#{$root} {
+  outline: none;
+  box-sizing: border-box;
+  font-family: var(--text-area-font-family, var(--font-family)), sans-serif;
+  font-weight: var(--text-area-font-weight, 400);
+  font-size: var(--text-area-font-size, 14px);
+  letter-spacing: var(--text-area-letter-spacing, 0.5px);
+  line-height: var(--text-area-line-height, var(--line-height, 1 rem));
+  padding: var(--text-area-padding, 8px 12px);
+  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);
+
+  &:focus {
+    border-color: var(--text-area-focus-border-color, color-mix(in srgb, white 40%, var(--primary-color)));
+    box-shadow: var(--text-area-focus-shadow, 0 0 4px var(--primary-color));
+  }
+
+  &:disabled {
+    opacity: var(--text-area-disabled-opacity, 0.7);
+    cursor: not-allowed;
+  }
+
+  &--full-width {
+    width: 100% !important;
+  }
+
+  // Variants
+  &--regular {
+    color: var(--text-area-regular-color, var(--text-area-color, var(--text-primary-color)));
+    background: var(--text-area-regular-bg-color, var(--text-area-bg-color, var(--bg-secondary-color)));
+    border-style: solid;
+    border-width: var(--text-area-regular-border-width, var(--text-area-border-width, 1px));
+    border-color: var(--text-area-regular-border-color, var(--border-color));
+  }
+
+  &--outlined {
+    color: var(--text-area-outlined-color, var(--text-area-color, var(--text-primary-color)));
+    background: transparent;
+    border-style: solid;
+    border-width: var(--text-area-outlined-border-width, var(--text-area-border-width, 1px));
+    border-color: var(--text-area-outlined-border-color, var(--border-color));
+  }
+
+  &--filled {
+    color: var(--text-area-filled-color, var(--text-area-color, var(--text-primary-color)));
+    background: var(--text-area-filled-bg-color, var(--text-area-bg-color, var(--bg-secondary-color)));
+    border: none;
+  }
+
+  // Radius
+  &--none-radius {
+    border-radius: 0;
+  }
+
+  &--small-radius {
+    border-radius: var(--text-area-border-radius-sm, 5px);
+  }
+
+  &--medium-radius {
+    border-radius: var(--text-area-border-radius-md, 10px);
+  }
+
+  &--large-radius {
+    border-radius: var(--text-area-border-radius-lg, 15px);
+  }
+
+  // Sizes
+  &--small-size {
+    padding: var(--text-area-padding-sm, 6px 10px);
+    font-size: var(--text-area-font-size-sm, 12px);
+  }
+
+  &--medium-size {
+    padding: var(--text-area-padding-md, 10px 14px);
+    font-size: var(--text-area-font-size-sm, 16px);
+  }
+
+  &--large-size {
+    padding: var(--text-area-padding-lg, 12px 16px);
+    font-size: var(--text-area-font-size-sm, 18px);
+  }
+}

package/src/components/TextArea/types.ts

@@ -0,0 +1,18 @@
+export enum TextAreaVariant {
+    Regular = "regular",
+    Outlined = "outlined",
+    Filled = "filled",
+}
+
+export enum TextAreaSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum TextAreaRadius {
+    None = "none",
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,139 @@
+import React, {
+    ChangeEventHandler,
+    ComponentProps,
+    forwardRef,
+    memo,
+    ReactNode,
+    useCallback,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from "react";
+
+import classnames from "classnames";
+
+import {cloneOrCreateElement} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import {TextFieldVariant, TextFieldSize, TextFieldRadius, TextFieldAccent} from "./types";
+
+import styles from "./text-field.module.scss";
+
+export interface TextFieldActions {
+    select(): void;
+
+    focus(): void;
+
+    getValue(): string | undefined;
+
+    setValue(value: string | number | undefined): void;
+}
+
+export interface TextFieldProps extends ComponentProps<"input"> {
+    variant?: TextFieldVariant;
+    accent?: TextFieldAccent;
+    radius?: TextFieldRadius;
+    customSize?: TextFieldSize;
+    value?: string | number | undefined;
+    defaultValue?: string | number | undefined;
+    label?: string;
+    fullWidth?: boolean;
+    before?: ReactNode;
+    after?: ReactNode;
+    inputClassName?: string;
+    afterClassName?: string;
+    beforeClassName?: string;
+}
+
+const TextField = forwardRef<TextFieldActions, TextFieldProps>((props, ref) => {
+    const {
+        variant = TextFieldVariant.Regular,
+        accent,
+        radius,
+        customSize,
+        label,
+        fullWidth,
+        type = "text",
+        value: propValue = "",
+        defaultValue,
+        before,
+        after,
+        className,
+        inputClassName,
+        afterClassName,
+        beforeClassName,
+        onChange,
+        ...other
+    } = {...useComponentProps("textField"), ...props};
+
+    const [value, setValue] = useState<string | number | undefined>(defaultValue || propValue);
+    const inputRef = useRef<HTMLInputElement | null>(null);
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            select() {
+                inputRef.current?.select();
+            },
+            focus() {
+                inputRef.current?.focus();
+            },
+            getValue(): string | undefined {
+                return inputRef.current?.value;
+            },
+            setValue(value: string | number | undefined) {
+                setValue(value);
+            },
+        }),
+        []
+    );
+
+    const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        event => {
+            onChange?.(event);
+            setValue(event.currentTarget.value);
+        },
+        [onChange]
+    );
+
+    useEffect(() => {
+        setValue(propValue);
+    }, [propValue]);
+
+    return (
+        <div
+            aria-label={label}
+            className={classnames(
+                styles["text-field"],
+                {
+                    [styles[`text-field--${variant}`]]: variant,
+                    [styles[`text-field--${accent}`]]: accent,
+                    [styles[`text-field--${radius}-radius`]]: radius,
+                    [styles[`text-field--${customSize}-size`]]: customSize,
+                    [styles["text-field--full-width"]]: fullWidth,
+                },
+                className
+            )}
+        >
+            {cloneOrCreateElement(
+                before,
+                {className: classnames(styles["text-field__before"], beforeClassName)},
+                "span"
+            )}
+            <input
+                {...other}
+                ref={inputRef}
+                type={type}
+                value={value}
+                defaultValue={defaultValue}
+                aria-label={label}
+                className={classnames(styles["text-field__input"], inputClassName)}
+                onChange={handleChange}
+            />
+            {cloneOrCreateElement(after, {className: classnames(styles["text-field__after"], afterClassName)}, "span")}
+        </div>
+    );
+});
+
+export default memo(TextField);

package/src/components/TextField/index.ts

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

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

@@ -0,0 +1,129 @@
+$root: text-field;
+
+.#{$root} {
+  display: flex;
+  align-items: center;
+  gap: var(--text-field-gap, 0.3em);
+  font-family: var(--text-field-font-family, var(--font-family)), sans-serif;
+  font-weight: var(--text-field-font-weight, 400);
+  font-size: var(--text-field-font-size, 14px);
+  letter-spacing: var(--text-field-letter-spacing, 0.5px);
+  line-height: var(--text-field-line-height, var(--line-height, 1 rem));
+  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);
+
+  &: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));
+  }
+
+  &:has(&__input:disabled) {
+    opacity: var(--text-field-disabled-opacity, 0.7);
+    cursor: not-allowed;
+  }
+
+  &__input {
+    width: 100%;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    padding: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+
+    &:focus {
+      outline: none;
+    }
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__before,
+  &__after {
+    display: inline;
+    cursor: default;
+  }
+
+  &--full-width {
+    width: 100%;
+  }
+
+  // Variants
+  &--regular {
+    color: var(--text-field-regular-color, var(--text-field-color, var(--text-primary-color)));
+    background: var(--text-field-regular-bg-color, var(--text-field-bg-color, var(--bg-secondary-color)));
+    border-style: solid;
+    border-width: var(--text-field-regular-border-width, var(--text-field-border-width, 1px));
+    border-color: var(--text-field-regular-border-color, var(--border-color));
+  }
+
+  &--outlined {
+    color: var(--text-field-outlined-color, var(--text-field-color, var(--text-primary-color)));
+    background: transparent;
+    border-style: solid;
+    border-width: var(--text-field-outlined-border-width, var(--text-field-border-width, 1px));
+    border-color: var(--text-field-outlined-border-color, var(--border-color));
+  }
+
+  &--filled {
+    color: var(--text-field-filled-color, var(--text-field-color, var(--text-primary-color)));
+    background: var(--text-field-filled-bg-color, var(--text-field-bg-color, var(--bg-secondary-color)));
+    border: none;
+  }
+
+  // Radius
+  &--none-radius {
+    border-radius: 0;
+  }
+
+  &--small-radius {
+    border-radius: var(--text-field-border-radius-sm, 5px);
+  }
+
+  &--medium-radius {
+    border-radius: var(--text-field-border-radius-md, 10px);
+  }
+
+  &--large-radius {
+    border-radius: var(--text-field-border-radius-lg, 15px);
+  }
+
+  &--full-radius {
+    border-radius: var(--text-field-border-radius-full, 999px);
+  }
+
+  // Sizes
+  &--small-size {
+    padding: var(--text-field-padding-sm, 6px 10px);
+    font-size: var(--text-field-font-size-sm, 12px);
+  }
+
+  &--medium-size {
+    padding: var(--text-field-padding-md, 10px 14px);
+    font-size: var(--text-field-font-size-sm, 16px);
+  }
+
+  &--large-size {
+    padding: var(--text-field-padding-lg, 12px 16px);
+    font-size: var(--text-field-font-size-sm, 18px);
+  }
+
+  // Accents
+  &--success {
+    border-color: var(--text-field-success-color, var(--success-color)) !important;
+    border-width: var(--text-field-accent-border-width, 2px) !important;
+    box-shadow: var(--text-field-success-color, 0 0 4px var(--success-color)) !important;
+  }
+
+  &--error {
+    border-color: var(--text-field-error-color, var(--error-color)) !important;
+    border-width: var(--text-field-accent-border-width, 2px) !important;
+    box-shadow: var(--text-field-error-color, 0 0 4px var(--error-color)) !important;
+  }
+}

package/src/components/TextField/types.ts

@@ -0,0 +1,24 @@
+export enum TextFieldVariant {
+    Regular = "regular",
+    Outlined = "outlined",
+    Filled = "filled",
+}
+
+export enum TextFieldSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum TextFieldRadius {
+    None = "none",
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+    Full = "full",
+}
+
+export enum TextFieldAccent {
+    Success = "success",
+    Error = "error",
+}

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,124 @@
+import React, {memo, ReactElement, ReactNode, forwardRef, ForwardRefRenderFunction} from "react";
+import classnames from "classnames";
+import {
+    Description,
+    Provider,
+    Root,
+    Title,
+    ToastProps as ToastRootProps,
+    ToastProviderProps,
+    Viewport,
+} from "@radix-ui/react-toast";
+
+import {IconButton, IconButtonProps} from "../IconButton";
+import {cloneOrCreateElement} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import {ToastSide, ToastRadius, ToastColor} from "./types";
+
+import styles from "./toast.module.scss";
+
+const toastSideBySwipeDirectionMap = {
+    [ToastSide.TopLeft]: "left",
+    [ToastSide.TopCenter]: "up",
+    [ToastSide.TopRight]: "right",
+    [ToastSide.BottomRight]: "right",
+    [ToastSide.BottomCenter]: "down",
+    [ToastSide.BottomLeft]: "left",
+} as Record<ToastSide, ToastProviderProps["swipeDirection"]>;
+
+export interface ToastProps extends Omit<ToastRootProps, "title">, Omit<ToastProviderProps, "children"> {
+    side?: ToastSide;
+    color?: ToastColor;
+    radius?: ToastRadius;
+    title?: ReactNode;
+    action?: ReactNode;
+    description?: ReactNode;
+    closeIcon?: ReactElement;
+    closeProps?: IconButtonProps;
+    titleClassName?: string;
+    actionClassName?: string;
+    viewportClassName?: string;
+    descriptionClassName?: string;
+    onClose?: () => void;
+    fullWidth?: boolean;
+    sticky?: boolean;
+}
+
+const Toast: ForwardRefRenderFunction<HTMLLIElement, ToastProps> = (props, ref) => {
+    const defaultProps = useComponentProps("toast");
+    const mergedProps = {...defaultProps, ...props};
+    const {
+        side = ToastSide.BottomRight,
+        color,
+        radius,
+        title,
+        action,
+        description,
+        fullWidth,
+        sticky,
+        closeIcon = "✖",
+        closeProps,
+
+        label,
+        duration,
+        swipeDirection = toastSideBySwipeDirectionMap[side],
+        swipeThreshold = ["up", "down"].includes(swipeDirection || "") ? 15 : 50,
+
+        className,
+        titleClassName,
+        actionClassName,
+        viewportClassName,
+        descriptionClassName,
+        children,
+        onClose,
+        ...other
+    } = mergedProps;
+
+    const {className: closeClassName, ...otherCloseProps} = closeProps || {};
+    return (
+        <Provider label={label} duration={duration} swipeDirection={swipeDirection} swipeThreshold={swipeThreshold}>
+            {children}
+            <Root
+                ref={ref}
+                className={classnames(
+                    styles["toast"],
+                    {
+                        [styles[`toast--${side}`]]: side,
+                        [styles[`toast--${color}-color`]]: color,
+                        [styles[`toast--${radius}-radius`]]: radius,
+                        [styles["toast--sticky"]]: sticky,
+                        [styles["toast--full-width"]]: fullWidth,
+                    },
+                    className
+                )}
+                {...other}
+            >
+                {title && <Title className={classnames(styles["toast__title"], titleClassName)}>{title}</Title>}
+
+                {description && (
+                    <Description className={classnames(styles["toast__description"], descriptionClassName)}>
+                        {description}
+                    </Description>
+                )}
+
+                {cloneOrCreateElement(action, {className: classnames(styles["toast__action"], actionClassName)})}
+
+                {onClose && (
+                    <IconButton
+                        aria-label="Close"
+                        onClick={onClose}
+                        className={classnames(styles["toast__close"], closeClassName)}
+                        {...otherCloseProps}
+                    >
+                        {closeIcon}
+                    </IconButton>
+                )}
+            </Root>
+
+            <Viewport className={classnames(styles["toast__viewport"], viewportClassName)} />
+        </Provider>
+    );
+};
+
+export default memo(forwardRef(Toast));

package/src/components/Toast/index.ts

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