@lax-wp/design-system 0.3.114 → 0.4.0

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

@@ -0,0 +1,9 @@
+import cn from "classnames";
+import { FC, SVGAttributes } from "react";
+type TProps = SVGAttributes<SVGElement> & {
+    classValue?: cn.Value;
+    fill?: string;
+    size?: number;
+};
+export declare const CloseRounded: FC<TProps>;
+export {};

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

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+export interface IconProps {
+    className?: string;
+    fill?: string;
+    size?: number;
+}
+export declare const ComingSoonIcon: FC<IconProps>;

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

@@ -0,0 +1,7 @@
+import React, { SVGAttributes } from 'react';
+export interface EditIconProps extends SVGAttributes<SVGElement> {
+    fill?: string;
+    size?: string | number;
+    className?: string;
+}
+export declare const EditIcon: React.FC<EditIconProps>;

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

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

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export interface InfoAlertProps {
+    fill?: string;
+    size?: number;
+    className?: string;
+}
+export declare const InfoAlert: FC<InfoAlertProps>;

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export interface InfoCircleIconProps {
+    fill?: string;
+    size?: number;
+    className?: string;
+}
+export declare const InfoCircleIcon: FC<InfoCircleIconProps>;

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

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+export interface IconProps {
+    className?: string;
+    size?: number;
+}
+export declare const LaxIcon: FC<IconProps>;

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

