@revolut/ui-kit-miniapp 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolut/ui-kit-miniapp",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "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

@@ -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;
 /**
@@ -1162,6 +1170,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 +1436,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 +1507,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 +1577,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 +1610,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'>;
 /**
@@ -3392,5 +3486,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, 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 };