@zonos/amino 5.5.29 → 5.5.31

package/components/layout/NavigationGroup.d.ts

@@ -0,0 +1,160 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type NavigationItemProps = BaseProps & {
+    /**
+     * Text or element to display as the navigation item
+     */
+    content: ReactNode;
+    /**
+     * Optional icon to display before the content
+     */
+    icon?: ReactNode;
+    /**
+     * Whether the navigation item is currently active/selected
+     * @default false
+     */
+    isActive?: boolean;
+};
+export type NavigationGroupProps = BaseProps & {
+    /**
+     * Child navigation items to show in the collapsible group
+     */
+    children: ReactNode;
+    /**
+     * Whether the navigation group is collapsed (closed)
+     * @default false
+     */
+    collapsed?: boolean;
+    /**
+     * The main navigation item that acts as the group header
+     *
+     * **NOTE**: Should be a `NavigationItem` component for proper styling.
+     * If you want to use `href`, wrap the `anchor` tag outside of the `NavigationItem` component.
+     */
+    content: ReactElement<NavigationItemProps> | ReactElement<HTMLAnchorElement>;
+};
+/**
+ * NavigationItem component renders a single navigation item with optional icon
+ * and active state styling.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <NavigationItem
+ *   content="Dashboard"
+ *   icon={<DashboardIcon size={24} />}
+ * />
+ * ```
+ *
+ * @example Active state
+ * ```tsx
+ * <NavigationItem
+ *   content="Settings"
+ *   icon={<SettingsIcon size={24} />}
+ *   isActive={true}
+ * />
+ * ```
+ *
+ * @example With anchor tag for navigation
+ * ```tsx
+ * <a href="/dashboard">
+ *   <NavigationItem
+ *     content="Dashboard"
+ *     icon={<DashboardIcon size={24} />}
+ *     isActive={currentPath === '/dashboard'}
+ *   />
+ * </a>
+ * ```
+ */
+export declare const NavigationItem: ({ className, content, icon, isActive, style, }: NavigationItemProps) => import("react").JSX.Element;
+/**
+ * NavigationGroup component provides a collapsible group of navigation items
+ * with a header item that toggles the group's expanded/collapsed state.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <NavigationGroup
+ *   content={
+ *     <NavigationItem
+ *       content="Settings"
+ *       icon={<SettingsIcon size={24} />}
+ *     />
+ *   }
+ * >
+ *   <NavigationItem content="Profile" />
+ *   <NavigationItem content="Preferences" />
+ *   <NavigationItem content="Security" />
+ * </NavigationGroup>
+ * ```
+ *
+ * @example With links and active state
+ * ```tsx
+ * <NavigationGroup
+ *   collapsed={!pathname.includes('/settings')}
+ *   content={
+ *     <a href="/settings">
+ *       <NavigationItem
+ *         content="Settings"
+ *         icon={<SettingsIcon size={24} />}
+ *       />
+ *     </a>
+ *   }
+ * >
+ *   <a href="/settings/profile">
+ *     <NavigationItem
+ *       content="Profile"
+ *       isActive={pathname === '/settings/profile'}
+ *     />
+ *   </a>
+ *   <a href="/settings/preferences">
+ *     <NavigationItem
+ *       content="Preferences"
+ *       isActive={pathname === '/settings/preferences'}
+ *     />
+ *   </a>
+ * </NavigationGroup>
+ * ```
+ *
+ * @example Multiple groups in navigation
+ * ```tsx
+ * <>
+ *   <NavigationGroup
+ *     collapsed={!pathname.includes('/dashboard')}
+ *     content={
+ *       <a href="/dashboard">
+ *         <NavigationItem
+ *           content="Dashboard"
+ *           icon={<DashboardIcon size={24} />}
+ *         />
+ *       </a>
+ *     }
+ *   >
+ *     <a href="/dashboard/analytics">
+ *       <NavigationItem content="Analytics" />
+ *     </a>
+ *     <a href="/dashboard/reports">
+ *       <NavigationItem content="Reports" />
+ *     </a>
+ *   </NavigationGroup>
+ *
+ *   <NavigationGroup
+ *     collapsed={!pathname.includes('/settings')}
+ *     content={
+ *       <a href="/settings">
+ *         <NavigationItem
+ *           content="Settings"
+ *           icon={<SettingsIcon size={24} />}
+ *         />
+ *       </a>
+ *     }
+ *   >
+ *     <a href="/settings/profile">
+ *       <NavigationItem content="Profile" />
+ *     </a>
+ *     <a href="/settings/account">
+ *       <NavigationItem content="Account" />
+ *     </a>
+ *   </NavigationGroup>
+ * </>
+ * ```
+ */
+export declare const NavigationGroup: ({ children, className, collapsed, content, style, }: NavigationGroupProps) => import("react").JSX.Element;

