@zonos/amino 5.5.29 → 5.5.31

package/components/select/CountrySelect.d.ts

@@ -0,0 +1,102 @@
+import { type SelectProps } from "./Select";
+import type { BaseProps } from "../../types/BaseProps";
+import type { CountryOption } from "../../utils/hooks/useCountryOptions";
+type CountrySelectType<T extends string> = {
+    /**
+     * Determines if the field should automatically receive focus when rendered
+     */
+    autoFocus?: SelectProps['autoFocus'];
+    /**
+     * Array of country options to display in the select dropdown
+     */
+    countryOptions: CountryOption<T>[];
+    /**
+     * Optional filter function to determine which countries to show
+     * @param country The country option to filter
+     * @returns Whether the country should be included in the dropdown
+     * @default Boolean - Shows all countries that are truthy
+     */
+    filter?: (country: CountryOption<T>) => boolean;
+    /**
+     * Label displayed above the select input
+     */
+    label?: string;
+    /**
+     * Handler called when selection changes
+     * @param value The selected country value or null if cleared
+     * @param option The selected country option or null if cleared
+     */
+    onChange: SelectProps<T, CountryOption<T>>['onChange'];
+    /**
+     * Text displayed when no option is selected
+     */
+    placeholder?: string;
+    /**
+     * The currently selected country code or null if none selected
+     */
+    value: T | null;
+};
+export type CountrySelectProps<T extends string = string> = CountrySelectType<T> & BaseProps & Omit<SelectProps<T, CountryOption<T>>, keyof CountrySelectType<T> | 'options'>;
+/**
+ * A select component specialized for selecting a single country.
+ * Displays country flags alongside names and supports filtering options.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [selectedCountry, setSelectedCountry] = useState<string | null>(null);
+ * const { countryOptions } = useCountryOptions();
+ *
+ * <CountrySelect
+ *   countryOptions={countryOptions}
+ *   label="Country"
+ *   onChange={(value) => setSelectedCountry(value)}
+ *   placeholder="Select a country"
+ *   value={selectedCountry}
+ * />
+ * ```
+ *
+ * @example With pre-selected value
+ * ```tsx
+ * const [selectedCountry, setSelectedCountry] = useState<string | null>('US');
+ * const { countryOptions } = useCountryOptions();
+ *
+ * <CountrySelect
+ *   countryOptions={countryOptions}
+ *   label="Country"
+ *   onChange={(value) => setSelectedCountry(value)}
+ *   value={selectedCountry}
+ * />
+ * ```
+ *
+ * @example With country filtering
+ * ```tsx
+ * const [selectedCountry, setSelectedCountry] = useState<string | null>(null);
+ * const { countryOptions } = useCountryOptions();
+ *
+ * // Only show EU countries
+ * const euCountries = ['AT', 'BE', 'BG', 'HR', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 'DE', 'GR', 'HU',
+ *   'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'PL', 'PT', 'RO', 'SK', 'SI', 'ES', 'SE'];
+ *
+ * <CountrySelect
+ *   countryOptions={countryOptions}
+ *   filter={(country) => euCountries.includes(country.code)}
+ *   label="EU Country"
+ *   onChange={(value) => setSelectedCountry(value)}
+ *   value={selectedCountry}
+ * />
+ * ```
+ *
+ * @example With error state
+ * ```tsx
+ * <CountrySelect
+ *   countryOptions={countryOptions}
+ *   error={!selectedCountry}
+ *   helpText={!selectedCountry ? 'Country selection is required' : undefined}
+ *   label="Country"
+ *   onChange={(value) => setSelectedCountry(value)}
+ *   value={selectedCountry}
+ * />
+ * ```
+ */
+export declare const CountrySelect: <T extends string>({ autoFocus, countryOptions, filter, label, onChange, placeholder, value, ...props }: CountrySelectProps<T>) => import("react").JSX.Element;
+export {};

