@lax-wp/design-system 0.1.5 → 0.1.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lax-wp/design-system",
   "private": false,
-  "version": "0.1.5",
+  "version": "0.1.7",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",

package/dist/components/data-display/badge/Badge.d.ts

@@ -1,44 +0,0 @@
-/**
- * Available badge status options
- */
-export type BadgeStatus = "default" | "primary" | "warning" | "error" | "neutral" | "success" | "info";
-/**
- * Badge appearance variants
- */
-export type BadgeAppearance = "filled" | "outline";
-/**
- * Badge size variants
- */
-export type BadgeSize = "sm" | "md" | "lg";
-/**
- * Props for the Badge component
- */
-export interface BadgeProps {
-    /** The badge status/color variant */
-    status?: BadgeStatus;
-    /** The text content to display */
-    children: string;
-    /** Visual appearance style */
-    appearance?: BadgeAppearance;
-    /** Size variant */
-    size?: BadgeSize;
-    /** Additional CSS classes for the wrapper */
-    className?: string;
-    /** Whether to use rounded pill shape */
-    isRounded?: boolean;
-    /** Whether to capitalize the text */
-    capitalize?: boolean;
-    /** Custom aria-label for accessibility */
-    "aria-label"?: string;
-}
-/**
- * Badge component displays small status indicators or labels
- *
- * @example
- * ```tsx
- * <Badge status="success">Active</Badge>
- * <Badge status="error" appearance="filled">Error</Badge>
- * <Badge status="warning" size="sm" isRounded>Warning</Badge>
- * ```
- */
-export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/data-display/banner/Banner.d.ts

@@ -1,41 +0,0 @@
-/**
- * Available banner status options
- */
-export type BannerStatus = "success" | "error" | "warning" | "info" | "archived" | "canceled" | "queued" | "paused" | "awaiting_action" | "skipped" | "pending";
-/**
- * Props for the Banner component
- */
-export interface BannerProps {
-    /** The banner status/color variant */
-    status: BannerStatus;
-    /** The main content to display */
-    children: React.ReactNode;
-    /** Additional content to display on the right side */
-    additionalChildren?: React.ReactNode;
-    /** Component to render when expanded (for error status) */
-    ExpandedComponent?: React.ComponentType<{
-        children: React.ReactNode;
-    }>;
-    /** Whether the banner is expandable */
-    expandable?: boolean;
-    /** Custom icon to override default status icon */
-    icon?: React.ReactNode;
-    /** Additional CSS classes for the wrapper */
-    className?: string;
-    /** Callback when banner is clicked (if expandable) */
-    onClick?: () => void;
-    /** Custom aria-label for accessibility */
-    "aria-label"?: string;
-}
-/**
- * Banner component displays important information with status-based styling
- *
- * @example
- * ```tsx
- * <Banner status="success">Operation completed successfully</Banner>
- * <Banner status="error" expandable ExpandedComponent={ErrorDetails}>
- *   Error occurred
- * </Banner>
- * ```
- */
-export declare const Banner: import("react").ForwardRefExoticComponent<BannerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/code-editor/CodeEditor.d.ts

@@ -1,4 +0,0 @@
-import { type FC } from 'react';
-import { type CodeEditorProps } from '../../../types';
-export type TTabKey = 'JSON' | 'Grid';
-export declare const CodeEditor: FC<CodeEditorProps>;

package/dist/components/data-display/code-editor/JsonGrid.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-export interface JsonGridProps {
-    isFullScreen: boolean;
-    allExpanded: boolean;
-    toggleAll: () => void;
-    isEditMode: boolean;
-    isDarkMode: boolean;
-    style: React.CSSProperties;
-    value: string;
-    onChange?: (value: string) => void;
-    setIsAddKeyModalOpen: (open: boolean) => void;
-    isAddKeyModalOpen: boolean;
-}
-export declare const JsonGrid: React.FC<JsonGridProps>;

