@zonos/amino 5.5.29 → 5.5.31

package/components/slide-over/SlideOver.d.ts

@@ -0,0 +1,112 @@
+import type { ReactNode } from 'react';
+import { type BaseDialogProps } from "../dialog/BaseDialog";
+export type SlideOverProps = BaseDialogProps & {
+    actions?: ReactNode;
+    bottomActions?: ReactNode;
+    fullWindowWidth?: boolean;
+    label?: string;
+    subtitle?: ReactNode;
+};
+/**
+ * SlideOver component displays content in a panel that slides in from the edge of the screen.
+ * It's useful for secondary content or actions that don't require leaving the current page.
+ *
+ * @example Basic usage
+ * <SlideOver
+ *   label="Panel Title"
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <Text>Panel content goes here.</Text>
+ * </SlideOver>
+ *
+ * @example With subtitle
+ * <SlideOver
+ *   label="Edit Profile"
+ *   subtitle={<Text type="caption">Update your personal information</Text>}
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <VStack spacing={16}>
+ *     <Input label="Name" value={name} onChange={(e) => setName(e.target.value)} />
+ *     <Input label="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
+ *   </VStack>
+ * </SlideOver>
+ *
+ * @example With header actions
+ * <SlideOver
+ *   label="Document Details"
+ *   actions={<Button variant="primary" size="small">Edit</Button>}
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <Text>Document content preview</Text>
+ * </SlideOver>
+ *
+ * @example With bottom actions
+ * <SlideOver
+ *   label="Create Item"
+ *   bottomActions={
+ *     <>
+ *       <Button variant="standard" onClick={() => setIsOpen(false)}>
+ *         Cancel
+ *       </Button>
+ *       <Button variant="primary" onClick={handleSave}>
+ *         Save
+ *       </Button>
+ *     </>
+ *   }
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <Text>Form content</Text>
+ * </SlideOver>
+ *
+ * @example Custom width
+ * <SlideOver
+ *   label="Wide Panel"
+ *   width={600}
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <Text>This panel is wider than the default.</Text>
+ * </SlideOver>
+ *
+ * @example Full window width
+ * <SlideOver
+ *   label="Detailed View"
+ *   fullWindowWidth
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <Text>This panel takes the full window width.</Text>
+ * </SlideOver>
+ *
+ * @example With complex content
+ * <SlideOver
+ *   label="Shopping Cart"
+ *   subtitle={<Text type="caption">3 items</Text>}
+ *   bottomActions={
+ *     <>
+ *       <Button variant="standard" onClick={() => setIsOpen(false)}>
+ *         Continue Shopping
+ *       </Button>
+ *       <Button variant="primary" onClick={handleCheckout}>
+ *         Checkout
+ *       </Button>
+ *     </>
+ *   }
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <VStack spacing={16}>
+ *     {items.map(item => (
+ *       <Card key={item.id}>
+ *         <Text>{item.name}</Text>
+ *         <Text>${item.price}</Text>
+ *       </Card>
+ *     ))}
+ *   </VStack>
+ * </SlideOver>
+ */
+export declare const SlideOver: ({ actions, bottomActions, children, fullWindowWidth, label, onClose, subtitle, width, ...props }: SlideOverProps) => import("react").JSX.Element;

package/components/spinner/Spinner.d.ts

@@ -0,0 +1,55 @@
+import type { BaseProps } from "../../types/BaseProps";
+export type SpinnerColor = 'primary' | 'info' | 'success' | 'danger' | 'warning' | 'inverted' | 'black' | 'white' | 'purple' | 'cyan';
+export type SpinnerProps = BaseProps & {
+    /**
+     * @default 'primary'
+     */
+    color?: SpinnerColor;
+    /**
+     * @default 32
+     */
+    size?: number;
+};
+/**
+ * Spinner component displays an animated loading indicator.
+ * Used to indicate that content is loading or an action is in progress.
+ *
+ * @example Basic spinner with default size and color
+ * <Spinner />
+ *
+ * @example Different colors
+ * <Spinner color="primary" />
+ * <Spinner color="success" />
+ * <Spinner color="danger" />
+ * <Spinner color="warning" />
+ * <Spinner color="info" />
+ *
+ * @example Different sizes
+ * <Spinner size={16} /> // Small
+ * <Spinner size={32} /> // Default
+ * <Spinner size={48} /> // Large
+ * <Spinner size={64} /> // Extra large
+ *
+ * @example On dark background
+ * <div style={{ backgroundColor: "#333", padding: "20px" }}>
+ *   <Spinner color="inverted" />
+ * </div>
+ *
+ * @example In a button
+ * <Button disabled loading>
+ *   <Spinner size={16} color="white" />
+ *   Loading
+ * </Button>
+ *
+ * @example Centering in container
+ * <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100px" }}>
+ *   <Spinner />
+ * </div>
+ *
+ * @example With text
+ * <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+ *   <Spinner />
+ *   <Text>Loading data...</Text>
+ * </div>
+ */
+export declare const Spinner: ({ className, color, size, style, }: SpinnerProps) => import("react").JSX.Element;

