@lax-wp/design-system 0.2.0 → 0.2.1

package/dist/components/forms/debounce-input/DebounceInputField.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Props for the DebounceInputField component
+ */
+export interface DebounceInputFieldProps {
+    /** Unique identifier for the input */
+    id: string;
+    /** Label text to display above the input */
+    label?: string;
+    /** Current value of the input */
+    value?: string;
+    /** Default value for the input */
+    defaultValue?: string;
+    /** Callback function called when value changes (debounced) */
+    onChange: (value: string) => void;
+    /** Callback function called on every keystroke (immediate) */
+    onImmediateChange?: (value: string) => void;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Message to display below the input */
+    message?: string;
+    /** Type of message to display */
+    messageType?: "success" | "error" | "info" | "default";
+    /** Additional CSS classes for the wrapper container */
+    wrapperClassName?: string;
+    /** Additional CSS classes for the input */
+    inputClassName?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Help text to display below the label */
+    helpText?: string;
+    /** Size variant for the input */
+    size?: "small" | "medium" | "large";
+    /** Input type */
+    type?: "text" | "email" | "url" | "search" | "tel" | "password";
+    /** Debounce timeout in milliseconds */
+    debounceTimeout?: number;
+    /** Minimum value for number inputs */
+    min?: number;
+    /** Maximum value for number inputs */
+    max?: number;
+    /** Maximum length for text inputs */
+    maxLength?: number;
+    /** Pattern for input validation */
+    pattern?: string;
+    /** Additional props to pass to the input element */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /** Inline styles for the input element */
+    inputStyle?: React.CSSProperties;
+    /** Callback for key down events */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Callback for focus events */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback for blur events */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+}
+/**
+ * A highly customizable debounced input component with label, validation, and styling support.
+ * Features configurable debounce timing, immediate change callbacks, and comprehensive prop support.
+ *
+ * @example
+ * ```tsx
+ * <DebounceInputField
+ *   id="search"
+ *   label="Search"
+ *   value={searchTerm}
+ *   onChange={(value) => setSearchTerm(value)}
+ *   debounceTimeout={300}
+ *   placeholder="Type to search..."
+ * />
+ * ```
+ */
+export declare const DebounceInputField: import("react").ForwardRefExoticComponent<DebounceInputFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/forms/file-upload/FileUpload.d.ts

@@ -0,0 +1,81 @@
+import { type ReactNode } from "react";
+/**
+ * File upload size options
+ */
+export type FileUploadSize = "small" | "medium" | "large";
+/**
+ * File upload variant options
+ */
+export type FileUploadVariant = "primary" | "secondary";
+/**
+ * Props for the FileUpload component
+ */
+export interface FileUploadProps {
+    /** Unique identifier for the file upload */
+    id?: string;
+    /** Callback function called when file is selected */
+    onFileSelect: (file: File | File[] | null, fileName?: string) => void;
+    /** Custom upload handler function */
+    onUpload?: (file: File | File[]) => Promise<void>;
+    /** Description text to display */
+    description?: string;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Whether the upload is disabled */
+    disabled?: boolean;
+    /** Default file to display */
+    defaultFile?: File | null;
+    /** Accepted file types (e.g., ".pdf,.doc,.docx") */
+    acceptedFiles?: string;
+    /** Whether the upload is in loading state */
+    isLoading?: boolean;
+    /** Whether to convert file to base64 */
+    asBase64?: boolean;
+    /** Whether to allow multiple file selection */
+    multiple?: boolean;
+    /** Whether to hide the selected file display */
+    hideSelectedFile?: boolean;
+    /** Callback when file is deleted */
+    onDelete?: () => void;
+    /** Maximum file size in bytes (default: 200MB) */
+    maxSize?: number;
+    /** Additional CSS classes for the wrapper container */
+    wrapperClassName?: string;
+    /** Additional CSS classes for the upload area */
+    uploadClassName?: string;
+    /** Size variant for the upload area */
+    size?: FileUploadSize;
+    /** Visual variant for the upload area */
+    variant?: FileUploadVariant;
+    /** Custom upload icon */
+    uploadIcon?: ReactNode;
+    /** Custom delete icon */
+    deleteIcon?: ReactNode;
+    /** Custom file type icons */
+    fileTypeIcons?: {
+        pdf?: ReactNode;
+        default?: ReactNode;
+    };
+    /** Whether to show file size */
+    showFileSize?: boolean;
+    /** Whether to show upload progress */
+    showProgress?: boolean;
+    /** Upload progress percentage */
+    progress?: number;
+}
+/**
+ * A highly customizable file upload component with drag-and-drop support.
+ * Features multiple sizes, variants, file type detection, and comprehensive styling options.
+ *
+ * @example
+ * ```tsx
+ * <FileUpload
+ *   id="document-upload"
+ *   onFileSelect={(file) => console.log('File selected:', file)}
+ *   description="Upload your document here"
+ *   acceptedFiles=".pdf,.doc,.docx"
+ *   maxSize={10 * 1024 * 1024} // 10MB
+ * />
+ * ```
+ */
+export declare const FileUpload: import("react").ForwardRefExoticComponent<FileUploadProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/forms/input-field/InputField.d.ts