package/dist/components/data-display/code-editor/Tabs.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-export interface TabsProps<T extends string> {
-    variant?: 'default' | 'switch';
-    tabs: T[];
-    activeTab: T;
-    onTabClick: (tab: T) => void;
-    size?: 'sm' | 'md' | 'lg';
-    tabIcons?: Partial<Record<T, React.ReactNode>>;
-    height?: string;
-    className?: string;
-}
-export declare const Tabs: <T extends string>({ variant, tabs, activeTab, onTabClick, size, tabIcons, height, className }: TabsProps<T>) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

@@ -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/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,6 +0,0 @@
-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

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

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

@@ -1,76 +0,0 @@
-/**
- * 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/input-field/InputField.d.ts

@@ -1,62 +0,0 @@
-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/percentage-input/PercentageInputField.d.ts

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

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

@@ -1,71 +0,0 @@
-import { 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/tooltip/Tooltip.d.ts

@@ -1,13 +0,0 @@
-import './styles.css';
-import type { ReactNode } from 'react';
-export interface TooltipProps {
-    children: ReactNode;
-    title?: string | ReactNode;
-    hideTooltip?: boolean;
-    delayShow?: boolean;
-    whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'initial' | 'inherit';
-    placement?: 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
-    className?: string;
-}
-declare const Tooltip: ({ children, title, hideTooltip, delayShow, whiteSpace, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
-export default Tooltip;

package/dist/hooks/useOutsideClick.d.ts

@@ -1,28 +0,0 @@
-import { type RefObject } from "react";
-/**
- * Props for the useOutsideClick hook
- */
-export interface UseOutsideClickProps {
-    /** Reference to the element to detect outside clicks for */
-    ref: RefObject<HTMLElement>;
-    /** Handler function called when clicking outside the referenced element */
-    handler: () => void;
-    /** Whether the hook is active */
-    enabled?: boolean;
-}
-/**
- * Custom hook to detect clicks outside a referenced element
- *
- * @example
- * ```tsx
- * const menuRef = useRef<HTMLDivElement>(null);
- *
- * useOutsideClick({
- *   ref: menuRef,
- *   handler: () => setIsOpen(false),
- *   enabled: isOpen
- * });
- * ```
- */
-export declare const useOutsideClick: ({ ref, handler, enabled, }: UseOutsideClickProps) => void;
-export default useOutsideClick;

package/dist/hooks/usePythonSyntax.d.ts

@@ -1,28 +0,0 @@
-import { type Monaco } from '@monaco-editor/react';
-export interface UsePythonSyntaxProps {
-    monacoEditor: Monaco | null;
-    currentEditorModel: any;
-    code: string;
-    setCode: (code: string) => void;
-    enable: boolean;
-    checkSyntaxAPI?: (code: string) => Promise<{
-        data: {
-            error?: {
-                message: string;
-                line?: number;
-                column?: number;
-            };
-        };
-    }>;
-    formatCodeAPI?: (code: string) => Promise<{
-        data: {
-            formatted_code?: string;
-        };
-    }>;
-}
-export declare const usePythonSyntax: ({ monacoEditor, currentEditorModel, code, setCode, enable, checkSyntaxAPI, formatCodeAPI }: UsePythonSyntaxProps) => {
-    pythonError: any;
-    pythonLoading: boolean;
-    handleCheckSyntax: () => Promise<void>;
-    handleFormatCode: () => Promise<void>;
-};

package/dist/hooks/useTheme.d.ts

@@ -1,6 +0,0 @@
-import { type ThemeContextType } from '../types';
-/**
- * Simple theme hook for the CodeEditor component
- * In a real application, this would be connected to a global theme context
- */
-export declare const useTheme: () => ThemeContextType;

package/dist/index.d.ts

