@jotis-me/react 0.0.0-stage → 0.1.0

package/dist/components/VideoPlayer.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { cx } from "../internal/cx.js";
+import { Icon } from "./Icon.js";
+const DEFAULT_LABELS = {
+    play: "Reproducir",
+    pause: "Pausa",
+    seek: "Posición",
+    mute: "Silenciar",
+    unmute: "Activar sonido",
+    fullscreen: "Pantalla completa",
+    position: (current, total) => `${current} de ${total}`,
+};
+/** `252` → `4:12`. */
+const clock = (s) => {
+    const t = Math.max(0, Math.floor(s || 0));
+    return `${Math.floor(t / 60)}:${String(t % 60).padStart(2, "0")}`;
+};
+// Controles en blanco y negro fijos: van sobre el vídeo, no sobre la interfaz (excepción de la ficha).
+const FOCUS = "focus-visible:shadow-focus-ring focus-visible:outline-none";
+const BTN = cx("inline-flex cursor-pointer rounded-md border-0 bg-transparent p-1.5 text-[#ffffff] transition-colors duration-100 hover:bg-[#ffffff33]", FOCUS);
+const THUMB = "[&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[#ffffff] [&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-[#ffffff]";
+/** Reproductor de vídeo 16:9 con botón central, barra de controles, tiempo, volumen y pantalla completa. */
+export function VideoPlayer({ src, poster, duration = 0, labels, className, style }) {
+    const l = { ...DEFAULT_LABELS, ...labels };
+    const video = useRef(null);
+    const wrap = useRef(null);
+    const [playing, setPlaying] = useState(false);
+    const [time, setTime] = useState(0);
+    const [total, setTotal] = useState(duration);
+    const [muted, setMuted] = useState(false);
+    const toggle = () => {
+        const v = video.current;
+        if (!v)
+            setPlaying((p) => !p);
+        else if (v.paused)
+            void v.play();
+        else
+            v.pause();
+    };
+    return (_jsxs("div", { ref: wrap, className: cx("relative aspect-video overflow-hidden rounded-xl bg-[#000000] font-body", className), style: style, children: [src ? (_jsx("video", { ref: video, src: src, poster: poster, playsInline: true, muted: muted, onClick: toggle, onPlay: () => setPlaying(true), onPause: () => setPlaying(false), onTimeUpdate: (e) => setTime(e.currentTarget.currentTime), onLoadedMetadata: (e) => setTotal(e.currentTarget.duration), className: "block size-full object-cover" })) : (_jsx("div", { className: "block size-full bg-primary-solid bg-cover bg-center", style: poster ? { backgroundImage: `url(${poster})` } : undefined })), playing ? null : (_jsx("button", { type: "button", tabIndex: -1, "aria-hidden": "true", onClick: toggle, className: "absolute top-1/2 left-1/2 -mt-8 -ml-8 inline-flex size-16 cursor-pointer items-center justify-center rounded-full border-0 bg-[#ffffff4d] text-[#ffffff] [backdrop-filter:var(--backdrop-blur-lg)]", children: _jsx(Icon, { name: "play", size: 28 }) })), _jsxs("div", { className: "absolute inset-x-0 bottom-0 flex items-center gap-2 bg-[linear-gradient(to_top,#000000b2,#00000000)] px-4 pt-6 pb-3 text-[#ffffff]", children: [_jsx("button", { type: "button", className: BTN, onClick: toggle, "aria-label": playing ? l.pause : l.play, children: _jsx(Icon, { name: playing ? "pause-circle" : "play", size: 20 }) }), _jsxs("span", { className: "text-sm font-medium whitespace-nowrap tabular-nums", children: [clock(time), " / ", clock(total)] }), _jsx("input", { type: "range", min: 0, max: total || 1, step: 0.1, value: time, "aria-label": l.seek, "aria-valuetext": l.position(clock(time), clock(total)), onChange: (e) => {
+                            const n = Number(e.target.value);
+                            setTime(n);
+                            if (video.current)
+                                video.current.currentTime = n;
+                        }, className: cx("h-1 flex-1 cursor-pointer appearance-none rounded-full bg-[linear-gradient(to_right,#ffffff_var(--p),#ffffff4d_var(--p))]", FOCUS, THUMB), style: { "--p": `${total ? (time / total) * 100 : 0}%` } }), _jsx("button", { type: "button", className: BTN, onClick: () => {
+                            if (video.current)
+                                video.current.muted = !muted;
+                            setMuted(!muted);
+                        }, "aria-label": muted ? l.unmute : l.mute, children: _jsx(Icon, { name: muted ? "volume-x" : "volume-max", size: 20 }) }), _jsx("button", { type: "button", className: BTN, "aria-label": l.fullscreen, onClick: () => void wrap.current?.requestFullscreen?.(), children: _jsx(Icon, { name: "maximize-01", size: 20 }) })] })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,80 @@
+export { ActivityFeed, type ActivityFeedProps, type ActivityItem } from "./components/ActivityFeed.js";
+export { Alert, type AlertProps } from "./components/Alert.js";
+export { AppIcon, type AppIconHue, type AppIconProps, type AppIconShape, type AppIconVariant, type AppName, appIcons, } from "./components/AppIcon.js";
+export { Avatar, type AvatarProps, type AvatarSize, type AvatarStatus } from "./components/Avatar.js";
+export { AvatarGroup, type AvatarGroupProps } from "./components/AvatarGroup.js";
+export { AvatarLabel, type AvatarLabelProps } from "./components/AvatarLabel.js";
+export { BackgroundPattern, type BackgroundPatternMask, type BackgroundPatternName, type BackgroundPatternProps, } from "./components/BackgroundPattern.js";
+export { Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeType, type StatusColor, } from "./components/Badge.js";
+export { Banner, type BannerEmail, type BannerProps } from "./components/Banner.js";
+export { BarChart, type BarChartProps } from "./components/BarChart.js";
+export { type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps } from "./components/Breadcrumbs.js";
+export { BrowserFrame, type BrowserFrameProps } from "./components/BrowserFrame.js";
+export { Button, type ButtonHierarchy, type ButtonProps, type ButtonSize } from "./components/Button.js";
+export { ButtonGroup, type ButtonGroupItem, type ButtonGroupProps } from "./components/ButtonGroup.js";
+export { type CalendarEvent, CalendarView, type CalendarViewProps } from "./components/CalendarView.js";
+export { CamFrame, type CamFrameProps, type CamFrameRatio } from "./components/CamFrame.js";
+export { CardHeader, type CardHeaderProps } from "./components/CardHeader.js";
+export { ChannelBanner, type ChannelBannerProps, type ChannelBannerSlot, } from "./components/ChannelBanner.js";
+export { ChannelPanel, type ChannelPanelAction, type ChannelPanelProps, type ChannelPanelRow, } from "./components/ChannelPanel.js";
+export { ChartLegend, type ChartLegendProps } from "./components/ChartLegend.js";
+export { ChatBadge, type ChatBadgeKind, type ChatBadgeProps } from "./components/ChatBadge.js";
+export { ChatBox, type ChatBoxProps, type ChatMessage, type ChatTone } from "./components/ChatBox.js";
+export { Checkbox, type CheckboxProps } from "./components/Checkbox.js";
+export { CloseButton, type CloseButtonProps } from "./components/CloseButton.js";
+export { CodeSnippet, type CodeSnippetProps, type CodeSnippetTab } from "./components/CodeSnippet.js";
+export { ColorPicker, type ColorPickerProps } from "./components/ColorPicker.js";
+export { type CommandGroup, type CommandItem, CommandMenu, type CommandMenuLabels, type CommandMenuProps, } from "./components/CommandMenu.js";
+export { ContentDivider, type ContentDividerProps } from "./components/ContentDivider.js";
+export { CreditCard, type CreditCardProps, type CreditCardTheme } from "./components/CreditCard.js";
+export { DatePicker, type DatePickerLabels, type DatePickerPreset, type DatePickerProps, type DateRange, } from "./components/DatePicker.js";
+export { Dropdown, type DropdownAction, type DropdownItem, type DropdownProps, } from "./components/Dropdown.js";
+export { EmptyState, type EmptyStateProps } from "./components/EmptyState.js";
+export { FeaturedIcon, type FeaturedIconProps, type FeaturedIconSize, type FeaturedIconVariant, } from "./components/FeaturedIcon.js";
+export { FileUpload, type FileUploadLabels, type FileUploadProps, type UploadFile, } from "./components/FileUpload.js";
+export { FilterBar, type FilterBarLabels, type FilterBarProps } from "./components/FilterBar.js";
+export { Icon, type IconName, type IconProps } from "./components/Icon.js";
+export { InlineCTA, type InlineCTAProps } from "./components/InlineCTA.js";
+export { Input, type InputProps } from "./components/Input.js";
+export { LineChart, type LineChartProps } from "./components/LineChart.js";
+export { Message, type MessageProps } from "./components/Message.js";
+export { MessageInput, type MessageInputProps } from "./components/MessageInput.js";
+export { MetricCard, type MetricCardProps } from "./components/MetricCard.js";
+export { Modal, type ModalProps } from "./components/Modal.js";
+export { Notification, type NotificationProps } from "./components/Notification.js";
+export { NowPlaying, type NowPlayingLabels, type NowPlayingProps } from "./components/NowPlaying.js";
+export { PageHeader, type PageHeaderProps } from "./components/PageHeader.js";
+export { Pagination, type PaginationLabels, type PaginationProps, } from "./components/Pagination.js";
+export { PieChart, type PieChartProps, type PieChartSlice } from "./components/PieChart.js";
+export { ProgressBar, type ProgressBarProps } from "./components/ProgressBar.js";
+export { Radio, type RadioProps } from "./components/Radio.js";
+export { RadioGroup, type RadioGroupOption, type RadioGroupProps } from "./components/RadioGroup.js";
+export { SectionFooter, type SectionFooterProps } from "./components/SectionFooter.js";
+export { SectionHeader, type SectionHeaderProps } from "./components/SectionHeader.js";
+export { Select, type SelectOption, type SelectProps } from "./components/Select.js";
+export { SidebarNav, type SidebarNavItem, type SidebarNavLabels, type SidebarNavProps, } from "./components/SidebarNav.js";
+export { Skeleton, type SkeletonProps } from "./components/Skeleton.js";
+export { Slideout, type SlideoutProps } from "./components/Slideout.js";
+export { Slider, type SliderProps } from "./components/Slider.js";
+export { Spinner, type SpinnerProps, type SpinnerSize } from "./components/Spinner.js";
+export { StreamAlert, type StreamAlertProps } from "./components/StreamAlert.js";
+export { StreamCountdown, type StreamCountdownProps, type StreamCountdownSize, } from "./components/StreamCountdown.js";
+export { type StreamEventItem, StreamEvents, type StreamEventsProps } from "./components/StreamEvents.js";
+export { StreamGoal, type StreamGoalLabels, type StreamGoalProps } from "./components/StreamGoal.js";
+export { StreamScene, type StreamSceneProps, type StreamSceneVariant } from "./components/StreamScene.js";
+export { StreamStatus, type StreamStatusLabels, type StreamStatusProps, type StreamStatusValue, } from "./components/StreamStatus.js";
+export { Table, type TableColumn, type TableProps } from "./components/Table.js";
+export { type TabItem, Tabs, type TabsProps, type TabsSize, type TabsType } from "./components/Tabs.js";
+export { Tag, type TagProps, type TagSize } from "./components/Tag.js";
+export { Textarea, type TextareaProps } from "./components/Textarea.js";
+export { TextEditor, type TextEditorLabels, type TextEditorProps } from "./components/TextEditor.js";
+export { Toggle, type ToggleProps } from "./components/Toggle.js";
+export { Tooltip, type TooltipProps } from "./components/Tooltip.js";
+export { type TreeItem, TreeView, type TreeViewProps } from "./components/TreeView.js";
+export { VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps } from "./components/VideoPlayer.js";
+export type { ChartSeries } from "./internal/chart.js";
+export type { ChoiceSize } from "./internal/choice.js";
+export type { FieldProps, FieldSize } from "./internal/field.js";
+export { formatBytes, formatCurrency, formatDate, formatMonth, formatNumber, formatPercent, } from "./internal/format.js";
+export type { StreamEventType, StreamMotion, StreamTime } from "./internal/stream.js";
+export { defaultStrings, type Strings } from "./internal/strings.js";

package/dist/index.js

@@ -0,0 +1,76 @@
+export { ActivityFeed } from "./components/ActivityFeed.js";
+export { Alert } from "./components/Alert.js";
+export { AppIcon, appIcons, } from "./components/AppIcon.js";
+export { Avatar } from "./components/Avatar.js";
+export { AvatarGroup } from "./components/AvatarGroup.js";
+export { AvatarLabel } from "./components/AvatarLabel.js";
+export { BackgroundPattern, } from "./components/BackgroundPattern.js";
+export { Badge, } from "./components/Badge.js";
+export { Banner } from "./components/Banner.js";
+export { BarChart } from "./components/BarChart.js";
+export { Breadcrumbs } from "./components/Breadcrumbs.js";
+export { BrowserFrame } from "./components/BrowserFrame.js";
+export { Button } from "./components/Button.js";
+export { ButtonGroup } from "./components/ButtonGroup.js";
+export { CalendarView } from "./components/CalendarView.js";
+export { CamFrame } from "./components/CamFrame.js";
+export { CardHeader } from "./components/CardHeader.js";
+export { ChannelBanner, } from "./components/ChannelBanner.js";
+export { ChannelPanel, } from "./components/ChannelPanel.js";
+export { ChartLegend } from "./components/ChartLegend.js";
+export { ChatBadge } from "./components/ChatBadge.js";
+export { ChatBox } from "./components/ChatBox.js";
+export { Checkbox } from "./components/Checkbox.js";
+export { CloseButton } from "./components/CloseButton.js";
+export { CodeSnippet } from "./components/CodeSnippet.js";
+export { ColorPicker } from "./components/ColorPicker.js";
+export { CommandMenu, } from "./components/CommandMenu.js";
+export { ContentDivider } from "./components/ContentDivider.js";
+export { CreditCard } from "./components/CreditCard.js";
+export { DatePicker, } from "./components/DatePicker.js";
+export { Dropdown, } from "./components/Dropdown.js";
+export { EmptyState } from "./components/EmptyState.js";
+export { FeaturedIcon, } from "./components/FeaturedIcon.js";
+export { FileUpload, } from "./components/FileUpload.js";
+export { FilterBar } from "./components/FilterBar.js";
+export { Icon } from "./components/Icon.js";
+export { InlineCTA } from "./components/InlineCTA.js";
+export { Input } from "./components/Input.js";
+export { LineChart } from "./components/LineChart.js";
+export { Message } from "./components/Message.js";
+export { MessageInput } from "./components/MessageInput.js";
+export { MetricCard } from "./components/MetricCard.js";
+export { Modal } from "./components/Modal.js";
+export { Notification } from "./components/Notification.js";
+export { NowPlaying } from "./components/NowPlaying.js";
+export { PageHeader } from "./components/PageHeader.js";
+export { Pagination, } from "./components/Pagination.js";
+export { PieChart } from "./components/PieChart.js";
+export { ProgressBar } from "./components/ProgressBar.js";
+export { Radio } from "./components/Radio.js";
+export { RadioGroup } from "./components/RadioGroup.js";
+export { SectionFooter } from "./components/SectionFooter.js";
+export { SectionHeader } from "./components/SectionHeader.js";
+export { Select } from "./components/Select.js";
+export { SidebarNav, } from "./components/SidebarNav.js";
+export { Skeleton } from "./components/Skeleton.js";
+export { Slideout } from "./components/Slideout.js";
+export { Slider } from "./components/Slider.js";
+export { Spinner } from "./components/Spinner.js";
+export { StreamAlert } from "./components/StreamAlert.js";
+export { StreamCountdown, } from "./components/StreamCountdown.js";
+export { StreamEvents } from "./components/StreamEvents.js";
+export { StreamGoal } from "./components/StreamGoal.js";
+export { StreamScene } from "./components/StreamScene.js";
+export { StreamStatus, } from "./components/StreamStatus.js";
+export { Table } from "./components/Table.js";
+export { Tabs } from "./components/Tabs.js";
+export { Tag } from "./components/Tag.js";
+export { Textarea } from "./components/Textarea.js";
+export { TextEditor } from "./components/TextEditor.js";
+export { Toggle } from "./components/Toggle.js";
+export { Tooltip } from "./components/Tooltip.js";
+export { TreeView } from "./components/TreeView.js";
+export { VideoPlayer } from "./components/VideoPlayer.js";
+export { formatBytes, formatCurrency, formatDate, formatMonth, formatNumber, formatPercent, } from "./internal/format.js";
+export { defaultStrings } from "./internal/strings.js";

package/dist/internal/chart.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+export interface ChartSeries {
+    /** Nombre en la leyenda y en el título de cada punto. */
+    name?: string;
+    data: number[];
+    /** Color propio (cualquier color CSS). Por defecto, el de su posición en la paleta de series. */
+    color?: string;
+}
+/** Paleta de series de la guía, en orden: la marca primero, en degradado. */
+export declare const SERIES: readonly ["var(--utility-brand-600)", "var(--utility-brand-400)", "var(--utility-brand-200)", "var(--utility-sky-500)", "var(--utility-pink-500)", "var(--utility-neutral-400)"];
+export declare const seriesColor: (i: number, color?: string) => string | undefined;
+/** Techo "redondo" de la escala: 1, 1,2, 1,5, 2, 2,5, 3, 4, 5, 6, 8 o 10 por su potencia de diez. */
+export declare function nice(max: number): number;
+export interface Plot {
+    w: number;
+    h: number;
+    pad: {
+        t: number;
+        r: number;
+        b: number;
+        l: number;
+    };
+}
+export declare const PAD: {
+    t: number;
+    r: number;
+    b: number;
+    l: number;
+};
+/** Rejilla en `border-tertiary` (cinco líneas desde cero) y etiquetas de los ejes en `text-xs` `text-tertiary`. */
+export declare function Axes({ plot: { w, h, pad }, top, labels, format, }: {
+    plot: Plot;
+    top: number;
+    labels: string[];
+    format?: (v: number) => string;
+}): ReactNode;
+/** "Gastos · Oct: 1.284 €" para el `<title>` de cada punto o barra. */
+export declare const pointTitle: (name: string | undefined, label: string, value: string | number) => string;

package/dist/internal/chart.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Paleta de series de la guía, en orden: la marca primero, en degradado. */
+export const SERIES = [
+    "var(--utility-brand-600)",
+    "var(--utility-brand-400)",
+    "var(--utility-brand-200)",
+    "var(--utility-sky-500)",
+    "var(--utility-pink-500)",
+    "var(--utility-neutral-400)",
+];
+export const seriesColor = (i, color) => color ?? SERIES[i % SERIES.length];
+/** Techo "redondo" de la escala: 1, 1,2, 1,5, 2, 2,5, 3, 4, 5, 6, 8 o 10 por su potencia de diez. */
+export function nice(max) {
+    if (max <= 0)
+        return 1;
+    const e = 10 ** Math.floor(Math.log10(max));
+    const f = max / e;
+    for (const s of [1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10])
+        if (f <= s)
+            return s * e;
+    return 10 * e;
+}
+export const PAD = { t: 12, r: 12, b: 28, l: 44 };
+const TICK = { fontSize: 12, fill: "var(--text-tertiary)" };
+/** Rejilla en `border-tertiary` (cinco líneas desde cero) y etiquetas de los ejes en `text-xs` `text-tertiary`. */
+export function Axes({ plot: { w, h, pad }, top, labels, format, }) {
+    return (_jsxs("g", { children: [[0, 0.25, 0.5, 0.75, 1].map((t) => {
+                const y = pad.t + (h - pad.t - pad.b) * (1 - t);
+                return (_jsxs("g", { children: [_jsx("line", { x1: pad.l, x2: w - pad.r, y1: y, y2: y, stroke: "var(--border-tertiary)", strokeWidth: 1 }), _jsx("text", { x: pad.l - 8, y: y + 4, textAnchor: "end", ...TICK, children: format ? format(top * t) : Math.round(top * t) })] }, t));
+            }), labels.map((l, i) => (_jsx("text", { x: pad.l + (w - pad.l - pad.r) * (labels.length === 1 ? 0.5 : (i + 0.5) / labels.length), y: h - 6, textAnchor: "middle", ...TICK, children: l }, i)))] }));
+}
+/** "Gastos · Oct: 1.284 €" para el `<title>` de cada punto o barra. */
+export const pointTitle = (name, label, value) => `${name ? `${name} · ` : ""}${label}: ${value}`;

package/dist/internal/choice.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export type ChoiceSize = "sm" | "md";
+export declare const choiceLabel: (size: ChoiceSize) => string;
+/** El input real, invisible pero enfocable; la caja de al lado se pinta con `peer-*`. */
+export declare const hiddenInput = "peer absolute size-px opacity-0";
+/** Caja de 16 o 20px que baja 2px para alinearse con la primera línea. */
+export declare const choiceBox: (size: ChoiceSize, radio: boolean) => string;
+/** Punto blanco del radio marcado: 6px, 8px en `md`. */
+export declare const radioDot: (size: ChoiceSize) => string;
+interface ChoiceTextProps {
+    label?: ReactNode;
+    hint?: ReactNode;
+    size: ChoiceSize;
+    className?: string;
+}
+/** Etiqueta (`text-secondary` medium) y apoyo (`text-tertiary`); 16px en `md`. */
+export declare function ChoiceText({ label, hint, size, className }: ChoiceTextProps): import("react").JSX.Element | null;
+export {};

package/dist/internal/choice.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+// Piezas comunes de Checkbox, Radio, RadioGroup y Toggle: etiqueta envolvente, caja y textos.
+export const choiceLabel = (size) => cx("group relative inline-flex cursor-pointer items-start font-body has-[:disabled]:cursor-not-allowed data-disabled:cursor-not-allowed", size === "md" ? "gap-3" : "gap-2");
+/** El input real, invisible pero enfocable; la caja de al lado se pinta con `peer-*`. */
+export const hiddenInput = "peer absolute size-px opacity-0";
+/** Caja de 16 o 20px que baja 2px para alinearse con la primera línea. */
+export const choiceBox = (size, radio) => cx("mt-0.5 inline-flex flex-none items-center justify-center bg-primary text-fg-white shadow-[inset_0_0_0_1px_var(--border-primary)]", size === "md" ? "size-5 rounded-md" : "size-4 rounded-sm", radio && "rounded-full");
+/** Punto blanco del radio marcado: 6px, 8px en `md`. */
+export const radioDot = (size) => cx("rounded-full bg-fg-white", size === "md" ? "size-2" : "size-1.5");
+/** Etiqueta (`text-secondary` medium) y apoyo (`text-tertiary`); 16px en `md`. */
+export function ChoiceText({ label, hint, size, className }) {
+    if (!label && !hint)
+        return null;
+    const text = size === "md" ? "text-md" : "text-sm";
+    return (_jsxs("span", { className: cx("flex flex-col", size === "md" && "gap-0.5", className), children: [label ? _jsx("span", { className: cx(text, "font-medium text-secondary"), children: label }) : null, hint ? _jsx("span", { className: cx(text, "font-normal text-tertiary"), children: hint }) : null] }));
+}

package/dist/internal/cx.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+/** Junta clases y resuelve conflictos de Tailwind: la última gana, así el `className` del consumidor manda. */
+export declare function cx(...inputs: ClassValue[]): string;

package/dist/internal/cx.js

@@ -0,0 +1,26 @@
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+// tailwind-merge tiene que saber qué nombres propios del tema son tamaños de texto y sombras;
+// si no, trataría `text-display-sm` como un color y lo quitaría al juntarlo con `text-primary`.
+const twMerge = extendTailwindMerge({
+    extend: {
+        theme: {
+            text: [
+                "display-xs",
+                "display-sm",
+                "display-md",
+                "display-lg",
+                "display-xl",
+                "display-2xl",
+                "code-sm",
+                "code-xs",
+            ],
+            shadow: ["xs-skeuomorphic", "focus-ring", "focus-ring-error"],
+            font: ["body", "display", "mono"],
+        },
+    },
+});
+/** Junta clases y resuelve conflictos de Tailwind: la última gana, así el `className` del consumidor manda. */
+export function cx(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/internal/field.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+export type FieldSize = "sm" | "md" | "lg";
+export interface FieldProps {
+    /** Etiqueta visible encima del campo. El placeholder nunca la sustituye. */
+    label?: ReactNode;
+    /** Añade el asterisco tras la etiqueta (`text-brand-tertiary`, rojo con error). */
+    required?: boolean;
+    /** Pista bajo el campo. Con `error` de texto, la sustituye. */
+    hint?: ReactNode;
+    /** Mensaje de error, o `true` para marcar el error sin texto. */
+    error?: string | boolean;
+}
+/** Clases del elemento nativo: sin borde propio, el control pinta el marco. */
+export declare const nativeClasses: (size?: FieldSize) => string;
+export declare const controlClasses: (size: FieldSize | undefined, error: FieldProps["error"], disabled?: boolean) => string;
+interface FieldShellProps extends FieldProps {
+    id: string;
+    size?: FieldSize;
+    className?: string;
+    children: ReactNode;
+}
+/** Etiqueta, control y pista o error, enlazados por `id`. Compartido por Input, Textarea y Select. */
+export declare function FieldShell({ id, label, required, hint, error, size, className, children, }: FieldShellProps): import("react").JSX.Element;
+/** Atributos ARIA que enlazan el control con su pista o error. */
+export declare const describedBy: (id: string, { hint, error }: FieldProps) => {
+    "aria-invalid": boolean | undefined;
+    "aria-describedby": string | undefined;
+};
+export {};

package/dist/internal/field.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+// Borde de 1px y shadow-xs; en foco, 2px en border-brand. Con teclado, además el anillo de foco.
+const CONTROL = "flex items-center gap-2 rounded-lg bg-primary px-3 py-2 text-fg-quaternary transition-shadow duration-100 ease-linear shadow-[var(--shadow-xs),inset_0_0_0_1px_var(--border-primary)] focus-within:shadow-[var(--shadow-xs),inset_0_0_0_2px_var(--border-brand)] has-[:focus-visible]:shadow-[var(--shadow-xs),inset_0_0_0_2px_var(--border-brand),var(--focus-ring-shadow)]";
+const CONTROL_ERROR = "shadow-[var(--shadow-xs),inset_0_0_0_1px_var(--border-error_subtle)] focus-within:shadow-[var(--shadow-xs),inset_0_0_0_2px_var(--border-error)] has-[:focus-visible]:shadow-[var(--shadow-xs),inset_0_0_0_2px_var(--border-error),var(--focus-ring-error-shadow)]";
+const CONTROL_SIZE = {
+    sm: "",
+    md: "min-h-10",
+    lg: "min-h-11 px-3.5 py-2.5",
+};
+/** Clases del elemento nativo: sin borde propio, el control pinta el marco. */
+export const nativeClasses = (size = "md") => cx("min-w-0 flex-1 border-0 bg-transparent p-0 font-body text-md font-normal text-primary outline-none placeholder:text-placeholder disabled:cursor-not-allowed", size === "sm" && "text-sm");
+export const controlClasses = (size, error, disabled) => cx(CONTROL, size && CONTROL_SIZE[size], error && CONTROL_ERROR, disabled && "opacity-50");
+/** Etiqueta, control y pista o error, enlazados por `id`. Compartido por Input, Textarea y Select. */
+export function FieldShell({ id, label, required, hint, error, size = "md", className, children, }) {
+    const message = typeof error === "string" && error ? error : hint;
+    return (_jsxs("div", { className: cx("flex min-w-0 flex-col gap-1.5 font-body", className), children: [label ? (_jsxs("label", { htmlFor: id, className: "text-sm font-medium text-secondary", children: [label, required ? (_jsx("span", { "aria-hidden": "true", className: cx("ml-0.5", error ? "text-error-primary" : "text-brand-tertiary"), children: "*" })) : null] })) : null, children, message ? (_jsx("p", { id: `${id}-hint`, className: cx("m-0 text-sm font-normal", size === "sm" && "text-xs", error ? "text-error-primary" : "text-tertiary"), children: message })) : null] }));
+}
+/** Atributos ARIA que enlazan el control con su pista o error. */
+export const describedBy = (id, { hint, error }) => ({
+    "aria-invalid": error ? true : undefined,
+    "aria-describedby": hint || (typeof error === "string" && error) ? `${id}-hint` : undefined,
+});

package/dist/internal/format.d.ts

@@ -0,0 +1,12 @@
+/** `1284.5` → `1.284,50 €`. */
+export declare function formatCurrency(value: number, currency?: string): string;
+/** `1284.5` → `1.284,5`; con `decimals` fija los decimales. */
+export declare function formatNumber(value: number, decimals?: number): string;
+/** `0.08` → `8 %`. */
+export declare function formatPercent(value: number, decimals?: number): string;
+/** `new Date(2026, 9, 29)` → `29 oct 2026`. */
+export declare function formatDate(date: Date): string;
+/** Nombre del mes con mayúscula inicial: `Octubre 2026`. */
+export declare function formatMonth(date: Date): string;
+/** `204800` → `200 KB`. */
+export declare function formatBytes(bytes: number): string;

package/dist/internal/format.js

@@ -0,0 +1,40 @@
+// Formatos de la guía: castellano de España, `1.284,50 €`, `29 oct 2026`.
+const LOCALE = "es-ES";
+// En es-ES, Intl no agrupa los números de cuatro cifras (1284,50); la guía pide 1.284,50.
+const number = (options) => new Intl.NumberFormat(LOCALE, { useGrouping: "always", ...options });
+/** `1284.5` → `1.284,50 €`. */
+export function formatCurrency(value, currency = "EUR") {
+    return number({ style: "currency", currency }).format(value);
+}
+/** `1284.5` → `1.284,5`; con `decimals` fija los decimales. */
+export function formatNumber(value, decimals) {
+    return number(decimals === undefined ? {} : { minimumFractionDigits: decimals, maximumFractionDigits: decimals }).format(value);
+}
+/** `0.08` → `8 %`. */
+export function formatPercent(value, decimals = 0) {
+    return number({ style: "percent", maximumFractionDigits: decimals }).format(value);
+}
+/** `new Date(2026, 9, 29)` → `29 oct 2026`. */
+export function formatDate(date) {
+    return new Intl.DateTimeFormat(LOCALE, { day: "numeric", month: "short", year: "numeric" }).format(date);
+}
+/** Nombre del mes con mayúscula inicial: `Octubre 2026`. */
+export function formatMonth(date) {
+    const s = new Intl.DateTimeFormat(LOCALE, { month: "long", year: "numeric" })
+        .format(date)
+        .replace(" de ", " ");
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
+/** `204800` → `200 KB`. */
+export function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const units = ["KB", "MB", "GB"];
+    let v = bytes / 1024;
+    let i = 0;
+    while (v >= 1024 && i < units.length - 1) {
+        v /= 1024;
+        i++;
+    }
+    return `${formatNumber(Math.round(v * 10) / 10)} ${units[i]}`;
+}

package/dist/internal/kbd.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+/** Tecla o atajo (`jm-menu-kbd` de la guía): texto de 12px con filo `border-secondary`. */
+export declare function Kbd({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/internal/kbd.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** Tecla o atajo (`jm-menu-kbd` de la guía): texto de 12px con filo `border-secondary`. */
+export function Kbd({ children, className }) {
+    return (_jsx("kbd", { className: cx("rounded-sm px-1 font-body text-xs font-medium text-quaternary shadow-[inset_0_0_0_1px_var(--border-secondary)]", className), children: children }));
+}

package/dist/internal/layer.d.ts

@@ -0,0 +1,21 @@
+import type { CSSProperties, ReactNode } from "react";
+export interface LayerProps {
+    /** Dentro de su contenedor (posición relativa) y sin atrapar el foco: para vistas previas. */
+    contained?: boolean;
+    /** Sin él, ni Escape ni el clic fuera cierran la capa. */
+    onClose?: () => void;
+    /** Clases del fondo, además de las comunes (colocación del panel). */
+    overlayClassName: string;
+    panelClassName: string;
+    panelStyle?: CSSProperties;
+    /** Id del título que da nombre al diálogo. */
+    labelledBy: string;
+    describedBy?: string;
+    children: ReactNode;
+}
+/**
+ * Capa de diálogo común a Modal y Slideout. Sobre la página usa React Aria: foco atrapado, Escape y clic fuera
+ * cierran, el foco vuelve a quien la abrió y la página no se desplaza debajo. Con `contained` es un diálogo no modal
+ * dentro de su contenedor; Escape y el clic en el fondo siguen cerrándolo.
+ */
+export declare function Layer({ contained, onClose, overlayClassName, panelClassName, panelStyle, labelledBy, describedBy, children, }: LayerProps): import("react").JSX.Element;

package/dist/internal/layer.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog, Modal, ModalOverlay } from "react-aria-components";
+import { cx } from "./cx.js";
+import { OVERLAY, OVERLAY_POSITION } from "./overlay.js";
+/**
+ * Capa de diálogo común a Modal y Slideout. Sobre la página usa React Aria: foco atrapado, Escape y clic fuera
+ * cierran, el foco vuelve a quien la abrió y la página no se desplaza debajo. Con `contained` es un diálogo no modal
+ * dentro de su contenedor; Escape y el clic en el fondo siguen cerrándolo.
+ */
+export function Layer({ contained, onClose, overlayClassName, panelClassName, panelStyle, labelledBy, describedBy, children, }) {
+    if (contained) {
+        return (_jsx("div", { className: cx(OVERLAY, OVERLAY_POSITION(true), overlayClassName), onClick: (e) => {
+                if (e.target === e.currentTarget)
+                    onClose?.();
+            }, children: _jsx("div", { role: "dialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy, className: panelClassName, style: panelStyle, onKeyDown: (e) => {
+                    if (e.key === "Escape" && onClose) {
+                        e.stopPropagation();
+                        onClose();
+                    }
+                }, children: children }) }));
+    }
+    return (_jsx(ModalOverlay, { isOpen: true, isDismissable: !!onClose, isKeyboardDismissDisabled: !onClose, onOpenChange: (open) => {
+            if (!open)
+                onClose?.();
+        }, className: cx(OVERLAY, OVERLAY_POSITION(false), overlayClassName), children: _jsx(Modal, { className: "contents", children: _jsx(Dialog, { "aria-labelledby": labelledBy, "aria-describedby": describedBy, className: cx(panelClassName, "outline-none"), style: panelStyle, children: children }) }) }));
+}

package/dist/internal/line.d.ts

@@ -0,0 +1,2 @@
+/** Línea de 1px en `border-secondary` bajo cabeceras y sobre pies (`.jm-ph-line` del bundle). Decorativa. */
+export declare function Line(): import("react").JSX.Element;

package/dist/internal/line.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Línea de 1px en `border-secondary` bajo cabeceras y sobre pies (`.jm-ph-line` del bundle). Decorativa. */
+export function Line() {
+    return _jsx("div", { "aria-hidden": "true", className: "shrink-0 border-t border-secondary" });
+}

package/dist/internal/overlay.d.ts

@@ -0,0 +1,2 @@
+export declare const OVERLAY = "z-50 flex bg-overlay/70 p-4 [backdrop-filter:var(--backdrop-blur-lg)]";
+export declare const OVERLAY_POSITION: (contained?: boolean) => "absolute inset-0" | "fixed inset-0";

package/dist/internal/overlay.js

@@ -0,0 +1,4 @@
+// Fondo de las capas (Modal, Slideout, CommandMenu): `bg-overlay` al 70 % con desenfoque de 16px.
+// `contained` la pinta dentro de su contenedor (absoluta) en vez de sobre toda la ventana, para las vistas previas.
+export const OVERLAY = "z-50 flex bg-overlay/70 p-4 [backdrop-filter:var(--backdrop-blur-lg)]";
+export const OVERLAY_POSITION = (contained) => (contained ? "absolute inset-0" : "fixed inset-0");

package/dist/internal/stream-stage.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export interface StreamStageProps {
+    /** Tamaño real del lienzo en px (StreamScene 1920×1080, ChannelBanner 1200×480). */
+    width: number;
+    height: number;
+    /** Escala fija: mide `width × scale`. Sin ella, se ajusta al ancho del contenedor. */
+    scale?: number;
+    className?: string;
+    /** Clases del lienzo interior, que mide siempre `width × height`. */
+    stageClassName?: string;
+    children?: ReactNode;
+}
+/**
+ * Lienzo de tamaño fijo escalado con `transform` (`stFit` + `.jm-st-fit` / `.jm-st-stage` del bundle).
+ * El alto del contenedor sale de `aspect-ratio`, así que el hueco es el correcto desde el primer pintado; el
+ * contenido espera a la primera medida para no verse a tamaño real un instante. Con `scale` no mide nada.
+ */
+export declare function StreamStage({ width, height, scale, className, stageClassName, children }: StreamStageProps): import("react").JSX.Element;

package/dist/internal/stream-stage.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { cx } from "./cx.js";
+import { STREAM_ROOT } from "./stream.js";
+// En servidor useLayoutEffect avisa; allí no hay nada que medir.
+const useIsoLayoutEffect = typeof window === "undefined" ? () => { } : useLayoutEffect;
+/**
+ * Lienzo de tamaño fijo escalado con `transform` (`stFit` + `.jm-st-fit` / `.jm-st-stage` del bundle).
+ * El alto del contenedor sale de `aspect-ratio`, así que el hueco es el correcto desde el primer pintado; el
+ * contenido espera a la primera medida para no verse a tamaño real un instante. Con `scale` no mide nada.
+ */
+export function StreamStage({ width, height, scale, className, stageClassName, children }) {
+    const ref = useRef(null);
+    const [measured, setMeasured] = useState(null);
+    useIsoLayoutEffect(() => {
+        if (scale)
+            return;
+        const el = ref.current;
+        if (!el)
+            return;
+        const update = () => {
+            if (el.clientWidth)
+                setMeasured(el.clientWidth / width);
+        };
+        update();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const ro = new ResizeObserver(update);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [scale, width]);
+    const s = scale ?? measured;
+    const outer = scale
+        ? { width: width * scale, height: height * scale }
+        : { width: "100%", aspectRatio: `${width} / ${height}` };
+    return (_jsx("div", { ref: ref, className: cx(STREAM_ROOT, "relative overflow-hidden bg-primary", className), style: outer, children: _jsx("div", { className: cx("absolute top-0 left-0 origin-top-left overflow-hidden bg-primary text-primary", s == null && "invisible", stageClassName), style: { width, height, transform: s == null ? undefined : `scale(${s})` }, children: children }) }));
+}