@zonos/amino 5.5.29 → 5.5.31

package/components/table/Table.d.ts

@@ -0,0 +1,121 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type TableProps = BaseProps & {
+    children: ReactNode;
+    size?: 'medium' | 'small';
+};
+/**
+ * Table component that provides styled tabular data presentation.
+ * Used in combination with TableHead, TableBody, TableRow, TableCell, and TableFooter
+ * to create structured tables with consistent styling.
+ *
+ * @example Basic table
+ * <Table>
+ *   <TableHead>
+ *     <TableRow>
+ *       <TableCell>Name</TableCell>
+ *       <TableCell>Email</TableCell>
+ *       <TableCell>Role</TableCell>
+ *     </TableRow>
+ *   </TableHead>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>John Doe</TableCell>
+ *       <TableCell>john@example.com</TableCell>
+ *       <TableCell>Admin</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell>Jane Smith</TableCell>
+ *       <TableCell>jane@example.com</TableCell>
+ *       <TableCell>User</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ *
+ * @example With column groups
+ * <Table>
+ *   <colgroup>
+ *     <col />
+ *     <col width="40%" />
+ *     <col width="20%" />
+ *   </colgroup>
+ *   <TableHead>
+ *     <TableRow>
+ *       <TableCell>Product</TableCell>
+ *       <TableCell>Description</TableCell>
+ *       <TableCell>Price</TableCell>
+ *     </TableRow>
+ *   </TableHead>
+ *   <TableBody>
+ *     <TableRow>
+ *   </TableBody>
+ * </Table>
+ *
+ * @example With footer
+ * <Table>
+ *   <TableHead>
+ *     <TableRow>
+ *       <TableCell>Item</TableCell>
+ *       <TableCell>Quantity</TableCell>
+ *       <TableCell>Price</TableCell>
+ *     </TableRow>
+ *   </TableHead>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>Widget</TableCell>
+ *       <TableCell>2</TableCell>
+ *       <TableCell>$10.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell>Gadget</TableCell>
+ *       <TableCell>1</TableCell>
+ *       <TableCell>$15.00</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ *   <TableFooter>
+ *     <TableRow>
+ *       <TableCell colSpan={2} align="right">Total:</TableCell>
+ *       <TableCell>$35.00</TableCell>
+ *     </TableRow>
+ *   </TableFooter>
+ * </Table>
+ *
+ * @example Small size table
+ * <Table size="small">
+ *   <TableHead>
+ *     <TableRow>
+ *       <TableCell>Name</TableCell>
+ *       <TableCell>Value</TableCell>
+ *     </TableRow>
+ *   </TableHead>
+ *   <TableBody>
+ *     <TableRow>
+ *   </TableBody>
+ * </Table>
+ *
+ * @example With expandable rows
+ * <Table>
+ *   <TableHead>
+ *     <TableRow>
+ *       <TableCell>Category</TableCell>
+ *       <TableCell>Amount</TableCell>
+ *       <TableCell></TableCell>
+ *     </TableRow>
+ *   </TableHead>
+ *   <TableBody>
+ *     <TableRowCollapse
+ *       collapsed={isCollapsed}
+ *       onToggleCollapse={toggleCollapse}
+ *       rowContent={
+ *         <>
+ *           <TableCell>Shipping</TableCell>
+ *           <TableCell>$15.99</TableCell>
+ *         </>
+ *       }
+ *     >
+ *       <div>Additional shipping details here...</div>
+ *     </TableRowCollapse>
+ *   </TableBody>
+ * </Table>
+ */
+export declare const Table: ({ children, className, size, style, }: TableProps) => import("react").JSX.Element;

package/components/table/TableBody.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export type TableBodyProps = {
+    children: ReactNode;
+    className?: string;
+};
+export declare const TableBody: ({ children, className }: TableBodyProps) => import("react").JSX.Element;

package/components/table/TableCell.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type TableCellProps = BaseProps & {
+    align?: 'center' | 'justify' | 'left' | 'right';
+    borderBottom?: string;
+    children?: ReactNode;
+    colSpan?: number;
+    padding?: string;
+    tag?: 'td' | 'th';
+};
+export declare const TableCell: ({ align, borderBottom, children, className, colSpan, padding, style, tag, }: TableCellProps) => import("react").JSX.Element;

