@iota/apps-ui-kit 0.9.2 → 0.9.4

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @iota/apps-ui-kit
 
+## 0.9.4
+
+### Patch Changes
+
+-   4a5ec26: Always show Copy and explorer buttons in Address component.
+-   adea573: Enable declarationMap in TS packages
+-   8ec6dd5: Extend support for aria props
+-   caf344f: Animations for dialog and Select.
+-   Updated dependencies [adea573]
+-   Updated dependencies [0142ab5]
+    -   @iota/apps-ui-icons@0.7.4
+
+## 0.9.3
+
+### Patch Changes
+
+-   67cba64: improve Address component to allow onOpen prop
+-   54c7803: Update @types/node to v24.
+-   0528d86: add data testId to Account component
+-   10ee721: Increase Dialog height
+-   fc9eba3: Add "isDisabled" to TableRowCheckbox
+-   205e35d: improve button segment for mobile devices
+-   10ee721: remove lock action from account component
+-   5613ae1: Correct Toggle's right spacing when enabled
+-   b294bf5: add proper readme
+-   Updated dependencies [bb33d49]
+    -   @iota/apps-ui-icons@0.7.3
+
 ## 0.9.2
 
 ### Patch Changes

package/README.md

@@ -1,15 +1,45 @@
-# `@iota/apps-ui-kit`
+# @iota/apps-ui-kit
 
-## Usage
+A UI kit library for building consistent IOTA applications.
 
-Installation:
+## Installation
+
+Install the package using your preferred package manager:
 
 ```bash
 # Replace with npm, yarn, bun, etc.
 pnpm install @iota/apps-ui-kit
 ```
 
-Importing:
+## Configuration
+
+1. Import the UI Kit global styles in your app global CSS file (e.g., `src/index.css` or `src/global.css`):
+
+```css
+@import '@iota/apps-ui-kit/styles';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+2. Configure your Tailwind CSS setup to include the UI Kit styles. Update your `tailwind.config.ts` file:
+
+```js
+import { uiKitResponsivePreset } from '@iota/apps-ui-kit';
+import type { Config } from 'tailwindcss';
+
+export default {
+  presets: [uiKitResponsivePreset],
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  darkMode: 'class', // configure as needed ('selector' or 'class')
+  theme: {
+    extend: {},
+  },
+} satisfies Partial<Config>;
+```
+
+3. Use components from the UI kit in your application:
 
 ```typescript
 import { Button } from '@iota/apps-ui-kit';

package/dist/index.d.ts

@@ -59,7 +59,7 @@ export declare interface AccordionHeaderProps {
     hideBorder?: boolean;
 }
 
