@lax-wp/design-system 0.3.77 → 0.3.78

package/dist/components/data-display/divider/Divider.d.ts

@@ -0,0 +1,21 @@
+import type { FC, ReactNode } from "react";
+/**
+ * Props for the Divider component
+ */
+export interface DividerProps {
+    /** Optional content to display in the center of the divider */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Divider component displays a horizontal line with optional centered content
+ *
+ * @example
+ * ```tsx
+ * <Divider />
+ * <Divider>OR</Divider>
+ * <Divider className="my-4">Section</Divider>
+ * ```
+ */
+export declare const Divider: FC<DividerProps>;

package/dist/components/data-display/dynamic-items-cell/DynamicItemsCell.d.ts

@@ -0,0 +1,50 @@
+interface DynamicItemsCellItem {
+    id?: string | number;
+    [key: string]: unknown;
+}
+/**
+ * Props for the DynamicItemsCell component
+ */
+export interface DynamicItemsCellProps<T extends DynamicItemsCellItem> {
+    /** Array of items to display */
+    items: T[];
+    /** Whether dark mode is enabled */
+    isDarkMode: boolean;
+    /** Function to extract label from item */
+    getLabel: (item: T) => string;
+    /** Function to extract color from item */
+    getColor: (item: T) => string;
+    /** Function to extract unique ID from item */
+    getId?: (item: T) => string | number;
+    /** Color for the "more" tag */
+    moreTagColor?: string;
+    /** Whether to use hash color generation */
+    useHashColor?: boolean;
+    /** Tooltip placement */
+    tooltipPlacement?: "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+    /** Additional CSS classes */
+    className?: string;
+    /** Container width for calculating visible items */
+    containerWidth?: number;
+}
+/**
+ * DynamicItemsCell component displays a list of tags that automatically
+ * truncates based on container width and shows overflow count
+ *
+ * @example
+ * ```tsx
+ * <DynamicItemsCell
+ *   items={[{ id: 1, name: "Tag 1", color: "blue" }, { id: 2, name: "Tag 2", color: "green" }]}
+ *   isDarkMode={false}
+ *   getLabel={(item) => item.name}
+ *   getColor={(item) => item.color}
+ *   containerWidth={300}
+ * />
+ * ```
+ */
+declare const DynamicItemsCellComponent: {
+    <T extends DynamicItemsCellItem>({ items, isDarkMode, getLabel, getColor, getId, moreTagColor, useHashColor, tooltipPlacement, className, containerWidth, }: DynamicItemsCellProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const DynamicItemsCell: typeof DynamicItemsCellComponent;
+export {};

package/dist/components/data-display/skeleton/Skeleton.d.ts

@@ -0,0 +1,18 @@
+import type { FC } from "react";
+/**
+ * Props for the Skeleton component
+ */
+export interface SkeletonProps {
+    /** Whether to show animation */
+    active?: boolean;
+}
+/**
+ * Skeleton component displays a placeholder loading state
+ *
+ * @example
+ * ```tsx
+ * <Skeleton />
+ * <Skeleton active={false} />
+ * ```
+ */
+export declare const Skeleton: FC<SkeletonProps>;

package/dist/components/data-display/text/Text.d.ts

@@ -0,0 +1,41 @@
+import type { FC, ReactNode } from "react";
+type TSVG = FC<React.SVGProps<SVGSVGElement>>;
+/**
+ * Props for the Text component
+ */
+export interface TextProps {
+    /** Text content to display (will be passed through i18n translation) */
+    text: string;
+    /** Whether to render without a wrapper tag */
+    emptyTag?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Click handler for the text element */
+    onClick?: () => void;
+    /** Icon component to display on the left */
+    LeftIcon?: TSVG | null;
+    /** Role attribute for accessibility */
+    role?: "row" | "button";
+    /** Text to prepend before main text */
+    LText?: string;
+    /** Text to append after main text */
+    RText?: string;
+    /** Icon component to display on the right */
+    RightIcon?: TSVG | null;
+    /** HTML tag to render */
+    tagName?: "p" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "button";
+    /** Additional children to render */
+    children?: ReactNode;
+}
+/**
+ * Text component displays translated text with optional icons and customizable tag
+ *
+ * @example
+ * ```tsx
+ * <Text text="Hello World" />
+ * <Text text="Click me" tagName="button" onClick={handleClick} />
+ * <Text text="Title" tagName="h1" LeftIcon={StarIcon} />
+ * ```
+ */
+declare const Text: FC<TextProps>;
+export default Text;

package/dist/components/data-display/text-with-strike/TextWithStrike.d.ts

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+/**
+ * Props for the TextWithStrike component
+ */
+export interface TextWithStrikeProps {
+    /** Text content that may contain <um></um> tags for highlighting */
+    text: string;
+}
+/**
+ * TextWithStrike component parses text with <um></um> tags and displays
+ * the content between those tags with a highlighted background.
+ *
+ * @example
+ * ```tsx
+ * <TextWithStrike text="This is <um>highlighted</um> text" />
+ * ```
+ */
+declare const TextWithStrike: FC<TextWithStrikeProps>;
+export default TextWithStrike;

package/dist/components/forms/number-input-field/NumberInputField.d.ts

@@ -0,0 +1,47 @@
+import type { FC } from "react";
+/**
+ * Props for the NumberInputField component
+ */
+export interface NumberInputFieldProps {
+    /** Label text to display above the input */
+    label?: string;
+    /** Additional CSS classes for the input */
+    className?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Callback when the value changes */
+    onChange?: (value: string | number) => void;
+    /** Current value of the input */
+    value?: string | number;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Minimum allowed value */
+    min?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Step increment for number input */
+    step?: number;
+    /** Number format type: 'comma', 'currency', 'percent' */
+    numberFormat?: string;
+    /** Number of decimal places */
+    precision?: number;
+    /** Unique identifier for the input */
+    id?: string;
+    /** Custom inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * NumberInputField component provides a number input with optional formatting
+ *
+ * @example
+ * ```tsx
+ * <NumberInputField
+ *   label="Amount"
+ *   value={1000}
+ *   onChange={setValue}
+ *   numberFormat="comma"
+ *   precision={2}
+ * />
+ * ```
+ */
+export declare const NumberInputField: FC<NumberInputFieldProps>;

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,52 @@
+import React from "react";
+/**
+ * Custom scrollbar handle for external control
+ */
+export interface CustomScrollbarHandle {
+    /** Scroll to the top of the container */
+    scrollToTop: () => void;
+    /** Scroll to the right of the container */
+    scrollToRight: () => void;
+    /** Get the container element */
+    getContainer: () => HTMLDivElement | null;
+}
+/**
+ * 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;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Custom height for the scrollbar container */
+    height?: string | number;
+    /** Whether to enable auto-hide for scrollbars */
+    autoHide?: boolean;
+    /** Custom inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * 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<CustomScrollbarProps & 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/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/index.d.ts

@@ -2,3 +2,11 @@ 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/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/index.d.ts

@@ -124,6 +124,20 @@ export type { UseOutsideClickProps } from "./hooks/useOutsideClick";
 export { useModalContainer } from "./hooks/useModalContainer";
 export type { UseModalContainerOptions } from "./hooks/useModalContainer";
 export { useScrollToTop } from "./hooks/useScrollToTop";
-export { PageContainer, HelmetTitle } from "./components/layout";
-export type { PageContainerProps, HelmetTitleProps } from "./components/layout";
+export { PageContainer, HelmetTitle, Helmet, ComponentLoader, LogoLoader, CustomScrollbar } from "./components/layout";
+export type { PageContainerProps, HelmetTitleProps, HelmetProps, ComponentLoaderProps, LogoLoaderProps, CustomScrollbarProps, CustomScrollbarHandle } from "./components/layout";
+export { BreadCrumb, BreadCrumbItem } from "./components/navigation/breadcrumbs";
+export type { BreadCrumbProps, BreadCrumbItemProps, TBreadCrumbItem } from "./components/navigation/breadcrumbs";
+export { Divider } from "./components/data-display/divider/Divider";
+export type { DividerProps } from "./components/data-display/divider/Divider";
+export { Skeleton } from "./components/data-display/skeleton/Skeleton";
+export type { SkeletonProps } from "./components/data-display/skeleton/Skeleton";
+export { default as Text } from "./components/data-display/text/Text";
+export type { TextProps } from "./components/data-display/text/Text";
+export { default as TextWithStrike } from "./components/data-display/text-with-strike/TextWithStrike";
+export type { TextWithStrikeProps } from "./components/data-display/text-with-strike/TextWithStrike";
+export { DynamicItemsCell } from "./components/data-display/dynamic-items-cell/DynamicItemsCell";
+export type { DynamicItemsCellProps } from "./components/data-display/dynamic-items-cell/DynamicItemsCell";
+export { NumberInputField } from "./components/forms/number-input-field/NumberInputField";
+export type { NumberInputFieldProps } from "./components/forms/number-input-field/NumberInputField";
 export { MODES, OPEN_DURATION_MS } from "./constants/layout";