@jotis-me/react 0.1.0 → 0.2.0

package/dist/components/AppIcon.d.ts

@@ -2,7 +2,7 @@ import { type AppIconHue, type AppIconShape, type AppIconVariant, type AppName }
 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 declare const appIcons: Record<"emptor" | "ornatus" | "pecunia" | "regula" | "vinculum", import("@jotis-me/icons/app-icon").AppInfo>;
 export interface AppIconProps {
     /** App de la suite. Para una nueva, `letters` + `hue`. */
     app?: AppName;

package/dist/components/BrowserFrame.js

@@ -9,5 +9,7 @@ export function BrowserFrame({ variant = "safari", url = "jotis.me", height, chi
             ? "h-6 bg-primary text-xs shadow-[inset_0_0_0_1px_var(--border-secondary)]"
             : "h-7 bg-secondary text-[13px] leading-[18px]"), children: [_jsx(Icon, { name: "lock-01", size: 12 }), _jsx("span", { className: "truncate", children: url })] }));
     const nav = "flex shrink-0 items-center gap-3 max-[560px]:hidden";
-    return (_jsxs("div", { className: cx("overflow-hidden rounded-xl border border-secondary bg-primary font-body shadow-xl", className), style: style, children: [_jsxs("div", { className: cx("flex items-center gap-4 px-4 text-fg-quaternary shadow-[inset_0_-1px_0_var(--border-secondary)]", minimal ? "h-9 bg-secondary" : "h-11 bg-primary"), children: [_jsxs("div", { "aria-hidden": "true", className: "flex shrink-0 gap-2", children: [_jsx("span", { className: cx(dot, !minimal && "bg-[#ee6a5f]") }), _jsx("span", { className: cx(dot, !minimal && "bg-[#f5bd4f]") }), _jsx("span", { className: cx(dot, !minimal && "bg-[#61c454]") })] }), minimal ? (_jsxs(_Fragment, { children: [address, _jsx("span", { className: "w-[52px] shrink-0" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: nav, children: [_jsx(Icon, { name: "chevron-left", size: 18 }), _jsx(Icon, { name: "chevron-right", size: 18 })] }), address, _jsxs("div", { className: cx(nav, "ml-auto"), children: [_jsx(Icon, { name: "refresh-cw-01", size: 16 }), _jsx(Icon, { name: "plus", size: 18 }), _jsx(Icon, { name: "copy-01", size: 16 })] })] }))] }), _jsx("div", { className: "relative overflow-auto", style: height !== undefined ? { height } : undefined, children: children })] }));
+    return (_jsxs("div", { className: cx("overflow-hidden rounded-xl border border-secondary bg-primary font-body shadow-xl", className), style: style, children: [_jsxs("div", { className: cx("flex items-center gap-4 px-4 text-fg-quaternary shadow-[inset_0_-1px_0_var(--border-secondary)]", minimal ? "h-9 bg-secondary" : "h-11 bg-primary"), children: [_jsxs("div", { "aria-hidden": "true", className: "flex shrink-0 gap-2", children: [_jsx("span", { className: cx(dot, !minimal && "bg-[#ee6a5f]") }), _jsx("span", { className: cx(dot, !minimal && "bg-[#f5bd4f]") }), _jsx("span", { className: cx(dot, !minimal && "bg-[#61c454]") })] }), minimal ? (_jsxs(_Fragment, { children: [address, _jsx("span", { className: "w-[52px] shrink-0" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: nav, children: [_jsx(Icon, { name: "chevron-left", size: 18 }), _jsx(Icon, { name: "chevron-right", size: 18 })] }), address, _jsxs("div", { className: cx(nav, "ml-auto"), children: [_jsx(Icon, { name: "refresh-cw-01", size: 16 }), _jsx(Icon, { name: "plus", size: 18 }), _jsx(Icon, { name: "copy-01", size: 16 })] })] }))] }), _jsx("section", { "aria-label": url, 
+                // biome-ignore lint/a11y/noNoninteractiveTabindex: el contenido puede desplazarse y necesita foco de teclado
+                tabIndex: 0, className: "relative overflow-auto focus-visible:shadow-[inset_0_0_0_2px_var(--focus-ring)] focus-visible:outline-none", style: height !== undefined ? { height } : undefined, children: children })] }));
 }