-export declare function Account({ title, subtitle, badgeType, badgeText, isLocked, avatarContent, onOptionsClick, onLockAccountClick, onUnlockAccountClick, onCopy, copyText, onOpen, isCopyable, isExternal, isSelected, isActive, showSelected, badgeTooltipText, badgeTooltipPosition, }: AccountProps): React.JSX.Element;
+export declare function Account({ title, subtitle, badgeType, badgeText, avatarContent, onOptionsClick, onCopy, copyText, onOpen, isCopyable, isExternal, isSelected, isActive, showSelected, badgeTooltipText, badgeTooltipPosition, }: AccountProps): React.JSX.Element;
 
 declare interface AccountProps {
     /**
@@ -70,28 +70,14 @@ declare interface AccountProps {
      * The subtitle of the account.
      */
     subtitle: string;
-    /**
-     * Whether the account is unlocked.
-     */
-    isLocked?: boolean;
     /**
      * Handler for more options click.
      */
     onOptionsClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Handler for the lock account icon click.
-     */
-    onLockAccountClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Handle for the unlock account icon click.
-     */
-    onUnlockAccountClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Function to render avatar content.
      */
-    avatarContent: ({ isLocked }: {
-        isLocked?: boolean;
-    }) => React.JSX.Element;
+    avatarContent: () => React.JSX.Element;
     /**
      * The onCopy event of the Address  (optional).
      */
@@ -277,7 +263,7 @@ declare type ButtonPickedProps = Pick<ButtonProps, 'htmlType' | 'testId'>;
 
 export declare function ButtonPill({ htmlType, children, tabIndex, ...buttonProps }: Omit<ButtonVariantProps, 'className'>): JSX_2.Element;
 
-export declare interface ButtonProps {
+export declare interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
     /**
      * The size of the button.
      */
@@ -324,9 +310,9 @@ export declare interface ButtonProps {
     testId?: string;
 }
 
-export declare function ButtonSegment({ icon, label, selected, disabled, onClick, type, isNested, }: ButtonSegmentProps): React.JSX.Element;
+export declare function ButtonSegment({ icon, label, selected, disabled, onClick, type, isNested, ...ariaProps }: ButtonSegmentProps): React.JSX.Element;
 
-declare interface ButtonSegmentProps {
+declare interface ButtonSegmentProps extends React.AriaAttributes {
     /**
      * The label of the button.
      */
@@ -381,7 +367,7 @@ declare interface ButtonVariantProps extends ButtonPickedProps, PropsFromButtonE
     children: React.ReactNode;
 }
 
-export declare function Card({ isDisabled, type, isHoverable, onClick, children, testId, }: CardProps): JSX_2.Element;
+export declare function Card({ isDisabled, type, isHoverable, onClick, children, testId, ...ariaProps }: CardProps): JSX_2.Element;
 
 export declare function CardAction({ type, onClick, subtitle, title, icon, iconAfterText, buttonType, buttonDisabled, }: CardActionProps): JSX_2.Element | null;
 
@@ -423,7 +409,7 @@ export declare interface CardImageProps {
     children?: React.ReactNode;
 }
 
-export declare interface CardProps {
+export declare interface CardProps extends React.AriaAttributes {
     /**
      * If `true`, the card will be disabled.
      */
@@ -459,7 +445,7 @@ export declare enum CardType {
 
 export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
 
-declare interface CheckboxProps {
+declare interface CheckboxProps extends React.AriaAttributes {
     /**
      * The label of the checkbox.
      */
@@ -490,9 +476,9 @@ declare interface CheckboxProps {
     name?: string;
 }
 
-export declare function Chip({ label, type, selected, showClose, onClose, onClick, avatar, leadingElement, trailingElement, disabled, size, }: ChipProps): JSX_2.Element;
+export declare function Chip({ label, type, selected, showClose, onClose, onClick, avatar, leadingElement, trailingElement, disabled, size, ...ariaProps }: ChipProps): JSX_2.Element;
 
-declare interface ChipProps {
+declare interface ChipProps extends React.AriaAttributes {
     /**
      * The label of the chip
      */
@@ -1089,9 +1075,9 @@ export declare enum LabelTextSize {
     Large = "large"
 }
 
-export declare function ListItem({ showRightIcon, hideBottomBorder, onClick, isDisabled, children, isHighlighted, }: PropsWithChildren<ListItemProps>): React.JSX.Element;
+export declare function ListItem({ showRightIcon, hideBottomBorder, onClick, isDisabled, children, isHighlighted, ...ariaProps }: PropsWithChildren<ListItemProps>): React.JSX.Element;
 
-export declare interface ListItemProps {
+export declare interface ListItemProps extends React.AriaAttributes {
     /**
      * Has right icon (optional).
      */
@@ -1141,7 +1127,7 @@ export declare function Navbar({ items, activeId, onClickItem, isCollapsible, on
 
 export declare function NavbarItem(props: NavbarItemProps): React.JSX.Element;
 
-export declare interface NavbarItemProps {
+export declare interface NavbarItemProps extends React.AriaAttributes {
     /**
      * The type of the navbar item.
      */
@@ -1250,9 +1236,9 @@ declare interface PlaceholderProps {
 
 declare type PropsFromButtonElement = Omit<React.HTMLProps<HTMLButtonElement>, 'type'>;
 
-export declare function RadioButton({ id, name, label, supportingLabel, body, isChecked, isDisabled, onChange, }: RadioButtonProps): React.JSX.Element;
+export declare function RadioButton({ id, name, label, supportingLabel, body, isChecked, isDisabled, onChange, ...ariaProps }: RadioButtonProps): React.JSX.Element;
 
-declare interface RadioButtonProps {
+declare interface RadioButtonProps extends React.AriaAttributes {
     /**
      * The id of the radio button.
      */
@@ -1301,14 +1287,14 @@ export declare enum ScreenSize {
     Xl = "xl"
 }
 
-export declare function Search({ searchValue, suggestions, onSearchValueChange, onSuggestionClick, placeholder, isLoading, type, renderSuggestion, }: SearchProps): React.JSX.Element;
+export declare function Search({ searchValue, suggestions, onSearchValueChange, onSuggestionClick, placeholder, isLoading, type, renderSuggestion, ...ariaProps }: SearchProps): React.JSX.Element;
 
 export declare enum SearchBarType {
     Outlined = "outlined",
     Filled = "filled"
 }
 
-export declare interface SearchProps {
+export declare interface SearchProps extends React.AriaAttributes {
     /**
      * The value of the search input.
      */
@@ -1385,7 +1371,7 @@ export declare type SelectOption = string | {
     label: React.ReactNode;
 };
 
-declare interface SelectProps extends Pick<React.HTMLProps<HTMLSelectElement>, 'disabled'> {
+declare interface SelectProps extends Pick<React.HTMLProps<HTMLSelectElement>, 'disabled'>, React.AriaAttributes {
     /**
      * The selected option value.
      */
@@ -1579,9 +1565,9 @@ export declare interface TableCellTextProps {
 
 export declare function TableHeader({ children }: PropsWithChildren): JSX.Element;
 
-export declare function TableHeaderCell({ label, columnKey, hasSort, hasCheckbox, isChecked, isIndeterminate, isContentCentered, onSortClick, onCheckboxChange, sortOrder, }: TableHeaderCellProps): JSX.Element;
+export declare function TableHeaderCell({ label, columnKey, hasSort, hasCheckbox, isChecked, isIndeterminate, isContentCentered, onSortClick, onCheckboxChange, sortOrder, ...ariaProps }: TableHeaderCellProps): JSX.Element;
 
-export declare interface TableHeaderCellProps {
+export declare interface TableHeaderCellProps extends React.AriaAttributes {
     /**
      * The column key.
      */
@@ -1713,11 +1699,12 @@ export declare function TableRow({ children, leading, }: PropsWithChildren<{
     leading?: React.ReactNode;
 }>): JSX.Element;
 
-export declare function TableRowCheckbox({ rowIndex, onCheckboxChange, }: TableRowCheckboxProps): React.JSX.Element;
+export declare function TableRowCheckbox({ rowIndex, onCheckboxChange, isDisabled, }: TableRowCheckboxProps): React.JSX.Element;
 
 export declare interface TableRowCheckboxProps {
     rowIndex: number;
     onCheckboxChange: (checked: boolean) => void;
+    isDisabled?: boolean;
 }
 
 export declare const TextArea: ForwardRefExoticComponent<TextFieldBaseProps & RefAttributes<HTMLTextAreaElement>>;
@@ -1804,7 +1791,7 @@ export declare enum ToggleLabelPosition {
     Right = "right"
 }
 
-declare interface ToggleProps {
+declare interface ToggleProps extends React.AriaAttributes {
     /**
      * The label for the toggle.
      */
@@ -1890,7 +1877,7 @@ export declare interface VideoProps {
     disableControls?: boolean;
 }
 
-declare interface VisualAssetBaseProps {
+declare interface VisualAssetBaseProps extends React.AriaAttributes {
     /**
      * The onClick event for the icon.
      */