@zonos/amino 5.5.30 → 5.5.31

package/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,86 @@
+import { type ChangeEvent, type ComponentPropsWithoutRef, type KeyboardEvent, type ReactNode } from 'react';
+import { type HelpTextProps } from "../help-text/HelpText";
+import type { BaseProps } from "../../types/BaseProps";
+export type CheckboxProps = Omit<ComponentPropsWithoutRef<'label'>, 'onClick' | 'onChange'> & BaseProps & HelpTextProps & {
+    checked: boolean;
+    disabled?: boolean;
+    icon?: ReactNode;
+    label?: string;
+    labelComponent?: ReactNode;
+    labelDescription?: string;
+    onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>) => void;
+    subtitle?: ReactNode;
+};
+/**
+ * Checkbox component that allows users to select one or more options.
+ * Features include custom styling, animations, and support for various states.
+ *
+ * @example Basic checkbox
+ * <Checkbox
+ *   label="Accept terms and conditions"
+ *   checked={isChecked}
+ *   onChange={setIsChecked}
+ * />
+ *
+ * @example With help text
+ * <Checkbox
+ *   label="Subscribe to newsletter"
+ *   checked={subscribed}
+ *   onChange={setSubscribed}
+ *   helpText="You'll receive updates about our products"
+ * />
+ *
+ * @example With error state
+ * <Checkbox
+ *   label="I agree to terms and conditions"
+ *   checked={agreed}
+ *   onChange={setAgreed}
+ *   error={true}
+ *   helpText="You must agree to the terms to continue"
+ * />
+ *
+ * @example Disabled state
+ * <Checkbox
+ *   label="Premium features"
+ *   checked={hasPremium}
+ *   onChange={setHasPremium}
+ *   disabled={true}
+ * />
+ *
+ * @example With icon
+ * <Checkbox
+ *   label="Enable notifications"
+ *   checked={notificationsEnabled}
+ *   onChange={setNotificationsEnabled}
+ *   icon={<BellIcon size={16} />}
+ * />
+ *
+ * @example With subtitle
+ * <Checkbox
+ *   label="Enable dark mode"
+ *   checked={darkMode}
+ *   onChange={setDarkMode}
+ *   subtitle="Changes the appearance of the application"
+ * />
+ *
+ * @example With label description
+ * <Checkbox
+ *   label="Remember me"
+ *   labelDescription="(Optional)"
+ *   checked={rememberMe}
+ *   onChange={setRememberMe}
+ * />
+ *
+ * @example With custom label component
+ * <Checkbox
+ *   labelComponent={
+ *     <div style={{ display: 'flex', alignItems: 'center' }}>
+ *       <Text>Custom label</Text>
+ *       <Text color="red500" style={{ marginLeft: '8px' }}>*</Text>
+ *     </div>
+ *   }
+ *   checked={customLabel}
+ *   onChange={setCustomLabel}
+ * />
+ */
+export declare const Checkbox: ({ checked, className, disabled, error, helpText, icon, label, labelComponent, labelDescription, onChange, style, subtitle, ...props }: CheckboxProps) => import("react").JSX.Element;

package/components/collapse/Collapse.d.ts