package/components/lightbox/LightBox.d.ts

@@ -0,0 +1,90 @@
+import { type BaseDialogProps } from "../dialog/BaseDialog";
+export type LightBoxProps = BaseDialogProps & {
+    /**
+     * Function called when the lightbox is closed
+     */
+    onClose: () => void;
+};
+/**
+ * LightBox component provides a modal view for displaying images, videos, or other media
+ * content with a darkened background overlay.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <Button onClick={() => setOpen(true)}>Open Image</Button>
+ *
+ * <LightBox
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ * >
+ *   <img src="/path/to/image.jpg" alt="Preview" />
+ * </LightBox>
+ * ```
+ *
+ * @example With custom width
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <LightBox
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   width={800}
+ * >
+ *   <img src="/path/to/image.jpg" alt="Preview" style={{ maxWidth: '100%' }} />
+ * </LightBox>
+ * ```
+ *
+ * @example With video content
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <LightBox
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ * >
+ *   <video
+ *     controls
+ *     width="100%"
+ *     autoPlay
+ *   >
+ *     <source src="/path/to/video.mp4" type="video/mp4" />
+ *     Your browser does not support the video tag.
+ *   </video>
+ * </LightBox>
+ * ```
+ *
+ * @example With carousel of images
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ * const [currentIndex, setCurrentIndex] = useState(0);
+ * const images = ['/image1.jpg', '/image2.jpg', '/image3.jpg'];
+ *
+ * <LightBox
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ * >
+ *   <div style={{ display: 'flex', alignItems: 'center' }}>
+ *     <Button
+ *       icon={<ArrowLeftIcon />}
+ *       onClick={() => setCurrentIndex(prev => Math.max(0, prev - 1))}
+ *       disabled={currentIndex === 0}
+ *       variant="plain"
+ *     />
+ *     <img
+ *       src={images[currentIndex]}
+ *       alt={`Image ${currentIndex + 1}`}
+ *       style={{ maxWidth: '90%', maxHeight: '80vh' }}
+ *     />
+ *     <Button
+ *       icon={<ArrowRightIcon />}
+ *       onClick={() => setCurrentIndex(prev => Math.min(images.length - 1, prev + 1))}
+ *       disabled={currentIndex === images.length - 1}
+ *       variant="plain"
+ *     />
+ *   </div>
+ * </LightBox>
+ * ```
+ */
+export declare const LightBox: ({ children, ...props }: LightBoxProps) => import("react").JSX.Element;

package/components/list/CollapsibleList.d.ts

@@ -0,0 +1,101 @@
+import { type ReactNode } from 'react';
+import { type ListProps } from "./List";
+export type CollapsibleListProps = ListProps & {
+    /**
+     * Optional icon to display next to the title in the header
+     */
+    icon?: ReactNode;
+    /**
+     * Whether to start expanded
+     * @default false
+     */
+    startExpanded?: boolean;
+    /**
+     * Title text or element for the collapsible header
+     */
+    title: ReactNode;
+};
+/**
+ * CollapsibleList component provides a list with a collapsible section that can be expanded
+ * or collapsed by clicking on the header. It's an extension of the List component with added
+ * functionality for expandable content.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <CollapsibleList title="Settings">
+ *   <ListItem label="Profile" />
+ *   <ListItem label="Account" />
+ *   <ListItem label="Security" />
+ * </CollapsibleList>
+ * ```
+ *
+ * @example With icon and starting expanded
+ * ```tsx
+ * <CollapsibleList
+ *   icon={<SettingsIcon size={24} />}
+ *   title="Advanced Settings"
+ *   startExpanded
+ * >
+ *   <ListItem label="Developer Options" />
+ *   <ListItem label="Experimental Features" />
+ * </CollapsibleList>
+ * ```
+ *
+ * @example With border and selectable items
+ * ```tsx
+ * const [selected, setSelected] = useState<string | null>(null);
+ *
+ * <CollapsibleList
+ *   title="Categories"
+ *   withBorder
+ * >
+ *   <ListItem
+ *     label="Electronics"
+ *     selected={selected === 'electronics'}
+ *     onClick={() => setSelected(selected === 'electronics' ? null : 'electronics')}
+ *   />
+ *   <ListItem
+ *     label="Clothing"
+ *     selected={selected === 'clothing'}
+ *     onClick={() => setSelected(selected === 'clothing' ? null : 'clothing')}
+ *   />
+ *   <ListItem
+ *     label="Books"
+ *     selected={selected === 'books'}
+ *     onClick={() => setSelected(selected === 'books' ? null : 'books')}
+ *   />
+ * </CollapsibleList>
+ * ```
+ *
+ * @example Multiple collapsible lists
+ * ```tsx
+ * <div>
+ *   <CollapsibleList title="First Section" startExpanded>
+ *     <ListItem label="Item 1" />
+ *     <ListItem label="Item 2" />
+ *   </CollapsibleList>
+ *
+ *   <CollapsibleList title="Second Section">
+ *     <ListItem label="Item A" />
+ *     <ListItem label="Item B" />
+ *   </CollapsibleList>
+ * </div>
+ * ```
+ *
+ * @example With decorators in list items
+ * ```tsx
+ * <CollapsibleList title="Files">
+ *   <ListItem
+ *     label="Document.pdf"
+ *     decorator={<Thumbnail icon={<DocumentIcon />} shape="square" />}
+ *     rightDecorator={<Badge>3 MB</Badge>}
+ *   />
+ *   <ListItem
+ *     label="Image.png"
+ *     decorator={<Thumbnail icon={<ImageIcon />} shape="square" />}
+ *     rightDecorator={<Badge>1.2 MB</Badge>}
+ *   />
+ * </CollapsibleList>
+ * ```
+ */
+export declare const CollapsibleList: ({ children, className, icon, startExpanded, style, title, withBorder, withNegativeMargin, }: CollapsibleListProps) => import("react").JSX.Element;

