@zonos/amino 5.5.30 → 5.5.31

package/components/rich-checkbox/RichCheckbox.d.ts

@@ -0,0 +1,104 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+type RichCheckboxItemType = {
+    checked: boolean;
+    icon?: ReactNode;
+    label: ReactNode;
+    subtitle?: string;
+    value: string;
+};
+export type RichCheckboxProps = BaseProps & {
+    items: RichCheckboxItemType[];
+    onClick: (newVal: string) => void;
+};
+/**
+ * RichCheckbox component provides enhanced checkboxes with support for icons, labels, and subtitles.
+ * Use it for selection interfaces that need visual richness beyond standard checkboxes.
+ *
+ * @example Basic usage
+ * const [selectedOption, setSelectedOption] = useState('option1');
+ *
+ * <RichCheckbox
+ *   items={[
+ *     {
+ *       checked: selectedOption === 'option1',
+ *       label: "Option 1",
+ *       value: "option1"
+ *     },
+ *     {
+ *       checked: selectedOption === 'option2',
+ *       label: "Option 2",
+ *       value: "option2"
+ *     }
+ *   ]}
+ *   onClick={(value) => setSelectedOption(value)}
+ * />
+ *
+ * @example With subtitles
+ * <RichCheckbox
+ *   items={[
+ *     {
+ *       checked: selected === 'standard',
+ *       label: "Standard Shipping",
+ *       subtitle: "3-5 business days",
+ *       value: "standard"
+ *     },
+ *     {
+ *       checked: selected === 'express',
+ *       label: "Express Shipping",
+ *       subtitle: "1-2 business days",
+ *       value: "express"
+ *     }
+ *   ]}
+ *   onClick={(value) => setSelected(value)}
+ * />
+ *
+ * @example With icons
+ * <RichCheckbox
+ *   items={[
+ *     {
+ *       checked: selected === 'visa',
+ *       icon: <CreditCardIcon />,
+ *       label: "Credit Card",
+ *       value: "visa"
+ *     },
+ *     {
+ *       checked: selected === 'paypal',
+ *       icon: <PaypalIcon />,
+ *       label: "PayPal",
+ *       value: "paypal"
+ *     }
+ *   ]}
+ *   onClick={(value) => setSelected(value)}
+ * />
+ *
+ * @example Complete example with icons and subtitles
+ * <RichCheckbox
+ *   items={[
+ *     {
+ *       checked: selected === 'basic',
+ *       icon: <BasicPlanIcon />,
+ *       label: "Basic Plan",
+ *       subtitle: "$9.99/month - For individuals",
+ *       value: "basic"
+ *     },
+ *     {
+ *       checked: selected === 'pro',
+ *       icon: <ProPlanIcon />,
+ *       label: "Pro Plan",
+ *       subtitle: "$19.99/month - For professionals",
+ *       value: "pro"
+ *     },
+ *     {
+ *       checked: selected === 'enterprise',
+ *       icon: <EnterprisePlanIcon />,
+ *       label: "Enterprise Plan",
+ *       subtitle: "$49.99/month - For teams",
+ *       value: "enterprise"
+ *     }
+ *   ]}
+ *   onClick={(value) => setSelected(value)}
+ * />
+ */
+export declare const RichCheckbox: ({ className, items, onClick, style, }: RichCheckboxProps) => import("react").JSX.Element;
+export {};

package/components/rich-radio/RichRadio.d.ts