package/dist/components/Checkbox.js

@@ -9,10 +9,18 @@ export function Checkbox({ label, hint, indeterminate, size = "sm", id: givenId,
     const autoId = useId();
     const id = givenId ?? autoId;
     const ref = useRef(null);
+    // La propiedad `indeterminate` no existe en HTML: se pone al montar, y `aria-checked="mixed"` con ella, para
+    // que el HTML de servidor no anuncie "mixed" en una casilla nativa que todavía no lo está
     useEffect(() => {
-        if (ref.current)
-            ref.current.indeterminate = !!indeterminate;
+        const input = ref.current;
+        if (!input)
+            return;
+        input.indeterminate = !!indeterminate;
+        if (indeterminate)
+            input.setAttribute("aria-checked", "mixed");
+        else
+            input.removeAttribute("aria-checked");
     }, [indeterminate]);
     const markSize = size === "md" ? 14 : 12;
-    return (_jsxs("label", { htmlFor: id, className: cx(choiceLabel(size), className), children: [_jsx("input", { ref: ref, id: id, type: "checkbox", "aria-checked": indeterminate ? "mixed" : undefined, ...rest, className: hiddenInput }), _jsx("span", { "aria-hidden": "true", className: cx(choiceBox(size, false), "peer-checked:bg-brand-solid peer-checked:shadow-none peer-focus-visible:shadow-focus-ring peer-disabled:opacity-50", indeterminate && "bg-brand-solid shadow-none"), children: indeterminate ? (_jsx(Icon, { name: "minus", size: markSize, strokeWidth: 1.67 })) : (_jsx("span", { className: "hidden group-has-[:checked]:inline-flex", children: _jsx(Icon, { name: "check", size: markSize, strokeWidth: 1.67 }) })) }), _jsx(ChoiceText, { label: label, hint: hint, size: size, className: "peer-disabled:opacity-50" })] }));
+    return (_jsxs("label", { htmlFor: id, className: cx(choiceLabel(size), className), children: [_jsx("input", { ref: ref, id: id, type: "checkbox", ...rest, className: hiddenInput }), _jsx("span", { "aria-hidden": "true", className: cx(choiceBox(size, false), "peer-checked:bg-brand-solid peer-checked:shadow-none peer-focus-visible:shadow-focus-ring peer-disabled:opacity-50", indeterminate && "bg-brand-solid shadow-none"), children: indeterminate ? (_jsx(Icon, { name: "minus", size: markSize, strokeWidth: 1.67 })) : (_jsx("span", { className: "hidden group-has-[:checked]:inline-flex", children: _jsx(Icon, { name: "check", size: markSize, strokeWidth: 1.67 }) })) }), _jsx(ChoiceText, { label: label, hint: hint, size: size, className: "peer-disabled:opacity-50" })] }));
 }

package/dist/components/ColorPicker.d.ts

@@ -9,7 +9,9 @@ export interface ColorPickerProps {
     swatchesLabel?: string;
     /** Nombre accesible del campo hexadecimal. @default "Hex" */
     hexLabel?: string;
+    /** Nombre accesible de la barra de tono. @default "Tono" */
+    hueLabel?: string;
     className?: string;
 }
 /** Selector de color: área de saturación y brillo, barra de tono, campo hex y muestras guardadas. */
-export declare function ColorPicker({ defaultValue, onChange, swatches, swatchesLabel, hexLabel, className, }: ColorPickerProps): import("react").JSX.Element;
+export declare function ColorPicker({ defaultValue, onChange, swatches, swatchesLabel, hexLabel, hueLabel, className, }: ColorPickerProps): import("react").JSX.Element;

package/dist/components/ColorPicker.js

@@ -17,7 +17,7 @@ const HAIRLINE = "shadow-[inset_0_0_0_1px_#0000001a]";
 /** Selector de color: área de saturación y brillo, barra de tono, campo hex y muestras guardadas. */
 export function ColorPicker({ 
 // color-fijo: valor inicial, el índigo de marca de la vista previa (ficha de ColorPicker)
-defaultValue = "#4f39f6", onChange, swatches, swatchesLabel = defaultStrings.savedColors, hexLabel = defaultStrings.hex, className, }) {
+defaultValue = "#4f39f6", onChange, swatches, swatchesLabel = defaultStrings.savedColors, hexLabel = defaultStrings.hex, hueLabel = defaultStrings.hue, className, }) {
     const [color, setColor] = useState(() => toHsb(defaultValue));
     // Lo que se está tecleando en el campo hex, hasta que sea un color válido
     const [typing, setTyping] = useState(null);
@@ -27,7 +27,7 @@ defaultValue = "#4f39f6", onChange, swatches, swatchesLabel = defaultStrings.sav
         setTyping(null);
         onChange?.(hexOf(next));
     };
