@proyecto-viviana/solidaria 0.4.0 → 0.4.1

package/dist/_chunk/color.js

@@ -1,6 +1,7 @@
 import { t as filterDOMProps } from "./filterDOMProps.js";
 import { n as focusWithoutScrolling } from "./focus.js";
-import { a as useLocale } from "./createCollator.js";
+import { i as useLocale } from "./locale.js";
+import { n as createStringFormatter } from "./createStringFormatter.js";
 import { createId as createId$1 } from "../ssr/index.js";
 import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
 import { normalizeColor, parseColor } from "@proyecto-viviana/solid-stately";
@@ -32,7 +33,7 @@ function createColorSlider(props, state, trackRef, inputRef) {
 		const p = getProps();
 		if (p.channelName) return p.channelName;
 		const s = getState();
-		return s.value.getChannelName(s.channel, "en-US");
+		return s.value.getChannelName(s.channel, locale().locale);
 	});
 	const orientation = () => getProps().orientation ?? "horizontal";
 	const hasVisibleLabel = () => getProps().label != null;
@@ -256,7 +257,6 @@ function createColorSlider(props, state, trackRef, inputRef) {
 		const x = orientation() === "horizontal" ? isRTL() ? 1 - percent : percent : .5;
 		const y = orientation() === "horizontal" ? .5 : 1 - percent;
 		return {
-			role: "presentation",
 			onKeyDown,
 			style: {
 				position: "absolute",
@@ -356,6 +356,289 @@ function createColorSlider(props, state, trackRef, inputRef) {
 	};
 }
 //#endregion
+//#region src/color/intl/index.ts
+const colorIntlStrings = {
+	"ar-AE": {
+		colorPicker: "أداة انتقاء اللون",
+		twoDimensionalSlider: "مُنزلق 2D",
+		colorSwatch: "تغيير الألوان",
+		transparent: "شفاف",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"bg-BG": {
+		colorPicker: "Средство за избиране на цвят",
+		twoDimensionalSlider: "2D плъзгач",
+		colorSwatch: "цветна мостра",
+		transparent: "прозрачен",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"cs-CZ": {
+		colorPicker: "Výběr barvy",
+		twoDimensionalSlider: "2D posuvník",
+		colorSwatch: "barevný vzorek",
+		transparent: "průhledný",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"da-DK": {
+		colorPicker: "Farvevælger",
+		twoDimensionalSlider: "2D-skyder",
+		colorSwatch: "farveprøve",
+		transparent: "gennemsigtig",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"de-DE": {
+		colorPicker: "Farbwähler",
+		twoDimensionalSlider: "2D-Schieberegler",
+		colorSwatch: "Farbfeld",
+		transparent: "transparent",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"el-GR": {
+		colorPicker: "Επιλογέας χρωμάτων",
+		twoDimensionalSlider: "Ρυθμιστικό 2D",
+		colorSwatch: "χρωματικό δείγμα",
+		transparent: "διαφανές",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"en-US": {
+		colorPicker: "Color picker",
+		twoDimensionalSlider: "2D slider",
+		colorSwatch: "color swatch",
+		transparent: "transparent",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"es-ES": {
+		colorPicker: "Selector de color",
+		twoDimensionalSlider: "Regulador 2D",
+		colorSwatch: "muestra de color",
+		transparent: "transparente",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"et-EE": {
+		colorPicker: "Värvivalija",
+		twoDimensionalSlider: "2D-liugur",
+		colorSwatch: "värvinäidis",
+		transparent: "läbipaistev",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"fi-FI": {
+		colorPicker: "Värimuokkain",
+		twoDimensionalSlider: "2D-liukusäädin",
+		colorSwatch: "värimalli",
+		transparent: "läpinäkyvä",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"fr-FR": {
+		colorPicker: "Sélecteur de couleurs",
+		twoDimensionalSlider: "Curseur\xA02D",
+		colorSwatch: "Échantillon de couleurs",
+		transparent: "Transparent",
+		colorNameAndValue: (args) => `${args?.name} : ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"he-IL": {
+		colorPicker: "בוחר הצבעים",
+		twoDimensionalSlider: "מחוון דו מימדי",
+		colorSwatch: "דוגמית צבע",
+		transparent: "שקוף",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"hr-HR": {
+		colorPicker: "Odabir boje",
+		twoDimensionalSlider: "2D klizač",
+		colorSwatch: "uzorak boje",
+		transparent: "transparentno",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"hu-HU": {
+		colorPicker: "Színválasztó",
+		twoDimensionalSlider: "2D-csúszka",
+		colorSwatch: "színtár",
+		transparent: "átlátszó",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"it-IT": {
+		colorPicker: "Selettore colore",
+		twoDimensionalSlider: "Cursore 2D",
+		colorSwatch: "campione di colore",
+		transparent: "trasparente",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"ja-JP": {
+		colorPicker: "カラーピッカー",
+		twoDimensionalSlider: "2D スライダー",
+		colorSwatch: "カラースウォッチ",
+		transparent: "透明",
+		colorNameAndValue: (args) => `${args?.name} : ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}、${args?.channelLabel}`
+	},
+	"ko-KR": {
+		colorPicker: "색상 피커",
+		twoDimensionalSlider: "2D 슬라이더",
+		colorSwatch: "색상 견본",
+		transparent: "투명도",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"lt-LT": {
+		colorPicker: "Spalvų parinkiklis",
+		twoDimensionalSlider: "2D slankiklis",
+		colorSwatch: "spalvų pavyzdys",
+		transparent: "skaidrus",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"lv-LV": {
+		colorPicker: "Krāsu atlasītājs",
+		twoDimensionalSlider: "2D slīdnis",
+		colorSwatch: "krāsu paraugs",
+		transparent: "caurspīdīgs",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"nb-NO": {
+		colorPicker: "Fargevelger",
+		twoDimensionalSlider: "2D-glidebryter",
+		colorSwatch: "fargekart",
+		transparent: "gjennomsiktig",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"nl-NL": {
+		colorPicker: "Kleurkiezer",
+		twoDimensionalSlider: "2D-schuifregelaar",
+		colorSwatch: "kleurstaal",
+		transparent: "transparant",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"pl-PL": {
+		colorPicker: "Próbnik kolorów",
+		twoDimensionalSlider: "Suwak 2D",
+		colorSwatch: "próbka koloru",
+		transparent: "przezroczysty",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"pt-BR": {
+		colorPicker: "Seletor de cores",
+		twoDimensionalSlider: "Controle deslizante 2D",
+		colorSwatch: "amostra de cores",
+		transparent: "transparente",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"pt-PT": {
+		colorPicker: "Seletor de cores",
+		twoDimensionalSlider: "Controle deslizante 2D",
+		colorSwatch: "amostra de cor",
+		transparent: "transparente",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"ro-RO": {
+		colorPicker: "Selector de culori",
+		twoDimensionalSlider: "Glisor 2D",
+		colorSwatch: "specimen de culoare",
+		transparent: "transparent",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"ru-RU": {
+		colorPicker: "Палитра цветов",
+		twoDimensionalSlider: "Ползунок 2D",
+		colorSwatch: "цветовой образец",
+		transparent: "прозрачный",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"sk-SK": {
+		colorPicker: "Výber farieb",
+		twoDimensionalSlider: "2D jazdec",
+		colorSwatch: "vzorkovník farieb",
+		transparent: "transparentný",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"sl-SI": {
+		colorPicker: "Izbirnik barv",
+		twoDimensionalSlider: "2D drsnik",
+		colorSwatch: "barvna paleta",
+		transparent: "prozorno",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"sr-SP": {
+		colorPicker: "Birač boja",
+		twoDimensionalSlider: "2D klizač",
+		colorSwatch: "Uzorak boje",
+		transparent: "providno",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"sv-SE": {
+		colorPicker: "Färgväljaren",
+		twoDimensionalSlider: "2D-reglage",
+		colorSwatch: "färgruta",
+		transparent: "genomskinlig",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"tr-TR": {
+		colorPicker: "Renk Seçici",
+		twoDimensionalSlider: "2D sürgü",
+		colorSwatch: "renk örneği",
+		transparent: "saydam",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"uk-UA": {
+		colorPicker: "Палітра кольорів",
+		twoDimensionalSlider: "Повзунок 2D",
+		colorSwatch: "зразок кольору",
+		transparent: "прозорий",
+		colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`
+	},
+	"zh-CN": {
+		colorPicker: "拾色器",
+		twoDimensionalSlider: "2D 滑块",
+		colorSwatch: "颜色色板",
+		transparent: "透明",
+		colorNameAndValue: (args) => `${args?.name}：${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}、${args?.channelLabel}`
+	},
+	"zh-TW": {
+		colorPicker: "檢色器",
+		twoDimensionalSlider: "2D 滑桿",
+		colorSwatch: "色票",
+		transparent: "透明",
+		colorNameAndValue: (args) => `${args?.name}：${args?.value}`,
+		colorInputLabel: (args) => `${args?.label}，${args?.channelLabel}`
+	}
+};
+/**
+* Reactive color string formatter for the current locale. Mirrors upstream
+* `useLocalizedStringFormatter(intlMessages, '@react-aria/color')`.
+*/
+function createColorStringFormatter() {
+	return createStringFormatter(colorIntlStrings, "@react-aria/color");
+}
+//#endregion
 //#region src/color/createColorArea.ts
 /**
 * createColorArea hook.
@@ -369,6 +652,7 @@ function createColorArea(props, state, areaRef) {
 	const getProps = () => props();
 	const getState = () => state();
 	const locale = useLocale();
+	const stringFormatter = createColorStringFormatter();
 	const isRTL = () => locale().direction === "rtl";
 	const [focusedInput, setFocusedInput] = createSignal(null);
 	const [valueChangedViaKeyboard, setValueChangedViaKeyboard] = createSignal(false);
@@ -376,10 +660,13 @@ function createColorArea(props, state, areaRef) {
 	const colorAreaId = createId$1();
 	const xInputId = createId$1();
 	const yInputId = createId$1();
-	const colorPickerLabel = () => "Color picker";
+	const colorPickerLabel = () => stringFormatter().format("colorPicker");
 	const colorInputLabel = () => {
 		const ariaLabel = getProps()["aria-label"];
-		return ariaLabel ? `${ariaLabel}, ${colorPickerLabel()}` : colorPickerLabel();
+		return ariaLabel ? stringFormatter().format("colorInputLabel", {
+			label: ariaLabel,
+			channelLabel: colorPickerLabel()
+		}) : colorPickerLabel();
 	};
 	const colorAreaLabel = () => {
 		const ariaLabel = getProps()["aria-label"];
@@ -388,7 +675,10 @@ function createColorArea(props, state, areaRef) {
 	const formatChannelValueText = (channel) => {
 		const value = getState().getDisplayColor();
 		const loc = locale().locale;
-		return `${value.getChannelName(channel, loc)}: ${value.formatChannelValue(channel, loc)}`;
+		return stringFormatter().format("colorNameAndValue", {
+			name: value.getChannelName(channel, loc),
+			value: value.formatChannelValue(channel, loc)
+		});
 	};
 	const getAriaValueTextForChannel = (channel) => {
 		const s = getState();
@@ -614,7 +904,7 @@ function createColorArea(props, state, areaRef) {
 			type: "range",
 			id: p.id ?? xInputId,
 			"aria-label": colorInputLabel(),
-			"aria-roledescription": "2D slider",
+			"aria-roledescription": stringFormatter().format("twoDimensionalSlider"),
 			"aria-valuetext": getAriaValueTextForChannel(s.xChannel),
 			"aria-orientation": "horizontal",
 			"aria-describedby": p["aria-describedby"],
@@ -631,9 +921,6 @@ function createColorArea(props, state, areaRef) {
 			onKeyDown,
 			onInput: (e) => updateFromInput(e, "x"),
 			onChange: (e) => updateFromInput(e, "x"),
-			onBlur: () => {
-				if (s.isDragging) s.setDragging(false);
-			},
 			tabIndex: !focusedInput() || focusedInput() === "x" ? void 0 : -1,
 			style: {
 				position: "absolute",
@@ -656,7 +943,7 @@ function createColorArea(props, state, areaRef) {
 			type: "range",
 			id: p.id ?? yInputId,
 			"aria-label": colorInputLabel(),
-			"aria-roledescription": "2D slider",
+			"aria-roledescription": stringFormatter().format("twoDimensionalSlider"),
 			"aria-valuetext": getAriaValueTextForChannel(s.yChannel),
 			"aria-orientation": "vertical",
 			"aria-describedby": p["aria-describedby"],
@@ -936,7 +1223,6 @@ function createColorWheel(props, state, wheelRef) {
 			name: p.name,
 			form: p.form,
 			disabled: s.isDisabled || p.isDisabled,
-			tabIndex: s.isDisabled || p.isDisabled ? void 0 : 0,
 			"aria-label": p["aria-label"] ?? (p["aria-labelledby"] ? void 0 : s.value.getChannelName("hue", locale().locale)),
 			"aria-labelledby": p["aria-labelledby"],
 			"aria-describedby": p["aria-describedby"],
@@ -952,9 +1238,6 @@ function createColorWheel(props, state, wheelRef) {
 				const target = e.target;
 				s.setHue(parseFloat(target.value));
 			},
-			onBlur: () => {
-				if (s.isDragging) s.setDragging(false);
-			},
 			style: {
 				position: "absolute",
 				width: "100%",
@@ -1072,7 +1355,7 @@ function createColorField(props, state, inputRef) {
 			disabled: isDisabled(),
 			readOnly: isReadOnly(),
 			required: validationBehavior() === "native" ? required || void 0 : void 0,
-			tabIndex: p.excludeFromTabOrder ? -1 : void 0,
+			tabIndex: isDisabled() ? void 0 : p.excludeFromTabOrder ? -1 : 0,
 			autoComplete: "off",
 			autoCorrect: "off",
 			spellCheck: "false",
@@ -1131,6 +1414,7 @@ function createColorField(props, state, inputRef) {
 function createColorSwatch(props) {
 	const getProps = () => props();
 	const locale = useLocale();
+	const stringFormatter = createColorStringFormatter();
 	const generatedId = createId$1();
 	const id = () => getProps().id ?? generatedId;
 	const color = createMemo(() => normalizeColor(getProps().color ?? "#fff0"));
@@ -1138,7 +1422,7 @@ function createColorSwatch(props) {
 		const p = getProps();
 		if (p.colorName) return p.colorName;
 		const resolvedColor = color();
-		if (resolvedColor.getChannelValue("alpha") === 0) return "transparent";
+		if (resolvedColor.getChannelValue("alpha") === 0) return stringFormatter().format("transparent");
 		return resolvedColor.getColorName(locale().locale);
 	});
 	const swatchProps = createMemo(() => {
@@ -1150,7 +1434,7 @@ function createColorSwatch(props) {
 			id: id(),
 			slot: p.slot,
 			role: "img",
-			"aria-roledescription": "color swatch",
+			"aria-roledescription": stringFormatter().format("colorSwatch"),
 			"aria-label": ariaLabel,
 			"aria-labelledby": p["aria-labelledby"] ? `${id()} ${p["aria-labelledby"]}` : void 0,
 			style: {