@lax-wp/design-system 0.1.8 → 0.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lax-wp/design-system",
   "private": false,
-  "version": "0.1.8",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -39,8 +39,10 @@
     "@storybook/addon-actions": "^9.0.8",
     "antd": "^5.27.0",
     "classnames": "^2.5.1",
+    "diff": "^8.0.2",
     "immer": "^10.1.1",
     "lodash.debounce": "^4.0.8",
+    "re-resizable": "^6.11.2",
     "react-full-screen": "^1.1.1",
     "react-icons": "^5.5.0",
     "react-popper-tooltip": "^4.4.2",

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