@zonos/amino 5.5.30 → 5.5.31

package/components/currency/DualCurrency.d.ts

@@ -0,0 +1,33 @@
+import type { BaseProps } from "../../types/BaseProps";
+type Props = BaseProps & {
+    conversionRate?: number;
+    /**
+     * @default 'USD'
+     */
+    foreignCode?: string;
+    /**
+     * @default false
+     */
+    hideForeign?: boolean;
+    /**
+     * @default false
+     */
+    hideLocal?: boolean;
+    isTabular?: boolean;
+    /**
+     * @default 'USD'
+     */
+    localCode?: string;
+    value: number;
+    /**
+     * For when the value is already in the foreign currency, and the conversion needs to be reversed.
+     * The rate can stay the same.
+     * @default false
+     */
+    valueIsForeign?: boolean;
+};
+/**
+ * Can go both ways.
+ */
+export declare const DualCurrency: ({ className, conversionRate, foreignCode, hideForeign, hideLocal, isTabular, localCode, style, value, valueIsForeign, }: Props) => import("react").JSX.Element | null;
+export {};

package/components/danger-zone/DangerZone.d.ts

@@ -0,0 +1,71 @@
+import type { ReactNode } from 'react';
+import { type CardProps } from "../card/Card";
+import type { BaseProps } from "../../types/BaseProps";
+/**
+ * DangerZone component visually highlights areas containing destructive or irreversible actions.
+ * It's a specialized Card component with warning styling to make users cautious about the actions within.
+ *
+ * @example Basic usage
+ * <DangerZone>
+ *   <Text type="bold">Delete Account</Text>
+ *   <Text>This action cannot be undone. All data will be permanently deleted.</Text>
+ *   <Button variant="danger">Delete Account</Button>
+ * </DangerZone>
+ *
+ * @example With multiple actions
+ * <DangerZone>
+ *   <VStack spacing={16}>
+ *     <div>
+ *       <Text type="bold">Reset Settings</Text>
+ *       <Text>Restore all settings to their default values.</Text>
+ *       <Button variant="danger">Reset</Button>
+ *     </div>
+ *     <Divider />
+ *     <div>
+ *       <Text type="bold">Delete Account</Text>
+ *       <Text>This action cannot be undone.</Text>
+ *       <Button variant="danger">Delete</Button>
+ *     </div>
+ *   </VStack>
+ * </DangerZone>
+ *
+ * @example With confirmation UI
+ * const [showConfirmation, setShowConfirmation] = useState(false);
+ *
+ * <DangerZone>
+ *   <Text type="bold">Delete Project</Text>
+ *   <Text>This will permanently delete the project and all associated resources.</Text>
+ *
+ *   {!showConfirmation ? (
+ *     <Button
+ *       variant="danger"
+ *       onClick={() => setShowConfirmation(true)}
+ *     >
+ *       Delete Project
+ *     </Button>
+ *   ) : (
+ *     <VStack>
+ *       <Text fontWeight="bold">Are you sure?</Text>
+ *       <HStack>
+ *         <Button variant="standard" onClick={() => setShowConfirmation(false)}>
+ *           Cancel
+ *         </Button>
+ *         <Button variant="danger" onClick={handleDeleteProject}>
+ *           Yes, Delete
+ *         </Button>
+ *       </HStack>
+ *     </VStack>
+ *   )}
+ * </DangerZone>
+ *
+ * @example With custom styling
+ * <DangerZone
+ *   style={{ maxWidth: '500px' }}
+ *   className="custom-danger-zone"
+ * >
+ *   <Text type="bold">Danger Zone Content</Text>
+ * </DangerZone>
+ */
+export declare const DangerZone: ({ children, className, style, ...props }: BaseProps & CardProps & {
+    children: ReactNode;
+}) => import("react").JSX.Element;

package/components/dialog/BaseDialog.d.ts