package/components/select/MultiSelect.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import type { GroupBase, Props, PropsValue, SelectComponentsConfig, StylesConfig } from 'react-select';
+import type { HelpTextProps } from "../help-text/HelpText";
+import type { BaseProps } from "../../types/BaseProps";
+import type { SelectOption, SelectValue } from "../../types/SelectOption";
+type RequiredProps = 'onChange' | 'options' | 'value';
+export type MultiSelectProps<Option extends SelectOption = SelectOption, IsMulti extends true = true, Group extends GroupBase<Option> = GroupBase<Option>> = BaseProps & {
+    components?: SelectComponentsConfig<Option, IsMulti, Group>;
+    hasGroups?: boolean;
+    icon?: ReactNode;
+    label?: string;
+    styles?: StylesConfig<Option, IsMulti, Group>;
+    /**
+     * @example
+     * value: { label: string; value: string; }[];
+     */
+    value: PropsValue<Option>;
+} & Omit<Props<Option, IsMulti, Group>, 'isMulti' | RequiredProps> & Required<Pick<Props<Option, IsMulti, Group>, RequiredProps>> & HelpTextProps;
+export type GroupOption<Option extends SelectOption> = {
+    data: Option;
+    index: 0;
+    isDisabled: false;
+    isSelected: false;
+    type: 'option';
+} & SelectOption;
+export declare const MultiSelect: <V extends SelectValue, Option extends SelectOption<V>, Group extends GroupBase<Option>>({ closeMenuOnSelect, hideSelectedOptions, ...props }: MultiSelectProps<Option, true, Group>) => import("react").JSX.Element;
+export {};

package/components/select/Select.d.ts