@@ -0,0 +1,62 @@
+import React from "react";
+/**
+ * Props for the InputField component
+ */
+export interface InputFieldProps {
+    /** Unique identifier for the input field */
+    id: string;
+    /** The current value of the input field */
+    value?: string;
+    /** Callback function called when the input value changes */
+    onChange: (value: string) => void;
+    /** Callback function called on key down events */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Error message to display below the input */
+    message?: string;
+    /** Success message to display below the input */
+    messageType?: "success" | "error" | "info" | "default";
+    /** Default value for the input field */
+    defaultValue?: string;
+    /** Whether the input field is disabled */
+    disabled?: boolean;
+    /** Maximum value for number inputs */
+    max?: number;
+    /** Minimum value for number inputs */
+    min?: number;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Label text for the input field */
+    label?: string;
+    /** Input type (text, email, password, number, etc.) */
+    type?: string;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Icon or element to display at the end of the input */
+    fieldSuffix?: React.ReactNode;
+    /** Additional CSS classes for the wrapper container */
+    wrapperClassNames?: string;
+    /** Additional CSS classes for the input element */
+    inputClassNames?: string;
+    /** Inline styles for the input element */
+    inputStyle?: React.CSSProperties;
+    /** Additional props to pass to the input element */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}
+/**
+ * A highly customizable input field component with label, validation, and styling support.
+ *
+ * @example
+ * ```tsx
+ * <InputField
+ *   id="email"
+ *   label="Email Address"
+ *   type="email"
+ *   value={email}
+ *   onChange={setEmail}
+ *   placeholder="Enter your email"
+ *   required
+ *   errorMessage={emailError}
+ * />
+ * ```
+ */
+export declare const InputField: React.ForwardRefExoticComponent<InputFieldProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/forms/multi-file-upload/MultiFileUpload.d.ts

