@gradio/row

import Row from "@gradio/row";

<script>
  import Row from "@gradio/row";
</script>

<script>
  import Row from "@gradio/row";
  import Button from "some-button-component";
</script>

<!-- Basic horizontal layout -->
<Row>
  <Button>Save</Button>
  <Button>Cancel</Button>
  <Button>Delete</Button>
</Row>

<!-- Row with equal height disabled and custom styling -->
<Row 
  equal_height={false}
  variant="panel"
  elem_id="action-row"
  elem_classes={["my-custom-row", "highlighted"]}
>
  <Button size="lg">Primary Action</Button>
  <Button size="sm">Secondary</Button>
</Row>

/**
 * Row component props (Svelte component)
 * These are the props accepted by the Row component
 */
type RowComponentProps = {
  /** Controls whether child elements have equal height distribution (default: true) */
  equal_height?: boolean;
  /** HTML element ID for the row container */
  elem_id?: string;
  /** Array of CSS class names applied to the row container (default: []) */
  elem_classes?: string[];
  /** Controls visibility of the row component (default: true) */
  visible?: boolean;
  /** Visual style variant for the row layout (default: "default") */
  variant?: "default" | "panel" | "compact";
  /** Loading status object for progress tracking and status display */
  loading_status?: LoadingStatus | undefined;
  /** Gradio application instance for framework integration */
  gradio?: Gradio | undefined;
  /** Controls whether to display loading progress indicator (default: false) */
  show_progress?: boolean;
  /** Fixed height value for the row container */
  height?: number | string | undefined;
  /** Minimum height constraint for the row container */
  min_height?: number | string | undefined;
  /** Maximum height constraint for the row container */
  max_height?: number | string | undefined;
  /** Flex-grow scale factor for responsive layout (default: null) */
  scale?: number | null;
};

<!-- Compact variant with custom dimensions -->
<Row 
  variant="compact"
  height="60px"
  min_height="40px"
  scale={2}
>
  <input type="text" placeholder="Search..." />
  <button>Go</button>
</Row>

<!-- Panel variant with loading status -->
<Row 
  variant="panel"
  {loading_status}
  {gradio}
  show_progress={true}
  visible={!isHidden}
>
  <slot name="content" />
</Row>

<!-- Unequal height layout -->
<Row equal_height={false}>
  <div style="height: 30px;">Short content</div>
  <div style="height: 100px;">Tall content</div>
</Row>

type RowVariant = "default" | "panel" | "compact";

/**
 * Dimension values can be numbers (converted to px) or CSS strings
 */
type DimensionValue = number | string | undefined;

<!-- Number values (converted to pixels) -->
<Row height={100} min_height={50} max_height={200}>
  <!-- content -->
</Row>

<!-- String values (used as-is) -->
<Row height="10vh" min_height="2rem" max_height="50%">
  <!-- content -->
</Row>

interface LoadingStatus {
  /** Estimated time to completion in seconds */
  eta: number;
  /** Current position in processing queue */
  queue_position: number;
  /** Total size of processing queue */
  queue_size: number;
  /** Current processing status */
  status: "pending" | "error" | "complete" | "generating" | "streaming";
  /** Progress display mode */
  show_progress: "full" | "minimal" | "hidden";
  /** Whether to scroll to output when complete */
  scroll_to_output: boolean;
  /** Whether the status tracker is visible */
  visible: boolean;
  /** Function index for tracking */
  fn_index: number;
  /** Optional status message */
  message?: string;
  /** Detailed progress information */
  progress?: {
    progress: number | null;
    index: number | null;
    length: number | null;
    unit: string | null;
    desc: string | null;
  }[];
  /** Optional time limit for processing */
  time_limit?: number | null;
}

class Gradio<T extends Record<string, any> = Record<string, any>> {
  /** Current theme name */
  theme: string;
  /** Gradio version */
  version: string;
  /** Internationalization formatter */
  i18n: I18nFormatter;
  /** Application root URL */
  root: string;
  /** Whether to autoscroll to new content */
  autoscroll: boolean;
  /** Maximum file size allowed for uploads */
  max_file_size: number | null;
  /** Gradio client instance */
  client: Client;
  /** Component loader function */
  load_component: Function;

  constructor(
    id: number,
    el: HTMLElement,
    theme: string,
    version: string,
    root: string,
    autoscroll: boolean,
    max_file_size: number | null,
    i18n?: I18nFormatter,
    client?: Client,
    virtual_component_loader?: Function
  );

  /** Dispatch custom events */
  dispatch<E extends keyof T>(event_name: E, data?: T[E]): void;
}

type I18nFormatter = any;
type Client = any;

/**
 * CSS classes automatically applied based on props
 */
interface RowCSSClasses {
  /** Base class always applied */
  row: true;
  /** Applied when variant="compact" */
  compact: boolean;
  /** Applied when variant="panel" */
  panel: boolean;
  /** Applied when equal_height=false */
  "unequal-height": boolean;
  /** Applied when equal_height=true (default) */
  stretch: boolean;
  /** Applied when visible=false */
  hide: boolean;
  /** Applied when scale >= 1 */
  "grow-children": boolean;
}