@@ -0,0 +1,127 @@
+import type { ReactNode } from 'react';
+import type { ActionMeta, GroupBase, Props, SelectComponentsConfig, StylesConfig } from 'react-select';
+import type { HelpTextProps } from "../help-text/HelpText";
+import type { BaseProps } from "../../types/BaseProps";
+import type { SelectOption, SelectValue } from "../../types/SelectOption";
+import type { Size } from "../../types/Size";
+type RequiredProps = 'options' | 'value';
+export type SelectProps<V extends SelectValue = SelectValue, Option = SelectOption<V>, IsMulti extends false = false, Group extends GroupBase<Option> = GroupBase<Option>> = BaseProps & {
+    /** Close the select dropdown menu when scrolling outside of menu to prevent graphical jank */
+    closeOnOutsideScroll?: boolean;
+    components?: SelectComponentsConfig<Option, IsMulti, Group>;
+    /**
+     * An easier way to override the option rendering without having to use the typical component props and recreating all the styles.
+     */
+    customOption?: (value: V) => ReactNode;
+    hasGroups?: boolean;
+    icon?: ReactNode;
+    label?: string;
+    /**
+     * @example
+     * onChange={changed => setExampleValue(changed?.value || null)}
+     */
+    onChange: (changed: Option | null, actionMeta: ActionMeta<Option>) => void;
+    size?: Size;
+    styles?: StylesConfig<Option, IsMulti, Group>;
+    /**
+     * @example
+     * value={options.filter(x => x.value === exampleValue)}
+     */
+    value: Option[] | Option | null;
+} & Omit<Props<Option, IsMulti, Group>, 'isMulti' | RequiredProps> & Required<Pick<Props<Option, IsMulti, Group>, RequiredProps>> & HelpTextProps;
+/**
+ * Select component that allows users to select one option from a dropdown list.
+ * It's a wrapper around react-select with Amino styling and additional features.
+ *
+ * @example Basic usage
+ * <Select
+ *   label="Currency"
+ *   options={[
+ *     { label: 'US Dollar (USD)', value: 'USD' },
+ *     { label: 'Euro (EUR)', value: 'EUR' },
+ *     { label: 'British Pound (GBP)', value: 'GBP' }
+ *   ]}
+ *   value={{ label: 'US Dollar (USD)', value: 'USD' }}
+ *   onChange={(option) => setValue(option)}
+ * />
+ *
+ * @example With search functionality
+ * <Select
+ *   label="Currency"
+ *   options={currencyOptions}
+ *   value={selectedCurrency}
+ *   onChange={(option) => setSelectedCurrency(option)}
+ *   isSearchable={true}
+ *   placeholder="Search for a currency..."
+ * />
+ *
+ * @example With icon
+ * <Select
+ *   label="Currency"
+ *   icon={<MoneyIcon size={24} />}
+ *   options={currencyOptions}
+ *   value={selectedCurrency}
+ *   onChange={(option) => setSelectedCurrency(option)}
+ * />
+ *
+ * @example With error state
+ * <Select
+ *   label="Currency"
+ *   options={currencyOptions}
+ *   value={selectedCurrency}
+ *   onChange={(option) => setSelectedCurrency(option)}
+ *   error={true}
+ *   helpText="Please select a currency"
+ * />
+ *
+ * @example With option icons
+ * <Select
+ *   label="Country"
+ *   options={[
+ *     { label: 'United States', value: 'US', icon: <FlagIcon code="US" iconScale="small" /> },
+ *     { label: 'Canada', value: 'CA', icon: <FlagIcon code="CA" iconScale="small" /> },
+ *     { label: 'Mexico', value: 'MX', icon: <FlagIcon code="MX" iconScale="small" /> }
+ *   ]}
+ *   value={selectedCountry}
+ *   onChange={(option) => setSelectedCountry(option)}
+ * />
+ *
+ * @example With custom option rendering
+ * <Select
+ *   label="Currency"
+ *   options={currencyOptions}
+ *   value={selectedCurrency}
+ *   onChange={(option) => setSelectedCurrency(option)}
+ *   customOption={(value) => (
+ *     <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+ *       <span>{value}</span>
+ *       <span style={{ color: 'gray' }}>Rate: 1.0</span>
+ *     </div>
+ *   )}
+ * />
+ *
+ * @example With custom styles
+ * <Select
+ *   label="Currency"
+ *   options={currencyOptions}
+ *   value={selectedCurrency}
+ *   onChange={(option) => setSelectedCurrency(option)}
+ *   styles={{
+ *     menu: (base) => ({
+ *       ...base,
+ *       background: theme.blue100,
+ *     }),
+ *   }}
+ * />
+ *
+ * @example In a dialog with scrolling
+ * <Select
+ *   label="Currency"
+ *   options={currencyOptions}
+ *   value={selectedCurrency}
+ *   onChange={(option) => setSelectedCurrency(option)}
+ *   closeOnOutsideScroll={true}
+ * />
+ */
+export declare const Select: <V extends SelectValue, Option extends SelectOption<V>, Group extends GroupBase<Option> = GroupBase<Option>>({ isClearable, isSearchable, label, value, ...props }: SelectProps<V, Option, false, Group>) => import("react").JSX.Element;
+export {};

package/components/select/_StyledReactSelect.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+import type { GroupBase, OptionProps, Props, SelectComponentsConfig, StylesConfig } from 'react-select';
+import { type HelpTextProps } from "../help-text/HelpText";
+import type { BaseProps } from "../../types/BaseProps";
+import type { SelectOption, SelectValue } from "../../types/SelectOption";
+import type { Size } from "../../types/Size";
+type AdditionalProps<Value> = {
+    customOption?: (value: Value) => ReactNode;
+    hasGroups?: boolean;
+    icon?: ReactNode;
+    label?: string;
+    size?: Size;
+};
+export declare const CheckboxOptionComponent: <Option extends SelectOption, IsMulti extends boolean, Group extends GroupBase<Option>>(props: OptionProps<Option, IsMulti, Group>) => import("react").JSX.Element;
+export type StyledReactSelectProps<V extends SelectValue, Option extends SelectOption<V>, IsMulti extends boolean, Group extends GroupBase<Option>> = {
+    closeOnOutsideScroll?: boolean;
+    components?: SelectComponentsConfig<Option, IsMulti, Group>;
+    size?: Size;
+    styles?: StylesConfig<Option, IsMulti, Group>;
+} & Props<Option, IsMulti, Group> & HelpTextProps & AdditionalProps<Option['value']> & BaseProps;
+export declare const StyledReactSelect: <V extends SelectValue, Option extends SelectOption<V>, IsMulti extends boolean, Group extends GroupBase<Option>>({ closeOnOutsideScroll, components, customOption, error, hasGroups, helpText, icon, label, menuPosition, placeholder, size, style, ...props }: StyledReactSelectProps<V, Option, IsMulti, Group>) => import("react").JSX.Element;
+export {};