@@ -0,0 +1,78 @@
+/**
+ * File upload result interface
+ */
+export interface FileUploadResult {
+    filename: string;
+    content?: string;
+    fileUrl?: string;
+    fileName?: string;
+}
+/**
+ * Union type for file change callback parameter
+ */
+export type FileChangeValue = File | File[] | FileUploadResult | FileUploadResult[] | string | string[] | null;
+/**
+ * Props for the MultiFileUpload component
+ */
+export interface MultiFileUploadProps {
+    /** Unique identifier for the upload component */
+    id?: string;
+    /** Callback function called when files are selected/uploaded */
+    onFileChange: (files: FileChangeValue, fileName?: string) => void;
+    /** Description text to display in the upload area */
+    description?: string;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Whether the upload is disabled */
+    disabled?: boolean;
+    /** Default file to display */
+    defaultFile?: File | null;
+    /** Accepted file types (e.g., ".pdf,.doc,.docx") */
+    acceptedFiles?: string;
+    /** Whether the component is in loading state */
+    isLoading?: boolean;
+    /** Whether to convert files to base64 */
+    asBase64?: boolean;
+    /** Whether to upload files to server */
+    toFileServer?: boolean;
+    /** Whether files are currently uploading */
+    fileUploading?: boolean;
+    /** Callback to set file uploading state */
+    setFileUploading?: (fileUploading: boolean | string | null) => void;
+    /** Whether to upload to document server */
+    uploadToDocServer?: boolean;
+    /** Whether to allow multiple file selection */
+    multiple?: boolean;
+    /** Whether to get real file name */
+    getRealFileName?: boolean;
+    /** Maximum file size in bytes (default: 50MB) */
+    maxSize?: number;
+    /** Custom upload handler function */
+    onUpload?: (files: File[]) => Promise<FileUploadResult[]>;
+    /** Custom delete handler function */
+    onDelete?: (fileData?: FileUploadResult) => Promise<void>;
+    /** Additional CSS classes for the wrapper */
+    wrapperClassName?: string;
+    /** Additional CSS classes for the upload area */
+    uploadClassName?: string;
+    /** Whether to show file size */
+    showFileSize?: boolean;
+    /** Custom file size formatter */
+    formatFileSize?: (size: number) => string;
+}
+/**
+ * A highly customizable multi-file upload component with drag-and-drop support.
+ * Features file validation, base64 conversion, server upload, and comprehensive styling options.
+ *
+ * @example
+ * ```tsx
+ * <MultiFileUpload
+ *   id="file-upload"
+ *   description="Upload your documents"
+ *   onFileChange={(files) => console.log(files)}
+ *   multiple
+ *   maxSize={10 * 1024 * 1024} // 10MB
+ * />
+ * ```
+ */
+export declare const MultiFileUpload: import("react").ForwardRefExoticComponent<MultiFileUploadProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/forms/percentage-input/PercentageInputField.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Props for the PercentageInputField component
+ */
+export interface PercentageInputFieldProps {
+    /** Unique identifier for the input */
+    id: string;
+    /** Label text to display above the input */
+    label?: string;
+    /** Current value of the input (number) */
+    value?: number | null;
+    /** Default value for the input */
+    defaultValue?: number | null;
+    /** Callback function called when value changes */
+    onChange: (value: number | null) => void;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Message to display below the input */
+    message?: string;
+    /** Type of message to display */
+    messageType?: "success" | "error" | "info" | "default";
+    /** Additional CSS classes for the wrapper container */
+    wrapperClassName?: string;
+    /** Additional CSS classes for the input */
+    inputClassName?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Help text to display below the label */
+    helpText?: string;
+    /** Size variant for the input */
+    size?: "small" | "medium" | "large";
+    /** Minimum value allowed */
+    min?: number;
+    /** Maximum value allowed */
+    max?: number;
+    /** Step value for incrementing */
+    step?: number;
+    /** Number of decimal places */
+    decimalPlaces?: number;
+    /** Whether to show percentage symbol */
+    showSymbol?: boolean;
+    /** Whether to allow negative values */
+    allowNegative?: boolean;
+    /** Additional props to pass to the input element */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /** Inline styles for the input element */
+    inputStyle?: React.CSSProperties;
+    /** Callback for key down events */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Callback for focus events */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback for blur events */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+}
+/**
+ * A highly customizable percentage input component with label, validation, and styling support.
+ * Features percentage symbol, decimal control, and comprehensive validation.
+ *
+ * @example
+ * ```tsx
+ * <PercentageInputField
+ *   id="discount"
+ *   label="Discount Percentage"
+ *   value={discount}
+ *   onChange={(value) => setDiscount(value)}
+ *   min={0}
+ *   max={100}
+ *   required
+ * />
+ * ```
+ */
+export declare const PercentageInputField: import("react").ForwardRefExoticComponent<PercentageInputFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/forms/text-field/TextField.d.ts

