@lax-wp/design-system 0.3.114 → 0.3.115

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

@@ -0,0 +1,53 @@
+import { FC } from 'react';
+export type UserAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type UserDetailsTeam = {
+    id?: string;
+    name: string;
+    color?: string;
+};
+export type UserDetails = {
+    email?: string;
+    username?: string;
+    teams?: UserDetailsTeam[];
+    group?: string;
+    clearanceLevel?: number | string;
+    region?: string;
+};
+export type UserAvatarProps = {
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+    enablePopper?: boolean;
+    profilePic?: string;
+    size?: UserAvatarSize;
+    hoverSize?: UserAvatarSize;
+    containerClassName?: string;
+    className?: string;
+    userId?: string;
+    lastViewedOn?: string;
+    isActive?: boolean;
+    statusIndicator?: boolean;
+    /** User details to display in the popper - replaces the useTeamMemberFilter hook */
+    userDetails?: UserDetails | null;
+    /** Whether user details are being fetched */
+    isFetchingUserDetails?: boolean;
+    /** Optional token for authenticated image loading */
+    authToken?: string;
+    /** Callback triggered when mouse enters the avatar */
+    onHover?: () => void;
+};
+/**
+ * UserAvatar component for displaying user profile pictures with hover popper
+ *
+ * @example
+ * ```tsx
+ * <UserAvatar
+ *   firstName="John"
+ *   lastName="Doe"
+ *   email="john@example.com"
+ *   profilePic="/avatar.jpg"
+ *   userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}
+ * />
+ * ```
+ */
+export declare const UserAvatar: FC<UserAvatarProps>;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export type UserAvatarPopperPlacement = 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
+export interface UserAvatarPopperProps {
+    isOpen: boolean;
+    onClose: () => void;
+    anchorEl: HTMLElement | null;
+    placement?: UserAvatarPopperPlacement;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const UserAvatarPopper: ({ isOpen, onClose, anchorEl, placement, children, className }: UserAvatarPopperProps) => React.ReactPortal;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export type UserProfilePicProps = {
+    url?: string;
+    className: string;
+    username?: string;
+};
+/**
+ * UserProfilePic component displays a user's profile picture with fallback to initials
+ *
+ * @example
+ * ```tsx
+ * <UserProfilePic url="/avatar.jpg" username="John Doe" className="w-10 h-10 rounded-full" />
+ * ```
+ */
+export declare const UserProfilePic: React.FC<UserProfilePicProps>;

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

@@ -0,0 +1,8 @@
+export declare const sizeClasses: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export declare const getInitials: (name: string) => string;

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

@@ -0,0 +1,13 @@
+export { UserAvatar } from './UserAvatar';
+export type { UserAvatarProps, UserAvatarSize, UserDetails, UserDetailsTeam } from './UserAvatar';
+export { UserAvatarPopper } from './UserAvatarPopper';
+export type { UserAvatarPopperProps, UserAvatarPopperPlacement } from './UserAvatarPopper';
+export { StatusInfoRow } from './StatusInfoRow';
+export type { StatusInfoRowProps } from './StatusInfoRow';
+export { PersonIcon } from './PersonIcon';
+export { sizeClasses, getInitials } from './constants';
+export { useDynamicPosition } from './useDynamicPosition';
+export { NameInitialLogo } from './NameInitialLogo';
+export type { NameInitialLogoProps } from './NameInitialLogo';
+export { UserProfilePic } from './UserProfilePic';
+export type { UserProfilePicProps } from './UserProfilePic';

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

@@ -0,0 +1,13 @@
+type Position = {
+    vertical: 'top' | 'bottom';
+    horizontal: 'left' | 'right';
+};
+export declare const useDynamicPosition: () => {
+    triggerRef: import("react").MutableRefObject<HTMLDivElement>;
+    dropdownRef: import("react").MutableRefObject<HTMLDivElement>;
+    position: Position;
+    isVisible: boolean;
+    show: () => void;
+    hide: () => void;
+};
+export {};

package/dist/constants/colors.d.ts

@@ -0,0 +1,263 @@
+/**
+ * Color palette for tag components
+ */
+export declare const COLORS: {
+    readonly primary: {
+        readonly 50: "#E6F1FC";
+        readonly 100: "#C6E1F9";
+        readonly 200: "#8AC0F2";
+        readonly 300: "#54A4EC";
+        readonly 400: "#3392E9";
+        readonly 500: "#0077E3";
+        readonly 600: "#016DCF";
+        readonly 700: "#0054A1";
+        readonly 800: "#00417D";
+        readonly 900: "#00325F";
+        readonly 950: "#001c35";
+        readonly 975: "#00111f";
+    };
+    readonly black: {
+        readonly 50: "#f0f0f0";
+        readonly 100: "#d9d9d9";
+        readonly 200: "#bfbfbf";
+        readonly 300: "#8c8c8c";
+        readonly 400: "#595959";
+        readonly 500: "#454545";
+        readonly 600: "#262626";
+        readonly 700: "#1f1f1f";
+        readonly 800: "#141414";
+        readonly 900: "#000000";
+        readonly 950: "#0a0a0a";
+        readonly 975: "#050505";
+    };
+    readonly blue: {
+        readonly 50: "#E6F1FC";
+        readonly 100: "#C6E1F9";
+        readonly 200: "#8AC0F2";
+        readonly 300: "#54A4EC";
+        readonly 400: "#3392E9";
+        readonly 500: "#0077E3";
+        readonly 600: "#016DCF";
+        readonly 700: "#0054A1";
+        readonly 800: "#00417D";
+        readonly 900: "#00325F";
+        readonly 950: "#002547";
+        readonly 975: "#001529";
+    };
+    readonly success: {
+        readonly 50: "#ECFDF3";
+        readonly 100: "#D1FADF";
+        readonly 200: "#A6F4C5";
+        readonly 300: "#6CE9A6";
+        readonly 400: "#32D583";
+        readonly 500: "#12B76A";
+        readonly 600: "#039855";
+        readonly 700: "#027A48";
+        readonly 800: "#05603A";
+        readonly 900: "#054F31";
+        readonly 950: "#033625";
+        readonly 975: "#022419";
+    };
+    readonly neutral: {
+        readonly 50: "#F9FAFB";
+        readonly 100: "#F2F4F7";
+        readonly 200: "#EAECF0";
+        readonly 300: "#D0D5DD";
+        readonly 400: "#98A2B3";
+        readonly 500: "#667085";
+        readonly 600: "#475467";
+        readonly 700: "#344054";
+        readonly 800: "#1D2939";
+        readonly 900: "#101828";
+        readonly 950: "#0c1219";
+        readonly 975: "#080a0f";
+    };
+    readonly error: {
+        readonly 50: "#FEF3F2";
+        readonly 100: "#FEE4E2";
+        readonly 200: "#FECDCA";
+        readonly 300: "#FDA29B";
+        readonly 400: "#F97066";
+        readonly 500: "#F04438";
+        readonly 600: "#D92D20";
+        readonly 700: "#B42318";
+        readonly 800: "#912018";
+        readonly 900: "#7A271A";
+        readonly 950: "#3d1008";
+        readonly 975: "#2a0b05";
+    };
+    readonly warning: {
+        readonly 50: "#FFFAEB";
+        readonly 100: "#FEF0C7";
+        readonly 200: "#FEDF89";
+        readonly 300: "#FEC84B";
+        readonly 400: "#FDB022";
+        readonly 500: "#F79009";
+        readonly 600: "#DC6803";
+        readonly 700: "#B54708";
+        readonly 800: "#93370D";
+        readonly 900: "#7A2E0E";
+        readonly 950: "#662505";
+        readonly 975: "#451803";
+    };
+    readonly teal: {
+        readonly 50: "#ebf5f5";
+        readonly 100: "#c2e0df";
+        readonly 200: "#a4d1d0";
+        readonly 300: "#7abcba";
+        readonly 400: "#61afad";
+        readonly 500: "#399b98";
+        readonly 600: "#348d8a";
+        readonly 700: "#286e6c";
+        readonly 800: "#1f5554";
+        readonly 900: "#184140";
+        readonly 950: "#133534";
+        readonly 975: "#0c2222";
+    };
+    readonly green: {
+        readonly 50: "#f2f7f2";
+        readonly 100: "#d5e5d5";
+        readonly 200: "#c1d9c1";
+        readonly 300: "#a5c7a5";
+        readonly 400: "#94bd93";
+        readonly 500: "#79ac78";
+        readonly 600: "#6e9d6d";
+        readonly 700: "#567a55";
+        readonly 800: "#435f42";
+        readonly 900: "#334832";
+        readonly 950: "#001e00";
+        readonly 975: "#182818";
+    };
+    readonly yellow: {
+        readonly 50: "#fffaed";
+        readonly 100: "#fff0c7";
+        readonly 200: "#ffe8ac";
+        readonly 300: "#ffde86";
+        readonly 400: "#ffd76f";
+        readonly 500: "#ffcd4b";
+        readonly 600: "#e8bb44";
+        readonly 700: "#b59235";
+        readonly 800: "#8c7129";
+        readonly 900: "#6b5620";
+        readonly 950: "#524314";
+        readonly 975: "#382e0e";
+    };
+    readonly orange: {
+        readonly 50: "#fef4e8";
+        readonly 100: "#fddeb7";
+        readonly 200: "#fcce94";
+        readonly 300: "#fbb764";
+        readonly 400: "#faa945";
+        readonly 500: "#f99417";
+        readonly 600: "#e38715";
+        readonly 700: "#b16910";
+        readonly 800: "#89510d";
+        readonly 900: "#693e0a";
+        readonly 950: "#4d2d07";
+        readonly 975: "#331e05";
+    };
+    readonly peach: {
+        readonly 50: "#fceef3";
+        readonly 100: "#f5cad9";
+        readonly 200: "#f0b0c6";
+        readonly 300: "#ea8cad";
+        readonly 400: "#e5759d";
+        readonly 500: "#df5384";
+        readonly 600: "#cb4c78";
+        readonly 700: "#9e3b5e";
+        readonly 800: "#7b2e49";
+        readonly 900: "#5e2337";
+        readonly 950: "#451a2b";
+        readonly 975: "#2e111d";
+    };
+    readonly red: {
+        readonly 50: "#fceaeb";
+        readonly 100: "#f6bec0";
+        readonly 200: "#f29ea2";
+        readonly 300: "#ec7278";
+        readonly 400: "#e9575d";
+        readonly 500: "#e32d35";
+        readonly 600: "#cf2930";
+        readonly 700: "#a12026";
+        readonly 800: "#7d191d";
+        readonly 900: "#5f1316";
+        readonly 950: "#470c0f";
+        readonly 975: "#2f080a";
+    };
+    readonly purple: {
+        readonly 50: "#f5e7ff";
+        readonly 100: "#dfb4ff";
+        readonly 200: "#d090ff";
+        readonly 300: "#bb5dff";
+        readonly 400: "#ad3dff";
+        readonly 500: "#990dff";
+        readonly 600: "#8b0ce8";
+        readonly 700: "#6d09b5";
+        readonly 800: "#54078c";
+        readonly 900: "#40056b";
+        readonly 950: "#300450";
+        readonly 975: "#200336";
+    };
+    readonly navy: {
+        readonly 50: "#eaebf6";
+        readonly 100: "#bebfe2";
+        readonly 200: "#9ea1d3";
+        readonly 300: "#7276bf";
+        readonly 400: "#575bb3";
+        readonly 500: "#2d32a0";
+        readonly 600: "#292e92";
+        readonly 700: "#202472";
+        readonly 800: "#191c58";
+        readonly 900: "#131543";
+        readonly 950: "#0d0e2f";
+        readonly 975: "#090a20";
+    };
+    readonly grey: {
+        readonly 50: "#f2f2f2";
+        readonly 100: "#d5d5d5";
+        readonly 200: "#c1c1c1";
+        readonly 300: "#a5a5a5";
+        readonly 400: "#939393";
+        readonly 500: "#787878";
+        readonly 600: "#6d6d6d";
+        readonly 700: "#555555";
+        readonly 800: "#424242";
+        readonly 900: "#323232";
+        readonly 950: "#252525";
+        readonly 975: "#191919";
+    };
+};
+/**
+ * Available color names for tag components
+ */
+export declare const SELECT_COLORS: readonly [{
+    readonly title: "Blue";
+    readonly color: "blue";
+}, {
+    readonly title: "Green";
+    readonly color: "green";
+}, {
+    readonly title: "Teal";
+    readonly color: "teal";
+}, {
+    readonly title: "Red";
+    readonly color: "red";
+}, {
+    readonly title: "Yellow";
+    readonly color: "yellow";
+}, {
+    readonly title: "Orange";
+    readonly color: "orange";
+}, {
+    readonly title: "Peach";
+    readonly color: "peach";
+}, {
+    readonly title: "Grey";
+    readonly color: "grey";
+}, {
+    readonly title: "Purple";
+    readonly color: "purple";
+}, {
+    readonly title: "Navy";
+    readonly color: "navy";
+}];

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/constants/toggle.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Toggle label direction options
+ */
+export declare enum TOGGLE_LABEL_DIRECTION {
+    LEFT = "left",
+    RIGHT = "right",
+    TOP = "top"
+}
+/**
+ * Type derived from TOGGLE_LABEL_DIRECTION enum
+ */
+export type TToggleDirection = `${TOGGLE_LABEL_DIRECTION}`;

package/dist/hooks/useEventListener.d.ts

@@ -0,0 +1,4 @@
+import type { RefObject } from 'react';
+export declare function useEventListener<K extends keyof WindowEventMap>(eventName: K | null, handler: (event: WindowEventMap[K]) => void, element?: undefined, options?: boolean | AddEventListenerOptions): void;
+export declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLDivElement>(eventName: K | null, handler: (event: HTMLElementEventMap[K]) => void, element: RefObject<T>, options?: boolean | AddEventListenerOptions): void;
+export declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K | null, handler: (event: DocumentEventMap[K]) => void, element: RefObject<Document>, options?: boolean | AddEventListenerOptions): void;