package/components/table/TableFooter.d.ts

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

package/components/table/TableHead.d.ts

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

package/components/table/TableRow.d.ts

@@ -0,0 +1,15 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type TableRowProps = BaseProps & {
+    active?: boolean;
+    children: ReactNode;
+    onClick?: MouseEventHandler<HTMLTableRowElement>;
+    /**
+     * @param rowTestId
+     * @default undefined
+     * @note Only used for testing
+     */
+    rowTestId?: string;
+    withHover?: boolean;
+};
+export declare function TableRow({ active, children, className, onClick, rowTestId, style, withHover, }: TableRowProps): import("react").JSX.Element;

package/components/table/TableRowCollapse.d.ts

@@ -0,0 +1,19 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type TableRowCollapseProps = BaseProps & {
+    children?: ReactNode;
+    /**
+     * @param collapsed
+     * @default false
+     */
+    collapsed?: boolean;
+    onToggleCollapse: MouseEventHandler<HTMLTableRowElement>;
+    rowContent: ReactNode;
+    /**
+     * @param rowKey
+     * @default undefined
+     * @note Only used for testing
+     */
+    rowKey?: string;
+};
+export declare const TableRowCollapse: ({ children, className, collapsed, onToggleCollapse, rowContent, rowKey, style, }: TableRowCollapseProps) => import("react").JSX.Element;

package/components/tabs/Tabs.d.ts

@@ -0,0 +1,76 @@
+import type { BaseProps } from "../../types/BaseProps";
+import type { Variant } from "../../types/Variant";
+export type TabsProps = BaseProps & {
+    /**
+     * Only applies to subtle design
+     * Align tabs horizontally.
+     * @default 'start'
+     */
+    align?: 'start' | 'center' | 'end';
+    items: string[];
+    onChange: (selectedTab: number) => void;
+    selected: number;
+    /**
+     * Use the subtle design
+     * @default false
+     */
+    subtle?: boolean;
+    /**
+     * Variant style for the tabs
+     * @default 'standard'
+     */
+    variant?: Variant;
+};
+/**
+ * Tabs component allows users to navigate between different views or sections within the same context.
+ * Available in standard and subtle design variations.
+ *
+ * @example Basic usage
+ * const [selectedTab, setSelectedTab] = useState(0);
+ *
+ * <Tabs
+ *   items={['Overview', 'Details', 'Settings']}
+ *   selected={selectedTab}
+ *   onChange={setSelectedTab}
+ * />
+ *
+ * {selectedTab === 0 && <div>Overview content</div>}
+ * {selectedTab === 1 && <div>Details content</div>}
+ * {selectedTab === 2 && <div>Settings content</div>}
+ *
+ * @example Subtle design
+ * <Tabs
+ *   items={['Today', 'This Week', 'This Month', 'All Time']}
+ *   selected={selectedTab}
+ *   onChange={setSelectedTab}
+ *   subtle
+ * />
+ *
+ * @example Subtle tabs with center alignment
+ * <Tabs
+ *   items={['Personal', 'Business', 'Enterprise']}
+ *   selected={selectedTab}
+ *   onChange={setSelectedTab}
+ *   subtle
+ *   align="center"
+ * />
+ *
+ * @example Subtle tabs with end alignment
+ * <Tabs
+ *   items={['Day', 'Week', 'Month']}
+ *   selected={selectedTab}
+ *   onChange={setSelectedTab}
+ *   subtle
+ *   align="end"
+ * />
+ *
+ * @example With custom styling
+ * <Tabs
+ *   items={['Active', 'Completed', 'Archived']}
+ *   selected={selectedTab}
+ *   onChange={setSelectedTab}
+ *   className="custom-tabs"
+ *   style={{ marginBottom: '24px' }}
+ * />
+ */
+export declare const Tabs: ({ align, className, items, onChange, selected, style, subtle, variant, }: TabsProps) => import("react").JSX.Element;

package/components/tag/Tag.d.ts

