@iota/apps-ui-kit 0.0.0-experimental-20250613144451

package/src/lib/components/atoms/label-text/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './LabelText';
+export * from './labelText.enums';

package/src/lib/components/atoms/label-text/labelText.classes.ts

@@ -0,0 +1,22 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { LabelTextSize } from './labelText.enums';
+
+export const TEXT_SIZE = {
+    [LabelTextSize.Small]: 'text-title-sm',
+    [LabelTextSize.Medium]: 'text-title-md',
+    [LabelTextSize.Large]: 'text-title-lg',
+};
+
+export const SUPPORTING_TEXT_SIZE = {
+    [LabelTextSize.Small]: 'text-label-md',
+    [LabelTextSize.Medium]: 'text-label-md',
+    [LabelTextSize.Large]: 'text-label-lg',
+};
+
+export const LABEL_TEXT_SIZE = {
+    [LabelTextSize.Small]: 'text-label-md',
+    [LabelTextSize.Medium]: 'text-label-md',
+    [LabelTextSize.Large]: 'text-label-lg',
+};

package/src/lib/components/atoms/label-text/labelText.enums.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum LabelTextSize {
+    Small = 'small',
+    Medium = 'medium',
+    Large = 'large',
+}

package/src/lib/components/atoms/list-item/ListItem.tsx

