@zonos/amino 5.5.29 → 5.5.31

package/components/avatar/AvatarBase.d.ts

@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type ImageSize = 16 | 24 | 32 | 40 | 48 | 56 | 64;
+export declare const avatarShapes: {
+    readonly round: "50%";
+    readonly rounded: "";
+    readonly square: "0px";
+};
+type AvatarShape = keyof typeof avatarShapes;
+type AvatarStyleProps = {
+    backgroundColor?: string;
+    backgroundPosition?: string;
+    backgroundSize?: string;
+    backgroundUrl?: string;
+};
+export type AvatarProps = {
+    /** @default false */
+    bordered?: boolean;
+    /** @default round */
+    shape?: AvatarShape;
+    /** @default 32 px */
+    size?: ImageSize;
+};
+export type FullAvatarProps = BaseProps & {
+    /** @default false */
+    bordered?: boolean;
+    /** @default round */
+    shape?: AvatarShape;
+    /** @default 32 px */
+    size?: ImageSize;
+};
+type AvatarBaseProps = BaseProps & {
+    children?: ReactNode;
+} & Required<AvatarProps> & AvatarStyleProps;
+/**
+ * AvatarBase is the foundation component for all avatar variations in the Amino design system.
+ * It provides consistent styling and layout for avatars with customizable appearance.
+ *
+ * This component is not typically used directly. Instead, use one of the specialized
+ * avatar components like ImageAvatar or UserAvatar that build upon this base.
+ *
+ * @component Avatar
+ *
+ * @example Custom avatar implementation
+ * <AvatarBase
+ *   backgroundColor={theme.blue100}
+ *   bordered={true}
+ *   shape="rounded"
+ *   size={48}
+ * >
+ *   <Text fontWeight={700} textAlign="center">AB</Text>
+ * </AvatarBase>
+ *
+ * @example Background image with custom styling
+ * <AvatarBase
+ *   backgroundUrl="https://example.com/image.jpg"
+ *   backgroundSize="cover"
+ *   backgroundPosition="center"
+ *   shape="square"
+ *   size={64}
+ * />
+ *
+ * @example Avatar with child content
+ * <AvatarBase
+ *   size={40}
+ *   shape="round"
+ *   backgroundColor={theme.gray200}
+ * >
+ *   <IconUser size={24} color="gray600" />
+ * </AvatarBase>
+ */
+export declare const AvatarBase: ({ backgroundColor, backgroundPosition, backgroundSize, backgroundUrl, bordered, children, className, shape, size, style, }: AvatarBaseProps) => import("react").JSX.Element;
+export {};

package/components/avatar/ImageAvatar.d.ts

@@ -0,0 +1,56 @@
+import { type FullAvatarProps } from "./AvatarBase";
+export type ImageAvatarProps = {
+    imageUrl: string;
+} & FullAvatarProps;
+/**
+ * ImageAvatar displays an image in a standardized avatar format with consistent sizing and styling.
+ * Use this component when you need to show profile pictures, product images, or any custom image
+ * in an avatar format.
+ *
+ * @component Avatar
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ImageAvatar
+ *   imageUrl="https://example.com/profile.jpg"
+ * />
+ * ```
+ *
+ * @example With custom size and shape
+ * ```tsx
+ * <ImageAvatar
+ *   imageUrl="https://example.com/profile.jpg"
+ *   size={48}
+ *   shape="square"
+ *   bordered
+ * />
+ * ```
+ *
+ * @example Multiple sizes in a user profile
+ * ```tsx
+ * <VStack gap={16} alignItems="center">
+ *   <ImageAvatar
+ *     imageUrl="https://example.com/profile.jpg"
+ *     size={64}
+ *     bordered
+ *   />
+ *   <Text type="heading">Jane Smith</Text>
+ *   <Text type="subheader" color={theme.gray600}>Product Manager</Text>
+ * </VStack>
+ * ```
+ *
+ * @example Image avatars in a horizontal list
+ * ```tsx
+ * <HStack gap={8}>
+ *   {users.map(user => (
+ *     <ImageAvatar
+ *       key={user.id}
+ *       imageUrl={user.profileImage}
+ *       size={32}
+ *       shape="rounded"
+ *     />
+ *   ))}
+ * </HStack>
+ * ```
+ */
+export declare const ImageAvatar: ({ bordered, className, imageUrl, shape, size, style, }: ImageAvatarProps) => import("react").JSX.Element;

