@revolut/ui-kit-miniapp 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolut/ui-kit-miniapp",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "license": "Apache-2.0",
   "main": "",
   "types": "types/index.d.ts",
@@ -20,6 +20,7 @@
   ],
   "scripts": {
     "prebuild": "rimraf types",
+    "prepublishOnly": "yarn build",
     "build": "mkdir -p types && cp ../ui-kit-miniapp/dist/index.d.ts ./types/index.d.ts"
   },
   "peerDependencies": {

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 {
@@ -592,6 +592,10 @@ interface CalendarDateProps {
      * Label for the next month button.
      */
     labelNext?: string;
+    /**
+     * Whether the calendar navigates with infinite scroll
+     */
+    infinite?: boolean;
 }
 /**
  * Props for the Calendar component when variant is 'range'.
@@ -630,6 +634,10 @@ interface CalendarRangeProps {
      * Label for the next month button.
      */
     labelNext?: string;
+    /**
+     * Whether the calendar navigates with infinite scroll
+     */
+    infinite?: boolean;
 }
 type CalendarProps = CalendarDateProps | CalendarRangeProps;
 /**
@@ -731,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
@@ -863,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'>;
 /**
@@ -1162,6 +1196,65 @@ interface DetailsCellProps extends NativeDivProps {
  */
 declare const DetailsCell: ({ title, content, note, ...rest }: DetailsCellProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Props for the Dropdown component.
+ *
+ * @example
+ * ```tsx
+ * <Dropdown anchorRef={ref} onClose={handleClose} open>
+ *  Dropdown content
+ * </Dropdown>
+ * ```
+ */
+interface DropdownProps extends NativeDivProps {
+    /**
+     * Element ref where the tooltip is anchored.
+     */
+    anchorRef: React.RefObject<HTMLElement | null>;
+    /**
+     * Callback triggered when the dropdown is closed.
+     */
+    onClose: () => void;
+    /**
+     * Whether the dropdown is shown.
+     */
+    open: boolean;
+    /**
+     * Dropdown content.
+     */
+    children: React.ReactNode;
+}
+/**
+ * Dropdown component for displaying content anchored to an element.
+ *
+ * @example
+ * ```tsx
+ * import { Button, Dropdown } from '@revolut/ui-kit-miniapp'
+ *
+ * // Basic usage
+ * function BasicExample() {
+ *   const ref = useRef(null)
+ *   const [open, setOpen] = useState(false)
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={() => setOpen(false)} ref={ref}>
+ *         Click me to show dropdown!
+ *       </Button>
+ *       <Dropdown
+ *         anchorRef={ref}
+ *         onClose={() => setOpen(false)}
+ *         open={open}
+ *       >
+ *          Dropdown content
+ *       </Dropdown>
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+declare const Dropdown: ({ anchorRef, onClose, open, children, }: DropdownProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * Props for the Footnote component.
  *
@@ -1369,7 +1462,7 @@ type NativeInputProps$3 = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'cla
 /**
  * Input type options.
  */
-type InputType = 'text' | 'email' | 'password' | 'tel' | 'url' | 'number' | 'search';
+type InputType = 'button' | 'text' | 'email' | 'password' | 'tel' | 'url' | 'number' | 'search';
 /**
  * Props for the Input component.
  *
@@ -1440,6 +1533,14 @@ interface InputProps extends NativeInputProps$3 {
      * Callback fired when the clear button is clicked.
      */
     onClear?: () => void;
+    /**
+     * Icon to render at the start of the input content.
+     */
+    icon?: IconName;
+    /**
+     * Icon to render at the end of the input content.
+     */
+    endIcon?: IconName;
 }
 /**
  * Input component for text entry.
@@ -1502,6 +1603,25 @@ interface InputProps extends NativeInputProps$3 {
  *
  * @example
  * ```tsx
+ * import { Input } from '@revolut/ui-kit-miniapp'
+ *
+ * // Button variant
+ * function FormExample() {
+ *   const [value, setValue] = useState('')
+ *   return (
+ *     <Input
+ *        label="Airport"
+ *        icon="AirplaneDeparture"
+ *        type="button"
+ *        onClick={() => openPopup()}
+ *        value={value}
+ *      />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
  * import { Input, VStack } from '@revolut/ui-kit-miniapp'
  *
  * // Form layout
@@ -1516,7 +1636,7 @@ interface InputProps extends NativeInputProps$3 {
  * }
  * ```
  */
-declare const Input: ({ value, defaultValue, onChange, label, placeholder, type, disabled, readOnly, invalid, description, errorMessage, labelButtonClear, onClear, ...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, ...rest }: InputProps) => react_jsx_runtime.JSX.Element;
 
 type NativeAnchorProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'style'>;
 /**
@@ -1603,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.
  *
@@ -1842,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.
  *
@@ -3036,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.
  */
@@ -3073,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.
  */
@@ -3392,5 +3749,5 @@ declare const Token: {
     };
 };
 
-export { Action, ActionButton, Avatar, BottomSheet, Button, Calendar, Cell, Checkbox, Copyable, DetailsCell, 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, 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 };