@datarecce/ui 0.1.41 → 0.2.1

package/dist/primitives-DDfv2i13.d.ts

@@ -0,0 +1,1076 @@
+
+import { B as LineageViewRef } from "./SplitPane-DdIE_DA1.js";
+import * as react26 from "react";
+import { ReactNode } from "react";
+import * as react_jsx_runtime40 from "react/jsx-runtime";
+import { BoxProps } from "@mui/material/Box";
+import { SplitProps } from "react-split";
+
+//#region src/components/check/CheckBreadcrumb.d.ts
+/**
+ * Props for the CheckBreadcrumb component
+ */
+interface CheckBreadcrumbProps {
+  /** Current name value */
+  name: string;
+  /** Callback when name is saved */
+  onNameChange?: (name: string) => void;
+  /** Placeholder text when empty */
+  placeholder?: string;
+  /** Whether editing is disabled */
+  disabled?: boolean;
+  /** Optional CSS class name */
+  className?: string;
+}
+/**
+ * CheckBreadcrumb Component
+ *
+ * A pure presentation component for displaying and editing a check name inline.
+ * Supports click-to-edit behavior with Enter to save and Escape to cancel.
+ * Also commits changes when clicking outside the input.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { CheckBreadcrumb } from '@datarecce/ui/primitives';
+ *
+ * function CheckHeader({ check }) {
+ *   return (
+ *     <CheckBreadcrumb
+ *       name={check.name}
+ *       onNameChange={(name) => updateCheck(check.id, { name })}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <CheckBreadcrumb
+ *   name={check.name}
+ *   disabled
+ *   placeholder="Unnamed check"
+ * />
+ * ```
+ *
+ * @example With placeholder
+ * ```tsx
+ * <CheckBreadcrumb
+ *   name=""
+ *   placeholder="Enter check name..."
+ *   onNameChange={(name) => updateCheck(check.id, { name })}
+ * />
+ * ```
+ */
+declare function CheckBreadcrumbComponent({
+  name,
+  onNameChange,
+  placeholder,
+  disabled,
+  className
+}: CheckBreadcrumbProps): react_jsx_runtime40.JSX.Element;
+declare const CheckBreadcrumb: react26.MemoExoticComponent<typeof CheckBreadcrumbComponent>;
+//#endregion
+//#region src/components/check/LineageDiffView.d.ts
+/**
+ * View options for lineage diff checks
+ */
+interface LineageDiffViewOptions {
+  view_mode?: "changed_models" | "all";
+  node_ids?: string[];
+  select?: string;
+  exclude?: string;
+  packages?: string[];
+  column_level_lineage?: {
+    node_id?: string;
+    column?: string;
+    change_analysis?: boolean;
+  };
+}
+/**
+ * Props for the LineageDiffView component
+ */
+interface LineageDiffViewProps {
+  /**
+   * Parameters from the check, merged with view options
+   */
+  params?: Record<string, unknown>;
+  /**
+   * View options for the lineage display
+   */
+  viewOptions?: LineageDiffViewOptions;
+  /**
+   * Whether the view is interactive (allows user input)
+   * @default false
+   */
+  interactive?: boolean;
+  /**
+   * Optional height for the view
+   */
+  height?: number | string;
+  /**
+   * Optional dagre instance for layout
+   */
+  dagre?: any;
+}
+declare const LineageDiffView: react26.ForwardRefExoticComponent<LineageDiffViewProps & react26.RefAttributes<LineageViewRef>>;
+//#endregion
+//#region src/components/check/PresetCheckTemplateView.d.ts
+/**
+ * Props for generating a preset check template
+ */
+interface GenerateCheckTemplateOptions {
+  /** Check name */
+  name: string;
+  /** Check description */
+  description: string;
+  /** Check type (e.g., "row_count_diff", "schema_diff") */
+  type: string;
+  /** Check parameters */
+  params: Record<string, unknown>;
+  /** View options (optional) */
+  viewOptions?: Record<string, unknown>;
+}
+/**
+ * Generates a YAML template for a preset check configuration.
+ * This can be used to export checks to recce.yml.
+ *
+ * @example
+ * ```ts
+ * const template = generateCheckTemplate({
+ *   name: "Schema Check",
+ *   description: "Check for schema changes",
+ *   type: "schema_diff",
+ *   params: { select: "state:modified" },
+ * });
+ * // Returns:
+ * // checks:
+ * //   - name: Schema Check
+ * //     description: Check for schema changes
+ * //     type: schema_diff
+ * //     params:
+ * //       select: state:modified
+ * ```
+ */
+declare function generateCheckTemplate({
+  name,
+  description,
+  type,
+  params,
+  viewOptions
+}: GenerateCheckTemplateOptions): string;
+/**
+ * Props for the PresetCheckTemplateView component
+ */
+interface PresetCheckTemplateViewProps {
+  /** The YAML template string to display */
+  yamlTemplate: string;
+  /** Optional height for the editor */
+  height?: string;
+}
+/**
+ * PresetCheckTemplateView Component
+ *
+ * A presentation component for displaying a preset check YAML template
+ * in a read-only code editor. Used in modals to show users how to
+ * add checks to their recce.yml file.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { PresetCheckTemplateView, generateCheckTemplate } from '@datarecce/ui/primitives';
+ *
+ * function CheckTemplateDialog({ check }) {
+ *   const template = generateCheckTemplate({
+ *     name: check.name,
+ *     description: check.description,
+ *     type: check.type,
+ *     params: check.params,
+ *   });
+ *
+ *   return (
+ *     <Dialog open>
+ *       <DialogContent>
+ *         <PresetCheckTemplateView yamlTemplate={template} />
+ *       </DialogContent>
+ *     </Dialog>
+ *   );
+ * }
+ * ```
+ */
+declare function PresetCheckTemplateViewComponent({
+  yamlTemplate,
+  height
+}: PresetCheckTemplateViewProps): react_jsx_runtime40.JSX.Element;
+declare const PresetCheckTemplateView: react26.MemoExoticComponent<typeof PresetCheckTemplateViewComponent>;
+//#endregion
+//#region src/components/check/timeline/CommentInput.d.ts
+/**
+ * Props for the CommentInput component
+ */
+interface CommentInputProps {
+  /** Callback when comment is submitted */
+  onSubmit: (content: string) => void;
+  /** Whether submission is in progress */
+  isSubmitting?: boolean;
+  /** Placeholder text for the input */
+  placeholder?: string;
+  /** Button text (defaults to "Comment") */
+  submitLabel?: string;
+  /** Submitting button text (defaults to "Submitting...") */
+  submittingLabel?: string;
+  /** Optional CSS class name */
+  className?: string;
+}
+/**
+ * CommentInput Component
+ *
+ * A pure presentation component for adding comments to a timeline.
+ * Supports Cmd+Enter (Mac) or Ctrl+Enter (Windows) keyboard shortcut to submit.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { CommentInput } from '@datarecce/ui/primitives';
+ *
+ * function CheckTimeline({ checkId }) {
+ *   const [isSubmitting, setIsSubmitting] = useState(false);
+ *
+ *   const handleSubmit = async (content: string) => {
+ *     setIsSubmitting(true);
+ *     await addComment(checkId, content);
+ *     setIsSubmitting(false);
+ *   };
+ *
+ *   return (
+ *     <CommentInput
+ *       onSubmit={handleSubmit}
+ *       isSubmitting={isSubmitting}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example Custom labels
+ * ```tsx
+ * <CommentInput
+ *   onSubmit={handleSubmit}
+ *   placeholder="Leave feedback..."
+ *   submitLabel="Send"
+ *   submittingLabel="Sending..."
+ * />
+ * ```
+ */
+declare function CommentInputComponent({
+  onSubmit,
+  isSubmitting,
+  placeholder,
+  submitLabel,
+  submittingLabel,
+  className
+}: CommentInputProps): react_jsx_runtime40.JSX.Element;
+declare const CommentInput: react26.MemoExoticComponent<typeof CommentInputComponent>;
+//#endregion
+//#region src/components/check/timeline/TimelineEvent.d.ts
+/**
+ * Actor information for timeline events
+ */
+interface TimelineActor {
+  /** User ID */
+  user_id?: string | number;
+  /** Full name of the actor */
+  fullname?: string;
+  /** Login/username of the actor */
+  login?: string;
+  /** Avatar URL (props-driven, consumer provides) */
+  avatarUrl?: string;
+}
+/**
+ * Event types supported by the timeline
+ */
+type TimelineEventType = "check_created" | "comment" | "approval_change" | "description_change" | "name_change" | "preset_applied";
+/**
+ * Timeline event data structure
+ */
+interface TimelineEventData {
+  /** Unique event ID */
+  id: string;
+  /** Type of event */
+  event_type: TimelineEventType;
+  /** Actor who performed the event */
+  actor: TimelineActor;
+  /** Event creation timestamp (ISO string) */
+  created_at: string;
+  /** Event content (for comments) */
+  content?: string;
+  /** New value (for change events) */
+  new_value?: string;
+  /** Whether the event was edited */
+  is_edited?: boolean;
+  /** Whether the event was deleted */
+  is_deleted?: boolean;
+}
+/**
+ * Props for the TimelineEvent component
+ */
+interface TimelineEventProps {
+  /** Event data to render */
+  event: TimelineEventData;
+  /** Current user ID (to show edit/delete for own comments) */
+  currentUserId?: string;
+  /** Callback when editing a comment */
+  onEdit?: (eventId: string, content: string) => Promise<void>;
+  /** Callback when deleting a comment */
+  onDelete?: (eventId: string) => Promise<void>;
+  /** Optional markdown renderer component */
+  markdownRenderer?: React.ComponentType<{
+    content: string;
+  }>;
+  /** Optional CSS class name */
+  className?: string;
+}
+/**
+ * TimelineEvent Component
+ *
+ * A pure presentation component for rendering timeline events.
+ * Supports different event types including comments with edit/delete functionality.
+ *
+ * @example Basic usage with state change events
+ * ```tsx
+ * import { TimelineEvent } from '@datarecce/ui/primitives';
+ *
+ * function CheckTimeline({ events }) {
+ *   return (
+ *     <div>
+ *       {events.map(event => (
+ *         <TimelineEvent key={event.id} event={event} />
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example With comment editing
+ * ```tsx
+ * <TimelineEvent
+ *   event={commentEvent}
+ *   currentUserId={currentUser.id}
+ *   onEdit={async (eventId, content) => {
+ *     await updateComment(eventId, content);
+ *   }}
+ *   onDelete={async (eventId) => {
+ *     await deleteComment(eventId);
+ *   }}
+ * />
+ * ```
+ *
+ * @example With custom markdown renderer
+ * ```tsx
+ * import { MarkdownContent } from '@/components/ui/markdown/MarkdownContent';
+ *
+ * <TimelineEvent
+ *   event={event}
+ *   markdownRenderer={({ content }) => (
+ *     <MarkdownContent content={content} fontSize="sm" />
+ *   )}
+ * />
+ * ```
+ */
+declare function TimelineEventComponent({
+  event,
+  currentUserId,
+  onEdit,
+  onDelete,
+  markdownRenderer,
+  className
+}: TimelineEventProps): react_jsx_runtime40.JSX.Element;
+declare const TimelineEvent: react26.MemoExoticComponent<typeof TimelineEventComponent>;
+//#endregion
+//#region src/components/check/utils.d.ts
+/**
+ * Utility functions for check components
+ */
+/**
+ * Build a title string for a check with optional approval indicator
+ *
+ * @example
+ * ```ts
+ * const title = buildCheckTitle({ name: "Schema check", isChecked: true });
+ * // Returns: "✅ Schema check"
+ * ```
+ */
+declare function buildCheckTitle({
+  name,
+  isChecked
+}: {
+  name: string;
+  isChecked?: boolean;
+}): string;
+/**
+ * Build a description string with fallback for empty descriptions
+ *
+ * @example
+ * ```ts
+ * const desc = buildCheckDescription({ description: "" });
+ * // Returns: "_(no description)_"
+ * ```
+ */
+declare function buildCheckDescription({
+  description,
+  fallback
+}: {
+  description?: string | null;
+  fallback?: string;
+}): string;
+/**
+ * Check if a run result is missing or has an error
+ *
+ * Certain check types (schema_diff, lineage_diff) don't require results
+ * to enable approval functionality.
+ *
+ * @example
+ * ```ts
+ * const disabled = isDisabledByNoResult({
+ *   type: "row_count_diff",
+ *   hasResult: false,
+ *   hasError: false,
+ * });
+ * // Returns: true
+ *
+ * const enabled = isDisabledByNoResult({
+ *   type: "schema_diff",
+ *   hasResult: false,
+ *   hasError: false,
+ * });
+ * // Returns: false (schema_diff doesn't require results)
+ * ```
+ */
+declare function isDisabledByNoResult({
+  type,
+  hasResult,
+  hasError
+}: {
+  type: string;
+  hasResult: boolean;
+  hasError: boolean;
+}): boolean;
+/**
+ * Format SQL as a markdown code block
+ *
+ * @example
+ * ```ts
+ * const markdown = formatSqlAsMarkdown({ sql: "SELECT * FROM users" });
+ * // Returns:
+ * // **SQL**
+ * // ```sql
+ * // SELECT * FROM users
+ * // ```
+ * ```
+ */
+declare function formatSqlAsMarkdown({
+  sql,
+  label
+}: {
+  sql: string;
+  label?: string;
+}): string;
+//#endregion
+//#region src/components/editor/CodeEditor.d.ts
+/**
+ * Supported languages for the code editor
+ */
+type CodeEditorLanguage = "sql" | "yaml" | "text";
+/**
+ * Theme options for the code editor
+ */
+type CodeEditorTheme = "light" | "dark";
+/**
+ * Props for the CodeEditor component
+ */
+interface CodeEditorProps {
+  /** The code content to display */
+  value: string;
+  /** Callback when content changes */
+  onChange?: (value: string) => void;
+  /** Language for syntax highlighting */
+  language?: CodeEditorLanguage;
+  /** Whether editor is read-only */
+  readOnly?: boolean;
+  /** Show line numbers */
+  lineNumbers?: boolean;
+  /** Enable word wrap */
+  wordWrap?: boolean;
+  /** Font size in pixels */
+  fontSize?: number;
+  /** Editor height */
+  height?: string;
+  /** Optional CSS class */
+  className?: string;
+  /** Theme mode */
+  theme?: CodeEditorTheme;
+  /** Custom keyboard shortcuts */
+  keyBindings?: Array<{
+    key: string;
+    run: () => boolean;
+  }>;
+}
+/**
+ * CodeEditor Component
+ *
+ * A code editor component using CodeMirror with React integration.
+ * Supports SQL and YAML syntax highlighting with customizable theming.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { CodeEditor } from '@datarecce/ui/primitives';
+ *
+ * function SqlEditor({ sql, onSqlChange }) {
+ *   return (
+ *     <CodeEditor
+ *       value={sql}
+ *       onChange={onSqlChange}
+ *       language="sql"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example Read-only with dark theme
+ * ```tsx
+ * <CodeEditor
+ *   value={yamlContent}
+ *   language="yaml"
+ *   readOnly
+ *   theme="dark"
+ *   height="300px"
+ * />
+ * ```
+ *
+ * @example With custom key bindings
+ * ```tsx
+ * const keyBindings = [
+ *   { key: "Mod-Enter", run: () => { handleSubmit(); return true; } }
+ * ];
+ *
+ * <CodeEditor
+ *   value={sql}
+ *   onChange={setSql}
+ *   language="sql"
+ *   keyBindings={keyBindings}
+ * />
+ * ```
+ */
+declare function CodeEditor({
+  value,
+  onChange,
+  language,
+  readOnly,
+  lineNumbers,
+  wordWrap,
+  fontSize,
+  height,
+  className,
+  theme,
+  keyBindings
+}: CodeEditorProps): react_jsx_runtime40.JSX.Element;
+//#endregion
+//#region src/components/ui/ChangedOnlyCheckbox.d.ts
+interface ChangedOnlyCheckboxProps {
+  /** Whether the changed-only filter is enabled */
+  changedOnly?: boolean;
+  /** Callback when the checkbox state changes */
+  onChange: () => void;
+}
+/**
+ * A checkbox component for filtering diff results to show only changed rows.
+ *
+ * @example
+ * ```tsx
+ * <ChangedOnlyCheckbox
+ *   changedOnly={viewOptions.changed_only}
+ *   onChange={() => setChangedOnly(!viewOptions.changed_only)}
+ * />
+ * ```
+ */
+declare function ChangedOnlyCheckbox({
+  changedOnly,
+  onChange
+}: ChangedOnlyCheckboxProps): react_jsx_runtime40.JSX.Element;
+//#endregion
+//#region src/components/ui/DiffDisplayModeSwitch.d.ts
+type DiffDisplayMode = "inline" | "side_by_side";
+interface DiffDisplayModeSwitchProps {
+  /** Current display mode */
+  displayMode: DiffDisplayMode;
+  /** Callback when display mode changes */
+  onDisplayModeChanged: (displayMode: DiffDisplayMode) => void;
+}
+/**
+ * A switch component for toggling between inline and side-by-side diff display modes.
+ *
+ * When in inline mode, also shows color legend (Base = red, Current = green).
+ *
+ * @example
+ * ```tsx
+ * <DiffDisplayModeSwitch
+ *   displayMode="inline"
+ *   onDisplayModeChanged={(mode) => setDisplayMode(mode)}
+ * />
+ * ```
+ */
+declare function DiffDisplayModeSwitch({
+  displayMode,
+  onDisplayModeChanged
+}: DiffDisplayModeSwitchProps): react_jsx_runtime40.JSX.Element;
+//#endregion
+//#region src/components/ui/DiffText.d.ts
+/**
+ * Props for the DiffText component
+ */
+interface DiffTextProps {
+  /** The text value to display */
+  value: string;
+  /** Color palette for the diff indicator */
+  colorPalette: "red" | "green";
+  /** Whether to gray out the text (for null/missing values) */
+  grayOut?: boolean;
+  /** Hide the copy button */
+  noCopy?: boolean;
+  /** Custom font size */
+  fontSize?: string;
+  /**
+   * Callback when copy button is clicked.
+   * If provided, the component will use this for copy functionality.
+   * If not provided, uses navigator.clipboard.writeText.
+   */
+  onCopy?: (value: string) => void;
+}
+/**
+ * DiffText Component
+ *
+ * Displays a text value with diff styling (red for removed, green for added).
+ * Includes an optional copy-to-clipboard button on hover.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { DiffText } from '@datarecce/ui';
+ *
+ * // Show a value that was added (green)
+ * <DiffText value="new_value" colorPalette="green" />
+ *
+ * // Show a value that was removed (red)
+ * <DiffText value="old_value" colorPalette="red" />
+ * ```
+ *
+ * @example With custom copy callback
+ * ```tsx
+ * <DiffText
+ *   value="copy_me"
+ *   colorPalette="green"
+ *   onCopy={(value) => {
+ *     navigator.clipboard.writeText(value);
+ *     showToast(`${value} copied!`);
+ *   }}
+ * />
+ * ```
+ *
+ * @example Grayed out (null value)
+ * ```tsx
+ * <DiffText value="null" colorPalette="red" grayOut />
+ * ```
+ */
+declare function DiffText({
+  value,
+  colorPalette,
+  grayOut,
+  noCopy,
+  fontSize,
+  onCopy
+}: DiffTextProps): react_jsx_runtime40.JSX.Element;
+//#endregion
+//#region src/components/ui/DiffTextWithToast.d.ts
+type DiffTextWithToastProps = Omit<DiffTextProps, "onCopy">;
+/**
+ * DiffText component with automatic copy-to-clipboard toast notifications.
+ *
+ * This is a convenience wrapper around the base DiffText component that adds
+ * the toast notification behavior. Use this when you want the "batteries included"
+ * experience with copy feedback.
+ *
+ * @example
+ * ```tsx
+ * // Shows toast when user clicks copy icon
+ * <DiffTextWithToast base="old value" current="new value" />
+ * ```
+ */
+declare function DiffTextWithToast(props: DiffTextWithToastProps): react_jsx_runtime40.JSX.Element;
+//#endregion
+//#region src/components/ui/DropdownValuesInput.d.ts
+/**
+ * @file DropdownValuesInput.tsx
+ * @description Multi-select dropdown input component with filtering and custom value support
+ *
+ * Features:
+ * - Dropdown menu with suggestion list
+ * - Filter/search functionality (case-insensitive)
+ * - Chip-based value display with removal
+ * - Keyboard navigation (Enter, comma, Backspace)
+ * - Custom value addition
+ * - Configurable size variants
+ */
+/**
+ * Size variants for the dropdown input
+ */
+type DropdownValuesInputSize = "2xs" | "xs" | "sm" | "md" | "lg";
+/**
+ * Props for the DropdownValuesInput component
+ */
+interface DropdownValuesInputProps {
+  /** Unit name for pluralization in "X {unitName}s selected" display */
+  unitName: string;
+  /** List of suggested values to show in dropdown */
+  suggestionList?: string[];
+  /** Initial selected values */
+  defaultValues?: string[];
+  /** Callback when selected values change */
+  onValuesChange: (values: string[]) => void;
+  /** Optional CSS class name */
+  className?: string;
+  /** Size variant for the input */
+  size?: DropdownValuesInputSize;
+  /** Width of the input (CSS value or number in pixels) */
+  width?: string | number;
+  /** Placeholder text when no values are selected */
+  placeholder?: string;
+  /** Whether the input is disabled */
+  disabled?: boolean;
+}
+/**
+ * A multi-select dropdown input component for selecting multiple values.
+ *
+ * Provides a dropdown menu with suggestion list, filtering, and the ability
+ * to add custom values. Selected values are displayed as chips that can be
+ * removed individually.
+ *
+ * @example
+ * ```tsx
+ * <DropdownValuesInput
+ *   unitName="key"
+ *   suggestionList={["id", "name", "email"]}
+ *   defaultValues={["id"]}
+ *   onValuesChange={(values) => console.log(values)}
+ *   placeholder="Select or type to add keys"
+ *   size="sm"
+ *   width={240}
+ * />
+ * ```
+ */
+declare const DropdownValuesInput: (props: DropdownValuesInputProps) => react_jsx_runtime40.JSX.Element;
+//#endregion
+//#region src/components/ui/ExternalLinkConfirmDialog.d.ts
+/**
+ * Props for ExternalLinkConfirmDialog
+ */
+interface ExternalLinkConfirmDialogProps {
+  /** Whether the dialog is open */
+  isOpen: boolean;
+  /** The external URL the user is trying to navigate to */
+  url: string;
+  /** Callback when user confirms navigation */
+  onConfirm: () => void;
+  /** Callback when user cancels navigation */
+  onCancel: () => void;
+}
+/**
+ * Truncate a URL for display, keeping the domain visible
+ */
+declare function truncateUrl(url: string, maxLength?: number): string;
+/**
+ * ExternalLinkConfirmDialog Component
+ *
+ * A dialog that asks users to confirm before navigating to external URLs.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { ExternalLinkConfirmDialog } from '@datarecce/ui/primitives';
+ *
+ * function MyComponent() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *   const [pendingUrl, setPendingUrl] = useState('');
+ *
+ *   return (
+ *     <ExternalLinkConfirmDialog
+ *       isOpen={isOpen}
+ *       url={pendingUrl}
+ *       onConfirm={() => {
+ *         window.open(pendingUrl, '_blank');
+ *         setIsOpen(false);
+ *       }}
+ *       onCancel={() => setIsOpen(false)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function ExternalLinkConfirmDialog({
+  isOpen,
+  url,
+  onConfirm,
+  onCancel
+}: ExternalLinkConfirmDialogProps): react_jsx_runtime40.JSX.Element;
+//#endregion
+//#region src/components/ui/MarkdownContent.d.ts
+/**
+ * Props for MarkdownContent component
+ */
+interface MarkdownContentProps {
+  /** The markdown content to render */
+  content: string;
+  /** Font size for the rendered content */
+  fontSize?: string;
+  /** Additional domains to treat as internal (not showing confirmation) */
+  internalDomains?: string[];
+}
+/**
+ * MarkdownContent Component
+ *
+ * A component for rendering GitHub-flavored Markdown with syntax highlighting
+ * and external link confirmation.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { MarkdownContent } from '@datarecce/ui/primitives';
+ *
+ * function Description({ text }) {
+ *   return <MarkdownContent content={text} />;
+ * }
+ * ```
+ *
+ * @example With custom font size
+ * ```tsx
+ * <MarkdownContent content={markdown} fontSize="1rem" />
+ * ```
+ *
+ * @example With additional internal domains
+ * ```tsx
+ * <MarkdownContent
+ *   content={markdown}
+ *   internalDomains={['company.com', 'docs.company.com']}
+ * />
+ * ```
+ */
+declare function MarkdownContent({
+  content,
+  fontSize,
+  internalDomains
+}: MarkdownContentProps): react_jsx_runtime40.JSX.Element;
+//#endregion
+//#region src/components/ui/ScreenshotBox.d.ts
+interface ScreenshotBoxProps extends BoxProps {
+  /** Background color for the screenshot area */
+  backgroundColor?: string;
+  /** Block size (height in block direction) */
+  blockSize?: string;
+  /** Content to render inside the screenshot area */
+  children?: React.ReactNode;
+}
+/**
+ * A container component that can be captured as a screenshot.
+ *
+ * The component forwards its ref to the outer container, allowing parent
+ * components to capture the element using html-to-image or similar libraries.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<HTMLDivElement>(null);
+ *
+ * const captureScreenshot = async () => {
+ *   if (ref.current) {
+ *     const dataUrl = await toPng(ref.current);
+ *     // Use dataUrl...
+ *   }
+ * };
+ *
+ * return (
+ *   <ScreenshotBox ref={ref} backgroundColor="white">
+ *     <Chart data={data} />
+ *   </ScreenshotBox>
+ * );
+ * ```
+ */
+declare const ScreenshotBox: react26.ForwardRefExoticComponent<Omit<ScreenshotBoxProps, "ref"> & react26.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/ui/Split.d.ts
+/**
+ * Props for HSplit and VSplit components
+ *
+ * These components provide backward-compatible wrappers around SplitPane,
+ * accepting the same props as react-split's SplitProps.
+ */
+type SplitProps$1 = SplitProps;
+/**
+ * Horizontal Split Component
+ *
+ * A convenience wrapper around SplitPane that creates a horizontal (left-right) split.
+ * Maintains backward compatibility with react-split's SplitProps interface.
+ *
+ * @example Basic horizontal split
+ * ```tsx
+ * import { HSplit } from '@datarecce/ui';
+ *
+ * function TwoColumnLayout() {
+ *   return (
+ *     <HSplit sizes={[30, 70]} minSize={100}>
+ *       <div>Left Panel</div>
+ *       <div>Right Panel</div>
+ *     </HSplit>
+ *   );
+ * }
+ * ```
+ *
+ * @example With custom styling
+ * ```tsx
+ * <HSplit
+ *   sizes={[20, 80]}
+ *   minSize={50}
+ *   style={{ height: "100%" }}
+ * >
+ *   <nav>Navigation</nav>
+ *   <main>Content</main>
+ * </HSplit>
+ * ```
+ */
+declare function HSplit(props: SplitProps$1): react_jsx_runtime40.JSX.Element;
+/**
+ * Vertical Split Component
+ *
+ * A convenience wrapper around SplitPane that creates a vertical (top-bottom) split.
+ * Maintains backward compatibility with react-split's SplitProps interface.
+ *
+ * @example Basic vertical split
+ * ```tsx
+ * import { VSplit } from '@datarecce/ui';
+ *
+ * function TwoRowLayout() {
+ *   return (
+ *     <VSplit sizes={[60, 40]} minSize={100}>
+ *       <div>Top Panel</div>
+ *       <div>Bottom Panel</div>
+ *     </VSplit>
+ *   );
+ * }
+ * ```
+ *
+ * @example Nested splits
+ * ```tsx
+ * <HSplit sizes={[30, 70]}>
+ *   <div>Sidebar</div>
+ *   <VSplit sizes={[70, 30]}>
+ *     <div>Main Content</div>
+ *     <div>Footer</div>
+ *   </VSplit>
+ * </HSplit>
+ * ```
+ */
+declare function VSplit(props: SplitProps$1): react_jsx_runtime40.JSX.Element;
+//#endregion
+//#region src/components/ui/Toaster.d.ts
+/**
+ * Toast types and interfaces
+ */
+interface ToastOptions {
+  id?: string;
+  title?: string;
+  description?: ReactNode;
+  type?: "success" | "error" | "warning" | "info" | "loading";
+  duration?: number;
+  closable?: boolean;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+interface ToasterContextValue {
+  toast: (options: ToastOptions) => string;
+  success: (options: Omit<ToastOptions, "type">) => string;
+  error: (options: Omit<ToastOptions, "type">) => string;
+  warning: (options: Omit<ToastOptions, "type">) => string;
+  info: (options: Omit<ToastOptions, "type">) => string;
+  loading: (options: Omit<ToastOptions, "type">) => string;
+  dismiss: (id: string) => void;
+  update: (id: string, options: Partial<ToastOptions>) => void;
+}
+/**
+ * Simple toaster implementation using MUI Snackbar
+ */
+declare function ToasterProvider({
+  children
+}: {
+  children: ReactNode;
+}): react_jsx_runtime40.JSX.Element;
+/**
+ * Hook to use the toaster
+ */
+declare function useToaster(): ToasterContextValue;
+/**
+ * Standalone toaster instance for use outside React context
+ * Uses a simple event-based system
+ */
+interface ToastEvent {
+  type: "create" | "dismiss" | "update";
+  options?: ToastOptions;
+  id?: string;
+}
+declare const toaster: {
+  create: (options: ToastOptions) => string;
+  success: (options: Omit<ToastOptions, "type">) => string;
+  error: (options: Omit<ToastOptions, "type">) => string;
+  warning: (options: Omit<ToastOptions, "type">) => string;
+  info: (options: Omit<ToastOptions, "type">) => string;
+  loading: (options: Omit<ToastOptions, "type">) => string;
+  dismiss: (id: string) => void;
+  remove: (id: string) => void;
+  update: (id: string, options: Partial<ToastOptions>) => void;
+  subscribe: (listener: (event: ToastEvent) => void) => () => boolean;
+};
+/**
+ * Toaster component that renders toasts from the standalone toaster
+ */
+declare function Toaster(): react_jsx_runtime40.JSX.Element;
+//#endregion
+//#region src/components/ui/ToggleSwitch.d.ts
+interface ToggleSwitchProps {
+  /** Current toggle state */
+  value: boolean;
+  /** Callback when toggle state changes */
+  onChange: (value: boolean) => void;
+  /** Label for the "on" state */
+  textOn?: string;
+  /** Label for the "off" state */
+  textOff?: string;
+}
+/**
+ * A toggle switch component that allows switching between two values.
+ *
+ * @example
+ * ```tsx
+ * <ToggleSwitch
+ *   value={isEnabled}
+ *   onChange={setIsEnabled}
+ *   textOff="Inline"
+ *   textOn="Side by side"
+ * />
+ * ```
+ */
+declare function ToggleSwitch({
+  value,
+  onChange,
+  textOn,
+  textOff
+}: ToggleSwitchProps): react_jsx_runtime40.JSX.Element;
+//#endregion
+//#region src/primitives.d.ts
+/**
+ * Version marker for the primitives surface.
+ */
+declare const PRIMITIVES_API_VERSION = "0.1.0";
+//#endregion
+export { CheckBreadcrumb as $, ChangedOnlyCheckboxProps as A, TimelineEvent as B, DiffTextWithToastProps as C, DiffDisplayModeSwitch as D, DiffDisplayMode as E, buildCheckDescription as F, CommentInputProps as G, TimelineEventProps as H, buildCheckTitle as I, PresetCheckTemplateViewProps as J, GenerateCheckTemplateOptions as K, formatSqlAsMarkdown as L, CodeEditorLanguage as M, CodeEditorProps as N, DiffDisplayModeSwitchProps as O, CodeEditorTheme as P, LineageDiffViewProps as Q, isDisabledByNoResult as R, DiffTextWithToast as S, DiffTextProps as T, TimelineEventType as U, TimelineEventData as V, CommentInput as W, LineageDiffView as X, generateCheckTemplate as Y, LineageDiffViewOptions as Z, ExternalLinkConfirmDialogProps as _, Toaster as a, DropdownValuesInputProps as b, useToaster as c, VSplit as d, CheckBreadcrumbProps as et, ScreenshotBox as f, ExternalLinkConfirmDialog as g, MarkdownContentProps as h, ToastOptions as i, CodeEditor as j, ChangedOnlyCheckbox as k, HSplit as l, MarkdownContent as m, ToggleSwitch as n, ToasterProvider as o, ScreenshotBoxProps as p, PresetCheckTemplateView as q, ToggleSwitchProps as r, toaster as s, PRIMITIVES_API_VERSION as t, SplitProps$1 as u, truncateUrl as v, DiffText as w, DropdownValuesInputSize as x, DropdownValuesInput as y, TimelineActor as z };
+//# sourceMappingURL=primitives-DDfv2i13.d.ts.map