@@ -0,0 +1,87 @@
+import type { ReactNode } from 'react';
+import type { CollapseProps as MuiCollapseProps } from '@mui/material/Collapse';
+import type { BaseProps } from "../../types/BaseProps";
+export type CollapseProps = BaseProps & {
+    children: ReactNode;
+    /**
+     * Size when collapsed
+     * @default 0
+     */
+    collapseSize?: number;
+    /**
+     * Collapsed state
+     * @default false
+     */
+    collapsed?: boolean;
+} & Pick<MuiCollapseProps, 'orientation'>;
+/**
+ * Collapse component animates the expansion and collapse of its content.
+ * It's useful for creating accordions, expandable panels, and other interactive UI elements.
+ *
+ * @example Basic usage
+ * const [open, setOpen] = useState(false);
+ *
+ * <Button onClick={() => setOpen(!open)}>
+ *   {open ? 'Hide' : 'Show'} Content
+ * </Button>
+ * <Collapse collapsed={!open}>
+ *   <Card>
+ *     <Text>This content can be hidden or shown.</Text>
+ *   </Card>
+ * </Collapse>
+ *
+ * @example With partial collapse
+ * const [open, setOpen] = useState(false);
+ *
+ * <Button onClick={() => setOpen(!open)}>
+ *   {open ? 'Show Less' : 'Show More'}
+ * </Button>
+ * <Collapse collapsed={!open} collapseSize={50}>
+ *   <Text>
+ *     This text is partially visible even when collapsed,
+ *     showing the first 50px and hiding the rest.
+ *     Click the button to see the full content.
+ *   </Text>
+ * </Collapse>
+ *
+ * @example Horizontal orientation
+ * const [open, setOpen] = useState(false);
+ *
+ * <Button onClick={() => setOpen(!open)}>
+ *   {open ? 'Hide' : 'Show'} Details
+ * </Button>
+ * <Collapse collapsed={!open} orientation="horizontal">
+ *   <Card>
+ *     <Text>Additional details that expand horizontally.</Text>
+ *   </Card>
+ * </Collapse>
+ *
+ * @example In an accordion
+ * const [expandedSection, setExpandedSection] = useState<string | null>(null);
+ *
+ * const toggleSection = (section: string) => {
+ *   setExpandedSection(expandedSection === section ? null : section);
+ * };
+ *
+ * <VStack>
+ *   <Button onClick={() => toggleSection('section1')}>Section 1</Button>
+ *   <Collapse collapsed={expandedSection !== 'section1'}>
+ *     <Text>Content for Section 1</Text>
+ *   </Collapse>
+ *
+ *   <Button onClick={() => toggleSection('section2')}>Section 2</Button>
+ *   <Collapse collapsed={expandedSection !== 'section2'}>
+ *     <Text>Content for Section 2</Text>
+ *   </Collapse>
+ * </VStack>
+ *
+ * @example With custom styling
+ * <Collapse
+ *   collapsed={!isOpen}
+ *   className="custom-collapse"
+ *   style={{ backgroundColor: '#f5f5f5' }}
+ * >
+ *   <Text>Content with custom styling</Text>
+ * </Collapse>
+ */
+export declare const Collapse: ({ children, className, collapsed, collapseSize, orientation, style, }: CollapseProps) => import("react").JSX.Element;

package/components/connection-map/ConnectionMap.d.ts

@@ -0,0 +1,75 @@
+import type { BaseProps } from "../../types/BaseProps";
+import type { GeoJsonWorld } from "../../types/GeoJsonWorld";
+import type { CountryOption } from "../../utils/hooks/useCountryOptions";
+type Props = BaseProps & {
+    /**
+     * Array of country options to be used for mapping country names to ISO codes
+     */
+    countries: CountryOption[];
+    /**
+     * ISO country code for the origin country
+     */
+    from: string;
+    /**
+     * Height of the map in pixels
+     * @default 400
+     */
+    height?: number;
+    /**
+     * ISO country code for the destination country
+     */
+    to: string;
+    /**
+     * GeoJSON data containing world map information
+     */
+    worldData: GeoJsonWorld | null;
+};
+/**
+ * A geographic map component that visualizes connections between two countries.
+ * Displays a world map with highlighted countries and a connecting line between them,
+ * automatically centering and scaling the view for optimal visualization.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const { countryOptions } = useCountryOptions();
+ * const [worldData, setWorldData] = useState<GeoJsonWorld | null>(null);
+ *
+ * useEffect(() => {
+ *   fetch('/zonos-countries-geojson.json')
+ *     .then(response => response.json())
+ *     .then(data => setWorldData(data));
+ * }, []);
+ *
+ * <ConnectionMap
+ *   countries={countryOptions}
+ *   from="US"
+ *   to="JP"
+ *   worldData={worldData}
+ * />
+ * ```
+ *
+ * @example With custom height
+ * ```tsx
+ * <ConnectionMap
+ *   countries={countryOptions}
+ *   from="GB"
+ *   to="AU"
+ *   height={600}
+ *   worldData={worldData}
+ * />
+ * ```
+ *
+ * @example With custom styling
+ * ```tsx
+ * <ConnectionMap
+ *   className="custom-map-container"
+ *   countries={countryOptions}
+ *   from="CA"
+ *   to="BR"
+ *   style={{ border: '1px solid var(--amino-gray-200)' }}
+ *   worldData={worldData}
+ * />
+ * ```
+ */
+export declare const ConnectionMap: ({ className, countries, from, height, style, to, worldData, }: Props) => import("react").JSX.Element;
+export {};

package/components/country-multi-select/CountryMultiSelectExpanded.d.ts

