@iota/apps-ui-kit 0.2.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.2.1",
+  "version": "0.5.0",
   "repository": {
     "type": "git",
     "url": "github.com:iotaledger/iota.git"
@@ -30,7 +30,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-number-format": "^5.2.2",
-    "@iota/apps-ui-icons": "0.2.1"
+    "@iota/apps-ui-icons": "0.3.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.0",
@@ -54,7 +54,7 @@
     "storybook-dark-mode": "^4.0.2",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.5.3",
-    "vite": "^5.3.3",
+    "vite": "^5.4.12",
     "vite-plugin-dts": "^4.3.0",
     "vite-tsconfig-paths": "^4.2.0"
   },

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

@@ -7,18 +7,27 @@ export const BACKGROUND_COLORS = {
     [BadgeType.PrimarySolid]: 'bg-primary-30',
     [BadgeType.Neutral]: 'bg-neutral-92 dark:bg-neutral-12',
     [BadgeType.PrimarySoft]: 'bg-primary-90 dark:bg-primary-10',
+    [BadgeType.Success]: 'bg-tertiary-90 dark:bg-tertiary-10',
+    [BadgeType.Warning]: 'bg-warning-90 dark:bg-warning-20',
+    [BadgeType.Error]: 'bg-error-90 dark:bg-error-10',
 };
 
 export const TEXT_COLORS: Record<BadgeType, string> = {
     [BadgeType.PrimarySolid]: 'text-primary-100',
     [BadgeType.Neutral]: 'text-neutral-10 dark:text-neutral-92',
     [BadgeType.PrimarySoft]: 'text-primary-20 dark:text-primary-90',
+    [BadgeType.Success]: 'text-tertiary-20 dark:text-tertiary-90',
+    [BadgeType.Warning]: 'text-warning-10 dark:text-warning-90',
+    [BadgeType.Error]: 'text-error-20 dark:text-error-90',
 };
 
 export const BORDER_COLORS: Record<BadgeType, string> = {
     [BadgeType.PrimarySolid]: 'border-primary-30',
     [BadgeType.Neutral]: 'border-neutral-92 dark:border-neutral-12',
     [BadgeType.PrimarySoft]: 'border-primary-90 dark:border-primary-10',
+    [BadgeType.Success]: 'border-tertiary-90 dark:border-tertiary-10',
+    [BadgeType.Warning]: 'border-warning-90 dark:border-warning-20',
+    [BadgeType.Error]: 'border-error-90 dark:border-error-10',
 };
 
 export const BADGE_TEXT_CLASS = 'text-label-md';

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

@@ -5,4 +5,7 @@ export enum BadgeType {
     Neutral = 'neutral',
     PrimarySolid = 'primary-solid',
     PrimarySoft = 'primary-fill',
+    Success = 'success',
+    Warning = 'warning',
+    Error = 'error',
 }

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