@@ -1,48 +0,0 @@
-export { InputField } from "./components/forms/input-field/InputField";
-export type { InputFieldProps } from "./components/forms/input-field/InputField";
-export * from "./components/data-display/typography/Typography";
-export { TextField } from "./components/forms/text-field/TextField";
-export type { TextFieldProps } from "./components/forms/text-field/TextField";
-export { Checkbox } from "./components/forms/checkbox/Checkbox";
-export type { CheckboxComponentProps, TCheckboxComponentProps, } from "./components/forms/checkbox/Checkbox";
-export { ColorPicker } from "./components/forms/color-picker/ColorPicker";
-export type { ColorPickerProps, ColorPickerComponentProps, } from "./components/forms/color-picker/ColorPicker";
-export { CreatableSelectField } from "./components/forms/creatable-select/CreatableSelect";
-export type { CreatableSelectProps, SelectOption, TProps, } from "./components/forms/creatable-select/CreatableSelect";
-export { CurrencyInputField } from "./components/forms/currency-input/CurrencyInputField";
-export type { CurrencyInputFieldProps } from "./components/forms/currency-input/CurrencyInputField";
-export { CURRENCIES, CURRENCY_SYMBOLS } from "./components/forms/currency-input/currency.constant";
-export { DateRange } from "./components/forms/date-range/DateRange";
-export type { DateRangeProps, DateRangeValue, } from "./components/forms/date-range/DateRange";
-export { DebounceInputField } from "./components/forms/debounce-input/DebounceInputField";
-export type { DebounceInputFieldProps } from "./components/forms/debounce-input/DebounceInputField";
-export { PercentageInputField } from "./components/forms/percentage-input/PercentageInputField";
-export type { PercentageInputFieldProps } from "./components/forms/percentage-input/PercentageInputField";
-export { Toggle } from "./components/forms/toggle/Toggle";
-export type { ToggleProps, ToggleDirection, } from "./components/forms/toggle/Toggle";
-export { StatusColorMapping } from "./components/data-display/status-color-mapping/StatusColorMapping";
-export type { StatusColorMappingProps, StatusColor, } from "./components/data-display/status-color-mapping/StatusColorMapping";
-export { Badge } from "./components/data-display/badge/Badge";
-export type { BadgeProps, BadgeStatus, BadgeAppearance, BadgeSize, } from "./components/data-display/badge/Badge";
-export { Banner } from "./components/data-display/banner/Banner";
-export type { BannerProps, BannerStatus, } from "./components/data-display/banner/Banner";
-export { PdfViewer } from "./components/data-display/pdf-viewer/PdfViewer";
-export type { PdfViewerProps } from "./components/data-display/pdf-viewer/PdfViewer";
-export { Popper } from "./components/data-display/popper/Popper";
-export type { PopperProps, PopperPlacement, } from "./components/data-display/popper/Popper";
-export { default as Toast, toast } from "./components/feedback/toast/Toast";
-export type { ToastContainerProps, ToastType, ToastPosition, } from "./components/feedback/toast/Toast";
-export { CodeEditor } from "./components/data-display/code-editor/CodeEditor";
-export type { CodeEditorProps } from "./types";
-export { JsonGrid } from "./components/data-display/code-editor/JsonGrid";
-export { Tabs } from "./components/data-display/code-editor/Tabs";
-export type { TabsProps } from "./components/data-display/code-editor/Tabs";
-export { monacoManager } from "./services/monacoManager";
-export { usePythonSyntax } from "./hooks/usePythonSyntax";
-export type { UsePythonSyntaxProps } from "./hooks/usePythonSyntax";
-export { useTheme } from "./hooks/useTheme";
-export { parseJson, filterTopLevelPaths, randomHexString } from "./utils/utilities";
-export { systemMessages } from "./utils/messageConstants";
-export type { JsonValue, JsonObject, JsonArray, Tab, ThemeContextType, PythonError, JsonGridContextType } from "./types";
-export { useOutsideClick } from "./hooks/useOutsideClick";
-export type { UseOutsideClickProps } from "./hooks/useOutsideClick";

package/dist/services/monacoManager.d.ts