@@ -0,0 +1,123 @@
+import { type ReactNode } from 'react';
+import type { CountryMultiSelectExpandedOption } from "./CountryMultiSelectExpandedOption";
+import { type HelpTextProps } from "../help-text/HelpText";
+import type { BaseProps } from "../../types/BaseProps";
+export type CountryMultiSelectExpandedProps<CountryCode extends string = string> = BaseProps & HelpTextProps & {
+    /**
+     * Optional actions to display in the component header
+     */
+    actions?: ReactNode;
+    /**
+     * Array of country options to display in the select
+     */
+    countries: CountryMultiSelectExpandedOption<CountryCode>[];
+    /**
+     * Whether the component is in a disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Maximum height of the country selection area in pixels
+     * @default 380
+     */
+    maxHeight?: number;
+    /**
+     * Whether to hide the component header
+     * @default false
+     */
+    noHeader?: boolean;
+    /**
+     * Handler called when selection changes
+     * @param countries Array of country options that are selected
+     */
+    onChange: (countries: CountryMultiSelectExpandedOption<CountryCode>[]) => void;
+    /**
+     * Array of country options that are currently selected
+     */
+    selectedCountries: CountryMultiSelectExpandedOption<CountryCode>[];
+    /**
+     * Whether to hide the search functionality
+     * @default false
+     */
+    withoutSearch?: boolean;
+};
+/**
+ * An expanded view component for selecting multiple countries, organized by regions.
+ * Features include search functionality, group selection, and individual country selection.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [selectedCountries, setSelectedCountries] = useState<CountryMultiSelectExpandedOption[]>([]);
+ * const countries = [
+ *   {
+ *     code: 'US',
+ *     group: 'North America',
+ *     icon: <FlagIcon code="US" />,
+ *     label: 'United States'
+ *   },
+ *   {
+ *     code: 'CA',
+ *     group: 'North America',
+ *     icon: <FlagIcon code="CA" />,
+ *     label: 'Canada'
+ *   }
+ * ];
+ *
+ * <CountryMultiSelectExpanded
+ *   countries={countries}
+ *   onChange={setSelectedCountries}
+ *   selectedCountries={selectedCountries}
+ * />
+ * ```
+ *
+ * @example With disabled countries
+ * ```tsx
+ * const countries = [
+ *   {
+ *     code: 'US',
+ *     group: 'North America',
+ *     icon: <FlagIcon code="US" />,
+ *     label: 'United States'
+ *   },
+ *   {
+ *     code: 'CA',
+ *     disabled: true,
+ *     group: 'North America',
+ *     icon: <FlagIcon code="CA" />,
+ *     label: 'Canada'
+ *   }
+ * ];
+ *
+ * <CountryMultiSelectExpanded
+ *   countries={countries}
+ *   onChange={setSelectedCountries}
+ *   selectedCountries={selectedCountries}
+ * />
+ * ```
+ *
+ * @example With custom actions
+ * ```tsx
+ * <CountryMultiSelectExpanded
+ *   actions={
+ *     <Button onClick={() => console.log('Custom action')} size="small">
+ *       Custom Action
+ *     </Button>
+ *   }
+ *   countries={countries}
+ *   onChange={setSelectedCountries}
+ *   selectedCountries={selectedCountries}
+ * />
+ * ```
+ *
+ * @example With error state
+ * ```tsx
+ * <CountryMultiSelectExpanded
+ *   countries={countries}
+ *   error={!selectedCountries.length}
+ *   helpText={!selectedCountries.length ? 'At least one country is required' : undefined}
+ *   onChange={setSelectedCountries}
+ *   selectedCountries={selectedCountries}
+ * />
+ * ```
+ */
+export declare const CountryMultiSelectExpanded: <CountryCode extends string = string>({ actions, className, countries, disabled, error, helpText, maxHeight, noHeader, onChange, selectedCountries, style, withoutSearch, }: CountryMultiSelectExpandedProps<CountryCode>) => import("react").JSX.Element;

package/components/country-multi-select/CountryMultiSelectExpandedOption.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+export type CountryMultiSelectExpandedOption<CountryCode extends string = string> = {
+    code: CountryCode;
+    disabled?: boolean;
+    /**
+     * Key to group by
+     */
+    group: string;
+    icon: ReactNode | (() => ReactNode);
+    label: string;
+    /**
+     * Having this as a ReactNode breaks storybook (and only storybook, it works fine elsewhere) somehow. I have no idea, but it needs to be a function instead...
+     * @returns
+     */
+    rightDecorator?: () => ReactNode;
+};
+type Props<T extends string> = {
+    country: CountryMultiSelectExpandedOption<T>;
+    isChecked: boolean;
+    onChange: (checked: boolean) => void;
+};
+export declare const _CountryMultiSelectExpandedOptionComponent: <T extends string>({ country, isChecked, onChange, }: Props<T>) => import("react").JSX.Element;
+export {};

