@lax-wp/design-system 0.3.32 → 0.3.34

package/dist/components/forms/toggle/Toggle.d.ts

@@ -1,68 +1,103 @@
 import { type ReactNode } from "react";
+import type { TToggleDirection } from "../../../constants/toggle";
 /**
- * Toggle label direction options
+ * Label type for tags
  */
-export type ToggleDirection = "top" | "left" | "right";
+export type LabelType = {
+    label: string;
+    color?: string;
+};
 /**
  * Props for the Toggle component
  */
 export interface ToggleProps {
+    /** Whether this is a GTN (Global Term Name) field */
+    isGTN?: boolean;
     /** Unique identifier for the toggle */
     id?: string;
     /** Whether the toggle is checked */
-    checked: boolean;
+    isChecked: boolean;
     /** Callback function called when toggle state changes */
-    onChange: (checked: boolean) => void;
+    onChange: (val: boolean) => void;
     /** Label text or element to display */
     label?: ReactNode;
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
     /** Whether the field is required */
     required?: boolean;
-    /** Whether the toggle is disabled */
-    disabled?: boolean;
-    /** Message to display below the toggle */
-    message?: string;
-    /** Type of message to display */
-    messageType?: "success" | "error" | "info" | "default";
-    /** Additional CSS classes for the wrapper container */
-    wrapperClassName?: string;
-    /** Additional CSS classes for the toggle */
-    toggleClassName?: string;
-    /** Additional CSS classes for the label */
-    labelClassName?: string;
-    /** Help text to display below the label */
-    helpText?: string;
-    /** Size variant for the toggle */
-    size?: "small" | "medium" | "large";
-    /** Label direction relative to toggle */
-    labelDirection?: ToggleDirection;
+    /** Whether the required indicator shows as conditional (yellow instead of red) */
+    isRequiredConditional?: boolean;
+    /** Tags/labels to display next to the label */
+    tags?: (string | LabelType)[];
     /** Whether to hide the status text (Yes/No) */
     hideStatus?: boolean;
+    /** Label direction relative to toggle */
+    labelDirection?: TToggleDirection;
     /** Custom status text instead of Yes/No */
     statusText?: string;
     /** Whether to show icons in the toggle */
     withIcon?: boolean;
+    /** Whether the value was AI extracted */
+    isAiExtracted?: boolean;
+    /** Tooltip text to display */
+    tooltip?: string;
+    /** Additional CSS classes for the toggle input */
+    className?: string;
+    /** Whether the toggle is disabled */
+    isDisabled?: boolean;
     /** Custom icons for checked/unchecked states */
     icon?: {
         checkedIcon: ReactNode;
         uncheckedIcon: ReactNode;
     };
-    /** Visual variant for the toggle */
-    variant?: "primary" | "secondary";
-    /** Whether to preserve original case in the label */
-    originalCase?: boolean;
     /** Whether to stop click propagation */
     stopClickPropagation?: boolean;
+    /** GTN field name for document integration */
+    gtnName?: any;
+    /** Visual variant for the toggle */
+    variant?: 'primary' | 'secondary';
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Whether this is a live field */
+    isLiveField?: boolean;
+    /** Message to display below the toggle */
+    message?: string;
+    /** Type of message to display */
+    messageType?: "success" | "error" | "info" | "default";
+    /** Additional CSS classes for the wrapper container */
+    wrapperClassName?: string;
+    /** Help text to display below the label */
+    helpText?: string;
+    /** Size variant for the toggle */
+    size?: "small" | "medium" | "large";
+    /** Custom render function for AI extracted indicator */
+    renderAiExtractedIndicator?: () => ReactNode;
+    /** Custom render function for labels/tags */
+    renderLabels?: (labels?: (string | LabelType)[]) => ReactNode;
+    /** Custom render function for required indicator */
+    renderRequired?: (isConditional: boolean) => ReactNode;
+    /** Custom render function for tooltip */
+    renderTooltip?: (tooltip: string) => ReactNode;
+    /** Custom render function for live field icon */
+    renderLiveFieldIcon?: () => ReactNode;
+    /** Custom render function for GTN add to document button */
+    renderGTNAddButton?: (onClick: () => void) => ReactNode;
+    /** Handler for adding GTN to document */
+    onAddGTNToDocument?: (keyValuePair: {
+        key: string;
+        value: string;
+    }) => void;
 }
 /**
  * A highly customizable toggle component with label, validation, and styling support.
- * Features multiple sizes, variants, icon support, and comprehensive prop support.
+ * Features multiple sizes, variants, icon support, GTN integration, and comprehensive prop support.
  *
  * @example
  * ```tsx
  * <Toggle
  *   id="notifications"
  *   label="Enable Notifications"
- *   checked={notificationsEnabled}
+ *   isChecked={notificationsEnabled}
  *   onChange={(checked) => setNotificationsEnabled(checked)}
  *   required
  * />

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

@@ -21,7 +21,9 @@ export type { DebounceInputFieldProps } from "./components/forms/debounce-input/
 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 type { ToggleProps } from "./components/forms/toggle/Toggle";
+export { TOGGLE_LABEL_DIRECTION } from "./constants/toggle";
+export type { TToggleDirection } from "./constants/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";