@@ -18,7 +18,7 @@ export const BACKGROUND_COLORS: Record<ButtonType, string> = {
     [ButtonType.Secondary]: 'bg-neutral-90 dark:bg-neutral-20',
     [ButtonType.Ghost]: 'bg-transparent',
     [ButtonType.Outlined]: 'bg-transparent border border-neutral-50',
-    [ButtonType.Destructive]: 'bg-error-90',
+    [ButtonType.Destructive]: 'bg-error-90 dark:bg-error-20',
 };
 
 export const DISABLED_BACKGROUND_COLORS: Record<ButtonType, string> = {
@@ -26,7 +26,7 @@ export const DISABLED_BACKGROUND_COLORS: Record<ButtonType, string> = {
     [ButtonType.Secondary]: 'bg-neutral-90 dark:bg-neutral-20',
     [ButtonType.Ghost]: 'bg-transparent',
     [ButtonType.Outlined]: 'bg-transparent border border-neutral-50',
-    [ButtonType.Destructive]: 'bg-error-90',
+    [ButtonType.Destructive]: 'bg-error-90 dark:bg-error-20',
 };
 
 const DEFAULT_TEXT_COLORS: string = 'text-neutral-10 dark:text-neutral-92';
@@ -36,7 +36,7 @@ export const TEXT_COLORS: Record<ButtonType, string> = {
     [ButtonType.Secondary]: DEFAULT_TEXT_COLORS,
     [ButtonType.Ghost]: DEFAULT_TEXT_COLORS,
     [ButtonType.Outlined]: DEFAULT_TEXT_COLORS,
-    [ButtonType.Destructive]: 'text-error-20',
+    [ButtonType.Destructive]: 'text-error-20 dark:text-error-90',
 };
 
 export const TEXT_CLASSES: Record<ButtonSize, string> = {
@@ -49,5 +49,5 @@ export const TEXT_COLOR_DISABLED: Record<ButtonType, string> = {
     [ButtonType.Secondary]: DEFAULT_TEXT_COLORS,
     [ButtonType.Ghost]: DEFAULT_TEXT_COLORS,
     [ButtonType.Outlined]: DEFAULT_TEXT_COLORS,
-    [ButtonType.Destructive]: 'text-error-20',
+    [ButtonType.Destructive]: 'text-error-20 dark:text-error-90',
 };

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

@@ -20,3 +20,4 @@ export * from './visual-asset-card';
 export * from './loading-indicator';
 export * from './placeholder';
 export * from './skeleton';
+export * from './toggle';

package/src/lib/components/atoms/info-box/InfoBox.tsx

@@ -17,7 +17,7 @@ export interface InfoBoxProps {
     /**
      * The supporting text of the info box (optional).
      */
-    supportingText?: string;
+    supportingText?: React.ReactNode;
     /**
      * The type of the info box.
      */

package/src/lib/components/atoms/info-box/infoBox.classes.ts

@@ -4,11 +4,16 @@
 import { InfoBoxType } from './infoBox.enums';
 
 export const ICON_COLORS: Record<InfoBoxType, string> = {
-    [InfoBoxType.Default]: 'bg-neutral-96 dark:bg-neutral-12 text-neutral-10 dark:text-neutral-92',
+    [InfoBoxType.Default]: 'bg-primary-90 dark:bg-primary-10 text-primary-20 dark:text-primary-90',
     [InfoBoxType.Error]: 'bg-error-90 dark:bg-error-10 text-error-20 dark:text-error-90',
+    [InfoBoxType.Success]:
+        'bg-tertiary-90 dark:bg-tertiary-10 text-tertiary-20 dark:text-tertiary-90',
+    [InfoBoxType.Warning]: 'bg-warning-90 dark:bg-warning-20 text-warning-10 dark:text-warning-90',
 };
 
 export const BACKGROUND_COLORS: Record<InfoBoxType, string> = {
-    [InfoBoxType.Default]: 'bg-neutral-96 dark:bg-neutral-12',
+    [InfoBoxType.Default]: 'bg-primary-90 dark:bg-primary-10',
     [InfoBoxType.Error]: 'bg-error-90 dark:bg-error-10',
+    [InfoBoxType.Success]: 'bg-tertiary-90 dark:bg-tertiary-10',
+    [InfoBoxType.Warning]: 'bg-warning-90 dark:bg-warning-20',
 };

package/src/lib/components/atoms/info-box/infoBox.enums.ts

@@ -4,6 +4,8 @@
 export enum InfoBoxType {
     Default = 'default',
     Error = 'error',
+    Success = 'success',
+    Warning = 'warning',
 }
 
 export enum InfoBoxStyle {

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

@@ -6,9 +6,13 @@ 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-neutral-80 dark:bg-neutral-30',
+    [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

@@ -4,4 +4,6 @@
 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';

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

@@ -9,11 +9,13 @@ import { TOOLTIP_POSITION } from './tooltip.classes';
 interface TooltipProps {
     text: string;
     position?: TooltipPosition;
+    maxWidth?: string;
 }
 
 export function Tooltip({
     text,
     position = TooltipPosition.Top,
+    maxWidth = 'max-w-[200px]',
     children,
 }: PropsWithChildren<TooltipProps>): React.JSX.Element {
     const tooltipPositionClass = TOOLTIP_POSITION[position];
@@ -22,8 +24,9 @@ export function Tooltip({
             {children}
             <div
                 className={cx(
-                    'absolute z-[999] hidden w-max max-w-[200px] rounded bg-neutral-80 p-xs text-neutral-10 opacity-0 transition-opacity duration-300 group-hover:block group-hover:opacity-100 group-focus:opacity-100 dark:bg-neutral-30 dark:text-neutral-92',
+                    'absolute z-[999] hidden w-max rounded bg-neutral-80 p-xs text-neutral-10 opacity-0 transition-opacity duration-300 group-hover:block group-hover:opacity-100 group-focus:opacity-100 dark:bg-neutral-30 dark:text-neutral-92',
                     tooltipPositionClass,
+                    maxWidth,
                 )}
                 role="tooltip"
             >

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

@@ -3,8 +3,9 @@
 
 import { VisualAssetType } from './visualAssetCard.enums';
 import { ButtonUnstyled } from '../button';
-import { MoreHoriz } from '@iota/apps-ui-icons';
+import { MoreHoriz, PlaceholderReplace } from '@iota/apps-ui-icons';
 import cx from 'classnames';
+import { useState } from 'react';
 
 export interface VisualAssetCardProps {
     /**
@@ -51,6 +52,8 @@ export function VisualAssetCard({
     assetTitle,
     isHoverable = true,
 }: VisualAssetCardProps): React.JSX.Element {
+    const [imageError, setImageError] = useState(false);
+
     const handleIconClick = (event: React.MouseEvent<HTMLButtonElement>) => {
         onIconClick?.(event);
         event?.stopPropagation();
@@ -65,28 +68,33 @@ export function VisualAssetCard({
         >
             {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" />
+                <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>
-                    )}
-                    <div className="absolute bottom-0 flex items-center justify-center p-xs opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                        {assetTitle && (
-                            <span className="text-title-md text-neutral-100">{assetTitle}</span>
-                        )}
-                    </div>
-                </>
+            {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/molecules/address/Address.tsx

@@ -70,7 +70,7 @@ export function Address({
     function handleOpenClick(event: React.MouseEvent<HTMLButtonElement>) {
         event?.stopPropagation();
         if (externalLink) {
-            const newWindow = window.open(externalLink, '_blank', 'noopener,noreferrer');
+            const newWindow = window.open(externalLink, '_blank', 'noopener noreferrer');
             if (newWindow) newWindow.opener = null;
         } else {
             onOpen?.(event);

package/src/lib/components/molecules/card/CardAction.tsx

@@ -27,8 +27,10 @@ export function CardAction({
     buttonDisabled,
 }: CardActionProps) {
     function handleActionClick(event: React.MouseEvent) {
-        event?.stopPropagation();
-        onClick?.();
+        if (onClick) {
+            event.stopPropagation();
+            onClick();
+        }
     }
 
     if (type === CardActionType.Link) {

package/src/lib/components/molecules/card/CardBody.tsx

@@ -3,6 +3,7 @@
 import cx from 'classnames';
 
 import { ReactNode } from 'react';
+import { Tooltip, TooltipPosition } from '../../atoms';
 
 export type CardBodyProps = {
     title: string;
@@ -10,6 +11,8 @@ export type CardBodyProps = {
     clickableAction?: React.ReactNode;
     icon?: React.ReactNode;
     isTextTruncated?: boolean;
+    tooltipText?: string;
+    tooltipPosition?: TooltipPosition;
 };
 
 export function CardBody({
@@ -18,6 +21,8 @@ export function CardBody({
     clickableAction,
     icon,
     isTextTruncated,
+    tooltipText,
+    tooltipPosition,
 }: CardBodyProps) {
     const handleActionCardBodyClick = (event: React.MouseEvent) => {
         event?.stopPropagation();
@@ -40,7 +45,13 @@ export function CardBody({
                 >
                     {title}
                 </div>
-                {icon && <div className="flex items-center">{icon}</div>}
+                {tooltipText ? (
+                    <Tooltip text={tooltipText} position={tooltipPosition}>
+                        {icon}
+                    </Tooltip>
+                ) : (
+                    <div className="flex items-center">{icon}</div>
+                )}
                 {clickableAction && (
                     <div onClick={handleActionCardBodyClick} className="flex items-center">
                         {clickableAction}

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

@@ -15,6 +15,7 @@ export const IMAGE_VARIANT_CLASSES: { [key in ImageShape]: string } = {
 export const IMAGE_BG_CLASSES: { [key in ImageType]: string } = {
     [ImageType.Placeholder]: '',
     [ImageType.BgSolid]: 'bg-neutral-96 dark:bg-neutral-10',
+    [ImageType.BgWhite]: 'bg-white dark:bg-neutral-6',
     [ImageType.BgTransparent]: '',
 };
 

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

@@ -10,6 +10,7 @@ export enum CardType {
 export enum ImageType {
     Placeholder = 'placeholder',
     BgSolid = 'bg-solid',
+    BgWhite = 'bg-white',
     BgTransparent = 'bg-transparent',
 }
 

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

@@ -5,9 +5,9 @@ export const INPUT_CLASSES =
     'w-full bg-transparent text-body-lg caret-primary-30 dark:caret-primary-80 focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed';
 export const INPUT_TEXT_CLASSES = 'text-neutral-10 dark:text-neutral-92';
 export const INPUT_PLACEHOLDER_CLASSES =
-    ' enabled:placeholder:text-neutral-40/40  dark:placeholder:text-neutral-60/40 enabled:dark:placeholder:text-neutral-60/40';
+    'enabled:placeholder:text-neutral-40/40  dark:placeholder:text-neutral-60/40 enabled:dark:placeholder:text-neutral-60/40';
 export const BORDER_CLASSES =
-    'px-md py-sm rounded-lg border border-neutral-80 group-[.enabled]:cursor-text group-[.errored]:border-error-30 hover:group-[.enabled]:border-neutral-50  dark:border-neutral-60 dark:hover:border-neutral-60 dark:group-[.errored]:border-error-80 [&:has(input:focus)]:border-primary-30 [&:has(input:focus)]:dark:border-primary-80';
+    'px-md py-sm rounded-lg border border-neutral-80 group-[.enabled]:cursor-text group-[.errored]:border-error-30 hover:group-[.enabled]:border-neutral-50 dark:border-neutral-20 dark:hover:border-neutral-60 dark:group-[.errored]:border-error-80 [&:has(input:focus)]:!border-primary-30 [&:has(input:focus)]:dark:!border-primary-80';
 export const INPUT_NUMBER_CLASSES =
     '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:cursor-not-allowed';
 export const LABEL_CLASSES =

package/src/lib/components/molecules/search/Search.tsx

@@ -54,7 +54,7 @@ export interface SearchProps {
     /**
      * Render suggestion.
      */
-    renderSuggestion: (suggestion: Suggestion, index: number) => React.ReactNode;
+    renderSuggestion?: (suggestion: Suggestion, index: number) => React.ReactNode;
 }
 
 export function Search({
@@ -71,6 +71,7 @@ export function Search({
     const inputRef = useRef<HTMLInputElement>(null);
     const suggestionsListRef = useRef<HTMLDivElement>(null);
     const [isSuggestionsVisible, setIsSuggestionsVisible] = useState(true);
+    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
 
     function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
         const value = event.target.value;
@@ -131,9 +132,36 @@ export function Search({
         onSuggestionClick?.(suggestion);
         onSearchValueChange('');
         setIsSuggestionsVisible(false);
+        setSelectedIndex(null);
         inputRef.current?.blur();
     };
 
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (suggestions && suggestions?.length > 0) {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                setSelectedIndex((prev) =>
+                    prev === null || prev >= suggestions.length - 1 ? 0 : prev + 1,
+                );
+            } else if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                setSelectedIndex((prev) =>
+                    prev === null || prev <= 0 ? suggestions.length - 1 : prev - 1,
+                );
+            } else if (event.key === 'Enter') {
+                event.preventDefault();
+                if (selectedIndex !== null && suggestions[selectedIndex]) {
+                    handleOnSuggestionClick(suggestions[selectedIndex]);
+                } else if (suggestions.length === 1) {
+                    handleOnSuggestionClick(suggestions[0]);
+                }
+            }
+        }
+        if (onKeyDown) {
+            onKeyDown(event);
+        }
+    };
+
     return (
         <div className="relative w-full">
             <div
@@ -148,7 +176,7 @@ export function Search({
                     type="text"
                     value={searchValue}
                     onChange={handleChange}
-                    onKeyDown={onKeyDown}
+                    onKeyDown={handleKeyDown}
                     onFocus={() => setIsSuggestionsVisible(true)}
                     placeholder={placeholder}
                     className={cx(
@@ -158,7 +186,7 @@ export function Search({
                 />
                 <SearchIcon />
             </div>
-            {showSuggestions && (
+            {showSuggestions && renderSuggestion && (
                 <div
                     ref={suggestionsListRef}
                     className={cx(
@@ -168,15 +196,21 @@ export function Search({
                 >
                     <Divider width="w-11/12" />
                     {isLoading ? (
-                        <div className=" px-md py-sm">
+                        <div className="px-md py-sm">
                             <Loader className="animate-spin" />
                         </div>
                     ) : (
                         suggestions.map((suggestion, index) => (
                             <div
-                                className="w-full"
                                 key={suggestion.id}
                                 onClick={() => handleOnSuggestionClick(suggestion)}
+                                onMouseEnter={() => setSelectedIndex(index)}
+                                className={cx(
+                                    'w-full cursor-pointer px-md py-sm',
+                                    selectedIndex === index
+                                        ? 'bg-shader-primary-dark-16 dark:bg-shader-inverted-dark-16'
+                                        : '',
+                                )}
                             >
                                 {renderSuggestion(suggestion, index)}
                             </div>