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

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

@@ -0,0 +1,41 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ToggleSize } from './toggle.enums';
+
+export const TOGGLE = 'relative inline-flex items-center p-xxs border rounded-full cursor-pointer';
+
+export const TOGGLE_STATES = {
+    active: 'bg-primary-30 border-primary-30',
+    inactive: 'bg-primary-100 dark:bg-neutral-6 border-neutral-70 dark:border-neutral-40',
+    disabledActive: 'bg-neutral-70 border-neutral-70',
+    disabled: 'opacity-40 cursor-not-allowed',
+};
+
+export const TOGGLE_SIZE = {
+    [ToggleSize.Small]: 'h-5 w-10',
+    [ToggleSize.Default]: 'h-6 w-12',
+};
+
+export const TOGGLE_THUMB = 'absolute rounded-full transition-all duration-200 ease-in';
+export const TOGGLE_THUMB_POSITION = {
+    [ToggleSize.Small]: {
+        unchecked: 'left-1',
+        checked: 'left-8 -translate-x-full',
+    },
+    [ToggleSize.Default]: {
+        unchecked: 'left-1',
+        checked: 'left-10 -translate-x-full',
+    },
+};
+export const TOGGLE_THUMB_COLOR = {
+    unchecked: 'bg-neutral-60',
+    checked: 'bg-white',
+};
+export const TOGGLE_THUMB_SIZE = {
+    [ToggleSize.Small]: 'h-3 w-3',
+    [ToggleSize.Default]: 'h-4 w-4',
+};
+
+export const TOGGLE_CONTAINER = 'inline-flex items-center gap-2';
+export const TOGGLE_LABEL = 'text-label-lg text-neutral-40 dark:text-neutral-60';

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

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum ToggleSize {
+    Small = 'small',
+    Default = 'default',
+}
+
+export enum ToggleLabelPosition {
+    Left = 'left',
+    Right = 'right',
+}

package/src/lib/components/atoms/tooltip/Tooltip.tsx

