@iota/apps-ui-kit 0.0.0-dev-20251015065834

package/src/lib/components/atoms/label-text/LabelText.tsx

@@ -0,0 +1,92 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { LabelTextSize } from './labelText.enums';
+import { LABEL_TEXT_SIZE, SUPPORTING_TEXT_SIZE, TEXT_SIZE } from './labelText.classes';
+import { Info } from '@iota/apps-ui-icons';
+import type { TooltipPosition } from '../tooltip';
+import { Tooltip } from '../tooltip';
+
+interface LabelTextProps {
+    /**
+     * The size of the LabelText.
+     */
+    size?: LabelTextSize;
+    /**
+     * The position of the LabelText.
+     */
+    isCentered?: boolean;
+    /**
+     * The supporting label of the LabelText.
+     */
+    supportingLabel?: string;
+    /**
+     * The text of the LabelText.
+     */
+    label: string;
+    /**
+     * The text of the LabelText.
+     */
+    text: string;
+    /**
+     * The tooltip position.
+     */
+    tooltipPosition?: TooltipPosition;
+    /**
+     * The tooltip text.
+     */
+    tooltipText?: string;
+}
+
+export function LabelText({
+    size = LabelTextSize.Medium,
+    isCentered,
+    supportingLabel,
+    label,
+    text,
+    tooltipPosition,
+    tooltipText,
+}: LabelTextProps): React.JSX.Element {
+    const textClasses = TEXT_SIZE[size];
+    const supportingLabelClasses = SUPPORTING_TEXT_SIZE[size];
+    const labelTextClasses = LABEL_TEXT_SIZE[size];
+    const centeredClasses = isCentered ? 'items-center' : 'items-start';
+    const gapClass = size === LabelTextSize.Small ? 'gap-0.5' : 'gap-1';
+    return (
+        <div className={cx('flex flex-col', centeredClasses, gapClass)}>
+            <div className="flex flex-row flex-wrap items-center gap-0.5">
+                <span className={cx('label-text-primary-neutral font-inter', textClasses)}>
+                    {text}
+                </span>
+                {supportingLabel && (
+                    <span
+                        className={cx(
+                            'label-text-secondary-neutral font-inter',
+                            supportingLabelClasses,
+                        )}
+                    >
+                        {supportingLabel}
+                    </span>
+                )}
+            </div>
+            <div className="flex flex-row items-center gap-x-0.5">
+                <span
+                    className={cx(
+                        'label-text-secondary-neutral flex items-center font-inter',
+                        labelTextClasses,
+                    )}
+                >
+                    {label}
+                    {tooltipText && (
+                        <div className="ml-xxxs flex items-center">
+                            <Tooltip text={tooltipText} position={tooltipPosition}>
+                                <Info className="label-text-secondary-neutral" />
+                            </Tooltip>
+                        </div>
+                    )}
+                </span>
+            </div>
+        </div>
+    );
+}

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,88 @@
+// 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',
+                {
+                    'list-item-border-color border-b pb-xs': !hideBottomBorder,
+                },
+                { 'opacity-40': isDisabled },
+            )}
+        >
+            <div
+                onClick={handleClick}
+                role="button"
+                tabIndex={0}
+                onKeyDown={handleKeyDown}
+                className={cx(
+                    'list-item-color relative flex flex-row items-center justify-between px-md py-sm',
+                    !isDisabled && onClick ? 'cursor-pointer' : 'cursor-default',
+                    {
+                        'list-item-highlight-bg': isHighlighted,
+                        'state-layer-secondary': !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 = 'loading-indicator-color',
+    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/media-fallback/MediaFallback.tsx

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { PlaceholderReplace } from '@iota/apps-ui-icons';
+
+export function MediaFallback() {
+    return (
+        <div className="flex h-full w-full items-center justify-center bg-iota-neutral-96 dark:bg-iota-neutral-10">
+            <PlaceholderReplace className="h-4 w-4 text-iota-neutral-40 dark:text-iota-neutral-60" />
+        </div>
+    );
+}

package/src/lib/components/atoms/media-fallback/index.ts

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

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

@@ -0,0 +1,28 @@
+// 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 = 'panel-bg',
+}: React.PropsWithChildren<PanelProps>): React.JSX.Element {
+    const borderClass = hasBorder ? 'border panel-border-color' : '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,64 @@
+// 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('flex flex-row gap-x-1 text-center has-[:disabled]:opacity-40', {
+                disabled: isDisabled,
+                'cursor-pointer': !isDisabled,
+            })}
+        >
+            <div
+                className={cx('relative flex h-10 w-10 items-center justify-center rounded-full', {
+                    'state-layer-secondary': !isDisabled,
+                })}
+            >
+                <input
+                    type="radio"
+                    checked={isChecked}
+                    onChange={onChange}
+                    disabled={isDisabled}
+                    className={cx('peer appearance-none')}
+                />
+                <span className="radio-icon-color peer-checked:radio-icon-checked-color peer-checked:peer-disabled:radio-icon-checked-disabled-color absolute [&_svg]:h-6 [&_svg]:w-6">
+                    <RadioIcon />
+                </span>
+            </div>
+            <span className="radio-label-color inline-flex items-center justify-center text-label-lg ">
+                {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,29 @@
+// 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]:w-full group-[.errored]:secondary-text-error-color group-[.errored]:bg-error-surface group-[.errored]:rounded-xl group-[.errored]:py-1 group-[.errored]:px-2';
+    return (
+        <p
+            className={cx('secondary-text-color text-label-lg', {
+                [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,30 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import React from 'react';
+
+interface SkeletonLoaderProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {
+    /**
+     * If true, the skeleton will use darker neutral colors.
+     */
+    hasSecondaryColors?: boolean;
+}
+
+export function Skeleton({
+    children,
+    className,
+    hasSecondaryColors,
+}: React.PropsWithChildren<SkeletonLoaderProps>): React.JSX.Element {
+    return (
+        <div
+            className={cx(
+                'h-3 w-full animate-pulse rounded-full',
+                hasSecondaryColors ? 'skeleton-secondary-bg' : 'skeleton-bg',
+                className,
+            )}
+        >
+            {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-on-default',
+    [SnackbarType.Error]: 'text-on-error',
+    [SnackbarType.Warning]: 'text-on-warning',
+    [SnackbarType.Success]: 'text-on-success',
+};
+
+export const BACKGROUND_COLOR: Record<SnackbarType, string> = {
+    [SnackbarType.Default]: 'bg-default-surface',
+    [SnackbarType.Error]: 'bg-error-surface',
+    [SnackbarType.Warning]: 'bg-warning-surface',
+    [SnackbarType.Success]: 'bg-success-surface',
+};

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',
+}