@@ -0,0 +1,3 @@
+export declare const Required: ({ isConditional }: {
+    isConditional?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { type FC, type SVGAttributes } from 'react';
+type TSVGProps = SVGAttributes<SVGElement> & {
+    width?: string | number;
+    height?: string | number;
+    fill?: string;
+    className?: string;
+};
+export declare const SearchIcon: FC<TSVGProps>;
+export {};

package/dist/components/layout/ComponentLoader.d.ts

@@ -0,0 +1,20 @@
+import type { FC } from "react";
+/**
+ * Props for the ComponentLoader component
+ */
+export interface ComponentLoaderProps {
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Label text to display above the loader */
+    label: string;
+}
+/**
+ * ComponentLoader displays a loading indicator with a label
+ *
+ * @example
+ * ```tsx
+ * <ComponentLoader label="Loading..." />
+ * <ComponentLoader label="Loading data" className="my-4" />
+ * ```
+ */
+export declare const ComponentLoader: FC<ComponentLoaderProps>;

package/dist/components/layout/CustomScrollbar.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import type { ScrollbarProps } from 'react-custom-scrollbars-2';
+/**
+ * Custom scrollbar handle for external control
+ */
+export interface CustomScrollbarHandle {
+    /** Get the Scrollbars instance */
+    getInstance?: Scrollbars | null;
+    /** Scroll to the top of the container */
+    scrollToTop?: () => void;
+    /** Scroll to the right of the container */
+    scrollToRight?: () => void;
+}
+/**
+ * Props for the CustomScrollbar component
+ */
+export interface CustomScrollbarProps {
+    /** Content to render inside the scrollbar */
+    children: React.ReactNode;
+    /** Whether to adjust height based on screen size */
+    adjustWithScreen?: boolean;
+    /** Additional CSS classes for the inner view */
+    renderViewClassName?: string;
+    /** Whether to use full height */
+    fullHeight?: boolean;
+}
+/**
+ * CustomScrollbar component provides a styled scrollable container
+ * with custom scrollbar appearance
+ *
+ * @example
+ * ```tsx
+ * <CustomScrollbar>
+ *   <div>Scrollable content...</div>
+ * </CustomScrollbar>
+ *
+ * // With ref for programmatic control
+ * const scrollRef = useRef<CustomScrollbarHandle>(null);
+ * <CustomScrollbar ref={scrollRef}>
+ *   <div>Content...</div>
+ * </CustomScrollbar>
+ * // scrollRef.current?.scrollToTop();
+ * ```
+ */
+export declare const CustomScrollbar: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<CustomScrollbarProps & ScrollbarProps, "ref"> & React.RefAttributes<CustomScrollbarHandle>>>;

package/dist/components/layout/Helmet.d.ts

@@ -0,0 +1,29 @@
+import type { FC, ReactNode } from "react";
+type TMeta = {
+    name: string;
+    content: string;
+};
+/**
+ * Props for the Helmet component
+ */
+export interface HelmetProps {
+    /** The document title to set */
+    title: string;
+    /** Optional meta tag configuration */
+    meta?: TMeta;
+    /** Additional children to render within Helmet */
+    children?: ReactNode;
+}
+/**
+ * Helmet component for managing document head metadata
+ *
+ * Note: Requires react-helmet-async to be installed and configured
+ * in the parent application with HelmetProvider.
+ *
+ * @example
+ * ```tsx
+ * <Helmet title="Dashboard" meta={{ name: "description", content: "Dashboard page" }} />
+ * ```
+ */
+export declare const Helmet: FC<HelmetProps>;
+export {};

package/dist/components/layout/HelmetTitle.d.ts

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from "react";
+/**
+ * Props for the HelmetTitle component
+ */
+export interface HelmetTitleProps {
+    /** The title to display (will be used by parent app's Helmet integration) */
+    title?: string;
+    /** Additional children to render */
+    children?: ReactNode;
+}
+/**
+ * HelmetTitle component for managing document title
+ *
+ * Note: This is a simple wrapper component. The parent application should
+ * integrate this with react-helmet-async or similar library for actual
+ * document title management.
+ *
+ * @example
+ * ```tsx
+ * <HelmetTitle title="Dashboard" />
+ * ```
+ */
+export declare const HelmetTitle: FC<HelmetTitleProps>;

package/dist/components/layout/LogoLoader.d.ts

@@ -0,0 +1,22 @@
+import type { FC } from "react";
+type ClassValue = string | number | boolean | undefined | null | ClassValue[];
+/**
+ * Props for the LogoLoader component
+ */
+export interface LogoLoaderProps {
+    /** Additional CSS classes for the wrapper */
+    classValue?: ClassValue;
+    /** Whether dark mode is enabled */
+    isDarkMode: boolean;
+}
+/**
+ * LogoLoader displays an animated LAX logo with a loading bar
+ *
+ * @example
+ * ```tsx
+ * <LogoLoader isDarkMode={false} />
+ * <LogoLoader isDarkMode={true} classValue="h-screen" />
+ * ```
+ */
+export declare const LogoLoader: FC<LogoLoaderProps>;
+export {};

package/dist/components/layout/PageContainer.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from "react";
+/**
+ * Props for the PageContainer component
+ */
+export interface PageContainerProps {
+    /** Page title for document head */
+    title?: string;
+    /** Main content to render */
+    children: ReactNode;
+    /** Current page mode (edit, comparison, etc.) */
+    mode?: string | null;
+    /** Display ID for edit mode banner */
+    displayId?: string | null;
+    /** Disable padding on the content area */
+    noPadding?: boolean;
+    /** Additional CSS classes for the container */
+    className?: string;
+    /** Hide the banner even if mode/displayId would show it */
+    noBanner?: boolean;
+    /** Additional CSS classes for the content area */
+    contentClassName?: string;
+    /** Callback when banner is clicked */
+    onBannerClick?: () => void;
+    /** Enable scroll to top on mount */
+    scrollToTopOnMount?: boolean;
+}
+/**
+ * PageContainer component provides a consistent layout wrapper for pages
+ *
+ * Features:
+ * - Automatic height calculation
+ * - Mode-based banners (edit/comparison)
+ * - Flexible content area
+ * - Dark mode support
+ * - Smooth transitions
+ *
+ * @example
+ * ```tsx
+ * <PageContainer
+ *   title="Dashboard"
+ *   mode="edit"
+ *   displayId="AGR-123"
+ * >
+ *   <YourContent />
+ * </PageContainer>
+ * ```
+ */
+export declare const PageContainer: {
+    ({ title, children, mode, displayId, noPadding, className, noBanner, contentClassName, onBannerClick, scrollToTopOnMount, }: PageContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/layout/index.d.ts

@@ -0,0 +1,12 @@
+export { PageContainer } from "./PageContainer";
+export type { PageContainerProps } from "./PageContainer";
+export { HelmetTitle } from "./HelmetTitle";
+export type { HelmetTitleProps } from "./HelmetTitle";
+export { Helmet } from "./Helmet";
+export type { HelmetProps } from "./Helmet";
+export { ComponentLoader } from "./ComponentLoader";
+export type { ComponentLoaderProps } from "./ComponentLoader";
+export { LogoLoader } from "./LogoLoader";
+export type { LogoLoaderProps } from "./LogoLoader";
+export { CustomScrollbar } from "./CustomScrollbar";
+export type { CustomScrollbarProps, CustomScrollbarHandle } from "./CustomScrollbar";

package/dist/components/modal/confirm-popup/ConfirmPopUp.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export type IButtonStatus = 'primary' | 'secondary' | 'secondary-neutral' | 'error' | 'success' | 'warning';
+export type ConfirmPopUpProps = {
+    children?: React.ReactElement;
+    onCancel?: (closeByIcon?: boolean) => void;
+    onOk: () => void;
+    title: string;
+    content: string;
+    footer?: {
+        justify?: string;
+        okText?: string;
+        cancelText?: string;
+        okBtnType?: IButtonStatus;
+        cancelBtnType?: IButtonStatus;
+    };
+    async?: (cb: ({ error }: {
+        error: boolean;
+    }) => void) => Promise<void>;
+    width?: number;
+    forceVisible?: boolean;
+    isVisibleOutside?: boolean;
+    ableToConfirmByChildren?: boolean;
+    parentContainer?: string;
+};
+declare const _default: React.NamedExoticComponent<ConfirmPopUpProps>;
+export default _default;

package/dist/components/modal/confirm-popup/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ConfirmPopUp } from './ConfirmPopUp';
+export type { ConfirmPopUpProps, IButtonStatus } from './ConfirmPopUp';

package/dist/components/modal/drawer/Drawer.d.ts

@@ -0,0 +1,35 @@
+import { Drawer as AntDrawer } from 'antd';
+import React from 'react';
+export type DrawerProps = {
+    id?: string;
+    children: React.ReactNode;
+    onClose: () => void;
+    open: boolean;
+    title: React.ReactNode;
+    parentContainer?: string;
+    resizable?: boolean;
+    width?: number;
+    placement?: 'left' | 'right' | 'top' | 'bottom';
+    closable?: boolean;
+    mask?: boolean;
+    getContainer?: false | HTMLElement | (() => HTMLElement);
+    zIndex?: number;
+    footer?: React.ReactNode;
+} & React.ComponentProps<typeof AntDrawer>;
+/**
+ * Drawer component for sliding panels from screen edges
+ *
+ * @example
+ * ```tsx
+ * <Drawer
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Drawer Title"
+ *   width={400}
+ * >
+ *   <div>Drawer content</div>
+ * </Drawer>
+ * ```
+ */
+export declare const Drawer: React.FC<DrawerProps>;
+export default Drawer;

package/dist/components/modal/drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { Drawer, default as DrawerDefault } from './Drawer';
+export type { DrawerProps } from './Drawer';

package/dist/components/navigation/accordion/Accordion.d.ts

@@ -0,0 +1,39 @@
+import { FC, HTMLAttributes } from 'react';
+export type AccordionProps = HTMLAttributes<HTMLDivElement> & {
+    title: any;
+    toggle: () => void;
+    isOpen: boolean;
+    hoveringIndex?: number | null;
+    index?: number;
+    viewOnly?: boolean;
+    onTitleClick?: (e: React.MouseEvent) => void;
+    onSelect?: () => void;
+    isChecked?: boolean;
+    subTitle?: string;
+    noSpace?: boolean;
+    isDraggable?: boolean;
+    sortableConfig?: Record<string, any>;
+    headerClass?: string;
+    icon?: JSX.Element;
+    additionalHeader?: JSX.Element;
+    id: string;
+    isEditMode?: boolean;
+    mainClass?: string;
+    childrenClass?: string;
+};
+/**
+ * Accordion component for collapsible content sections
+ *
+ * @example
+ * ```tsx
+ * <Accordion
+ *   id="my-accordion"
+ *   title="Section Title"
+ *   isOpen={isOpen}
+ *   toggle={() => setIsOpen(!isOpen)}
+ * >
+ *   <div>Accordion content</div>
+ * </Accordion>
+ * ```
+ */
+export declare const Accordion: FC<AccordionProps>;

package/dist/components/navigation/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { Accordion } from './Accordion';
+export type { AccordionProps } from './Accordion';

package/dist/components/navigation/breadcrumbs/BreadCrumb.d.ts

@@ -0,0 +1,52 @@
+import type { FC, ReactNode } from "react";
+import { type TBreadCrumbItem } from "./BreadCrumbItem";
+/**
+ * Arrow icon for breadcrumb separators
+ */
+export declare const ArrowBreadCums: ({ fill, size, className, }: {
+    fill?: string;
+    size?: number;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for the BreadCrumb component
+ */
+export interface BreadCrumbProps {
+    /** Array of breadcrumb items to display */
+    items: TBreadCrumbItem[];
+    /** Visual variant of the breadcrumb */
+    variant?: "primary" | "secondary";
+    /** Click handler when a breadcrumb item is clicked */
+    onClick?: (id: string | number) => void;
+    /**
+     * Custom link renderer for navigation
+     * Allows integration with any routing library (react-router, next/link, etc.)
+     * If not provided, items will be rendered as clickable divs
+     */
+    renderLink?: (item: TBreadCrumbItem, children: ReactNode, isLastItem: boolean) => ReactNode;
+}
+/**
+ * BreadCrumb component displays a navigation trail with animated items
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with onClick handler
+ * <BreadCrumb
+ *   items={[
+ *     { id: "1", title: "Home" },
+ *     { id: "2", title: "Products" },
+ *     { id: "3", title: "Product Details" }
+ *   ]}
+ *   onClick={(id) => navigate(id)}
+ * />
+ *
+ * // With custom link renderer (e.g., react-router)
+ * <BreadCrumb
+ *   items={items}
+ *   renderLink={(item, children) => (
+ *     <Link to={item.link || "/"}>{children}</Link>
+ *   )}
+ * />
+ * ```
+ */
+export declare const BreadCrumb: FC<BreadCrumbProps>;

package/dist/components/navigation/breadcrumbs/BreadCrumbItem.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Breadcrumb item data structure
+ */
+export interface TBreadCrumbItem {
+    /** Unique identifier for the item */
+    id?: string | number;
+    /** Display title for the breadcrumb item */
+    title: string;
+    /** Navigation link URL */
+    link?: string;
+    /** Optional source for navigation state */
+    source?: string;
+}
+/**
+ * Props for the BreadCrumbItem component
+ */
+export interface BreadCrumbItemProps {
+    /** The breadcrumb item data */
+    item: TBreadCrumbItem;
+    /** Visual variant of the breadcrumb */
+    variant?: "primary" | "secondary";
+    /** Whether this is the last item in the breadcrumb trail */
+    isLastItem?: boolean;
+    /** Click handler when the item is clicked */
+    onClick?: (id: string | number) => void;
+}
+/**
+ * BreadCrumbItem component displays a single breadcrumb item with appropriate styling
+ *
+ * @example
+ * ```tsx
+ * <BreadCrumbItem
+ *   item={{ id: "1", title: "Home", link: "/" }}
+ *   variant="primary"
+ *   isLastItem={false}
+ * />
+ * ```
+ */
+export declare const BreadCrumbItem: import("react").ForwardRefExoticComponent<BreadCrumbItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/navigation/breadcrumbs/index.d.ts

@@ -0,0 +1,4 @@
+export { BreadCrumb } from "./BreadCrumb";
+export type { BreadCrumbProps } from "./BreadCrumb";
+export { BreadCrumbItem } from "./BreadCrumbItem";
+export type { BreadCrumbItemProps, TBreadCrumbItem } from "./BreadCrumbItem";

package/dist/components/navigation/stepper/Stepper.d.ts

@@ -0,0 +1,45 @@
+export type TStep = {
+    label: string;
+    description?: string;
+    isLocked?: boolean;
+    tooltipText?: string;
+};
+export type TStepperProps = {
+    steps: TStep[];
+    currentStep: number;
+    onClick?: (index: number) => void;
+    appearance?: 'linear' | 'parallel';
+    labelPosition?: 'top' | 'bottom' | 'inline' | 'top-right' | 'bottom-right';
+    className?: string;
+    showIndex?: boolean;
+    disableOneMore?: boolean;
+    lockConfig?: {
+        isLocked?: boolean;
+        tooltipText?: string;
+    };
+    /** Whether the main sidebar is open (affects responsive calculations) */
+    isMainSideBarOpen?: boolean;
+    /** Whether the authoring panel is open (affects responsive calculations) */
+    isAuthoringOpen?: boolean;
+};
+/**
+ * Stepper component for multi-step workflows
+ *
+ * @example
+ * ```tsx
+ * <Stepper
+ *   steps={[
+ *     { label: 'Step 1', description: 'First step' },
+ *     { label: 'Step 2', description: 'Second step' },
+ *     { label: 'Step 3', description: 'Third step' },
+ *   ]}
+ *   currentStep={1}
+ *   onClick={(index) => setCurrentStep(index)}
+ * />
+ * ```
+ */
+declare const Stepper: {
+    ({ steps, currentStep, appearance, labelPosition, onClick, className, showIndex, disableOneMore, isMainSideBarOpen, isAuthoringOpen, }: TStepperProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Stepper;

package/dist/components/navigation/stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Stepper } from './Stepper';
+export type { TStep, TStepperProps } from './Stepper';

package/dist/components/shortcut-kbd/ShortcutKbd.d.ts

@@ -0,0 +1,26 @@
+export type ShortcutKbdVariant = 'dark' | 'light';
+export interface ShortcutKbdProps {
+    /** Array of keyboard shortcut keys to display (e.g., ['Meta', 'S'] or ['Ctrl', 'Enter']) */
+    shortcuts: string[];
+    /** Visual variant of the keyboard shortcuts */
+    variant?: ShortcutKbdVariant;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * ShortcutKbd component displays keyboard shortcuts with OS-aware key symbols.
+ *
+ * Keys like 'Meta', 'Alt', 'Shift', 'Control', 'Enter', 'Delete' are automatically
+ * converted to OS-specific symbols (e.g., ⌘ on macOS, Ctrl on Windows/Linux).
+ *
+ * @example
+ * ```tsx
+ * // macOS: Shows "⌘ S", Windows: Shows "Ctrl S"
+ * <ShortcutKbd shortcuts={['Meta', 'S']} />
+ *
+ * // Light variant for dark backgrounds
+ * <ShortcutKbd shortcuts={['Meta', 'Shift', 'P']} variant="light" />
+ * ```
+ */
+export declare const ShortcutKbd: ({ shortcuts, variant, className, }: ShortcutKbdProps) => import("react/jsx-runtime").JSX.Element;
+export default ShortcutKbd;

package/dist/components/shortcut-kbd/index.d.ts

@@ -0,0 +1,2 @@
+export { ShortcutKbd, default } from './ShortcutKbd';
+export type { ShortcutKbdProps, ShortcutKbdVariant } from './ShortcutKbd';

package/dist/components/sidebar/Sidebar.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+export type SidebarProps = {
+    children: ReactNode;
+    /** Whether the sidebar should take full screen width minus the main sidebar */
+    isFullScreen?: boolean;
+    className?: string;
+    /** Default width when not in fullscreen mode */
+    defaultSize?: number | string;
+    /** Custom height. Defaults to viewport height minus navbar */
+    height?: string;
+    /** Whether the main sidebar is expanded */
+    isMainSideBarOpen?: boolean;
+};
+declare const _default: React.NamedExoticComponent<SidebarProps>;
+export default _default;

package/dist/components/sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Sidebar } from './Sidebar';
+export type { SidebarProps } from './Sidebar';

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

@@ -0,0 +1,16 @@
+import './styles.css';
+import * as React from 'react';
+export type TooltipPlacement = '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';
+export interface TooltipProps {
+    title: React.ReactNode;
+    placement?: TooltipPlacement;
+    children: React.ReactNode;
+    className?: string;
+    hideTooltip?: boolean;
+    delayShow?: boolean;
+    whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'initial' | 'inherit';
+    /** Array of keyboard shortcut keys to display (e.g., ['Cmd', 'S'] or ['Ctrl', 'Enter']) */
+    shortcuts?: string[];
+}
+declare const Tooltip: ({ children, title, hideTooltip, delayShow, whiteSpace, placement, className, shortcuts, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export default Tooltip;

package/dist/components/user-avatar/NameInitialLogo.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+export type NameInitialLogoProps = {
+    initials: string;
+    rounded: boolean;
+    className?: string;
+};
+/**
+ * NameInitialLogo component displays user initials in a styled container
+ *
+ * @example
+ * ```tsx
+ * <NameInitialLogo initials="JD" rounded={true} />
+ * ```
+ */
+export declare const NameInitialLogo: FC<NameInitialLogoProps>;

package/dist/components/user-avatar/PersonIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type PersonIconProps = {
+    fill?: string;
+    className?: string;
+};
+export declare const PersonIcon: React.FC<PersonIconProps>;
+export {};

package/dist/components/user-avatar/StatusInfoRow.d.ts

@@ -0,0 +1,5 @@
+export interface StatusInfoRowProps {
+    isActive?: boolean;
+    lastViewedOn?: string;
+}
+export declare const StatusInfoRow: ({ isActive, lastViewedOn }: StatusInfoRowProps) => import("react/jsx-runtime").JSX.Element;