@@ -0,0 +1,138 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useRef, useState, useLayoutEffect } from 'react';
+import type { PropsWithChildren } from 'react';
+import { createPortal } from 'react-dom';
+import cx from 'classnames';
+import { TooltipPosition } from './tooltip.enums';
+
+interface TooltipProps {
+    text: string;
+    position?: TooltipPosition;
+    maxWidth?: string;
+    offset?: number;
+    openDelay?: number;
+    closeDelay?: number;
+}
+
+export function Tooltip({
+    text,
+    position = TooltipPosition.Top,
+    maxWidth = 'max-w-[200px]',
+    offset = 8,
+    openDelay = 0,
+    closeDelay = 100,
+    children,
+}: PropsWithChildren<TooltipProps>) {
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const tooltipRef = useRef<HTMLDivElement>(null);
+
+    const [visible, setVisible] = useState(false);
+    const [coords, setCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+
+    const openTimer = useRef<ReturnType<typeof setTimeout>>();
+    const closeTimer = useRef<ReturnType<typeof setTimeout>>();
+
+    const clearTimers = () => {
+        clearTimeout(openTimer.current);
+        clearTimeout(closeTimer.current);
+    };
+
+    const open = () => {
+        clearTimers();
+        openTimer.current = setTimeout(() => setVisible(true), openDelay);
+    };
+
+    const close = () => {
+        clearTimers();
+        closeTimer.current = setTimeout(() => setVisible(false), closeDelay);
+    };
+
+    useLayoutEffect(() => {
+        if (!visible) return;
+
+        const rect = triggerRef.current?.getBoundingClientRect();
+        if (!rect) return;
+
+        const pos = {
+            [TooltipPosition.Top]: {
+                top: rect.top - offset,
+                left: rect.left + rect.width / 2,
+                transform: 'translate(-50%, -100%)',
+            },
+            [TooltipPosition.Bottom]: {
+                top: rect.bottom + offset,
+                left: rect.left + rect.width / 2,
+                transform: 'translate(-50%, 0)',
+            },
+            [TooltipPosition.Left]: {
+                top: rect.top + rect.height / 2,
+                left: rect.left - offset,
+                transform: 'translate(-100%, -50%)',
+            },
+            [TooltipPosition.Right]: {
+                top: rect.top + rect.height / 2,
+                left: rect.right + offset,
+                transform: 'translate(0, -50%)',
+            },
+        }[position];
+
+        setCoords({ top: pos.top, left: pos.left });
+        tooltipRef.current!.style.transform = pos.transform;
+    }, [visible, position, offset]);
+
+    useLayoutEffect(() => {
+        if (!visible) return;
+        const update = () => {
+            const rect = triggerRef.current?.getBoundingClientRect();
+            if (!rect) return;
+            setCoords((prev) => ({ ...prev, left: rect.left + rect.width / 2 }));
+        };
+        window.addEventListener('scroll', update, true);
+        window.addEventListener('resize', update);
+        return () => {
+            window.removeEventListener('scroll', update, true);
+            window.removeEventListener('resize', update);
+        };
+    }, [visible]);
+
+    const base =
+        'z-[999] w-max rounded bg-neutral-80 p-xs text-neutral-10 dark:bg-neutral-30 dark:text-neutral-92';
+
+    return (
+        <>
+            <div
+                ref={triggerRef}
+                className="inline-block cursor-pointer"
+                onMouseEnter={open}
+                onFocus={open}
+                onMouseLeave={close}
+                onBlur={close}
+            >
+                {children}
+            </div>
+
+            {visible &&
+                createPortal(
+                    <div
+                        ref={tooltipRef}
+                        role="tooltip"
+                        style={{
+                            position: 'fixed',
+                            top: coords.top,
+                            left: coords.left,
+                            transition: 'opacity .15s ease',
+                            opacity: 1,
+                        }}
+                        className={cx(base, maxWidth)}
+                        onMouseEnter={open}
+                        onMouseLeave={close}
+                    >
+                        <p className="w-full break-words">{text}</p>
+                    </div>,
+                    document.body,
+                )}
+        </>
+    );
+}

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

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

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

@@ -0,0 +1,11 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { TooltipPosition } from './tooltip.enums';
+
+export const TOOLTIP_POSITION: Record<TooltipPosition, string> = {
+    [TooltipPosition.Top]: 'bottom-full left-1/2 transform -translate-x-1/2 mb-1',
+    [TooltipPosition.Bottom]: 'top-full left-1/2 transform -translate-x-1/2 mt-1',
+    [TooltipPosition.Left]: 'top-1/2 right-full transform -translate-y-1/2 mr-1',
+    [TooltipPosition.Right]: 'top-1/2 left-full transform -translate-y-1/2 ml-1',
+};

package/src/lib/components/atoms/tooltip/tooltip.enums.ts

@@ -0,0 +1,9 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum TooltipPosition {
+    Top = 'top',
+    Bottom = 'bottom',
+    Left = 'left',
+    Right = 'right',
+}

package/src/lib/components/atoms/visual-asset-card/VisualAssetCard.tsx

@@ -0,0 +1,101 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { VisualAssetType } from './visualAssetCard.enums';
+import { ButtonUnstyled } from '../button';
+import { MoreHoriz, PlaceholderReplace } from '@iota/apps-ui-icons';
+import cx from 'classnames';
+import { useState } from 'react';
+
+export interface VisualAssetCardProps {
+    /**
+     * The type of the asset to be displayed.
+     */
+    assetType?: VisualAssetType;
+    /**
+     * The source of the image to be displayed.
+     */
+    assetSrc: string;
+    /**
+     * Alt text for the image.
+     */
+    altText: string;
+    /**
+     * The onClick event for the icon.
+     */
+    onIconClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The onClick event for the card.
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * The icon to be displayed.
+     */
+    icon?: React.ReactNode;
+    /**
+     * The title text to be displayed on hover.
+     */
+    assetTitle?: string;
+    /**
+     * Whether the card is hoverable.
+     */
+    isHoverable?: boolean;
+}
+
+export function VisualAssetCard({
+    assetType = VisualAssetType.Image,
+    assetSrc,
+    altText,
+    onIconClick,
+    onClick,
+    icon = <MoreHoriz />,
+    assetTitle,
+    isHoverable = true,
+}: VisualAssetCardProps): React.JSX.Element {
+    const [imageError, setImageError] = useState(false);
+
+    const handleIconClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        onIconClick?.(event);
+        event?.stopPropagation();
+    };
+
+    return (
+        <div
+            className={cx('relative aspect-square w-full overflow-hidden rounded-xl', {
+                'group cursor-pointer': isHoverable,
+            })}
+            onClick={onClick}
+        >
+            {assetType === VisualAssetType.Video ? (
+                <video src={assetSrc} className="h-full w-full object-cover" autoPlay loop muted />
+            ) : imageError ? (
+                <div className="flex h-full w-full items-center justify-center bg-neutral-96 dark:bg-neutral-10">
+                    <PlaceholderReplace className="h-4 w-4 text-neutral-40 dark:text-neutral-60" />
+                </div>
+            ) : (
+                <img
+                    src={assetSrc}
+                    alt={altText}
+                    className="h-full w-full object-cover"
+                    onError={() => setImageError(true)}
+                />
+            )}
+            {isHoverable && (
+                <div className="absolute left-0 top-0 h-full w-full bg-cover bg-center bg-no-repeat group-hover:bg-shader-neutral-light-48 group-hover:transition group-hover:duration-300 group-hover:ease-in-out group-hover:dark:bg-shader-primary-dark-48" />
+            )}
+            {isHoverable && onIconClick && (
+                <ButtonUnstyled
+                    className="absolute right-2 top-2 h-9 w-9 cursor-pointer rounded-full p-xs opacity-0 transition-opacity duration-300 group-hover:bg-shader-neutral-light-72 group-hover:opacity-100 [&_svg]:h-5 [&_svg]:w-5 [&_svg]:text-primary-100"
+                    onClick={handleIconClick}
+                >
+                    {icon}
+                </ButtonUnstyled>
+            )}
+            {isHoverable && assetTitle && (
+                <div className="absolute bottom-0 flex items-center justify-center p-xs opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                    <span className="text-title-md text-neutral-100">{assetTitle}</span>
+                </div>
+            )}
+        </div>
+    );
+}

