@studiolxd/brand 49.21.0 → 49.23.0

package/dist/_types/molecules/ColorPicker/ColorArea.d.ts

@@ -0,0 +1,51 @@
+/** Saturación y brillo, de 0 a 100. */
+export interface AreaValue {
+    s: number;
+    v: number;
+}
+interface ColorAreaProps {
+    /** Tono del fondo del área, ya en hex opaco. */
+    hueColor: string;
+    saturation: number;
+    brightness: number;
+    /** Mientras se arrastra o con cada tecla. */
+    onChange: (value: AreaValue) => void;
+    /** Al soltar el puntero, o con cada tecla. */
+    onCommit: (value: AreaValue) => void;
+    label: string;
+    roleDescription: string;
+    valueText: string;
+    disabled?: boolean;
+}
+/**
+ * El área de saturación × brillo: la única pieza del selector que no sale de
+ * Base UI, porque Base UI no tiene un deslizador de dos dimensiones.
+ *
+ * Accesibilidad: la APG de WAI-ARIA no define un patrón de deslizador 2D, así
+ * que se sigue su **patrón Slider** extendido a dos ejes, que es lo que hacen
+ * los selectores de color accesibles: el pulgar es **un** `role="slider"`
+ * enfocable, con `aria-roledescription` que dice que es bidimensional,
+ * `aria-valuenow` en el eje horizontal (saturación) y `aria-valuetext` con los
+ * dos valores, que es lo que lee el lector de pantalla en cada cambio.
+ *
+ * Teclado —el del patrón Slider, en dos ejes—:
+ * - `←`/`→`: saturación ±1 (en RTL, `→` resta: la flecha va hacia donde se
+ *   mueve el pulgar). `↑`/`↓`: brillo ±1.
+ * - `Mayús`+flecha: el mismo eje ±10.
+ * - `RePág`/`AvPág`: brillo ±10. Con `Mayús`, saturación ±10.
+ * - `Inicio`/`Fin`: saturación al mínimo y al máximo. Con `Ctrl`, el brillo.
+ *
+ * Puntero (ratón, lápiz y táctil): el área captura el puntero al pulsar
+ * (`setPointerCapture`), así que el arrastre sigue aunque se salga del área
+ * —y no cuenta como clic fuera del panel, porque empezó dentro—. El foco pasa
+ * al pulgar al pulsar, para que el teclado siga donde se dejó el ratón.
+ *
+ * La dirección es la de Base UI (`DirectionProvider`), la misma que invierte
+ * las bandas: en RTL la saturación crece hacia la izquierda.
+ *
+ * La posición del pulgar y el tono del fondo se escriben por el CSSOM
+ * (`useCssProperties`): el área solo existe dentro del panel, que se pinta en
+ * cliente, así que no hay HTML de servidor que la CSP pudiera descartar.
+ */
+export declare const ColorArea: import("react").ForwardRefExoticComponent<ColorAreaProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/_types/molecules/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,130 @@
+import type { PopoverChangeDetails } from '../../atoms/Popover/Popover';
+import './ColorPicker.css';
+/**
+ * El cromo del selector de color. Ninguno trae el castellano puesto: salen
+ * del `BrandMessagesProvider` (espacio `colorPicker`), y cada uno se lee
+ * **donde se pinta** —un selector sin transparencia no exige `alpha`, uno sin
+ * predefinidos no exige `presets`—.
+ *
+ * Las cifras no son texto: saturación y brillo llegan como números a
+ * `areaValue`, y el tono y la opacidad los formatea `Intl` con `locale`.
+ */
+export interface ColorPickerMessages {
+    /** Nombre del disparador cuando va suelto, sin etiqueta ni `aria-label`. */
+    trigger: string;
+    /** El valor actual, que describe el disparador. Recibe el hex. */
+    value: (hex: string) => string;
+    /** Descripción del disparador cuando no hay color. */
+    empty: string;
+    /** Nombre del panel (`role="dialog"`) cuando el selector va suelto. */
+    dialog: string;
+    /** Nombre del área de saturación y brillo. */
+    area: string;
+    /** `aria-roledescription` del área: dice que el deslizador tiene dos ejes. */
+    areaDescription: string;
+    /** Lo que anuncia el área: saturación y brillo, de 0 a 100, ya redondeados. */
+    areaValue: (saturation: number, brightness: number) => string;
+    /** Nombre de la banda de tono. */
+    hue: string;
+    /** Nombre de la banda de opacidad (solo con `alpha`). */
+    alpha: string;
+    /** Nombre del campo hexadecimal. */
+    hex: string;
+    /** Nombre del grupo de predefinidos (solo con `presets`). */
+    presets: string;
+    /** Botón de quitar el color (solo con `clearable`). */
+    clear: string;
+}
+/** Un color predefinido: el valor y el nombre con que se anuncia. */
+export interface ColorPickerPreset {
+    /** Hex de 3, 4, 6 u 8 dígitos. Lo que no sea hex no se ofrece. */
+    color: string;
+    /** Nombre accesible y rótulo emergente: «Lavanda», «Texto». */
+    title: string;
+}
+export interface ColorPickerProps {
+    /**
+     * Valor (controlado): un hex. `null` es «sin color». Si llega algo que no es
+     * hex (`transparent`, un nombre), la muestra lo pinta tal cual y el panel
+     * arranca en negro.
+     */
+    value?: string | null;
+    /** Valor al montar (no controlado). */
+    defaultValue?: string | null;
+    /**
+     * Se llama mientras se elige —en cada paso del arrastre, con cada tecla—,
+     * con el hex en minúsculas: `#rrggbb`, o `#rrggbbaa` con `alpha`. Es el sitio
+     * de la vista previa.
+     */
+    onValueChange?: (hex: string) => void;
+    /**
+     * Se llama al terminar un gesto: al soltar el área o una banda, con cada
+     * tecla, al elegir un predefinido o al escribir un hex válido. Es el sitio
+     * del guardado.
+     */
+    onValueCommitted?: (hex: string) => void;
+    /**
+     * Con transparencia: pinta la banda de opacidad y emite `#rrggbbaa`. Por
+     * defecto `false`: emite `#rrggbb` y descarta el alfa de lo que entre.
+     */
+    alpha?: boolean;
+    /** Colores predefinidos, con su nombre: la paleta de un tema. */
+    presets?: ColorPickerPreset[];
+    /** Añade «Quitar color» al pie del panel. */
+    clearable?: boolean;
+    /**
+     * Se llama al quitar el color, y el panel se cierra (con `open` controlado,
+     * lo cierra quien lo controla, aquí mismo). Sin controlar, el valor pasa a
+     * `null`.
+     */
+    onClear?: () => void;
+    /**
+     * Panel abierto (controlado). Sin él, el panel se abre con el disparador y
+     * se cierra con Escape, con un clic fuera o al quitar el color; elegir un
+     * color **no** lo cierra. Controlado, quien lo usa puede cerrarlo en
+     * `onValueCommitted`.
+     */
+    open?: boolean;
+    /** Panel abierto al montar (no controlado). */
+    defaultOpen?: boolean;
+    /**
+     * Se llama al abrirse y al cerrarse por el disparador, Escape o un clic
+     * fuera. El segundo argumento es el detalle de Base UI, como en `Popover`.
+     */
+    onOpenChange?: (open: boolean, details: PopoverChangeDetails) => void;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    /** Pone el disparador en error (lo hace el campo cuando trae `errorMessage`). */
+    error?: boolean;
+    /** Locale con que `Intl` formatea el tono y la opacidad. */
+    locale?: string;
+    /** `id` del disparador: lo apunta el `htmlFor` de la etiqueta. */
+    id?: string;
+    /** Nombre en el formulario: se monta un input oculto con el hex. */
+    name?: string;
+    /** Nombre accesible del disparador cuando va suelto. */
+    'aria-label'?: string;
+    /** Lo pone el campo: la etiqueta nombra el disparador. */
+    'aria-labelledby'?: string;
+    /** Ids de ayuda/error que describen el disparador (lo pone el campo). */
+    'aria-describedby'?: string;
+    /**
+     * Nombre del panel. **Sin default**: sin él, sale de `colorPicker.dialog`.
+     * En un campo lo pone la etiqueta.
+     */
+    dialogLabel?: string;
+    /** Texto de «Quitar color». **Sin default**: sin él, `colorPicker.clear`. */
+    clearLabel?: string;
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+}
+/**
+ * Selector de color: una muestra que abre un panel con el área de saturación
+ * y brillo, la banda de tono, la de opacidad (con `alpha`), el campo hex y los
+ * predefinidos. Emite siempre hex en minúsculas.
+ *
+ * Todo es Base UI salvo el área 2D: el `Popover` (foco, portal, cierre), las
+ * bandas (`Slider`) y el campo (`Input`) son los de brand. El `ref` va al
+ * disparador.
+ */
+export declare const ColorPicker: import("react").ForwardRefExoticComponent<ColorPickerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/_types/molecules/ColorPicker/colorModel.d.ts

