@revolut/ui-kit-miniapp 0.0.3 → 0.0.5

package/package.json

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

package/types/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { Token as Token$1, IconName, ImageProps as ImageProps$1, DateRange as DateRange$1, IntlMessages, CurrencyDefinition } from '@revolut-internal/ui-kit';
+import { Token as Token$1, IconName, ImageProps as ImageProps$1, DateRange as DateRange$1, Color, IntlMessages, CurrencyDefinition } from '@revolut-internal/ui-kit';
 export { CurrencyDefinition, DateFormatOptions, DateRangeFormatOptions, DateTimeFormatOptions, DropdownOptions, DropdownState, IconName, IntlMessages, TimeFormatOptions, UseMoneyFormatOptions, copyToClipboard, nodeChain, useDateFormat, useDateRangeFormat, useDateTimeFormat, useDropdown, useIsRTL, useMoneyFormat, useTimeFormat } from '@revolut-internal/ui-kit';
 
 declare namespace JSXCompat {
@@ -739,6 +739,10 @@ interface CellProps extends NativeDivProps {
      * Avatar or image displayed at the start of the cell.
      */
     avatar?: React.ReactNode;
+    /**
+     * Alignment for the avatar content, center by default
+     */
+    avatarAlign?: 'start' | 'center' | 'end';
     /**
      * Visual variant of the cell.
      * - 'default': Standard cell
@@ -871,7 +875,29 @@ interface CellProps extends NativeDivProps {
  * }
  * ```
  */
-declare const Cell: ({ as, title, description, side, icon, avatar, variant, active, disabled, onClick, href, target, ...rest }: CellProps) => react_jsx_runtime.JSX.Element;
+declare const Cell: ({ as, title, description, side, icon, avatar, avatarAlign, variant, active, disabled, onClick, href, target, ...rest }: CellProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Cell skeleton component to show a loading state.
+ *
+ * Provides a cell skeleton to be shown when UI is loading some content.
+ *
+ * @example
+ * ```tsx
+ * import { CellSkeleton, Group } from '@revolut/ui-kit-miniapp'
+ *
+ * function CellSkeletonExample() {
+ *   return (
+ *     <Group>
+ *      <CellSkeleton />
+ *      <CellSkeleton />
+ *      <CellSkeleton />
+ *     </Group>
+ *   )
+ * }
+ * ```
+ */
+declare const CellSkeleton: () => react_jsx_runtime.JSX.Element;
 
 type NativeInputProps$4 = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'children' | 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'type' | 'color'>;
 /**
@@ -1697,6 +1723,61 @@ interface LinkProps extends NativeAnchorProps {
  */
 declare const Link: ({ href, target, children, ...rest }: LinkProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * List item definition.
+ */
+interface ListItem {
+    /**
+     * Icon to show at the start
+     */
+    icon: IconName;
+    /**
+     * Text to show
+     */
+    text: string;
+}
+/**
+ * Props for the List component.
+ *
+ * @example
+ * ```tsx
+ * <List
+ *   items={[
+ *     { text: 'First item completed', icon: 'Check' },
+ *     { text: 'Second item pending', icon: 'Time' },
+ *   ]}
+ * />
+ * ```
+ */
+interface ListProps {
+    /**
+     * List items to render.
+     */
+    items: ListItem[];
+}
+/**
+ * List component for showing a list of elements.
+ *
+ * Provides a vertical container for showing a list of text elements with icons.
+ *
+ * @example
+ * ```tsx
+ * import { List } from '@revolut/ui-kit-miniapp'
+ *
+ * function ListExample() {
+ *   return (
+ *     <List
+ *       items={[
+ *         { text: 'First item completed', icon: 'Check' },
+ *         { text: 'Second item pending', icon: 'Time' },
+ *       ]}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+declare const List: ({ items }: ListProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * Props for the FilterButton component.
  *
@@ -1936,6 +2017,167 @@ interface HStackProps extends NativeSpanProps {
  */
 declare const HStack: ({ align, gap, children, ...rest }: HStackProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Props for the Placeholder component.
+ *
+ * @example
+ * ```tsx
+ * <Placeholder
+ *   title="Nothing found"
+ *   description="Try again later"
+ *   icon="Question"
+ *   action={<Button>Try again</Button>}
+ * />
+ * ```
+ */
+interface PlaceholderProps {
+    /**
+     * Placeholder title.
+     */
+    title: string;
+    /**
+     * Placeholder description.
+     */
+    description?: string;
+    /**
+     * Placeholder icon.
+     */
+    icon: IconName;
+    /**
+     * Placeholder action.
+     */
+    action?: React.ReactNode;
+}
+/**
+ * Placeholder component for showing status information.
+ *
+ * The component is useful for displaying of any statuses or information consist of image, title, description, and action.
+ *
+ * @example
+ * ```tsx
+ * import { Placeholder } from '@revolut/ui-kit-miniapp'
+ *
+ * function PlaceholderExample() {
+ *   return (
+ *     <Placeholder
+ *       title="Nothing found"
+ *       description="Try again later"
+ *       icon="Question"
+ *       action={<Button>Try again</Button>}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+declare const Placeholder: ({ action, description, icon, title, }: PlaceholderProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for the Popup component.
+ */
+interface PopupProps {
+    /**
+     * Whether the modal is open.
+     */
+    open?: boolean;
+    /**
+     * Callback when the modal is closed.
+     */
+    onClose?: () => void;
+    /**
+     * Modal content.
+     */
+    children?: React.ReactNode;
+    /**
+     * Modal title
+     */
+    title?: string;
+    /**
+     * Modal subtitle
+     */
+    subtitle?: string;
+}
+/**
+ * Popup component for displaying modal content with full screen size.
+ *
+ * @example
+ * ```tsx
+ * import { Button, Calendar, Popup } from '@revolut/ui-kit-miniapp'
+ *
+ * function MyComponent() {
+ *   const [open, setOpen] = useState(false)
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={() => setOpen(true)}>Open modal</Button>
+ *       <Popup open={open} onClose={() => setOpen(false)} title="Select date" subtitle="From 1st of January to 31th of December">
+ *         <Calendar infinite variant="date-range" />
+ *       </Popup>
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+declare const Popup: ({ open, onClose, children, title, subtitle, }: PopupProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Progress steps item definition.
+ */
+interface ProgressStepsItem {
+    /**
+     * Title to show in the step
+     */
+    title: string;
+    /**
+     * Description to show in the step
+     */
+    description: string;
+    /**
+     * Color of the indicator at the start of the step item
+     */
+    color: Color;
+}
+/**
+ * Props for the ProgressSteps component.
+ *
+ * @example
+ * ```tsx
+ * <ProgressSteps
+ *   items={[
+ *     { title: 'Free cancellation', description: 'Until 15th of December', color: 'success' },
+ *     { title: 'No refund', description: 'From 16th of December', color: 'red' },
+ *   ]}
+ * />
+ * ```
+ */
+interface ProgressStepsProps {
+    /**
+     * Steps items to render.
+     */
+    items: ProgressStepsItem[];
+}
+/**
+ * ProgressSteps component for showing current progress on a specific process.
+ *
+ * Provides a vertical container for showing a list of steps with information, description and color to highlight the status of each one.
+ *
+ * @example
+ * ```tsx
+ * import { ProgressSteps } from '@revolut/ui-kit-miniapp'
+ *
+ * function ProgressStepsExample() {
+ *   return (
+ *     <ProgressSteps
+ *       items={[
+ *         { title: 'Free cancellation', description: 'Until 15th of December', color: 'success' },
+ *         { title: 'No refund', description: 'From 16th of December', color: 'red' },
+ *       ]}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+declare const ProgressSteps: ({ items }: ProgressStepsProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * Props for the Spacer component.
  *
@@ -3130,6 +3372,23 @@ interface BottomSheetComponent extends React.FC<BottomSheetProps> {
  */
 declare const BottomSheet: BottomSheetComponent;
 
+/**
+ * Page header action item definition.
+ */
+interface PageHeaderActionItem {
+    /**
+     * Label for the action (not visible)
+     */
+    label: string;
+    /**
+     * Icon to show
+     */
+    icon: IconName;
+    /**
+     * Callback when the button is clicked
+     */
+    onClick: () => void;
+}
 /**
  * Props for the Page.Header component.
  */
@@ -3167,8 +3426,12 @@ interface PageHeaderProps extends NativeHeadingProps {
      * Header title content.
      */
     children?: React.ReactNode;
+    /**
+     * Header actions.
+     */
+    actions?: PageHeaderActionItem[];
 }
-declare const PageHeader: ({ onBack, onClose, labelButtonClose, labelButtonBack, subtitle, description, loading, children, ...rest }: PageHeaderProps) => react_jsx_runtime.JSX.Element;
+declare const PageHeader: ({ onBack, onClose, labelButtonClose, labelButtonBack, subtitle, description, loading, children, actions, ...rest }: PageHeaderProps) => react_jsx_runtime.JSX.Element;
 /**
  * Props for the Page.Main component.
  */
@@ -3486,5 +3749,5 @@ declare const Token: {
     };
 };
 
-export { Action, ActionButton, Avatar, BottomSheet, Button, Calendar, Cell, Checkbox, Copyable, DetailsCell, Dropdown, FilterButton, Footnote, Group, HStack, Icon, Image, Input, Link, Page, 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, PageHeaderProps, PageMainProps, PageProps, PageTabsProps, 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, 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 };