@iota/apps-ui-kit 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @iota/apps-ui-kit
 
+## 0.5.0
+
+### Minor Changes
+
+-   a4b46bc: add more badge types
+
+### Patch Changes
+
+-   6d274df: make renderSuggestion prop optional in Search component
+-   976e7f8: Add heightFull configuration props to Table component
+-   bb45cb5: Add new type for CardImage component
+-   Updated dependencies [a4b46bc]
+    -   @iota/apps-ui-icons@0.3.0
+
+## 0.4.0
+
+### Minor Changes
+
+-   a3f08da: add toggle component
+
+### Patch Changes
+
+-   1ad39f9: Update dependencies
+-   4e4f710: replace supportingText from string to ReactNode in InfoBox component
+-   d0cb92e: manage unreachable images by displaying a placeholder instead in VisualAssetCard
+
 ## 0.3.0
 
 ### Minor Changes

package/README.md

@@ -0,0 +1,16 @@
+# `@iota/apps-ui-kit`
+
+## Usage
+
+Installation:
+
+```bash
+# Replace with npm, yarn, bun, etc.
+pnpm install @iota/apps-ui-kit
+```
+
+Importing:
+
+```typescript
+import { Button } from '@iota/apps-ui-kit';
+```

package/dist/index.d.ts

@@ -178,7 +178,10 @@ declare interface BadgeProps {
 export declare enum BadgeType {
     Neutral = "neutral",
     PrimarySolid = "primary-solid",
-    PrimarySoft = "primary-fill"
+    PrimarySoft = "primary-fill",
+    Success = "success",
+    Warning = "warning",
+    Error = "error"
 }
 
 export declare interface BaseInputProps extends InputWrapperProps {
@@ -353,7 +356,7 @@ export declare enum CardActionType {
     Button = "button"
 }
 
-export declare function CardBody({ title, subtitle, clickableAction, icon, isTextTruncated, }: CardBodyProps): JSX_2.Element;
+export declare function CardBody({ title, subtitle, clickableAction, icon, isTextTruncated, tooltipText, tooltipPosition, }: CardBodyProps): JSX_2.Element;
 
 export declare type CardBodyProps = {
     title: string;
@@ -361,6 +364,8 @@ export declare type CardBodyProps = {
     clickableAction?: React.ReactNode;
     icon?: React.ReactNode;
     isTextTruncated?: boolean;
+    tooltipText?: string;
+    tooltipPosition?: TooltipPosition;
 };
 
 export declare function CardImage({ type, shape, url, children, }: CardImageProps): JSX_2.Element;
@@ -620,6 +625,7 @@ export declare enum ImageShape {
 export declare enum ImageType {
     Placeholder = "placeholder",
     BgSolid = "bg-solid",
+    BgWhite = "bg-white",
     BgTransparent = "bg-transparent"
 }
 
@@ -637,7 +643,7 @@ export declare interface InfoBoxProps {
     /**
      * The supporting text of the info box (optional).
      */
-    supportingText?: string;
+    supportingText?: React.ReactNode;
     /**
      * The type of the info box.
      */
@@ -781,6 +787,7 @@ export declare const IOTA_PRIMITIVES_COLOR_PALETTE: {
     warning: {
         '10': string;
         '20': string;
+        '60': string;
         '90': string;
     };
 };
@@ -1123,7 +1130,7 @@ export declare interface SearchProps {
     /**
      * Render suggestion.
      */
-    renderSuggestion: (suggestion: Suggestion, index: number) => React.ReactNode;
+    renderSuggestion?: (suggestion: Suggestion, index: number) => React.ReactNode;
 }
 
 export declare function SegmentedButton({ type, children, shape, }: PropsWithChildren<SegmentedButtonProps>): React.JSX.Element;
@@ -1322,7 +1329,7 @@ export declare interface Suggestion {
     type?: string;
 }
 
-export declare function Table({ paginationOptions, action, supportingLabel, selectedRowIndexes, rowIndexes, children, pageSizeSelector, }: PropsWithChildren<TableProps>): JSX.Element;
+export declare function Table({ paginationOptions, action, supportingLabel, selectedRowIndexes, rowIndexes, children, pageSizeSelector, heightFull, }: PropsWithChildren<TableProps>): JSX.Element;
 
 export declare function TableActionButton(props: PropsWithChildren<ButtonProps>): JSX_2.Element;
 
@@ -1479,6 +1486,10 @@ export declare type TableProps = {
      * The page size selector component.
      */
     pageSizeSelector?: ReactNode;
+    /**
+     * If the table should take the full height of the parent.
+     */
+    heightFull?: boolean;
 };
 
 export declare function TableRow({ children, leading, }: PropsWithChildren<{
@@ -1527,7 +1538,7 @@ declare interface TextFieldBaseProps extends TextAreaProps, InputWrapperProps {
     isResizeEnabled?: boolean;
 }
 
-export declare function Title({ title, subtitle, trailingElement, tooltipText, supportingElement, tooltipPosition, size, }: TitleProps): JSX_2.Element;
+export declare function Title({ title, subtitle, trailingElement, tooltipText, supportingElement, tooltipPosition, size, testId, }: TitleProps): JSX_2.Element;
 
 declare interface TitleProps {
     /**
@@ -1558,6 +1569,10 @@ declare interface TitleProps {
      * The size of the component
      */
     size?: TitleSize;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
 }
 
 export declare enum TitleSize {
@@ -1565,6 +1580,53 @@ export declare enum TitleSize {
     Medium = "medium"
 }
 
+export declare const Toggle: ForwardRefExoticComponent<ToggleProps & RefAttributes<HTMLInputElement>>;
+
+export declare enum ToggleLabelPosition {
+    Left = "left",
+    Right = "right"
+}
+
+declare 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 declare enum ToggleSize {
+    Small = "small",
+    Default = "default"
+}
+
 export declare function Tooltip({ text, position, maxWidth, children, }: PropsWithChildren<TooltipProps>): React.JSX.Element;
 
 export declare enum TooltipPosition {