@jotis-me/react 0.0.0-stage → 0.2.0

package/dist/internal/stream.d.ts

@@ -0,0 +1,56 @@
+import type { CSSProperties } from "react";
+import type { IconName } from "../components/Icon.js";
+/**
+ * Raíz de cada componente de Stream: siempre en oscuro. `dark-mode` redefine los tokens en su subárbol (el
+ * `data-theme="dark"` del bundle), así que se ve igual dentro de una página clara (`.jm-st` del bundle).
+ */
+export declare const STREAM_ROOT = "dark-mode font-body text-primary antialiased";
+/** Cifras de reloj y contadores: Geist con números tabulares, para que no bailen al cambiar. */
+export declare const TABULAR = "font-body tabular-nums";
+export type StreamMotion = "enter" | "exit";
+/**
+ * Entrada y salida, la excepción acotada a "sin animaciones decorativas" (guía, Stream · Movimiento).
+ * Entra en 250 ms con fundido y 8px de subida; sale en 200 ms subiendo 8px. Con `prefers-reduced-motion`,
+ * solo fundido. Sin keyframes: la entrada es una transición desde `@starting-style` (variante `starting:`), así
+ * que se ve al montar el elemento; la salida, una transición al cambiar `state` a `exit`. Curvas del bundle.
+ * Con menos movimiento solo se anima `opacity` y el desplazamiento se queda en 0 (sin saltos).
+ */
+export declare function streamMotion(state: StreamMotion | undefined): string | undefined;
+export type StreamEventType = "follow" | "sub" | "resub" | "gift" | "raid" | "bits" | "donation";
+/** Icono y etiqueta de cada tipo de evento, compartidos por StreamAlert y StreamEvents. */
+export declare const STREAM_EVENTS: Record<StreamEventType, {
+    icon: IconName;
+    label: string;
+}>;
+export interface StreamEventData {
+    amount?: number;
+    months?: number;
+    tier?: number | string;
+}
+/** Texto por defecto de una alerta, con la voz de la suite (`stDetail` del bundle). */
+export declare function streamDetail(type: StreamEventType, e: StreamEventData): string;
+/** Línea corta de un evento en una lista: "Donación · 5,00 €", "Raid entrante · 1.284" (`stShort`). */
+export declare function streamShort(type: StreamEventType, e: StreamEventData): string;
+/**
+ * Claves estables para listas que crecen por un extremo (StreamEvents, ChatBox): `id` si lo hay y, si no, el
+ * contenido, con un contador para los repetidos. Con la posición como clave, al entrar un elemento nuevo con la
+ * lista llena no se monta nada y la entrada (`starting:`) no se ve.
+ */
+export declare function stableKeys<T>(items: T[], content: (item: T) => string): string[];
+/** Texto de un nodo para derivar una clave: solo cadenas y números. */
+export declare const keyText: (node: unknown) => string;
+/** Fecha de StreamCountdown y StreamScene: `Date`, texto ISO o milisegundos. */
+export type StreamTime = Date | string | number;
+/** Segundos que quedan (nunca negativos): hasta `target` desde `now` (o la hora actual), o `seconds`. */
+export declare function secondsLeft(p: {
+    seconds?: number;
+    target?: StreamTime;
+    now?: StreamTime;
+}): number;
+/** `90` → `01:30`; `3725` → `1:02:05` (h:mm:ss si pasa de una hora). */
+export declare function streamClock(total: number): string;
+/**
+ * Rejilla de `border-secondary` desvanecida hacia los bordes (`.jm-st-grid` del bundle): StreamScene la usa cada
+ * 96px con elipse 70 % × 65 %; ChannelBanner, cada 80px con 80 % × 90 %.
+ */
+export declare function streamGrid(size: number, ellipse: string): CSSProperties;

package/dist/internal/stream.js