package/components/split-panel/SplitPanel.d.ts

@@ -0,0 +1,113 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type SplitPanelProps = BaseProps & {
+    /**
+     * Content to render within the split panels
+     */
+    children: any;
+    /**
+     * Whether to collapse all panels except the first one
+     * @default false
+     */
+    collapseAll?: boolean;
+    /**
+     * Direction in which the panels should be split
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * Size of the resize gutter between panels in pixels
+     * @default 3
+     */
+    gutterSize?: number;
+    /**
+     * Whether to display a line in the gutter
+     * @default false
+     */
+    lineBar?: boolean;
+    /**
+     * Minimum size of each panel in pixels
+     * @default 10
+     */
+    minSize?: number;
+    /**
+     * Callback function invoked when panel sizes change
+     */
+    onSetSizes?: Dispatch<SetStateAction<number[]>>;
+    /**
+     * Initial sizes of panels as proportions, where the sum should equal 1
+     * @default [1]
+     */
+    sizes?: number[];
+};
+/**
+ * SplitPanel component creates resizable panels with draggable dividers.
+ * It allows users to adjust the relative sizes of content sections either
+ * horizontally or vertically.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <SplitPanel>
+ *   <div>Left panel content</div>
+ *   <div>Right panel content</div>
+ * </SplitPanel>
+ * ```
+ *
+ * @example With custom initial sizes
+ * ```tsx
+ * <SplitPanel sizes={[0.7, 0.3]}>
+ *   <div>Larger panel (70%)</div>
+ *   <div>Smaller panel (30%)</div>
+ * </SplitPanel>
+ * ```
+ *
+ * @example Vertical split
+ * ```tsx
+ * <SplitPanel direction="vertical" sizes={[0.4, 0.6]}>
+ *   <div>Top panel</div>
+ *   <div>Bottom panel</div>
+ * </SplitPanel>
+ * ```
+ *
+ * @example With state management
+ * ```tsx
+ * const [sizes, setSizes] = useState([0.5, 0.5]);
+ *
+ * <SplitPanel
+ *   sizes={sizes}
+ *   onSetSizes={setSizes}
+ * >
+ *   <div>Panel 1</div>
+ *   <div>Panel 2</div>
+ * </SplitPanel>
+ * ```
+ *
+ * @example With collapsible panels
+ * ```tsx
+ * const [collapsed, setCollapsed] = useState(false);
+ *
+ * <>
+ *   <Button onClick={() => setCollapsed(!collapsed)}>
+ *     {collapsed ? 'Expand' : 'Collapse'}
+ *   </Button>
+ *
+ *   <SplitPanel
+ *     collapseAll={collapsed}
+ *     sizes={[0.3, 0.7]}
+ *   >
+ *     <div>Navigation panel</div>
+ *     <div>Content panel</div>
+ *   </SplitPanel>
+ * </>
+ * ```
+ *
+ * @example With multiple panels
+ * ```tsx
+ * <SplitPanel sizes={[0.2, 0.5, 0.3]}>
+ *   <div>Left sidebar</div>
+ *   <div>Main content</div>
+ *   <div>Right sidebar</div>
+ * </SplitPanel>
+ * ```
+ */
+export declare const SplitPanel: ({ children, className, collapseAll, direction, gutterSize, onSetSizes, sizes, style, ...props }: SplitPanelProps) => import("react").JSX.Element;

package/components/stack/HStack.d.ts

@@ -0,0 +1,44 @@
+import { type StackProps } from "./Stack";
+/**
+ * HStack component arranges children horizontally with consistent spacing.
+ * It's a specialized version of Stack that automatically sets horizontal layout.
+ *
+ * @example Basic horizontal layout
+ * <HStack>
+ *   <div>Left item</div>
+ *   <div>Middle item</div>
+ *   <div>Right item</div>
+ * </HStack>
+ *
+ * @example Custom spacing
+ * <HStack spacing={8}>
+ *   <Button>Save</Button>
+ *   <Button>Cancel</Button>
+ * </HStack>
+ *
+ * @example With center alignment
+ * <HStack alignment="center">
+ *   <Badge>New</Badge>
+ *   <Text>Product title</Text>
+ * </HStack>
+ *
+ * @example With space between items
+ * <HStack alignment="space-between">
+ *   <div>Left aligned</div>
+ *   <div>Right aligned</div>
+ * </HStack>
+ *
+ * @example With buttons and consistent spacing
+ * <HStack spacing={16}>
+ *   <Button variant="primary">Submit</Button>
+ *   <Button variant="standard">Cancel</Button>
+ *   <Button variant="link">Learn more</Button>
+ * </HStack>
+ *
+ * @example Form actions layout
+ * <HStack alignment="end" spacing={8}>
+ *   <Button variant="primary">Save</Button>
+ *   <Button variant="standard">Cancel</Button>
+ * </HStack>
+ */
+export declare const HStack: ({ children, className, spacing, style, ...props }: StackProps) => import("react").JSX.Element;

