// Ticksy Design System — window.TicksyDS
// Componentes de la pagina Presentations del archivo de Figma.
// Se montan con React 18 y leen los tokens de tokens.css; cada slide mide 1920x1080
// y fija su propio modo de color (data-theme) segun el fondo que usa.

/** Texto de una o varias lineas: una cadena, o un array con una linea por entrada. */
export type Lines = string | string[];

export interface SlideCoverProps {
  /** Fecha o cliente bajo el logo, en mayusculas. Por defecto "FEBRERO 2026". */
  eyebrow?: string;
  /** URL del SVG del logo (variante Wordmark + Tagline), a 420 px. Sin ella se dibuja un hueco marcado. */
  logoSrc?: string;
  logoAlt?: string;
  className?: string;
}

export interface SlideStatementProps {
  /** Frase de una o dos lineas. */
  text: Lines;
  /** "cyan" (por defecto) usa Background/Brand Cyan; "dark", Background/Brand Dark Radial. */
  background?: 'cyan' | 'dark';
  className?: string;
}

export interface SlideTitleBulletsProps {
  title: string;
  subtitle?: string;
  /** Parrafo de 600 px a la izquierda. */
  lead?: string;
  /** Hasta cinco vinetas en la columna derecha. */
  bullets?: string[];
  className?: string;
}

export interface SlideFeatureProps {
  /** Captura o mockup para el hueco de 1000x720. Sin ella queda el hueco marcado. */
  imageSrc?: string;
  imageAlt?: string;
  title: Lines;
  body: Lines;
  /** Nota al pie alineada con la columna de texto. */
  note?: string;
  className?: string;
}

export interface SlideFeatureDarkProps {
  title: string;
  subtitle?: string;
  /** Texto a la izquierda del primer hueco de tarjeta. */
  leftText?: string;
  /** Texto a la derecha del segundo hueco de tarjeta. */
  rightText?: string;
  /** Contenido de los huecos de 400x480. */
  cardLeft?: unknown;
  cardRight?: unknown;
  className?: string;
}

export interface SlideKpiCardsProps {
  title: string;
  subtitle?: string;
  /** Entradilla centrada de 1000 px. */
  lead?: string;
  kpi?: SlideKpiCardProps;
  /** Seis etiquetas, repartidas en tres filas de dos. */
  labels?: string[];
  className?: string;
}

export interface SlideClosingProps {
  title: string;
  logoSrc?: string;
  logoAlt?: string;
  contactTitle?: string;
  /** Lineas del bloque de contacto (telefono, correo). */
  contact?: string[];
  socialLabel?: string;
  /** Huecos cuadrados de 40 px para los iconos de redes; 4 por defecto. */
  socialSlots?: number;
  url?: string;
  className?: string;
}

export interface SlideBulletProps {
  text?: string;
  children?: unknown;
  /** Ancho en px; 700 por defecto, 760 dentro de SlideTitleBullets. */
  width?: number;
  className?: string;
}

export interface SlideKpiCardProps {
  /** Signo que precede a la cifra, p. ej. "+". */
  prefix?: string;
  value: string | number;
  /** Unidad tras la cifra, p. ej. "%". */
  unit?: string;
  /** Etiqueta en mayusculas, en una o dos lineas. */
  label?: Lines;
  className?: string;
}

export interface SlideLabelCardProps {
  label?: string;
  children?: unknown;
  className?: string;
}

export declare const SlideCover: (props: SlideCoverProps) => unknown;
export declare const SlideStatement: (props: SlideStatementProps) => unknown;
export declare const SlideTitleBullets: (props: SlideTitleBulletsProps) => unknown;
export declare const SlideFeatureImageLeft: (props: SlideFeatureProps) => unknown;
export declare const SlideFeatureImageRight: (props: SlideFeatureProps) => unknown;
export declare const SlideFeatureDark: (props: SlideFeatureDarkProps) => unknown;
export declare const SlideKpiCards: (props: SlideKpiCardsProps) => unknown;
export declare const SlideClosing: (props: SlideClosingProps) => unknown;
export declare const SlideBullet: (props: SlideBulletProps) => unknown;
export declare const SlideKpiCard: (props: SlideKpiCardProps) => unknown;
export declare const SlideLabelCard: (props: SlideLabelCardProps) => unknown;

// ===== Componentes de la app y de los documentos (paginas Components y Documents de Figma, iconos de Sketch) =====

// --- Iconos ---

export interface IconProps {
  /** Nombre del icono, tal cual se llama el slice en Sketch (`nav_close`, `menu_bar_printer`, `cards_bike`...). window.TicksyDS.iconNames trae la lista completa. */
  name: string;
  /** Lado en px. 24 por defecto; en el TPV lo normal es 28, 40 o 54. */
  size?: number;
  /** Texto para lectores de pantalla. Sin el, el icono se marca como decorativo. */
  label?: string;
  className?: string;
}

export declare const Icon: (props: IconProps) => unknown;
/** Los nombres de los 192 iconos disponibles, ordenados. */
export declare const iconNames: string[];

// --- Buttons ---

/**
 * Button — boton de accion del TPV.
 * Figma: set 24:43 (Style x Size).
 */