@@ -0,0 +1,112 @@
+import { formatCurrency, formatNumber } from "./format.js";
+/**
+ * Raíz de cada componente de Stream: siempre en oscuro. `dark-mode` redefine los tokens en su subárbol (el
+ * `data-theme="dark"` del bundle), así que se ve igual dentro de una página clara (`.jm-st` del bundle).
+ */
+export const STREAM_ROOT = "dark-mode font-body text-primary antialiased";
+/** Cifras de reloj y contadores: Geist con números tabulares, para que no bailen al cambiar. */
+export const TABULAR = "font-body tabular-nums";
+/**
+ * Entrada y salida, la excepción acotada a "sin animaciones decorativas" (guía, Stream · Movimiento).
+ * Entra en 250 ms con fundido y 8px de subida; sale en 200 ms subiendo 8px. Con `prefers-reduced-motion`,
+ * solo fundido. Sin keyframes: la entrada es una transición desde `@starting-style` (variante `starting:`), así
+ * que se ve al montar el elemento; la salida, una transición al cambiar `state` a `exit`. Curvas del bundle.
+ * Con menos movimiento solo se anima `opacity` y el desplazamiento se queda en 0 (sin saltos).
+ */
+export function streamMotion(state) {
+    if (state === "enter")
+        return "transition-[opacity,translate] duration-250 ease-[cubic-bezier(.2,.7,.2,1)] starting:translate-y-2 starting:opacity-0 motion-reduce:transition-opacity motion-reduce:starting:translate-y-0";
+    if (state === "exit")
+        return "-translate-y-2 opacity-0 transition-[opacity,translate] duration-200 ease-in motion-reduce:translate-y-0 motion-reduce:transition-opacity";
+    return undefined;
+}
+/** Icono y etiqueta de cada tipo de evento, compartidos por StreamAlert y StreamEvents. */
+export const STREAM_EVENTS = {
+    follow: { icon: "user-plus-01", label: "Nuevo seguidor" },
+    sub: { icon: "star-01", label: "Nueva suscripción" },
+    resub: { icon: "refresh-cw-01", label: "Suscripción renovada" },
+    gift: { icon: "stars-02", label: "Suscripciones regaladas" },
+    raid: { icon: "users-01", label: "Raid entrante" },
+    bits: { icon: "zap", label: "Bits" },
+    donation: { icon: "currency-euro", label: "Donación" },
+};
+/** Texto por defecto de una alerta, con la voz de la suite (`stDetail` del bundle). */
+export function streamDetail(type, e) {
+    switch (type) {
+        case "follow":
+            return "Ya no hay vuelta atrás.";
+        case "sub":
+            return e.tier ? `Suscripción de nivel ${e.tier}.` : "Gracias por el apoyo.";
+        case "resub":
+            return e.months ? `Lleva ${e.months} meses por aquí.` : "Sigue por aquí.";
+        case "gift": {
+            const n = e.amount ?? 1;
+            return `${formatNumber(n)} ${n === 1 ? "suscripción regalada" : "suscripciones regaladas"} al chat.`;
+        }
+        case "raid":
+            return `${formatNumber(e.amount ?? 0)} espectadores acaban de aterrizar.`;
+        case "bits":
+            return `${formatNumber(e.amount ?? 0)} bits.`;
+        case "donation":
+            return typeof e.amount === "number" ? formatCurrency(e.amount) : "";
+    }
+}
+/** Línea corta de un evento en una lista: "Donación · 5,00 €", "Raid entrante · 1.284" (`stShort`). */
+export function streamShort(type, e) {
+    let extra = "";
+    if (type === "donation" && typeof e.amount === "number")
+        extra = formatCurrency(e.amount);
+    else if (type === "resub" && e.months)
+        extra = `${e.months} meses`;
+    else if ((type === "bits" || type === "raid" || type === "gift") && e.amount != null)
+        extra = formatNumber(e.amount);
+    return STREAM_EVENTS[type].label + (extra ? ` · ${extra}` : "");
+}
+/**
+ * Claves estables para listas que crecen por un extremo (StreamEvents, ChatBox): `id` si lo hay y, si no, el
+ * contenido, con un contador para los repetidos. Con la posición como clave, al entrar un elemento nuevo con la
+ * lista llena no se monta nada y la entrada (`starting:`) no se ve.
+ */
+export function stableKeys(items, content) {
+    const seen = new Map();
+    return items.map((it) => {
+        const id = it.id;
+        const base = id != null ? `id:${id}` : content(it);
+        const n = seen.get(base) ?? 0;
+        seen.set(base, n + 1);
+        return `${base}#${n}`;
+    });
+}
+/** Texto de un nodo para derivar una clave: solo cadenas y números. */
+export const keyText = (node) => typeof node === "string" || typeof node === "number" ? String(node) : "";
+const ms = (t) => new Date(t).getTime();
+/** Segundos que quedan (nunca negativos): hasta `target` desde `now` (o la hora actual), o `seconds`. */
+export function secondsLeft(p) {
+    if (p.target != null)
+        return Math.max(0, Math.round((ms(p.target) - (p.now != null ? ms(p.now) : Date.now())) / 1000));
+    return Math.max(0, Math.floor(p.seconds ?? 0));
+}
+/** `90` → `01:30`; `3725` → `1:02:05` (h:mm:ss si pasa de una hora). */
+export function streamClock(total) {
+    const t = Math.max(0, Math.floor(total));
+    const h = Math.floor(t / 3600);
+    const m = Math.floor((t % 3600) / 60);
+    const s = t % 60;
+    const z = (n) => String(n).padStart(2, "0");
+    return `${h ? `${h}:${z(m)}` : z(m)}:${z(s)}`;
+}
+/**
+ * Rejilla de `border-secondary` desvanecida hacia los bordes (`.jm-st-grid` del bundle): StreamScene la usa cada
+ * 96px con elipse 70 % × 65 %; ChannelBanner, cada 80px con 80 % × 90 %.
+ */
+export function streamGrid(size, ellipse) {
+    // color-fijo: máscara de desvanecido (solo cuenta el alfa), como BackgroundPattern
+    const mask = `radial-gradient(ellipse ${ellipse} at 50% 50%, black, transparent)`;
+    return {
+        backgroundImage: "linear-gradient(to right, var(--border-secondary) 1px, transparent 1px), linear-gradient(to bottom, var(--border-secondary) 1px, transparent 1px)",
+        backgroundSize: `${size}px ${size}px`,
+        backgroundPosition: "center",
+        maskImage: mask,
+        WebkitMaskImage: mask,
+    };
+}