@@ -1,28 +0,0 @@
-import { type Monaco } from '@monaco-editor/react';
-declare class MonacoManager {
-    private static instance;
-    private monaco;
-    private initialized;
-    private initializationPromise;
-    static getInstance(): MonacoManager;
-    initialize(): Promise<Monaco>;
-    private performInitialization;
-    getMonaco(): Monaco | null;
-    isInitialized(): boolean;
-    /**
-     * Safely get an editor instance by index
-     */
-    getEditorInstance(index?: number): any;
-    /**
-     * Get the first available editor instance
-     */
-    getFirstEditorInstance(): Monaco | null;
-    /**
-     * Safely dispose of disposables with error handling
-     */
-    static safeDispose(disposables: Array<{
-        dispose: () => void;
-    } | null | undefined>): void;
-}
-export declare const monacoManager: MonacoManager;
-export type { Monaco };

package/dist/types/index.d.ts

@@ -1,66 +0,0 @@
-export type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
-export type JsonObject = {
-    [key: string]: JsonValue;
-};
-export type JsonArray = JsonValue[];
-export interface Tab<T extends string> {
-    name: T;
-    is_default: boolean;
-    is_hidden: boolean;
-    is_pinned: boolean;
-}
-export interface CodeEditorProps {
-    value: string;
-    onChange?: (value: string) => void;
-    withFullScreen?: boolean;
-    withTheme?: boolean;
-    isEditMode?: boolean;
-    height?: string;
-    language?: 'json' | 'python';
-    monacoEditor?: any;
-    setIsDisableSave?: (flag: boolean) => void;
-    isShowCopy?: boolean;
-    isShowDownload?: boolean;
-    withJsonGrid?: boolean;
-}
-export interface ThemeContextType {
-    theme: 'light' | 'dark';
-    editorTheme: 'vs' | 'vs-dark';
-    setEditorTheme: (theme: 'vs' | 'vs-dark') => void;
-}
-export interface UsePythonSyntaxProps {
-    monacoEditor: any;
-    currentEditorModel: any;
-    code: string;
-    setCode: (code: string) => void;
-    enable: boolean;
-}
-export interface PythonError {
-    message: string;
-    line?: number;
-    column?: number;
-}
-export interface JsonGridContextType {
-    allExpanded: boolean;
-    toggleAll: () => void;
-    isEditMode: boolean;
-    isDarkMode: boolean;
-    selectedPaths: string[];
-    setSelectedPaths: (paths: string[]) => void;
-    selectedTopLevelPaths: string[];
-    setSelectedTopLevelPaths: (paths: string[]) => void;
-    selectedPathModification: string | null;
-    setSelectedPathModification: (path: string | null) => void;
-    selectedPathForEdit: string | null;
-    setSelectedPathForEdit: (path: string | null) => void;
-    jsonData: JsonObject | JsonArray;
-    setJsonData: (data: JsonObject | JsonArray) => void;
-    error: string | null;
-    setError: (error: string | null) => void;
-    handleDelete: (paths: string[]) => void;
-    handleDuplicate: (paths: string[]) => void;
-    handleCopy: (paths: string[]) => Promise<boolean>;
-    handleAddKey: (path: string, key: string, value: JsonValue | undefined) => Promise<void>;
-    setIsAddKeyModalOpen: (open: boolean) => void;
-    isAddKeyModalOpen: boolean;
-}

package/dist/utils/messageConstants.d.ts

@@ -1,16 +0,0 @@
-export declare const systemMessages: {
-    createSuccess: (value: string) => string;
-    createFailure: (value: string) => string;
-    updateSuccess: (value: string) => string;
-    updateFailure: (value: string) => string;
-    copySuccess: (value: string) => string;
-    copyFailure: (value: string) => string;
-    copyToClipboard: (value: string) => string;
-    deleteSuccess: (value: string) => string;
-    deleteFailure: (value: string) => string;
-    errorMessage: string;
-    requiredFieldError: string;
-    noItemSelected: string;
-    invalidFileType: string;
-    formatFailed: string;
-};

package/dist/utils/utilities.d.ts

@@ -1,13 +0,0 @@
-import { type JsonValue } from '../types';
-/**
- * Parse JSON string safely
- */
-export declare const parseJson: (value: string) => JsonValue;
-/**
- * Filter top level paths from an array of paths
- */
-export declare const filterTopLevelPaths: (paths: string[]) => string[];
-/**
- * Generate a random hex string
- */
-export declare const randomHexString: (length: number) => string;