@@ -0,0 +1,46 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+type TagSize = 'base' | 'lg';
+type TagIntent = 'default' | 'error';
+export type TagProps = BaseProps & HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode | string;
+    highlighted?: boolean;
+    icon?: ReactNode;
+    iconRight?: boolean;
+    intent?: TagIntent;
+    onClick?: () => void;
+    onClose: () => void;
+    size?: TagSize;
+};
+/**
+ * Tag displays a small label with optional icon and close button, commonly used for categorization, filters, or metadata.
+ * Supports different intents, sizes, icons, and can be highlighted. The close button triggers the `onClose` callback.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Tag onClose={() => {}}>Brazil</Tag>
+ * ```
+ *
+ * @example With icon
+ * ```tsx
+ * <Tag icon={<CubeIcon size={16} />} onClose={() => {}}>
+ *   HS code for Brazil
+ * </Tag>
+ * ```
+ *
+ * @example Highlighted tag
+ * ```tsx
+ * <Tag highlighted onClose={() => {}}>
+ *   Highlighted Tag
+ * </Tag>
+ * ```
+ *
+ * @example Large size and error intent
+ * ```tsx
+ * <Tag size="lg" intent="error" onClose={() => {}}>
+ *   Error Tag
+ * </Tag>
+ * ```
+ */
+export declare const Tag: ({ children, className, highlighted, icon, iconRight, intent, onClick, onClose, size, style, }: TagProps) => import("react").JSX.Element;
+export {};

package/components/text/Text.d.ts