package/components/simple-table/SimpleTable.d.ts

@@ -0,0 +1,242 @@
+import React, { type ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+import type { ReactComponent } from "../../types/ReactComponent";
+export type SimpleTableHeaderBaseProps = {
+    /**
+     * Text alignment for a column
+     * @default 'start'
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * @default false
+     * Disable link routing on cells
+     */
+    disabledLink?: boolean;
+    /**
+     * @default 0
+     * Minimum width of column in pixels
+     */
+    minWidth?: number;
+    /**
+     * @default false
+     * Disable padding on cells
+     */
+    noPadding?: boolean;
+    /**
+     * Determines cell content wrapping method
+     * @default 'nowrap'
+     */
+    textWrapMethod?: 'truncate' | 'normal' | 'nowrap';
+    /**
+     * Width of column in percent
+     * @default undefined
+     */
+    width?: number;
+};
+export type SimpleTableHeader<T extends object> = {
+    [Key in keyof T]: {
+        /** The key for each record that the header corresponds to */
+        key: Key;
+        /** null means don't show a header for this column */
+        name: ReactNode | null;
+        renderCustom?: (value: T[Key], item: T) => React.ReactNode;
+    } & SimpleTableHeaderBaseProps;
+}[keyof T extends React.Key ? keyof T : never];
+export type SimpleTableProps<T extends object> = BaseProps & {
+    /**
+     * Custom component for the link. Defaults to <a>
+     */
+    CustomLinkComponent?: ReactComponent<{
+        children: ReactNode;
+        href: string;
+    }>;
+    /**
+     * @default false
+     * Use bordered variant of table
+     */
+    bordered?: boolean;
+    /**
+     * @default false
+     * Enable rows to collapse and expand with more information
+     */
+    collapsible?: {
+        /**
+         * Content to show when row is expanded
+         */
+        collapseContent?: {
+            content: ReactNode;
+            /**
+             * @note Key must match the key of the item it is expanding from
+             */
+            key: string;
+        }[];
+        enabled: boolean;
+        expandedItemKeys: string[];
+        toggleItem: (key: string) => void;
+    };
+    /**
+     * Will make the whole row (each td) an anchor tag so native link functionality exists. If clicking just navigates, use this over onRowClick.
+     */
+    getRowLink?: (item: T) => string;
+    headers: SimpleTableHeader<T>[];
+    items: T[];
+    /** Adding unique list keys */
+    keyExtractor: (item: T) => string;
+    /**
+     * Render loading skeleton
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Number of rows to render while loading
+     * @default 10
+     */
+    loadingItems?: number;
+    /**
+     * Height of loading skeleton
+     * @default 13
+     */
+    loadingSkeletonHeight?: number;
+    /**
+     * Maximum height of the table. Required for the sticky header to work correctly.
+     * @default '100%
+     */
+    maxHeight?: string;
+    /**
+     * @default false,
+     * Disable hover background color effect on rows
+     */
+    noHoverBackground?: boolean;
+    /**
+     * Callback for clicking anywhere on row.
+     *
+     * If having buttons in the table, remember to call e.stopPropagation() to prevent this from firing.
+     */
+    onRowClick?: (item: T) => void;
+    /** Callback for hovering anywhere on row */
+    onRowHover?: (item: T) => void;
+    /**
+     * Component places at the bottom of the table
+     */
+    renderFooter?: ReactNode;
+    /**
+     * @default false
+     * Show checkbox on each row, and checkbox for toggling all in header
+     */
+    selectable?: {
+        /**
+         * If this is true, then onRowClick will call onRowCheckboxChange with the opposite of the current value
+         */
+        anySelected?: boolean;
+        enabled: boolean;
+        headerCheckboxValue?: boolean;
+        isRowCheckboxDisabled?: (item: T, index: number) => boolean;
+        isRowChecked?: (item: T, index: number) => boolean;
+        onHeaderCheckboxChange?: (checked: boolean) => void;
+        onRowCheckboxChange?: (checked: boolean, item: T, index: number) => void;
+        /**
+         * Overrides custom handlers for more control
+         */
+        renderCustomHeaderCheckbox?: ReactNode;
+        /**
+         * Overrides custom handlers for more control
+         */
+        renderCustomRowCheckbox?: (item: T, index: number) => ReactNode;
+    };
+};
+/**
+ * SimpleTable provides a flexible, accessible table component for displaying tabular data.
+ * It supports features like selectable rows, collapsible rows, custom cell rendering, loading skeletons,
+ * and sticky headers. Designed for use cases where you need a straightforward but powerful table UI.
+ *
+ * @example Basic usage
+ * ```tsx
+ * type User = { id: number; name: string; age: number };
+ * const headers: SimpleTableHeader<User>[] = [
+ *   { key: 'name', name: 'Name' },
+ *   { key: 'age', name: 'Age' },
+ * ];
+ * const users: User[] = [
+ *   { id: 1, name: 'Alice', age: 30 },
+ *   { id: 2, name: 'Bob', age: 25 },
+ * ];
+ * <SimpleTable
+ *   headers={headers}
+ *   items={users}
+ *   keyExtractor={user => String(user.id)}
+ * />
+ * ```
+ *
+ * @example With selectable rows
+ * ```tsx
+ * const [selected, setSelected] = useState<number[]>([]);
+ * <SimpleTable
+ *   headers={headers}
+ *   items={users}
+ *   keyExtractor={user => String(user.id)}
+ *   selectable={{
+ *     enabled: true,
+ *     isRowChecked: (item) => selected.includes(item.id),
+ *     onRowCheckboxChange: (checked, item) => {
+ *       setSelected(checked
+ *         ? [...selected, item.id]
+ *         : selected.filter(id => id !== item.id)
+ *       );
+ *     },
+ *   }}
+ * />
+ * ```
+ *
+ * @example With collapsible rows
+ * ```tsx
+ * <SimpleTable
+ *   headers={headers}
+ *   items={users}
+ *   keyExtractor={user => String(user.id)}
+ *   collapsible={{
+ *     enabled: true,
+ *     expandedItemKeys: expandedKeys,
+ *     toggleItem: key => setExpandedKeys(keys =>
+ *       keys.includes(key) ? keys.filter(k => k !== key) : [...keys, key]
+ *     ),
+ *     collapseContent: users.map(user => ({
+ *       key: String(user.id),
+ *       content: <div>More info about {user.name}</div>,
+ *     })),
+ *   }}
+ * />
+ * ```
+ *
+ * @example With custom cell rendering
+ * ```tsx
+ * const headers: SimpleTableHeader<User>[] = [
+ *   { key: 'name', name: 'Name' },
+ *   {
+ *     key: 'age',
+ *     name: 'Age',
+ *     renderCustom: (age) => <Text color={age > 25 ? 'green600' : 'red600'}>{age}</Text>,
+ *   },
+ * ];
+ * ```
+ *
+ * @example With loading skeleton
+ * ```tsx
+ * <SimpleTable
+ *   headers={headers}
+ *   items={[]}
+ *   keyExtractor={user => String(user.id)}
+ *   loading
+ * />
+ * ```
+ *
+ * @example With row click handler
+ * ```tsx
+ * <SimpleTable
+ *   headers={headers}
+ *   items={users}
+ *   keyExtractor={user => String(user.id)}
+ *   onRowClick={user => alert(`Clicked: ${user.name}`)}
+ * />
+ * ```
+ */
+export declare const SimpleTable: <T extends object>({ bordered, className, collapsible, CustomLinkComponent, getRowLink, headers, items, keyExtractor, loading, loadingItems, loadingSkeletonHeight, maxHeight, noHoverBackground, onRowClick, onRowHover, renderFooter, selectable, style, }: SimpleTableProps<T>) => React.JSX.Element;

package/components/simple-table/SimpleTableRow.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { SimpleTableHeader, SimpleTableProps } from './SimpleTable';
+type SimpleTableRowProps<T extends object> = {
+    CustomLinkComponent?: SimpleTableProps<T>['CustomLinkComponent'];
+    bordered: SimpleTableProps<T>['bordered'];
+    collapsible: SimpleTableProps<T>['collapsible'];
+    getRowLink?: (item: T) => string;
+    headers: SimpleTableHeader<T>[];
+    index: number;
+    item: T;
+    noHoverBackground: boolean;
+    onRowClick?: (item: T) => void;
+    onRowHover?: (item: T) => void;
+    rowKey: string;
+    selectable: SimpleTableProps<T>['selectable'];
+};
+/**
+ * SimpleTableRow is an internal component used by SimpleTable to render each table row.
+ * It supports selectable rows, collapsible content, custom cell rendering, and row click/hover handlers.
+ *
+ * @remarks
+ * This component is not intended for direct use. Use `SimpleTable` for all table needs.
+ *
+ * @example Used internally by SimpleTable
+ * ```tsx
+ * <SimpleTable
+ *   headers={headers}
+ *   items={items}
+ *   keyExtractor={item => String(item.id)}
+ * />
+ * ```
+ */
+export declare const SimpleTableRow: <T extends object>({ bordered, collapsible, CustomLinkComponent, getRowLink, headers, index, item, noHoverBackground, onRowClick, onRowHover, rowKey, selectable, }: SimpleTableRowProps<T>) => React.JSX.Element;
+export {};

package/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type SkeletonProps = BaseProps & {
+    animation?: boolean;
+    children?: ReactNode;
+    height?: number;
+    width?: number;
+};
+/**
+ * Skeleton displays a placeholder block to indicate loading content.
+ * It can be used to mimic the shape of text, cards, or other UI elements while data is loading.
+ * Supports custom width, height, animation, and children for more advanced skeleton states.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Skeleton height={20} width={200} />
+ * ```
+ *
+ * @example Animated skeleton
+ * ```tsx
+ * <Skeleton animation height={32} width={300} />
+ * ```
+ *
+ * @example Skeleton inside a card
+ * ```tsx
+ * <Card label="Loading...">
+ *   <Skeleton height={24} width={180} />
+ *   <Skeleton height={16} width={220} />
+ * </Card>
+ * ```
+ *
+ * @example With children (content overlay)
+ * ```tsx
+ * <Skeleton height={100} width={400}>
+ *   <Text color="gray600" type="subheader">
+ *     Generating report...
+ *   </Text>
+ * </Skeleton>
+ * ```
+ *
+ * @example Multiple skeleton lines
+ * ```tsx
+ * <VStack spacing={8}>
+ *   <Skeleton height={16} width={180} />
+ *   <Skeleton height={16} width={220} />
+ *   <Skeleton height={16} width={200} />
+ * </VStack>
+ * ```
+ */
+export declare const Skeleton: ({ animation, children, className, height, style, width, }: SkeletonProps) => import("react").JSX.Element;