package/dist/internal/strings.d.ts

@@ -0,0 +1,101 @@
+export declare const defaultStrings: {
+    readonly close: "Cerrar";
+    readonly remove: "Quitar";
+    readonly online: "En línea";
+    readonly offline: "Desconectado";
+    readonly loading: "Cargando…";
+    readonly previous: "Anterior";
+    readonly next: "Siguiente";
+    readonly page: "Página";
+    readonly pagination: "Paginación";
+    readonly breadcrumbs: "Migas de pan";
+    readonly mainNav: "Principal";
+    readonly logout: "Cerrar sesión";
+    readonly view: "Vista";
+    readonly options: "Opciones";
+    readonly commandMenu: "Menú de comandos";
+    readonly searchCommands: "Buscar comandos";
+    readonly commandPlaceholder: "Busca o escribe un comando";
+    readonly tryAnother: "Prueba con otra palabra.";
+    readonly toMove: "moverse";
+    readonly toOpen: "abrir";
+    readonly toClose: "cerrar";
+    readonly dismiss: "Descartar";
+    readonly closeNotice: "Cerrar aviso";
+    readonly notice: "Aviso";
+    readonly yourEmail: "Tu correo";
+    readonly subscribe: "Suscribirme";
+    readonly moreOptions: "Más opciones";
+    readonly rising: "Sube";
+    readonly falling: "Baja";
+    readonly unread: "Sin leer";
+    readonly typing: "Escribiendo";
+    readonly you: "Tú";
+    readonly copyCode: "Copiar código";
+    readonly code: "código";
+    readonly weekdaysMin: readonly ["Lu", "Ma", "Mi", "Ju", "Vi", "Sá", "Do"];
+    readonly more: "Más acciones";
+    readonly search: "Buscar";
+    readonly clearAll: "Limpiar todo";
+    readonly filters: "Filtros";
+    readonly apply: "Aplicar";
+    readonly cancel: "Cancelar";
+    readonly send: "Enviar";
+    readonly message: "Mensaje";
+    readonly writeMessage: "Escribe un mensaje";
+    readonly savedColors: "Colores guardados";
+    readonly hex: "Hex";
+    readonly hue: "Tono";
+    readonly formatting: "Formato";
+    readonly bold: "Negrita";
+    readonly italic: "Cursiva";
+    readonly underline: "Subrayado";
+    readonly list: "Lista";
+    readonly link: "Enlace";
+    readonly linkPrompt: "Dirección del enlace";
+    readonly alignLeft: "Alinear a la izquierda";
+    readonly alignCenter: "Centrar";
+    readonly alignRight: "Alinear a la derecha";
+    readonly writeHere: "Escribe aquí…";
+    readonly text: "Texto";
+    readonly attach: "Adjuntar archivo";
+    readonly copy: "Copiar";
+    readonly copied: "Copiado";
+    readonly today: "Hoy";
+    readonly pickDate: "Elegir fecha";
+    readonly pickDates: "Elegir fechas";
+    readonly datePicker: "Selector de fecha";
+    readonly calendar: "Calendario";
+    readonly previousMonth: "Mes anterior";
+    readonly nextMonth: "Mes siguiente";
+    readonly noResults: "Sin resultados";
+    readonly required: "obligatorio";
+    readonly upload: "Haz clic para subir";
+    readonly orDrag: "o arrastra y suelta";
+    readonly uploadComplete: "Completado";
+    readonly uploading: "Subiendo…";
+    readonly uploadFailed: "No se pudo subir";
+    readonly play: "Reproducir";
+    readonly pause: "Pausar";
+    readonly mute: "Silenciar";
+    readonly unmute: "Activar sonido";
+    readonly fullscreen: "Pantalla completa";
+    readonly removeFile: (name: string) => string;
+    readonly uploadProgress: (name: string) => string;
+    readonly showMore: (n: number) => string;
+    readonly streamLive: "En directo";
+    readonly streamRerun: "Reemisión";
+    readonly streamOffline: "Sin directo";
+    readonly viewers: "espectadores";
+    readonly onAir: "en emisión";
+    readonly latestEvents: "Últimos eventos";
+    readonly streamChat: "Chat del directo";
+    readonly goal: "Meta";
+    readonly goalDone: "Meta conseguida. Toca poner otra.";
+    readonly goalRemaining: (missing: string) => string;
+    readonly nowPlaying: "Suena ahora";
+    readonly paused: "En pausa";
+    readonly songProgress: "Progreso de la canción";
+    readonly charactersLeft: (n: number) => string;
+};
+export type Strings = typeof defaultStrings;