package/components/stack/Stack.d.ts

@@ -0,0 +1,64 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+import type { GridAlignment, GridSpacing } from "../../types/GridSpacing";
+type DivProps = Omit<HTMLAttributes<HTMLDivElement>, 'translate' | 'style' | 'prefix' | 'contentEditable' | 'inputMode' | 'children'>;
+export type StackProps = {
+    /** @default 'unset' */
+    alignment?: GridAlignment;
+    children: ReactNode;
+    /** @default 24 */
+    spacing?: GridSpacing;
+} & DivProps & BaseProps;
+/**
+ * Stack component creates a container for vertical or horizontal layouts with consistent spacing between items.
+ * It serves as the base component for more specific HStack and VStack components.
+ *
+ * @example Basic stack
+ * <Stack spacing={16}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Stack>
+ *
+ * @example With different spacing values
+ * <Stack spacing={8}>
+ *   <div>Closely spaced items</div>
+ *   <div>With 8px gap</div>
+ * </Stack>
+ *
+ * <Stack spacing={24}>
+ *   <div>Standard spacing</div>
+ *   <div>With 24px gap</div>
+ * </Stack>
+ *
+ * <Stack spacing={32}>
+ *   <div>Widely spaced items</div>
+ *   <div>With 32px gap</div>
+ * </Stack>
+ *
+ * @example With alignment
+ * <Stack alignment="center">
+ *   <div>Centered content</div>
+ *   <div>Also centered</div>
+ * </Stack>
+ *
+ * <Stack alignment="end">
+ *   <div>Right/end aligned content</div>
+ *   <div>Also right/end aligned</div>
+ * </Stack>
+ *
+ * @example With custom className
+ * <Stack className="custom-stack" spacing={16}>
+ *   <div>Custom styled stack</div>
+ *   <div>With additional classes</div>
+ * </Stack>
+ *
+ * @example Combining with other components
+ * <Stack spacing={16}>
+ *   <Card>First card</Card>
+ *   <Card>Second card</Card>
+ *   <Button>Action button</Button>
+ * </Stack>
+ */
+export declare const Stack: ({ alignment, children, className, style, ...otherProps }: StackProps) => import("react").JSX.Element;
+export {};

package/components/stack/VStack.d.ts

@@ -0,0 +1,53 @@
+import { type StackProps } from "./Stack";
+/**
+ * VStack component arranges children vertically with consistent spacing.
+ * It's a specialized version of Stack that automatically sets vertical layout.
+ *
+ * @example Basic vertical layout
+ * <VStack>
+ *   <div>Top item</div>
+ *   <div>Middle item</div>
+ *   <div>Bottom item</div>
+ * </VStack>
+ *
+ * @example Custom spacing
+ * <VStack spacing={16}>
+ *   <Text type="header">Section Title</Text>
+ *   <Text>Description text for this section that explains what it does.</Text>
+ *   <Button>Action</Button>
+ * </VStack>
+ *
+ * @example With center alignment
+ * <VStack alignment="center">
+ *   <Badge>Featured</Badge>
+ *   <Text>Product name</Text>
+ *   <Text>$19.99</Text>
+ * </VStack>
+ *
+ * @example Form layout
+ * <VStack spacing={12}>
+ *   <Input label="Name" />
+ *   <Input label="Email" />
+ *   <Input label="Password" type="password" />
+ *   <Checkbox label="I agree to terms" />
+ *   <Button variant="primary">Sign up</Button>
+ * </VStack>
+ *
+ * @example Content sections
+ * <VStack spacing={32}>
+ *   <Card>Section 1 content</Card>
+ *   <Card>Section 2 content</Card>
+ *   <Card>Section 3 content</Card>
+ * </VStack>
+ *
+ * @example With different spacing for visual hierarchy
+ * <VStack spacing={8}>
+ *   <Text type="bold-subheader">Group Title</Text>
+ *   <VStack spacing={4}>
+ *     <Text>Item 1</Text>
+ *     <Text>Item 2</Text>
+ *     <Text>Item 3</Text>
+ *   </VStack>
+ * </VStack>
+ */
+export declare const VStack: ({ children, className, spacing, style, ...props }: StackProps) => import("react").JSX.Element;

