@iota/apps-ui-kit 0.7.0 → 0.7.2

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.7.0",
+  "version": "0.7.2",
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "github.com:iotaledger/iota.git"
@@ -29,7 +30,7 @@
     "classnames": "^2.5.1",
     "lodash.merge": "^4.6.2",
     "react-number-format": "^5.2.2",
-    "@iota/apps-ui-icons": "0.4.0"
+    "@iota/apps-ui-icons": "0.4.1"
   },
   "peerDependencies": {
     "react": "^18 || ^19",

package/src/lib/components/atoms/button/Button.tsx

@@ -87,6 +87,7 @@ export function Button({
                 backgroundColors,
                 fullWidth && 'w-full',
                 !iconAfterText ? 'flex-row' : 'flex-row-reverse',
+                `btn btn-${type}`,
             )}
             disabled={disabled}
             tabIndex={tabIndex}

package/src/lib/components/atoms/button-segment/ButtonSegment.tsx

@@ -77,7 +77,7 @@ export function ButtonSegment({
         <ButtonUnstyled
             onClick={onClick}
             className={cx(
-                'enabled:state-layer relative flex items-center disabled:opacity-40',
+                'enabled:state-layer-secondary relative flex items-center disabled:opacity-40',
                 backgroundColors,
                 textColors,
                 padding,

package/src/lib/components/atoms/checkbox/Checkbox.tsx

@@ -101,7 +101,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
                         'peer-[&:is(:checked,:indeterminate)]:checkbox-border-checked',
                         'peer-[&:is(:checked,:indeterminate)]:checkbox-bg-checked',
                         'peer-[&:is(:checked,:indeterminate)]:checkbox-text-checked',
-                        'peer-disabled:peer-[&:is(:checked,:indeterminate)]:[&_svg]:hidden',
                         'peer-disabled:peer-[&:not(:checked,:indeterminate)]:checkbox-border-color-disabled',
                         'peer-disabled:peer-[&:is(:checked,:indeterminate)]:checkbox-border-color-disabled-checked',
                         'peer-disabled:peer-[&:is(:checked,:indeterminate)]:checkbox-bg-color-disabled-checked',

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

@@ -23,3 +23,4 @@ export * from './placeholder';
 export * from './skeleton';
 export * from './video';
 export * from './toggle';
+export * from './secondary-text';

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

@@ -69,7 +69,7 @@ export function ListItem({
                     !isDisabled && onClick ? 'cursor-pointer' : 'cursor-default',
                     {
                         'list-item-highlight-bg': isHighlighted,
-                        'state-layer': !isDisabled,
+                        'state-layer-secondary': !isDisabled,
                     },
                 )}
             >

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

@@ -40,7 +40,7 @@ function RadioButton({
         >
             <div
                 className={cx('relative flex h-10 w-10 items-center justify-center rounded-full', {
-                    'state-layer': !isDisabled,
+                    'state-layer-secondary': !isDisabled,
                 })}
             >
                 <input

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

@@ -2,41 +2,26 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
+import React from 'react';
 
-interface SkeletonLoaderProps {
-    /**
-     * Width class for the skeleton div.
-     */
-    widthClass?: string;
-    /**
-     * Height class for the skeleton div.
-     */
-    heightClass?: string;
+interface SkeletonLoaderProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {
     /**
      * 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',
+    className,
     hasSecondaryColors,
-    isRounded = true,
 }: React.PropsWithChildren<SkeletonLoaderProps>): React.JSX.Element {
     return (
         <div
             className={cx(
-                'animate-pulse rounded-full',
-                widthClass,
-                heightClass,
-                isRounded && 'rounded-full',
+                'h-3 w-full animate-pulse rounded-full',
                 hasSecondaryColors ? 'skeleton-secondary-bg' : 'skeleton-bg',
+                className,
             )}
         >
             {children}

package/src/lib/components/index.ts

@@ -1,8 +1,6 @@
 // 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/chip/Chip.tsx

@@ -1,18 +1,22 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { ButtonUnstyled } from '@/components/atoms/button';
+import { Close } from '@iota/apps-ui-icons';
 import cx from 'classnames';
-import { ChipSize, ChipState } from './chip.enums';
 import {
-    BORDER_CLASSES,
     BACKGROUND_CLASSES,
+    BG_SELECTED_OUTLINE,
+    BG_SELECTED_OVERLAY,
+    BORDER_CLASSES,
+    CLOSE_ICON_INTERACTIVE,
+    FOCUS_CLASSES,
     ROUNDED_CLASS,
     STATE_LAYER_CLASSES,
     TEXT_COLOR,
-    FOCUS_CLASSES,
+    TEXT_COLOR_SELECTED_OUTLINE,
 } from './chip.classes';
-import { ButtonUnstyled } from '@/components/atoms/button';
-import { Close } from '@iota/apps-ui-icons';
+import { ChipSize, ChipType } from './chip.enums';
 
 interface ChipProps {
     /**
@@ -51,6 +55,10 @@ interface ChipProps {
      * The button is disabled or not.
      */
     disabled?: boolean;
+    /**
+     * The type of the Chip
+     */
+    type?: ChipType;
     /**
      * The size of the chip.
      */
@@ -59,8 +67,9 @@ interface ChipProps {
 
 export function Chip({
     label,
-    showClose,
+    type = ChipType.Outline,
     selected,
+    showClose,
     onClose,
     onClick,
     avatar,
@@ -69,16 +78,30 @@ export function Chip({
     disabled,
     size = ChipSize.Default,
 }: ChipProps) {
-    const chipState = selected ? ChipState.Selected : ChipState.Default;
+    const isOutlineSelected = type === ChipType.Outline && selected;
+    const outlineStyle = selected
+        ? type === ChipType.Outline
+            ? 'outline-transparent names:outline-names-neutral-20'
+            : 'chip-outline-color'
+        : 'outline-transparent';
+
+    const focusOutlineStyle = cx(
+        'group-focus:chip-outline-color-active',
+        type === ChipType.Outline && 'names:group-focus:outline-transparent',
+    );
+    const selectedOverlayBg =
+        selected && !disabled && type !== ChipType.Outline ? BG_SELECTED_OVERLAY : '';
+
     return (
         <ButtonUnstyled
             onClick={onClick}
             className={cx(
-                'border transition-all duration-500 ease-in-out disabled:opacity-40',
+                'group border disabled:opacity-40',
                 ROUNDED_CLASS,
-                BACKGROUND_CLASSES[chipState],
-                BORDER_CLASSES[chipState],
-                FOCUS_CLASSES,
+                isOutlineSelected
+                    ? BG_SELECTED_OUTLINE[ChipType.Outline]
+                    : BACKGROUND_CLASSES[type],
+                selected ? 'border-transparent' : BORDER_CLASSES[type],
             )}
             disabled={disabled}
         >
@@ -87,10 +110,16 @@ export function Chip({
                     'flex h-full w-full flex-row items-center gap-x-2',
                     avatar ? 'py-xxs' : 'py-[6px]',
                     avatar ? 'pl-xxs' : leadingElement ? 'pl-xs' : 'pl-sm',
+                    showClose ? 'pr-xs' : 'pr-sm',
                     ROUNDED_CLASS,
+                    isOutlineSelected
+                        ? TEXT_COLOR_SELECTED_OUTLINE[ChipType.Outline]
+                        : TEXT_COLOR[type],
+                    outlineStyle,
+                    !disabled && focusOutlineStyle,
                     !disabled && STATE_LAYER_CLASSES,
-                    showClose ? 'pr-xs' : 'pr-sm',
-                    TEXT_COLOR[chipState],
+                    FOCUS_CLASSES,
+                    selectedOverlayBg,
                 )}
             >
                 {avatar ?? leadingElement}
@@ -99,12 +128,17 @@ export function Chip({
                 </span>
                 {trailingElement}
                 {showClose && (
-                    <ButtonUnstyled
+                    <div
                         onClick={onClose}
-                        className="cursor-pointer [&_svg]:h-4 [&_svg]:w-4"
+                        className={cx(disabled ? 'cursor-default' : 'cursor-pointer')}
                     >
-                        <Close />
-                    </ButtonUnstyled>
+                        <Close
+                            className={cx(
+                                'h-4 w-4 transition-opacity duration-150',
+                                disabled ? '' : selected ? 'opacity-100' : CLOSE_ICON_INTERACTIVE,
+                            )}
+                        />
+                    </div>
                 )}
             </span>
         </ButtonUnstyled>

package/src/lib/components/molecules/chip/chip.classes.ts

@@ -1,32 +1,54 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ChipState } from './chip.enums';
+import { ChipType } from './chip.enums';
 
 export const ROUNDED_CLASS = 'rounded-full';
 
-export const BACKGROUND_CLASSES: Record<ChipState, string> = {
-    [ChipState.Default]: 'bg-transparent',
-    [ChipState.Selected]: 'chip-bg-selected',
+export const BACKGROUND_CLASSES: Record<ChipType, string> = {
+    [ChipType.Outline]: 'bg-transparent',
+    [ChipType.Elevated]: 'chip-bg-elevated',
+    [ChipType.Success]: 'bg-success-surface',
+    [ChipType.Brand]: 'chip-bg-brand',
+    [ChipType.Error]: 'bg-error-surface',
 };
 
-const STATE_LAYER_OUTLINE =
-    'outline outline-1 outline-transparent hover:outline-shader-primary-light-8 active:outline-shader-primary-light-12 dark:hover:outline-shader-primary-dark-8 dark:active:outline-shader-primary-dark-12';
+export const STATE_LAYER_OUTLINE =
+    'outline outline-1 hover:chip-outline-color-hover active:chip-outline-color-active';
 
-const STATE_LAYER_BG_CLASSES =
-    'hover:bg-shader-primary-light-8 active:bg-shader-primary-light-12 dark:hover:bg-shader-primary-dark-8 dark:active:bg-shader-primary-dark-12 focus:bg-shader-primary-light-12 dark:focus:bg-shader-primary-dark-12';
+export const STATE_LAYER_BG_CLASSES =
+    'hover:chip-bg-color-hover active:chip-bg-color-active group-focus:chip-bg-color-focus';
 
 export const STATE_LAYER_CLASSES = `${STATE_LAYER_OUTLINE} ${STATE_LAYER_BG_CLASSES}`;
 
-export const BORDER_CLASSES: Record<ChipState, string> = {
-    [ChipState.Default]: 'chip-border-default',
-    [ChipState.Selected]: 'border-transparent',
+export const BG_SELECTED_OUTLINE: Partial<Record<ChipType, string>> = {
+    [ChipType.Outline]: 'chip-bg-selected-outline',
 };
 
-export const TEXT_COLOR: Record<ChipState, string> = {
-    [ChipState.Default]: 'chip-text-default',
-    [ChipState.Selected]: 'chip-text-selected',
+export const BG_SELECTED_OVERLAY = 'chip-bg-selected-overlay';
+
+export const TEXT_COLOR_SELECTED_OUTLINE: Partial<Record<ChipType, string>> = {
+    [ChipType.Outline]: 'chip-text-secondary',
+};
+
+export const BORDER_CLASSES: Record<ChipType, string> = {
+    [ChipType.Outline]: 'chip-border-default',
+    [ChipType.Elevated]: 'border-transparent',
+    [ChipType.Success]: 'border-success-surface',
+    [ChipType.Brand]: 'chip-border-color-brand',
+    [ChipType.Error]: 'border-error-surface',
+};
+
+export const TEXT_COLOR: Record<ChipType, string> = {
+    [ChipType.Outline]: 'chip-text-default',
+    [ChipType.Elevated]: 'chip-text-secondary',
+    [ChipType.Success]: 'chip-text-secondary',
+    [ChipType.Brand]: 'chip-text-brand',
+    [ChipType.Error]: 'chip-text-secondary',
 };
 
 export const FOCUS_CLASSES =
     'focus-visible:shadow-[0_0_0_2px] focus-visible:chip-focus-ring focus-visible:outline-none';
+
+export const CLOSE_ICON_INTERACTIVE =
+    'chip-close-icon-opacity group-hover:opacity-100 group-focus:opacity-100 group-active:opacity-100';

package/src/lib/components/molecules/chip/chip.enums.ts

@@ -1,9 +1,12 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export enum ChipState {
-    Default = 'default',
-    Selected = 'selected',
+export enum ChipType {
+    Outline = 'outline',
+    Elevated = 'elevated',
+    Success = 'success',
+    Brand = 'brand',
+    Error = 'error',
 }
 
 export enum ChipSize {

package/src/lib/components/molecules/input/Input.tsx

@@ -23,7 +23,7 @@ export interface BaseInputProps extends InputWrapperProps {
     /**
      * A leading icon that is shown before the input
      */
-    leadingIcon?: React.JSX.Element;
+    leadingIcon?: React.ReactNode;
     /**
      * Supporting text that is shown at the end of the input component.
      */
@@ -35,7 +35,7 @@ export interface BaseInputProps extends InputWrapperProps {
     /**
      * Trailing element that is shown after the input
      */
-    trailingElement?: React.JSX.Element;
+    trailingElement?: React.ReactNode;
     /**
      * Is the content of the input visible
      */
@@ -44,6 +44,10 @@ export interface BaseInputProps extends InputWrapperProps {
      * Value of the input
      */
     value?: string | number;
+    /**
+     * Text that is shown below the value of the input.
+     */
+    supportingValue?: string | null;
     /**
      * Default value of the input
      */
@@ -72,6 +76,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function InputComp
         trailingElement,
         isContentVisible,
         value,
+        supportingValue,
         defaultValue,
         onClearInput,
         isVisibilityToggleEnabled,
@@ -111,26 +116,38 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function InputComp
             required={inputProps.required}
         >
             <div
-                className={cx('relative flex flex-row items-center gap-x-3', BORDER_CLASSES)}
+                className={cx(
+                    'input-container relative flex flex-row items-center gap-x-3',
+                    BORDER_CLASSES,
+                )}
                 onClick={focusOnInput}
                 ref={inputWrapperRef}
             >
                 {leadingIcon && <span className="input-icon-color">{leadingIcon}</span>}
-                <InputElement
-                    {...inputProps}
-                    inputRef={forwardRef}
-                    value={value}
-                    type={
-                        type === InputType.Password && isInputContentVisible ? InputType.Text : type
-                    }
-                    disabled={disabled}
-                    className={cx(
-                        INPUT_CLASSES,
-                        INPUT_TEXT_CLASSES,
-                        INPUT_PLACEHOLDER_CLASSES,
-                        INPUT_NUMBER_CLASSES,
+                <div className="flex flex-1 flex-col items-start">
+                    <InputElement
+                        {...inputProps}
+                        inputRef={forwardRef}
+                        value={value}
+                        type={
+                            type === InputType.Password && isInputContentVisible
+                                ? InputType.Text
+                                : type
+                        }
+                        disabled={disabled}
+                        className={cx(
+                            INPUT_CLASSES,
+                            INPUT_TEXT_CLASSES,
+                            INPUT_PLACEHOLDER_CLASSES,
+                            INPUT_NUMBER_CLASSES,
+                        )}
+                    />
+                    {supportingValue && (
+                        <span className="text-label-md text-iota-neutral-60 names:text-iota-neutral-60 dark:text-iota-neutral-40">
+                            {supportingValue}
+                        </span>
                     )}
-                />
+                </div>
 
                 {supportingText && <SecondaryText>{supportingText}</SecondaryText>}
                 <InputTrailingElement

package/src/lib/components/molecules/input/TextArea.tsx

@@ -62,6 +62,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextFieldBaseProps>(func
         isResizeEnabled,
         required,
         isContentVisible,
+        defaultValue,
         ...textareaProps
     },
     ref,
@@ -93,16 +94,16 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextFieldBaseProps>(func
                     required={required}
                     ref={ref}
                     className={cx(
-                        'peer block min-h-[50px]',
+                        'text-area-container peer block min-h-[50px]',
                         BORDER_CLASSES,
                         INPUT_CLASSES,
                         INPUT_TEXT_CLASSES,
                         INPUT_PLACEHOLDER_CLASSES,
                         isInputContentVisible && isResizeEnabled ? 'resize-y' : 'resize-none',
-                        !isInputContentVisible &&
-                            'not-visible select-none text-transparent dark:text-transparent',
+                        !isInputContentVisible && 'not-visible select-none text-transparent',
                     )}
-                    value={isInputContentVisible ? value : ''}
+                    defaultValue={isInputContentVisible && defaultValue ? defaultValue : undefined}
+                    value={isInputContentVisible && value ? value : undefined}
                     {...textareaProps}
                 />
                 {!isInputContentVisible && (

package/src/lib/components/molecules/navbar-item/NavbarItem.tsx

@@ -10,7 +10,6 @@ export interface NavbarItemProps {
      * The type of the navbar item.
      */
     type?: NavbarItemType;
-
     /**
      * The icon of the navbar item.
      */

package/src/lib/components/molecules/navbar-item/NavbarItemHorizontal.tsx

@@ -29,7 +29,7 @@ export function NavbarItemHorizontal({
     const backgroundColors = isSelected && SELECTED_BACKGROUND;
     const badgePositionClasses = text ? BADGE_WITH_TEXT : BADGE_WITHOUT_TEXT;
     const textClasses = isSelected ? SELECTED_TEXT : UNSELECTED_TEXT;
-    const disabledClasses = isDisabled ? 'cursor-not-allowed opacity-60' : 'state-layer';
+    const disabledClasses = isDisabled ? 'cursor-not-allowed opacity-60' : 'state-layer-secondary';
     const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
         if (isDisabled) {
             e.preventDefault();

package/src/lib/components/molecules/navbar-item/NavbarItemVertical.tsx

@@ -25,7 +25,7 @@ export function NavbarItemVertical({
     const textClasses = isSelected ? SELECTED_TEXT : UNSELECTED_TEXT;
     const disabledClasses = isDisabled
         ? 'cursor-not-allowed opacity-60'
-        : 'state-layer cursor-pointer ';
+        : 'state-layer-secondary cursor-pointer ';
     const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
         if (isDisabled) {
             e.preventDefault();

package/src/lib/components/molecules/select/Select.tsx

@@ -3,7 +3,7 @@
 
 import { TriangleDown } from '@iota/apps-ui-icons';
 import cx from 'classnames';
-import { forwardRef, useEffect, useState } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import { Dropdown } from '../dropdown/Dropdown';
 import { SecondaryText } from '@/components/atoms/secondary-text';
 import { InputWrapper, LabelHtmlTag } from '../input/InputWrapper';
@@ -88,16 +88,35 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
     ) => {
         const [isOpen, setIsOpen] = useState<boolean>(false);
         const selectedValue = findValueByProps(value, options);
+        const wrapperRef = useRef<HTMLDivElement>(null);
 
         const selectorText = selectedValue || placeholder;
         const selectPadding = size === SelectSize.Small ? 'px-sm' : 'px-md';
         const textSize = size === SelectSize.Small ? 'text-body-md' : 'text-body-lg';
+
         useEffect(() => {
             if (disabled && isOpen) {
                 closeDropdown();
             }
         }, [disabled, isOpen]);
 
+        useEffect(() => {
+            if (!isOpen) return;
+
+            const handleClickOutside = (e: MouseEvent) => {
+                const target = e.target as Node;
+                if (wrapperRef.current && !wrapperRef.current.contains(target)) {
+                    closeDropdown();
+                }
+            };
+
+            document.addEventListener('mousedown', handleClickOutside);
+
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [isOpen]);
+
         function findValueByProps(value: SelectProps['value'], options: SelectOption[] = []) {
             return (
                 options.find((option) =>
@@ -123,6 +142,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
         function closeDropdown() {
             setIsOpen(false);
         }
+
         return (
             <InputWrapper
                 label={label}
@@ -131,13 +151,13 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
                 errorMessage={errorMessage}
                 labelHtmlTag={LabelHtmlTag.Div}
             >
-                <div className="relative flex w-full flex-col">
+                <div className="relative flex w-full flex-col" ref={wrapperRef}>
                     <ButtonUnstyled
                         ref={ref}
                         onClick={onSelectorClick}
                         disabled={disabled}
                         className={cx(
-                            'select-border-color focus-visible:enabled:select-border-focus-color active:enabled:select-border-focus-color group-[.errored]:select-border-error-color group-[.opened]:select-border-focus-color [&:is(:focus,_:focus-visible,_:active)]:enabled:select-border-focus-color hover:enabled:select-border-hover-color flex flex-row items-center gap-x-3 rounded-lg border py-sm disabled:cursor-not-allowed [&_svg]:h-5 [&_svg]:w-5',
+                            'select-container select-border-color focus-visible:enabled:select-border-focus-color active:enabled:select-border-focus-color group-[.errored]:select-border-error-color group-[.opened]:select-border-focus-color [&:is(:focus,_:focus-visible,_:active)]:enabled:select-border-focus-color hover:enabled:select-border-hover-color flex flex-row items-center gap-x-3 rounded-lg border py-sm disabled:cursor-not-allowed [&_svg]:h-5 [&_svg]:w-5',
                             selectPadding,
                         )}
                     >
@@ -171,7 +191,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
 
                     {isOpen && (
                         <div
-                            className="fixed left-0 top-0 z-[49] h-screen w-screen bg-transparent"
+                            className="fixed left-0 top-0 z-[49] bg-transparent"
                             onClick={closeDropdown}
                         />
                     )}