@@ -0,0 +1,48 @@
+import type { RefObject } from "react";
+/**
+ * Props for the TextAreaField component
+ */
+export interface TextFieldProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+    /** The label text to display above the textarea */
+    label?: string;
+    /** Placeholder text for the textarea */
+    placeholder: string;
+    /** Current value of the textarea */
+    value?: string;
+    /** Callback function called when the textarea value changes */
+    onChange: (value: string) => void;
+    /** Number of visible text lines for the textarea */
+    rows?: number;
+    /** Message to display below the textarea */
+    message?: string;
+    /** Type of message to display */
+    messageType?: "success" | "error" | "info" | "default";
+    /** Default value for the textarea */
+    defaultValue?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the textarea is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes for the wrapper container */
+    className?: string;
+    /** Ref object for the textarea element */
+    inputRef?: RefObject<HTMLTextAreaElement>;
+    /** Maximum character length allowed */
+    maxLength?: number;
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
+    /** Whether to remove border styling */
+    noBorder?: boolean;
+    /** Unique identifier for the textarea */
+    id?: string;
+    /** Custom inline styles for the textarea */
+    inputStyle?: React.CSSProperties;
+}
+/**
+ * A customizable textarea field component with label, validation, and styling support.
+ * Features dark mode support, accessibility enhancements, and character count display.
+ *
+ * @param props - The props for the TextAreaField component
+ * @returns The rendered TextAreaField component
+ */
+export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/forms/toggle/Toggle.d.ts

@@ -0,0 +1,71 @@
+import { type ReactNode } from "react";
+/**
+ * Toggle label direction options
+ */
+export type ToggleDirection = "top" | "left" | "right";
+/**
+ * Props for the Toggle component
+ */
+export interface ToggleProps {
+    /** Unique identifier for the toggle */
+    id?: string;
+    /** Whether the toggle is checked */
+    checked: boolean;
+    /** Callback function called when toggle state changes */
+    onChange: (checked: boolean) => void;
+    /** Label text or element to display */
+    label?: ReactNode;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the toggle is disabled */
+    disabled?: boolean;
+    /** Message to display below the toggle */
+    message?: string;
+    /** Type of message to display */
+    messageType?: "success" | "error" | "info" | "default";
+    /** Additional CSS classes for the wrapper container */
+    wrapperClassName?: string;
+    /** Additional CSS classes for the toggle */
+    toggleClassName?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Help text to display below the label */
+    helpText?: string;
+    /** Size variant for the toggle */
+    size?: "small" | "medium" | "large";
+    /** Label direction relative to toggle */
+    labelDirection?: ToggleDirection;
+    /** Whether to hide the status text (Yes/No) */
+    hideStatus?: boolean;
+    /** Custom status text instead of Yes/No */
+    statusText?: string;
+    /** Whether to show icons in the toggle */
+    withIcon?: boolean;
+    /** Custom icons for checked/unchecked states */
+    icon?: {
+        checkedIcon: ReactNode;
+        uncheckedIcon: ReactNode;
+    };
+    /** Visual variant for the toggle */
+    variant?: "primary" | "secondary";
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
+    /** Whether to stop click propagation */
+    stopClickPropagation?: boolean;
+}
+/**
+ * A highly customizable toggle component with label, validation, and styling support.
+ * Features multiple sizes, variants, icon support, and comprehensive prop support.
+ *
+ * @example
+ * ```tsx
+ * <Toggle
+ *   id="notifications"
+ *   label="Enable Notifications"
+ *   checked={notificationsEnabled}
+ *   onChange={(checked) => setNotificationsEnabled(checked)}
+ *   required
+ * />
+ * ```
+ */
+export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/icons/CloseIcon.d.ts

@@ -0,0 +1,16 @@
+import { type SVGAttributes } from "react";
+/**
+ * Props for the Close icon component
+ */
+export interface CloseIconProps extends SVGAttributes<SVGElement> {
+    /** Size of the icon */
+    size?: number;
+    /** Fill color of the icon */
+    fill?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Close icon component
+ */
+export declare const CloseIcon: import("react").ForwardRefExoticComponent<CloseIconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/icons/HelpIcon.d.ts

@@ -0,0 +1,6 @@
+import React, { SVGAttributes } from 'react';
+export interface HelpIconProps extends SVGAttributes<SVGElement> {
+    size?: number;
+    className?: string;
+}
+export declare const HelpIcon: React.FC<HelpIconProps>;

package/dist/components/icons/SearchIcon.d.ts

@@ -0,0 +1,6 @@
+import React, { SVGAttributes } from 'react';
+export interface SearchIconProps extends SVGAttributes<SVGElement> {
+    size?: number;
+    className?: string;
+}
+export declare const SearchIcon: React.FC<SearchIconProps>;

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+export interface TooltipProps {
+    title: ReactNode;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    children: ReactNode;
+    className?: string;
+}
+export declare const Tooltip: React.FC<TooltipProps>;