package/components/avatar/UserAvatar.d.ts

@@ -0,0 +1,35 @@
+import { type FullAvatarProps } from "./AvatarBase";
+export type UserAvatarProps = FullAvatarProps;
+/**
+ * UserAvatar displays a default user placeholder avatar.
+ * Use this component when you need to show a user avatar but don't have a specific image,
+ * such as for anonymous users or as a fallback when user images are unavailable.
+ *
+ * @component Avatar
+ *
+ * @example Basic usage
+ * <UserAvatar />
+ *
+ * @example Custom size with border
+ * <UserAvatar
+ *   size={48}
+ *   bordered
+ * />
+ *
+ * @example Different shapes
+ * <HStack gap={16}>
+ *   <UserAvatar shape="round" />
+ *   <UserAvatar shape="rounded" />
+ *   <UserAvatar shape="square" />
+ * </HStack>
+ *
+ * @example In a user card
+ * <Card>
+ *   <VStack gap={8} alignItems="center" padding={16}>
+ *     <UserAvatar size={64} bordered />
+ *     <Text type="heading">Guest User</Text>
+ *     <Text type="subheader" color={theme.gray600}>Unregistered</Text>
+ *   </VStack>
+ * </Card>
+ */
+export declare const UserAvatar: ({ bordered, className, shape, size, style, }: UserAvatarProps) => import("react").JSX.Element;

package/components/badge/Badge.d.ts

@@ -0,0 +1,72 @@
+import type { ReactNode } from 'react';
+import type { FontWeight } from "../text/Text";
+import type { BaseProps } from "../../types/BaseProps";
+type BadgeColor = 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'purple' | 'red';
+type Size = 'small' | 'default';
+export type BadgeProps = BaseProps & {
+    bold?: boolean;
+    children?: ReactNode | string;
+    color?: BadgeColor;
+    /**
+     * @default 600
+     */
+    fontWeight?: FontWeight;
+    icon?: ReactNode;
+    /**
+     * @default false
+     */
+    iconRight?: boolean;
+    rounded?: boolean;
+    /**
+     * @default default
+     */
+    size?: Size;
+};
+/**
+ * Badge component used to highlight information, show status, or categorize content.
+ * Available in different colors, sizes, and styles to fit various use cases.
+ *
+ * @example Basic badge
+ * <Badge>New</Badge>
+ *
+ * @example With different colors
+ * <Badge color="blue">Info</Badge>
+ * <Badge color="green">Success</Badge>
+ * <Badge color="red">Error</Badge>
+ * <Badge color="orange">Warning</Badge>
+ * <Badge color="purple">Beta</Badge>
+ * <Badge color="cyan">Update</Badge>
+ * <Badge color="gray">Default</Badge>
+ *
+ * @example With icon
+ * <Badge icon={<CheckmarkIcon />}>Verified</Badge>
+ *
+ * @example With right aligned icon
+ * <Badge icon={<ArrowRightIcon />} iconRight>View more</Badge>
+ *
+ * @example Small size
+ * <Badge size="small">Tag</Badge>
+ *
+ * @example Bold style (inverted colors)
+ * <Badge bold>Featured</Badge>
+ * <Badge bold color="green">Approved</Badge>
+ *
+ * @example With rounded corners
+ * <Badge rounded>Status</Badge>
+ *
+ * @example Custom font weight
+ * <Badge fontWeight={800}>Important</Badge>
+ *
+ * @example Combining multiple props
+ * <Badge
+ *   color="purple"
+ *   bold
+ *   icon={<StarIcon />}
+ *   rounded
+ *   size="small"
+ * >
+ *   Featured
+ * </Badge>
+ */
+export declare const Badge: ({ bold, children, className, color, fontWeight, icon, iconRight, rounded, size, style, }: BadgeProps) => import("react").JSX.Element;
+export {};

package/components/banner/Banner.d.ts