export type ButtonStyle = 'primary' | 'secondary' | 'danger' | 'warning' | 'ghost';

/** 'm' = 64 px (grupos de acciones). 'l' = 72 px (accion principal de pantalla). */
export type ButtonSize = 'm' | 'l';

export interface ButtonProps {
  /** Texto del boton. Siempre en mayusculas. Acepta array para varias lineas. */
  label?: string | string[];
  /** Alias de label cuando se pasa como hijo. */
  children?: string | string[];
  /** Estilo semantico. Por defecto 'primary'. */
  style?: ButtonStyle;
  /** Altura. Por defecto 'm'. */
  size?: ButtonSize;
  /** Tipo nativo del boton. Por defecto 'button'. */
  type?: 'button' | 'submit' | 'reset';
  disabled?: boolean;
  onClick?: (event: MouseEvent) => void;
  className?: string;
}

export declare function Button(props: ButtonProps): JSX.Element;

/**
 * IconButton — boton circular de 80 px, sin etiqueta.
 * Figma: set 24:56.
 */
export type IconButtonIcon = 'close' | 'chevron-left' | 'chevron-right' | 'menu';

export interface IconButtonProps {
  /** Icono a dibujar. Por defecto 'close'. */
  icon?: IconButtonIcon;
  /** Texto para lectores de pantalla. Sin el se usa el nombre del icono. */
  label?: string;
  disabled?: boolean;
  onClick?: (event: MouseEvent) => void;
  className?: string;
}

export declare function IconButton(props: IconButtonProps): JSX.Element;

/**
 * TileButton — tarjeta de 160x144 con icono y etiqueta corta.
 * Figma: set 24:69.
 */
export type TileButtonState = 'default' | 'selected' | 'secondary';

export interface TileButtonProps {
  /** Etiqueta corta, en mayusculas. Acepta array para varias lineas. */
  label?: string | string[];
  /** Alias de label cuando se pasa como hijo. */
  children?: string | string[];
  /** Icono que ocupa el hueco de 64 px. Usa currentColor para heredar el color del estado. */
  icon?: JSX.Element;
  /** Estado de la tarjeta. Por defecto 'default'. */
  state?: TileButtonState;
  disabled?: boolean;
  onClick?: (event: MouseEvent) => void;
  className?: string;
}

export declare function TileButton(props: TileButtonProps): JSX.Element;

/**
 * Toggle — interruptor de 72x40 para opciones binarias.
 * Figma: set 24:76.
 */
export interface ToggleProps {
  /** Estado encendido. Por defecto false. */
  on?: boolean;
  /** Texto para lectores de pantalla; describe la opcion que se enciende. */
  label?: string;
  /** Se llama con el nuevo estado al pulsar. */
  onChange?: (next: boolean, event: MouseEvent) => void;
  onClick?: (event: MouseEvent) => void;
  disabled?: boolean;
  className?: string;
}

export declare function Toggle(props: ToggleProps): JSX.Element;

// --- Indicators & Data ---

/** Tono del Badge: estado del pedido o canal de venta. */
export type BadgeTone =
  | 'success'
  | 'info'
  | 'warning'
  | 'danger'
  | 'navy'
  | 'neutral';

export interface BadgeProps {
  /** Texto de la etiqueta, en mayusculas. Por defecto "EFECTIVO". */
  label?: string | string[];
  /**
   * Color de fondo y de texto.
   * success = pagado / efectivo / online, info = tarjeta / nuevo,
   * warning = pendiente de cobro, danger = cerrado / cancelado,
   * navy = tipo de servicio (domicilio, recogida), neutral = informativo.
   * Por defecto "success".
   */
  tone?: BadgeTone;
  className?: string;
}

export declare function Badge(props: BadgeProps): JSX.Element;

/** Estado que marca el punto. */
export type StatusDotTone =
  | 'new'
  | 'inprogress'
  | 'pending'
  | 'alert'
  | 'accepted'
  | 'urgent';

export interface StatusDotProps {
  /**
   * Estado del pedido o del filtro.
   * new (cian), inprogress (verde), pending (naranja), alert (rojo),
   * accepted (amarillo), urgent (morado). Por defecto "new".
   */
  tone?: StatusDotTone;
  /**
   * Etiqueta que acompana al punto. Si se omite, el punto se dibuja solo
   * y el texto tiene que estar al lado en el propio layout.
   */
  label?: string | string[];
  className?: string;
}

export declare function StatusDot(props: StatusDotProps): JSX.Element;

/** Escalon de tamano del importe. */
export type AmountSize = 'xl' | 'l' | 'm' | 's';

/** Color del importe. */
export type AmountTone = 'primary' | 'accent' | 'muted';

export interface AmountProps {
  /** Parte entera, sin separador de decimales. Por defecto "234". */
  integer?: string;
  /** Parte decimal con su separador, p. ej. ".60". Cadena vacia para ocultarla. Por defecto ".60". */
  decimals?: string;
  /**
   * xl = pantalla de cliente, l = totales de pantalla,
   * m = totales de tarjeta, s = importes en listas. Por defecto "xl".
   */
  size?: AmountSize;
  /** primary = texto normal, accent = cifra destacada, muted = importe secundario. Por defecto "primary". */
  tone?: AmountTone;
  className?: string;
}

