@iota/apps-ui-kit 0.5.0 → 0.6.0

package/src/lib/components/molecules/segmented-button/SegmentedButton.tsx

@@ -1,11 +1,11 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { BACKGROUND_COLORS, OUTLINED_BORDER } from './segmentedButton.classes';
 import cx from 'classnames';
 import { SegmentedButtonType } from './segmentedButton.enums';
-import { ButtonSegmentType } from '../../atoms';
+import { ButtonSegmentType } from '@/components/atoms';
 
 interface SegmentedButtonProps {
     /**
@@ -26,8 +26,12 @@ export function SegmentedButton({
     const backgroundColors = BACKGROUND_COLORS[type];
     const borderColors = type === SegmentedButtonType.Outlined ? OUTLINED_BORDER : '';
     const borderShape = shape === ButtonSegmentType.Rounded ? 'rounded-full gap-1 p-xxs' : '';
+    const scrollable =
+        shape === ButtonSegmentType.Rounded ? 'flex-wrap' : 'flex-nowrap overflow-x-auto';
     return (
-        <div className={cx('flex flex-row flex-wrap', backgroundColors, borderColors, borderShape)}>
+        <div
+            className={cx('flex flex-row', backgroundColors, borderColors, borderShape, scrollable)}
+        >
             {children}
         </div>
     );

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

@@ -5,10 +5,9 @@ import { TriangleDown } from '@iota/apps-ui-icons';
 import cx from 'classnames';
 import { forwardRef, useEffect, useState } from 'react';
 import { Dropdown } from '../dropdown/Dropdown';
-import { SecondaryText } from '../../atoms/secondary-text';
+import { SecondaryText } from '@/components/atoms/secondary-text';
 import { InputWrapper, LabelHtmlTag } from '../input/InputWrapper';
-import { ButtonUnstyled } from '../../atoms/button';
-import { ListItem } from '../../atoms';
+import { ListItem, ButtonUnstyled } from '@/components/atoms';
 import { DropdownPosition } from '../dropdown';
 import { SelectSize } from './select.enums';
 

package/src/lib/components/molecules/table-cell/TableCell.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import cx from 'classnames';
-import { Placeholder } from '../../atoms';
+import { Placeholder } from '@/components/atoms';
 
 interface TableCellBaseProps {
     /**

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

@@ -3,7 +3,7 @@
 
 import { SortByDown, SortByUp } from '@iota/apps-ui-icons';
 import cx from 'classnames';
-import { Checkbox } from '@/lib';
+import { Checkbox } from '@/components/atoms/checkbox';
 import { TableHeaderCellSortOrder } from './tableHeaderCell.enums';
 
 export interface TableHeaderCellProps {

package/src/lib/components/molecules/title/Title.tsx

@@ -1,7 +1,8 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Tooltip, TooltipPosition } from '../../atoms';
+import type { TooltipPosition } from '@/components/atoms';
+import { Tooltip } from '@/components/atoms';
 import { Info } from '@iota/apps-ui-icons';
 import { TitleSize } from './titleSize.enums';
 import cx from 'classnames';

package/src/lib/components/organisms/accordion/Accordion.tsx

@@ -1,10 +1,10 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import cx from 'classnames';
 import { ArrowDown } from '@iota/apps-ui-icons';
-import { Button, ButtonType } from '@/lib';
+import { Button, ButtonType } from '@/components/atoms';
 import { ICON_STYLE } from './accordion.classes';
 
 export interface AccordionHeaderProps {

package/src/lib/components/organisms/dialog/Dialog.tsx

@@ -9,7 +9,26 @@ import { Close } from '@iota/apps-ui-icons';
 import { useEffect, useState } from 'react';
 import { DialogPosition } from './dialog.enums';
 
-const Dialog = RadixDialog.Root;
+const Dialog = ({
+    open,
+    onOpenChange,
+    children,
+    ...props
+}: React.ComponentPropsWithoutRef<typeof RadixDialog.Root>) => {
+    const handleOpenChange = (isOpen: boolean) => {
+        const isMouseOverToast = document.querySelector('.toast-layer:hover');
+        if (!isOpen && isMouseOverToast) {
+            return;
+        }
+        onOpenChange?.(isOpen);
+    };
+
+    return (
+        <RadixDialog.Root open={open} onOpenChange={handleOpenChange} {...props}>
+            {children}
+        </RadixDialog.Root>
+    );
+};
 const DialogTrigger = RadixDialog.Trigger;
 const DialogClose = RadixDialog.Close;
 

package/src/lib/components/organisms/navbar/Navbar.tsx

@@ -3,7 +3,8 @@
 
 import cx from 'classnames';
 import { IotaLogoMark, MenuIcon } from '@iota/apps-ui-icons';
-import { NavbarItem, NavbarItemProps } from '@/components/molecules/navbar-item/NavbarItem';
+import type { NavbarItemProps } from '@/components/molecules/navbar-item/NavbarItem';
+import { NavbarItem } from '@/components/molecules/navbar-item/NavbarItem';
 
 export type NavbarItemWithId = NavbarItemProps & { id: string };
 

package/src/lib/components/organisms/navbar/NavbarSlideout.tsx

@@ -3,8 +3,9 @@
 
 import { ArrowBack } from '@iota/apps-ui-icons';
 import cx from 'classnames';
-import { Button, ButtonType, NavbarItem, NavbarItemType } from '@/components';
-import { NavbarProps } from './Navbar';
+import { Button, ButtonType } from '@/components/atoms';
+import { NavbarItem, NavbarItemType } from '@/components/molecules';
+import type { NavbarProps } from './Navbar';
 
 export function NavbarSlideout({
     items,

package/src/lib/components/organisms/table/Table.tsx

@@ -1,18 +1,12 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { PropsWithChildren, ReactNode } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import cx from 'classnames';
 import { TableProvider, useTableContext } from './TableContext';
-import {
-    Button,
-    ButtonProps,
-    ButtonSize,
-    ButtonType,
-    Checkbox,
-    TableCellBase,
-    TableHeaderCell,
-} from '@/lib';
+import type { ButtonProps } from '@/components/atoms';
+import { Button, ButtonSize, ButtonType, Checkbox } from '@/components/atoms';
+import { TableCellBase, TableHeaderCell } from '@/components/molecules';
 import { ArrowLeft, DoubleArrowLeft, ArrowRight, DoubleArrowRight } from '@iota/apps-ui-icons';
 
 export interface TablePaginationOptions {
@@ -109,9 +103,9 @@ export function Table({
                     </table>
                 </div>
                 <div
-                    className={cx('flex w-full items-center gap-2 pt-md', {
+                    className={cx('flex w-full items-center gap-sm pt-md', {
                         hidden: !supportingLabel && !paginationOptions && !action,
-                        'justify-between': paginationOptions,
+                        'flex-col justify-between sm:flex-row': paginationOptions,
                         'justify-end': !paginationOptions && action,
                     })}
                 >

package/src/lib/components/organisms/table/TableContext.tsx

@@ -1,7 +1,8 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { createContext, PropsWithChildren, useContext } from 'react';
+import type { PropsWithChildren } from 'react';
+import { createContext, useContext } from 'react';
 
 export interface TableProviderProps {
     /**

package/src/lib/tailwind/base.presets.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Config } from 'tailwindcss';
+import type { Config } from 'tailwindcss';
 import { IOTA_PRIMITIVES_COLOR_PALETTE, SHADER_COLOR_PALETTE } from '../constants/colors.constants';
 import {
     CUSTOM_FONT_SIZES,

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

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ThemeConfig } from 'tailwindcss/types/config';
+import type { ThemeConfig } from 'tailwindcss/types/config';
 
 type TailwindFontSize = ThemeConfig['fontSize'];
 

package/src/lib/tailwind/helpers.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ScreenSize } from '../enums';
+import type { ScreenSize } from '../enums';
 
 export const pxToRem = (px: number, base: number = 16) => `${px / base}rem`;
 

package/src/lib/tailwind/responsive.presets.ts

@@ -24,7 +24,7 @@ const responsivePreset: Config = merge({}, BASE_CONFIG, {
             center: true,
             screens,
             padding: {
-                DEFAULT: pxToRem(24),
+                DEFAULT: pxToRem(20),
                 md: pxToRem(48),
                 lg: pxToRem(120),
                 xl: pxToRem(240),

package/src/lib/tailwind/types.ts

@@ -1,6 +1,6 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ScreenSize } from '../enums';
+import type { ScreenSize } from '../enums';
 
 export type ScreenBreakpoints = Record<ScreenSize, number>;

package/src/storybook/blocks/TypeSet.tsx

@@ -3,7 +3,7 @@
 
 import { TypeSetItem } from './TypeSetItem';
 import { getFontSizeLabelFromClass } from '../helpers';
-import { TailwindCustomFonts } from '@/lib/tailwind/constants';
+import type { TailwindCustomFonts } from '@/lib/tailwind/constants';
 
 export interface TypeSetProps {
     typeset: TailwindCustomFonts;

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

@@ -3,7 +3,8 @@
 
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Snackbar, SnackbarProps, SnackbarType, Button } from '@/components/atoms';
+import type { SnackbarProps } from '@/components/atoms';
+import { Snackbar, SnackbarType, Button } from '@/components/atoms';
 
 const meta: Meta<SnackbarProps> = {
     component: Snackbar,

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

@@ -3,15 +3,12 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { IotaLogoSmall } from '@iota/apps-ui-icons';
+import type { CardProps, CardImageProps, CardBodyProps, CardActionProps } from '@/components';
 import {
     Card,
-    CardProps,
     CardImage,
-    CardImageProps,
     CardAction,
     CardBody,
-    CardBodyProps,
-    CardActionProps,
     CardActionType,
     CardType,
     ImageType,

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

@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { Dropdown, ListItem } from '@/components';
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 const meta = {
     component: Dropdown,

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

@@ -5,7 +5,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Input, InputType } from '@/lib/components/molecules/input';
 import { PlaceholderReplace } from '@iota/apps-ui-icons';
-import { ComponentProps, useCallback, useEffect, useState } from 'react';
+import type { ComponentProps } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { ButtonPill } from '@/lib/components/atoms/button';
 
 type CustomStoryProps = {

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

@@ -3,7 +3,8 @@
 
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { ListItem, Search, SearchBarType, Suggestion } from '@/components';
+import type { Suggestion } from '@/components';
+import { ListItem, Search, SearchBarType } from '@/components';
 import cx from 'classnames';
 
 const meta: Meta<typeof Search> = {

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

@@ -9,7 +9,8 @@ import {
     SegmentedButton,
     SegmentedButtonType,
 } from '@/components';
-import { ComponentProps, useState } from 'react';
+import type { ComponentProps } from 'react';
+import { useState } from 'react';
 import { PlaceholderReplace } from '@iota/apps-ui-icons';
 
 const meta: Meta<typeof SegmentedButton> = {

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

@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Meta, StoryObj } from '@storybook/react';
-import { Select, SelectOption } from '@/components/molecules/select/Select';
+import type { SelectOption } from '@/components/molecules/select/Select';
+import { Select } from '@/components/molecules/select/Select';
 import { useState } from 'react';
 import { IotaLogoMark, PlaceholderReplace } from '@iota/apps-ui-icons';
 

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

@@ -3,7 +3,8 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { Activity, Apps, Assets, Home } from '@iota/apps-ui-icons';
-import { Navbar, NavbarSlideout, NavbarItemWithId, NavbarProps } from '@/components';
+import type { NavbarItemWithId, NavbarProps } from '@/components';
+import { Navbar, NavbarSlideout } from '@/components';
 import { useState } from 'react';
 
 const NAVBAR_ITEMS: NavbarItemWithId[] = [