@@ -0,0 +1,177 @@
+import { type ReactNode } from 'react';
+import { type TooltipProps } from 'react-tooltip';
+import type { BaseProps } from "../../types/BaseProps";
+export type RichRadioItemType<T extends string> = {
+    /**
+     * Sets the radio option to a disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text or React node to display as the primary content
+     */
+    label: ReactNode;
+    /**
+     * Optional secondary text to display below the label
+     */
+    subtitle?: string;
+    /**
+     * Text to display when hovering over the option
+     */
+    tooltip?: string;
+    /**
+     * Custom settings for the tooltip component
+     */
+    tooltipSetting?: Omit<TooltipProps, 'title' | 'children'>;
+    /**
+     * Unique identifier for this option
+     */
+    value: T;
+};
+export type RichRadioProps<T extends string = string> = BaseProps & {
+    /**
+     * Custom icon to show when an option is selected
+     * @default <CheckmarkIcon />
+     */
+    activeIcon?: ReactNode;
+    /**
+     * Custom icon to display on all options
+     */
+    icon?: ReactNode;
+    /**
+     * Height of each radio option
+     * @default 64
+     */
+    itemHeight?: 40 | 64;
+    /**
+     * Array of radio options to display
+     */
+    items: RichRadioItemType<T>[];
+    /**
+     * Function called when a radio option is selected
+     */
+    onChange: (value: T) => void;
+    /**
+     * Function that returns custom content for each option
+     */
+    renderCustomText?: (option: RichRadioItemType<T>) => ReactNode;
+    /**
+     * Currently selected value
+     */
+    value: T | null;
+};
+/**
+ * RichRadio provides a styled radio button group with rich content options.
+ * Each option can have a label, subtitle, tooltip, and custom styling.
+ * Only one option can be selected at a time.
+ *
+ * @example Basic usage with label and subtitle
+ * ```tsx
+ * const [selected, setSelected] = useState<string | null>('option1');
+ *
+ * <RichRadio
+ *   items={[
+ *     { label: 'Option One', subtitle: 'Description for option one', value: 'option1' },
+ *     { label: 'Option Two', subtitle: 'Description for option two', value: 'option2' },
+ *     { label: 'Option Three', value: 'option3' }
+ *   ]}
+ *   onChange={setSelected}
+ *   value={selected}
+ * />
+ * ```
+ *
+ * @example With tooltips
+ * ```tsx
+ * <RichRadio
+ *   items={[
+ *     {
+ *       label: 'Option with tooltip',
+ *       subtitle: 'Hover to see more information',
+ *       tooltip: 'This is additional information about this option',
+ *       tooltipSetting: { delayShow: 400 },
+ *       value: 'option1'
+ *     },
+ *     {
+ *       label: 'Another option',
+ *       value: 'option2'
+ *     }
+ *   ]}
+ *   onChange={handleChange}
+ *   value={selected}
+ * />
+ * ```
+ *
+ * @example With custom icons
+ * ```tsx
+ * <RichRadio
+ *   activeIcon={<CheckmarkIcon />}
+ *   icon={<ChevronRightIcon />}
+ *   items={radioOptions}
+ *   onChange={handleChange}
+ *   value={selected}
+ * />
+ * ```
+ *
+ * @example With custom rendering
+ * ```tsx
+ * <RichRadio
+ *   items={optionsWithMetadata}
+ *   onChange={handleChange}
+ *   renderCustomText={(option) => (
+ *     <div className="custom-option">
+ *       <strong>{option.label}</strong>
+ *       {option.subtitle && <div className="subtitle">{option.subtitle}</div>}
+ *       {option.metadata && <div className="metadata">{option.metadata}</div>}
+ *     </div>
+ *   )}
+ *   value={selected}
+ * />
+ * ```
+ *
+ * @example With compact size
+ * ```tsx
+ * <RichRadio
+ *   itemHeight={40}
+ *   items={radioOptions}
+ *   onChange={handleChange}
+ *   value={selected}
+ * />
+ * ```
+ *
+ * @example With disabled options
+ * ```tsx
+ * <RichRadio
+ *   items={[
+ *     { label: 'Available option', value: 'option1' },
+ *     {
+ *       label: 'Disabled option',
+ *       subtitle: 'This option cannot be selected',
+ *       value: 'option2',
+ *       disabled: true
+ *     }
+ *   ]}
+ *   onChange={handleChange}
+ *   value={selected}
+ * />
+ * ```
+ *
+ * @example With type safety using generics
+ * ```tsx
+ * type PaymentMethod = 'credit' | 'debit' | 'paypal';
+ *
+ * const [paymentType, setPaymentType] = useState<PaymentMethod | null>('credit');
+ *
+ * const paymentOptions: RichRadioItemType<PaymentMethod>[] = [
+ *   { label: 'Credit Card', value: 'credit' },
+ *   { label: 'Debit Card', value: 'debit' },
+ *   { label: 'PayPal', value: 'paypal' }
+ * ];
+ *
+ * <RichRadio<PaymentMethod>
+ *   items={paymentOptions}
+ *   onChange={setPaymentType}
+ *   value={paymentType}
+ * />
+ * ```
+ */
+export declare const RichRadio: <T extends string>({ activeIcon, className, icon, itemHeight, items, onChange, renderCustomText, style, value, }: RichRadioProps<T>) => import("react").JSX.Element;