export declare function Amount(props: AmountProps): JSX.Element;

/** Color del KPI. */
export type KpiTone = 'primary' | 'accent';

export interface KpiProps {
  /** Parte entera de la cifra. Por defecto "250". */
  integer?: string;
  /** Parte decimal con su separador. Cadena vacia para ocultarla. Por defecto ".00". */
  decimals?: string;
  /** Rotulo bajo la cifra, en mayusculas. Por defecto "EFECTIVO". */
  label?: string | string[];
  /**
   * primary = cifra en text-primary con el rotulo en text-accent;
   * accent = cifra y rotulo en text-accent. Por defecto "primary".
   */
  tone?: KpiTone;
  className?: string;
}

export declare function Kpi(props: KpiProps): JSX.Element;

export interface KeyValueProps {
  /** Rotulo del dato, a la izquierda. Por defecto "EFECTIVO". */
  label?: string | string[];
  /** Valor, a la derecha. Por defecto "165.50". */
  value?: string | string[];
  className?: string;
}

export declare function KeyValue(props: KeyValueProps): JSX.Element;

export interface SectionHeaderProps {
  /** Nombre del bloque, en mayusculas. Por defecto "ENTRANTES". */
  title?: string | string[];
  className?: string;
}

export declare function SectionHeader(props: SectionHeaderProps): JSX.Element;

export interface PaginationProps {
  /** Numero de paginas del carrusel. Por defecto 3. */
  count?: number;
  /** Indice de la pagina visible, empezando en 0. Por defecto 0. */
  active?: number;
  /** Texto alternativo del grupo. Por defecto "Pagina N de M". */
  ariaLabel?: string;
  className?: string;
}

export declare function Pagination(props: PaginationProps): JSX.Element;

export interface PinIndicatorProps {
  /** Cuantos digitos se han introducido ya, de 0 a length. Por defecto 0. */
  filled?: number;
  /** Numero total de casillas. Por defecto 4. */
  length?: number;
  /** Texto alternativo del grupo. Por defecto "N de M digitos introducidos". */
  ariaLabel?: string;
  className?: string;
}

export declare function PinIndicator(props: PinIndicatorProps): JSX.Element;

/** Estado de la tarjeta del paso. */
export type OrderStepState = 'default' | 'active';

/** Color del punto de un paso que no es el actual. */
export type OrderStepDotTone =
  | 'new'
  | 'inprogress'
  | 'pending'
  | 'alert'
  | 'accepted';

export interface OrderStepProps {
  /** Nombre del paso, en mayusculas. Por defecto "ACEPTADO". */
  label?: string | string[];
  /** "active" para el paso en curso, "default" para el resto. Por defecto "default". */
  state?: OrderStepState;
  /**
   * Color del punto cuando state es "default". Por defecto "accepted".
   * En "active" el punto va siempre en text-on-status y se ignora.
   */
  dotTone?: OrderStepDotTone;
  className?: string;
}

export declare function OrderStep(props: OrderStepProps): JSX.Element;

// --- Keypad, Lists & Options ---

// Key — tecla del teclado numerico del TPV. Figma: set 27:22.

/** Los cuatro tipos de tecla del set. */
export type KeyType = 'digit' | 'backspace' | 'dot' | 'empty';

export interface KeyProps {
  /** Tipo de tecla. Por defecto 'digit'. */
  type?: KeyType;
  /** Cifra que muestra la tecla cuando type es 'digit'. Por defecto "5". */
  digit?: string;
  /** Se llama al pulsar. 'empty' nunca lo llama. */
  onPress?: () => void;
  /** Desactiva la tecla. No aplica a 'empty', que ya es inerte. */
  disabled?: boolean;
  /**
   * Etiqueta accesible. Sin ella, 'backspace' anuncia "Borrar" y 'dot'
   * "Coma decimal"; 'digit' se lee por su cifra.
   */
  ariaLabel?: string;
  className?: string;
}

/**
 * Tecla de 112x104 con radio radius-sm sobre bg/surface-raised.
 * 'backspace' se dibuja sin placa, solo el glifo de 36x28.
 */
export declare function Key(props: KeyProps): unknown;

// Keypad — teclado numerico completo del TPV. Figma: 27:52.

export interface KeypadProps {
  /**
   * Se llama con el valor de la tecla pulsada: "0"..."9" o el separador
   * decimal. Borrar no pasa por aqui.
   */
  onKey?: (value: string) => void;
  /** Se llama al pulsar la tecla de borrar. */
  onBackspace?: () => void;
  /** Valor que emite la coma decimal. Por defecto ",". */
  decimal?: string;
  /** true sustituye la coma por Key/Empty: es el teclado de PIN. */
  pin?: boolean;
  /** Etiqueta del grupo. Por defecto "Teclado numerico". */
  ariaLabel?: string;
  className?: string;
}

/**
 * Rejilla de 3x4 teclas Key sobre bg/surface, con padding space-24,
 * separacion space-16 y radio radius-md. Mide 416x512.
 */
export declare function Keypad(props: KeypadProps): unknown;

// TicketLine — linea de ticket o comanda. Figma: set 27:67.

/** Texto de una o varias lineas: una cadena, o un array con una linea por entrada. */
export type Lines = string | string[];