package/dist/internal/strings.js

@@ -0,0 +1,103 @@
+// Textos que traen los componentes. Castellano de España, tuteo, mayúscula solo al principio.
+// Cada componente acepta por props el texto que quieras poner en su lugar.
+export const defaultStrings = {
+    close: "Cerrar",
+    remove: "Quitar",
+    online: "En línea",
+    offline: "Desconectado",
+    loading: "Cargando…",
+    previous: "Anterior",
+    next: "Siguiente",
+    page: "Página",
+    pagination: "Paginación",
+    breadcrumbs: "Migas de pan",
+    mainNav: "Principal",
+    logout: "Cerrar sesión",
+    view: "Vista",
+    options: "Opciones",
+    commandMenu: "Menú de comandos",
+    searchCommands: "Buscar comandos",
+    commandPlaceholder: "Busca o escribe un comando",
+    tryAnother: "Prueba con otra palabra.",
+    toMove: "moverse",
+    toOpen: "abrir",
+    toClose: "cerrar",
+    dismiss: "Descartar",
+    closeNotice: "Cerrar aviso",
+    notice: "Aviso",
+    yourEmail: "Tu correo",
+    subscribe: "Suscribirme",
+    moreOptions: "Más opciones",
+    rising: "Sube",
+    falling: "Baja",
+    unread: "Sin leer",
+    typing: "Escribiendo",
+    you: "Tú",
+    copyCode: "Copiar código",
+    code: "código",
+    weekdaysMin: ["Lu", "Ma", "Mi", "Ju", "Vi", "Sá", "Do"],
+    more: "Más acciones",
+    search: "Buscar",
+    clearAll: "Limpiar todo",
+    filters: "Filtros",
+    apply: "Aplicar",
+    cancel: "Cancelar",
+    send: "Enviar",
+    message: "Mensaje",
+    writeMessage: "Escribe un mensaje",
+    savedColors: "Colores guardados",
+    hex: "Hex",
+    hue: "Tono",
+    formatting: "Formato",
+    bold: "Negrita",
+    italic: "Cursiva",
+    underline: "Subrayado",
+    list: "Lista",
+    link: "Enlace",
+    linkPrompt: "Dirección del enlace",
+    alignLeft: "Alinear a la izquierda",
+    alignCenter: "Centrar",
+    alignRight: "Alinear a la derecha",
+    writeHere: "Escribe aquí…",
+    text: "Texto",
+    attach: "Adjuntar archivo",
+    copy: "Copiar",
+    copied: "Copiado",
+    today: "Hoy",
+    pickDate: "Elegir fecha",
+    pickDates: "Elegir fechas",
+    datePicker: "Selector de fecha",
+    calendar: "Calendario",
+    previousMonth: "Mes anterior",
+    nextMonth: "Mes siguiente",
+    noResults: "Sin resultados",
+    required: "obligatorio",
+    upload: "Haz clic para subir",
+    orDrag: "o arrastra y suelta",
+    uploadComplete: "Completado",
+    uploading: "Subiendo…",
+    uploadFailed: "No se pudo subir",
+    play: "Reproducir",
+    pause: "Pausar",
+    mute: "Silenciar",
+    unmute: "Activar sonido",
+    fullscreen: "Pantalla completa",
+    removeFile: (name) => `Quitar ${name}`,
+    uploadProgress: (name) => `Progreso de ${name}`,
+    showMore: (n) => `${n} más…`,
+    streamLive: "En directo",
+    streamRerun: "Reemisión",
+    streamOffline: "Sin directo",
+    viewers: "espectadores",
+    onAir: "en emisión",
+    latestEvents: "Últimos eventos",
+    streamChat: "Chat del directo",
+    goal: "Meta",
+    goalDone: "Meta conseguida. Toca poner otra.",
+    goalRemaining: (missing) => `Faltan ${missing} para la meta.`,
+    nowPlaying: "Suena ahora",
+    paused: "En pausa",
+    songProgress: "Progreso de la canción",
+    // Como en la vista previa de TextEditor: "421 caracteres restantes"
+    charactersLeft: (n) => (n === 1 ? "1 carácter restante" : `${n} caracteres restantes`),
+};