@@ -0,0 +1,159 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+import type { Color } from "../../types/Color";
+export declare const textOthers: readonly ["code", "subtitle", "small-header", "input-label"];
+type OtherText = (typeof textOthers)[number];
+export declare const textOptions: readonly [{
+    readonly label: "Page Header (3XL) · 30px (1.875rem)";
+    readonly size: "3xl";
+    readonly tag: "h1";
+    readonly type: "page-header";
+    readonly weight: 700;
+}, {
+    readonly label: "Secondary Page Header (3XL) · 30px (1.875rem)";
+    readonly size: "3xl";
+    readonly tag: "h2";
+    readonly type: "secondary-page-header";
+    readonly weight: 500;
+}, {
+    readonly label: "Header (2XL) · 28px (1.75rem)";
+    readonly size: "2xl";
+    readonly tag: "h3";
+    readonly type: "header";
+    readonly weight: 600;
+}, {
+    readonly label: "Description Header (2XL) · 28px (1.75rem)";
+    readonly size: "2xl";
+    readonly tag: "h3";
+    readonly type: "description-header";
+    readonly weight: 700;
+}, {
+    readonly label: "Title (XL) • 22px (1.375rem)";
+    readonly size: "xl";
+    readonly tag: "h4";
+    readonly type: "title";
+    readonly weight: 600;
+}, {
+    readonly label: "Bold Subheader (L) • 18px (1.125rem)";
+    readonly size: "l";
+    readonly tag: "h5";
+    readonly type: "bold-subheader";
+    readonly weight: 700;
+}, {
+    readonly label: "Semi Bold Subheader (L / H4) • 18px (1.125rem)";
+    readonly size: "l";
+    readonly tag: "h5";
+    readonly type: "semi-bold-subheader";
+    readonly weight: 600;
+}, {
+    readonly label: "Subheader (L) • 18px (1.125rem)";
+    readonly size: "l";
+    readonly tag: "h5";
+    readonly type: "subheader";
+    readonly weight: 500;
+}, {
+    readonly label: "Bold Label (Base) • 14px (.875rem)";
+    readonly size: "base";
+    readonly tag: "span";
+    readonly type: "bold-label";
+    readonly weight: 700;
+}, {
+    readonly label: "Label (Base) • 14px (.875rem)";
+    readonly size: "base";
+    readonly tag: "span";
+    readonly type: "label";
+    readonly weight: 500;
+}, {
+    readonly label: "Body (Base) • 14px (.875rem)";
+    readonly size: "base";
+    readonly tag: "span";
+    readonly type: "body";
+    readonly weight: 400;
+}, {
+    readonly label: "Small header (S) • 12px (.75rem)";
+    readonly size: "s";
+    readonly tag: "span";
+    readonly type: "small-header";
+    readonly weight: 600;
+}, {
+    readonly label: "Caption (S) • 12px (.75rem)";
+    readonly size: "s";
+    readonly tag: "span";
+    readonly type: "caption";
+    readonly weight: 400;
+}, {
+    readonly label: "Hint text (XS) • 10px (.625rem)";
+    readonly size: "xs";
+    readonly tag: "span";
+    readonly type: "hint-text";
+    readonly weight: 400;
+}];
+type Size = (typeof textOptions)[number]['size'];
+export type FontType = (typeof textOptions)[number]['type'];
+export type FontWeight = (typeof textOptions)[number]['weight'] | 800;
+type Tag = (typeof textOptions)[number]['tag'];
+type TypographyOverrides = {
+    color?: Color | 'textColorSecondary' | 'textColor';
+    fontSize?: Size;
+    fontWeight?: FontWeight;
+    lineHeight?: Size;
+};
+type TextStyle = FontType | OtherText;
+export type TextProps = BaseProps & {
+    children: ReactNode;
+    isUppercase?: boolean;
+    tag?: Tag;
+    title?: string;
+    type?: TextStyle;
+} & TypographyOverrides;
+/**
+ * Text component that provides consistent typography styles across the application.
+ * It offers various presets for different text styles, sizes, weights, and colors.
+ *
+ * @example Basic usage with default (body) type
+ * <Text>This is body text</Text>
+ *
+ * @example Page Header
+ * <Text type="page-header">Main Page Title</Text>
+ *
+ * @example Header
+ * <Text type="header">Section Title</Text>
+ *
+ * @example Subheader
+ * <Text type="subheader">Subsection Title</Text>
+ *
+ * @example Body text
+ * <Text type="body">This is the main content text of your application.</Text>
+ *
+ * @example Label
+ * <Text type="label">Field label</Text>
+ *
+ * @example Caption
+ * <Text type="caption">Small caption text</Text>
+ *
+ * @example With custom color
+ * <Text color="blue600">Blue text</Text>
+ *
+ * @example With custom weight
+ * <Text fontWeight={700}>Bold text</Text>
+ *
+ * @example With uppercase
+ * <Text isUppercase>This will be uppercase</Text>
+ *
+ * @example Custom HTML tag
+ * <Text tag="h2" type="title">Custom heading level</Text>
+ *
+ * @example Code style
+ * <Text type="code">const example = "code snippet";</Text>
+ *
+ * @example Input label
+ * <Text type="input-label">Input field label</Text>
+ *
+ * @example With custom font size
+ * <Text fontSize="xl">Larger text</Text>
+ *
+ * @example With custom line height
+ * <Text lineHeight="l">Text with increased line height</Text>
+ */
+export declare const Text: ({ children, className, color, fontSize, fontWeight, isUppercase, lineHeight, style, tag, title, type, }: TextProps) => import("react").JSX.Element;
+export {};

package/components/text-avatar/TextAvatar.d.ts

@@ -0,0 +1,25 @@
+export type TextAvatarProps = {
+    className?: string;
+    label: string;
+    style?: React.CSSProperties;
+};
+/**
+ * TextAvatar displays a colored avatar with a single character, typically the first letter of a label, using a unique gradient background based on the label string.
+ * Useful for representing users, entities, or items when no image is available. The color is algorithmically generated for visual distinction.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <TextAvatar label="A" />
+ * ```
+ *
+ * @example With custom label
+ * ```tsx
+ * <TextAvatar label="Brazil" />
+ * ```
+ *
+ * @example With custom style
+ * ```tsx
+ * <TextAvatar label="Zonos" style={{ width: 48, height: 48 }} />
+ * ```
+ */
+export declare const TextAvatar: ({ className, label, style }: TextAvatarProps) => import("react").JSX.Element;

package/components/textarea/Textarea.d.ts