export interface TicketLineProps {
  /** Cantidad, a la izquierda y en text/accent. Por defecto "1". */
  qty?: string | number;
  /** Nombre del producto, en mayusculas. */
  product: Lines;
  /** Modificador bajo el nombre, en gris. Sin el, la linea es de una sola fila. */
  modifier?: Lines;
  /** Importe de la linea, a la derecha. Sin el no se pinta la columna. */
  price?: string;
  /** true apaga producto e importe: la linea ya esta cobrada. */
  muted?: boolean;
  /** Alternativa a `muted` con el nombre del eje de Figma. */
  state?: 'default' | 'muted';
  className?: string;
}

/**
 * Fila de ancho completo con separador inferior border/subtle:
 * cantidad (56 px) + nombre y modificador + importe.
 */
export declare function TicketLine(props: TicketLineProps): unknown;

// KdsLine — linea de la pantalla de cocina (KDS). Figma: set 27:89.

/** Texto de una o varias lineas: una cadena, o un array con una linea por entrada. */
export type Lines = string | string[];

/** Estado de preparacion de la linea. */
export type KdsLineState = 'pending' | 'cooking' | 'done';

export interface KdsLineProps {
  /** Cantidad, en una columna de 40 px. Por defecto "1". */
  qty?: string | number;
  /** Nombre del producto, en Heading/H2. */
  product: Lines;
  /** Modificadores, uno por entrada del array. */
  modifiers?: Lines;
  /** Tiempo transcurrido, a la derecha (por ejemplo "5 min"). */
  time?: string;
  /** Estado de preparacion. Por defecto 'pending'. */
  state?: KdsLineState;
  className?: string;
}

/**
 * Fila de la comanda de cocina, pensada para leerse a dos metros:
 * pending en texto normal, cooking en status/warning y done en
 * status/success con el producto tachado.
 */
export declare function KdsLine(props: KdsLineProps): unknown;

// OptionTile — opcion de modificador. Figma: set 27:104.

/** Texto de una o varias lineas: una cadena, o un array con una linea por entrada. */
export type Lines = string | string[];

export interface OptionTileProps {
  /** Nombre de la opcion, en mayusculas. */
  label: Lines;
  /** Suplemento, bajo el nombre. Sin el, la tile es de una sola linea. */
  price?: string;
  /** true pinta la tile seleccionada. */
  selected?: boolean;
  /** Alternativa a `selected` con el nombre del eje de Figma. */
  state?: 'default' | 'selected';
  /** Se llama al pulsar. */
  onPress?: () => void;
  disabled?: boolean;
  className?: string;
}

/**
 * Tile de 256x136 con radio radius-sm sobre bg/surface. Seleccionada pasa a
 * color/gray-300 con el texto en blanco. Se monta en rejilla de 6 columnas
 * bajo un OptionGroupHeader.
 */
export declare function OptionTile(props: OptionTileProps): unknown;

// OptionGroupHeader — cabecera de un grupo de opciones. Figma: set 27:121.

/**
 * Tono de la cabecera. Solo distingue grupos consecutivos; no significa
 * estado ni gravedad.
 */
export type OptionGroupHeaderTone = 'purple' | 'warning' | 'info' | 'success';

export interface OptionGroupHeaderProps {
  /** Nombre del grupo, en mayusculas. */
  title: string;
  /** Regla del grupo a la derecha, por ejemplo "MAXIMO 4 OPCIONES". */
  rule?: string;
  /** Tono de fondo. Por defecto 'purple'. */
  tone?: OptionGroupHeaderTone;
  className?: string;
}

/**
 * Banda de 80 px de alto con las esquinas superiores en radius-md, texto
 * blanco y padding lateral space-32. Corona la rejilla de OptionTile.
 */
export declare function OptionGroupHeader(props: OptionGroupHeaderProps): unknown;

// SearchBar — campo de busqueda de la barra superior. Figma: 27:126.

export interface SearchBarProps {
  /** Texto buscado. Vacio o sin pasar, se pinta el placeholder y no hay boton de borrar. */
  query?: string;
  /** Texto de reposo. Por defecto "Buscar". */
  placeholder?: string;
  /** Se llama al pulsar la X. */
  onClear?: () => void;
  /** Etiqueta del boton de borrar. Por defecto "Borrar la busqueda". */
  clearLabel?: string;
  /** Etiqueta de la region de busqueda. Por defecto "Buscar". */
  ariaLabel?: string;
  className?: string;
}

/**
 * Pastilla de 72 px de alto sobre bg/surface, con la lupa y la X en
 * text/accent y el texto en Heading/H2. Sustituye al titulo de la barra.
 */
export declare function SearchBar(props: SearchBarProps): unknown;

// --- Navigation & Containers ---

/**
 * AppBar — barra superior fija del TPV (1920x104).
 * Figma: set 29:59 (29:39 Type=Default, 29:58 Type=Search).
 */

/** 'default' = hora + nombre del local en el centro. 'search' = buscador. */
export type AppBarType = 'default' | 'search';

/** Iconos de modulo que la pieza sabe dibujar sin que le pases nada. */
export type AppBarGlyph = 'calendar' | 'scooter' | 'kiosk';

