@lax-wp/design-system 0.3.21 → 0.3.23

package/dist/components/data-display/card/Card.d.ts

@@ -0,0 +1,31 @@
+import { type FC, type CSSProperties, type ReactNode } from "react";
+/**
+ * Props for the Card component
+ */
+export interface CardProps {
+    /** Content to render inside the card */
+    children: ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+    /** Title to display in document head (via HelmetTitle) */
+    title?: string;
+    /** Inline styles to apply */
+    style?: CSSProperties;
+    /** HTML id attribute */
+    id?: string;
+}
+/**
+ * Card component for displaying content in a styled container
+ *
+ * This component provides a consistent card layout with shadow, rounded corners,
+ * and proper dark mode support. It can optionally set the document title using
+ * the HelmetTitle component.
+ *
+ * @example
+ * ```tsx
+ * <Card title="My Card">
+ *   <div>Card content</div>
+ * </Card>
+ * ```
+ */
+export declare const Card: FC<CardProps>;

package/dist/components/forms/icon-picker/IconPicker.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { type SvgIconOwnProps } from '@mui/material';
+export interface IconPickerContentProps {
+    selectedIcon: string | null;
+    onChange: (iconName: string | null) => void;
+    label?: string;
+    required?: boolean;
+    allowClear?: boolean;
+    disabled?: boolean;
+    errorMessage?: string;
+}
+interface IconRendererProps {
+    iconName: string;
+    sx?: SvgIconOwnProps['sx'];
+    className?: string;
+    isHovering?: boolean;
+}
+export declare const IconRenderer: ({ iconName, sx, className, isHovering }: IconRendererProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconPicker: React.LazyExoticComponent<(props: IconPickerContentProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/forms/md-input/MdInput.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Props for the MdInput component
+ */
+export interface MdInputProps {
+    /** Unique identifier for the markdown input */
+    id?: string;
+    /** Current markdown value */
+    value?: string;
+    /** Callback function called when the markdown value changes */
+    onChange: (value: string) => void;
+    /** Placeholder text for the textarea */
+    placeholder?: string;
+    /** Number of visible text lines for the textarea */
+    rows?: number;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes for the wrapper container */
+    className?: string;
+    /** Additional CSS classes for the textarea */
+    textareaClassName?: string;
+    /** Additional CSS classes for the preview container */
+    previewClassName?: string;
+    /** Initial mode (markdown or preview) */
+    defaultMode?: "markdown" | "preview";
+    /** Current mode (markdown or preview) */
+    mode?: "markdown" | "preview";
+    /** Label text to display above the input */
+    label?: string;
+    /** Whether the field is required */
+    required?: boolean;
+}
+/**
+ * A markdown input component with preview mode support.
+ * Features a toggle switch to switch between markdown editing and preview modes.
+ *
+ * @example
+ * ```tsx
+ * <MdInput
+ *   value={markdown}
+ *   onChange={setMarkdown}
+ *   placeholder="Enter markdown content..."
+ *   defaultMode="markdown"
+ * />
+ * ```
+ */
+export declare const MdInput: ({ id, value, onChange, placeholder, rows, disabled, className, textareaClassName, previewClassName, defaultMode, mode: modeProp, label, required, }: MdInputProps) => import("react/jsx-runtime").JSX.Element;

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/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,4 @@
+export { PageContainer } from "./PageContainer";
+export type { PageContainerProps } from "./PageContainer";
+export { HelmetTitle } from "./HelmetTitle";
+export type { HelmetTitleProps } from "./HelmetTitle";

package/dist/constants/layout.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Layout-related constants
+ */
+/**
+ * Available page modes
+ */
+export declare enum MODES {
+    COMPARISON = "comparison",
+    EDIT = "edit",
+    FOCUS_EDIT = "focusEdit"
+}
+/**
+ * Animation duration for layout transitions in milliseconds
+ */
+export declare const OPEN_DURATION_MS = 500;

package/dist/hooks/useScrollToTop.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook that scrolls to the top of the page when dependencies change
+ * @param deps - Array of dependencies to trigger scroll
+ */
+export declare const useScrollToTop: (deps?: unknown[]) => void;

package/dist/index.d.ts

@@ -22,14 +22,20 @@ export { PercentageInputField } from "./components/forms/percentage-input/Percen
 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 { MdInput } from "./components/forms/md-input/MdInput";
+export type { MdInputProps } from "./components/forms/md-input/MdInput";
 export { MultiFileUpload } from "./components/forms/multi-file-upload/MultiFileUpload";
 export type { MultiFileUploadProps, FileUploadResult, FileChangeValue, } from "./components/forms/multi-file-upload/MultiFileUpload";
 export { FileUpload } from "./components/forms/file-upload/FileUpload";
 export type { FileUploadProps, FileUploadSize, FileUploadVariant, } from "./components/forms/file-upload/FileUpload";
+export { IconPicker, IconRenderer } from "./components/forms/icon-picker/IconPicker";
+export type { IconPickerContentProps } from "./components/forms/icon-picker/IconPicker";
 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 { Card } from "./components/data-display/card/Card";
+export type { CardProps } from "./components/data-display/card/Card";
 export { Modal } from "./components/data-display/modal/Modal";
 export type { ModalProps, } from "./components/data-display/modal/Modal";
 export { Tag } from "./components/data-display/tag/Tag";
@@ -62,6 +68,7 @@ export { useTheme } from "./hooks/useTheme";
 export { parseJson, filterTopLevelPaths, randomHexString } from "./utils/utilities";
 export { systemMessages } from "./utils/messageConstants";
 export { formatCurrency, formatDate, formatBooleanValue, isISODateString } from "./utils/formatters";
+export { getFlagComponent, getFlagComponentSm, getFlagComponentRectangle, getFlagComponentRectangleSm, getFlagComponentRectangleMd } from "./utils/countryFlags";
 export { LaxIcon } from "./components/icons/LaxIcon";
 export { ComingSoonIcon } from "./components/icons/ComingSoonIcon";
 export { CheckSmallIcon } from "./components/icons/CheckSmallIcon";
@@ -79,6 +86,7 @@ export type { DynamicDataModalProps, TTabKey as DynamicDataModalTabKey } from ".
 export { DeleteModal } from "./components/data-display/delete-modal/DeleteModal";
 export type { DeleteModalProps } from "./components/data-display/delete-modal/DeleteModal";
 export type { JsonValue, JsonObject, JsonArray, Tab as CodeEditorTab, ThemeContextType, PythonError, JsonGridContextType } from "./types";
+export { COUNTRY_CODES, countryNameFromCode } from "./types/icon-picker";
 export { DiffViewer, InlineDiffHighlighter, } from "./components/data-display/diff-viewer/DiffViewer";
 export type { DiffViewerProps, DiffType, DiffTheme, } from "./components/data-display/diff-viewer/DiffViewer";
 export { default as Button } from "./components/button/Button";
@@ -103,3 +111,7 @@ export { useOutsideClick } from "./hooks/useOutsideClick";
 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 { MODES, OPEN_DURATION_MS } from "./constants/layout";