@iota/apps-ui-kit 0.9.1 → 0.9.3

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @iota/apps-ui-kit
 
+## 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
+
+-   1925bea: Bump with no changes to fix NPM versions
+-   Updated dependencies [1925bea]
+    -   @iota/apps-ui-icons@0.7.2
+
 ## 0.9.1
 
 ### 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).
      */
@@ -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>>;