@iota/apps-ui-kit 0.6.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @iota/apps-ui-kit
 
+## 0.7.1
+
+### Patch Changes
+
+-   b3b2b4b: fix double scroll bar in the select component
+-   5a3fd67: remove gradient from outline button & add CSS classes to components
+-   8b8bf41: Improve typeset for the names theme
+-   4a25f42: Add supportingValue to input
+-   23c13dc: add new state-layer-secondary
+-   4e7d5ae: Add colors for iota names
+-   eebb4f5: add gradient border to outline button
+-   c7ba8c4: export SecondaryText component
+-   Updated dependencies [3d09899]
+    -   @iota/apps-ui-icons@0.4.1
+
+## 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,10 @@ 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 { default as default_2 } from 'react';
+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 +18,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 +179,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 +216,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"
@@ -201,7 +226,7 @@ export declare interface BaseInputProps extends InputWrapperProps {
     /**
      * A leading icon that is shown before the input
      */
-    leadingIcon?: React.JSX.Element;
+    leadingIcon?: React.ReactNode;
     /**
      * Supporting text that is shown at the end of the input component.
      */
@@ -213,7 +238,7 @@ export declare interface BaseInputProps extends InputWrapperProps {
     /**
      * Trailing element that is shown after the input
      */
-    trailingElement?: React.JSX.Element;
+    trailingElement?: React.ReactNode;
     /**
      * Is the content of the input visible
      */
@@ -222,6 +247,10 @@ export declare interface BaseInputProps extends InputWrapperProps {
      * Value of the input
      */
     value?: string | number;
+    /**
+     * Text that is shown below the value of the input.
+     */
+    supportingValue?: string | null;
     /**
      * Default value of the input
      */
@@ -461,7 +490,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, type, selected, showClose, onClose, onClick, avatar, leadingElement, trailingElement, disabled, size, }: ChipProps): JSX_2.Element;
 
 declare interface ChipProps {
     /**
@@ -500,6 +529,34 @@ declare interface ChipProps {
      * The button is disabled or not.
      */
     disabled?: boolean;
+    /**
+     * The type of the Chip
+     */
+    type?: ChipType;
+    /**
+     * The size of the chip.
+     */
+    size?: ChipSize;
+}
+
+export declare enum ChipSize {
+    Small = "small",
+    Default = "default"
+}
+
+export declare enum ChipType {
+    Outline = "outline",
+    Elevated = "elevated",
+    Success = "success",
+    Brand = "brand",
+    Error = "error"
+}
+
+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;
@@ -513,6 +570,7 @@ export declare const DialogContent: React_2.ForwardRefExoticComponent<Omit<Radix
     showCloseOnOverlay?: boolean;
     position?: DialogPosition;
     customWidth?: string;
+    isFixedPosition?: boolean;
 } & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare enum DialogPosition {
@@ -646,6 +704,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 +719,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 +808,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-solid': {
+        blue: string;
+        purple: string;
+        green: string;
+        neutral: 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 +915,7 @@ export declare const IOTA_PRIMITIVES_COLOR_PALETTE: {
         '90': string;
         '100': string;
     };
-    secondary: {
+    'iota-secondary': {
         '0': string;
         '10': string;
         '20': string;
@@ -768,7 +928,7 @@ export declare const IOTA_PRIMITIVES_COLOR_PALETTE: {
         '90': string;
         '100': string;
     };
-    tertiary: {
+    'iota-tertiary': {
         '0': string;
         '10': string;
         '20': string;
@@ -781,7 +941,7 @@ export declare const IOTA_PRIMITIVES_COLOR_PALETTE: {
         '90': string;
         '100': string;
     };
-    error: {
+    'iota-error': {
         '0': string;
         '10': string;
         '20': string;
@@ -794,7 +954,7 @@ export declare const IOTA_PRIMITIVES_COLOR_PALETTE: {
         '90': string;
         '100': string;
     };
-    neutral: {
+    'iota-neutral': {
         '0': string;
         '4': string;
         '6': string;
@@ -813,11 +973,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 +1135,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;
@@ -1158,6 +1327,19 @@ export declare interface SearchProps {
     renderSuggestion?: (suggestion: Suggestion, index: number) => React.ReactNode;
 }
 
+export declare function SecondaryText({ children, hasErrorStyles }: SecondaryTextProps): JSX_2.Element;
+
+declare interface SecondaryTextProps {
+    /**
+     * The children to render.
+     */
+    children: React.ReactNode;
+    /**
+     * Should the text have error styles.
+     */
+    hasErrorStyles?: boolean;
+}
+
 export declare function SegmentedButton({ type, children, shape, }: PropsWithChildren<SegmentedButtonProps>): React.JSX.Element;
 
 declare interface SegmentedButtonProps {
@@ -1251,6 +1433,7 @@ export declare const SHADER_COLOR_PALETTE: {
         '16': string;
         '48': string;
         '72': string;
+        '100': string;
     };
     'shader-inverted-dark': {
         '0': string;
@@ -1259,6 +1442,7 @@ export declare const SHADER_COLOR_PALETTE: {
         '16': string;
         '48': string;
         '72': string;
+        '100': string;
     };
     'shader-neutral-dark': {
         '0': string;
@@ -1267,6 +1451,7 @@ export declare const SHADER_COLOR_PALETTE: {
         '16': string;
         '48': string;
         '72': string;
+        '100': string;
     };
     'shader-primary-light': {
         0: string;
@@ -1275,6 +1460,7 @@ export declare const SHADER_COLOR_PALETTE: {
         16: string;
         48: string;
         72: string;
+        100: string;
     };
     'shader-inverted-light': {
         0: string;
@@ -1283,6 +1469,7 @@ export declare const SHADER_COLOR_PALETTE: {
         16: string;
         48: string;
         72: string;
+        100: string;
     };
     'shader-neutral-light': {
         0: string;
@@ -1291,28 +1478,17 @@ export declare const SHADER_COLOR_PALETTE: {
         16: string;
         48: string;
         72: string;
+        100: string;
     };
 };
 
-export declare function Skeleton({ children, widthClass, heightClass, hasSecondaryColors, isRounded, }: React.PropsWithChildren<SkeletonLoaderProps>): React.JSX.Element;
+export declare function Skeleton({ children, className, hasSecondaryColors, }: default_2.PropsWithChildren<SkeletonLoaderProps>): default_2.JSX.Element;
 
-declare interface SkeletonLoaderProps {
-    /**
-     * Width class for the skeleton div.
-     */
-    widthClass?: string;
-    /**
-     * Height class for the skeleton div.
-     */
-    heightClass?: string;
+declare interface SkeletonLoaderProps extends Pick<default_2.HTMLAttributes<HTMLDivElement>, 'className'> {
     /**
      * If true, the skeleton will use darker neutral colors.
      */
     hasSecondaryColors?: boolean;
-    /**
-     * Whether the class `rounded-full` should be applied. Defaults to true.
-     */
-    isRounded?: boolean;
 }
 
 export declare function Snackbar({ text, duration, onClose, showClose, type, }: SnackbarProps): JSX_2.Element;
@@ -1676,26 +1852,31 @@ export declare const uiKitResponsivePreset: Config;
 
 export declare const uiKitStaticPreset: Config;
 
+export declare enum UIKitTheme {
+    Light = "light",
+    Dark = "dark",
+    Names = "names"
+}
+
 export declare enum ValueSize {
     Small = "small",
     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 {
-    /**
-     * The type of the asset to be displayed.
-     */
-    assetType?: VisualAssetType;
+export declare interface VideoProps {
     /**
-     * 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 +1899,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"