export interface AppBarTab {
  /** Identificador de la pestana. Se compara con `activeTab`. */
  id?: string;
  /** Nombre de un glifo del set o un nodo de la libreria Icons. */
  icon?: AppBarGlyph | JSX.Element;
  /** Texto para lectores de pantalla: la pestana solo muestra el icono. */
  label?: string;
}

export interface AppBarProps {
  /** Por defecto 'default'. */
  type?: AppBarType;
  /** Nombre del empleado, en mayusculas. Acepta array para varias lineas. */
  userName?: string | string[];
  /** Foto o avatar del empleado. Sin el se pinta una silueta. */
  avatar?: JSX.Element;
  /** Hora en curso. Solo en 'default'. */
  time?: string | string[];
  /** Nombre del local. Solo en 'default'. */
  venue?: string | string[];
  /** Texto buscado. Solo en 'search'; se pasa tal cual a SearchBar. */
  searchQuery?: string;
  /** Texto de reposo del buscador. Solo en 'search'. */
  searchPlaceholder?: string;
  onSearchClear?: () => void;
  /** Pestanas de modulo de la derecha. Por defecto calendar, scooter y kiosk. */
  tabs?: AppBarTab[];
  /** `id` de la pestana activa. */
  activeTab?: string;
  onTabClick?: (id: string) => void;
  onMenuClick?: (event: MouseEvent) => void;
  /** Etiquetas accesibles del boton de menu y del grupo de pestanas. */
  menuLabel?: string;
  tabsLabel?: string;
  /** Icono propio para el boton de menu. */
  menuIcon?: JSX.Element;
  className?: string;
}

export declare function AppBar(props: AppBarProps): JSX.Element;

/**
 * BottomBar — barra inferior de acciones del modulo (1920x96).
 * Figma: 29:70.
 */

/** Accion de la barra. Se pinta con Button en size 'm'. */
export interface BottomBarAction {
  id?: string;
  /** Texto del boton, en mayusculas. */
  label?: string | string[];
  /** Estilo de Button. Por defecto 'secondary'. */
  style?: 'primary' | 'secondary' | 'danger' | 'warning' | 'ghost';
  /** Altura de Button. Por defecto 'm'. */
  size?: 'm' | 'l';
  disabled?: boolean;
  onClick?: (event: MouseEvent) => void;
}

/** Cada hueco admite una accion, una lista de acciones o un nodo ya montado. */
export type BottomBarSlot =
  | BottomBarAction
  | BottomBarAction[]
  | JSX.Element
  | JSX.Element[]
  | string
  | string[]
  | null;

export interface BottomBarProps {
  /** Filtros y modos de la vista. */
  left?: BottomBarSlot;
  /** Selector central: texto de lo que se esta viendo, o un nodo propio. */
  center?: string | string[] | JSX.Element | null;
  /** Navegacion o salida de la pantalla. */
  right?: BottomBarSlot;
  /** Etiqueta accesible de la barra. */
  ariaLabel?: string;
  className?: string;
}

export declare function BottomBar(props: BottomBarProps): JSX.Element;

/**
 * Modal — popup centrado sobre el lienzo oscuro, siempre en modo Light.
 * Figma: set 29:92 (29:77 S, 29:84 M, 29:91 L).
 */

/**
 * 's' = 1136x440, confirmaciones y mensajes.
 * 'm' = 800x680, teclado mas valor.
 * 'l' = 1536x1000, detalle o formulario.
 */
export type ModalSize = 's' | 'm' | 'l';

export interface ModalProps {
  /** Por defecto 's'. */
  size?: ModalSize;
  /** Titulo de la cabecera cian, en mayusculas. Acepta array para varias lineas. */
  title?: string | string[];
  /** El contenido del popup. Sin el se pinta el hueco punteado de Figma. */
  children?: JSX.Element | JSX.Element[] | string | null;
  /** Fila de botones al pie. Opcional: en Figma las acciones van en el cuerpo. */
  footer?: JSX.Element | JSX.Element[] | null;
  /** Texto del hueco vacio. Por defecto 'Contenido'. */
  slotLabel?: string;
  /** Por defecto 'dialog'. */
  role?: string;
  /** Etiqueta accesible. Si no la pasas se usa `title` cuando es texto. */
  ariaLabel?: string;
  className?: string;
}

export declare function Modal(props: ModalProps): JSX.Element;

/**
 * Panel — columna con cabecera de color y cuerpo claro para comandas y listas.
 * Figma: set 29:107 (29:99 Secondary, 29:106 Primary). 560x780.
 */

/** 'secondary' = columna de origen. 'primary' = columna de destino. */
export type PanelTone = 'secondary' | 'primary';

export interface PanelProps {
  /** Por defecto 'secondary'. */
  tone?: PanelTone;
  /** Titulo de la cabecera, en mayusculas. Acepta array para varias lineas. */
  title?: string | string[];
  /** La lista. Sin ella se pinta el hueco punteado de Figma. */
  children?: JSX.Element | JSX.Element[] | string | null;
  /** Fila de acciones al pie de la columna. Opcional. */
  footer?: JSX.Element | JSX.Element[] | null;
  /** Texto del hueco vacio. Por defecto 'Ticket Lines'. */
  slotLabel?: string;
  /** Etiqueta accesible. Si no la pasas se usa `title` cuando es texto. */
  ariaLabel?: string;
  className?: string;
}