package/components/list/List.d.ts

@@ -0,0 +1,88 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type ListProps = BaseProps & {
+    /**
+     * List items to be displayed
+     * Typically ListItem components
+     */
+    children?: ReactNode;
+    /**
+     * Whether to display a border around the list
+     * @default false
+     */
+    withBorder?: boolean;
+    /**
+     * Whether to apply negative margin to make the list flush with its container
+     * @default false
+     */
+    withNegativeMargin?: boolean;
+};
+/**
+ * List component provides a container for displaying a collection of related items.
+ * It's typically used with ListItem components as children.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <List>
+ *   <ListItem label="Item 1" />
+ *   <ListItem label="Item 2" />
+ *   <ListItem label="Item 3" />
+ * </List>
+ * ```
+ *
+ * @example With border
+ * ```tsx
+ * <List withBorder>
+ *   <ListItem label="Item 1" subtitle="Description for item 1" />
+ *   <ListItem label="Item 2" subtitle="Description for item 2" />
+ * </List>
+ * ```
+ *
+ * @example With selection
+ * ```tsx
+ * const [selectedItem, setSelectedItem] = useState<number | null>(null);
+ *
+ * <List>
+ *   <ListItem
+ *     label="Item 1"
+ *     selected={selectedItem === 1}
+ *     onClick={() => setSelectedItem(selectedItem === 1 ? null : 1)}
+ *   />
+ *   <ListItem
+ *     label="Item 2"
+ *     selected={selectedItem === 2}
+ *     onClick={() => setSelectedItem(selectedItem === 2 ? null : 2)}
+ *   />
+ *   <ListItem
+ *     label="Disabled Item"
+ *     disabled
+ *     onClick={() => {}}
+ *   />
+ * </List>
+ * ```
+ *
+ * @example With negative margin
+ * ```tsx
+ * <div style={{ padding: '20px', border: '1px solid #ccc' }}>
+ *   <List withNegativeMargin>
+ *     <ListItem label="This list is flush with container" />
+ *     <ListItem label="No padding around the list" />
+ *   </List>
+ * </div>
+ * ```
+ *
+ * @example With decorators
+ * ```tsx
+ * <List>
+ *   <ListItem
+ *     label="With icon"
+ *     decorator={<Thumbnail icon={<UserIcon />} shape="round" />}
+ *   />
+ *   <ListItem
+ *     label="With right decorator"
+ *     rightDecorator={<Badge>New</Badge>}
+ *   />
+ * </List>
+ * ```
+ */
+export declare const List: ({ children, className, style, withBorder, withNegativeMargin, }: ListProps) => import("react").JSX.Element;

package/components/list-item/ListItem.d.ts