package/dist/internal/use-controllable.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Estado controlado o no controlado, como un `<input>`: si llega `value`, manda el padre;
+ * si no, el componente guarda el suyo empezando por `defaultValue`.
+ */
+export declare function useControllable<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void): [T, (next: T) => void];

package/dist/internal/use-controllable.js

@@ -0,0 +1,17 @@
+"use client";
+import { useCallback, useRef, useState } from "react";
+/**
+ * Estado controlado o no controlado, como un `<input>`: si llega `value`, manda el padre;
+ * si no, el componente guarda el suyo empezando por `defaultValue`.
+ */
+export function useControllable(value, defaultValue, onChange) {
+    const [inner, setInner] = useState(defaultValue);
+    const controlled = useRef(value !== undefined).current;
+    const current = controlled ? value : inner;
+    const set = useCallback((next) => {
+        if (!controlled)
+            setInner(next);
+        onChange?.(next);
+    }, [controlled, onChange]);
+    return [current, set];
+}

package/package.json

@@ -1,6 +1,67 @@
 {
-  "name": "@jotis-me/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@jotis-me/react",
+	"version": "0.2.0",
+	"description": "Componentes React de la suite jotis.me para Next.js y Astro, con Tailwind CSS v4.",
+	"license": "MIT",
+	"type": "module",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Jotis1/regula.git",
+		"directory": "packages/react"
+	},
+	"homepage": "https://regula.jotis.me",
+	"files": [
+		"dist",
+		"styles.css"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./styles.css": "./styles.css",
+		"./package.json": "./package.json"
+	},
+	"scripts": {
+		"build": "tsc -p tsconfig.build.json",
+		"test": "vitest run",
+		"typecheck": "tsc --noEmit",
+		"check:colors": "bun run scripts/check-colors.ts src",
+		"check:package": "publint && attw --pack . --profile esm-only --exclude-entrypoints ./styles.css",
+		"check:size": "bun run scripts/check-size.ts"
+	},
+	"dependencies": {
+		"@internationalized/date": "^3.12.4",
+		"@jotis-me/icons": "0.2.0",
+		"@jotis-me/tokens": "0.2.0",
+		"clsx": "^2.1.1",
+		"react-aria-components": "^1.22.1",
+		"tailwind-merge": "^3.7.0"
+	},
+	"peerDependencies": {
+		"react": "^19.3.1",
+		"react-dom": "^19.3.1",
+		"tailwindcss": "^4.3.3"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"devDependencies": {
+		"@arethetypeswrong/cli": "^0.18.5",
+		"@tailwindcss/node": "^4.3.3",
+		"@testing-library/react": "^16.3.3",
+		"@testing-library/user-event": "^14.6.8",
+		"@types/node": "^26.6.6",
+		"@types/react": "^19.3.0",
+		"@types/react-dom": "^19.3.0",
+		"axe-core": "^4.14.0",
+		"jsdom": "^30.1.3",
+		"publint": "^0.3.25",
+		"vitest": "^5"
+	}
+}

package/styles.css

@@ -0,0 +1,7 @@
+/* Importa esto después de `@import "tailwindcss";` en la hoja principal de la app. */
+@import "@jotis-me/tokens/fonts.css";
+@import "@jotis-me/tokens/tokens.css";
+@import "@jotis-me/tokens/theme.css";
+
+/* Que el Tailwind de la app genere también las clases que usan los componentes */
+@source "./dist";