@@ -0,0 +1,49 @@
+import React, { type ReactNode } from 'react';
+import { type MotionProps } from 'framer-motion';
+import type { BaseProps } from "../../types/BaseProps";
+import type { Theme } from "../../types/Theme";
+export type BaseDialogProps = BaseProps & {
+    children: ReactNode;
+    fullWindowWidth?: boolean;
+    /** Don't close when clicking outside dialog (on the backdrop)
+     * @default false
+     */
+    noCloseOnBlur?: boolean;
+    /** Don't close on pressing 'escape' key
+     * @default false
+     */
+    noCloseOnEsc?: boolean;
+    onClose?: () => void;
+    open: boolean;
+    /**
+     * framer-motion props for the popup container.
+     *
+     * Gets shallowly combined with defaults.
+     *
+     * @default
+     *
+     * {
+     *   animate: { opacity: 1, scale: 1 },
+     *   exit: { opacity: 0, scale: 0.95 },
+     *   initial: { opacity: 0, scale: 0.95 },
+     *   transition: { duration: 0.3, ease: [0.4, 0, 0.2, 1] },
+     * }
+     */
+    popupMotionProps?: MotionProps;
+    /**
+     * the selector for the root element to append the dialog to
+     * @default 'body'
+     */
+    rootSelector?: string;
+    themeOverride?: Theme;
+    /**
+     * @default 444
+     */
+    width?: number;
+    /**
+     * Disable the backdrop color
+     * @default false
+     */
+    withBackdrop?: boolean;
+};
+export declare const BaseDialog: ({ children, className, fullWindowWidth, noCloseOnBlur, noCloseOnEsc, onClose, open, popupMotionProps, rootSelector, style, themeOverride, width, withBackdrop, }: BaseDialogProps) => React.ReactPortal | null;

package/components/dialog/Dialog.d.ts