@@ -0,0 +1,83 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+import type { Intent } from "../../types/Intent";
+export type BannerProps = BaseProps & {
+    children?: ReactNode;
+    footerActions?: ReactNode;
+    headerActions?: ReactNode;
+    intent?: Exclude<Intent, 'danger' | 'secondary' | 'primary'>;
+    onClose?: () => void;
+    title?: ReactNode;
+};
+/**
+ * Banner component displays prominent messages or notifications with different intents.
+ * Use banners to communicate important information, status updates, or required actions.
+ *
+ * @example Basic banner
+ * <Banner title="Information">
+ *   This is a basic banner with important information.
+ * </Banner>
+ *
+ * @example With different intents
+ * <Banner intent="info" title="Information">
+ *   This contains helpful information for the user.
+ * </Banner>
+ *
+ * <Banner intent="success" title="Success">
+ *   The operation was completed successfully.
+ * </Banner>
+ *
+ * <Banner intent="warning" title="Warning">
+ *   This action will have side effects.
+ * </Banner>
+ *
+ * <Banner intent="error" title="Error">
+ *   There was a problem completing the operation.
+ * </Banner>
+ *
+ * @example With close button
+ * <Banner
+ *   intent="info"
+ *   title="System Notification"
+ *   onClose={() => setVisible(false)}
+ * >
+ *   The system will be undergoing maintenance in two hours.
+ * </Banner>
+ *
+ * @example With header actions
+ * <Banner
+ *   intent="info"
+ *   title="New feature available"
+ *   headerActions={
+ *     <Button variant="link" size="small">Learn more</Button>
+ *   }
+ * >
+ *   Try out our new reporting dashboard.
+ * </Banner>
+ *
+ * @example With footer actions
+ * <Banner
+ *   intent="warning"
+ *   title="Update required"
+ *   footerActions={
+ *     <>
+ *       <Button variant="standard" size="small">Remind me later</Button>
+ *       <Button variant="primary" size="small">Update now</Button>
+ *     </>
+ *   }
+ * >
+ *   Your software needs to be updated to the latest version.
+ * </Banner>
+ *
+ * @example With both title and content
+ * <Banner intent="success" title="Order placed">
+ *   <Text>Your order #12345 has been placed successfully.</Text>
+ *   <Text>You will receive a confirmation email shortly.</Text>
+ * </Banner>
+ *
+ * @example Content only (no title)
+ * <Banner intent="info">
+ *   This is a simple notification message without a title.
+ * </Banner>
+ */
+export declare const Banner: ({ children, className, footerActions, headerActions, intent, onClose, style, title, }: BannerProps) => import("react").JSX.Element;

package/components/button/Button.d.ts