export declare function Panel(props: PanelProps): JSX.Element;

/**
 * Popover — menu flotante anclado a un elemento de la Bottom Bar.
 * Figma: 29:113. Medida de referencia 728x352, con rejilla de 680x280.
 */

/**
 * 'bottom' = flecha abajo, el menu se abre sobre lo que lo llamo (lo normal
 * en la barra inferior). 'top' = flecha arriba. `false` la quita.
 */
export type PopoverArrow = 'bottom' | 'top' | false;

export interface PopoverProps {
  /** Por defecto 'bottom'. */
  arrow?: PopoverArrow;
  /** La rejilla del menu, normalmente TileButton. Sin ella se pinta el hueco punteado. */
  children?: JSX.Element | JSX.Element[] | string | null;
  /** Texto del hueco vacio. Por defecto 'Tile Buttons'. */
  slotLabel?: string;
  /** Por defecto 'dialog'. */
  role?: string;
  /** Etiqueta accesible: di que menu es, no solo que es un menu. */
  ariaLabel?: string;
  className?: string;
}

export declare function Popover(props: PopoverProps): JSX.Element;

// --- Cards ---

// KdsOrderCard — tarjeta de pedido de la pantalla de cocina. Figma: set 30:171.

/** Texto de una o varias lineas: una cadena, o un array con una linea por entrada. */
export type Lines = string | string[];

/** Canal de venta del que llega el pedido. Decide el color de la cabecera. */
export type KdsOrderChannel = 'uber-eats' | 'just-eat' | 'table' | 'web';

/** Estado de preparacion de una linea, el mismo que acepta KdsLine. */
export type KdsOrderLineState = 'pending' | 'cooking' | 'done';

/** Una linea de comanda dentro de una partida. */
export interface KdsOrderLine {
  /** Cantidad pedida. */
  qty?: string | number;
  /** Nombre del producto. */
  product: Lines;
  /** Modificadores, uno por entrada del array. */
  modifiers?: Lines;
  /** Tiempo que lleva la linea, por ejemplo "5 min". */
  time?: string;
  /** Estado de preparacion. Por defecto 'pending'. */
  state?: KdsOrderLineState;
}

/** Bloque de lineas encabezado por un Section Header (ENTRANTES, PRINCIPALES...). */
export interface KdsOrderGroup {
  /** Nombre de la partida, en mayusculas. Si falta, el bloque va sin cabecera. */
  title?: Lines;
  /** Lineas de la partida, en el orden en que se cocinan. */
  lines?: KdsOrderLine[];
}

export interface KdsOrderCardProps {
  /** Canal del pedido. Pinta la cabecera. Por defecto 'uber-eats'. */
  channel?: KdsOrderChannel;
  /** Nombre visible del canal ("Uber Eats", "Just Eat", "BARRA", "Webapp"). */
  channelLabel?: Lines;
  /** Numero de pedido o codigo de mesa, en Display/Number M. */
  number?: Lines;
  /** Minutos transcurridos desde que entro el pedido. */
  minutes?: Lines;
  /** Direccion de entrega o referencia del pedido. */
  address?: Lines;
  /** Hora comprometida de entrega o de recogida. */
  time?: Lines;
  /** Codigo postal o referencia corta bajo la direccion. */
  code?: Lines;
  /** Partidas de cocina con sus lineas. */
  groups?: KdsOrderGroup[];
  className?: string;
}

/**
 * Comanda de cocina de 680 px: cabecera con el color del canal y cuerpo
 * blanco con los datos de entrega y las lineas agrupadas por partida.
 */
export declare function KdsOrderCard(props: KdsOrderCardProps): unknown;

// DeliveryOrderCard — pedido a domicilio en la rejilla de Pedidos. Figma: set 30:210.

/** Texto de una o varias lineas: una cadena, o un array con una linea por entrada. */
export type Lines = string | string[];

/** Estado del pedido a domicilio. */
export type DeliveryOrderState = 'new' | 'inprogress';

export interface DeliveryOrderCardProps {
  /**
   * Estado del pedido. Decide el color del punto y de la franja:
   * 'new' punto info y franja status-attention, 'inprogress' ambos en
   * status-success. Por defecto 'new'.
   */
  state?: DeliveryOrderState;
  /** La palabra del estado, en mayusculas ("NUEVO PEDIDO", "EN CURSO"). */
  stateLabel?: Lines;
  /** Etiqueta corta del tipo de servicio, a la derecha del estado ("R"). */
  badgeLabel?: Lines;
  /** Codigo del pedido, en Display/Number L. */
  code?: Lines;
  /** Cliente que ha pedido, bajo el codigo. */
  customer?: Lines;
  /** Persona que recibe, en la mitad oscura. */
  recipient?: Lines;
  /** Direccion de entrega, con sus indicaciones. */
  address?: Lines;
  /** Dia y hora comprometidos de entrega. */
  deliveryTime?: Lines;
  className?: string;
}

/**
 * Tarjeta de 460 px partida en dos: mitad clara con estado, codigo y cliente,
 * franja de 8 px con el color del estado, y mitad oscura con los datos de
 * entrega.
 */
