@lax-wp/design-system 0.2.6 → 0.2.8

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

package/dist/index.d.ts

@@ -0,0 +1,67 @@
+export { InputField } from "./components/forms/input-field/InputField";
+export type { InputFieldProps } from "./components/forms/input-field/InputField";
+export * from "./components/data-display/typography/Typography";
+export { TextField } from "./components/forms/text-field/TextField";
+export type { TextFieldProps } from "./components/forms/text-field/TextField";
+export { Checkbox } from "./components/forms/checkbox/Checkbox";
+export type { CheckboxComponentProps, TCheckboxComponentProps, } from "./components/forms/checkbox/Checkbox";
+export { ColorPicker } from "./components/forms/color-picker/ColorPicker";
+export type { ColorPickerProps, ColorPickerComponentProps, } from "./components/forms/color-picker/ColorPicker";
+export { CreatableSelectField } from "./components/forms/creatable-select/CreatableSelect";
+export type { CreatableSelectProps, SelectOption, TProps, } from "./components/forms/creatable-select/CreatableSelect";
+export { CurrencyInputField } from "./components/forms/currency-input/CurrencyInputField";
+export type { CurrencyInputFieldProps } from "./components/forms/currency-input/CurrencyInputField";
+export { CURRENCIES, CURRENCY_SYMBOLS } from "./components/forms/currency-input/currency.constant";
+export { DateRange } from "./components/forms/date-range/DateRange";
+export type { DateRangeProps, DateRangeValue, } from "./components/forms/date-range/DateRange";
+export { DebounceInputField } from "./components/forms/debounce-input/DebounceInputField";
+export type { DebounceInputFieldProps } from "./components/forms/debounce-input/DebounceInputField";
+export { PercentageInputField } from "./components/forms/percentage-input/PercentageInputField";
+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 { 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 { 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 { Modal } from "./components/data-display/modal/Modal";
+export type { ModalProps, ModalSize, ModalAppearance, } from "./components/data-display/modal/Modal";
+export { Tag } from "./components/data-display/tag/Tag";
+export type { TagProps, TagSize, TagColor, ThemeMode, UploadHandler, } from "./components/data-display/tag/Tag";
+export { LabelValue } from "./components/data-display/label-value/LabelValue";
+export type { LabelValueProps, LabelValueSize, HighlightColor, MasterDataItem, RiskDetails, MasterDataModalProps, RiskDetailsCardProps, } from "./components/data-display/label-value/LabelValue";
+export { Banner } from "./components/data-display/banner/Banner";
+export type { BannerProps, BannerStatus, } from "./components/data-display/banner/Banner";
+export { ResizableSidebar } from "./components/data-display/resizable-sidebar/ResizableSidebar";
+export type { ResizableSidebarProps, ResizableSidebarPlacement, ResizableSidebarTheme, } from "./components/data-display/resizable-sidebar/ResizableSidebar";
+export { PdfViewer } from "./components/data-display/pdf-viewer/PdfViewer";
+export type { PdfViewerProps } from "./components/data-display/pdf-viewer/PdfViewer";
+export { Popper } from "./components/data-display/popper/Popper";
+export type { PopperProps, PopperPlacement, } from "./components/data-display/popper/Popper";
+export { default as Toast, toast } from "./components/feedback/toast/Toast";
+export type { ToastContainerProps, ToastType, ToastPosition, } from "./components/feedback/toast/Toast";
+export { CodeEditor } from "./components/data-display/code-editor/CodeEditor";
+export type { CodeEditorProps } from "./types";
+export { JsonGrid } from "./components/data-display/code-editor/JsonGrid";
+export { Tabs } from "./components/data-display/code-editor/Tabs";
+export type { TabsProps } from "./components/data-display/code-editor/Tabs";
+export { monacoManager } from "./services/monacoManager";
+export { usePythonSyntax } from "./hooks/usePythonSyntax";
+export type { UsePythonSyntaxProps } from "./hooks/usePythonSyntax";
+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 type { JsonValue, JsonObject, JsonArray, Tab, ThemeContextType, PythonError, JsonGridContextType } from "./types";
+export { DiffViewer, InlineDiffHighlighter, } from "./components/data-display/diff-viewer/DiffViewer";
+export type { DiffViewerProps, DiffType, DiffTheme, } from "./components/data-display/diff-viewer/DiffViewer";
+export { OptionButton } from "./components/buttons/option-button/OptionButton";
+export type { OptionButtonProps, OptionButtonSize, OptionButtonVariant, } from "./components/buttons/option-button/OptionButton";
+export { FloatingBar } from "./components/floating-bar/FloatingBar";
+export type { FloatingBarProps, FloatingBarActionConfig, FloatingBarDeleteConfig, FloatingBarSize, FloatingBarPosition, FloatingBarTheme, } from "./components/floating-bar/FloatingBar";
+export { useOutsideClick } from "./hooks/useOutsideClick";
+export type { UseOutsideClickProps } from "./hooks/useOutsideClick";