@datarecce/ui 0.1.41 → 0.2.0

package/dist/primitives-CgGUvwHB.d.ts

@@ -0,0 +1,914 @@
+
+import { B as LineageViewRef } from "./SplitPane-B-BLxZaQ.js";
+import * as react30 from "react";
+import * as react_jsx_runtime42 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_runtime42.JSX.Element;
+declare const CheckBreadcrumb: react30.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: react30.ForwardRefExoticComponent<LineageDiffViewProps & react30.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_runtime42.JSX.Element;
+declare const PresetCheckTemplateView: react30.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_runtime42.JSX.Element;
+declare const CommentInput: react30.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_runtime42.JSX.Element;
+declare const TimelineEvent: react30.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_runtime42.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_runtime42.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_runtime42.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_runtime42.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_runtime42.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: react30.ForwardRefExoticComponent<Omit<ScreenshotBoxProps, "ref"> & react30.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_runtime42.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_runtime42.JSX.Element;
+//#endregion
+//#region src/primitives.d.ts
+/**
+ * Version marker for the primitives surface.
+ */
+declare const PRIMITIVES_API_VERSION = "0.1.0";
+//#endregion
+export { CommentInput as A, CheckBreadcrumbProps as B, formatSqlAsMarkdown as C, TimelineEventData as D, TimelineEvent as E, generateCheckTemplate as F, LineageDiffView as I, LineageDiffViewOptions as L, GenerateCheckTemplateOptions as M, PresetCheckTemplateView as N, TimelineEventProps as O, PresetCheckTemplateViewProps as P, LineageDiffViewProps as R, buildCheckTitle as S, TimelineActor as T, CodeEditor as _, ScreenshotBox as a, CodeEditorTheme as b, MarkdownContentProps as c, truncateUrl as d, DropdownValuesInput as f, DiffTextProps as g, DiffText as h, VSplit as i, CommentInputProps as j, TimelineEventType as k, ExternalLinkConfirmDialog as l, DropdownValuesInputSize as m, HSplit as n, ScreenshotBoxProps as o, DropdownValuesInputProps as p, SplitProps$1 as r, MarkdownContent as s, PRIMITIVES_API_VERSION as t, ExternalLinkConfirmDialogProps as u, CodeEditorLanguage as v, isDisabledByNoResult as w, buildCheckDescription as x, CodeEditorProps as y, CheckBreadcrumb as z };
+//# sourceMappingURL=primitives-CgGUvwHB.d.ts.map