@@ -0,0 +1,54 @@
+/**
+ * El modelo del selector de color: conversiones puras entre hexadecimal, RGB y
+ * HSV, sin dependencias.
+ *
+ * El selector trabaja en **HSV** (tono, saturación, brillo) porque es el
+ * espacio de sus controles: el área es saturación × brillo y la banda es el
+ * tono. Pero lo que entra y sale es **hexadecimal en minúsculas**: `#rrggbb`,
+ * o `#rrggbbaa` cuando hay transparencia. Por eso el estado vivo es un `Hsva`
+ * y el hex se deriva: ida y vuelta por hex se pierde el tono de un gris (todo
+ * gris es `s = 0` con cualquier tono), y el pulgar de la banda saltaría a cero
+ * al arrastrar por la columna del gris.
+ */
+/** Canales de 0 a 255 y alfa de 0 a 1. */
+export interface Rgba {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+/** Tono de 0 a 360, saturación y brillo de 0 a 100, alfa de 0 a 1. */
+export interface Hsva {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+/**
+ * Lee un hexadecimal de 3, 4, 6 u 8 dígitos, con o sin `#`, en mayúsculas o
+ * minúsculas. Cualquier otra cosa —un nombre CSS, `rgb()`, `transparent`—
+ * devuelve `null`: el selector solo edita hex; la muestra sí pinta cualquier
+ * color CSS.
+ */
+export declare function parseHex(input: string): Rgba | null;
+/**
+ * `#rrggbb` en minúsculas, o `#rrggbbaa` con `alpha`. Con `alpha` el par del
+ * alfa va siempre, también cuando es opaco (`ff`): el formato no cambia de
+ * longitud según el valor.
+ */
+export declare function formatHex({ r, g, b, a }: Rgba, alpha: boolean): string;
+export declare function rgbToHsv({ r, g, b, a }: Rgba): Hsva;
+export declare function hsvToRgb({ h, s, v, a }: Hsva): Rgba;
+export declare function hexToHsva(hex: string): Hsva | null;
+export declare function hsvaToHex(hsva: Hsva, alpha: boolean): string;
+/**
+ * Normaliza un hex a la forma que emite el selector (`#rrggbb` o
+ * `#rrggbbaa`, minúsculas), o `null` si no lo es. Sin `alpha`, la
+ * transparencia de un `#rrggbbaa` se descarta.
+ */
+export declare function normalizeHex(input: string, alpha: boolean): string | null;
+/**
+ * Las paradas del degradado de tono, cada 60°: los seis colores puros y la
+ * vuelta al rojo. Salen del propio modelo, no de una lista escrita a mano.
+ */
+export declare function hueStops(): string[];

package/dist/_types/molecules/ColorPickerField/ColorPickerField.d.ts

@@ -0,0 +1,26 @@
+import type { ColorPickerProps } from '../ColorPicker/ColorPicker';
+import './ColorPickerField.css';
+export interface ColorPickerFieldProps extends Omit<ColorPickerProps, 'id' | 'aria-describedby' | 'aria-label' | 'aria-labelledby'> {
+    /** `id` del disparador. Si no se pasa, se genera con `useId`. */
+    id?: string;
+    label: string;
+    /**
+     * Oculta la etiqueta a la vista (sigue leyéndola el lector de pantalla).
+     * Por defecto `false`. Sin valor, lo decide quien lo envuelva: dentro de un
+     * `FieldRow` que no es la primera de la lista, la etiqueta se oculta sola.
+     */
+    labelHidden?: boolean;
+    /** Mensaje de error: se anuncia (`role="alert"`) y pone el disparador en error. */
+    errorMessage?: string;
+    /** Texto de ayuda, enlazado por `aria-describedby`. */
+    helperText?: string;
+    /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
+    className?: string;
+}
+/**
+ * El `ColorPicker` como campo de formulario: etiqueta, disparador, ayuda y
+ * error. La etiqueta nombra el disparador y el panel; el `ref` va al
+ * **disparador**, para que react-hook-form pueda enfocarlo al fallar la
+ * validación; el `className`, al contenedor.
+ */
+export declare const ColorPickerField: import("react").ForwardRefExoticComponent<ColorPickerFieldProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,6 +1,41 @@
 import { type ReactNode } from 'react';
 import './AppHeader.css';
+export type AppHeaderLogoLinkProps = {
+    href: string;
+    className: string;
+    'aria-label': string;
+    children: ReactNode;
+};
+/**
+ * El único texto propio de la barra, y solo cuando lleva `logo`: es **cromo**,
+ * qué hace el logotipo («ir al inicio»), no qué marca es — el mismo criterio
+ * que `siteHeader.logo`.
+ */
+export interface AppHeaderMessages {
+    /** Texto accesible del enlace del logotipo. */
+    logo: string;
+}
 export interface AppHeaderProps {
+    /**
+     * La marca del producto, entre el botón de menú y `start`: un `Logo`, un SVG
+     * o una imagen de cualquier proporción. Toma el alto de contenido de la barra
+     * (`--app-header-content-height`) y el ancho que le dé su proporción; no hay
+     * que darle medidas. Sin `logo`, la barra no cambia.
+     */
+    logo?: ReactNode;
+    /** Destino del logotipo. Solo se usa con `logo`. */
+    logoHref?: string;
+    /**
+     * Texto accesible del enlace del logotipo. **Sin default**: sin él, sale de
+     * `appHeader.logo` del `BrandMessagesProvider`. Solo se lee con `logo`.
+     */
+    logoLabel?: string;
+    /**
+     * Enlace del logotipo para el router del producto. Recibe `href`, `className`,
+     * `aria-label` y `children`, y debe reenviarlos todos. Mismo contrato que en
+     * `SiteHeader`.
+     */
+    renderLogoLink?: (props: AppHeaderLogoLinkProps) => ReactNode;
     /** 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. */
@@ -24,6 +59,6 @@ export interface AppHeaderProps {
  * 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.
+ * página necesite. Con `logo`, la marca del producto va justo tras el botón.
  */
-export declare function AppHeader({ start, notifications, end, menuLabel, menuCloseLabel, sidebarId, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppHeader({ logo, logoHref, logoLabel, renderLogoLink, start, notifications, end, menuLabel, menuCloseLabel, sidebarId, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/app-header.css

@@ -1 +1 @@
-.app-header{align-items:center;gap:var(--app-header-gap);block-size:var(--app-header-height);padding-inline:var(--app-header-padding-inline);box-sizing:content-box;background-color:var(--app-header-bg);box-shadow:0 var(--app-header-border-width) 0 var(--app-header-border-color);z-index:var(--app-header-z-index);flex-shrink:0;padding-block-start:env(safe-area-inset-top);display:flex;position:sticky;inset-block-start:0}.app-header__start{flex:1;align-items:center;min-inline-size:0;display:flex}.app-header__notifications,.app-header__end{flex-shrink:0;align-items:center;display:flex}
+.app-header{align-items:center;gap:var(--app-header-gap);block-size:var(--app-header-height);padding-inline:var(--app-header-padding-inline);box-sizing:content-box;background-color:var(--app-header-bg);box-shadow:0 var(--app-header-border-width) 0 var(--app-header-border-color);z-index:var(--app-header-z-index);flex-shrink:0;padding-block-start:env(safe-area-inset-top);display:flex;position:sticky;inset-block-start:0}.app-header__start{flex:1;align-items:center;min-inline-size:0;display:flex}.app-header__notifications,.app-header__end{flex-shrink:0;align-items:center;display:flex}.app-header__logo{box-shadow:none;color:inherit;--logo-height-sm:var(--app-header-content-height);--logo-height-md:var(--app-header-content-height);--logo-height-lg:var(--app-header-content-height);--logo-height-xl:var(--app-header-content-height);--logo-height-xxl:var(--app-header-content-height);flex-shrink:0;align-items:center;padding-block-end:0;display:flex}.app-header__logo:hover{box-shadow:none;color:inherit}.app-header__logo>*{block-size:var(--app-header-content-height);inline-size:auto}

package/dist/app-header.js

@@ -1,37 +1,50 @@
 'use client';
 import './app-header.css';
-import { MenuButton as e } from "./menu-button.js";
-import { t } from "./_shared/appshellcontext.js";
-import { useContext as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { MenuButton as t } from "./menu-button.js";
+import { t as n } from "./_shared/appshellcontext.js";
+import { useContext as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/stories/sections/AppHeader/AppHeader.tsx
-function o({ start: o, notifications: s, end: c, menuLabel: l, menuCloseLabel: u, sidebarId: d }) {
-	let f = n(t), [p, m] = r(!1), h = f ? f.sidebar === "open" : p;
-	return /* @__PURE__ */ a("header", {
+function s({ children: e, ...t }) {
+	return /* @__PURE__ */ a("a", {
+		...t,
+		children: e
+	});
+}
+function c({ logo: c, logoHref: l = "/", logoLabel: u, renderLogoLink: d = s, start: f, notifications: p, end: m, menuLabel: h, menuCloseLabel: g, sidebarId: _ }) {
+	let v = r(n), [y, b] = i(!1), x = v ? v.sidebar === "open" : y, S = v ? v.toggleSidebar : () => b((e) => !e), C = e("appHeader");
+	return /* @__PURE__ */ o("header", {
 		className: "app-header",
 		children: [
-			/* @__PURE__ */ i(e, {
-				isOpen: h,
-				onClick: f ? f.toggleSidebar : () => m((e) => !e),
-				label: l,
-				closeLabel: u,
-				"aria-controls": d,
-				"aria-expanded": h
+			/* @__PURE__ */ a(t, {
+				isOpen: x,
+				onClick: S,
+				label: h,
+				closeLabel: g,
+				"aria-controls": _,
+				"aria-expanded": x
 			}),
-			/* @__PURE__ */ i("div", {
+			c && d({
+				href: l,
+				className: "app-header__logo",
+				"aria-label": C("logo", u),
+				children: c
+			}),
+			/* @__PURE__ */ a("div", {
 				className: "app-header__start",
-				children: o
+				children: f
 			}),
-			s && /* @__PURE__ */ i("div", {
+			p && /* @__PURE__ */ a("div", {
 				className: "app-header__notifications",
-				children: s
+				children: p
 			}),
-			c && /* @__PURE__ */ i("div", {
+			m && /* @__PURE__ */ a("div", {
 				className: "app-header__end",
-				children: c
+				children: m
 			})
 		]
 	});
 }
 //#endregion
-export { o as AppHeader };
+export { c as AppHeader };

package/dist/app-shell.css

@@ -1 +1 @@
-.app-shell{--app-shell-sidebar-width:var(--sidebar-width);--app-shell-banner-height:0px;--app-shell-chrome-block-start:calc(var(--app-shell-banner-height) + var(--app-header-height) + env(safe-area-inset-top));flex-direction:column;block-size:100dvh;display:flex;overflow:clip}.app-shell__banner{flex-shrink:0}.app-shell__body{flex:1;min-block-size:0;display:flex;position:relative}.app-shell__content{min-inline-size:0;padding-inline:var(--section-padding-inline);padding-block:var(--section-padding-block-lg);flex:1;padding-block-end:max(var(--section-padding-block-lg), env(safe-area-inset-bottom));padding-inline-end:max(var(--section-padding-inline), env(safe-area-inset-right));overflow:auto}.app-shell__content.app-shell__content--flush{padding-block:0;padding-inline:0;padding-block-end:env(safe-area-inset-bottom);padding-inline-end:env(safe-area-inset-right)}.app-shell__backdrop{inset:0;background-color:var(--sidebar-backdrop-bg);opacity:var(--sidebar-backdrop-opacity);z-index:var(--sidebar-backdrop-z-index);position:fixed;inset-block-start:var(--app-shell-chrome-block-start)}
+.app-shell{--app-shell-sidebar-width:var(--sidebar-width);--app-shell-banner-height:0px;--app-shell-chrome-block-start:calc(var(--app-shell-banner-height) + var(--app-header-height) + env(safe-area-inset-top));flex-direction:column;block-size:100dvh;display:flex;overflow:clip}.app-shell__banner{flex-shrink:0}.app-shell__body{flex:1;min-block-size:0;display:flex;position:relative}.app-shell__content{min-inline-size:0;padding-inline:var(--section-padding-inline);padding-block:var(--section-padding-block-lg);flex:1;padding-block-end:max(var(--section-padding-block-lg), env(safe-area-inset-bottom));padding-inline-end:max(var(--section-padding-inline), env(safe-area-inset-right));overflow:auto}.app-shell__content.app-shell__content--flush{padding-block:0;padding-inline:0;padding-block-end:env(safe-area-inset-bottom);padding-inline-end:env(safe-area-inset-right)}.app-shell__backdrop{inset:0;background-color:var(--sidebar-backdrop-bg);opacity:var(--sidebar-backdrop-opacity);z-index:var(--sidebar-backdrop-z-index);position:fixed;inset-block-start:var(--app-shell-chrome-block-start)}.app-shell:has(.app-header__logo) .sidebar__header{display:none}