@lax-wp/design-system 0.2.1 → 0.2.2

package/dist/components/data-display/tag/Tag.d.ts

@@ -1,53 +0,0 @@
-import { COLORS } from "../../../constants/colors";
-/**
- * Available tag size options
- */
-export type TagSize = "xs" | "sm" | "md" | "lg";
-/**
- * Available color names for tags
- */
-export type TagColor = keyof typeof COLORS;
-/**
- * Theme mode for styling
- */
-export type ThemeMode = "light" | "dark";
-/**
- * Upload handler function type
- */
-export type UploadHandler = (file: File) => void | Promise<void>;
-/**
- * Props for the Tag component
- */
-export interface TagProps {
-    /** The text content to display */
-    label: string;
-    /** Color name or hex color value */
-    color?: TagColor | string;
-    /** Size variant */
-    size?: TagSize;
-    /** Additional CSS classes */
-    className?: string;
-    /** Click handler for the tag */
-    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    /** Mouse down handler */
-    onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    /** Maximum character length before truncation */
-    truncate?: number;
-    /** Whether to use hash color generation for string colors */
-    isHashColor?: boolean;
-    /** Icon to display before the label */
-    icon?: React.ReactNode;
-    /** Whether the tag is removable (shows close button) */
-    removable?: boolean;
-    /** Handler for remove button click */
-    onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    /** Upload handler function */
-    onUpload?: UploadHandler;
-    /** Whether the tag accepts file uploads */
-    acceptsUpload?: boolean;
-    /** Theme mode for styling */
-    theme?: ThemeMode;
-    /** Custom aria-label for accessibility */
-    "aria-label"?: string;
-}
-export declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,15 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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/floating-bar/FloatingBar.d.ts

@@ -1,147 +0,0 @@
-import { type ReactNode, type MouseEvent } from "react";
-/**
- * Available floating bar sizes
- */
-export type FloatingBarSize = "small" | "medium" | "large";
-/**
- * Available floating bar positions
- */
-export type FloatingBarPosition = "top" | "bottom";
-/**
- * Available floating bar themes
- */
-export type FloatingBarTheme = "primary" | "dark" | "light";
-/**
- * Configuration for action buttons in the floating bar
- */
-export interface FloatingBarActionConfig {
-    /** Unique identifier for the action */
-    id: string;
-    /** Button label text */
-    label?: string;
-    /** Icon element to display */
-    icon: ReactNode;
-    /** Click handler for the action */
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /** Icon for dropdown mode */
-    dropdownIcon?: ReactNode;
-    /** Whether the action is visible */
-    visible?: boolean;
-    /** Whether the action is disabled */
-    disabled?: boolean;
-    /** Tooltip text */
-    tooltip?: string;
-    /** Whether to hide the label text */
-    hideLabel?: boolean;
-    /** Action type */
-    type?: "button" | "dropdown";
-    /** Dropdown menu items */
-    dropdownItems?: Array<{
-        label: ReactNode;
-        key: string;
-        disabled?: boolean;
-        onClick?: () => void;
-    }>;
-    /** Custom CSS classes */
-    className?: string;
-    /** Test ID for testing */
-    "data-testid"?: string;
-}
-/**
- * Configuration for the delete action
- */
-export interface FloatingBarDeleteConfig {
-    /** Delete button label */
-    label?: string;
-    /** Whether delete is disabled */
-    disabled?: boolean;
-    /** Delete action handler */
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /** Custom icon for delete */
-    icon?: ReactNode;
-    /** Delete confirmation required */
-    confirmRequired?: boolean;
-    /** Confirmation message */
-    confirmMessage?: string;
-}
-/**
- * Props for the FloatingBar component
- */
-export interface FloatingBarProps {
-    /** Whether the floating bar is visible */
-    show?: boolean;
-    /** Close handler */
-    onClose: () => void;
-    /** Array of action configurations */
-    actionItems: FloatingBarActionConfig[];
-    /** Number of selected items */
-    selectedItemsCount?: number;
-    /** Delete action configuration */
-    deleteConfig?: FloatingBarDeleteConfig;
-    /** Whether to show action background */
-    showActionBackground?: boolean;
-    /** Floating bar size */
-    size?: FloatingBarSize;
-    /** Floating bar position */
-    position?: FloatingBarPosition;
-    /** Floating bar theme */
-    theme?: FloatingBarTheme;
-    /** Custom width */
-    width?: string | number;
-    /** Custom CSS classes */
-    className?: string;
-    /** Custom selected text */
-    selectedText?: string;
-    /** Custom actions text for collapsed mode */
-    actionsText?: string;
-    /** Whether to auto-hide on small screens */
-    autoHide?: boolean;
-    /** Maximum items before collapsing */
-    maxVisibleItems?: number;
-    /** Animation duration in seconds */
-    animationDuration?: number;
-    /** Custom aria-label */
-    "aria-label"?: string;
-    /** Test ID for testing */
-    "data-testid"?: string;
-    /** Error state */
-    error?: boolean;
-    /** Loading state */
-    loading?: boolean;
-    /** Error message */
-    errorMessage?: string;
-    /** Callback when actions overflow */
-    onOverflow?: (isOverflowing: boolean) => void;
-}
-/**
- * FloatingBar component provides a floating action bar for bulk operations
- *
- * @example
- * ```tsx
- * <FloatingBar
- *   show={selectedItems.length > 0}
- *   onClose={() => setSelectedItems([])}
- *   selectedItemsCount={selectedItems.length}
- *   actionItems={[
- *     {
- *       id: "edit",
- *       label: "Edit",
- *       icon: <EditIcon />,
- *       onClick: handleEdit,
- *     },
- *     {
- *       id: "archive",
- *       label: "Archive",
- *       icon: <ArchiveIcon />,
- *       onClick: handleArchive,
- *     },
- *   ]}
- *   deleteConfig={{
- *     label: "Delete",
- *     onClick: handleDelete,
- *     confirmRequired: true,
- *   }}
- * />
- * ```
- */
-export declare const FloatingBar: import("react").ForwardRefExoticComponent<FloatingBarProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,55 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,73 +0,0 @@
-/**
- * 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

@@ -1,12 +0,0 @@
-/**
- * Available currencies for the CurrencyInputField component
- */
-export declare const CURRENCIES: {
-    value: string;
-    label: string;
-    symbol: string;
-}[];
-/**
- * Currency symbols mapping for display purposes
- */
-export declare const CURRENCY_SYMBOLS: Record<string, string>;

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

@@ -1,72 +0,0 @@
-/**
- * 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>>;