package/components/cover-sheet/CoverSheet.d.ts

@@ -0,0 +1,119 @@
+import { type ReactNode } from 'react';
+import { type BaseDialogProps } from "../dialog/BaseDialog";
+export type CoverSheetProps = BaseDialogProps & {
+    /**
+     * Unique ID for the action wrapper element where CoverSheetActions will be portaled into
+     * @default '__cover-sheet-actions'
+     */
+    actionWrapperId?: string;
+    /**
+     * Actions to display in the sheet header, typically buttons
+     */
+    actions?: ReactNode;
+    /**
+     * Custom component to render in the header area
+     */
+    headerComponent?: ReactNode;
+    /**
+     * Whether to hide the close button in the header
+     * @default false
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Title text to display in the header
+     */
+    label: string;
+};
+/**
+ * CoverSheet component provides a sliding panel that covers the current view
+ * from the bottom of the screen. It's commonly used for displaying additional
+ * content or actions without navigating away from the current page.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <Button onClick={() => setOpen(true)}>Open Cover Sheet</Button>
+ *
+ * <CoverSheet
+ *   label="Details"
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ * >
+ *   <p>Content goes here...</p>
+ * </CoverSheet>
+ * ```
+ *
+ * @example With action buttons
+ * ```tsx
+ * <CoverSheet
+ *   label="Edit Profile"
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   actions={
+ *     <>
+ *       <Button onClick={handleCancel}>Cancel</Button>
+ *       <Button variant="primary" onClick={handleSave}>Save</Button>
+ *     </>
+ *   }
+ * >
+ *   <form>
+ *    <fields>
+ *   </form>
+ * </CoverSheet>
+ * ```
+ *
+ * @example With custom header component
+ * ```tsx
+ * <CoverSheet
+ *   label="Advanced Settings"
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   headerComponent={
+ *     <MenuButton action={<Button variant="primary">Actions</Button>}>
+ *       <Menu>
+ *         <MenuItem onClick={handleExport}>Export</MenuItem>
+ *         <MenuItem onClick={handleImport}>Import</MenuItem>
+ *       </Menu>
+ *     </MenuButton>
+ *   }
+ * >
+ *   <p>Content goes here...</p>
+ * </CoverSheet>
+ * ```
+ *
+ * @example Without close button
+ * ```tsx
+ * <CoverSheet
+ *   label="Terms of Service"
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   hideCloseButton={true}
+ *   actions={<Button onClick={handleClose}>I Understand</Button>}
+ * >
+ *   <p>Terms and conditions content...</p>
+ * </CoverSheet>
+ * ```
+ *
+ * @example With dynamic actions using CoverSheetActions
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <CoverSheet
+ *   label="Document Actions"
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   actionWrapperId="document-actions"
+ * >
+ *   <p>Select documents to perform actions on them.</p>
+ *
+ *   {selectedDocuments.length > 0 && (
+ *     <CoverSheetActions coverSheetActionId="document-actions">
+ *       <Button onClick={handleDelete}>Delete Selected</Button>
+ *       <Button variant="primary" onClick={handleDownload}>Download</Button>
+ *     </CoverSheetActions>
+ *   )}
+ * </CoverSheet>
+ * ```
+ */
+export declare const CoverSheet: ({ actions, actionWrapperId, children, className, headerComponent, hideCloseButton, label, onClose, open, ...props }: CoverSheetProps) => import("react").JSX.Element;

package/components/cover-sheet/CoverSheetActions.d.ts

