@lax-wp/design-system 0.1.0 → 0.1.2

package/dist/components/data-display/pdf-viewer/PdfViewer.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Props for the PdfViewer component
+ */
+export interface PdfViewerProps {
+    /** URL of the PDF file to display */
+    pdfUrl: string;
+    /** Width of the viewer */
+    width?: string | number;
+    /** Height of the viewer */
+    height?: string | number;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Additional CSS classes for the iframe */
+    iframeClassName?: string;
+    /** Title for the PDF viewer iframe */
+    title?: string;
+    /** Whether to show loading state */
+    showLoading?: boolean;
+    /** Custom loading component */
+    loadingComponent?: React.ReactNode;
+    /** Custom error component */
+    errorComponent?: React.ReactNode;
+    /** Callback when PDF fails to load */
+    onError?: () => void;
+    /** Callback when PDF loads successfully */
+    onLoad?: () => void;
+    /** Whether to allow fullscreen */
+    allowFullScreen?: boolean;
+    /** Custom aria-label for accessibility */
+    "aria-label"?: string;
+}
+/**
+ * PdfViewer component displays PDF documents in an embedded iframe
+ *
+ * @example
+ * ```tsx
+ * <PdfViewer
+ *   pdfUrl="/documents/report.pdf"
+ *   width="100%"
+ *   height="600px"
+ *   title="Monthly Report"
+ * />
+ * ```
+ */
+export declare const PdfViewer: import("react").ForwardRefExoticComponent<PdfViewerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/popper/Popper.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Available placement options for the Popper
+ */
+export type PopperPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+/**
+ * Props for the Popper component
+ */
+export interface PopperProps {
+    /** The trigger element (button content) */
+    children: React.ReactNode;
+    /** The popper content to display */
+    component: React.ReactNode;
+    /** Placement position relative to trigger */
+    placement?: PopperPlacement;
+    /** Whether the popper is open */
+    isOpen: boolean;
+    /** Function to toggle the popper open/closed state */
+    toggleMenu?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Portal container ID (defaults to document.body) */
+    parentContainer?: string;
+    /** Whether to remove default spacing on trigger */
+    noSpacing?: boolean;
+    /** Additional CSS classes for the trigger button */
+    triggerClassName?: string;
+    /** Additional CSS classes for the popper container */
+    containerClassName?: string;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Whether to show arrow pointing to trigger */
+    showArrow?: boolean;
+    /** Custom offset from trigger element */
+    offset?: number;
+    /** Whether to disable outside click handling */
+    disableOutsideClick?: boolean;
+    /** Custom aria-label for accessibility */
+    "aria-label"?: string;
+    /** Whether trigger is disabled */
+    disabled?: boolean;
+}
+/**
+ * Popper component provides positioned floating content relative to a trigger element
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Popper
+ *   isOpen={isOpen}
+ *   toggleMenu={() => setIsOpen(!isOpen)}
+ *   placement="bottom-start"
+ *   component={<MenuContent />}
+ * >
+ *   <button>Open Menu</button>
+ * </Popper>
+ * ```
+ */
+export declare const Popper: import("react").ForwardRefExoticComponent<PopperProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/status-color-mapping/StatusColorMapping.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Available status color options for the StatusColorMapping component
+ */
+export type StatusColor = "blue" | "green" | "yellow" | "orange" | "red" | "navy" | "grey" | "purple" | "teal" | "peach";
+/**
+ * Props for the StatusColorMapping component
+ */
+export interface StatusColorMappingProps {
+    /** The status color variant to apply */
+    status?: StatusColor;
+    /** The text content to display */
+    children: string;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Whether to use small size variant */
+    size?: "small" | "medium" | "large";
+    /** Custom aria-label for accessibility */
+    "aria-label"?: string;
+}
+/**
+ * StatusColorMapping component displays text with status-based color styling
+ *
+ * @example
+ * ```tsx
+ * <StatusColorMapping status="green">Active</StatusColorMapping>
+ * <StatusColorMapping status="red" size="small">Error</StatusColorMapping>
+ * ```
+ */
+export declare const StatusColorMapping: import("react").ForwardRefExoticComponent<StatusColorMappingProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/data-display/typography/Typography.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface TypographyProps {
+    children: React.ReactNode;
+    variant?: "regular" | "medium" | "semibold" | "bold" | "extrablack";
+    size?: "extra-small" | "small" | "display-small" | "medium" | "display-medium" | "large" | "extra-large";
+    className?: string;
+    onClick?(event: React.MouseEvent<HTMLDivElement>): void;
+    highlight?: boolean;
+    appearance?: "title" | "body" | "subtitle" | "custom";
+    style?: React.CSSProperties;
+}
+export declare const Typography: {
+    ({ children, variant, size, onClick, className, highlight, appearance, style, }: TypographyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/feedback/toast/Toast.d.ts

@@ -0,0 +1,29 @@
+import React, { ReactNode } from 'react';
+import 'react-toastify/dist/ReactToastify.css';
+import './styles.css';
+export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'in-progress';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToastContainerProps {
+    position?: ToastPosition;
+    autoClose?: number | false;
+    hideProgressBar?: boolean;
+    newestOnTop?: boolean;
+    closeOnClick?: boolean;
+    pauseOnFocusLoss?: boolean;
+    draggable?: boolean;
+    pauseOnHover?: boolean;
+    rtl?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Toast: React.FC<ToastContainerProps>;
+export declare const toast: {
+    success: (message: ReactNode, options?: any) => import("react-toastify").Id;
+    error: (message: ReactNode, options?: any) => import("react-toastify").Id;
+    warning: (message: ReactNode, options?: any) => import("react-toastify").Id;
+    info: (message: ReactNode, options?: any) => import("react-toastify").Id;
+    inProgress: (message: ReactNode, options?: any) => import("react-toastify").Id;
+    dismiss: (toastId?: string | number) => void;
+    isActive: (toastId: string | number) => boolean;
+};
+export default Toast;

package/dist/components/forms/checkbox/Checkbox.d.ts

@@ -0,0 +1,55 @@
+import type { CheckboxChangeEvent, CheckboxProps, CheckboxRef } from "antd";
+/**
+ * Props for the Checkbox component
+ */
+export interface CheckboxComponentProps {
+    /** Unique identifier for the checkbox */
+    id: string;
+    /** Label text to display next to the checkbox */
+    label?: string;
+    /** Whether the checkbox is checked */
+    checked?: boolean;
+    /** Whether the checkbox is checked (alias for checked) */
+    isChecked?: boolean;
+    /** Callback function called when checkbox state changes */
+    onChange: (checked: boolean, event: CheckboxChangeEvent) => void;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Message to display below the checkbox */
+    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 checkbox input */
+    checkboxClassName?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Size variant for the checkbox */
+    size?: "small" | "medium" | "large";
+    /** Visual variant for the checkbox */
+    variant?: "default" | "outline" | "solid";
+    /** Whether to show the label on the left side */
+    labelPosition?: "left" | "right";
+    /** Additional props to pass to the Ant Design Checkbox */
+    checkboxProps?: Omit<CheckboxProps, "checked" | "onChange" | "id" | "disabled">;
+}
+/**
+ * A highly customizable checkbox component with label, validation, and styling support.
+ * Features dark mode support, accessibility enhancements, and comprehensive prop support.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   id="terms"
+ *   label="I agree to the terms and conditions"
+ *   checked={agreedToTerms}
+ *   onChange={(checked) => setAgreedToTerms(checked)}
+ *   required
+ * />
+ * ```
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxComponentProps & import("react").RefAttributes<CheckboxRef>>;
+export type TCheckboxComponentProps = CheckboxComponentProps;

package/dist/components/forms/color-picker/ColorPicker.d.ts

@@ -0,0 +1,60 @@
+import type { ChangeEvent } from "react";
+/**
+ * Props for the ColorPicker component
+ */
+export interface ColorPickerProps {
+    /** Unique identifier for the color picker */
+    id: string;
+    /** Label text to display above the color picker */
+    label?: string;
+    /** Current color value (hex format) */
+    value?: string;
+    /** Default color value (hex format) */
+    defaultValue?: string;
+    /** Callback function called when color value changes */
+    onChange: (color: string, event: ChangeEvent<HTMLInputElement>) => void;
+    /** Callback function called when color value changes (legacy) */
+    onColorChange?: (color: string) => void;
+    /** Whether the color picker is disabled */
+    disabled?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Message to display below the color picker */
+    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 color input */
+    inputClassName?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Size variant for the color picker */
+    size?: "small" | "medium" | "large";
+    /** Whether to show the color value as text */
+    showValue?: boolean;
+    /** Format for displaying the color value */
+    valueFormat?: "hex" | "rgb" | "hsl";
+    /** Additional props to pass to the input element */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /** Help text to display below the label */
+    helpText?: string;
+}
+/**
+ * A highly customizable color picker component with label, validation, and styling support.
+ * Features dark mode support, accessibility enhancements, and comprehensive prop support.
+ *
+ * @example
+ * ```tsx
+ * <ColorPicker
+ *   id="theme-color"
+ *   label="Theme Color"
+ *   value={themeColor}
+ *   onChange={(color) => setThemeColor(color)}
+ *   showValue
+ *   required
+ * />
+ * ```
+ */
+export declare const ColorPicker: import("react").ForwardRefExoticComponent<ColorPickerProps & import("react").RefAttributes<HTMLInputElement>>;
+export type ColorPickerComponentProps = ColorPickerProps;

package/dist/components/forms/creatable-select/CreatableSelect.d.ts

@@ -0,0 +1,92 @@
+import type { GroupBase, SingleValue, MultiValue, ActionMeta, Props as ReactSelectProps, SelectInstance } from "react-select";
+import type { components } from "react-select";
+/**
+ * Option type for the CreatableSelect component
+ */
+export interface SelectOption {
+    /** The value of the option */
+    value: string | number;
+    /** The label displayed for the option */
+    label: string;
+    /** Whether the option is disabled */
+    isDisabled?: boolean;
+    /** Additional data for the option */
+    data?: Record<string, unknown>;
+}
+/**
+ * Props for the CreatableSelect component
+ */
+export interface CreatableSelectProps {
+    /** Unique identifier for the select */
+    id: string;
+    /** Label text to display above the select */
+    label?: string;
+    /** Placeholder text for the select */
+    placeholder?: string;
+    /** Current value for single select */
+    value?: SelectOption | null;
+    /** Current values for multi select */
+    selectedValues?: SelectOption[];
+    /** Callback function called when selection changes */
+    onChange: (value: SingleValue<SelectOption> | MultiValue<SelectOption>, actionMeta: ActionMeta<SelectOption>) => void;
+    /** Callback function called when selection changes (legacy) */
+    onColorChange?: (data: SelectOption | SelectOption[] | null) => void;
+    /** Array of available options */
+    selectOptions: SelectOption[];
+    /** Whether the select is in loading state */
+    loading?: boolean;
+    /** Whether multiple selections are allowed */
+    multiSelect?: boolean;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Whether the select is clearable */
+    isClearable?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Message to display below the select */
+    message?: string;
+    /** Type of message to display */
+    messageType?: "success" | "error" | "info" | "default";
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
+    /** Additional CSS classes for the wrapper container */
+    wrapperClassName?: string;
+    /** Additional CSS classes for the select */
+    selectClassName?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Help text to display below the label */
+    helpText?: string;
+    /** Size variant for the select */
+    size?: "small" | "medium" | "large";
+    /** Custom filter function for options */
+    filterOption?: ReactSelectProps<SelectOption, boolean, GroupBase<SelectOption>>["filterOption"];
+    /** Additional props to pass to the react-select component */
+    selectProps?: Partial<ReactSelectProps<SelectOption, boolean, GroupBase<SelectOption>>>;
+    /** Custom components to override defaults */
+    components?: Partial<typeof components>;
+    /** Array of tags for categorization */
+    tags?: string[];
+    /** Tooltip text */
+    tooltip?: string;
+}
+/**
+ * A highly customizable creatable select component with label, validation, and styling support.
+ * Features dark mode support, accessibility enhancements, and comprehensive prop support.
+ * Built on top of react-select/creatable for advanced functionality.
+ *
+ * @example
+ * ```tsx
+ * <CreatableSelectField
+ *   id="tags"
+ *   label="Tags"
+ *   selectOptions={tagOptions}
+ *   value={selectedTag}
+ *   onChange={(newValue) => setSelectedTag(newValue)}
+ *   placeholder="Select or create tags..."
+ *   multiSelect
+ * />
+ * ```
+ */
+export declare const CreatableSelectField: import("react").ForwardRefExoticComponent<CreatableSelectProps & import("react").RefAttributes<SelectInstance<SelectOption, boolean, GroupBase<SelectOption>>>>;
+export type TProps = CreatableSelectProps;

package/dist/components/forms/currency-input/CurrencyInputField.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Props for the CurrencyInputField component
+ */
+export interface CurrencyInputFieldProps {
+    /** Unique identifier for the currency 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, currencyCode: 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";
+    /** Current currency code */
+    currencyCode?: string;
+    /** Whether to allow currency selection */
+    allowCurrencyChange?: boolean;
+    /** Available currency options (defaults to all) */
+    availableCurrencies?: string[];
+    /** Whether to show currency symbol */
+    showSymbol?: boolean;
+    /** Whether to format value display */
+    formatValue?: boolean;
+    /** Minimum value allowed */
+    min?: number;
+    /** Maximum value allowed */
+    max?: number;
+    /** Number of decimal places */
+    decimalPlaces?: number;
+    /** Additional props to pass to the input element */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /** Inline styles for the input element */
+    inputStyle?: React.CSSProperties;
+}
+/**
+ * A highly customizable currency input component with label, validation, and styling support.
+ * Features currency selection, formatting, validation, and comprehensive prop support.
+ *
+ * @example
+ * ```tsx
+ * <CurrencyInputField
+ *   id="price"
+ *   label="Price"
+ *   value={price}
+ *   onChange={(value, currency) => setPrice(value)}
+ *   currencyCode="USD"
+ *   allowCurrencyChange
+ *   required
+ * />
+ * ```
+ */
+export declare const CurrencyInputField: import("react").ForwardRefExoticComponent<CurrencyInputFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/forms/currency-input/currency.constant.d.ts

@@ -0,0 +1,6 @@
+export declare const CURRENCIES: {
+    value: string;
+    label: string;
+    symbol: string;
+}[];
+export declare const CURRENCY_SYMBOLS: Record<string, string>;

package/dist/components/forms/date-range/DateRange.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Date range value type
+ */
+export interface DateRangeValue {
+    /** Start date */
+    startDate: Date | null;
+    /** End date */
+    endDate: Date | null;
+}
+/**
+ * Props for the DateRange component
+ */
+export interface DateRangeProps {
+    /** Unique identifier for the date range */
+    id: string;
+    /** Label text to display above the date range */
+    label?: string;
+    /** Current date range value */
+    value?: DateRangeValue;
+    /** Default date range value */
+    defaultValue?: DateRangeValue;
+    /** Callback function called when date range changes */
+    onChange: (value: DateRangeValue) => void;
+    /** Whether the date range is disabled */
+    disabled?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Message to display below the date range */
+    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 containers */
+    inputClassName?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Help text to display below the label */
+    helpText?: string;
+    /** Size variant for the inputs */
+    size?: "small" | "medium" | "large";
+    /** Date format for display */
+    dateFormat?: string;
+    /** Minimum date allowed */
+    minDate?: Date;
+    /** Maximum date allowed */
+    maxDate?: Date;
+    /** Placeholder text for start date */
+    startPlaceholder?: string;
+    /** Placeholder text for end date */
+    endPlaceholder?: string;
+    /** Whether to allow clearing the selection */
+    allowClear?: boolean;
+    /** Additional props to pass to the input elements */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}
+/**
+ * A highly customizable date range component with label, validation, and styling support.
+ * Features proper date handling, validation, and comprehensive prop support.
+ *
+ * @example
+ * ```tsx
+ * <DateRange
+ *   id="event-dates"
+ *   label="Event Duration"
+ *   value={dateRange}
+ *   onChange={(range) => setDateRange(range)}
+ *   required
+ * />
+ * ```
+ */
+export declare const DateRange: import("react").ForwardRefExoticComponent<DateRangeProps & import("react").RefAttributes<HTMLDivElement>>;

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>>;