@iota/apps-ui-kit 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @iota/apps-ui-kit
 
+## 0.7.0
+
+### Minor Changes
+
+-   9b4b517: support multi-theme
+-   6fcddb3: Make react a peer dependency
+
+### Patch Changes
+
+-   b83d356: add chip size prop
+-   01f03fb: Refactor components to improve reusability
+-   Updated dependencies [6fcddb3]
+    -   @iota/apps-ui-icons@0.4.0
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -4,7 +4,9 @@ import { ButtonSegmentType as ButtonSegmentType_2 } from '../../../../components
 import { ButtonType as ButtonType_2 } from '../../../../components/atoms/button';
 import { ComponentProps } from 'react';
 import { Config } from 'tailwindcss';
+import { DetailedHTMLProps } from 'react';
 import { ForwardRefExoticComponent } from 'react';
+import { ImgHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { NavbarItemProps as NavbarItemProps_2 } from '../../../../components/molecules/navbar-item/NavbarItem';
 import { NumericFormat } from 'react-number-format';
@@ -15,6 +17,7 @@ import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { TooltipPosition as TooltipPosition_2 } from '../../../../components/atoms';
 import { TooltipPosition as TooltipPosition_3 } from '../../../../components/atoms/tooltip';
+import { VideoHTMLAttributes } from 'react';
 
 export declare function Accordion({ children, hideBorder, }: {
     children: React.ReactNode;
@@ -175,6 +178,27 @@ declare interface AddressProps {
     onOpen?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
+export declare function AssetMediaRenderer({ src, isAutoPlayEnabled, assetType, altText: alt, showFallback, disableControls, }: AssetMediaRendererProps): React.JSX.Element;
+
+export declare interface AssetMediaRendererProps extends VideoProps {
+    /**
+     * The source of the media to be displayed.
+     */
+    src: string;
+    /**
+     * The type of the asset to be displayed.
+     */
+    assetType: VisualAssetType;
+    /**
+     * Alt text for the image..
+     */
+    altText?: string;
+    /**
+     * Whether to show a fallback image if the main image fails to load.
+     */
+    showFallback?: boolean;
+}
+
 export declare function Badge({ type, label }: BadgeProps): React.JSX.Element;
 
 declare interface BadgeProps {
@@ -191,7 +215,7 @@ declare interface BadgeProps {
 export declare enum BadgeType {
     Neutral = "neutral",
     PrimarySolid = "primary-solid",
-    PrimarySoft = "primary-fill",
+    PrimarySoft = "primary-soft",
     Success = "success",
     Warning = "warning",
     Error = "error"
@@ -461,7 +485,7 @@ declare interface CheckboxProps {
     name?: string;
 }
 
-export declare function Chip({ label, showClose, selected, onClose, onClick, avatar, leadingElement, trailingElement, disabled, }: ChipProps): JSX_2.Element;
+export declare function Chip({ label, showClose, selected, onClose, onClick, avatar, leadingElement, trailingElement, disabled, size, }: ChipProps): JSX_2.Element;
 
 declare interface ChipProps {
     /**
@@ -500,6 +524,27 @@ declare interface ChipProps {
      * The button is disabled or not.
      */
     disabled?: boolean;
+    /**
+     * The size of the chip.
+     */
+    size?: ChipSize;
+}
+
+export declare enum ChipSize {
+    Small = "small",
+    Default = "default"
+}
+
+export declare enum ChipState {
+    Default = "default",
+    Selected = "selected"
+}
+
+declare interface CustomAssetDisplayProps {
+    /**
+     * The media to be displayed inside the card.
+     */
+    renderAsset?: React.ReactNode;
 }
 
 export declare const Dialog: ({ open, onOpenChange, children, ...props }: React_2.ComponentPropsWithoutRef<typeof RadixDialog.Root>) => JSX_2.Element;
@@ -646,6 +691,9 @@ declare interface HeaderProps {
     testId?: string;
 }
 
+declare const Image_2: ForwardRefExoticComponent<ImgHTMLAttributes<HTMLImageElement> & RefAttributes<HTMLImageElement>>;
+export { Image_2 as Image }
+
 export declare enum ImageShape {
     Rounded = "rounded",
     SquareRounded = "square-rounded"
@@ -658,6 +706,12 @@ export declare enum ImageType {
     BgTransparent = "bg-transparent"
 }
 
+export declare const ImageWithFallback: ForwardRefExoticComponent<ImageWithFallbackProps & RefAttributes<HTMLImageElement>>;
+
+export declare interface ImageWithFallbackProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    renderFallback?: React.ReactNode;
+}
+
 export declare function InfoBox({ icon, title, supportingText, type, style, }: InfoBoxProps): React.JSX.Element;
 
 export declare interface InfoBoxProps {
@@ -741,8 +795,101 @@ declare interface InputWrapperProps {
     labelHtmlTag?: LabelHtmlTag;
 }
 
+export declare const IOTA_NAMES_COLOR_PALETTE: {
+    'names-primary': {
+        '0': string;
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        '100': string;
+    };
+    'names-secondary': {
+        '0': string;
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        '100': string;
+    };
+    'names-tertiary': {
+        '0': string;
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        '100': string;
+    };
+    'names-error': {
+        '0': string;
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        '100': string;
+    };
+    'names-neutral': {
+        '0': string;
+        '4': string;
+        '6': string;
+        '10': string;
+        '12': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        '92': string;
+        '96': string;
+        '98': string;
+        '100': string;
+    };
+    'names-gradient': {
+        'stop-1': string;
+        'stop-2': string;
+        'stop-3': string;
+        'stop-4': string;
+    };
+    'names-warning': {
+        '0': string;
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        '100': string;
+    };
+};
+
 export declare const IOTA_PRIMITIVES_COLOR_PALETTE: {
-    primary: {
+    'iota-primary': {
         '0': string;
         '10': string;
         '20': string;
@@ -755,7 +902,7 @@ export declare const IOTA_PRIMITIVES_COLOR_PALETTE: {
         '90': string;
         '100': string;
     };
-    secondary: {
+    'iota-secondary': {
         '0': string;
         '10': string;
         '20': string;
@@ -768,7 +915,7 @@ export declare const IOTA_PRIMITIVES_COLOR_PALETTE: {
         '90': string;
         '100': string;
     };
-    tertiary: {
+    'iota-tertiary': {
         '0': string;
         '10': string;
         '20': string;
@@ -781,7 +928,7 @@ export declare const IOTA_PRIMITIVES_COLOR_PALETTE: {
         '90': string;
         '100': string;
     };
-    error: {
+    'iota-error': {
         '0': string;
         '10': string;
         '20': string;
@@ -794,7 +941,7 @@ export declare const IOTA_PRIMITIVES_COLOR_PALETTE: {
         '90': string;
         '100': string;
     };
-    neutral: {
+    'iota-neutral': {
         '0': string;
         '4': string;
         '6': string;
@@ -813,11 +960,18 @@ export declare const IOTA_PRIMITIVES_COLOR_PALETTE: {
         '98': string;
         '100': string;
     };
-    warning: {
+    'iota-warning': {
+        '0': string;
         '10': string;
         '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
         '60': string;
+        '70': string;
+        '80': string;
         '90': string;
+        '100': string;
     };
 };
 
@@ -968,6 +1122,8 @@ export declare interface LoadingIndicatorProps {
     testId?: string;
 }
 
+export declare function MediaFallback(): JSX_2.Element;
+
 export declare function Navbar({ items, activeId, onClickItem, isCollapsible, onToggleNavbar, }: NavbarProps): JSX_2.Element;
 
 export declare function NavbarItem(props: NavbarItemProps): React.JSX.Element;
@@ -1681,21 +1837,20 @@ export declare enum ValueSize {
     Medium = "medium"
 }
 
-export declare function VisualAssetCard({ assetType, assetSrc, altText, onIconClick, onClick, icon, assetTitle, isHoverable, }: VisualAssetCardProps): React.JSX.Element;
+export declare const Video: ForwardRefExoticComponent<Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "ref"> & VideoProps & RefAttributes<HTMLVideoElement>>;
 
-export declare interface VisualAssetCardProps {
+export declare interface VideoProps {
     /**
-     * The type of the asset to be displayed.
-     */
-    assetType?: VisualAssetType;
-    /**
-     * The source of the image to be displayed.
+     * Whether the video should autoplay.
      */
-    assetSrc: string;
+    isAutoPlayEnabled?: boolean;
     /**
-     * Alt text for the image.
+     * If the video controls should be disabled.
      */
-    altText: string;
+    disableControls?: boolean;
+}
+
+declare interface VisualAssetBaseProps {
     /**
      * The onClick event for the icon.
      */
@@ -1718,6 +1873,10 @@ export declare interface VisualAssetCardProps {
     isHoverable?: boolean;
 }
 
+export declare function VisualAssetCard({ onIconClick, onClick, icon, assetTitle, isHoverable, ...assetProps }: VisualAssetBaseProps & (AssetMediaRendererProps | CustomAssetDisplayProps)): React.JSX.Element;
+
+export declare type VisualAssetCardProps = VisualAssetBaseProps & (AssetMediaRendererProps | CustomAssetDisplayProps);
+
 export declare enum VisualAssetType {
     Image = "image",
     Video = "video"