@@ -0,0 +1,141 @@
+import { type ReactNode, type TextareaHTMLAttributes } from 'react';
+type TextareaAdjustableHeightType = {
+    /**
+     * If set to true, the textarea will not expand to fit the content
+     * @default false
+     */
+    disableExpand?: boolean;
+    /**
+     * Max rows that the textarea can expand to when disableExpand is not set
+     * @default 20
+     */
+    maxRows?: number;
+};
+type TextareaType = {
+    /**
+     * Actions to be displayed in a footer within the textarea
+     */
+    actions?: ReactNode;
+    /**
+     * Sets the error state styling with red border
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Help text to be displayed below the textarea
+     */
+    helpText?: ReactNode;
+    /**
+     * Label text to be displayed above the textarea
+     */
+    label?: string;
+    /**
+     * A value (in px) that will determine how wide the input is
+     * @default 100%
+     */
+    width?: number;
+} & TextareaAdjustableHeightType;
+export type TextareaProps = TextareaType & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'>;
+/**
+ * Textarea component provides a multi-line text input field with support for labels,
+ * help text, error states, and auto-expanding height.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [value, setValue] = useState('');
+ *
+ * <Textarea
+ *   label="Description"
+ *   placeholder="Enter description..."
+ *   value={value}
+ *   onChange={e => setValue(e.target.value)}
+ * />
+ * ```
+ *
+ * @example With error state and help text
+ * ```tsx
+ * <Textarea
+ *   label="Description"
+ *   placeholder="Enter description..."
+ *   value={value}
+ *   onChange={handleChange}
+ *   error={!value.trim() && isSubmitted}
+ *   helpText="This field is required"
+ * />
+ * ```
+ *
+ * @example With custom width and actions
+ * ```tsx
+ * <Textarea
+ *   label="Comments"
+ *   width={500}
+ *   value={comments}
+ *   onChange={handleCommentsChange}
+ *   actions={
+ *     <Flex>
+ *       <Button onClick={handleClear}>Clear</Button>
+ *       <Button variant="primary" onClick={handleSave}>Save</Button>
+ *     </Flex>
+ *   }
+ * />
+ * ```
+ *
+ * @example With disabled expand and maximum rows
+ * ```tsx
+ * <Textarea
+ *   label="Limited Input"
+ *   value={value}
+ *   onChange={handleChange}
+ *   disableExpand={false}
+ *   maxRows={5}
+ * />
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <Textarea
+ *   label="Read-only Content"
+ *   value="This content cannot be edited"
+ *   disabled={true}
+ * />
+ * ```
+ *
+ * @example With form integration
+ * ```tsx
+ * <form onSubmit={handleSubmit}>
+ *   <Textarea
+ *     label="Cover Letter"
+ *     name="coverLetter"
+ *     value={formData.coverLetter}
+ *     onChange={e => setFormData({...formData, coverLetter: e.target.value})}
+ *     required
+ *   />
+ *   <Button type="submit">Submit</Button>
+ * </form>
+ * ```
+ */
+export declare const Textarea: import("react").ForwardRefExoticComponent<{
+    /**
+     * Actions to be displayed in a footer within the textarea
+     */
+    actions?: ReactNode;
+    /**
+     * Sets the error state styling with red border
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Help text to be displayed below the textarea
+     */
+    helpText?: ReactNode;
+    /**
+     * Label text to be displayed above the textarea
+     */
+    label?: string;
+    /**
+     * A value (in px) that will determine how wide the input is
+     * @default 100%
+     */
+    width?: number;
+} & TextareaAdjustableHeightType & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "children"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

package/components/theme-select/ThemeSelect.d.ts

@@ -0,0 +1,28 @@
+export type Props = {
+    className?: string;
+    disabled?: boolean;
+    /**
+     * @default select
+     */
+    type?: 'cards' | 'select' | 'toggle';
+};
+/**
+ * ThemeSelect allows users to switch between light and dark themes using cards, a select dropdown, or a toggle switch.
+ * Integrates with the Amino theme system and updates the application theme accordingly. Supports disabling and multiple UI types.
+ *
+ * @example Basic usage (select)
+ * ```tsx
+ * <ThemeSelect />
+ * ```
+ *
+ * @example Card style
+ * ```tsx
+ * <ThemeSelect type="cards" />
+ * ```
+ *
+ * @example Toggle style, disabled
+ * ```tsx
+ * <ThemeSelect type="toggle" disabled />
+ * ```
+ */
+export declare const ThemeSelect: ({ className, disabled, type, }: Props) => import("react").JSX.Element;