@@ -0,0 +1,35 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type Props = BaseProps & {
+    /**
+     * Element to display before the label, typically an icon or avatar
+     */
+    decorator?: ReactNode;
+    /**
+     * Whether the list item is disabled and cannot be interacted with
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Primary text or element to display in the list item
+     */
+    label: ReactNode;
+    /**
+     * Function to call when the list item is clicked
+     */
+    onClick?: MouseEventHandler;
+    /**
+     * Element to display after the label and subtitle, typically a badge or action
+     */
+    rightDecorator?: ReactNode;
+    /**
+     * Whether the list item is visually selected/active
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Secondary text or element to display below the label
+     */
+    subtitle?: ReactNode;
+};
+export declare const ListItem: ({ className, decorator, disabled, label, onClick, rightDecorator, selected, style, subtitle, }: Props) => import("react").JSX.Element;

package/components/menu/Menu.d.ts

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type MenuProps = BaseProps & {
+    /**
+     * Menu items to be displayed
+     * Typically MenuItem components
+     */
+    children?: ReactNode;
+};
+/**
+ * Menu component provides a container for dropdown menu items.
+ * It's typically used with MenuItem components and the MenuButton component.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Menu>
+ *   <MenuItem>Profile settings</MenuItem>
+ *   <MenuItem>Account settings</MenuItem>
+ *   <MenuItem>Help</MenuItem>
+ * </Menu>
+ * ```
+ *
+ * @example With MenuButton
+ * ```tsx
+ * <MenuButton action={<Button>Options</Button>}>
+ *   <Menu>
+ *     <MenuItem onClick={handleEdit}>Edit</MenuItem>
+ *     <MenuItem onClick={handleDelete}>Delete</MenuItem>
+ *   </Menu>
+ * </MenuButton>
+ * ```
+ *
+ * @example With icons
+ * ```tsx
+ * <Menu>
+ *   <MenuItem icon={<EditIcon />}>Edit</MenuItem>
+ *   <MenuItem icon={<TrashIcon />}>Delete</MenuItem>
+ *   <MenuItem icon={<CopyIcon />}>Duplicate</MenuItem>
+ * </Menu>
+ * ```
+ *
+ * @example With disabled items
+ * ```tsx
+ * <Menu>
+ *   <MenuItem>Edit</MenuItem>
+ *   <MenuItem disabled>Delete</MenuItem>
+ *   <MenuItem>Duplicate</MenuItem>
+ * </Menu>
+ * ```
+ */
+export declare const Menu: ({ children, className, style }: MenuProps) => import("react").JSX.Element;

package/components/menu/MenuItem.d.ts

@@ -0,0 +1,74 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+type MenuItemProps = BaseProps & {
+    /**
+     * Content to display in the menu item
+     */
+    children: ReactNode;
+    /**
+     * Whether the menu item is disabled and cannot be clicked
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional icon to display before the menu item text
+     */
+    icon?: ReactNode;
+    /**
+     * Function to call when the menu item is clicked
+     */
+    onClick?: MouseEventHandler;
+};
+/**
+ * MenuItem component represents a clickable option in a dropdown menu.
+ * Each MenuItem is typically placed within a Menu component.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Menu>
+ *   <MenuItem onClick={handleClick}>Settings</MenuItem>
+ *   <MenuItem onClick={handleLogout}>Logout</MenuItem>
+ * </Menu>
+ * ```
+ *
+ * @example With icons
+ * ```tsx
+ * <Menu>
+ *   <MenuItem icon={<SettingsIcon />} onClick={handleSettings}>
+ *     Settings
+ *   </MenuItem>
+ *   <MenuItem icon={<LogoutIcon />} onClick={handleLogout}>
+ *     Logout
+ *   </MenuItem>
+ * </Menu>
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <Menu>
+ *   <MenuItem onClick={handleEdit}>Edit</MenuItem>
+ *   <MenuItem disabled onClick={handleDelete}>
+ *     Delete
+ *   </MenuItem>
+ * </Menu>
+ * ```
+ *
+ * @example With MenuButton
+ * ```tsx
+ * <MenuButton action={<Button size="sm">Actions</Button>}>
+ *   <Menu>
+ *     <MenuItem onClick={() => handleAction('view')}>
+ *       View Details
+ *     </MenuItem>
+ *     <MenuItem onClick={() => handleAction('edit')}>
+ *       Edit Item
+ *     </MenuItem>
+ *     <MenuItem disabled={!canDelete} onClick={() => handleAction('delete')}>
+ *       Delete Item
+ *     </MenuItem>
+ *   </Menu>
+ * </MenuButton>
+ * ```
+ */
+export declare const MenuItem: ({ children, className, disabled, icon, onClick, style, }: MenuItemProps) => import("react").JSX.Element;
+export {};