package/dist/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/hooks/useModalContainer.d.ts

@@ -0,0 +1,23 @@
+export interface UseModalContainerOptions {
+    /** Primary container ID to search for */
+    primaryContainerId?: string;
+    /** Fallback container ID if primary not found */
+    fallbackContainerId?: string;
+    /** Maximum number of retry attempts */
+    maxRetries?: number;
+    /** Delay between retries in milliseconds */
+    retryDelay?: number;
+}
+/**
+ * Hook to find a modal container element with retry mechanism
+ * Searches across current document and parent frame if available
+ *
+ * @example
+ * ```tsx
+ * const container = useModalContainer({
+ *   primaryContainerId: 'layout-app-main-content-container',
+ *   fallbackContainerId: 'full-screen-container'
+ * });
+ * ```
+ */
+export declare const useModalContainer: (options?: UseModalContainerOptions) => HTMLElement;

package/dist/hooks/useOS.d.ts

@@ -0,0 +1,32 @@
+export type OS = 'macos' | 'windows' | 'linux' | 'other';
+/**
+ * Detects the current operating system
+ */
+export declare const detectOS: () => OS;
+/**
+ * Hook to detect the current operating system
+ */
+export declare const useOS: () => OS;
+/**
+ * Check if the current OS is macOS
+ */
+export declare const isMacOS: () => boolean;
+/**
+ * Mapping of generic shortcut keys to OS-specific symbols
+ */
+export declare const SHORTCUT_KEY_MAP: Record<string, {
+    macos: string;
+    other: string;
+}>;
+/**
+ * Converts a shortcut key to its OS-specific representation
+ */
+export declare const mapShortcutKey: (key: string, os?: OS) => string;
+/**
+ * Converts an array of shortcut keys to their OS-specific representations
+ */
+export declare const mapShortcutKeys: (keys: string[], os?: OS) => string[];
+/**
+ * Hook to convert shortcut keys to OS-specific representations
+ */
+export declare const useShortcutKeys: (keys: string[]) => string[];

package/dist/hooks/useOutsideClick.d.ts

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

@@ -0,0 +1,28 @@
+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/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/hooks/useTheme.d.ts

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