@iota/apps-ui-kit 0.6.0 → 0.7.1

package/src/lib/tailwind/constants/gradients.constants.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const NAMES_GRADIENTS = {
+    'names-gradient-primary': `var(--names-gradient-primary)`,
+};

package/src/lib/tailwind/constants/index.ts

@@ -4,3 +4,4 @@
 export * from './scaling.constants';
 export * from './fontSizes.constants';
 export * from './variableSpacing.constants';
+export * from './fontFamily.constants';

package/src/lib/tailwind/plugins.ts

@@ -6,3 +6,7 @@ import plugin from 'tailwindcss/plugin';
 export const firefoxPlugin = plugin(({ addVariant }) => {
     addVariant('firefox', '@-moz-document url-prefix()');
 });
+
+export const namesVariant = plugin(({ addVariant }) => {
+    addVariant('names', '&:is(.names *)');
+});

package/src/storybook/blocks/Showcase.tsx

@@ -9,9 +9,9 @@ interface ShowcaseProps {
 export function Showcase({ children, title }: ShowcaseProps) {
     return (
         <div className="flex flex-col gap-2">
-            <code className="inline w-fit rounded-md bg-neutral-96 px-xxs">{title}</code>
+            <code className="inline w-fit rounded-md bg-iota-neutral-96 px-xxs">{title}</code>
             <div className="flex">
-                <div className="flex flex-row items-center justify-center rounded-xl border border-neutral-70 p-md">
+                <div className="flex flex-row items-center justify-center rounded-xl border border-iota-neutral-70 p-md">
                     {children}
                 </div>
             </div>

package/src/storybook/blocks/TypeSet.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import React from 'react';
 import { TypeSetItem } from './TypeSetItem';
 import { getFontSizeLabelFromClass } from '../helpers';
 import type { TailwindCustomFonts } from '@/lib/tailwind/constants';
@@ -17,16 +18,15 @@ export function TypeSet({ typeset, label }: TypeSetProps) {
             {textClasses.map(([fontClass, [_, fontConfig]], index) => {
                 const sizeText = getFontSizeLabelFromClass(fontClass);
                 return (
-                    <>
+                    <React.Fragment key={index}>
                         <TypeSetItem
-                            key={index}
                             sampleText={label}
                             fontClass={fontClass}
                             sizeText={sizeText}
                             {...fontConfig}
                         />
                         {index !== textClasses.length - 1 && <hr className="mb-sm mt-xxs" />}
-                    </>
+                    </React.Fragment>
                 );
             })}
         </div>

package/src/storybook/blocks/TypeSetItem.tsx

@@ -44,7 +44,7 @@ export function TypeSetItem({ sampleText, sizeText, fontClass }: TypeSetItemProp
     return (
         <div className="flex flex-row items-start gap-x-md">
             {styles && (
-                <div className="text-xs text-neutral-60">
+                <div className="text-xs text-iota-neutral-60">
                     {styles[FontStyleProperties.FontSize]}
                 </div>
             )}
@@ -59,9 +59,9 @@ export function TypeSetItem({ sampleText, sizeText, fontClass }: TypeSetItemProp
                             .map(([key, value], index) => (
                                 <Fragment key={index}>
                                     {index > 0 && (
-                                        <span className="text-xs text-neutral-60">|</span>
+                                        <span className="text-xs text-iota-neutral-60">|</span>
                                     )}
-                                    <span className="text-xs text-neutral-60">
+                                    <span className="text-xs text-iota-neutral-60">
                                         {key}: {value}
                                     </span>
                                 </Fragment>

package/src/storybook/constants/gradients.constants.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { NAMES_GRADIENTS } from '@/lib/tailwind/constants/gradients.constants';
+
+export const COLOR_GRADIENTS = {
+    names: NAMES_GRADIENTS,
+};

package/src/storybook/helpers/formatGradientNames.ts

@@ -0,0 +1,15 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export function formatGradientNames(
+    title: string,
+    colors: Record<string, string>,
+): Record<string, string> {
+    const formattedColors: Record<string, string> = {};
+
+    Object.entries(colors).forEach(([key, value]) => {
+        formattedColors[key.replace(`${title}-`, '')] = value;
+    });
+
+    return formattedColors;
+}

package/src/storybook/stories/atoms/Skeleton.stories.tsx

@@ -17,16 +17,16 @@ export const SkeletonCard: Story = {
     render: () => (
         <Card>
             <CardImage shape={ImageShape.SquareRounded}>
-                <div className="h-10 w-10 animate-pulse bg-neutral-90 dark:bg-neutral-12" />
-                <Skeleton widthClass="w-10" heightClass="h-10" isRounded={false} />
+                <div className="h-10 w-10 animate-pulse bg-iota-neutral-90 names:bg-names-neutral-12 dark:bg-iota-neutral-12" />
+                <Skeleton className="h-10 w-10 rounded-none" />
             </CardImage>
             <div className="flex flex-col gap-y-xs">
-                <Skeleton widthClass="w-40" heightClass="h-3.5" />
-                <Skeleton widthClass="w-32" heightClass="h-3" hasSecondaryColors />
+                <Skeleton className="h-3.5 w-40" />
+                <Skeleton className="h-3 w-32" hasSecondaryColors />
             </div>
             <div className="ml-auto flex flex-col gap-y-xs">
-                <Skeleton widthClass="w-20" heightClass="h-3.5" />
-                <Skeleton widthClass="w-16" heightClass="h-3" hasSecondaryColors />
+                <Skeleton className="h-3.5 w-20" />
+                <Skeleton className="h-3 w-16" hasSecondaryColors />
             </div>
         </Card>
     ),

package/src/storybook/stories/atoms/Tooltip.stories.tsx

@@ -12,7 +12,9 @@ const meta: Meta<typeof Tooltip> = {
         return (
             <div className="flex h-20 items-center p-sm">
                 <Tooltip {...props}>
-                    <span className="text-neutral-10 dark:text-neutral-92">Hover me</span>
+                    <span className="text-iota-neutral-10 names:text-names-neutral-92 dark:text-names-neutral-92">
+                        Hover me
+                    </span>
                 </Tooltip>
             </div>
         );
@@ -50,7 +52,7 @@ export const WithIcon: Story = {
     render: (props) => {
         return (
             <Tooltip {...props}>
-                <Info className="text-neutral-10 dark:text-neutral-92" />
+                <Info className="text-iota-neutral-10 names:text-names-neutral-92 dark:text-names-neutral-92" />
             </Tooltip>
         );
     },

package/src/storybook/stories/atoms/VisualAssetCard.stories.tsx

@@ -22,7 +22,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {
-        assetSrc: 'https://d315pvdvxi2gex.cloudfront.net/528399e23c1bb7b14cced0b89.png',
+        assetType: VisualAssetType.Image,
+        src: 'https://d315pvdvxi2gex.cloudfront.net/528399e23c1bb7b14cced0b89.png',
         altText: 'IOTA Logo',
         onIconClick: () => {
             console.log('Icon clicked');
@@ -33,7 +34,7 @@ export const Default: Story = {
         assetTitle: 'IOTA Logo',
     },
     argTypes: {
-        assetSrc: {
+        src: {
             control: 'text',
         },
         altText: {

package/src/storybook/stories/components/DocsSyncTheme.tsx

@@ -0,0 +1,20 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { UIKitTheme } from '../../../lib/enums/theme.enums';
+import { useEffect } from 'react';
+
+export function DocsSyncTheme() {
+    useEffect(() => {
+        const docsUrl = new URL(document.location.href);
+        const globals = docsUrl.searchParams.get('globals');
+
+        const currentTheme = globals?.replace('theme:', '') || UIKitTheme.Light;
+
+        for (const theme of Object.values(UIKitTheme)) {
+            document.documentElement.classList.toggle(theme, theme === currentTheme);
+        }
+    }, []);
+
+    return null;
+}

package/src/storybook/stories/components/VariableSpacingShowcase.tsx

@@ -8,7 +8,7 @@ import { VARIABLE_GAP_CLASSES, VARIABLE_PADDING_CLASSES } from '@/storybook/cons
 export function VariableSpacingShowcase() {
     return (
         <div className="flex flex-col gap-10">
-            <p className="text-headline-sm text-neutral-10">
+            <p className="text-headline-sm text-iota-neutral-10">
                 The variable spacing changes based on the screen size.
             </p>
 
@@ -39,7 +39,7 @@ export function VariableSpacingShowcase() {
 function DocumentedBlock({ title, children }: React.PropsWithChildren<{ title: string }>) {
     return (
         <div className="flex flex-col gap-y-4">
-            <h2 className="text-headline-md text-neutral-10">{title}</h2>
+            <h2 className="text-headline-md text-iota-neutral-10">{title}</h2>
             <div className="flex flex-row flex-wrap gap-10">{children}</div>
         </div>
     );

package/src/storybook/stories/components/index.ts

@@ -2,3 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './VariableSpacingShowcase';
+export * from './DocsSyncTheme';

package/src/storybook/stories/design-tokens/colors.stories.mdx

@@ -1,9 +1,14 @@
 import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
 import {
     IOTA_PRIMITIVES_COLOR_PALETTE,
+    IOTA_NAMES_COLOR_PALETTE,
     SHADER_COLOR_PALETTE,
 } from '../../../lib/constants/colors.constants';
+import { COLOR_GRADIENTS } from '../../constants/gradients.constants';
+import { DocsSyncTheme } from '../components';
+import { formatGradientNames } from '../../helpers/formatGradientNames';
 
+<DocsSyncTheme />
 <Meta title="Design Tokens/Colors" />
 
 ## Primitives
@@ -14,6 +19,22 @@ import {
     })}
 </ColorPalette>
 
+## Names
+
+<ColorPalette>
+    {Object.entries(IOTA_NAMES_COLOR_PALETTE).map(([color, values]) => {
+        return <ColorItem key={color} title={color} colors={values} />;
+    })}
+</ColorPalette>
+
+## Gradients
+
+<ColorPalette>
+    {Object.entries(COLOR_GRADIENTS).map(([color, values]) => {
+        return <ColorItem key={color} title={color} colors={formatGradientNames(color, values)} />;
+    })}
+</ColorPalette>
+
 ## Shaders
 
 <ColorPalette>

package/src/storybook/stories/design-tokens/icons.stories.mdx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Meta, Title, IconGallery, IconItem } from '@storybook/blocks';
 import * as Icons from '@iota/apps-ui-icons';
+import { DocsSyncTheme } from '../components';
 
+<DocsSyncTheme />
 <Meta title="Design Tokens/Icon Gallery" />
 
 # Icon Gallery

package/src/storybook/stories/design-tokens/typeset.stories.mdx

@@ -1,7 +1,9 @@
 import { Meta, Typeset, Unstyled } from '@storybook/blocks';
 import { TYPESETS } from '../../constants';
 import { TypeSet, TypeSetItem } from '../../blocks';
+import { DocsSyncTheme } from '../components';
 
+<DocsSyncTheme />
 <Meta title="Design Tokens/Typesets" />
 
 # Typesets

package/src/storybook/stories/design-tokens/variable-spacing.stories.mdx

@@ -1,6 +1,7 @@
 import { Meta, Typeset, Unstyled } from '@storybook/blocks';
-import { VariableSpacingShowcase } from '../components';
+import { VariableSpacingShowcase, DocsSyncTheme } from '../components';
 
+<DocsSyncTheme />
 <Meta title="Design Tokens/Variable Spacing" />
 
 # Variable Spacing

package/src/storybook/stories/molecules/Account.stories.tsx

@@ -22,7 +22,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const Avatar = ({ isLocked }: { isLocked?: boolean }) => {
-    const circleFillClass = isLocked ? 'fill-neutral-80 dark:fill-neutral-30' : 'fill-primary-30';
+    const circleFillClass = isLocked
+        ? 'fill-iota-neutral-80 dark:fill-iota-neutral-30 names:fill-names-neutral-30'
+        : 'fill-iota-primary-30';
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"

package/src/storybook/stories/molecules/Chip.stories.tsx

@@ -5,6 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Chip } from '@/components/molecules/chip/Chip';
 import { PlaceholderReplace } from '@iota/apps-ui-icons';
+import { ChipType } from '@/lib';
 
 const meta: Meta<typeof Chip> = {
     component: Chip,
@@ -25,6 +26,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     args: {
         label: 'Label',
+        type: ChipType.Outline,
     },
     argTypes: {
         label: {
@@ -33,6 +35,9 @@ export const Default: Story = {
         showClose: {
             control: 'boolean',
         },
+        type: {
+            control: 'select',
+        },
         selected: {
             control: 'boolean',
         },

package/src/storybook/stories/molecules/Input.stories.tsx

@@ -4,10 +4,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Input, InputType } from '@/lib/components/molecules/input';
-import { PlaceholderReplace } from '@iota/apps-ui-icons';
+import { CheckmarkFilled, Close, Loader2, PlaceholderReplace } from '@iota/apps-ui-icons';
 import type { ComponentProps } from 'react';
 import { useCallback, useEffect, useState } from 'react';
-import { ButtonPill } from '@/lib/components/atoms/button';
+import { ButtonPill, ButtonUnstyled } from '@/lib/components/atoms/button';
+import classNames from 'classnames';
 
 type CustomStoryProps = {
     withLeadingIcon?: boolean;
@@ -160,3 +161,79 @@ export const NumericFormatInput: Story = {
         );
     },
 };
+
+export const NameResolverInput: Story = {
+    args: {
+        type: InputType.Text,
+    },
+    render: ({ type }) => {
+        const [value, setValue] = useState<string>('');
+        const { address, isLoading, error } = useNameResolver(value);
+
+        const ICON_COLORS =
+            'text-iota-primary-30 dark:text-iota-primary-70 names:text-names-primary-70';
+
+        return (
+            <Input
+                type={type}
+                placeholder="@name"
+                label="Name Resolver"
+                caption="Enter the name to resolve"
+                value={value}
+                onInput={(e) => setValue(e.currentTarget.value)}
+                supportingValue={address}
+                errorMessage={error || undefined}
+                trailingElement={
+                    <>
+                        {value.length > 0 && (
+                            <ButtonUnstyled
+                                className="input-icon-color"
+                                onClick={() => setValue('')}
+                                tabIndex={-1}
+                            >
+                                <Close className="h-5 w-5" />
+                            </ButtonUnstyled>
+                        )}
+                        {isLoading ? (
+                            <Loader2 className={classNames('h-5 w-5 animate-spin', ICON_COLORS)} />
+                        ) : address ? (
+                            <CheckmarkFilled className={classNames('h-5 w-5', ICON_COLORS)} />
+                        ) : null}
+                    </>
+                }
+            />
+        );
+    },
+};
+
+function useNameResolver(name: string) {
+    const [address, setAddress] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        setAddress(null);
+        setError(null);
+
+        if (!name) {
+            setIsLoading(false);
+            return;
+        }
+
+        setIsLoading(true);
+
+        const id = setTimeout(() => {
+            if (name.includes('@')) {
+                setAddress(`0x3c14…187b`);
+            } else {
+                setError("Only names with '@' are supported");
+                setAddress(null);
+            }
+            setIsLoading(false);
+        }, 1500);
+
+        return () => clearTimeout(id);
+    }, [name]);
+
+    return { address, isLoading, error };
+}

package/src/storybook/stories/molecules/Search.stories.tsx

@@ -49,10 +49,10 @@ const meta: Meta<typeof Search> = {
                                     suggestion.supportingText ? 'justify-between' : 'justify-start',
                                 )}
                             >
-                                <span className="text-body-lg text-neutral-10 dark:text-neutral-92">
+                                <span className="text-body-lg text-iota-neutral-10 names:text-names-neutral-92 dark:text-iota-neutral-92">
                                     {suggestion.label}
                                 </span>
-                                <span className="text-body-md text-neutral-40 dark:text-neutral-60">
+                                <span className="text-body-md text-iota-neutral-40 names:text-names-neutral-60 dark:text-iota-neutral-60">
                                     {suggestion.supportingText}
                                 </span>
                             </div>

package/src/storybook/stories/molecules/TableCell.stories.tsx

@@ -38,7 +38,7 @@ const Avatar = () => {
             viewBox="0 0 33 32"
             fill="none"
         >
-            <circle cx="16.5" cy="16" r="16" className="fill-primary-40" />
+            <circle cx="16.5" cy="16" r="16" className="fill-iota-primary-40" />
         </svg>
     );
 };

package/src/storybook/stories/molecules/TextArea.stories.tsx

@@ -71,7 +71,7 @@ export const Default: Story = {
                     isVisibilityToggleEnabled
                     {...storyProps}
                 />
-                <div className="flex w-full justify-end">
+                <div className="flex w-full justify-end pt-2">
                     <Button onClick={() => onSubmit()} text="Submit" />
                 </div>
             </div>

package/src/storybook/stories/organisms/Dialog.stories.tsx

@@ -63,36 +63,62 @@ export const RightDialog: Story = {
                 <Button size={ButtonSize.Small} text="Open Dialog" onClick={() => setOpen(true)} />
                 <Dialog open={open} onOpenChange={setOpen}>
                     <DialogContent showCloseOnOverlay position={DialogPosition.Right}>
-                        <div className="h-full w-full">
-                            <Header
-                                title="Connect Ledger Wallet"
-                                titleCentered
-                                onClose={() => setOpen(false)}
-                                onBack={() => setOpen(false)}
-                            />
-                            <div className="flex h-full w-full flex-col items-center justify-center">
-                                <DialogBody>
-                                    <div className="flex flex-col items-center gap-2">
-                                        <div className="mt-4.5">Logo</div>
-                                        <div className="mt-4.5 break-words text-center">
-                                            Connect your ledger to your computer, unlock it, and
-                                            launch the IOTA app. Click Continue when done.
-                                        </div>
-                                        <div className="mt-4.5">
-                                            {' '}
-                                            Need more help? View tutorial.
-                                        </div>
+                        <Header
+                            title="Connect Ledger Wallet"
+                            titleCentered
+                            onClose={() => setOpen(false)}
+                            onBack={() => setOpen(false)}
+                        />
+                        <div className="flex h-full w-full flex-col items-center justify-center">
+                            <DialogBody>
+                                <div className="flex flex-col items-center gap-2">
+                                    <div className="mt-4.5">Logo</div>
+                                    <div className="mt-4.5 break-words text-center">
+                                        Connect your ledger to your computer, unlock it, and launch
+                                        the IOTA app. Click Continue when done.
+                                    </div>
+                                    <div className="mt-4.5"> Need more help? View tutorial.</div>
+                                </div>
+                            </DialogBody>
+                            <div className="flex w-full flex-row justify-center gap-2 px-md--rs pb-md--rs pt-sm--rs">
+                                <Button
+                                    size={ButtonSize.Small}
+                                    type={ButtonType.Outlined}
+                                    text="Cancel"
+                                    onClick={() => setOpen(false)}
+                                />
+                                <Button size={ButtonSize.Small} text="Connect" />
+                            </div>
+                        </div>
+                    </DialogContent>
+                </Dialog>
+                <Dialog open={open} onOpenChange={setOpen}>
+                    <DialogContent showCloseOnOverlay position={DialogPosition.Right}>
+                        <Header
+                            title="Connect Ledger Wallet"
+                            titleCentered
+                            onClose={() => setOpen(false)}
+                            onBack={() => setOpen(false)}
+                        />
+                        <div className="flex h-full w-full flex-col items-center justify-center">
+                            <DialogBody>
+                                <div className="flex flex-col items-center gap-2">
+                                    <div className="mt-4.5">Logo</div>
+                                    <div className="mt-4.5 break-words text-center">
+                                        Connect your ledger to your computer, unlock it, and launch
+                                        the IOTA app. Click Continue when done.
                                     </div>
-                                </DialogBody>
-                                <div className="flex w-full flex-row justify-center gap-2 px-md--rs pb-md--rs pt-sm--rs">
-                                    <Button
-                                        size={ButtonSize.Small}
-                                        type={ButtonType.Outlined}
-                                        text="Cancel"
-                                        onClick={() => setOpen(false)}
-                                    />
-                                    <Button size={ButtonSize.Small} text="Connect" />
+                                    <div className="mt-4.5"> Need more help? View tutorial.</div>
                                 </div>
+                            </DialogBody>
+                            <div className="flex w-full flex-row justify-center gap-2 px-md--rs pb-md--rs pt-sm--rs">
+                                <Button
+                                    size={ButtonSize.Small}
+                                    type={ButtonType.Outlined}
+                                    text="Cancel"
+                                    onClick={() => setOpen(false)}
+                                />
+                                <Button size={ButtonSize.Small} text="Connect" />
                             </div>
                         </div>
                     </DialogContent>