package/components/surface/Surface.d.ts

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+import type { Depth } from "../../types/Depth";
+type Props = BaseProps & {
+    /**
+     * Content to be displayed within the surface
+     */
+    children: ReactNode;
+    /**
+     * Reduces the surface's padding for more compact layouts
+     * @default false
+     */
+    dense?: boolean;
+    /**
+     * Controls the elevation depth of the surface
+     * @default 'depth4'
+     */
+    depth?: Depth;
+};
+/**
+ * Surface component provides an elevated container with customizable depth
+ * for creating visual hierarchy in layouts.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Surface>
+ *   <Card>
+ *     <Text>Content with default elevation</Text>
+ *   </Card>
+ * </Surface>
+ * ```
+ *
+ * @example With custom depth
+ * ```tsx
+ * <Surface depth="depth8">
+ *   <Card>
+ *     <Text>Content with increased elevation</Text>
+ *   </Card>
+ * </Surface>
+ * ```
+ *
+ * @example Dense surface for compact layouts
+ * ```tsx
+ * <Surface dense>
+ *   <Card>
+ *     <Text>Content with reduced padding</Text>
+ *   </Card>
+ * </Surface>
+ * ```
+ *
+ * @example Multiple nested surfaces for hierarchy
+ * ```tsx
+ * <Surface depth="depth1">
+ *   <Text>Base layer</Text>
+ *   <Surface depth="depth4">
+ *     <Text>Middle layer</Text>
+ *     <Surface depth="depth8">
+ *       <Text>Top layer</Text>
+ *     </Surface>
+ *   </Surface>
+ * </Surface>
+ * ```
+ */
+export declare const Surface: ({ children, className, dense, depth, style, }: Props) => import("react").JSX.Element;
+export {};

package/components/switch/Switch.d.ts

@@ -0,0 +1,86 @@
+import { type ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type SwitchProps = BaseProps & {
+    checked: boolean;
+    disabled?: boolean;
+    label?: string;
+    labelDescription?: string;
+    labelIcon?: ReactNode;
+    onChange: (checked: boolean) => void;
+    subtitle?: string;
+    switchIconLeft?: ReactNode;
+    switchIconRight?: ReactNode;
+};
+/**
+ * Switch component provides a toggle control for binary options.
+ * It allows users to turn options on or off with a single action.
+ *
+ * @example Basic usage
+ * const [enabled, setEnabled] = useState(false);
+ *
+ * <Switch
+ *   checked={enabled}
+ *   onChange={setEnabled}
+ * />
+ *
+ * @example With label
+ * <Switch
+ *   label="Notifications"
+ *   checked={notificationsEnabled}
+ *   onChange={setNotificationsEnabled}
+ * />
+ *
+ * @example With label description
+ * <Switch
+ *   label="Dark mode"
+ *   labelDescription="(Applies to all users)"
+ *   checked={darkMode}
+ *   onChange={setDarkMode}
+ * />
+ *
+ * @example With subtitle
+ * <Switch
+ *   label="Auto-save"
+ *   subtitle="Automatically save changes as you type"
+ *   checked={autoSave}
+ *   onChange={setAutoSave}
+ * />
+ *
+ * @example Disabled state
+ * <Switch
+ *   label="Premium feature"
+ *   checked={true}
+ *   onChange={() => {}}
+ *   disabled
+ * />
+ *
+ * @example With label icon
+ * <Switch
+ *   label="Wi-Fi"
+ *   labelIcon={<WifiIcon size={16} />}
+ *   checked={wifiEnabled}
+ *   onChange={setWifiEnabled}
+ * />
+ *
+ * @example With switch icons
+ * <Switch
+ *   label="Sound"
+ *   switchIconLeft={<SoundOffIcon size={12} />}
+ *   switchIconRight={<SoundOnIcon size={12} />}
+ *   checked={soundEnabled}
+ *   onChange={setSoundEnabled}
+ * />
+ *
+ * @example Complete example with all properties
+ * <Switch
+ *   label="Location services"
+ *   labelDescription="(Optional)"
+ *   labelIcon={<LocationIcon size={16} />}
+ *   subtitle="Allow the app to access your current location"
+ *   switchIconLeft={<CloseIcon size={12} />}
+ *   switchIconRight={<CheckmarkIcon size={12} />}
+ *   checked={locationEnabled}
+ *   onChange={setLocationEnabled}
+ * />
+ */
+export declare const Switch: ({ checked, className, disabled, label, labelDescription, labelIcon, onChange, style, subtitle, switchIconLeft, switchIconRight, }: SwitchProps) => import("react").JSX.Element;