@revolut/ui-kit-miniapp 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolut/ui-kit-miniapp",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "license": "Apache-2.0",
   "main": "",
   "types": "types/index.d.ts",

package/types/index.d.ts

@@ -394,7 +394,7 @@ declare const Avatar: ({ name, children, image, icon, size, uuid, ...rest }: Ava
 /**
  * Visual style variant of the button.
  */
-type ButtonVariant = 'primary' | 'secondary' | 'negative';
+type ButtonVariant = 'primary' | 'secondary' | 'negative' | 'text';
 /**
  * Props for the Button component.
  *
@@ -1541,6 +1541,10 @@ interface InputProps extends NativeInputProps$3 {
      * Icon to render at the end of the input content.
      */
     endIcon?: IconName;
+    /**
+     * Avatar image displayed at the start of the input.
+     */
+    avatar?: string;
 }
 /**
  * Input component for text entry.
@@ -1636,7 +1640,7 @@ interface InputProps extends NativeInputProps$3 {
  * }
  * ```
  */
-declare const Input: ({ value, defaultValue, onChange, label, placeholder, type, disabled, readOnly, invalid, description, errorMessage, labelButtonClear, onClear, icon, endIcon, ...rest }: InputProps) => react_jsx_runtime.JSX.Element;
+declare const Input: ({ value, defaultValue, onChange, label, placeholder, type, disabled, readOnly, invalid, description, errorMessage, labelButtonClear, onClear, icon, endIcon, avatar, ...rest }: InputProps) => react_jsx_runtime.JSX.Element;
 
 type NativeAnchorProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'style'>;
 /**
@@ -1727,14 +1731,18 @@ declare const Link: ({ href, target, children, ...rest }: LinkProps) => react_js
  * List item definition.
  */
 interface ListItem {
+    /**
+     * Content to show
+     */
+    content: React.ReactNode;
     /**
      * Icon to show at the start
      */
     icon: IconName;
     /**
-     * Text to show
+     * Unique id identifier for the item
      */
-    text: string;
+    id: string;
 }
 /**
  * Props for the List component.
@@ -1743,8 +1751,8 @@ interface ListItem {
  * ```tsx
  * <List
  *   items={[
- *     { text: 'First item completed', icon: 'Check' },
- *     { text: 'Second item pending', icon: 'Time' },
+ *     { id: 'item-1', content: 'First item completed', icon: 'Check' },
+ *     { id: 'item-2', content: <><Text color="success">Free cancellation</Text> until January</>, icon: 'Time' },
  *   ]}
  * />
  * ```
@@ -1762,14 +1770,14 @@ interface ListProps {
  *
  * @example
  * ```tsx
- * import { List } from '@revolut/ui-kit-miniapp'
+ * import { List, Text } from '@revolut/ui-kit-miniapp'
  *
  * function ListExample() {
  *   return (
  *     <List
  *       items={[
- *         { text: 'First item completed', icon: 'Check' },
- *         { text: 'Second item pending', icon: 'Time' },
+ *         { id: 'item-1', content: 'First item completed', icon: 'Check' },
+ *         { id: 'item-2', content: <><Text color="success">Free cancellation</Text> until January</>, icon: 'Time' },
  *       ]}
  *     />
  *   )
@@ -2561,6 +2569,43 @@ interface SwitchProps extends NativeInputProps {
  */
 declare const Switch: ({ checked, defaultChecked, disabled, onChange, ...rest }: SwitchProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Props for the Badge component.
+ *
+ * @example
+ * ```tsx
+ * <Badge icon="Time">Best offer</Badge>
+ * ```
+ */
+interface BadgeProps extends NativeSpanProps {
+    /**
+     * Badge icon.
+     */
+    icon?: IconName;
+    /**
+     * Badge content.
+     */
+    children: string | number;
+}
+/**
+ * Badge component for categorisation or markup.
+ *
+ * Renders text in a coloured background that highlights some extra details for a content.
+ *
+ * @example
+ * ```tsx
+ * import { Badge } from '@revolut/ui-kit-miniapp'
+ *
+ * // Basic usage
+ * function BasicExample() {
+ *   return (
+ *     <Badge icon="Time">Best offer</Badge>
+ *   )
+ * }
+ * ```
+ */
+declare const Badge: ({ icon, children }: BadgeProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * TabBar variant options.
  */
@@ -3377,13 +3422,13 @@ declare const BottomSheet: BottomSheetComponent;
  */
 interface PageHeaderActionItem {
     /**
-     * Label for the action (not visible)
+     * Label for the action (only visible if icon is not defined)
      */
     label: string;
     /**
      * Icon to show
      */
-    icon: IconName;
+    icon?: IconName;
     /**
      * Callback when the button is clicked
      */
@@ -3749,5 +3794,5 @@ declare const Token: {
     };
 };
 
-export { Action, ActionButton, Avatar, BottomSheet, Button, Calendar, Cell, CellSkeleton, Checkbox, Copyable, DetailsCell, Dropdown, FilterButton, Footnote, Group, HStack, Icon, Image, Input, Link, List, Page, Placeholder, Popup, ProgressSteps, Radio, RootProvider, Search, Spacer, Subheader, Switch, TabBar, Text, TextArea, ToggleButton, Token, VStack, VisuallyHidden, useStatusSheet };
-export type { ActionButtonProps, ActionButtonVariant, ActionProps, AvatarProps, AvatarSize, BottomSheetActionsProps, BottomSheetContentProps, BottomSheetHeaderProps, BottomSheetProps, ButtonProps, ButtonVariant, CalendarDateProps, CalendarProps, CalendarRangeProps, CalendarVariant, CellProps, CellVariant, CheckboxProps, CopyableProps, DateRange, DetailsCellProps, DropdownProps, FilterButtonProps, FootnoteProps, GroupProps, GroupVariant, HStackProps, IconProps, ImageFit, ImageProp, ImageProps, InputProps, InputType, LinkProps, ListProps, PageHeaderProps, PageMainProps, PageProps, PageTabsProps, PlaceholderProps, PopupProps, ProgressStepsProps, RadioProps, RootProviderProps, SearchProps, Space, SpacerProps, StackAlignment, StatusSheetAction, StatusSheetInstance, StatusSheetOptions, StatusSheetVariant, SubheaderProps, SubheaderVariant, SwitchProps, TabBarItem, TabBarProps, TabBarVariant, TextAreaProps, TextProps, TextVariant, ThemeBackground, ThemeMode, ToggleButtonProps, VStackProps, VisuallyHiddenProps };
+export { Action, ActionButton, Avatar, Badge, BottomSheet, Button, Calendar, Cell, CellSkeleton, Checkbox, Copyable, DetailsCell, Dropdown, FilterButton, Footnote, Group, HStack, Icon, Image, Input, Link, List, Page, Placeholder, Popup, ProgressSteps, Radio, RootProvider, Search, Spacer, Subheader, Switch, TabBar, Text, TextArea, ToggleButton, Token, VStack, VisuallyHidden, useStatusSheet };
+export type { ActionButtonProps, ActionButtonVariant, ActionProps, AvatarProps, AvatarSize, BadgeProps, BottomSheetActionsProps, BottomSheetContentProps, BottomSheetHeaderProps, BottomSheetProps, ButtonProps, ButtonVariant, CalendarDateProps, CalendarProps, CalendarRangeProps, CalendarVariant, CellProps, CellVariant, CheckboxProps, CopyableProps, DateRange, DetailsCellProps, DropdownProps, FilterButtonProps, FootnoteProps, GroupProps, GroupVariant, HStackProps, IconProps, ImageFit, ImageProp, ImageProps, InputProps, InputType, LinkProps, ListProps, PageHeaderProps, PageMainProps, PageProps, PageTabsProps, PlaceholderProps, PopupProps, ProgressStepsProps, RadioProps, RootProviderProps, SearchProps, Space, SpacerProps, StackAlignment, StatusSheetAction, StatusSheetInstance, StatusSheetOptions, StatusSheetVariant, SubheaderProps, SubheaderVariant, SwitchProps, TabBarItem, TabBarProps, TabBarVariant, TextAreaProps, TextProps, TextVariant, ThemeBackground, ThemeMode, ToggleButtonProps, VStackProps, VisuallyHiddenProps };