package/src/lib/components/atoms/visual-asset-card/index.ts

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

package/src/lib/components/atoms/visual-asset-card/visualAssetCard.enums.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum VisualAssetType {
+    Image = 'image',
+    Video = 'video',
+}

package/src/lib/components/index.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import '../styles/index.css';
+
+export * from './atoms';
+export * from './molecules';
+export * from './organisms';

package/src/lib/components/molecules/account/Account.tsx

@@ -0,0 +1,192 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import type { BadgeType } from '@/components/atoms';
+import { Badge, Tooltip, TooltipPosition, ButtonUnstyled } from '@/components/atoms';
+import {
+    LockLocked,
+    LockUnlocked,
+    MoreHoriz,
+    CheckmarkFilled,
+    RadioOff,
+} from '@iota/apps-ui-icons';
+import { Address } from '../address';
+
+interface AccountProps {
+    /**
+     * The title of the account.
+     */
+    title: string;
+    /**
+     * The subtitle of the account.
+     */
+    subtitle: string;
+    /**
+     * Whether the account is unlocked.
+     */
+    isLocked?: boolean;
+    /**
+     * Handler for more options click.
+     */
+    onOptionsClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Handler for the lock account icon click.
+     */
+    onLockAccountClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Handle for the unlock account icon click.
+     */
+    onUnlockAccountClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Function to render avatar content.
+     */
+    avatarContent: ({ isLocked }: { isLocked?: boolean }) => React.JSX.Element;
+    /**
+     * The onCopy event of the Address  (optional).
+     */
+    onCopy?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Text that need to be copied (optional).
+     */
+    copyText?: string;
+    /**
+     * The onOpen event of the Address  (optional).
+     */
+    onOpen?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Has copy icon (optional).
+     */
+    isCopyable?: boolean;
+    /**
+     * Has open icon  (optional).
+     */
+    isExternal?: boolean;
+    /**
+     * The account is selected.
+     */
+    isSelected?: boolean;
+    /**
+     * Show the selected checkbox.
+     */
+    showSelected?: boolean;
+    /**
+     * Show background if account active (optional).
+     */
+    isActive?: boolean;
+    /**
+     * The type of the badge.
+     */
+    badgeType?: BadgeType;
+    /**
+     * The text of the badge.
+     */
+    badgeText?: string;
+    /**
+     * The tooltip text of the badge.
+     */
+    badgeTooltipText?: string;
+    /**
+     * The tooltip position of the badge.
+     */
+    badgeTooltipPosition?: TooltipPosition;
+}
+
+export function Account({
+    title,
+    subtitle,
+    badgeType,
+    badgeText,
+    isLocked,
+    avatarContent,
+    onOptionsClick,
+    onLockAccountClick,
+    onUnlockAccountClick,
+    onCopy,
+    copyText,
+    onOpen,
+    isCopyable,
+    isExternal,
+    isSelected,
+    isActive,
+    showSelected,
+    badgeTooltipText,
+    badgeTooltipPosition = TooltipPosition.Bottom,
+}: AccountProps): React.JSX.Element {
+    const Avatar = avatarContent;
+
+    return (
+        <div
+            className={cx(
+                'state-layer group relative flex w-full items-center justify-between space-x-3 rounded-xl px-sm py-xs hover:cursor-pointer',
+                isActive && 'state-active',
+                {
+                    'opacity-60': isLocked && showSelected,
+                },
+            )}
+        >
+            <div className="flex items-center space-x-3">
+                <Avatar isLocked={isLocked} />
+                <div className="flex flex-col items-start py-xs">
+                    <div className="flex items-center space-x-2">
+                        <span className="font-inter text-title-md text-neutral-10 dark:text-neutral-92">
+                            {title}
+                        </span>
+                        {badgeText && badgeType ? (
+                            badgeTooltipText ? (
+                                <Tooltip text={badgeTooltipText} position={badgeTooltipPosition}>
+                                    <Badge type={badgeType} label={badgeText} />
+                                </Tooltip>
+                            ) : (
+                                <Badge type={badgeType} label={badgeText} />
+                            )
+                        ) : null}
+                    </div>
+                    <Address
+                        text={subtitle}
+                        onCopySuccess={onCopy}
+                        copyText={copyText}
+                        onOpen={onOpen}
+                        isCopyable={isCopyable}
+                        isExternal={isExternal}
+                    />
+                </div>
+            </div>
+            <div className="z-10 ml-auto flex items-center space-x-2 [&_button]:h-5 [&_button]:w-5 [&_svg]:h-5 [&_svg]:w-5">
+                <div className="flex items-center space-x-2 [&_button:not(.locked)]:hidden group-hover:[&_button:not(.locked)]:flex [&_svg]:text-neutral-40 [&_svg]:dark:text-neutral-60">
+                    {onOptionsClick && (
+                        <ButtonUnstyled onClick={onOptionsClick}>
+                            <MoreHoriz />
+                        </ButtonUnstyled>
+                    )}
+                    {onLockAccountClick &&
+                        onUnlockAccountClick &&
+                        (isLocked ? (
+                            <div className="flex items-center">
+                                <ButtonUnstyled
+                                    onClick={onUnlockAccountClick}
+                                    testId="account-unlock"
+                                    className="locked"
+                                >
+                                    <LockLocked />
+                                </ButtonUnstyled>
+                            </div>
+                        ) : (
+                            <ButtonUnstyled onClick={onLockAccountClick} testId="account-lock">
+                                <LockUnlocked />
+                            </ButtonUnstyled>
+                        ))}
+                </div>
+                {showSelected && (
+                    <ButtonUnstyled>
+                        {isSelected ? (
+                            <CheckmarkFilled className="h-5 w-5 text-primary-30 dark:text-primary-80" />
+                        ) : (
+                            <RadioOff className="h-5 w-5 text-neutral-40 dark:text-neutral-60" />
+                        )}
+                    </ButtonUnstyled>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/lib/components/molecules/account/index.ts

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

package/src/lib/components/molecules/address/Address.tsx

@@ -0,0 +1,101 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { Copy, ArrowTopRight } from '@iota/apps-ui-icons';
+import { ButtonUnstyled } from '@/components/atoms/button';
+
+interface AddressProps {
+    /**
+     * The text of the address.
+     */
+    text: string;
+    /**
+     * Has copy icon (optional).
+     */
+    isCopyable?: boolean;
+    /**
+     * Has open icon  (optional).
+     */
+    isExternal?: boolean;
+
+    /**
+     * The link for external resource (optional).
+     */
+    externalLink?: string;
+
+    /**
+     * Text that need to be copied (optional).
+     */
+    copyText?: string;
+    /**
+     * The onCopySuccess event of the Address  (optional).
+     */
+    onCopySuccess?: (e: React.MouseEvent<HTMLButtonElement>, text: string) => void;
+    /**
+     * The onCopyError event of the Address  (optional).
+     */
+    onCopyError?: (e: unknown, text: string) => void;
+    /**
+     * The onOpen event of the Address  (optional).
+     */
+    onOpen?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export function Address({
+    text,
+    isCopyable,
+    isExternal,
+    externalLink,
+    copyText = text,
+    onCopySuccess,
+    onCopyError,
+    onOpen,
+}: AddressProps): React.JSX.Element {
+    async function handleCopyClick(event: React.MouseEvent<HTMLButtonElement>) {
+        if (!navigator.clipboard) {
+            return;
+        }
+
+        event?.stopPropagation();
+        try {
+            await navigator.clipboard.writeText(copyText);
+            onCopySuccess?.(event, copyText);
+        } catch (error) {
+            console.error('Failed to copy:', error);
+            onCopyError?.(error, copyText);
+        }
+    }
+
+    function handleOpenClick(event: React.MouseEvent<HTMLButtonElement>) {
+        event?.stopPropagation();
+        if (externalLink) {
+            const newWindow = window.open(externalLink, '_blank', 'noopener noreferrer');
+            if (newWindow) newWindow.opener = null;
+        } else {
+            onOpen?.(event);
+        }
+    }
+
+    return (
+        <div className="group flex flex-row items-center gap-1 text-neutral-40 dark:text-neutral-60">
+            <span className={cx('font-inter text-body-sm')}>{text}</span>
+            {isCopyable && (
+                <ButtonUnstyled
+                    onClick={handleCopyClick}
+                    className="opacity-0 group-hover:opacity-100"
+                >
+                    <Copy />
+                </ButtonUnstyled>
+            )}
+            {isExternal && (
+                <ButtonUnstyled
+                    onClick={handleOpenClick}
+                    className="opacity-0 group-hover:opacity-100"
+                >
+                    <ArrowTopRight />
+                </ButtonUnstyled>
+            )}
+        </div>
+    );
+}

package/src/lib/components/molecules/address/index.ts

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