@revolut/ui-kit-miniapp 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolut/ui-kit-miniapp",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "Apache-2.0",
   "main": "",
   "types": "types/index.d.ts",
@@ -18,14 +18,13 @@
   "sideEffects": [
     "*.css"
   ],
-  "scripts": {
-    "prebuild": "rimraf types",
-    "prepublishOnly": "pnpm run build",
-    "build": "mkdir -p types && cp ../ui-kit-miniapp/dist/index.d.ts ./types/index.d.ts"
-  },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-is": "^19.0.0"
+  },
+  "scripts": {
+    "prebuild": "rimraf types",
+    "build": "mkdir -p types && cp ../ui-kit-miniapp/dist/index.d.ts ./types/index.d.ts"
   }
-}
+}

package/types/index.d.ts

@@ -68,6 +68,7 @@ declare const DEFAULT_MESSAGES: {
     readonly 'action.open-menu': "Open menu";
     readonly 'action.open-filters': "Open filters";
     readonly 'label.apps': "Apps";
+    readonly 'label.all-apps': "All apps";
     readonly 'label.notifications': "Notifications";
     readonly 'label.accounts': "Accounts";
     readonly 'label.profile': "Profile";
@@ -109,6 +110,9 @@ declare const DEFAULT_MESSAGES: {
     readonly 'label.navigate-menu-item': "Navigate to menu item";
     readonly 'label.global-search-navigate': "Navigate";
     readonly 'label.global-search-select': "Go";
+    readonly 'label.card-locked': "Locked";
+    readonly 'label.card-pending': "Pending";
+    readonly 'label.card-terminated': "Terminated";
 };
 type IntlMessages = Record<keyof typeof DEFAULT_MESSAGES, string>;
 
@@ -2010,6 +2014,58 @@ interface ImageProps$1 extends Omit<BoxProps<'img'>, 'variant' | 'use'> {
     image?: ImageProp$1;
 }
 
+interface MapMarker$1<T = string> {
+    id?: string;
+    title: string;
+    lat: number;
+    lng: number;
+    image?: string;
+    description?: string;
+    data?: T;
+}
+interface MapCenter$1 {
+    lat: number;
+    lng: number;
+}
+/**
+ * Corner points rather than Google's `north`/`south`/`east`/`west` edges, so
+ * each corner is ready to send as a single `<Latitude>,<Longitude>` pair.
+ */
+interface MapBounds {
+    southWest: MapCenter$1;
+    northEast: MapCenter$1;
+}
+interface MapViewportEvent {
+    center: MapCenter$1;
+    zoom: number;
+    bounds: MapBounds;
+}
+interface MapErrorEvent {
+    message: string;
+}
+interface MapControls$1 {
+    zoomControl?: boolean;
+    mapTypeControl?: boolean;
+    scaleControl?: boolean;
+    streetViewControl?: boolean;
+    rotateControl?: boolean;
+    fullscreenControl?: boolean;
+    gestureHandling?: 'auto' | 'cooperative' | 'greedy' | 'none';
+}
+declare const MapLoadingState$1: {
+    readonly BUSY: "busy";
+    readonly FAILED: "failed";
+    readonly LOADING: "loading";
+    readonly READY: "ready";
+};
+type MapLoadingState$1 = ValueOf<typeof MapLoadingState$1>;
+
+declare const SliderVariant: {
+    readonly SLIDER: "slider";
+    readonly RANGE: "range";
+};
+type SliderVariant = ValueOf<typeof SliderVariant>;
+
 declare const ToastTimeout: {
     readonly SHORT: "short";
     readonly LONG: "long";
@@ -4071,6 +4127,176 @@ interface ListProps {
  */
 declare const List: ({ items }: ListProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Marker to display on the map.
+ */
+type MapMarker = MapMarker$1;
+/**
+ * Map center coordinates.
+ */
+type MapCenter = MapCenter$1;
+/**
+ * Map loading state options.
+ * - 'loading': initial script load (skeleton shown)
+ * - 'busy': reloading results over an already-ready map
+ * - 'failed': map failed to load (error state shown)
+ * - 'ready': map is ready (default)
+ */
+type MapLoadingState = MapLoadingState$1;
+/**
+ * Map controls configuration.
+ */
+type MapControls = MapControls$1;
+/**
+ * Props for the Map component.
+ *
+ * @example
+ * ```tsx
+ * <Map apiKey="YOUR_API_KEY" center={{ lat: 51.5074, lng: -0.1278 }} />
+ * ```
+ */
+interface MapProps {
+    /**
+     * Google Maps API key (required).
+     */
+    apiKey: string;
+    /**
+     * Google Maps map ID.
+     */
+    mapId?: string;
+    /**
+     * Initial map center coordinates.
+     * @default { lat: 51.5074, lng: -0.1278 }
+     */
+    center?: MapCenter;
+    /**
+     * Initial zoom level.
+     * @default 11
+     */
+    zoom?: number;
+    /**
+     * Markers to display on the map.
+     */
+    markers?: MapMarker[];
+    /**
+     * Map UI controls configuration.
+     */
+    controls?: MapControls;
+    /**
+     * Loading state override.
+     */
+    loadingState?: MapLoadingState;
+    /**
+     * Label shown when the map fails to load.
+     */
+    labelFailedState?: React__default.ReactNode;
+    /**
+     * Label for the retry button shown on failure.
+     */
+    labelRetry?: React__default.ReactNode;
+    /**
+     * Callback fired when the user retries after a failure.
+     */
+    onRetry?: () => void;
+    /**
+     * Callback fired when the map errors.
+     */
+    onError?: (error: MapErrorEvent) => void;
+    /**
+     * Callback fired when the user finishes dragging the map.
+     */
+    onDragEnd?: (event: MapViewportEvent) => void;
+    /**
+     * Callback fired when the map zoom changes.
+     */
+    onZoom?: (event: MapViewportEvent) => void;
+    /**
+     * Custom marker renderer.
+     */
+    renderMarker?: (marker: MapMarker) => React__default.ReactNode;
+    /**
+     * Custom popup renderer shown when a marker is activated.
+     */
+    renderPopup?: (marker: MapMarker) => React__default.ReactNode;
+}
+/**
+ * Map component for embedding an interactive Google Map.
+ *
+ * Renders a Google Map with optional markers, custom controls, and
+ * custom marker/popup renderers. Requires a Google Maps API key.
+ *
+ * @example
+ * ```tsx
+ * import { Map } from '@revolut/ui-kit-miniapp'
+ *
+ * function BasicExample() {
+ *   return (
+ *     <Map
+ *       apiKey="YOUR_API_KEY"
+ *       center={{ lat: 51.5074, lng: -0.1278 }}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Map } from '@revolut/ui-kit-miniapp'
+ *
+ * // With markers
+ * function MarkersExample() {
+ *   return (
+ *     <Map
+ *       apiKey="YOUR_API_KEY"
+ *       center={{ lat: 51.5074, lng: -0.1278 }}
+ *       markers={[
+ *         { id: 'office', title: 'Revolut Office', lat: 51.5044, lng: -0.0204 },
+ *       ]}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Map } from '@revolut/ui-kit-miniapp'
+ *
+ * // With viewport events
+ * function ViewportExample() {
+ *   return (
+ *     <Map
+ *       apiKey="YOUR_API_KEY"
+ *       center={{ lat: 51.5074, lng: -0.1278 }}
+ *       onDragEnd={(event) => console.log('Center:', event.center)}
+ *       onZoom={(event) => console.log('Zoom:', event.zoom)}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Map } from '@revolut/ui-kit-miniapp'
+ *
+ * // With custom controls
+ * function ControlsExample() {
+ *   return (
+ *     <Map
+ *       apiKey="YOUR_API_KEY"
+ *       center={{ lat: 51.5074, lng: -0.1278 }}
+ *       controls={{
+ *         zoomControl: false,
+ *         fullscreenControl: false,
+ *         streetViewControl: false,
+ *         mapTypeControl: false,
+ *       }}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+declare const Map: ({ apiKey, mapId, center, zoom, markers, controls, loadingState, labelFailedState, labelRetry, onRetry, onError, onDragEnd, onZoom, renderMarker, renderPopup, }: MapProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * Props for the FilterButton component.
  *
@@ -4254,6 +4480,165 @@ interface SearchProps extends NativeInputProps$2 {
  */
 declare const Search: ({ value, defaultValue, onChange, placeholder, labelButtonClear, disabled, readOnly, invalid, ...rest }: SearchProps) => react_jsx_runtime.JSX.Element;
 
+interface SliderBaseProps extends Omit<NativeDivProps, 'onChange' | 'value' | 'defaultValue' | 'variant'> {
+    /**
+     * Minimum allowed value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum allowed value.
+     * @default 1
+     */
+    max?: number;
+    /**
+     * Step between allowed values.
+     * @default 0.01
+     */
+    step?: number;
+    /**
+     * Whether the slider is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Accessible label for the maximum handle.
+     */
+    labelMax?: string;
+    /**
+     * Accessible label for the minimum handle.
+     */
+    labelMin?: string;
+    /**
+     * Whether to show a tooltip with the current value while interacting.
+     * @default false
+     */
+    showTooltip?: boolean;
+}
+/**
+ * Props for the single-value Slider variant.
+ */
+interface SingleSliderProps extends SliderBaseProps {
+    variant: typeof SliderVariant.SLIDER;
+    /**
+     * Controlled value.
+     */
+    value?: number;
+    /**
+     * Default value for uncontrolled usage.
+     */
+    defaultValue?: number;
+    /**
+     * Callback fired continuously while the value changes.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Callback fired once when the user finishes changing the value.
+     */
+    onChangeEnd?: (value: number) => void;
+    /**
+     * Positions to mark and snap to on the track. Values at the `min` and `max`
+     * edges are ignored. Only supported on the single (non-range) variant.
+     */
+    checkpoints?: number[];
+}
+/**
+ * Props for the range Slider variant.
+ */
+interface RangeSliderProps extends SliderBaseProps {
+    variant: typeof SliderVariant.RANGE;
+    /**
+     * Controlled [min, max] values.
+     */
+    value?: [number, number];
+    /**
+     * Default [min, max] values for uncontrolled usage.
+     */
+    defaultValue?: [number, number];
+    /**
+     * Callback fired continuously while the values change.
+     */
+    onChange?: (value: [number, number]) => void;
+    /**
+     * Callback fired once when the user finishes changing the values.
+     */
+    onChangeEnd?: (value: [number, number]) => void;
+}
+/**
+ * Props for the Slider component.
+ */
+type SliderProps = SingleSliderProps | RangeSliderProps;
+/**
+ * Slider component for picking a single numeric value or a min–max range.
+ *
+ * Use sliders for approximate adjustments where dragging is faster than typing an exact number.
+ *
+ * @example
+ * ```tsx
+ * import { Slider } from '@revolut/ui-kit-miniapp'
+ *
+ * // Uncontrolled single value
+ * function SingleExample() {
+ *   return (
+ *     <Slider
+ *       defaultValue={0.5}
+ *       min={0}
+ *       max={1}
+ *       onChange={(value) => console.log('Value:', value)}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Slider } from '@revolut/ui-kit-miniapp'
+ * import { useState } from 'react'
+ *
+ * // Controlled range
+ * function RangeExample() {
+ *   const [value, setValue] = useState<[number, number]>([0.25, 0.75])
+ *
+ *   return (
+ *     <Slider
+ *       variant="range"
+ *       value={value}
+ *       onChange={setValue}
+ *       labelMin="Minimum"
+ *       labelMax="Maximum"
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Slider } from '@revolut/ui-kit-miniapp'
+ *
+ * // With checkpoints and tooltip
+ * function CheckpointsExample() {
+ *   return (
+ *     <Slider
+ *       defaultValue={0.5}
+ *       checkpoints={[0.25, 0.5, 0.75]}
+ *       showTooltip
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Slider } from '@revolut/ui-kit-miniapp'
+ *
+ * // Disabled state
+ * function DisabledExample() {
+ *   return <Slider disabled defaultValue={0.4} />
+ * }
+ * ```
+ */
+declare const Slider: (props: SliderProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * Props for the HStack component.
  *
@@ -4799,6 +5184,10 @@ interface StarRatingProps {
      * Whether it is read only.
      */
     readOnly?: boolean;
+    /**
+     * Size of the Stars.
+     */
+    size?: number;
     /**
      * Amount of StarRating selected.
      */
@@ -4814,7 +5203,7 @@ interface StarRatingProps {
  * // Read only usage
  * function ReadOnlyExample() {
  *   return (
- *     <StarRating color="accent" value={4} readOnly  />
+ *     <StarRating color="accent" value={4} size={32} readOnly  />
  *   )
  * }
  * ```
@@ -4833,7 +5222,7 @@ interface StarRatingProps {
  * }
  * ```
  */
-declare const StarRating: ({ color, onChange, readOnly, value, }: StarRatingProps) => react_jsx_runtime.JSX.Element;
+declare const StarRating: ({ color, onChange, readOnly, size, value, }: StarRatingProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * Subheader variant options.
@@ -6269,5 +6658,5 @@ declare const Token: {
     };
 };
 
-export { Action, ActionButton, Avatar, Badge, BottomSheet, Button, Calendar, Cell, CellSkeleton, Checkbox, CompactInput, Copyable, DetailsCell, Dropdown, FilterButton, Footnote, Group, HStack, Icon, Image, Input, Link, List, MessageBubble, Page, Placeholder, Popup, ProgressSteps, Radio, RootProvider, Search, Spacer, StarRating, Subheader, Switch, TabBar, Text, TextArea, Toast, ToggleButton, Token, VStack, VisuallyHidden, copyToClipboard, nodeChain, useDateFormat, useDateRangeFormat, useDateTimeFormat, useDropdown, useIsRTL, useMoneyFormat, useStatusSheet, useTimeFormat, useToast };
-export type { ActionButtonProps, ActionButtonVariant, ActionProps, AvatarProps, AvatarSize, BadgeProps, BottomSheetActionsProps, BottomSheetContentProps, BottomSheetHeaderProps, BottomSheetProps, ButtonProps, ButtonVariant, CalendarDateProps, CalendarDisabledDays, CalendarProps, CalendarRangeProps, CalendarVariant, CellProps, CellVariant, CheckboxProps, CompactInputProps, CopyableProps, CurrencyDefinition, DateFormatOptions, DateRangeFormatOptions, DateTimeFormatOptions, DetailsCellProps, DropdownOptions, DropdownProps, DropdownState, FilterButtonProps, FootnoteProps, GroupProps, GroupVariant, HStackProps, IconName, IconProps, ImageFit, ImageProp, ImageProps, InputProps, InputType, IntlMessages, LinkProps, ListProps, MessageBubbleProps, PageHeaderProps, PageMainProps, PageProps, PageTabsProps, PlaceholderProps, PopupProps, ProgressStepsProps, RadioProps, RootProviderProps, SearchProps, Space, SpacerProps, StackAlignment, StarRatingProps, StatusSheetAction, StatusSheetInstance, StatusSheetOptions, StatusSheetVariant, SubheaderProps, SubheaderVariant, SwitchProps, TabBarItem, TabBarProps, TabBarVariant, TextAreaProps, TextProps, TextVariant, ThemeBackground, ThemeMode, TimeFormatOptions, ToastActions, ToastProps, ToggleButtonProps, UseMoneyFormatOptions, VStackProps, VisuallyHiddenProps };
+export { Action, ActionButton, Avatar, Badge, BottomSheet, Button, Calendar, Cell, CellSkeleton, Checkbox, CompactInput, Copyable, DetailsCell, Dropdown, FilterButton, Footnote, Group, HStack, Icon, Image, Input, Link, List, Map, MessageBubble, Page, Placeholder, Popup, ProgressSteps, Radio, RootProvider, Search, Slider, SliderVariant, Spacer, StarRating, Subheader, Switch, TabBar, Text, TextArea, Toast, ToggleButton, Token, VStack, VisuallyHidden, copyToClipboard, nodeChain, useDateFormat, useDateRangeFormat, useDateTimeFormat, useDropdown, useIsRTL, useMoneyFormat, useStatusSheet, useTimeFormat, useToast };
+export type { ActionButtonProps, ActionButtonVariant, ActionProps, AvatarProps, AvatarSize, BadgeProps, BottomSheetActionsProps, BottomSheetContentProps, BottomSheetHeaderProps, BottomSheetProps, ButtonProps, ButtonVariant, CalendarDateProps, CalendarDisabledDays, CalendarProps, CalendarRangeProps, CalendarVariant, CellProps, CellVariant, CheckboxProps, CompactInputProps, CopyableProps, CurrencyDefinition, DateFormatOptions, DateRangeFormatOptions, DateTimeFormatOptions, DetailsCellProps, DropdownOptions, DropdownProps, DropdownState, FilterButtonProps, FootnoteProps, GroupProps, GroupVariant, HStackProps, IconName, IconProps, ImageFit, ImageProp, ImageProps, InputProps, InputType, IntlMessages, LinkProps, ListProps, MapCenter, MapControls, MapLoadingState, MapMarker, MapProps, MessageBubbleProps, PageHeaderProps, PageMainProps, PageProps, PageTabsProps, PlaceholderProps, PopupProps, ProgressStepsProps, RadioProps, RangeSliderProps, RootProviderProps, SearchProps, SingleSliderProps, SliderProps, Space, SpacerProps, StackAlignment, StarRatingProps, StatusSheetAction, StatusSheetInstance, StatusSheetOptions, StatusSheetVariant, SubheaderProps, SubheaderVariant, SwitchProps, TabBarItem, TabBarProps, TabBarVariant, TextAreaProps, TextProps, TextVariant, ThemeBackground, ThemeMode, TimeFormatOptions, ToastActions, ToastProps, ToggleButtonProps, UseMoneyFormatOptions, VStackProps, VisuallyHiddenProps };