@@ -0,0 +1,89 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { PropsWithChildren } from 'react';
+import cx from 'classnames';
+import { ArrowRight } from '@iota/apps-ui-icons';
+import { Button, ButtonSize, ButtonType } from '../button';
+
+export interface ListItemProps {
+    /**
+     * Has right icon (optional).
+     */
+    showRightIcon?: boolean;
+    /**
+     * Hide bottom border (optional).
+     */
+    hideBottomBorder?: boolean;
+    /**
+     * On click handler (optional).
+     */
+    onClick?: () => void;
+    /**
+     * The list item is disabled or not.
+     */
+    isDisabled?: boolean;
+    /**
+     * The list item is highlighted.
+     */
+    isHighlighted?: boolean;
+}
+
+export function ListItem({
+    showRightIcon,
+    hideBottomBorder,
+    onClick,
+    isDisabled,
+    children,
+    isHighlighted,
+}: PropsWithChildren<ListItemProps>): React.JSX.Element {
+    function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+        if ((event.key === 'Enter' || event.key === ' ') && !isDisabled && onClick) {
+            onClick();
+        }
+    }
+
+    function handleClick() {
+        if (!isDisabled && onClick) {
+            onClick();
+        }
+    }
+
+    return (
+        <div
+            className={cx(
+                'w-full',
+                {
+                    'border-b border-shader-neutral-light-8 pb-xs dark:border-shader-neutral-dark-8':
+                        !hideBottomBorder,
+                },
+                { 'opacity-40': isDisabled },
+            )}
+        >
+            <div
+                onClick={handleClick}
+                role="button"
+                tabIndex={0}
+                onKeyDown={handleKeyDown}
+                className={cx(
+                    'relative flex flex-row items-center justify-between px-md py-sm text-neutral-10 dark:text-neutral-92',
+                    !isDisabled && onClick ? 'cursor-pointer' : 'cursor-default',
+                    {
+                        'bg-shader-primary-dark-16 dark:bg-shader-inverted-dark-16': isHighlighted,
+                        'state-layer': !isDisabled,
+                    },
+                )}
+            >
+                {children}
+                {showRightIcon && (
+                    <Button
+                        size={ButtonSize.Small}
+                        type={ButtonType.Ghost}
+                        disabled={isDisabled}
+                        icon={<ArrowRight />}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}

package/src/lib/components/atoms/list-item/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './ListItem';

package/src/lib/components/atoms/loading-indicator/LoadingIndicator.tsx

@@ -0,0 +1,38 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { Loader } from '@iota/apps-ui-icons';
+
+export interface LoadingIndicatorProps {
+    /**
+     * The color of the loading indicator.
+     */
+    color?: string;
+    /**
+     * The size of the loading indicator.
+     */
+    size?: string;
+    /**
+     * The text to display next to the loading indicator.
+     */
+    text?: string;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
+}
+
+export function LoadingIndicator({
+    color = 'text-primary-30 dark:text-primary-80',
+    size = 'w-5 h-5',
+    text,
+    testId,
+}: LoadingIndicatorProps): React.JSX.Element {
+    return (
+        <div className="flex items-center justify-center gap-xs">
+            <Loader className={cx('animate-spin', color, size)} data-testid={testId} />
+            {text && <span className={cx('text-body-sm', color)}>{text}</span>}
+        </div>
+    );
+}

package/src/lib/components/atoms/loading-indicator/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './LoadingIndicator';

package/src/lib/components/atoms/panel/Panel.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+
+interface PanelProps {
+    /**
+     * Show or hide border around the panel.
+     */
+    hasBorder?: boolean;
+    /**
+     * Background color of the panel.
+     */
+    bgColor?: string;
+}
+
+export function Panel({
+    children,
+    hasBorder,
+    bgColor = 'bg-neutral-100 dark:bg-neutral-6',
+}: React.PropsWithChildren<PanelProps>): React.JSX.Element {
+    const borderClass = hasBorder
+        ? 'border border-shader-neutral-light-8 dark:border-shader-neutral-dark-8'
+        : 'border border-transparent';
+    return (
+        <div className={cx('flex w-full flex-col rounded-xl', bgColor, borderClass)}>
+            {children}
+        </div>
+    );
+}

package/src/lib/components/atoms/panel/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Panel';

package/src/lib/components/atoms/placeholder/Placeholder.tsx

@@ -0,0 +1,27 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+
+interface PlaceholderProps {
+    /**
+     * The width of the placeholder.
+     */
+    width?: string;
+    /**
+     * The height of the placeholder.
+     */
+    height?: string;
+}
+
+export function Placeholder({ width = 'w-full', height = 'h-4' }: PlaceholderProps) {
+    return (
+        <div
+            className={cx(
+                'animate-pulse rounded-md bg-gradient-to-r from-shader-primary-light-8 bg-[length:1000px_100%] dark:from-shader-primary-dark-8',
+                width,
+                height,
+            )}
+        />
+    );
+}

package/src/lib/components/atoms/placeholder/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export { Placeholder } from './Placeholder';

package/src/lib/components/atoms/radio-button/RadioButton.tsx

@@ -0,0 +1,68 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { RadioOn, RadioOff } from '@iota/apps-ui-icons';
+
+interface RadioButtonProps {
+    /**
+     * The label of the radio button.
+     */
+    label: string;
+    /**
+     * The state of the radio button.
+     */
+    isChecked?: boolean;
+    /**
+     * If radio button disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The callback to call when the radio button is clicked.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+function RadioButton({
+    label,
+    isChecked,
+    isDisabled,
+    onChange,
+}: RadioButtonProps): React.JSX.Element {
+    const RadioIcon = isChecked ? RadioOn : RadioOff;
+
+    return (
+        <label
+            className={cx('group flex flex-row gap-x-1 text-center', {
+                disabled: isDisabled,
+                'cursor-pointer': !isDisabled,
+            })}
+        >
+            <div
+                className={cx('relative flex h-10 w-10 items-center justify-center rounded-full', {
+                    'state-layer': !isDisabled,
+                })}
+            >
+                <input
+                    type="radio"
+                    checked={isChecked}
+                    onChange={onChange}
+                    disabled={isDisabled}
+                    className={cx('peer appearance-none disabled:opacity-40')}
+                />
+                <span
+                    className="absolute
+                    text-neutral-40 peer-checked:text-primary-30 peer-disabled:opacity-40 peer-checked:peer-disabled:text-neutral-40 dark:text-neutral-60 dark:peer-checked:peer-disabled:text-neutral-40 [&_svg]:h-6 [&_svg]:w-6
+                "
+                >
+                    <RadioIcon />
+                </span>
+            </div>
+            <span className="inline-flex items-center justify-center text-label-lg text-neutral-40 group-[.disabled]:text-opacity-40 dark:text-neutral-60 group-[.disabled]:dark:text-opacity-40">
+                {label}
+            </span>
+        </label>
+    );
+}
+
+export { RadioButton };

package/src/lib/components/atoms/radio-button/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './RadioButton';

package/src/lib/components/atoms/secondary-text/SecondaryText.tsx

@@ -0,0 +1,28 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+
+interface SecondaryTextProps {
+    /**
+     * The children to render.
+     */
+    children: React.ReactNode;
+    /**
+     * Should the text have error styles.
+     */
+    hasErrorStyles?: boolean;
+}
+
+export function SecondaryText({ children, hasErrorStyles }: SecondaryTextProps) {
+    const ERROR_STYLES = 'group-[.errored]:text-error-30 dark:group-[.errored]:text-error-80';
+    return (
+        <p
+            className={cx('text-label-lg text-neutral-40  dark:text-neutral-60 ', {
+                [ERROR_STYLES]: hasErrorStyles,
+            })}
+        >
+            {children}
+        </p>
+    );
+}

package/src/lib/components/atoms/secondary-text/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './SecondaryText';

package/src/lib/components/atoms/skeleton/Skeleton.tsx

@@ -0,0 +1,47 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+
+interface SkeletonLoaderProps {
+    /**
+     * Width class for the skeleton div.
+     */
+    widthClass?: string;
+    /**
+     * Height class for the skeleton div.
+     */
+    heightClass?: string;
+    /**
+     * If true, the skeleton will use darker neutral colors.
+     */
+    hasSecondaryColors?: boolean;
+    /**
+     * Whether the class `rounded-full` should be applied. Defaults to true.
+     */
+    isRounded?: boolean;
+}
+
+export function Skeleton({
+    children,
+    widthClass = 'w-full',
+    heightClass = 'h-3',
+    hasSecondaryColors,
+    isRounded = true,
+}: React.PropsWithChildren<SkeletonLoaderProps>): React.JSX.Element {
+    return (
+        <div
+            className={cx(
+                'animate-pulse rounded-full',
+                widthClass,
+                heightClass,
+                isRounded && 'rounded-full',
+                hasSecondaryColors
+                    ? 'bg-neutral-80 dark:bg-neutral-10'
+                    : 'bg-neutral-90 dark:bg-neutral-12',
+            )}
+        >
+            {children}
+        </div>
+    );
+}

package/src/lib/components/atoms/skeleton/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Skeleton';

package/src/lib/components/atoms/snackbar/Snackbar.tsx

@@ -0,0 +1,69 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect } from 'react';
+import cx from 'classnames';
+import { Close } from '@iota/apps-ui-icons';
+import { SnackbarType } from './snackbar.enums';
+import { BACKGROUND_COLOR, TEXT_COLOR } from './snackbar.classes';
+
+type Renderable = JSX.Element | string | null;
+export interface SnackbarProps {
+    /**
+     * The message to display in the snackbar.
+     */
+    text: Renderable;
+    /**
+     * Type of the snackbar.
+     */
+    type: SnackbarType;
+
+    /**
+     * Duration in milliseconds for the snackbar to auto close. `0` will make the component not close automatically.
+     */
+    duration?: number;
+
+    /**
+     * Callback to close the snackbar.
+     */
+    onClose: () => void;
+
+    /**
+     * Show the close button.
+     */
+    showClose?: boolean;
+}
+
+export function Snackbar({
+    text,
+    duration = 2000,
+    onClose,
+    showClose,
+    type = SnackbarType.Default,
+}: SnackbarProps) {
+    useEffect(() => {
+        if (duration) {
+            const timer = setTimeout(onClose, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [duration, onClose]);
+
+    return (
+        <div
+            className={cx(
+                'transition-all duration-300 ease-out',
+                'z-99 bottom-0',
+                'flex w-full items-center justify-between gap-xxs rounded-md py-sm pl-md pr-sm',
+                BACKGROUND_COLOR[type],
+            )}
+        >
+            <div className={cx('w-full text-left text-body-md', TEXT_COLOR[type])}>{text}</div>
+            {showClose && (
+                <Close
+                    className={cx('h-5 w-5 cursor-pointer', TEXT_COLOR[type])}
+                    onClick={onClose}
+                />
+            )}
+        </div>
+    );
+}

package/src/lib/components/atoms/snackbar/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Snackbar';
+export { SnackbarType } from './snackbar.enums';

package/src/lib/components/atoms/snackbar/snackbar.classes.ts

@@ -0,0 +1,18 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { SnackbarType } from './snackbar.enums';
+
+export const TEXT_COLOR: Record<SnackbarType, string> = {
+    [SnackbarType.Default]: 'text-neutral-10 dark:text-neutral-92',
+    [SnackbarType.Error]: 'text-error-20 dark:text-error-90',
+    [SnackbarType.Warning]: 'text-warning-10 dark:text-warning-90',
+    [SnackbarType.Success]: 'text-tertiary-20 dark:text-tertiary-90',
+};
+
+export const BACKGROUND_COLOR: Record<SnackbarType, string> = {
+    [SnackbarType.Default]: 'bg-primary-90 dark:bg-primary-10',
+    [SnackbarType.Error]: 'bg-error-90 dark:bg-error-10',
+    [SnackbarType.Warning]: 'bg-warning-90 dark:bg-warning-20',
+    [SnackbarType.Success]: 'bg-tertiary-90 dark:bg-tertiary-10',
+};

package/src/lib/components/atoms/snackbar/snackbar.enums.tsx

@@ -0,0 +1,9 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum SnackbarType {
+    Default = 'default',
+    Error = 'error',
+    Warning = 'warning',
+    Success = 'success',
+}

package/src/lib/components/atoms/toggle/Toggle.tsx

@@ -0,0 +1,140 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef, useRef } from 'react';
+import { ToggleLabelPosition, ToggleSize } from './toggle.enums';
+import {
+    TOGGLE,
+    TOGGLE_LABEL,
+    TOGGLE_SIZE,
+    TOGGLE_STATES,
+    TOGGLE_THUMB,
+    TOGGLE_THUMB_COLOR,
+    TOGGLE_THUMB_POSITION,
+    TOGGLE_THUMB_SIZE,
+    TOGGLE_CONTAINER,
+} from './toggle.classes';
+import cx from 'classnames';
+
+interface ToggleProps {
+    /**
+     * The label for the toggle.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * The state of the toggle (on or off).
+     */
+    isToggled: boolean;
+    /**
+     * Whether the label should be placed before the toggle.
+     */
+    labelPosition?: ToggleLabelPosition;
+    /**
+     * If true, the toggle will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The callback to call when the toggle state changes.
+     */
+    onChange?: (isToggled: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The name and id of the toggle input.
+     */
+    name?: string;
+    /**
+     * The size of the toggle.
+     */
+    size?: ToggleSize;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
+}
+
+export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
+    (
+        {
+            label,
+            isToggled,
+            labelPosition = ToggleLabelPosition.Right,
+            isDisabled = false,
+            onChange,
+            name,
+            size = ToggleSize.Default,
+            testId,
+        }: ToggleProps,
+        ref,
+    ) => {
+        const inputRef = useRef<HTMLInputElement | null>(null);
+
+        function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+            const newChecked = e.target.checked;
+            onChange?.(newChecked, e);
+        }
+
+        function assignRefs(element: HTMLInputElement) {
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(element);
+                } else {
+                    ref.current = element;
+                }
+            }
+            inputRef.current = element;
+        }
+
+        const toggleClasses = cx(TOGGLE, {
+            [TOGGLE_STATES.active]: isToggled && !isDisabled,
+            [TOGGLE_STATES.inactive]: !isToggled,
+            [TOGGLE_STATES.disabledActive]: isDisabled && isToggled,
+            [TOGGLE_STATES.disabled]: isDisabled,
+            [TOGGLE_SIZE[size]]: true,
+        });
+
+        const thumbClasses = cx(TOGGLE_THUMB, {
+            [TOGGLE_THUMB_POSITION[size].unchecked]: !isToggled,
+            [TOGGLE_THUMB_POSITION[size].checked]: isToggled,
+            [TOGGLE_THUMB_COLOR.unchecked]: !isToggled,
+            [TOGGLE_THUMB_COLOR.checked]: isToggled,
+            [TOGGLE_THUMB_SIZE[size]]: true,
+        });
+
+        const containerClasses = cx(TOGGLE_CONTAINER, {
+            'flex-row-reverse': labelPosition === ToggleLabelPosition.Left,
+            'cursor-not-allowed': isDisabled,
+        });
+        const labelClasses = cx(TOGGLE_LABEL, {
+            'opacity-40': isDisabled && !isToggled,
+        });
+
+        return (
+            <div className={containerClasses}>
+                <input
+                    id={name}
+                    name={name}
+                    type="checkbox"
+                    className="sr-only"
+                    checked={isToggled}
+                    ref={assignRefs}
+                    disabled={isDisabled}
+                    onChange={handleChange}
+                    data-testid={testId}
+                />
+
+                <span
+                    role="switch"
+                    onClick={() => inputRef.current?.click()}
+                    className={toggleClasses}
+                >
+                    <span className={thumbClasses} />
+                </span>
+
+                {label && (
+                    <label htmlFor={name} className={labelClasses}>
+                        {label}
+                    </label>
+                )}
+            </div>
+        );
+    },
+);

package/src/lib/components/atoms/toggle/index.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export { Toggle } from './Toggle';
+
+export * from './toggle.enums';