@@ -0,0 +1,115 @@
+import { type ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type CoverSheetProps = BaseProps & {
+    /**
+     * Action elements to be rendered in the CoverSheet header
+     */
+    children: ReactNode;
+    /**
+     * ID of the element in the CoverSheet where these actions should be rendered
+     * Must match the actionWrapperId prop of the parent CoverSheet
+     * @default '__cover-sheet-actions'
+     */
+    coverSheetActionId: string;
+};
+/**
+ * CoverSheetActions component allows for dynamic placement of action buttons
+ * in a CoverSheet header. It uses React Portals to render content in a specific
+ * location within the CoverSheet.
+ *
+ * This component should be used as a child of a CoverSheet component, and the
+ * coverSheetActionId prop must match the actionWrapperId of the parent CoverSheet.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <CoverSheet
+ *   label="Document Actions"
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   actionWrapperId="document-sheet"
+ * >
+ *   <div>Cover sheet content here</div>
+ *
+ *   <CoverSheetActions coverSheetActionId="document-sheet">
+ *     <Button onClick={handleCancel}>Cancel</Button>
+ *     <Button variant="primary" onClick={handleSave}>Save</Button>
+ *   </CoverSheetActions>
+ * </CoverSheet>
+ * ```
+ *
+ * @example Conditional actions
+ * ```tsx
+ * <CoverSheet
+ *   label="Edit Item"
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   actionWrapperId="edit-item-actions"
+ * >
+ *   <form>
+ *    <TextField label="Item Name" value={itemName} onChange={setItemName} />
+ *   </form>
+ *
+ *   {isFormValid && (
+ *     <CoverSheetActions coverSheetActionId="edit-item-actions">
+ *       <Button variant="primary" onClick={handleSubmit}>Submit</Button>
+ *     </CoverSheetActions>
+ *   )}
+ * </CoverSheet>
+ * ```
+ *
+ * @example Dynamic actions based on state
+ * ```tsx
+ * const [selectedItems, setSelectedItems] = useState([]);
+ *
+ * <CoverSheet
+ *   label="Manage Items"
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   actionWrapperId="manage-items-actions"
+ * >
+ * <ItemSelectionUI />
+ *
+ *   <CoverSheetActions coverSheetActionId="manage-items-actions">
+ *     {selectedItems.length === 0 ? (
+ *       <Button disabled>Delete</Button>
+ *     ) : (
+ *       <Button onClick={() => handleDelete(selectedItems)}>
+ *         Delete ({selectedItems.length})
+ *       </Button>
+ *     )}
+ *   </CoverSheetActions>
+ * </CoverSheet>
+ * ```
+ *
+ * @example With multiple CoverSheets
+ * ```tsx
+ * <CoverSheet
+ *   label="Primary Sheet"
+ *   open={primaryOpen}
+ *   onClose={() => setPrimaryOpen(false)}
+ *   actionWrapperId="primary-sheet-actions"
+ * >
+ *   <Button onClick={() => setSecondaryOpen(true)}>
+ *     Open Secondary Sheet
+ *   </Button>
+ *
+ *   <CoverSheetActions coverSheetActionId="primary-sheet-actions">
+ *     <Button onClick={primaryAction}>Primary Action</Button>
+ *   </CoverSheetActions>
+ *
+ *   <CoverSheet
+ *     label="Secondary Sheet"
+ *     open={secondaryOpen}
+ *     onClose={() => setSecondaryOpen(false)}
+ *     actionWrapperId="secondary-sheet-actions"
+ *   >
+ *     <div>Secondary content</div>
+ *
+ *     <CoverSheetActions coverSheetActionId="secondary-sheet-actions">
+ *       <Button onClick={secondaryAction}>Secondary Action</Button>
+ *     </CoverSheetActions>
+ *   </CoverSheet>
+ * </CoverSheet>
+ * ```
+ */
+export declare const CoverSheetActions: ({ children, className, coverSheetActionId, style, }: CoverSheetProps) => import("react").ReactPortal | null;

package/components/currency/Currency.d.ts

@@ -0,0 +1,40 @@
+import type { BaseProps } from "../../types/BaseProps";
+type Props = BaseProps & {
+    amount: number;
+    code: string;
+};
+/**
+ * Currency component displays monetary values with properly formatted numbers and currency codes.
+ * It automatically handles formatting based on the currency code and applies special styling for negative values.
+ *
+ * @example Basic usage
+ * <Currency amount={1250} code="usd" />
+ *
+ * @example Different currencies
+ * <Currency amount={1250} code="usd" /> // Displays as $12.50 USD
+ * <Currency amount={1250} code="eur" /> // Displays as €12.50 EUR
+ * <Currency amount={1250} code="gbp" /> // Displays as £12.50 GBP
+ * <Currency amount={1250} code="jpy" /> // Displays as ¥1,250 JPY
+ *
+ * @example Negative amount (shows in red)
+ * <Currency amount={-1250} code="usd" /> // Displays as -$12.50 USD in red
+ *
+ * @example Custom styling
+ * <Currency
+ *   amount={1250}
+ *   code="usd"
+ *   className="large-currency"
+ *   style={{ fontSize: '20px' }}
+ * />
+ *
+ * @example Zero amount
+ * <Currency amount={0} code="usd" /> // Displays as $0.00 USD
+ *
+ * @example With fractional units
+ * <Currency amount={125.45} code="usd" /> // Displays as $125.45 USD
+ *
+ * @example Large amounts
+ * <Currency amount={1250000} code="usd" /> // Displays as $12,500.00 USD
+ */
+export declare const Currency: ({ amount, className, code, style }: Props) => import("react").JSX.Element;
+export {};