package/components/rounded-icon/RoundedIcon.d.ts

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+import type { Color } from "../../types/Color";
+import type { Intent } from "../../types/Intent";
+export type RoundedIconProps = BaseProps & {
+    background?: Color;
+    children: ReactNode;
+    color?: Color;
+    intent?: Intent;
+};
+/**
+ * RoundedIcon component displays an icon or element inside a circular or rounded background,
+ * supporting color, intent, and background customization. Useful for avatars, status indicators,
+ * or decorative iconography in lists, buttons, and cards.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <RoundedIcon>
+ *   <TruckDuotoneIcon />
+ * </RoundedIcon>
+ * ```
+ *
+ * @example With intent color
+ * ```tsx
+ * <RoundedIcon intent="primary">
+ *   <TruckDuotoneIcon />
+ * </RoundedIcon>
+ * ```
+ *
+ * @example With custom background and icon color
+ * ```tsx
+ * <RoundedIcon background="gray1000" color="purple400">
+ *   <TruckDuotoneIcon />
+ * </RoundedIcon>
+ * ```
+ *
+ * @example With success intent
+ * ```tsx
+ * <RoundedIcon intent="success">
+ *   <TruckDuotoneIcon />
+ * </RoundedIcon>
+ * ```
+ *
+ * @example In a list item
+ * ```tsx
+ * <ListItem
+ *   decorator={
+ *     <RoundedIcon intent="warning">
+ *       <AlertIcon />
+ *     </RoundedIcon>
+ *   }
+ *   label="Warning"
+ * />
+ * ```
+ */
+export declare const RoundedIcon: ({ background, children, className, color, intent, style, }: RoundedIconProps) => import("react").JSX.Element;

package/components/section/HSection.d.ts

