@jotis-me/react 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,78 @@
-# Temporary Holding Version
+# @jotis-me/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Los componentes de la suite jotis.me para Next.js y Astro, con Tailwind CSS v4. Trae consigo `@jotis-me/tokens` (colores, tipografía, fuentes) y `@jotis-me/icons`.
+
+Documentación con ejemplos de cada componente: [regula.jotis.me](https://regula.jotis.me).
+
+## Next.js (App Router)
+
+```sh
+bun add @jotis-me/react tailwindcss @tailwindcss/postcss
+```
+
+`postcss.config.mjs`:
+
+```js
+export default { plugins: { "@tailwindcss/postcss": {} } };
+```
+
+`app/globals.css`:
+
+```css
+@import "tailwindcss";
+@import "@jotis-me/react/styles.css";
+```
+
+Impórtalo en `app/layout.tsx` y úsalos donde quieras:
+
+```tsx
+import { Button } from "@jotis-me/react";
+
+export default function Page() {
+	return <Button>Guardar</Button>;
+}
+```
+
+Los componentes sin estado funcionan como Server Components. Los interactivos ya llevan `"use client"`: impórtalos también desde páginas de servidor.
+
+## Astro
+
+```sh
+bunx astro add react
+bun add @jotis-me/react tailwindcss @tailwindcss/vite
+```
+
+`astro.config.mjs`:
+
+```js
+import react from "@astrojs/react";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "astro/config";
+
+export default defineConfig({ integrations: [react()], vite: { plugins: [tailwindcss()] } });
+```
+
+`src/styles/global.css`, importado desde tu layout:
+
+```css
+@import "tailwindcss";
+@import "@jotis-me/react/styles.css";
+```
+
+```astro
+---
+import { Button, ButtonGroup } from "@jotis-me/react";
+---
+<Button>Guardar</Button>                       <!-- HTML estático, sin JavaScript -->
+<ButtonGroup client:load items={[…]} />        <!-- interactivo: necesita client:* -->
+```
+
+Las props que son funciones (`onChange`…) no pueden pasar de un `.astro` a una isla: envuelve el componente en un `.tsx` y pásale ahí la función.
+
+## Modo oscuro
+
+Clase `dark-mode` en `<html>`. La variante `dark:` responde a esa clase.
+
+## Licencia
+
+MIT.

package/dist/components/ActivityFeed.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import { type AvatarProps } from "./Avatar.js";
+export interface ActivityItem {
+    author: ReactNode;
+    /** Por defecto, las dos primeras letras del autor. */
+    avatar?: AvatarProps;
+    time?: ReactNode;
+    /** Qué pasó. Admite `<strong>` para destacar el objeto. */
+    text: ReactNode;
+    /** Adjunto, etiquetas… bajo el texto. */
+    content?: ReactNode;
+    /** Punto `fg-success-secondary` a la derecha. */
+    unread?: boolean;
+    /** Punto de estado en línea en el avatar. */
+    online?: boolean;
+}
+export interface ActivityFeedProps {
+    items: ActivityItem[];
+    /** Línea vertical entre avatares en lugar de separadores (historial de un elemento). */
+    connector?: boolean;
+    /**
+     * Avatar de 40px (`md`) o 32px (`sm`).
+     * @default "md"
+     */
+    size?: "sm" | "md";
+    className?: string;
+}
+/** Lista cronológica de lo que ha pasado: quién hizo qué y cuándo. */
+export declare function ActivityFeed({ items, connector, size, className }: ActivityFeedProps): import("react").JSX.Element;

package/dist/components/ActivityFeed.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { defaultStrings } from "../internal/strings.js";
+import { Avatar } from "./Avatar.js";
+/** Lista cronológica de lo que ha pasado: quién hizo qué y cuándo. */
+export function ActivityFeed({ items, connector, size = "md", className }) {
+    return (_jsx("ol", { className: cx("m-0 flex max-w-[420px] list-none flex-col p-0 font-body", connector ? "gap-0" : "gap-4 [&>li+li]:border-t [&>li+li]:border-secondary [&>li+li]:pt-4", className), children: items.map((it, i) => (_jsxs("li", { className: "relative flex gap-3", children: [_jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx(Avatar, { size: size, status: it.online ? "online" : undefined, ...(it.avatar ?? {
+                                initials: typeof it.author === "string" ? it.author.slice(0, 2) : "?",
+                            }) }), connector && i < items.length - 1 ? (_jsx("span", { "aria-hidden": "true", className: "mb-1 min-h-4 w-0.5 flex-1 rounded-xs bg-[var(--border-secondary)]" })) : null] }), _jsxs("div", { className: cx("flex min-w-0 flex-1 flex-col gap-0.5 pr-4", connector && "pb-8"), children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-sm font-semibold text-secondary", children: it.author }), it.time ? _jsx("span", { className: "text-xs text-tertiary", children: it.time }) : null] }), _jsx("div", { className: "text-sm text-tertiary [&_b]:font-semibold [&_b]:text-secondary [&_strong]:font-semibold [&_strong]:text-secondary", children: it.text }), it.content ? _jsx("div", { className: "mt-2", children: it.content }) : null] }), it.unread ? (_jsx("span", { className: "absolute top-1 right-0 size-2 rounded-full bg-fg-success-secondary", children: _jsx("span", { className: "sr-only", children: defaultStrings.unread }) })) : null] }, i))) }));
+}

package/dist/components/Alert.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import type { StatusColor } from "./Badge.js";
+import type { IconName } from "./Icon.js";
+export interface AlertProps {
+    /**
+     * El color va solo en el icono: el texto sigue en `text-secondary` / `text-tertiary`.
+     * @default "gray"
+     */
+    color?: StatusColor;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Botones `link-gray` + `link-color`. */
+    actions?: ReactNode;
+    /** Muestra la X para descartarlo. */
+    onClose?: () => void;
+    /** Nombre de la X. @default "Descartar" */
+    closeLabel?: string;
+    /** Icono propio. Por defecto, uno según el color (`alert-circle` en error, `check-circle` en éxito…). */
+    icon?: IconName;
+    /**
+     * `floating`: tarjeta con borde y radio. `full`: a todo el ancho, sin radio y con línea inferior.
+     * @default "floating"
+     */
+    variant?: "floating" | "full";
+    className?: string;
+}
+/** Clases y contenido comunes a Alert y Notification. */
+export declare function alertBody({ color, title, description, actions, onClose, closeLabel, icon, }: AlertProps): import("react").JSX.Element;
+export declare const ALERT_BASE = "relative flex gap-4 p-4 font-body bg-primary_alt";
+/**
+ * Aviso en la página sobre algo que afecta a lo que el usuario está viendo.
+ * Los errores se anuncian como `alert`; el resto, como `status`.
+ */
+export declare function Alert(props: AlertProps): import("react").JSX.Element;

package/dist/components/Alert.js

@@ -0,0 +1,27 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { defaultStrings } from "../internal/strings.js";
+import { CloseButton } from "./CloseButton.js";
+import { FeaturedIcon } from "./FeaturedIcon.js";
+const ICON = {
+    gray: "info-circle",
+    brand: "info-circle",
+    error: "alert-circle",
+    warning: "alert-triangle",
+    success: "check-circle",
+};
+/** Clases y contenido comunes a Alert y Notification. */
+export function alertBody({ color = "gray", title, description, actions, onClose, closeLabel, icon, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(FeaturedIcon, { icon: icon ?? ICON[color], color: color, size: "md", variant: "outline" }), _jsxs("div", { className: "flex flex-1 flex-col gap-3 pr-8", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-semibold text-secondary", children: title }), description ? _jsx("div", { className: "mt-1 text-sm text-tertiary", children: description }) : null] }), actions ? _jsx("div", { className: "flex gap-3", children: actions }) : null] }), onClose ? (_jsx(CloseButton, { label: closeLabel ?? defaultStrings.dismiss, onClick: onClose, className: "absolute top-2 right-2" })) : null] }));
+}
+export const ALERT_BASE = "relative flex gap-4 p-4 font-body bg-primary_alt";
+/**
+ * Aviso en la página sobre algo que afecta a lo que el usuario está viendo.
+ * Los errores se anuncian como `alert`; el resto, como `status`.
+ */
+export function Alert(props) {
+    const { color = "gray", variant = "floating", className } = props;
+    return (_jsx("div", { role: color === "error" ? "alert" : "status", className: cx(ALERT_BASE, variant === "full"
+            ? "rounded-none shadow-[inset_0_-1px_0_var(--border-primary)]"
+            : "rounded-xl shadow-[var(--shadow-xs),inset_0_0_0_1px_var(--border-primary)]", className), children: alertBody(props) }));
+}

package/dist/components/AppIcon.d.ts

@@ -0,0 +1,27 @@
+import { type AppIconHue, type AppIconShape, type AppIconVariant, type AppName } from "@jotis-me/icons/app-icon";
+import type { CSSProperties } from "react";
+export type { AppIconHue, AppIconShape, AppIconVariant, AppName };
+/** Apps de la suite con su nombre, letras y tono. */
+export declare const appIcons: Record<"emptor" | "ornatus" | "pecunia" | "vinculum", import("@jotis-me/icons/app-icon").AppInfo>;
+export interface AppIconProps {
+    /** App de la suite. Para una nueva, `letters` + `hue`. */
+    app?: AppName;
+    /** Dos letras: mayúscula + minúscula. */
+    letters?: string;
+    /** Tono de la paleta para una app nueva. Nunca rojo, amarillo ni grises. */
+    hue?: AppIconHue;
+    /** Por debajo de 20px, si no lo pasas, sale `solid`. */
+    variant?: AppIconVariant;
+    /** Lado en px. Por defecto, 48. La virgulilla solo se dibuja desde 32px. */
+    size?: number;
+    /** `square` para el icono maskable de PWA. */
+    shape?: AppIconShape;
+    /** Fuerza o quita la virgulilla. */
+    tilde?: boolean;
+    /** Nombre accesible. Por defecto, el de la app. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Icono de una app de la suite: baldosa con dos letras en curvas y la virgulilla, en el tono de la app. */
+export declare function AppIcon({ size, className, style, ...options }: AppIconProps): import("react").JSX.Element;

package/dist/components/AppIcon.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { appIcon, apps, } from "@jotis-me/icons/app-icon";
+/** Apps de la suite con su nombre, letras y tono. */
+export const appIcons = apps;
+/** Icono de una app de la suite: baldosa con dos letras en curvas y la virgulilla, en el tono de la app. */
+export function AppIcon({ size = 48, className, style, ...options }) {
+    const { label, parts } = appIcon({ ...options, size });
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 128 128", role: "img", "aria-label": label, className: className, style: style, children: parts.map((p, i) => (_jsx("path", { d: p.d, fill: p.fill, stroke: p.stroke, strokeWidth: p.strokeWidth, strokeLinecap: p.strokeLinecap, vectorEffect: p.vectorEffect }, i))) }));
+}

package/dist/components/Avatar.d.ts

@@ -0,0 +1,20 @@
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type AvatarStatus = "online" | "offline";
+export interface AvatarProps {
+    /** Foto. Sin `src` ni `initials` se muestra el icono de usuario. */
+    src?: string;
+    /** Texto alternativo de la foto, o nombre accesible de las iniciales. */
+    alt?: string;
+    initials?: string;
+    /** Diámetro: `xs` 24 · `sm` 32 · `md` 40 · `lg` 48 · `xl` 56 · `2xl` 64. */
+    size?: AvatarSize;
+    /** Punto de estado abajo a la derecha. */
+    status?: AvatarStatus;
+    /** Texto del estado para lectores de pantalla. Por defecto, "En línea" o "Desconectado". */
+    statusLabel?: string;
+    /** Anillo `bg-primary` para apilar avatares. */
+    ring?: boolean;
+    className?: string;
+}
+/** Foto o iniciales de una persona en círculo, de 24 a 64px. */
+export declare function Avatar({ src, alt, initials, size, status, statusLabel, ring, className, }: AvatarProps): import("react").JSX.Element;

package/dist/components/Avatar.js

@@ -0,0 +1,27 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { defaultStrings } from "../internal/strings.js";
+import { Icon } from "./Icon.js";
+const SIZE = {
+    xs: "size-6 text-xs",
+    sm: "size-8 text-sm",
+    md: "size-10 text-md",
+    lg: "size-12 text-lg",
+    xl: "size-14 text-xl",
+    "2xl": "size-16 text-display-xs",
+};
+const ICON_SIZE = { xs: 16, sm: 20, md: 24, lg: 28, xl: 32, "2xl": 32 };
+// color-fijo: borde interior de 0,5px al 16 % negro para que la foto no se funda con el fondo (ficha de Avatar)
+const EDGE = "shadow-[inset_0_0_0_0.5px_#00000029]";
+// color-fijo: el mismo borde interior bajo el anillo para apilar (ficha de Avatar)
+const RING = "shadow-[0_0_0_1.5px_var(--bg-primary),inset_0_0_0_0.5px_#00000029]";
+/** Foto o iniciales de una persona en círculo, de 24 a 64px. */
+export function Avatar({ src, alt, initials, size = "md", status, statusLabel, ring, className, }) {
+    const statusText = status ? (statusLabel ?? defaultStrings[status]) : undefined;
+    // Con iniciales y `alt`, el avatar es una imagen con nombre: el estado entra en el nombre
+    const named = Boolean(alt && !src);
+    const a11y = named ? { role: "img", "aria-label": [alt, statusText].filter(Boolean).join(", ") } : {};
+    return (_jsxs("span", { ...a11y, className: cx("relative inline-flex shrink-0 items-center justify-center rounded-full bg-avatar-styles-bg-neutral font-semibold text-(color:--bg-secondary-solid)", SIZE[size], 
+        // Interlineado de la fuente, como la guía: con el de la escala las iniciales bajan un píxel
+        "leading-[normal]", ring ? RING : EDGE, className), children: [src ? (_jsx("img", { src: src, alt: alt ?? "", className: "size-full rounded-[inherit] object-cover" })) : initials ? (_jsx("span", { "aria-hidden": alt ? true : undefined, children: initials })) : (_jsx(Icon, { name: "user-01", size: ICON_SIZE[size] })), status ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: cx("absolute right-0 bottom-0 size-[30%] min-h-1.5 min-w-1.5 rounded-full shadow-[0_0_0_1.5px_var(--bg-primary)]", status === "online" ? "bg-fg-success-secondary" : "bg-fg-quaternary") }), named ? null : _jsx("span", { className: "sr-only", children: statusText })] })) : null] }));
+}

package/dist/components/AvatarGroup.d.ts

@@ -0,0 +1,10 @@
+import { type AvatarProps } from "./Avatar.js";
+export interface AvatarGroupProps {
+    /** Props de cada `Avatar`. El último puede ser "+N" en `initials`. */
+    items: AvatarProps[];
+    /** Tamaño de todos los avatares. Por defecto, `sm`. */
+    size?: AvatarProps["size"];
+    className?: string;
+}
+/** Avatares solapados 8px, cada uno con su anillo, para mostrar quién participa. */
+export declare function AvatarGroup({ items, size, className }: AvatarGroupProps): import("react").JSX.Element;

package/dist/components/AvatarGroup.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { Avatar } from "./Avatar.js";
+/** Avatares solapados 8px, cada uno con su anillo, para mostrar quién participa. */
+export function AvatarGroup({ items, size = "sm", className }) {
+    return (_jsx("span", { className: cx("inline-flex [&>*+*]:-ml-2", className), children: items.map((item, i) => (_jsx(Avatar, { size: size, ring: true, ...item }, i))) }));
+}

package/dist/components/AvatarLabel.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import { type AvatarProps } from "./Avatar.js";
+export interface AvatarLabelProps extends AvatarProps {
+    /** Nombre, en `text-sm` semibold y `text-primary`. */
+    name: ReactNode;
+    /** Línea de apoyo (correo, rol), en `text-tertiary`. */
+    supporting?: ReactNode;
+}
+/** Avatar con nombre y una línea de apoyo, para menús, filas de tabla y el sidebar. */
+export declare function AvatarLabel({ name, supporting, className, ...avatar }: AvatarLabelProps): import("react").JSX.Element;

package/dist/components/AvatarLabel.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { Avatar } from "./Avatar.js";
+/** Avatar con nombre y una línea de apoyo, para menús, filas de tabla y el sidebar. */
+export function AvatarLabel({ name, supporting, className, ...avatar }) {
+    return (_jsxs("span", { className: cx("inline-flex items-center gap-2 font-body", className), children: [_jsx(Avatar, { ...avatar }), _jsxs("span", { children: [_jsx("span", { className: "block text-sm font-semibold text-primary", children: name }), supporting ? _jsx("span", { className: "block text-sm text-tertiary", children: supporting }) : null] })] }));
+}

package/dist/components/BackgroundPattern.d.ts

@@ -0,0 +1,35 @@
+import { type CSSProperties } from "react";
+export type BackgroundPatternName = "grid" | "grid-dot" | "grid-check" | "circles" | "squares";
+export type BackgroundPatternMask = "radial" | "radial-down" | "radial-up" | "linear-down" | "linear-up" | "none";
+export interface BackgroundPatternProps {
+    /**
+     * `grid` rejilla · `grid-dot` puntos cada 32px · `grid-check` rejilla con casillas · `circles` y `squares`
+     * concéntricos.
+     * @default "grid"
+     */
+    pattern?: BackgroundPatternName;
+    /**
+     * Celda de 80/96/96px en las rejillas; lado de 336/480/768px en los concéntricos.
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Desvanecido hacia los bordes.
+     * @default "radial"
+     */
+    mask?: BackgroundPatternMask;
+    /** Ancho del área de la rejilla en px. @default 1536 */
+    width?: number;
+    /** Alto del área de la rejilla en px. @default 960 */
+    height?: number;
+    /** Reparto de las casillas en `grid-check`. @default 7 */
+    seed?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Fondo decorativo detrás de cabeceras, estados vacíos o tarjetas de bienvenida. Ocupa todo su contenedor
+ * (`absolute inset-0`): el padre necesita `relative` y el contenido, su propio `relative` para quedar encima.
+ * Lleva `aria-hidden`.
+ */
+export declare function BackgroundPattern({ pattern, size, mask, width, height, seed, className, style, }: BackgroundPatternProps): import("react").JSX.Element;

package/dist/components/BackgroundPattern.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { cx } from "../internal/cx.js";
+const CONCENTRIC = { sm: 336, md: 480, lg: 768 };
+const GRID_CELL = { sm: 80, md: 96, lg: 96 };
+// Máscaras con negro y transparente: solo cuenta el alfa, no es un color de la interfaz.
+const MASK = {
+    radial: "radial-gradient(closest-side, black, transparent)",
+    "radial-down": "radial-gradient(ellipse 60% 100% at 50% 0, black, transparent)",
+    "radial-up": "radial-gradient(ellipse 60% 100% at 50% 100%, black, transparent)",
+    "linear-down": "linear-gradient(black, transparent)",
+    "linear-up": "linear-gradient(transparent, black)",
+};
+const LINE = {
+    stroke: "var(--border-secondary)",
+    strokeWidth: 1,
+    fill: "none",
+    vectorEffect: "non-scaling-stroke",
+};
+/**
+ * Fondo decorativo detrás de cabeceras, estados vacíos o tarjetas de bienvenida. Ocupa todo su contenedor
+ * (`absolute inset-0`): el padre necesita `relative` y el contenido, su propio `relative` para quedar encima.
+ * Lleva `aria-hidden`.
+ */
+export function BackgroundPattern({ pattern = "grid", size = "md", mask = "radial", width = 1536, height = 960, seed = 7, className, style, }) {
+    const pid = `jm-bgp${useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+    let w;
+    let h;
+    const kids = [];
+    if (pattern === "circles" || pattern === "squares") {
+        w = h = CONCENTRIC[size];
+        const scale = w / 480;
+        const c = w / 2;
+        for (const d of [96, 160, 224, 288, 352, 416, 480]) {
+            const r = (d * scale) / 2 - 0.5;
+            kids.push(pattern === "circles" ? (_jsx("circle", { cx: c, cy: c, r: r, ...LINE }, d)) : (_jsx("rect", { x: c - r, y: c - r, width: r * 2, height: r * 2, rx: 2, ...LINE }, d)));
+        }
+    }
+    else {
+        const cell = pattern === "grid-dot" ? 32 : GRID_CELL[size];
+        const cols = Math.ceil(width / cell);
+        const rows = Math.ceil(height / cell);
+        w = cols * cell;
+        h = rows * cell;
+        if (pattern === "grid-dot") {
+            kids.push(_jsx("defs", { children: _jsx("pattern", { id: pid, width: cell, height: cell, patternUnits: "userSpaceOnUse", children: _jsx("circle", { cx: cell / 2, cy: cell / 2, r: 1.5, fill: "var(--utility-neutral-300)" }) }) }, "defs"), _jsx("rect", { width: w, height: h, fill: `url(#${pid})` }, "dots"));
+        }
+        else {
+            if (pattern === "grid-check") {
+                // Reparto determinista, cargado hacia el centro para que la máscara no lo esconda
+                let s = seed;
+                const rnd = () => {
+                    s = (s * 16807) % 2147483647;
+                    return s / 2147483647;
+                };
+                const n = Math.round(cols * rows * 0.09);
+                for (let i = 0; i < n; i++) {
+                    const x = Math.floor(cols / 2 + ((rnd() + rnd() - 1) * cols) / 2);
+                    const y = Math.floor(rows / 2 + ((rnd() + rnd() - 1) * rows) / 2);
+                    kids.push(_jsx("rect", { x: x * cell, y: y * cell, width: cell, height: cell, fill: "var(--bg-secondary)" }, `c${i}`));
+                }
+            }
+            let d = "";
+            for (let gx = 0; gx <= cols; gx++)
+                d += `M${gx * cell + 0.5} 0V${h}`;
+            for (let gy = 0; gy <= rows; gy++)
+                d += `M0 ${gy * cell + 0.5}H${w}`;
+            kids.push(_jsx("path", { d: d, ...LINE }, "grid"));
+        }
+    }
+    const maskImage = mask !== "none" ? MASK[mask] : undefined;
+    return (_jsx("div", { "aria-hidden": "true", className: cx("pointer-events-none absolute inset-0 z-0 overflow-hidden", className), style: maskImage ? { maskImage, WebkitMaskImage: maskImage, ...style } : style, children: _jsx("svg", { "aria-hidden": "true", width: w, height: h, viewBox: `0 0 ${w} ${h}`, className: "absolute top-1/2 left-1/2 block max-w-none -translate-1/2", children: kids }) }));
+}

package/dist/components/Badge.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import { type IconName } from "./Icon.js";
+export type StatusColor = "gray" | "brand" | "error" | "warning" | "success";
+export type BadgeColor = StatusColor | "slate" | "sky" | "blue" | "indigo" | "purple" | "pink" | "orange";
+export type BadgeType = "pill" | "badge" | "modern";
+export type BadgeSize = "sm" | "md" | "lg";
+export interface BadgeProps {
+    /** Escala utility: fondo `-50`, borde `-200`, texto `-700`, punto `-500`. */
+    color?: BadgeColor;
+    /** `pill` redonda · `badge` con `radius-md` · `modern` blanca con sombra. */
+    type?: BadgeType;
+    /** Alto: `sm` 22 · `md` 24 · `lg` 28. */
+    size?: BadgeSize;
+    /** Punto de color antes del texto. */
+    dot?: boolean;
+    /** Icono de 12px antes del texto. */
+    icon?: IconName;
+    /** Muestra una X para quitarlo. */
+    onRemove?: () => void;
+    /** Nombre accesible de la X. Por defecto, "Quitar". */
+    removeLabel?: string;
+    /** Una o dos palabras: el estado no puede depender solo del color. */
+    children: ReactNode;
+    className?: string;
+}
+interface Palette {
+    /** Fondo, texto y borde del badge. */
+    badge: string;
+    /** Fondo del punto. */
+    dot: string;
+    /** Color de la X y fondo al pasar por encima. */
+    remove: string;
+}
+/** Clases por color (también para los chips de eventos de CalendarView). */
+export declare const COLOR: Record<BadgeColor, Palette>;
+/** Etiqueta de estado o categoría de una o dos palabras. */
+export declare function Badge({ color, type, size, dot, icon, onRemove, removeLabel, children, className, }: BadgeProps): import("react").JSX.Element;
+export {};

package/dist/components/Badge.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { defaultStrings } from "../internal/strings.js";
+import { Icon } from "./Icon.js";
+// Clases enteras, no compuestas: Tailwind solo genera las que encuentra escritas.
+/** Clases por color (también para los chips de eventos de CalendarView). */
+export const COLOR = {
+    gray: {
+        badge: "bg-utility-neutral-50 text-utility-neutral-700 inset-ring-utility-neutral-200",
+        dot: "bg-utility-neutral-500",
+        remove: "text-utility-neutral-500 hover:bg-utility-neutral-200",
+    },
+    brand: {
+        badge: "bg-utility-brand-50 text-utility-brand-700 inset-ring-utility-brand-200",
+        dot: "bg-utility-brand-500",
+        remove: "text-utility-brand-500 hover:bg-utility-brand-200",
+    },
+    error: {
+        badge: "bg-utility-red-50 text-utility-red-700 inset-ring-utility-red-200",
+        dot: "bg-utility-red-500",
+        remove: "text-utility-red-500 hover:bg-utility-red-200",
+    },
+    warning: {
+        badge: "bg-utility-yellow-50 text-utility-yellow-700 inset-ring-utility-yellow-200",
+        dot: "bg-utility-yellow-500",
+        remove: "text-utility-yellow-500 hover:bg-utility-yellow-200",
+    },
+    success: {
+        badge: "bg-utility-green-50 text-utility-green-700 inset-ring-utility-green-200",
+        dot: "bg-utility-green-500",
+        remove: "text-utility-green-500 hover:bg-utility-green-200",
+    },
+    slate: {
+        badge: "bg-utility-slate-50 text-utility-slate-700 inset-ring-utility-slate-200",
+        dot: "bg-utility-slate-500",
+        remove: "text-utility-slate-500 hover:bg-utility-slate-200",
+    },
+    sky: {
+        badge: "bg-utility-sky-50 text-utility-sky-700 inset-ring-utility-sky-200",
+        dot: "bg-utility-sky-500",
+        remove: "text-utility-sky-500 hover:bg-utility-sky-200",
+    },
+    blue: {
+        badge: "bg-utility-blue-50 text-utility-blue-700 inset-ring-utility-blue-200",
+        dot: "bg-utility-blue-500",
+        remove: "text-utility-blue-500 hover:bg-utility-blue-200",
+    },
+    indigo: {
+        badge: "bg-utility-indigo-50 text-utility-indigo-700 inset-ring-utility-indigo-200",
+        dot: "bg-utility-indigo-500",
+        remove: "text-utility-indigo-500 hover:bg-utility-indigo-200",
+    },
+    purple: {
+        badge: "bg-utility-purple-50 text-utility-purple-700 inset-ring-utility-purple-200",
+        dot: "bg-utility-purple-500",
+        remove: "text-utility-purple-500 hover:bg-utility-purple-200",
+    },
+    pink: {
+        badge: "bg-utility-pink-50 text-utility-pink-700 inset-ring-utility-pink-200",
+        dot: "bg-utility-pink-500",
+        remove: "text-utility-pink-500 hover:bg-utility-pink-200",
+    },
+    orange: {
+        badge: "bg-utility-orange-50 text-utility-orange-700 inset-ring-utility-orange-200",
+        dot: "bg-utility-orange-500",
+        remove: "text-utility-orange-500 hover:bg-utility-orange-200",
+    },
+};
+// `modern` es blanca con sombra en todos los colores; el punto conserva el color
+const MODERN = "bg-primary text-secondary inset-ring-primary shadow-xs";
+const MODERN_REMOVE = "hover:bg-(--border-primary)";
+const PADDING = {
+    pill: { sm: "px-2 py-0.5", md: "px-2.5 py-0.5", lg: "px-3 py-1" },
+    badge: { sm: "px-1.5 py-0.5", md: "px-2 py-0.5", lg: "px-2.5 py-1 rounded-lg" },
+    modern: { sm: "px-2 py-0.5", md: "px-2 py-0.5", lg: "px-2.5 py-1 rounded-lg" },
+};
+/** Etiqueta de estado o categoría de una o dos palabras. */
+export function Badge({ color = "gray", type = "pill", size = "md", dot, icon, onRemove, removeLabel = defaultStrings.remove, children, className, }) {
+    const palette = COLOR[color];
+    const modern = type === "modern";
+    return (_jsxs("span", { className: cx("inline-flex items-center gap-1.5 whitespace-nowrap font-body text-sm font-medium inset-ring", type === "pill" ? "rounded-full" : "rounded-md", size === "sm" && "gap-1 text-xs", palette.badge, modern && MODERN, PADDING[type][size], dot && type === "pill" && "pl-2", className), children: [dot ? (_jsx("span", { "aria-hidden": "true", className: cx("m-px size-1.5 shrink-0 rounded-full", palette.dot) })) : null, icon ? _jsx(Icon, { name: icon, size: 12 }) : null, children, onRemove ? (_jsx("button", { type: "button", onClick: onRemove, "aria-label": removeLabel, className: cx("-my-0.5 -mr-1 -ml-0.5 inline-flex cursor-pointer rounded-sm bg-transparent p-0.5 transition-colors duration-100 focus-visible:shadow-focus-ring focus-visible:outline-none", palette.remove, modern && MODERN_REMOVE), children: _jsx(Icon, { name: "x-close", size: 12 }) })) : null] }));
+}

package/dist/components/Banner.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from "react";
+import type { IconName } from "./Icon.js";
+export interface BannerEmail {
+    /** @default "Tu correo" */
+    placeholder?: string;
+    /** @default "Suscribirme" */
+    buttonLabel?: string;
+    /** Texto bajo el campo, como "Puedes darte de baja cuando quieras." */
+    hint?: ReactNode;
+    onSubmit?: (value: string) => void;
+}
+export interface BannerProps {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Icono destacado de 48px: `modern` en el tema por defecto y `light` en `brand`. */
+    icon?: IconName;
+    actions?: ReactNode;
+    /** Campo de correo de 360px con botón, para captar suscripciones. */
+    email?: BannerEmail;
+    /** Fecha objetivo de una cuenta atrás (días, horas, minutos y segundos). */
+    countdown?: Date;
+    /** Congela el reloj de la cuenta atrás en esta fecha (capturas y vistas previas). */
+    now?: Date;
+    /**
+     * `default`: `bg-secondary`. `brand`: `bg-brand-section_subtle` con textos `on-brand`.
+     * @default "default"
+     */
+    theme?: "default" | "brand";
+    /**
+     * `floating`: con radio y sombra. `full`: pegado al borde superior, a todo el ancho y sin radio.
+     * @default "floating"
+     */
+    layout?: "floating" | "full";
+    /** Una línea, centrada y sin icono. */
+    slim?: boolean;
+    /** Muestra la X. Un banner siempre se puede descartar salvo que el aviso bloquee algo de verdad. */
+    onClose?: () => void;
+    /** Nombre de la X. @default "Cerrar aviso" */
+    closeLabel?: string;
+    /** Nombre de la región. Por defecto, el título si es texto, o "Aviso". */
+    "aria-label"?: string;
+    className?: string;
+}
+/**
+ * Aviso de ancho de página o flotante para anunciar algo a toda la app: novedades, mantenimiento, captación de
+ * correo, cuenta atrás. Uno a la vez. En móvil se apila y oculta el icono.
+ */
+export declare function Banner({ title, description, icon, actions, email, countdown, now, theme, layout, slim, onClose, closeLabel, className, ...rest }: BannerProps): import("react").JSX.Element;