export declare function DeliveryOrderCard(props: DeliveryOrderCardProps): unknown;

// TableCard — mesa abierta en la vista de salon. Figma: set 30:245.

/** Texto de una o varias lineas: una cadena, o un array con una linea por entrada. */
export type Lines = string | string[];

/** Situacion de la mesa. */
export type TableCardStatus = 'open' | 'to-pay';

export interface TableCardProps {
  /**
   * 'open' es la mesa en marcha; 'to-pay' anade el badge de cobro.
   * Por defecto 'open'.
   */
  status?: TableCardStatus;
  /** Camarero que lleva la mesa, en mayusculas. */
  waiter?: Lines;
  /** Codigo de la mesa, la cifra grande de la tarjeta. */
  table?: Lines;
  /** Zona o nombre del grupo que ocupa la mesa. */
  zone?: Lines;
  /** Texto del badge de cobro ("COBRAR"). Solo se pinta con status 'to-pay'. */
  actionLabel?: Lines;
  /** Importe acumulado de la mesa. */
  amount?: Lines;
  /** Numero de comensales. */
  guests?: Lines;
  /** Tiempo que lleva abierta la mesa. */
  time?: Lines;
  className?: string;
}

/**
 * Tarjeta de 360 px con el codigo de mesa enorme y una fila de tres datos
 * (importe, comensales y tiempo abierto) sobre surface-raised.
 */
export declare function TableCard(props: TableCardProps): unknown;

// CourierCard — repartidor en Control de reparto. Figma: set 30:298.

/** Texto de una o varias lineas: una cadena, o un array con una linea por entrada. */
export type Lines = string | string[];

/** Situacion del repartidor. */
export type CourierCardState = 'active' | 'closed';

/** Fila dato-valor del cuadre del repartidor. */
export interface CourierCardRow {
  /** Rotulo, en mayusculas ("EFECTIVO", "TARJETA", "FONDO", "GASTOS"). */
  label?: Lines;
  /** Importe o cantidad, a la derecha. */
  value?: Lines;
}

/** Total en efectivo del pie, partido en entero y decimales. */
export interface CourierCardTotal {
  /** Parte entera, sin separador. */
  integer?: string;
  /** Parte decimal con su separador, por ejemplo ".50". */
  decimals?: string;
}

export interface CourierCardProps {
  /**
   * 'active' reserva el hueco del pie vacio; 'closed' lo ocupa con el badge
   * de cierre. Por defecto 'active'.
   */
  state?: CourierCardState;
  /** Nombre del repartidor. */
  name?: Lines;
  /** Repartos que lleva, en mayusculas ("3 REPARTOS"). */
  deliveries?: Lines;
  /** Texto del badge de cierre ("CERRADO"). Solo se pinta con state 'closed'. */
  stateLabel?: Lines;
  /** Filas del cuadre, en el orden en que se leen. */
  rows?: CourierCardRow[];
  /** Rotulo del total del pie ("TOTAL EFECTIVO"). */
  totalLabel?: Lines;
  /** Total en efectivo. */
  total?: CourierCardTotal;
  className?: string;
}

/**
 * Tarjeta de 560 px con el nombre del repartidor en acento, las filas
 * dato-valor del cuadre y un pie con el total en efectivo.
 */
export declare function CourierCard(props: CourierCardProps): unknown;

// ReservationCard — reserva del dia. Figma: set 30:331.

/** Texto de una o varias lineas: una cadena, o un array con una linea por entrada. */
export type Lines = string | string[];

/** Situacion de la reserva. */
export type ReservationCardState = 'assigned' | 'pending';

export interface ReservationCardProps {
  /**
   * 'assigned' es la reserva con mesa; 'pending' es la que aun no la tiene y
   * anade un borde de 4 px en status-success. Por defecto 'assigned'.
   */
  state?: ReservationCardState;
  /**
   * Rotulo de arriba: la zona cuando hay mesa ("TERRAZA") o el aviso cuando
   * no la hay ("PENDIENTE ASIGNAR").
   */
  zoneLabel?: Lines;
  /** Numero de mesa, la cifra grande de la tarjeta. */
  table?: Lines;
  /** Nombre de quien reserva. */
  guest?: Lines;
  /** Telefono de contacto. */
  phone?: Lines;
  /** Numero de comensales. */
  guests?: Lines;
  /** Hora de la reserva. */
  time?: Lines;
  className?: string;
}

/**
 * Tarjeta de 300 px con la zona y la mesa sobre surface-raised, el nombre y
 * el telefono de contacto, y abajo comensales y hora.
 */
export declare function ReservationCard(props: ReservationCardProps): unknown;

// --- Documents ---

export interface DocCoverProps {
  /** URL del logo Wordmark + Tagline en tinta clara. Sin ella se dibuja un hueco marcado de 120 px. */
  logoSrc?: string;
  /** Texto alternativo del logo. Por defecto "Ticksy". */
  logoAlt?: string;
  /** Titulo del documento. Array para partirlo en lineas. Por defecto ["Guia", "Tecnica"]. */
  title?: string | string[];
  /** Dato destacado en cian: ano, version. Por defecto "2023". Pasa cadena vacia para ocultarlo. */
  accent?: string | string[];
  /** Metadato en mayusculas bajo el titulo. Por defecto "REV. OCTUBRE". */
  meta?: string | string[];
  className?: string;
}