@@ -0,0 +1,140 @@
+import type React from 'react';
+import { type ComponentPropsWithoutRef, type MouseEventHandler, type ReactNode } from 'react';
+import { type SpinnerProps } from "../spinner/Spinner";
+import type { BaseProps } from "../../types/BaseProps";
+import type { Color } from "../../types/Color";
+import type { Size } from "../../types/Size";
+import type { Theme } from "../../types/Theme";
+import type { Variant } from "../../types/Variant";
+type ButtonBase = BaseProps & {
+    background?: Color | 'inherit';
+    children?: ReactNode;
+    color?: Color | 'inherit';
+    disabled?: boolean;
+    fitContentWidth?: boolean;
+    hoverBackground?: Color | 'inherit';
+    hoverColor?: Color | 'inherit';
+    icon?: ReactNode;
+    iconRight?: boolean;
+    /** @default false */
+    loading?: boolean;
+    loadingText?: string;
+    /**
+     * Disable ripple effect
+     * @default false
+     */
+    noRipple?: boolean;
+    outline?: boolean;
+    /**
+     * @default 'sm'
+     */
+    size?: Size;
+    /** Color for the spinner when in a loading state */
+    spinnerColor?: SpinnerProps['color'];
+    tabIndex?: number;
+    testId?: string;
+    themeOverride?: Theme;
+    type?: 'button' | 'reset' | 'submit';
+    /** @default 'standard' */
+    variant?: Variant;
+};
+/** These types are a bit cobbled together to allow for the polymorphic tag names.
+ * It may be a good idea to look into refactoring this funcitonality
+ */
+export type GroupTag = 'div' | 'a' | 'button';
+declare const DEFAULT_TAG: "button";
+type MyHtmlElement<T extends GroupTag> = T extends 'a' ? HTMLAnchorElement : T extends 'button' ? HTMLButtonElement : HTMLDivElement;
+export type ButtonProps<T extends GroupTag = typeof DEFAULT_TAG> = ButtonBase & {
+    href?: T extends 'a' ? string : never;
+    onClick?: MouseEventHandler<MyHtmlElement<T>>;
+    tag?: T | GroupTag;
+} & Omit<ComponentPropsWithoutRef<T>, keyof ButtonBase | 'onClick'>;
+/**
+ * Button component provides a clickable element that can be customized with different variants,
+ * sizes, and states. It supports various HTML tags (button, a, div) and includes features like
+ * loading states, icons, and different visual styles.
+ *
+ * @example Basic button
+ * <Button>Click me</Button>
+ *
+ * @example Primary variant
+ * <Button variant="primary">Primary Button</Button>
+ *
+ * @example With icon
+ * <Button icon={<CubeIcon size={24} />}>Button with Icon</Button>
+ *
+ * @example Icon on the right
+ * <Button icon={<ArrowRightIcon />} iconRight>Next</Button>
+ *
+ * @example Loading state
+ * <Button loading loadingText="Loading...">Submit</Button>
+ *
+ * @example Disabled state
+ * <Button disabled>Disabled Button</Button>
+ *
+ * @example Different sizes
+ * <Button size="sm">Small</Button>
+ * <Button size="md">Medium</Button>
+ * <Button size="lg">Large</Button>
+ *
+ * @example Variants
+ * <Button variant="primary">Primary</Button>
+ * <Button variant="success">Success</Button>
+ * <Button variant="danger">Danger</Button>
+ * <Button variant="warning">Warning</Button>
+ * <Button variant="link">Link</Button>
+ * <Button variant="subtle">Subtle</Button>
+ * <Button variant="text">Text</Button>
+ *
+ * @example Outlined style
+ * <Button variant="primary" outline>Outlined Primary</Button>
+ *
+ * @example As anchor tag
+ * <Button tag="a" href="https://example.com">Visit Website</Button>
+ *
+ * @example Inline link
+ * <Text>Read the <Button tag="a" href="#" variant="inlineLink">documentation</Button> for more info.</Text>
+ *
+ * @example Custom colors
+ * <Button color="blue600" background="gray100">Custom Button</Button>
+ */
+export declare function Button<T extends GroupTag = typeof DEFAULT_TAG>({ background, children, className, color, 
+/** Whether the button is disabled */
+disabled, 
+/** Makes the button width fit its content */
+fitContentWidth, hoverBackground, hoverColor, 
+/** Icon to display in the button */
+icon, 
+/** Whether to show the icon on the right side */
+iconRight, 
+/** Shows a loading spinner */
+loading, 
+/** Text to show when loading */
+loadingText, 
+/** Disables ripple effect on click */
+noRipple, 
+/** Shows an outlined version of the button */
+outline, 
+/**
+ * Size of the button
+ * @default 'sm'
+ */
+size, 
+/** Color of the spinner when loading */
+spinnerColor, style, 
+/**
+ * HTML element tag to use
+ * @default 'button'
+ */
+tag, testId, themeOverride, 
+/**
+ * HTML button type attribute
+ * @default 'button'
+ */
+type, 
+/**
+ * Visual style variant of the button
+ * @default 'standard'
+ */
+variant, ...props }: ButtonProps<T>): React.JSX.Element;
+export {};

package/components/button/ButtonIcon.d.ts

@@ -0,0 +1,5 @@
+import { type ButtonProps } from "./Button";
+/**
+ * A Button that is just an icon.
+ */
+export declare const ButtonIcon: ({ className, style, ...props }: ButtonProps) => import("react").JSX.Element;

package/components/button/MenuButton.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+import { type UseDropdownParams } from "../../utils/hooks/useDropdown";
+export type MenuButtonProps = BaseProps & {
+    action: ReactNode;
+    children: ReactNode;
+    dropdownOptions?: UseDropdownParams;
+    /**
+     * Close the menu when the mouse leaves the dropdown/parent.
+     * @default false
+     */
+    noCloseOnMouseLeave?: boolean;
+    /**
+     * Close the menu when clicking anywhere in the the dropdown.
+     * @default false
+     */
+    noCloseOnSelect?: boolean;
+};
+export declare const MenuButton: ({ action, children, className, dropdownOptions, noCloseOnMouseLeave, noCloseOnSelect, style, }: MenuButtonProps) => import("react").JSX.Element;

