@zonos/amino 5.5.30 → 5.5.31

package/components/filter/useFilterWrapper.d.ts

@@ -0,0 +1,154 @@
+import { type ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type BaseFilterProps = BaseProps & {
+    dropdownTitle: string;
+    label: string;
+};
+export type FilterApplyCallback = (setFilterText: (newFilterText: string) => void) => void;
+type UseFilterProps = {
+    initialFilterText?: string;
+    isActive: boolean;
+    onApply: FilterApplyCallback;
+    /**
+     * This is called in a use effect to allow for initial states from URL, needs to be memoized.
+     */
+    onApplyFilterText: FilterApplyCallback;
+    /**
+     * When the menu is closed without applying.
+     */
+    onClose: () => void;
+    onRemove: () => void;
+    setActive?: (active: boolean) => void;
+};
+export type FilterProps = BaseFilterProps & UseFilterProps;
+/**
+ * A custom hook that provides state management and behavior for filter components.
+ * It works with the FilterWrapper component to create consistent filtering experiences.
+ *
+ * The hook handles filter state, dropdown behavior, keyboard interactions, and filter application.
+ * It returns methods to manage filter state and a renderWrapper function to render the FilterWrapper component.
+ *
+ * @example Basic filter with select options
+ * ```tsx
+ * const [isFilterActive, setIsFilterActive] = useState(false);
+ * const [selectedOption, setSelectedOption] = useState<Option | null>(null);
+ *
+ * const {
+ *   renderWrapper,
+ *   setFilterText
+ * } = useFilterWrapper({
+ *   dropdownTitle: "Status",
+ *   isActive: isFilterActive,
+ *   label: "Status",
+ *   setActive: setIsFilterActive,
+ *   initialFilterText: "All statuses",
+ *   onApply: (setFilterText) => {
+ *     // Update filter text and apply the filter
+ *     setFilterText(selectedOption ? selectedOption.label : "All statuses");
+ *     applyFilter(selectedOption?.value);
+ *   },
+ *   onApplyFilterText: (setFilterText) => {
+ *     // Update text only (for URL-derived state)
+ *     setFilterText(selectedOption ? selectedOption.label : "All statuses");
+ *   },
+ *   onClose: () => {
+ *     // Handle dropdown close without applying
+ *   },
+ *   onRemove: () => {
+ *     // Clear filter when removed
+ *     setSelectedOption(null);
+ *     applyFilter(null);
+ *   }
+ * });
+ *
+ * // Use the renderWrapper function to create the filter UI
+ * const statusFilter = renderWrapper(
+ *   <FilterSelect
+ *     options={statusOptions}
+ *     value={selectedOption}
+ *     onChange={setSelectedOption}
+ *   />
+ * );
+ * ```
+ *
+ * @example Date range filter
+ * ```tsx
+ * const [isDateFilterActive, setIsDateFilterActive] = useState(false);
+ * const [startDate, setStartDate] = useState<Date | null>(null);
+ * const [endDate, setEndDate] = useState<Date | null>(null);
+ *
+ * const formatDateForDisplay = (date: Date) => {
+ *   return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+ * };
+ *
+ * const {
+ *   renderWrapper
+ * } = useFilterWrapper({
+ *   dropdownTitle: "Date Range",
+ *   isActive: isDateFilterActive,
+ *   label: "Date",
+ *   setActive: setIsDateFilterActive,
+ *   initialFilterText: "All time",
+ *   onApply: (setFilterText) => {
+ *     if (startDate && endDate) {
+ *       const dateRangeText = `${formatDateForDisplay(startDate)} - ${formatDateForDisplay(endDate)}`;
+ *       setFilterText(dateRangeText);
+ *       applyDateRangeFilter(startDate, endDate);
+ *     }
+ *   },
+ *   onApplyFilterText: (setFilterText) => {
+ *     if (startDate && endDate) {
+ *       setFilterText(`${formatDateForDisplay(startDate)} - ${formatDateForDisplay(endDate)}`);
+ *     }
+ *   },
+ *   onClose: () => {
+ *     // Optional cleanup when closing without applying
+ *   },
+ *   onRemove: () => {
+ *     setStartDate(null);
+ *     setEndDate(null);
+ *     applyDateRangeFilter(null, null);
+ *   }
+ * });
+ *
+ * const dateFilter = renderWrapper(
+ *   <FilterDate
+ *     startDate={startDate}
+ *     endDate={endDate}
+ *     onStartDateChange={setStartDate}
+ *     onEndDateChange={setEndDate}
+ *   />
+ * );
+ * ```
+ *
+ * @example Multiple filters in a filter bar
+ * ```tsx
+ * // First, create your individual filters using useFilterWrapper
+ * const statusFilter =  useFilterWrapper implementation ;
+ * const dateFilter =  useFilterWrapper implementation ;
+ * const searchFilter =  useFilterWrapper implementation ;
+ *
+ * // Then render them together in a filter bar
+ * return (
+ *   <div style={{ display: 'flex', gap: '8px' }}>
+ *     {statusFilter}
+ *     {dateFilter}
+ *     {searchFilter}
+ *
+ *     <Button
+ *       onClick={resetAllFilters}
+ *       variant="ghost"
+ *       size="sm"
+ *     >
+ *       Clear All
+ *     </Button>
+ *   </div>
+ * );
+ * ```
+ */
+export declare const useFilterWrapper: ({ className, dropdownTitle, initialFilterText, isActive, label, onApply, onApplyFilterText, onClose, onRemove, setActive, style, }: FilterProps) => {
+    handleApplyFilter: () => void;
+    renderWrapper: (control: ReactNode) => import("react").JSX.Element;
+    setFilterText: import("react").Dispatch<import("react").SetStateAction<string>>;
+};
+export {};

package/components/flex/Flex.d.ts

@@ -0,0 +1,108 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type FlexProps = BaseProps & HTMLAttributes<HTMLDivElement> & {
+    /**
+     * @default 'stretch'
+     */
+    alignItems?: CSSProperties['alignItems'];
+    children: ReactNode;
+    /**
+     * @default 'initial'
+     * @description This is a shorthand for flex-grow, flex-shrink, and flex-basis.
+     */
+    childrenFlex?: 'auto' | '1 0' | '0 1' | 'initial' | 'inherit' | 'unset' | (string & {
+        _?: never;
+    });
+    /**
+     * @default 'row'
+     */
+    flexDirection?: CSSProperties['flexDirection'];
+    flexWrap?: CSSProperties['flexWrap'];
+    /**
+     * @default false
+     */
+    fullHeight?: boolean;
+    /**
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * @default 8
+     */
+    gap?: number;
+    /**
+     * @default 'flex-start'
+     */
+    justifyContent?: CSSProperties['justifyContent'];
+    /**
+     * @default 0
+     */
+    padding?: number;
+};
+/**
+ * Flex component is a layout utility that provides flexible box layouts with
+ * configurable alignment, direction, spacing, and other flexbox properties.
+ *
+ * @example Basic usage - row layout (default)
+ * <Flex>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Flex>
+ *
+ * @example Column layout
+ * <Flex flexDirection="column">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Flex>
+ *
+ * @example Custom gap between items
+ * <Flex gap={16}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Flex>
+ *
+ * @example Centered items (horizontally and vertically)
+ * <Flex justifyContent="center" alignItems="center">
+ *   <div>Centered Content</div>
+ * </Flex>
+ *
+ * @example Space between items
+ * <Flex justifyContent="space-between">
+ *   <div>Left</div>
+ *   <div>Middle</div>
+ *   <div>Right</div>
+ * </Flex>
+ *
+ * @example Full width container
+ * <Flex fullWidth>
+ *   <div>Takes full width of parent</div>
+ * </Flex>
+ *
+ * @example Full height container
+ * <Flex fullHeight>
+ *   <div>Takes full height of parent</div>
+ * </Flex>
+ *
+ * @example With wrap for responsive layouts
+ * <Flex flexWrap="wrap">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ *   <div>Item 4</div>
+ * </Flex>
+ *
+ * @example Setting flex properties for children
+ * <Flex childrenFlex="1 0">
+ *   <div>Equal width</div>
+ *   <div>Equal width</div>
+ * </Flex>
+ *
+ * @example With padding
+ * <Flex padding={16}>
+ *   <div>Content with padding</div>
+ * </Flex>
+ */
+export declare const Flex: ({ alignItems, children, childrenFlex, className, flexDirection, flexWrap, fullHeight, fullWidth, gap, justifyContent, padding, style, ...rest }: FlexProps) => import("react").JSX.Element;

package/components/glow/GlowWrapper.d.ts

@@ -0,0 +1,84 @@
+import { type ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+import type { Color } from "../../types/Color";
+import { type Product } from "../../utils/getProductDetails";
+type Props = BaseProps & {
+    /**
+     * Content to be wrapped with the glowing effect
+     */
+    children?: ReactNode;
+    /**
+     * Custom color for the glow effect
+     * @default 'gray600'
+     */
+    glowColor?: Color;
+    /**
+     * Product name to use for product-specific colors
+     * When specified, overrides glowColor with the product's gradient
+     */
+    product?: Product;
+    /**
+     * Border radius of the glowing wrapper in pixels
+     * @default 6
+     */
+    radius?: number;
+    /**
+     * Size of glow border in pixels
+     * @default 1
+     */
+    size?: number;
+};
+/**
+ * GlowWrapper component adds an interactive glowing border effect to its children.
+ * The glow follows the user's mouse movement, creating a dynamic highlight effect.
+ * It can use either a custom color or product-specific gradients.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <GlowWrapper>
+ *   <Card label="Content">Card with glow effect</Card>
+ * </GlowWrapper>
+ * ```
+ *
+ * @example With custom color
+ * ```tsx
+ * <GlowWrapper glowColor="blue500" size={2}>
+ *   <Card label="Blue Glow">Card with blue glow</Card>
+ * </GlowWrapper>
+ * ```
+ *
+ * @example With product-specific colors
+ * ```tsx
+ * <GlowWrapper product="checkout">
+ *   <Card label="Checkout">Checkout product card</Card>
+ * </GlowWrapper>
+ * ```
+ *
+ * @example Custom radius
+ * ```tsx
+ * <GlowWrapper radius={12} size={2}>
+ *   <div className="custom-content">
+ *     Content with larger radius glow
+ *   </div>
+ * </GlowWrapper>
+ * ```
+ *
+ * @example Multiple items with product-specific glows
+ * ```tsx
+ * <div className="products-grid">
+ *   <GlowWrapper product="classify">
+ *     <ProductCard product="classify" />
+ *   </GlowWrapper>
+ *
+ *   <GlowWrapper product="clear">
+ *     <ProductCard product="clear" />
+ *   </GlowWrapper>
+ *
+ *   <GlowWrapper product="dashboard">
+ *     <ProductCard product="dashboard" />
+ *   </GlowWrapper>
+ * </div>
+ * ```
+ */
+export declare const GlowWrapper: ({ children, className, glowColor, product, radius, size, style, }: Props) => import("react").JSX.Element;
+export {};

package/components/help-text/HelpText.d.ts

@@ -0,0 +1,79 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type HelpTextProps = BaseProps & {
+    /**
+     * Whether to display the help text in error state (red color)
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Content to display as help text
+     * Can be a string or ReactNode for custom formatting
+     */
+    helpText?: ReactNode;
+    /**
+     * Whether to remove the top margin from the component
+     * @default false
+     */
+    withoutMargin?: boolean;
+};
+/**
+ * HelpText component provides contextual assistance text, typically used
+ * below form inputs to show validation messages or helpful information.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Input
+ *   label="Email"
+ *   value={email}
+ *   onChange={handleEmailChange}
+ * />
+ * <HelpText helpText="We'll never share your email with anyone else." />
+ * ```
+ *
+ * @example Error state
+ * ```tsx
+ * <Input
+ *   label="Password"
+ *   type="password"
+ *   value={password}
+ *   onChange={handlePasswordChange}
+ *   error={!!passwordError}
+ * />
+ * <HelpText
+ *   error={!!passwordError}
+ *   helpText={passwordError || "Password must be at least 8 characters"}
+ * />
+ * ```
+ *
+ * @example Without margin
+ * ```tsx
+ * <Textarea
+ *   label="Description"
+ *   value={description}
+ *   onChange={handleDescriptionChange}
+ * />
+ * <HelpText
+ *   helpText="Maximum 200 characters"
+ *   withoutMargin
+ * />
+ * ```
+ *
+ * @example Custom ReactNode content
+ * ```tsx
+ * <Input
+ *   label="API Key"
+ *   value={apiKey}
+ *   onChange={handleApiKeyChange}
+ * />
+ * <HelpText
+ *   helpText={
+ *     <div className="custom-help-text">
+ *       <InfoIcon size={12} />
+ *       <span>Find your API key in your account settings</span>
+ *     </div>
+ *   }
+ * />
+ * ```
+ */
+export declare const HelpText: ({ className, error, helpText, style, withoutMargin, }: HelpTextProps) => import("react").JSX.Element | null;

package/components/input/Input.d.ts

@@ -0,0 +1,112 @@
+import type { ChangeEventHandler, InputHTMLAttributes, MutableRefObject } from 'react';
+import { type HelpTextProps } from "../help-text/HelpText";
+import { type FloatLabelInputProps } from "./input-type/_FloatLabelInput";
+type InputType = {
+    /** Need to pass the ref here to preserve generics, as forwardRef doesn't allow it
+     * @link https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
+     */
+    inputRef?: MutableRefObject<HTMLInputElement | null>;
+    /**
+     * @default false
+     */
+    noBorder?: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    /** A value (in px) that will determine how wide the input is. If nothing is passed, it defaults to 100% */
+    width?: number;
+} & Omit<FloatLabelInputProps, 'onChange'> & HelpTextProps;
+export type InputProps = InputType & Omit<InputHTMLAttributes<HTMLInputElement>, keyof InputType>;
+/**
+ * Input component that supports various input types with features like floating labels,
+ * prefixes, suffixes, and different states (error, disabled, etc.).
+ *
+ * @example Basic text input
+ * <Input
+ *   label="Username"
+ *   placeholder="Enter your username"
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example Password input
+ * <Input
+ *   type="password"
+ *   label="Password"
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example Number input
+ * <Input
+ *   type="number"
+ *   label="Age"
+ *   onChange={e => setValue(e.target.valueAsNumber)}
+ *   value={value}
+ * />
+ *
+ * @example Date input
+ * <Input
+ *   type="date"
+ *   label="Birth Date"
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example With help text
+ * <Input
+ *   label="Email"
+ *   helpText="We'll never share your email"
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example With error state
+ * <Input
+ *   label="Username"
+ *   error={true}
+ *   helpText="Username is required"
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example With prefix icon
+ * <Input
+ *   label="Search"
+ *   prefix={<SearchIcon />}
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example With suffix
+ * <Input
+ *   label="Weight"
+ *   suffix="kg"
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example Value prefix (for partial content)
+ * <Input
+ *   label="Phone"
+ *   valuePrefix="+1"
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example Disabled state
+ * <Input
+ *   label="Username"
+ *   disabled
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example Required field
+ * <Input
+ *   label="Email"
+ *   required
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ */
+export declare const Input: ({ autoFocus, className, disabled, error, helpText, inputMode, inputRef, label, noBorder, onChange, onKeyDown, pattern, placeholder, prefix, readOnly, required, size, style, suffix, tabIndex, type, value, valuePrefix, width, ...props }: InputProps) => import("react").JSX.Element;
+export {};

package/components/input/MultiInput.d.ts

@@ -0,0 +1,94 @@
+export type MultiInputProps = {
+    className?: string;
+    inputValue: string;
+    placeholder?: string;
+    setHasValidationError?: (hasValidationError: boolean) => void;
+    setInputValue: (input: string) => void;
+    setTags: (tags: string[]) => void;
+    style?: React.CSSProperties;
+    tagValidation?: (tag: string) => boolean;
+    tags: string[];
+};
+/**
+ * MultiInput component allows users to input multiple values (tags) in a single field.
+ * It supports keyboard navigation, tag validation, and clipboard paste operations.
+ *
+ * @example Basic usage
+ * const [tags, setTags] = useState<string[]>([]);
+ * const [inputValue, setInputValue] = useState('');
+ *
+ * <MultiInput
+ *   inputValue={inputValue}
+ *   setInputValue={setInputValue}
+ *   tags={tags}
+ *   setTags={setTags}
+ *   placeholder="Add tags..."
+ * />
+ *
+ * @example With tag validation
+ * const [tags, setTags] = useState<string[]>([]);
+ * const [inputValue, setInputValue] = useState('');
+ * const [hasError, setHasError] = useState(false);
+ *
+ * const validateTag = (tag: string) => {
+ *   return tag.length >= 3 && tag.length <= 20;
+ * };
+ *
+ * <MultiInput
+ *   inputValue={inputValue}
+ *   setInputValue={setInputValue}
+ *   tags={tags}
+ *   setTags={setTags}
+ *   tagValidation={validateTag}
+ *   setHasValidationError={setHasError}
+ *   placeholder="Enter tags (3-20 characters)"
+ * />
+ * {hasError && <Text color="danger">One or more tags are invalid</Text>}
+ *
+ * @example With initial tags
+ * const [tags, setTags] = useState<string[]>(["react", "typescript", "amino"]);
+ * const [inputValue, setInputValue] = useState('');
+ *
+ * <MultiInput
+ *   inputValue={inputValue}
+ *   setInputValue={setInputValue}
+ *   tags={tags}
+ *   setTags={setTags}
+ *   placeholder="Add more tags..."
+ * />
+ *
+ * @example With email validation
+ * const [emails, setEmails] = useState<string[]>([]);
+ * const [inputValue, setInputValue] = useState('');
+ * const [hasError, setHasError] = useState(false);
+ *
+ * const validateEmail = (email: string) => {
+ *   const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ *   return regex.test(email);
+ * };
+ *
+ * <MultiInput
+ *   inputValue={inputValue}
+ *   setInputValue={setInputValue}
+ *   tags={emails}
+ *   setTags={setEmails}
+ *   tagValidation={validateEmail}
+ *   setHasValidationError={setHasError}
+ *   placeholder="Add email addresses..."
+ * />
+ *
+ * @example With custom styling
+ * const [tags, setTags] = useState<string[]>([]);
+ * const [inputValue, setInputValue] = useState('');
+ *
+ * <MultiInput
+ *   inputValue={inputValue}
+ *   setInputValue={setInputValue}
+ *   tags={tags}
+ *   setTags={setTags}
+ *   className="custom-multi-input"
+ *   style={{ maxWidth: '500px' }}
+ *   placeholder="Add tags..."
+ * />
+ */
+export declare const MultiInput: ({ className, inputValue, placeholder, setHasValidationError, setInputValue, setTags, style, tags, tagValidation, }: MultiInputProps) => import("react").JSX.Element;