export declare function DocCover(props: DocCoverProps): JSX.Element;

export interface DocSectionDividerProps {
  /** URL del logo Wordmark + Tagline en tinta clara, a 120 px. Sin ella se dibuja un hueco marcado. */
  logoSrc?: string;
  /** Texto alternativo del logo. Por defecto "Ticksy". */
  logoAlt?: string;
  /** Rotulo en mayusculas sobre el titulo. Por defecto "ANEXO". */
  eyebrow?: string | string[];
  /** Titulo de la seccion. Array para partirlo en lineas. */
  title?: string | string[];
  /** Entradilla bajo el titulo. Por defecto "segun tipo de local". */
  lead?: string | string[];
  className?: string;
}

export declare function DocSectionDivider(props: DocSectionDividerProps): JSX.Element;

export interface DocPageProps {
  /** Titulo de la pagina, arriba a la izquierda. Por defecto "TPV / Tablet". */
  title?: string | string[];
  /** Etiqueta de seccion en mayusculas, alineada a la derecha. */
  sectionTag?: string | string[];
  /** Linea de apoyo bajo el titulo. */
  subtitle?: string | string[];
  /** Numero de pagina, abajo a la derecha. */
  pageNumber?: string | number | string[];
  /** Contenido del area de 483 x 604. */
  children?: any;
  /** Clase extra para el area de contenido. */
  contentClassName?: string;
  className?: string;
}

export declare function DocPage(props: DocPageProps): JSX.Element;

export interface DocLetterheadProps {
  /** URL del logo Wordmark + Tagline en tinta clara, a 120 px. Sin ella se dibuja un hueco marcado. */
  logoSrc?: string;
  /** Texto alternativo del logo. Por defecto "Ticksy". */
  logoAlt?: string;
  /** Numero de pagina, abajo a la derecha. */
  pageNumber?: string | number | string[];
  /** Contenido de la carta, en el area de 483 x 612. */
  children?: any;
  /** Clase extra para el area de contenido. */
  contentClassName?: string;
  className?: string;
}

export declare function DocLetterhead(props: DocLetterheadProps): JSX.Element;

export interface DocListItemProps {
  /** Texto del elemento. Por defecto "Sunmi T2S Lite". */
  label?: string | string[];
  className?: string;
}

export declare function DocListItem(props: DocListItemProps): JSX.Element;

export interface DocBulletProps {
  /** Texto de la vinieta. Admite array para forzar varios renglones. */
  text?: string | string[];
  /** Alternativa a `text` cuando se pasa como hijo. */
  children?: any;
  /** Glifo de la vinieta. Por defecto el punto medio. */
  glyph?: string;
  className?: string;
}

export declare function DocBullet(props: DocBulletProps): JSX.Element;

export interface DocKeyValueProps {
  /** Nombre del dato. Por defecto "Rango IP". */
  label?: string | string[];
  /** Contenido del dato. Por defecto "10.10.10.X/24". */
  value?: string | string[];
  className?: string;
}

export declare function DocKeyValue(props: DocKeyValueProps): JSX.Element;

export interface DocDeviceListProps {
  /** Encabezado del bloque, p. ej. "Dispositivos verificados gama media ( hasta 500 )". */
  label?: string | string[];
  /** Lista plana de dispositivos; se reparte sola entre las columnas. */
  items?: string[];
  /** Reparto manual: un array por columna. Tiene prioridad sobre `items`. */
  columns?: string[][];
  /** Numero de columnas cuando se usa `items`. Por defecto 3. */
  columnCount?: number;
  className?: string;
}

export declare function DocDeviceList(props: DocDeviceListProps): JSX.Element;

export interface DocKeyValueGridItem {
  label?: string | string[];
  value?: string | string[];
}

export interface DocKeyValueGridProps {
  /** Pares clave/valor en orden de lectura; se reparten por filas. */
  items?: DocKeyValueGridItem[];
  /** Columnas por fila. Por defecto 3. */
  columnCount?: number;
  className?: string;
}

export declare function DocKeyValueGrid(props: DocKeyValueGridProps): JSX.Element;

export interface DocFootnoteProps {
  /** Texto de la nota. Admite array para forzar renglones. */
  text?: string | string[];
  /** Alternativa a `text` cuando se pasa como hijo. */
  children?: any;
  /** Marca de llamada. Por defecto el asterisco. */
  marker?: string;
  className?: string;
}

export declare function DocFootnote(props: DocFootnoteProps): JSX.Element;

export interface DocFigureProps {
  /** URL de la imagen. Sin ella se dibuja la caja vacia sobre bg-surface-raised. */
  src?: string;
  /** Texto alternativo de la imagen. */
  alt?: string;
  /** Pie de figura. Por defecto "Grafico de potencia de senal.". */
  caption?: string | string[];
  /** Ancho de la caja de imagen. Por defecto 160. */
  width?: number | string;
  /** Alto de la caja de imagen. Por defecto 240. */
  height?: number | string;
  className?: string;
}

export declare function DocFigure(props: DocFigureProps): JSX.Element;