package/components/button/RippleGroup.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { Color } from "../../types/Color";
+export type RippleActions = {
+    start: (event: React.SyntheticEvent) => void;
+};
+export type RippleGroupProps = {
+    /**
+     * @default 'inherit'
+     */
+    color?: Color;
+    /**
+     * @default 200 ms
+     */
+    duration?: number;
+    /**
+     * @default 0.12
+     */
+    opacity?: number;
+    style?: React.CSSProperties;
+};
+export declare const RippleGroup: React.ForwardRefExoticComponent<RippleGroupProps & React.RefAttributes<RippleActions>>;

package/components/button/_Ripple.d.ts

@@ -0,0 +1,15 @@
+export type RippleProps = {
+    className: string;
+    /** Removes the ripple */
+    destroy: () => void;
+    /** duration of the ripple */
+    duration: number;
+    rippleStyle: {
+        height: number;
+        left: number;
+        top: number;
+        width: number;
+    };
+    style?: React.CSSProperties;
+};
+export declare const Ripple: ({ className, destroy, duration, rippleStyle, style, }: RippleProps) => import("react").JSX.Element;

package/components/button/button-group/ButtonGroup.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+type ButtonGroupProps = {
+    /**
+     * @note The children of the ButtonGroup component must be Amino Button components
+     */
+    children: ReactNode;
+};
+export declare const ButtonGroup: ({ children }: ButtonGroupProps) => import("react").JSX.Element;
+export {};

package/components/button/useRipple.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { RippleActions } from "./RippleGroup";
+type RippleEventHandlers = {
+    onMouseDown: React.MouseEventHandler;
+};
+type Props = {
+    disabled: boolean;
+    rippleEnabled: boolean;
+    rippleRef: React.RefObject<RippleActions>;
+};
+type Return = {
+    /** Combines event handlers */
+    getRippleHandlers(otherEvents: Partial<RippleEventHandlers>): RippleEventHandlers;
+    rippleEnabled: boolean;
+};
+export declare const useRipple: ({ disabled, rippleEnabled, rippleRef, }: Props) => Return;
+export {};

package/components/card/Card.d.ts

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type CardProps = BaseProps & {
+    actions?: ReactNode;
+    children: ReactNode;
+    footerActions?: ReactNode;
+    footerContent?: ReactNode;
+    footerHeight?: number;
+    label?: ReactNode;
+    spacing?: string;
+};
+/**
+ * Card component provides a container with optional header, content area, and footer.
+ * It's commonly used to group related information and controls.
+ *
+ * @example Basic card
+ * <Card label="Basic Card">
+ *   This is the content of the card.
+ * </Card>
+ *
+ * @example Card with header actions
+ * <Card
+ *   label="Card With Actions"
+ *   actions={<Button>Edit</Button>}
+ * >
+ *   Card content with header action button.
+ * </Card>
+ *
+ * @example Card with footer
+ * <Card
+ *   label="Card With Footer"
+ *   footerContent="Footer information"
+ *   footerActions={<Button>Save</Button>}
+ * >
+ *   Card content with footer.
+ * </Card>
+ *
+ * @example Card with multiple footer actions
+ * <Card
+ *   label="Card With Multiple Actions"
+ *   footerActions={
+ *     <>
+ *       <Button variant="subtle">Cancel</Button>
+ *       <Button variant="primary">Submit</Button>
+ *     </>
+ *   }
+ * >
+ *   Card with multiple action buttons in the footer.
+ * </Card>
+ *
+ * @example Card with custom footer height
+ * <Card
+ *   label="Card With Custom Footer Height"
+ *   footerContent="This footer has a fixed height"
+ *   footerHeight={120}
+ * >
+ *   Card with a fixed height footer.
+ * </Card>
+ *
+ * @example Card with custom spacing
+ * <Card
+ *   label="Card With Custom Spacing"
+ *   spacing="16px"
+ * >
+ *   Card content with custom internal spacing.
+ * </Card>
+ */
+export declare const Card: ({ actions, children, className, footerActions, footerContent, footerHeight, label, spacing, style, }: CardProps) => import("react").JSX.Element;