@@ -0,0 +1,87 @@
+import { type ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type HSectionProps = BaseProps & {
+    /**
+     * Content to display within the section
+     */
+    children: ReactNode;
+    /**
+     * Initial collapse state. Only has effect when `collapsible` is set to true
+     * @default false
+     */
+    collapseByDefault?: boolean;
+    /**
+     * Whether the section content can be collapsed
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Title text or element to display at the top of the section
+     */
+    label?: ReactNode;
+    /**
+     * Secondary text or element to display below the label
+     */
+    sublabel?: ReactNode;
+};
+/**
+ * HSection component provides a horizontal section layout with optional
+ * collapsible content, label, and sublabel.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <HSection label="Section Title">
+ *   <p>Content goes here...</p>
+ * </HSection>
+ * ```
+ *
+ * @example With sublabel
+ * ```tsx
+ * <HSection
+ *   label="Account Information"
+ *   sublabel="Personal details and settings"
+ * >
+ *   <FormContent />
+ * </HSection>
+ * ```
+ *
+ * @example Collapsible section
+ * ```tsx
+ * <HSection
+ *   label="Advanced Settings"
+ *   sublabel="Configuration options for advanced users"
+ *   collapsible
+ * >
+ *   <AdvancedSettings />
+ * </HSection>
+ * ```
+ *
+ * @example Collapsed by default
+ * ```tsx
+ * <HSection
+ *   label="Optional Information"
+ *   collapsible
+ *   collapseByDefault
+ * >
+ *   <OptionalFields />
+ * </HSection>
+ * ```
+ *
+ * @example Multiple sections
+ * ```tsx
+ * <VStack>
+ *   <HSection label="Basic Information">
+ *     <BasicInfoForm />
+ *   </HSection>
+ *
+ *   <HSection
+ *     label="Advanced Settings"
+ *     collapsible
+ *     collapseByDefault
+ *   >
+ *     <AdvancedSettings />
+ *   </HSection>
+ * </VStack>
+ * ```
+ */
+export declare const HSection: ({ children, className, collapseByDefault, collapsible, label, style, sublabel, }: HSectionProps) => import("react").JSX.Element;

package/components/section/VSection.d.ts

@@ -0,0 +1,94 @@
+import type { ReactNode } from 'react';
+import type { FontType } from "../text/Text";
+import type { BaseProps } from "../../types/BaseProps";
+export type VSectionProps = BaseProps & {
+    /**
+     * Actions to display in the header, typically buttons
+     */
+    actions?: ReactNode;
+    /**
+     * Content to display within the section
+     */
+    children?: ReactNode;
+    /**
+     * Title text or element to display at the top of the section
+     */
+    label?: ReactNode;
+    /**
+     * The font type to use for the label
+     * @default 'title'
+     */
+    labelType?: FontType;
+    /**
+     * Secondary text or element to display below the label
+     */
+    sublabel?: ReactNode;
+};
+/**
+ * VSection component provides a vertical section layout with an optional header
+ * containing a label, sublabel, and action buttons.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <VSection label="Section Title">
+ *   <p>Content goes here...</p>
+ * </VSection>
+ * ```
+ *
+ * @example With sublabel
+ * ```tsx
+ * <VSection
+ *   label="Payment Information"
+ *   sublabel="Add your payment details"
+ * >
+ *   <PaymentForm />
+ * </VSection>
+ * ```
+ *
+ * @example With actions
+ * ```tsx
+ * <VSection
+ *   label="Order Details"
+ *   actions={
+ *     <>
+ *       <Button>Print</Button>
+ *       <Button variant="primary">Edit</Button>
+ *     </>
+ *   }
+ * >
+ *   <OrderDetails />
+ * </VSection>
+ * ```
+ *
+ * @example Custom label type
+ * ```tsx
+ * <VSection
+ *   label="Order Summary"
+ *   labelType="subheader"
+ *   sublabel="Order #12345"
+ * >
+ *   <OrderSummary />
+ * </VSection>
+ * ```
+ *
+ * @example Multiple sections
+ * ```tsx
+ * <VStack spacing={32}>
+ *   <VSection
+ *     label="Shipping Information"
+ *     actions={<Button>Edit</Button>}
+ *   >
+ *     <ShippingDetails />
+ *   </VSection>
+ *
+ *   <VSection
+ *     label="Payment Method"
+ *     sublabel="Select your payment method"
+ *     actions={<Button>Add Payment</Button>}
+ *   >
+ *     <PaymentOptions />
+ *   </VSection>
+ * </VStack>
+ * ```
+ */
+export declare const VSection: ({ actions, children, className, label, labelType, style, sublabel, }: VSectionProps) => import("react").JSX.Element;

package/components/section/_SectionHeader.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import { type FontType } from "../text/Text";
+import type { BaseProps } from "../../types/BaseProps";
+type Props = BaseProps & {
+    children: ReactNode;
+    type: FontType;
+};
+export declare const SectionHeader: ({ children, className, style, type }: Props) => import("react").JSX.Element;
+export {};

package/components/section/_SectionInnerWrapper.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+type Props = BaseProps & {
+    children: ReactNode;
+};
+export declare const SectionInnerWrapper: ({ children, className, style }: Props) => import("react").JSX.Element;
+export {};

package/components/section/_SectionSubheader.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+type Props = BaseProps & {
+    children: ReactNode;
+};
+export declare const SectionSubheader: ({ children, className, style }: Props) => import("react").JSX.Element;
+export {};

package/components/select/CountryMultiSelect.d.ts

@@ -0,0 +1,89 @@
+import type { ReactNode } from 'react';
+import { type GroupBase, type Props, type SelectComponentsConfig, type StylesConfig } from 'react-select';
+import type { HelpTextProps } from "../help-text/HelpText";
+import type { SelectOption } from "../../types/SelectOption";
+import type { CountryOption, UnavailableCountry } from "../../utils/hooks/useCountryOptions";
+export type CountryMultiSelectProps<Option extends SelectOption<string> = SelectOption<string>, IsMulti extends true = true, Group extends GroupBase<Option> = GroupBase<Option>> = {
+    /**
+     * Custom components to override default react-select components
+     */
+    components?: SelectComponentsConfig<Option, IsMulti, Group>;
+    /**
+     * Array of country options to display in the select
+     */
+    countryOptions: CountryOption<Option['value']>[];
+    /**
+     * Optional icon to display in the select control
+     */
+    icon?: ReactNode;
+    /**
+     * Label for the select field
+     * @default 'Select countries'
+     */
+    label?: string;
+    /**
+     * Handler called when selection changes
+     * @param countryCodes Array of country codes that are selected
+     */
+    onChange: (countryCodes: Option['value'][]) => void;
+    /**
+     * Custom styles to override default react-select styles
+     */
+    styles?: StylesConfig<Option, IsMulti, Group>;
+    /**
+     * Array of countries that should appear disabled with optional explanatory messages
+     */
+    unavailableCountries: UnavailableCountry[];
+    /**
+     * Array of country codes that are currently selected
+     */
+    value: Option['value'][];
+} & Omit<Props<Option, IsMulti, Group>, 'isMulti' | 'onChange' | 'options' | 'value'> & HelpTextProps;
+/**
+ * A multi-select component specialized for selecting multiple countries.
+ * Displays country flags alongside names, organizes countries by region, and includes a "Select all" option.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [selectedCountries, setSelectedCountries] = useState<string[]>([]);
+ * const { countryOptions } = useCountryOptions();
+ *
+ * <CountryMultiSelect
+ *   countryOptions={countryOptions}
+ *   onChange={setSelectedCountries}
+ *   unavailableCountries={[]}
+ *   value={selectedCountries}
+ * />
+ * ```
+ *
+ * @example With unavailable countries
+ * ```tsx
+ * const [selectedCountries, setSelectedCountries] = useState<string[]>(['US', 'CA']);
+ * const { countryOptions } = useCountryOptions();
+ * const unavailableCountries = [
+ *   { code: 'GB', message: 'Coming soon' },
+ *   { code: 'AU', message: 'Not supported' }
+ * ];
+ *
+ * <CountryMultiSelect
+ *   countryOptions={countryOptions}
+ *   label="Shipping Countries"
+ *   onChange={setSelectedCountries}
+ *   unavailableCountries={unavailableCountries}
+ *   value={selectedCountries}
+ * />
+ * ```
+ *
+ * @example With error state
+ * ```tsx
+ * <CountryMultiSelect
+ *   countryOptions={countryOptions}
+ *   error={!selectedCountries.length}
+ *   helpText={!selectedCountries.length ? 'At least one country is required' : undefined}
+ *   onChange={setSelectedCountries}
+ *   unavailableCountries={[]}
+ *   value={selectedCountries}
+ * />
+ * ```
+ */
+export declare const CountryMultiSelect: <T extends string>({ countryOptions, label, onChange, unavailableCountries, value, ...props }: CountryMultiSelectProps<SelectOption<T>>) => import("react").JSX.Element;