@iota/apps-ui-kit 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "sideEffects": false,
   "repository": "https://github.com/iotaledger/ts-packages",
   "license": "Apache-2.0",
@@ -12,9 +12,9 @@
   ],
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.umd.js"
     },
     "./styles": "./dist/style.css"
   },
@@ -34,14 +34,12 @@
     "react-dom": "^18 || ^19"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.6.0",
-    "@storybook/addon-essentials": "^7.1.0",
-    "@storybook/addon-interactions": "^7.1.0",
-    "@storybook/addon-links": "^7.1.0",
-    "@storybook/addon-themes": "^7.6.20",
-    "@storybook/blocks": "^7.1.0",
-    "@storybook/react": "^7.1.0",
-    "@storybook/react-vite": "^7.1.0",
+    "@chromatic-com/storybook": "^5.1.2",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-themes": "^10.3.6",
+    "@storybook/react": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
     "@types/lodash.merge": "^4.6.9",
     "@types/node": "^24.0.0",
     "@types/react": "^18.3.3",
@@ -53,13 +51,11 @@
     "postcss": "^8.4.31",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "^7.1.0",
-    "storybook-dark-mode": "^4.0.2",
+    "storybook": "^10.3.6",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.5.3",
     "vite": "^8.0.1",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-tsconfig-paths": "^6.1.1"
+    "vite-plugin-dts": "^4.5.4"
   },
   "scripts": {
     "prettier:check": "prettier -c --ignore-unknown --ignore-path=../../.prettierignore --ignore-path=.prettierignore .",

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

@@ -41,7 +41,9 @@ export function InfoBox({
     return (
         <div
             className={cx('flex flex-row items-start gap-4 py-xs pr-lg', backgroundClass, {
-                'rounded-lg pl-xs': style === InfoBoxStyle.Elevated,
+                'rounded-lg': style === InfoBoxStyle.Elevated,
+                'pl-xs': style === InfoBoxStyle.Elevated && !!icon,
+                'pl-lg': style === InfoBoxStyle.Elevated && !icon,
             })}
         >
             {icon && (

package/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx

@@ -14,6 +14,10 @@ interface KeyValueProps {
      * The key of the KeyValue.
      */
     keyText: string;
+    /**
+     * An icon shown next to the key text (optional).
+     */
+    keyIcon?: ReactNode;
     /**
      * The value of the KeyValue.
      */
@@ -29,7 +33,7 @@ interface KeyValueProps {
     /**
      * The supporting label of the KeyValue (optional).
      */
-    supportingLabel?: string;
+    supportingLabel?: string | ReactNode;
     /**
      * The size of the value (optional).
      */
@@ -66,6 +70,7 @@ interface KeyValueProps {
 
 export function KeyValueInfo({
     keyText,
+    keyIcon,
     value,
     tooltipPosition,
     tooltipText,
@@ -102,7 +107,7 @@ export function KeyValueInfo({
                 'flex w-full items-baseline gap-xs py-xxs font-inter',
                 flexDirectionClass,
                 {
-                    'justify-between': fullwidth,
+                    'flex-wrap justify-between': fullwidth,
                 },
             )}
         >
@@ -111,7 +116,10 @@ export function KeyValueInfo({
                     'w-1/4': !fullwidth,
                 })}
             >
-                <span className="key-value-key-text-color text-body-md">{keyText}</span>
+                {keyIcon}
+                <span className="key-value-key-text-color break-normal text-body-md">
+                    {keyText}
+                </span>
                 {tooltipText && (
                     <Tooltip text={tooltipText} position={tooltipPosition}>
                         <Info className="key-supporting-text-color" />
@@ -119,15 +127,16 @@ export function KeyValueInfo({
                 )}
             </div>
             <div
-                className={cx('flex flex-row items-baseline gap-1 break-all', {
+                className={cx('flex min-w-0 flex-row items-baseline gap-1 break-all', {
                     'w-3/4': !fullwidth,
+                    'flex-wrap': fullwidth,
                     truncate: isTruncated,
                 })}
             >
                 <span
                     title={valueHoverTitle}
                     className={cx(
-                        'key-value-hover-text-color',
+                        'key-value-hover-text-color min-w-0',
                         size === ValueSize.Medium ? 'text-body-lg' : 'text-body-md',
                         { truncate: isTruncated },
                     )}

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

@@ -7,7 +7,7 @@ import { Button, ButtonSize, ButtonType } from '@/components/atoms/button';
 
 export type CardActionProps = {
     title?: string;
-    subtitle?: string;
+    subtitle?: string | React.ReactNode;
     type: CardActionType;
     onClick?: () => void;
     icon?: React.ReactNode;

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

@@ -39,7 +39,7 @@ export function CardBody({
                 })}
             >
                 <div
-                    className={cx('card-body-title-color font-inter text-title-md', {
+                    className={cx('card-body-title-color text-start font-inter text-title-md', {
                         truncate: isTextTruncated,
                     })}
                 >
@@ -61,7 +61,7 @@ export function CardBody({
             </div>
             {subtitle && (
                 <div
-                    className={cx('card-body-subtitle-color font-inter text-body-md', {
+                    className={cx('card-body-subtitle-color text-start font-inter text-body-md', {
                         truncate: isTextTruncated,
                     })}
                 >

package/src/lib/components/molecules/table-header-cell/TableHeaderCell.tsx

@@ -60,6 +60,8 @@ export interface TableHeaderCellProps extends React.AriaAttributes {
 export function TableHeaderCell({
     label,
     columnKey,
+    actionLeft,
+    actionRight,
     hasSort,
     hasCheckbox,
     isChecked,
@@ -136,15 +138,19 @@ export function TableHeaderCell({
                         onCheckedChange={onCheckboxChange}
                     />
                 ) : (
-                    <span
-                        className={cx({
-                            'text-left': !isContentCentered,
-                        })}
-                    >
-                        {label}
-                    </span>
+                    <>
+                        {actionLeft}
+                        <span
+                            className={cx({
+                                'text-left': !isContentCentered,
+                            })}
+                        >
+                            {label}
+                        </span>
+                    </>
                 )}
                 {sortElement}
+                {actionRight}
             </div>
         </th>
     );

package/src/storybook/stories/design-tokens/{colors.stories.mdx → colors.mdx}

@@ -1,4 +1,4 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
 import {
     IOTA_PRIMITIVES_COLOR_PALETTE,
     IOTA_NAMES_COLOR_PALETTE,

package/src/storybook/stories/design-tokens/{icons.stories.mdx → icons.mdx}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, Title, IconGallery, IconItem } from '@storybook/blocks';
+import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs/blocks';
 import * as Icons from '@iota/apps-ui-icons';
 import { DocsSyncTheme } from '../components';
 

package/src/storybook/stories/design-tokens/{typeset.stories.mdx → typeset.mdx}

@@ -1,4 +1,4 @@
-import { Meta, Typeset, Unstyled } from '@storybook/blocks';
+import { Meta, Typeset, Unstyled } from '@storybook/addon-docs/blocks';
 import { TYPESETS } from '../../constants';
 import { TypeSet, TypeSetItem } from '../../blocks';
 import { DocsSyncTheme } from '../components';

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

@@ -1,4 +1,4 @@
-import { Meta, Typeset, Unstyled } from '@storybook/blocks';
+import { Meta, Typeset, Unstyled } from '@storybook/addon-docs/blocks';
 import { VariableSpacingShowcase, DocsSyncTheme } from '../components';
 
 <DocsSyncTheme />