@studiolxd/brand 38.12.4

package/dist/_types/organisms/Steps/Steps.d.ts

@@ -0,0 +1,69 @@
+import { type ReactNode } from 'react';
+import { type HeadingLevel, type HeadingSize } from '../../atoms/Heading/Heading';
+import { type IconName } from '../../atoms/Icon/Icon';
+import { type StepMarkerTone } from '../../atoms/StepMarker/StepMarker';
+import './Steps.css';
+export interface StepItem {
+    /** Clave de React. Sin ella se usa la posición. */
+    id?: string;
+    /** Título del paso. */
+    title: ReactNode;
+    /** Qué pasa en este paso. */
+    description?: ReactNode;
+    /** Icono junto al título, del catálogo del sistema. */
+    icon?: IconName;
+}
+export interface StepsProps {
+    /**
+     * Los pasos, en orden, como datos. El número lo pone el componente. Para un
+     * paso con cuerpo rico (varios párrafos, una lista, un bloque de código)
+     * están los `children` con `Step`.
+     */
+    items?: StepItem[];
+    /** Uno debajo de otro (por defecto) o en fila. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Color de la marca. Por defecto `primary`. */
+    tone?: StepMarkerTone;
+    /** @deprecated Usar `tone`. Se mantiene como alias por compatibilidad. */
+    badgeVariant?: StepMarkerTone;
+    /** Nivel semántico del título de cada paso. Por defecto `3`. */
+    titleLevel?: HeadingLevel;
+    /** Talla del título de cada paso. Por defecto `1` (14px, la de la etiqueta de `Stepper`). */
+    titleSize?: HeadingSize;
+    /** Nombre accesible de la lista, si la sección que la contiene no lo da ya. */
+    label?: string;
+    /**
+     * Los pasos como composición: un `Step` por paso, con el cuerpo que haga
+     * falta dentro. Es la forma para MDX, donde un paso no cabe en una cadena.
+     * Manda sobre `items`.
+     */
+    children?: ReactNode;
+    className?: string;
+    id?: string;
+}
+/**
+ * Un proceso numerado: los pasos de una metodología, de un alta, de una
+ * matrícula. Es una lista ordenada de verdad (`ol`), así que el lector de
+ * pantalla anuncia «lista de 4 elementos» y el orden sin que nadie lo escriba.
+ *
+ * La marca es un `StepMarker` en estado `neutral` —Steps no tiene noción de
+ * progreso— y va marcada como decorativa: la posición ya la da el `ol`, y
+ * repetirla en voz alta sobraría. La línea que une un paso con el siguiente
+ * comparte color y grosor con la de `Stepper` (`step.connector-*`).
+ */
+export declare function Steps({ items, orientation, tone, badgeVariant, titleLevel, titleSize, label, children, className, id, }: StepsProps): import("react/jsx-runtime").JSX.Element;
+export interface StepProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'title'> {
+    /** Título del paso. */
+    title: ReactNode;
+    /** Icono junto al título, del catálogo del sistema. */
+    icon?: IconName;
+    /** El cuerpo del paso: párrafos, listas, bloques de código, lo que haga falta. */
+    children?: ReactNode;
+}
+/**
+ * Un paso de la forma compuesta. Solo vive dentro de `Steps`: de ahí saca su
+ * número y la cara de la lista. El cuerpo son sus `children`, así que un paso
+ * puede llevar varios párrafos, una lista o un bloque de código — lo que no
+ * cabe en la `description` de un `StepItem`.
+ */
+export declare function Step({ title, icon, children, className, ...rest }: StepProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/pages/Auth/AuthPage.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import './AuthPage.css';
+export interface AuthPageProps {
+    /** Título de la página. */
+    title: string;
+    /** Frase bajo el título (opcional): texto, o texto con un enlace y el punto fuera de él («¿No tienes una cuenta? Regístrate.»). */
+    description?: ReactNode;
+    /** Más texto bajo la frase. */
+    intro?: ReactNode;
+    /** Bajo la cabecera, en la misma columna (un enlace de vuelta): el aire lo pone el PageIntro. */
+    aside?: ReactNode;
+    /** Lo que va a la derecha: el formulario. */
+    children: ReactNode;
+    /** Superficie oscura. */
+    surface?: 'light' | 'dark';
+}
+/** El chrome público de la suite con la página de acceso dentro: es el layout `(auth)` de hub, montado sobre `PublicPageShell` —el mismo marco que `ErrorPage` y `NotFoundPage`— con piezas del DS y datos falsos. */
+export declare function AuthPage({ title, description, intro, aside, children, surface }: AuthPageProps): import("react/jsx-runtime").JSX.Element;
+/** Botones de acceso con terceros (Google, GitHub, un OIDC…). */
+export declare function SocialButtons({ providers }: {
+    providers: string[];
+}): import("react/jsx-runtime").JSX.Element;
+/** El hueco del captcha (Turnstile mide 300×65). */
+export declare function Captcha(): import("react/jsx-runtime").JSX.Element;

package/dist/_types/pages/Onboarding/OnboardingPage.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+import { type StepperStep } from '../../molecules/Stepper/Stepper';
+export interface OnboardingPageProps {
+    /**
+     * Los pasos del flujo. `null` es un flujo sin progreso —la sala de espera,
+     * que no es un paso porque no hay nada que hacer—, y entonces el `Stepper`
+     * no se monta.
+     */
+    steps?: StepperStep[] | null;
+    /** Índice (base 0) del paso actual. */
+    current?: number;
+    /** El cuerpo del paso. */
+    children: ReactNode;
+    /** La acción principal del paso. */
+    primaryAction?: ReactNode;
+    /** La salida: «Omitir», «Cerrar sesión». */
+    exitAction?: ReactNode;
+    /** Tema que enseña el conmutador. Solo eso: el oscuro del lienzo lo pone la story. */
+    theme?: 'light' | 'dark';
+    /**
+     * Ancho de la columna del paso, tal cual lo recibe `OnboardingShell`: `md`
+     * (por defecto) es la medida de lectura de un formulario; `wide` es el
+     * ancho de página pública, para un paso que reparte el contenido en
+     * columnas (la sala de espera, dos columnas).
+     */
+    width?: 'md' | 'wide';
+}
+/**
+ * El alta del hub montada sobre las piezas reales: `AppRoot` + `OnboardingShell`
+ * con el `Stepper` dentro. Lo único que añade es lo que en el producto viene del
+ * layout —la marca y los dos conmutadores— con datos falsos, para que las cinco
+ * pantallas de `Pages/Onboarding` no lo repitan.
+ *
+ * **No hay «Atrás».** El progreso navega, así que un botón que repita lo que
+ * las cifras ya saben hacer sobraría: se retiró del alta y no vuelve.
+ */
+export declare function OnboardingPage({ steps, current, children, primaryAction, exitAction, theme, width }: OnboardingPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/pages/Status/StatusPage.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+import { type AplicacionEstado, type SaludConjunto } from './_datos';
+export interface StatusPageProps {
+    /** El tablero: lo único vivo de la página. */
+    children: ReactNode;
+    /** Tema que enseña el conmutador. Solo eso: el oscuro del lienzo lo pone la story. */
+    theme?: 'light' | 'dark';
+}
+/**
+ * El panel de estado (`status.slxd.app`) montado con las piezas del DS:
+ * `AppRoot` + `PublicPageShell` con la cabecera de la marca y, en el pie, las
+ * preferencias y las legales.
+ *
+ * La cabecera **no lleva índice**: el panel es un sitio de una sola página que
+ * debe seguir de pie cuando la suite no lo está, y un menú lleno de enlaces a
+ * servicios caídos sería una promesa que no puede cumplir. Sin índice ni
+ * ajustes, `SiteHeader` no monta el panel y su botón de menú desaparece solo,
+ * así que los dos conmutadores —idioma y tema— bajan al pie, como en el alta.
+ */
+export declare function StatusPage({ children, theme }: StatusPageProps): import("react/jsx-runtime").JSX.Element;
+export interface StatusBoardProps {
+    /** Cómo fue la consulta al monitor: pidiéndola, contestada, o sin respuesta. */
+    estado: 'cargando' | 'listo' | 'incomunicado';
+    /** Cómo está el conjunto. Solo con `listo`. */
+    salud?: SaludConjunto;
+    /** Las aplicaciones, en el orden en que se pintan. Solo con `listo`. */
+    aplicaciones?: readonly AplicacionEstado[];
+}
+/**
+ * El tablero: un apartado por aplicación con su nombre, su enlace, cómo está
+ * ahora y su tira de 30 días.
+ *
+ * La página se sirve estática, así que el dato lo pide el navegador al monitor
+ * —que vive en otro servidor— al cargar y cada minuto. Que el monitor no
+ * conteste no es un error de la página: es información, y se enseña como tal.
+ */
+export declare function StatusBoard({ estado, salud, aplicaciones }: StatusBoardProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/pages/Status/_datos.d.ts

@@ -0,0 +1,47 @@
+/**
+ * El modelo del panel de estado y sus datos de ejemplo: qué aplicaciones vigila
+ * el monitor, cómo se dice que están y cómo les ha ido en treinta días.
+ *
+ * Vive aparte del componente por la regla de siempre —un fichero de componente
+ * solo exporta componentes—, y porque el catálogo de aplicaciones es un dato,
+ * no una pieza.
+ */
+import type { UptimeBarsThresholds } from '../../molecules/UptimeBars/UptimeBars';
+/** Cómo está una aplicación ahora mismo. */
+export type SaludAplicacion = 'operational' | 'failing' | 'unknown';
+/** Cómo está el conjunto. */
+export type SaludConjunto = 'operational' | 'degraded' | 'down' | 'unknown';
+export interface AplicacionEstado {
+    id: string;
+    /** El nombre visible. Un producto es nombre propio; una pieza de plataforma se traduce. */
+    nombre: string;
+    /** URL pública. Sin ella (colas, websocket) no hay página que visitar. */
+    url?: string;
+    salud: SaludAplicacion;
+    /**
+     * Minutos caídos cada día, del más antiguo (hace 30 días) al de hoy. `null`
+     * es **sin dato** —el monitor todavía no vigilaba esto—, que no es 0 %.
+     */
+    minutosCaidos: (number | null)[];
+}
+/** Días que enseña la tira. */
+export declare const DIAS = 30;
+/** Minutos caídos en un día → porcentaje de disponibilidad de ese día. */
+export declare const disponibilidad: (minutos: number) => number;
+export declare const CORTES: UptimeBarsThresholds;
+/**
+ * Las aplicaciones que vigila el monitor, en el orden en que se pintan: la web
+ * y el hub primero, después cada producto seguido de sus servicios (edición
+ * colaborativa, worker), y al final lo externo. Los procesos en segundo plano
+ * laten contra el monitor y no atienden peticiones: ninguno lleva enlace.
+ *
+ * Los treinta días llevan una historia creíble y no ruido: un par de días
+ * tocados en Bricks y su worker, una tarde entera caída en Localizia, y LMS
+ * MCP sin monitorizar la primera semana porque se dio de alta después.
+ */
+export declare const APLICACIONES: readonly AplicacionEstado[];
+/**
+ * El mismo catálogo con las aplicaciones dichas sin responder: se les marca la
+ * salud y se les añaden al día de hoy los minutos que llevan caídas.
+ */
+export declare function sinResponder(ids: readonly string[], minutosHoy: number): AplicacionEstado[];

package/dist/_types/sections/AppHeader/AppHeader.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import './AppHeader.css';
+export interface AppHeaderProps {
+    /** Tras el botón de menú: breadcrumb, buscador, título de página… */
+    start?: ReactNode;
+    /** Antes del avatar: la campana con su contador. Sitio fijo. */
+    notifications?: ReactNode;
+    /** Al final, siempre: el `UserMenu` (compacto). */
+    end?: ReactNode;
+    /** Texto accesible del botón de menú. */
+    menuLabel?: string;
+    /** Texto accesible del botón cuando la sidebar está abierta («Cerrar menú»). */
+    menuCloseLabel?: string;
+    /** id de la sidebar que gobierna el botón (`aria-controls`). */
+    sidebarId?: string;
+}
+/**
+ * La barra superior de la aplicación, en todos los anchos. A la izquierda el
+ * botón de menú, que abre el cajón en móvil y pliega/despliega la sidebar en
+ * escritorio; a la derecha, notificaciones y cuenta. Entre medias, lo que la
+ * página necesite.
+ */
+export declare function AppHeader({ start, notifications, end, menuLabel, menuCloseLabel, sidebarId, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/sections/AppRoot/AppRoot.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+export interface AppRootProps {
+    /** Texto del enlace de salto al contenido. */
+    skipLabel?: string;
+    /** Destino del salto: el `id` del contenido principal de la página. */
+    skipHref?: string;
+    /** El resto del documento. Puede ir como hermano (`<AppRoot />` antes del contenido): lo que importa es que el salto sea lo primero. */
+    children?: ReactNode;
+}
+/**
+ * La raíz de cualquier sitio o aplicación de Studio LXD: lo primero del
+ * documento. Pone el enlace de salto al contenido una sola vez —antes de
+ * cualquier cabecera— y deja el resto al producto. Va en el layout raíz,
+ * envolviendo a todo.
+ */
+export declare function AppRoot({ skipLabel, skipHref, children }: AppRootProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/sections/AppShell/AppShell.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from 'react';
+import { type SidebarState } from './AppShellContext';
+import './AppShell.css';
+export { useAppShell } from './AppShellContext';
+export type { AppShellContextValue, SidebarState } from './AppShellContext';
+export interface AppShellProps {
+    /** La barra superior: un `AppHeader`. Siempre visible. */
+    header: ReactNode;
+    /** La barra lateral: un `Sidebar`. Columna en escritorio, cajón en móvil. */
+    sidebar: ReactNode;
+    children: ReactNode;
+    /** Estado inicial de la sidebar en escritorio (en móvil siempre arranca cerrada). */
+    defaultSidebar?: SidebarState;
+    /** Estado controlado de la sidebar en escritorio. */
+    sidebarState?: SidebarState;
+    onSidebarChange?: (state: SidebarState) => void;
+    /** Ancho inicial de la sidebar desplegada (px). Sin él, el token `sidebar.width`. */
+    defaultSidebarWidth?: number;
+    onSidebarWidthChange?: (width: number) => void;
+    /** Texto del enlace de salto al contenido (`SkipLink`). Default: castellano. */
+    skipLabel?: string;
+}
+/**
+ * El armazón de una aplicación: barra superior, barra lateral y contenido.
+ * Lleva el estado de la sidebar (abierta, rail o cerrada; su ancho) y lo
+ * comparte por contexto con `AppHeader` (el botón de menú), `Sidebar` (su
+ * modo y su asa) y `SidebarNav` (rail). Persistir el estado es del producto:
+ * `onSidebarChange` / `onSidebarWidthChange` avisan de cada cambio.
+ */
+export declare function AppShell({ header, sidebar, children, defaultSidebar, sidebarState, onSidebarChange, defaultSidebarWidth, onSidebarWidthChange, skipLabel, }: AppShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/sections/AppShell/AppShellContext.d.ts

@@ -0,0 +1,16 @@
+/** Estado de la barra lateral. En móvil solo existen `open` (cajón) y `closed`. */
+export type SidebarState = 'open' | 'rail' | 'closed';
+export interface AppShellContextValue {
+    sidebar: SidebarState;
+    setSidebar: (state: SidebarState) => void;
+    /** Ancho de la sidebar desplegada en escritorio, en px. */
+    sidebarWidth: number;
+    setSidebarWidth: (width: number) => void;
+    /** Alterna la sidebar: abierta ↔ cerrada (desde rail, abre). */
+    toggleSidebar: () => void;
+    closeSidebar: () => void;
+    /** ≥ breakpoint lg: la sidebar es una columna; por debajo, un cajón. */
+    isDesktop: boolean;
+}
+export declare const AppShellContext: import("react").Context<AppShellContextValue | null>;
+export declare function useAppShell(): AppShellContextValue;

package/dist/_types/sections/AppShell/_datos.d.ts

@@ -0,0 +1,6 @@
+import type { SidebarNavEntry } from '../../molecules/SidebarNav/SidebarNav';
+export declare const navEntries: SidebarNavEntry[];
+export declare const orgs: {
+    id: string;
+    name: string;
+}[];

package/dist/_types/sections/FloatingDock/FloatingDock.d.ts

@@ -0,0 +1,72 @@
+import { type ReactNode } from 'react';
+import './FloatingDock.css';
+/** Esquina de la ventana a la que se ancla el dock. */
+export type FloatingDockPosition = 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
+export interface FloatingDockProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title' | 'children'> {
+    /**
+     * Nombre accesible del lanzador — obligatorio: es un botón de solo icono y
+     * sin él no tendría nombre. Castellano en el consumidor, como todo texto.
+     */
+    label: string;
+    /** Título del panel. Su texto es también el nombre accesible del diálogo. */
+    title: ReactNode;
+    /** Oculta el título visualmente y lo deja solo como nombre accesible. */
+    titleHidden?: boolean;
+    /** Línea de contexto bajo el título. */
+    description?: ReactNode;
+    /** Contenido del panel: aquí entra el `ChatShell` (o lo que monte el producto). */
+    children: ReactNode;
+    /** Glifo del lanzador. Por defecto, el bocadillo (`Icon name="message"`). */
+    icon?: ReactNode;
+    /** Esquina de anclaje. Por defecto, abajo a la derecha (`bottom-end`). */
+    position?: FloatingDockPosition;
+    /** Estado controlado. Sin él, el dock se gobierna solo (`defaultOpen`). */
+    open?: boolean;
+    /** Estado inicial en modo no controlado. */
+    defaultOpen?: boolean;
+    /** Se llama al abrirse y al cerrarse, en controlado y en no controlado. */
+    onOpenChange?: (open: boolean) => void;
+    /** `aria-label` del aspa. Default: «Cerrar» (castellano). */
+    closeLabel?: string;
+    /** Novedades sin ver. Con 0 (o sin él) no hay contador. */
+    badge?: number;
+    /** Tope del contador («99+»). */
+    badgeMax?: number;
+    /**
+     * Cómo se lee el contador. Default: «N mensajes nuevos» (castellano).
+     * Interpola el número, así que es una función.
+     */
+    badgeLabel?: (count: number) => string;
+    /**
+     * Anuncia el contador por `aria-live="polite"` cuando cambia. Se apaga para
+     * los contadores que no son novedades (un número de tareas pendientes, por
+     * ejemplo): anunciarlos interrumpiría sin aportar.
+     */
+    badgeLive?: boolean;
+    /**
+     * Cierra el panel al pulsar fuera de él. Apagado por defecto: el dock es un
+     * ayudante que acompaña mientras se trabaja en la página, y cerrarse al
+     * primer clic en el contenido lo haría inservible.
+     */
+    dismissOnOutsidePress?: boolean;
+    /** Se añade DESPUÉS de las clases propias del componente. */
+    className?: string;
+}
+/**
+ * El ancla fija de la aplicación: un lanzador siempre visible en una esquina
+ * de la ventana que abre un panel sobre el contenido, sin sacar a nadie de la
+ * página en la que está. Es donde vive un asistente.
+ *
+ * El panel es un **diálogo no modal**: no hay velo, no atrapa el foco y la
+ * página sigue viva detrás — se puede seguir leyendo, desplazando y escribiendo
+ * mientras está abierto. Lo que sí hace Base UI `Dialog` es lo que un diálogo
+ * debe: nombrarlo, meter el foco dentro al abrirlo, devolverlo al lanzador al
+ * cerrarlo y cerrar con Escape.
+ *
+ * El contenido lo pone el producto (`children`): el DS aporta el sitio, la
+ * conducta y la superficie, no lo que se hace dentro.
+ *
+ * `{...rest}` (`id`, `data-*`, `aria-*` y los handlers) viaja al contenedor
+ * anclado, y `className` se concatena tras las clases propias.
+ */
+export declare function FloatingDock({ label, title, titleHidden, description, children, icon, position, open, defaultOpen, onOpenChange, closeLabel, badge, badgeMax, badgeLabel, badgeLive, dismissOnOutsidePress, className, ...rest }: FloatingDockProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/sections/Hero/Hero.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import { type ContainerWidth } from '../../atoms/Container/Container';
+import './Hero.css';
+export interface HeroProps {
+    /** El título de la portada: un `Heading` de nivel 1 a talla 10 (display). */
+    title: ReactNode;
+    /** La frase bajo el título, opcional: `Paragraph size="large"`. */
+    description?: ReactNode;
+    /** Uno o varios botones (`Button`), en fila con envoltura (`Inline`), bajo el texto. Van a talla `lg`: la escala del Hero lo pide, y el consumidor no tiene que acordarse de pasarla. */
+    actions?: ReactNode;
+    /** Ancho del contenido; la banda siempre llega de lado a lado. El mismo de la barra del `SiteHeader`. */
+    width?: ContainerWidth;
+    className?: string;
+    id?: string;
+}
+/**
+ * Cabecera de portada de un sitio público: el título a talla display, una
+ * frase y, si hace falta, sus botones, todo alineado a la izquierda.
+ *
+ * Se monta **a sangre**, sin envoltorio: la sección trae su propio aire
+ * vertical (`--hero-space-block-start/-end`, un peldaño menor en móvil) y su
+ * `Container` interior para el aire lateral, con el mismo ancho que la barra
+ * del `SiteHeader`. Así la portada se ve igual en cualquier página, sin
+ * depender de dónde se cuelgue. Título y frase se limitan a la medida de
+ * lectura (`--content-measure`); el fondo lo pone la superficie (`SiteShell`,
+ * `.surface-dark`), no la sección.
+ */
+export declare function Hero({ title, description, actions, width, className, id }: HeroProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/sections/Highlight/Highlight.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import { type ContainerWidth } from '../../atoms/Container/Container';
+import { type HeadingLevel, type HeadingSize } from '../../atoms/Heading/Heading';
+import './Highlight.css';
+export interface HighlightProps {
+    /** El titular de la banda. */
+    title: ReactNode;
+    /** El texto bajo el titular. */
+    description?: ReactNode;
+    /** Uno o varios `Button`, en fila con envoltura (`Inline`). */
+    actions?: ReactNode;
+    /** Slot libre al lado del texto: una imagen, un vídeo, una tarjeta. */
+    media?: ReactNode;
+    /** De qué lado va la media. Por defecto a la derecha del texto. */
+    mediaPosition?: 'start' | 'end';
+    /** Superficie de la banda. Por defecto oscura: es una banda destacada. */
+    surface?: 'dark' | 'light';
+    /** Nivel semántico del titular. Por defecto `2`. */
+    titleLevel?: HeadingLevel;
+    /** Talla del titular. Por defecto `8` (40px), un peldaño por debajo del `Hero`. */
+    titleSize?: HeadingSize;
+    /** Ancho del contenido; la banda siempre llega de lado a lado. Como en el resto de secciones. */
+    width?: ContainerWidth;
+    className?: string;
+    id?: string;
+}
+/**
+ * La banda destacada de una página pública: un titular, un texto, sus botones
+ * y, si hace falta, algo al lado —una imagen, un vídeo, una tarjeta—. Es lo
+ * que corta una portada en dos y dice «esto es lo importante».
+ *
+ * Va sobre superficie oscura por defecto y no pinta ningún color propio: el
+ * lienzo es el del sistema (`.surface-dark`), y con `surface="light"` la banda
+ * entera voltea. El reparto en dos columnas es el `Columns` del sistema, así
+ * que en móvil se apila sin punto de ruptura escrito aquí.
+ *
+ * Se monta **a sangre**, sin envoltorio: trae su propio aire vertical
+ * (`--highlight-space-block-start/-end`, un peldaño menor en móvil) y su
+ * `Container` interior para el aire lateral, así que se ve igual en cualquier
+ * página.
+ */
+export declare function Highlight({ title, description, actions, media, mediaPosition, surface, titleLevel, titleSize, width, className, id, }: HighlightProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/sections/LegalFooter/LegalFooter.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import { type ContainerWidth } from '../../atoms/Container/Container';
+import './LegalFooter.css';
+export interface LegalFooterLink {
+    id: string;
+    label: string;
+    href: string;
+}
+export type LegalFooterRenderLinkProps = {
+    href: string;
+    className: string;
+    children: ReactNode;
+};
+export interface LegalFooterProps {
+    /** Nombre accesible del `nav`. */
+    label?: string;
+    /** Título opcional sobre los enlaces. */
+    title?: string;
+    links: LegalFooterLink[];
+    /** Enlace del router del producto. Debe reenviar todas las props. */
+    renderLink?: (props: LegalFooterRenderLinkProps) => ReactNode;
+    /** Ancho del contenido, como en `SiteHeader`. */
+    width?: ContainerWidth;
+    /** Pie sobre superficie oscura. */
+    surface?: 'dark';
+    className?: string;
+}
+/**
+ * El pie legal: los enlaces a aviso legal, privacidad, cookies y condiciones,
+ * y nada más. Se monta a sangre, con su propio aire vertical
+ * (`--legal-footer-padding-block`) y el contenido acotado por su `Container`
+ * interior. Es el pie de las aplicaciones de la suite; la web tiene su pie
+ * propio con más cosas.
+ */
+export declare function LegalFooter({ label, title, links, renderLink, width, surface, className, }: LegalFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/sections/Sidebar/Sidebar.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react';
+import './Sidebar.css';
+export { useSidebar } from './SidebarContext';
+export interface SidebarProps {
+    /** Arriba del todo (un `Logo`). */
+    logo?: ReactNode;
+    /** El panel: `OrgSwitcher`, `SidebarNav`, secciones… */
+    children: ReactNode;
+    /** Pie fijo, fuera del scroll del panel. */
+    footer?: ReactNode;
+    id?: string;
+    /** Nombre accesible del `aside`. Default: «Barra lateral» (castellano). Una app multiidioma debe pasarlo traducido. */
+    label?: string;
+    /** Texto accesible del asa de redimensión. Default: «Ancho de la barra lateral» (castellano). Una app multiidioma debe pasarlo traducido. */
+    resizerLabel?: string;
+    /** Valor hablado del asa: el ancho con su unidad. Default: «N píxeles» (castellano). Una app multiidioma debe pasarlo traducido. */
+    resizerValueText?: (width: number) => string;
+    /** Fuerza el modo sin `AppShell` (Storybook, pruebas). Con shell, lo decide el shell. */
+    mode?: 'open' | 'rail';
+}
+/**
+ * La barra lateral de la aplicación. En escritorio es una columna con tres
+ * estados que gobierna el `AppShell`: desplegada (ancho redimensionable
+ * arrastrando su borde o con el teclado en el asa), rail (solo iconos; los
+ * grupos de navegación se abren como menú) y cerrada. En móvil es un cajón
+ * que entra por la izquierda y se cierra al navegar.
+ */
+export declare function Sidebar({ logo, children, footer, id, label, resizerLabel, resizerValueText, mode, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** Sección del panel: agrupa un bloque (p. ej. el árbol de carpetas) con su propio aire vertical. */
+export declare function SidebarGroup({ className, ...props }: SidebarGroupProps): import("react/jsx-runtime").JSX.Element;
+/** Contenido de una sección — la lista en sí, sin el aire del grupo. */
+export declare function SidebarGroupContent({ className, ...props }: SidebarGroupProps): import("react/jsx-runtime").JSX.Element;
+/** Línea divisoria entre secciones del panel. */
+export declare function SidebarSeparator({ className, ...props }: React.HTMLAttributes<HTMLHRElement>): import("react/jsx-runtime").JSX.Element;

package/dist/_types/sections/Sidebar/SidebarContext.d.ts

@@ -0,0 +1,6 @@
+export interface SidebarContextValue {
+    /** La sidebar está en rail: solo iconos. `SidebarNav` lo lee para cambiar de modo. */
+    rail: boolean;
+}
+export declare const SidebarContext: import("react").Context<SidebarContextValue>;
+export declare function useSidebar(): SidebarContextValue;

package/dist/_types/sections/SiteFooter/SiteFooter.d.ts

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+import { type ContainerWidth } from '../../atoms/Container/Container';
+import { type HeadingLevel } from '../../atoms/Heading/Heading';
+import './SiteFooter.css';
+export interface SiteFooterLink {
+    /** Clave de React. Sin ella se usa el `href`. */
+    id?: string;
+    label: string;
+    href: string;
+    /** Abre en otra pestaña (`target="_blank"` con su `rel`). */
+    external?: boolean;
+}
+export interface SiteFooterColumn {
+    /** Clave de React. Sin ella se usa el título. */
+    id?: string;
+    /** Título de la columna. Es también el nombre accesible de su `nav`. */
+    title: string;
+    links: SiteFooterLink[];
+}
+export type SiteFooterRenderLinkProps = {
+    href: string;
+    className: string;
+    children: ReactNode;
+    target?: string;
+    rel?: string;
+};
+export interface SiteFooterProps {
+    /** El logotipo. Por defecto el de Studio LXD a talla `lg`. */
+    logo?: ReactNode;
+    /** La frase bajo el logotipo. */
+    tagline?: ReactNode;
+    /** Columnas de enlaces. */
+    columns?: SiteFooterColumn[];
+    /** Enlace del router del producto. Debe reenviar todas las props. */
+    renderLink?: (props: SiteFooterRenderLinkProps) => ReactNode;
+    /**
+     * Bloque libre a la derecha de las columnas: los datos de contacto, el
+     * formulario de newsletter, las redes. Lo compone quien usa el pie con los
+     * componentes del sistema; el pie solo le reserva el sitio.
+     */
+    aside?: ReactNode;
+    /** Bloque legal bajo el pie, separado por una línea. Se espera un `LegalFooter`. */
+    legal?: ReactNode;
+    /** Nivel semántico del título de cada columna. Por defecto `2`. */
+    columnTitleLevel?: HeadingLevel;
+    /** Superficie del pie. Por defecto oscura: es el cierre de una página pública. */
+    surface?: 'dark' | 'light';
+    /** Ancho del contenido, como en `SiteHeader`. */
+    width?: ContainerWidth;
+    className?: string;
+    id?: string;
+}
+/**
+ * El pie de una página pública: la marca con su frase, las columnas de
+ * enlaces, un bloque libre para el contacto o la newsletter y, debajo, el pie
+ * legal. Fondo a sangre y contenido acotado por su `Container` interior, como
+ * el resto de secciones, con su propio aire vertical
+ * (`--site-footer-space-block-start/-end`, un peldaño menor en móvil): no se
+ * envuelve en nada.
+ *
+ * Va sobre superficie oscura por defecto —es el cierre de la página— y no
+ * pinta ningún color por su cuenta: el lienzo lo pone la superficie, así que
+ * cambiar `surface` a `light` basta para que todo el pie voltee.
+ *
+ * Es el hermano mayor de `LegalFooter`, que sigue siendo el pie de las
+ * aplicaciones de la suite: solo los enlaces legales y nada más.
+ */
+export declare function SiteFooter({ logo, tagline, columns, renderLink, aside, legal, columnTitleLevel, surface, width, className, id, }: SiteFooterProps): import("react/jsx-runtime").JSX.Element;