-    return (_jsx(I18nProvider, { locale: "es-ES", children: _jsxs("div", { className: cx("flex w-80 flex-col gap-4 rounded-2xl bg-primary_alt p-5 font-body shadow-[var(--shadow-xl),inset_0_0_0_1px_var(--border-secondary_alt)]", className), children: [_jsx(ColorArea, { value: color, onChange: set, xChannel: "saturation", yChannel: "brightness", className: "h-50 w-full cursor-crosshair touch-none rounded-lg", children: _jsx(ColorThumb, { className: THUMB }) }), _jsx(ColorSlider, { value: color, onChange: set, channel: "hue", colorSpace: "hsb", children: _jsx(SliderTrack, { className: "h-3 cursor-pointer touch-none rounded-full", children: _jsx(ColorThumb, { className: cx(THUMB, "top-1/2") }) }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": "true", className: cx("size-9 flex-none rounded-lg", HAIRLINE), style: { background: hex } }), _jsx(Input, { size: "sm", "aria-label": hexLabel, className: "flex-1", value: typing ?? hex.toUpperCase(), onChange: (e) => {
+    return (_jsx(I18nProvider, { locale: "es-ES", children: _jsxs("div", { className: cx("flex w-80 flex-col gap-4 rounded-2xl bg-primary_alt p-5 font-body shadow-[var(--shadow-xl),inset_0_0_0_1px_var(--border-secondary_alt)]", className), children: [_jsx(ColorArea, { value: color, onChange: set, xChannel: "saturation", yChannel: "brightness", className: "h-50 w-full cursor-crosshair touch-none rounded-lg", children: _jsx(ColorThumb, { className: THUMB }) }), _jsx(ColorSlider, { value: color, onChange: set, channel: "hue", colorSpace: "hsb", "aria-label": hueLabel, children: _jsx(SliderTrack, { className: "h-3 cursor-pointer touch-none rounded-full", children: _jsx(ColorThumb, { className: cx(THUMB, "top-1/2") }) }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": "true", className: cx("size-9 flex-none rounded-lg", HAIRLINE), style: { background: hex } }), _jsx(Input, { size: "sm", "aria-label": hexLabel, className: "flex-1", value: typing ?? hex.toUpperCase(), onChange: (e) => {
                                 const v = e.target.value;
                                 setTyping(v);
                                 if (HEX.test(v)) {

package/dist/internal/strings.d.ts

@@ -45,6 +45,7 @@ export declare const defaultStrings: {
     readonly writeMessage: "Escribe un mensaje";
     readonly savedColors: "Colores guardados";
     readonly hex: "Hex";
+    readonly hue: "Tono";
     readonly formatting: "Formato";
     readonly bold: "Negrita";
     readonly italic: "Cursiva";

package/dist/internal/strings.js

@@ -47,6 +47,7 @@ export const defaultStrings = {
     writeMessage: "Escribe un mensaje",
     savedColors: "Colores guardados",
     hex: "Hex",
+    hue: "Tono",
     formatting: "Formato",
     bold: "Negrita",
     italic: "Cursiva",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@jotis-me/react",
-	"version": "0.1.0",
+	"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",
@@ -37,8 +37,8 @@
 	},
 	"dependencies": {
 		"@internationalized/date": "^3.12.4",
-		"@jotis-me/icons": "0.1.0",
-		"@jotis-me/tokens": "0.1.0",
+		"@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"