@@ -0,0 +1,105 @@
+import { type ReactNode } from 'react';
+import { type BaseDialogProps } from "./BaseDialog";
+export type DialogProps = BaseDialogProps & {
+    actions?: ReactNode;
+    label?: ReactNode;
+    leftActions?: ReactNode;
+    onClose: () => void;
+    subtitle?: ReactNode;
+};
+/**
+ * Dialog component displays important content in a modal window that requires user attention or interaction.
+ * It includes a header with title, optional subtitle, content area, and an optional footer with actions.
+ *
+ * @example Basic dialog
+ * <Dialog
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   label="Dialog Title"
+ * >
+ *   <Text>This is the dialog content.</Text>
+ * </Dialog>
+ *
+ * @example With actions
+ * <Dialog
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   label="Confirmation"
+ *   actions={
+ *     <>
+ *       <Button onClick={() => setIsOpen(false)}>Cancel</Button>
+ *       <Button variant="primary" onClick={handleConfirm}>Confirm</Button>
+ *     </>
+ *   }
+ * >
+ *   <Text>Are you sure you want to proceed with this action?</Text>
+ * </Dialog>
+ *
+ * @example With subtitle
+ * <Dialog
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   label="Account Settings"
+ *   subtitle="Manage your personal information and preferences"
+ * >
+ *   <VStack spacing={16}>
+ *     <Input label="Name" value={name} onChange={(e) => setName(e.target.value)} />
+ *     <Input label="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
+ *   </VStack>
+ * </Dialog>
+ *
+ * @example With left actions
+ * <Dialog
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   label="Edit Item"
+ *   leftActions={<Button variant="danger">Delete</Button>}
+ *   actions={
+ *     <>
+ *       <Button onClick={() => setIsOpen(false)}>Cancel</Button>
+ *       <Button variant="primary">Save</Button>
+ *     </>
+ *   }
+ * >
+ *   <Text>Edit the item details here.</Text>
+ * </Dialog>
+ *
+ * @example Non-modal dialog
+ * <Dialog
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   label="Help Information"
+ *   modal={false}
+ * >
+ *   <Text>This dialog doesn't block interaction with elements behind it.</Text>
+ * </Dialog>
+ *
+ * @example With custom width
+ * <Dialog
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   label="Wide Dialog"
+ *   style={{ '--amino-dialog-width': '800px' }}
+ * >
+ *   <Text>This dialog has a custom width.</Text>
+ * </Dialog>
+ */
+export declare const Dialog: import("react").ForwardRefExoticComponent<import("../../types/BaseProps").BaseProps & {
+    children: ReactNode;
+    fullWindowWidth?: boolean;
+    noCloseOnBlur?: boolean;
+    noCloseOnEsc?: boolean;
+    onClose?: () => void;
+    open: boolean;
+    popupMotionProps?: import("framer-motion").MotionProps;
+    rootSelector?: string;
+    themeOverride?: import("../../types/Theme").Theme;
+    width?: number;
+    withBackdrop?: boolean;
+} & {
+    actions?: ReactNode;
+    label?: ReactNode;
+    leftActions?: ReactNode;
+    onClose: () => void;
+    subtitle?: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/components/dialog/DismissableDialog.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+import type { Theme } from "../../types/Theme";
+export type DismissableDialogIntent = 'danger' | 'warning' | 'info';
+export type DismissableDialogBaseArgs = {
+    intent: DismissableDialogIntent;
+    label: string;
+    subtitle?: ReactNode;
+    /**
+     * @default 350
+     */
+    width?: number;
+};
+export type DismissableDialogProps = BaseProps & DismissableDialogBaseArgs & {
+    actions?: ReactNode;
+    dismissAction: () => void;
+    open: boolean;
+    themeOverride?: Theme;
+};
+export declare const _dismissableDialogGetButtonVariant: (intent: DismissableDialogIntent) => "primary" | "danger" | "warning";
+export declare const DismissableDialog: ({ actions, dismissAction, intent, label, open, style, subtitle, themeOverride, width, }: DismissableDialogProps) => import("react").JSX.Element;

package/components/dialog/alert/AlertContext.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import type { DismissableDialogBaseArgs } from "../DismissableDialog";
+export type AlertDialogArgs = DismissableDialogBaseArgs & {
+    dismissText: string;
+    onDismiss: () => void;
+};
+export declare const AlertContext: import("react").Context<(opts: AlertDialogArgs) => void>;
+type Props = {
+    children: ReactNode;
+};
+export declare const AlertContextProvider: ({ children }: Props) => import("react").JSX.Element;
+export {};

package/components/dialog/alert/AlertDialog.d.ts

@@ -0,0 +1,6 @@
+import { type DismissableDialogProps } from "../DismissableDialog";
+export type AlertDialogProps = DismissableDialogProps & {
+    dismissAction: () => void;
+    dismissText: string;
+};
+export declare const AlertDialog: ({ dismissAction, dismissText, ...props }: AlertDialogProps) => import("react").JSX.Element;

package/components/dialog/alert/useAlert.d.ts

@@ -0,0 +1 @@
+export declare const useAlert: () => (opts: import("./AlertContext").AlertDialogArgs) => void;

package/components/dialog/announcement/AnnouncementDialog.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+import { type BaseDialogProps } from "../BaseDialog";
+export type AnnouncementDialogProps = BaseDialogProps & {
+    announcementId: string;
+    image?: ReactNode;
+    imageWidth?: number;
+    label?: string;
+    title?: ReactNode;
+};
+export declare const AnnouncementDialog: import("react").ForwardRefExoticComponent<import("../../../types/BaseProps").BaseProps & {
+    children: ReactNode;
+    fullWindowWidth?: boolean;
+    noCloseOnBlur?: boolean;
+    noCloseOnEsc?: boolean;
+    onClose?: () => void;
+    open: boolean;
+    popupMotionProps?: import("framer-motion").MotionProps;
+    rootSelector?: string;
+    themeOverride?: import("../../../types/Theme").Theme;
+    width?: number;
+    withBackdrop?: boolean;
+} & {
+    announcementId: string;
+    image?: ReactNode;
+    imageWidth?: number;
+    label?: string;
+    title?: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/components/dialog/confirm/ConfirmContext.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+import type { DismissableDialogBaseArgs } from "../DismissableDialog";
+export type ConfirmDialogArgs = DismissableDialogBaseArgs & {
+    confirmText: string;
+    dismissText: string;
+    onConfirm: (ok: boolean) => void;
+};
+export declare const ConfirmContext: import("react").Context<(opts: ConfirmDialogArgs) => void>;
+type Props = {
+    children: ReactNode;
+};
+export declare const ConfirmContextProvider: ({ children }: Props) => import("react").JSX.Element;
+export {};

package/components/dialog/confirm/ConfirmDialog.d.ts

@@ -0,0 +1,8 @@
+import { type DismissableDialogProps } from "../DismissableDialog";
+export type ConfirmDialogProps = DismissableDialogProps & {
+    confirmAction: () => void;
+    confirmText: string;
+    dismissAction: () => void;
+    dismissText: string;
+};
+export declare const ConfirmDialog: ({ confirmAction, confirmText, dismissAction, dismissText, ...props }: ConfirmDialogProps) => import("react").JSX.Element;

package/components/dialog/confirm/useConfirm.d.ts

@@ -0,0 +1 @@
+export declare const useConfirm: () => (opts: import("./ConfirmContext").ConfirmDialogArgs) => void;

package/components/divider/Divider.d.ts

@@ -0,0 +1,58 @@
+import type { BaseProps } from "../../types/BaseProps";
+type Props = BaseProps & {
+    /**
+     * @default false
+     */
+    noMargin?: boolean;
+    /**
+     * @default false
+     */
+    vertical?: boolean;
+};
+/**
+ * Divider component creates a visual separation between content sections.
+ * It can be displayed horizontally or vertically and supports custom styling.
+ *
+ * @example Basic horizontal divider
+ * <Divider />
+ *
+ * @example Vertical divider
+ * <div style={{ height: '50px', display: 'flex' }}>
+ *   <span>Left content</span>
+ *   <Divider vertical />
+ *   <span>Right content</span>
+ * </div>
+ *
+ * @example Without margin
+ * <Divider noMargin />
+ *
+ * @example Custom styling
+ * <Divider className="custom-divider" style={{ borderColor: '#ff0000' }} />
+ *
+ * @example In a card layout
+ * <Card>
+ *   <CardHeader>Section 1</CardHeader>
+ *   <CardContent>Content for section 1</CardContent>
+ *   <Divider />
+ *   <CardHeader>Section 2</CardHeader>
+ *   <CardContent>Content for section 2</CardContent>
+ * </Card>
+ *
+ * @example Between form fields
+ * <VStack>
+ *   <Input label="First Name" />
+ *   <Divider />
+ *   <Input label="Last Name" />
+ * </VStack>
+ *
+ * @example In sidebar navigation
+ * <VStack>
+ *   <NavItem>Home</NavItem>
+ *   <NavItem>Dashboard</NavItem>
+ *   <Divider />
+ *   <NavItem>Settings</NavItem>
+ *   <NavItem>Profile</NavItem>
+ * </VStack>
+ */
+export declare const Divider: ({ className, noMargin, style, vertical, }: Props) => import("react").JSX.Element;
+export {};

package/components/drop-zone/DropZone.d.ts

@@ -0,0 +1,178 @@
+import { type DropzoneOptions } from 'react-dropzone';
+import { type HelpTextProps } from "../help-text/HelpText";
+import type { BaseProps } from "../../types/BaseProps";
+import type { UploadedFile } from "../../types/UploadedFile";
+export type DropZoneProps = BaseProps & HelpTextProps & {
+    /**
+     * This `disabled` state only applies when no file is selected
+     * @default false
+     * */
+    disabled?: boolean;
+    dropzoneOptions: Omit<DropzoneOptions, 'disabled'>;
+    /**
+     * Text to display in empty state
+     * @default 'Drop your file(s) here'
+     * */
+    instructionText?: string;
+    loading?: boolean;
+    /**
+     * Text to show while loading state is active
+     * @default 'Uploading file(s)...''
+     */
+    loadingText?: string;
+    /**
+     * Whether to show the icon in file upload
+     * @default false
+     * */
+    noIcon?: boolean;
+    /** When the remove icon is clicked on an individual file */
+    onRemoveFile: (index: number) => void;
+    /** Display file info if uploaded file property has data */
+    uploadedFiles: UploadedFile[];
+};
+/**
+ * DropZone component provides a drag-and-drop interface for file uploads.
+ * It supports single or multiple file uploads, image previews, and various states
+ * including loading, error, and success.
+ *
+ * @example Basic usage
+ * const [files, setFiles] = useState<UploadedFile[]>([]);
+ *
+ * const handleDrop = useCallback((acceptedFiles: File[]) => {
+ *   const newFiles = acceptedFiles.map(file => ({
+ *     name: file.name,
+ *     size: `${(file.size / 1024).toFixed(2)} KB`,
+ *     file
+ *   }));
+ *
+ *   setFiles(prevFiles => [...prevFiles, ...newFiles]);
+ * }, []);
+ *
+ * const handleRemoveFile = (index: number) => {
+ *   setFiles(prevFiles => prevFiles.filter((_, i) => i !== index));
+ * };
+ *
+ * <DropZone
+ *   dropzoneOptions={{
+ *     onDrop: handleDrop,
+ *     accept: {'image/*': []}
+ *   }}
+ *   onRemoveFile={handleRemoveFile}
+ *   uploadedFiles={files}
+ * />
+ *
+ * @example With validation and error state
+ * const [files, setFiles] = useState<UploadedFile[]>([]);
+ * const [error, setError] = useState(false);
+ * const [errorText, setErrorText] = useState('');
+ *
+ * const handleDrop = useCallback((acceptedFiles: File[]) => {
+ *   if (acceptedFiles.some(file => file.size > 1024 * 1024)) {
+ *     setError(true);
+ *     setErrorText('File size must be less than 1MB');
+ *     return;
+ *   }
+ *
+ *   setError(false);
+ *   setErrorText('');
+ *   // Process files...
+ * }, []);
+ *
+ * <DropZone
+ *   dropzoneOptions={{
+ *     onDrop: handleDrop,
+ *     maxSize: 1024 * 1024
+ *   }}
+ *   error={error}
+ *   helpText={errorText}
+ *   onRemoveFile={handleRemoveFile}
+ *   uploadedFiles={files}
+ * />
+ *
+ * @example With image previews
+ * const [files, setFiles] = useState<UploadedFile[]>([]);
+ *
+ * const handleDrop = useCallback((acceptedFiles: File[]) => {
+ *   const newFiles = acceptedFiles.map(file => {
+ *     const imageUrl = URL.createObjectURL(file);
+ *
+ *     return {
+ *       name: file.name,
+ *       size: `${(file.size / 1024).toFixed(2)} KB`,
+ *       file,
+ *       imageUrl
+ *     };
+ *   });
+ *
+ *   setFiles(prevFiles => [...prevFiles, ...newFiles]);
+ * }, []);
+ *
+ * <DropZone
+ *   dropzoneOptions={{
+ *     onDrop: handleDrop,
+ *     accept: {'image/*': []}
+ *   }}
+ *   onRemoveFile={handleRemoveFile}
+ *   uploadedFiles={files}
+ * />
+ *
+ * @example With loading state
+ * const [files, setFiles] = useState<UploadedFile[]>([]);
+ * const [loading, setLoading] = useState(false);
+ *
+ * const handleDrop = useCallback(async (acceptedFiles: File[]) => {
+ *   setLoading(true);
+ *
+ *   try {
+ *     // Simulate upload
+ *     await new Promise(resolve => setTimeout(resolve, 2000));
+ *
+ *     const newFiles = acceptedFiles.map(file => ({
+ *       name: file.name,
+ *       size: `${(file.size / 1024).toFixed(2)} KB`,
+ *       file
+ *     }));
+ *
+ *     setFiles(prevFiles => [...prevFiles, ...newFiles]);
+ *   } finally {
+ *     setLoading(false);
+ *   }
+ * }, []);
+ *
+ * <DropZone
+ *   dropzoneOptions={{
+ *     onDrop: handleDrop
+ *   }}
+ *   loading={loading}
+ *   loadingText="Uploading your files..."
+ *   onRemoveFile={handleRemoveFile}
+ *   uploadedFiles={files}
+ * />
+ *
+ * @example With file type restrictions
+ * <DropZone
+ *   dropzoneOptions={{
+ *     onDrop: handleDrop,
+ *     accept: {
+ *       'application/pdf': ['.pdf'],
+ *       'application/msword': ['.doc', '.docx']
+ *     },
+ *     maxFiles: 5
+ *   }}
+ *   instructionText="Drop PDF or Word documents here"
+ *   onRemoveFile={handleRemoveFile}
+ *   uploadedFiles={files}
+ * />
+ *
+ * @example With disabled state
+ * <DropZone
+ *   disabled={true}
+ *   dropzoneOptions={{
+ *     onDrop: handleDrop
+ *   }}
+ *   instructionText="File uploads are currently disabled"
+ *   onRemoveFile={handleRemoveFile}
+ *   uploadedFiles={files}
+ * />
+ */
+export declare const DropZone: ({ className, disabled, dropzoneOptions, error, helpText, instructionText, loading, loadingText, noIcon, onRemoveFile, style, uploadedFiles, }: DropZoneProps) => import("react").JSX.Element;