@iota/apps-ui-kit 0.7.0 → 0.7.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @iota/apps-ui-kit
 
+## 0.7.2
+
+### Patch Changes
+
+-   f5b6b19: Allow using defaultValue to avoid react warning
+
+## 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

package/dist/index.d.ts

@@ -4,6 +4,7 @@ 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';
@@ -225,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.
      */
@@ -237,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
      */
@@ -246,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
      */
@@ -485,7 +490,7 @@ declare interface CheckboxProps {
     name?: string;
 }
 
-export declare function Chip({ label, showClose, selected, 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, }: ChipProps): JSX_2.Element;
 
 declare interface ChipProps {
     /**
@@ -524,6 +529,10 @@ declare interface ChipProps {
      * The button is disabled or not.
      */
     disabled?: boolean;
+    /**
+     * The type of the Chip
+     */
+    type?: ChipType;
     /**
      * The size of the chip.
      */
@@ -535,9 +544,12 @@ export declare enum ChipSize {
     Default = "default"
 }
 
-export declare enum ChipState {
-    Default = "default",
-    Selected = "selected"
+export declare enum ChipType {
+    Outline = "outline",
+    Elevated = "elevated",
+    Success = "success",
+    Brand = "brand",
+    Error = "error"
 }
 
 declare interface CustomAssetDisplayProps {
@@ -558,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 {
@@ -867,11 +880,11 @@ export declare const IOTA_NAMES_COLOR_PALETTE: {
         '98': string;
         '100': string;
     };
-    'names-gradient': {
-        'stop-1': string;
-        'stop-2': string;
-        'stop-3': string;
-        'stop-4': string;
+    'names-solid': {
+        blue: string;
+        purple: string;
+        green: string;
+        neutral: string;
     };
     'names-warning': {
         '0': string;
@@ -1314,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 {
@@ -1407,6 +1433,7 @@ export declare const SHADER_COLOR_PALETTE: {
         '16': string;
         '48': string;
         '72': string;
+        '100': string;
     };
     'shader-inverted-dark': {
         '0': string;
@@ -1415,6 +1442,7 @@ export declare const SHADER_COLOR_PALETTE: {
         '16': string;
         '48': string;
         '72': string;
+        '100': string;
     };
     'shader-neutral-dark': {
         '0': string;
@@ -1423,6 +1451,7 @@ export declare const SHADER_COLOR_PALETTE: {
         '16': string;
         '48': string;
         '72': string;
+        '100': string;
     };
     'shader-primary-light': {
         0: string;
@@ -1431,6 +1460,7 @@ export declare const SHADER_COLOR_PALETTE: {
         16: string;
         48: string;
         72: string;
+        100: string;
     };
     'shader-inverted-light': {
         0: string;
@@ -1439,6 +1469,7 @@ export declare const SHADER_COLOR_PALETTE: {
         16: string;
         48: string;
         72: string;
+        100: string;
     };
     'shader-neutral-light': {
         0: string;
@@ -1447,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;
@@ -1832,6 +1852,12 @@ 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"