analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1,235 lines (1,163 loc) • 49.6 kB
JavaScript
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
var _chunkK74LIVOMjs = require('./chunk-K74LIVOM.js');
var _chunkNWESVOUHjs = require('./chunk-NWESVOUH.js');
var _chunkZ2LTOXF3js = require('./chunk-Z2LTOXF3.js');
var _chunkQ3SVOFHAjs = require('./chunk-Q3SVOFHA.js');
var _chunkALPGURNKjs = require('./chunk-ALPGURNK.js');
var _chunkOSTHYDKMjs = require('./chunk-OSTHYDKM.js');
var _chunkHGWU3GUNjs = require('./chunk-HGWU3GUN.js');
var _chunkBVUPM6EYjs = require('./chunk-BVUPM6EY.js');
var _chunk34ST3MKOjs = require('./chunk-34ST3MKO.js');
var _chunkANT66KVKjs = require('./chunk-ANT66KVK.js');
var _chunkTN3AYOMVjs = require('./chunk-TN3AYOMV.js');
// src/assets/img/accessibility.png
var accessibility_default = "data:image/png;base64,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";
// src/components/AccessibilityWidget/fabPositioning.ts
var FAB_POSITION_CLASSES = {
right: "right-0 rounded-l-lg",
left: "left-0 rounded-r-lg"
};
var FAB_VERTICAL_ALIGN_CLASSES = {
center: "top-1/2 -translate-y-1/2",
// Pares empilhados (acessibilidade + Libras) com gap mínimo entre si,
// como no widget do HandTalk. Cada FAB tem 40px (h-10).
"above-center": "top-[calc(50%-1px)] -translate-y-full",
"below-center": "top-[calc(50%+1px)]"
};
var FAB_TOOLTIP_POSITION = {
right: "left",
left: "right"
};
// src/components/AccessibilityWidget/AccessibilityFab.tsx
var _jsxruntime = require('react/jsx-runtime');
function AccessibilityFab({
onClick,
isOpen = false,
position = "right",
verticalAlign = "center",
className
}) {
const label = isOpen ? "Fechar op\xE7\xF5es de acessibilidade" : "Op\xE7\xF5es de acessibilidade";
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkOSTHYDKMjs.Tooltip,
{
content: label,
position: FAB_TOOLTIP_POSITION[position],
className: _chunkTN3AYOMVjs.cn.call(void 0,
"fixed z-40",
FAB_VERTICAL_ALIGN_CLASSES[verticalAlign],
FAB_POSITION_CLASSES[position]
),
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
variant: "raw",
onClick,
"aria-label": label,
"aria-expanded": isOpen,
"data-testid": "accessibility-fab",
className: _chunkTN3AYOMVjs.cn.call(void 0,
"a11y-widget-shield",
FAB_POSITION_CLASSES[position],
"flex h-10 w-10 cursor-pointer items-center justify-center",
// `text-text-50` flipa junto com `bg-info-900` (claro no light,
// escuro no dark). `text-white` deixaria o ícone branco sumindo
// no tema escuro, onde `bg-info-900` resolve pra azul-claro.
"bg-info-900 text-text-50 shadow-lg",
"transition-all duration-200 hover:scale-110 hover:bg-info-800",
"focus:outline-none focus:ring-4 focus:ring-info-300",
className
),
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"img",
{
src: accessibility_default,
alt: "",
"aria-hidden": "true",
className: "h-7 w-7"
}
)
}
)
}
);
}
// src/components/AccessibilityWidget/AccessibilityPanel.tsx
var _react = require('react');
var _react3 = require('@phosphor-icons/react');
// src/components/AccessibilityWidget/AccessibilityToggleRow.tsx
function AccessibilityToggleRow({
label,
ariaLabel,
description,
checked,
onChange,
rowTestId,
switchTestId
}) {
const computedAriaLabel = _nullishCoalesce(ariaLabel, () => ( (typeof label === "string" ? label : void 0)));
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"div",
{
role: "switch",
tabIndex: 0,
"aria-checked": checked,
"aria-label": computedAriaLabel,
"data-testid": rowTestId,
className: _chunkTN3AYOMVjs.cn.call(void 0,
"flex items-center justify-between gap-3 rounded-md py-1.5",
"cursor-pointer transition-colors duration-150 hover:bg-background-100",
"focus:outline-none focus-visible:ring-2 focus-visible:ring-info-500"
),
onClick: onChange,
onKeyDown: (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
onChange();
}
},
children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkANT66KVKjs.Text_default, { size: "sm", className: "text-text-900", children: label }),
description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkANT66KVKjs.Text_default, { size: "2xs", className: "text-text-600", children: description })
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkK74LIVOMjs.ToggleSwitch_default,
{
checked,
onChange: () => void 0,
checkedColor: "bg-info-600",
"data-testid": switchTestId,
tabIndex: -1,
"aria-hidden": true
}
)
]
}
);
}
// src/components/AccessibilityWidget/TTSSection.tsx
var RATE_OPTIONS = [
{ value: "0.75", label: "Lento", preview: "0.75" },
{ value: "1", label: "Normal", preview: "1.0" },
{ value: "1.25", label: "R\xE1pido", preview: "1.25" },
{ value: "2", label: "Muito r\xE1pido", preview: "2.0" }
];
function TTSSection({
PreviewSegmented: PreviewSegmented2
}) {
const ttsMode = _chunkALPGURNKjs.useAccessibilityStore.call(void 0, (s) => s.ttsMode);
const ttsStatus = _chunkALPGURNKjs.useAccessibilityStore.call(void 0, (s) => s.ttsStatus);
const ttsRate = _chunkALPGURNKjs.useAccessibilityStore.call(void 0, (s) => s.ttsRate);
const ttsVoiceId = _chunkALPGURNKjs.useAccessibilityStore.call(void 0, (s) => s.ttsVoiceId);
const setTTSMode = _chunkALPGURNKjs.useAccessibilityStore.call(void 0, (s) => s.setTTSMode);
const setTTSRate = _chunkALPGURNKjs.useAccessibilityStore.call(void 0, (s) => s.setTTSRate);
const setTTSVoiceId = _chunkALPGURNKjs.useAccessibilityStore.call(void 0, (s) => s.setTTSVoiceId);
const { isSupported, voices, hasPortugueseVoice, pause, resume, stop } = _chunkQ3SVOFHAjs.useTTS.call(void 0, );
const sortedVoices = _react.useMemo.call(void 0, () => {
return [...voices].sort((a, b) => {
const aPt = a.lang.toLowerCase().startsWith("pt") ? 0 : 1;
const bPt = b.lang.toLowerCase().startsWith("pt") ? 0 : 1;
if (aPt !== bPt) return aPt - bPt;
return a.name.localeCompare(b.name);
});
}, [voices]);
if (!isSupported) {
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkANT66KVKjs.Text_default, { size: "2xs", className: "text-text-600", children: "S\xEDntese de voz n\xE3o est\xE1 dispon\xEDvel neste navegador." });
}
const isClickToReadOn = ttsMode === "click-to-read";
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-6", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-2", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "xs",
weight: "medium",
className: "uppercase leading-none text-text-600",
children: "Texto para voz"
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
AccessibilityToggleRow,
{
label: "Ative a leitura e clique no texto para ouvir",
rowTestId: "a11y-tts-mode-toggle",
checked: isClickToReadOn,
onChange: () => setTTSMode(isClickToReadOn ? "off" : "click-to-read")
}
)
] }),
!hasPortugueseVoice && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkANT66KVKjs.Text_default, { size: "2xs", className: "text-warning-700", children: "Nenhuma voz em portugu\xEAs foi encontrada no seu sistema. A leitura ser\xE1 feita com a voz padr\xE3o dispon\xEDvel." }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-2", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "xs",
weight: "medium",
className: "uppercase leading-none text-text-600",
children: "Voz"
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
_chunkHGWU3GUNjs.Select_default,
{
size: "small",
value: _nullishCoalesce(ttsVoiceId, () => ( "")),
onValueChange: (value) => setTTSVoiceId(value || null),
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkHGWU3GUNjs.SelectTrigger,
{
variant: "rounded",
"aria-label": "Voz da s\xEDntese de fala",
"data-testid": "a11y-tts-voice-select",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHGWU3GUNjs.SelectValue, { placeholder: "Padr\xE3o do navegador" })
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHGWU3GUNjs.SelectContent, { children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHGWU3GUNjs.SelectItem, { value: "", children: "Padr\xE3o do navegador" }),
sortedVoices.map((v) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHGWU3GUNjs.SelectItem, { value: v.id, children: [
v.name,
" \u2014 ",
v.lang
] }, v.id))
] })
]
}
)
] }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-2", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "xs",
weight: "medium",
className: "uppercase leading-none text-text-600",
children: "Velocidade"
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
PreviewSegmented2,
{
ariaLabel: "Velocidade da fala",
value: String(ttsRate),
options: RATE_OPTIONS.map((opt) => ({
value: opt.value,
label: opt.label,
preview: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-base font-bold leading-none", children: opt.preview })
})),
onChange: (v) => setTTSRate(Number(v))
}
)
] }),
ttsStatus !== "idle" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
ttsStatus === "speaking" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
variant: "outline",
action: "secondary",
size: "small",
iconLeft: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.PauseIcon, { size: 14, weight: "bold", "aria-hidden": "true" }),
onClick: pause,
"data-testid": "a11y-tts-pause",
children: "Pausar"
}
),
ttsStatus === "paused" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
variant: "outline",
action: "secondary",
size: "small",
iconLeft: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.PlayIcon, { size: 14, weight: "bold", "aria-hidden": "true" }),
onClick: resume,
"data-testid": "a11y-tts-resume",
children: "Retomar"
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
variant: "outline",
action: "negative",
size: "small",
iconLeft: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.StopIcon, { size: 14, weight: "bold", "aria-hidden": "true" }),
onClick: stop,
"data-testid": "a11y-tts-stop",
className: "ml-auto",
children: "Parar"
}
)
] })
] });
}
// src/components/AccessibilityWidget/AccessibilityPanel.tsx
var CONTRAST_OPTIONS = [
{ value: "normal", label: "Normal" },
{ value: "high", label: "Alto" },
{ value: "inverted", label: "Invertido" }
];
var SATURATION_OPTIONS = [
{ value: "normal", label: "Normal" },
{ value: "low", label: "Baixa" },
{ value: "grayscale", label: "Tons de cinza" }
];
var READING_AID_OPTIONS = [
{ value: "none", label: "Nenhum" },
{ value: "ruler", label: "R\xE9gua" },
{ value: "mask", label: "M\xE1scara" }
];
var LEVEL_LABELS = ["Padr\xE3o", "Pequeno", "M\xE9dio", "Grande"];
var FONT_SIZE_PREVIEW_CLASSES = [
"text-base",
// Padrão
"text-lg",
// Pequeno (= maior que Padrão, segue a escala incremental do widget)
"text-2xl",
// Médio
"text-4xl"
// Grande
];
var LETTER_SPACING_PREVIEW_CLASSES = [
"tracking-tighter",
// Padrão (junto)
"tracking-normal",
"tracking-wider",
"tracking-widest"
];
var LINE_SPACING_PREVIEW_GAPS = [
"gap-0.5",
// Padrão (2px) — linhas próximas
"gap-1.5",
// Pequeno (6px)
"gap-2.5",
// Médio (10px)
"gap-3.5"
// Grande (14px)
];
var PANEL_EDGE_CLASSES = {
right: "right-10 left-auto",
left: "left-10 right-auto"
};
var AccordionSection = ({
title,
icon,
defaultExpanded = false,
testId,
children
}) => {
const [expanded, setExpanded] = _react.useState.call(void 0, defaultExpanded);
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: "border-b border-background-200 last:border-b-0", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
variant: "raw",
"aria-expanded": expanded,
onClick: () => setExpanded((v) => !v),
"data-testid": testId,
className: _chunkTN3AYOMVjs.cn.call(void 0,
"flex w-full cursor-pointer items-center justify-between gap-2 px-4 py-3",
"text-left transition-colors hover:bg-background-50",
"focus:outline-none focus-visible:ring-2 focus-visible:ring-info-500 focus-visible:ring-inset"
),
children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-text-800", "aria-hidden": "true", children: icon }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "md",
weight: "semibold",
className: "leading-none text-text-800",
children: title
}
)
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_react3.CaretDownIcon,
{
size: 16,
weight: "bold",
"aria-hidden": "true",
className: _chunkTN3AYOMVjs.cn.call(void 0,
"text-text-700 transition-transform duration-200",
expanded ? "rotate-180" : "rotate-0"
)
}
)
]
}
),
expanded && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-col gap-6 px-4 pb-4 pt-2", children })
] });
};
var SubControl = ({ label, children }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-2", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "xs",
weight: "medium",
className: "uppercase leading-none text-text-600",
children: label
}
),
children
] });
var Segmented = ({
value,
options,
onChange,
ariaLabel
}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
role: "radiogroup",
"aria-label": ariaLabel,
className: "flex flex-wrap gap-2",
children: options.map((opt) => {
const isActive = opt.value === value;
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
variant: "raw",
role: "radio",
"aria-checked": isActive,
onClick: () => onChange(opt.value),
className: _chunkTN3AYOMVjs.cn.call(void 0,
"flex-1 cursor-pointer rounded-xl border border-border-50 bg-background",
// Texto segue spec do Figma: Roboto 14px/700/100%/0.2px, cor
// #525252 (text-700). Quando ativo, troca pra primary-950
// (azul escuro), mas mantém a mesma typography.
"px-4 py-4 text-sm font-bold leading-none tracking-[0.2px] text-text-700",
"shadow-soft-shadow-1 transition-all duration-150",
"hover:bg-background-100",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indicator-info",
isActive && "ring-2 ring-primary-950 ring-offset-0 shadow-none text-primary-950"
),
children: opt.label
},
String(opt.value)
);
})
}
);
var PreviewSegmented = ({
value,
options,
onChange,
ariaLabel
}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { role: "radiogroup", "aria-label": ariaLabel, className: "flex gap-2", children: options.map((opt) => {
const isActive = opt.value === value;
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"div",
{
className: "flex flex-1 flex-col items-center gap-2",
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
variant: "raw",
role: "radio",
"aria-checked": isActive,
"aria-label": opt.label,
onClick: () => onChange(opt.value),
className: _chunkTN3AYOMVjs.cn.call(void 0,
"flex aspect-square w-full items-center justify-center",
"cursor-pointer rounded-xl border border-border-50 bg-background",
"text-text-700 shadow-soft-shadow-1 transition-all duration-150",
"hover:bg-background-100",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indicator-info",
isActive && "ring-2 ring-primary-950 ring-offset-0 shadow-none text-primary-950"
),
children: opt.preview
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "xs",
weight: "normal",
className: "leading-none text-text-700",
children: opt.label
}
)
]
},
String(opt.value)
);
}) });
function AccessibilityPanel({
isOpen,
onClose,
position = "right",
className
}) {
const closeButtonRef = _react.useRef.call(void 0, null);
const previouslyFocusedRef = _react.useRef.call(void 0, null);
const {
contrastMode,
saturationMode,
fontSize,
letterSpacing,
lineSpacing,
highlightLinks,
pauseAnimations,
bigCursor,
dyslexiaFont,
readingAid,
keyboardShortcut,
setContrastMode,
setSaturationMode,
setFontSize,
setLetterSpacing,
setLineSpacing,
setHighlightLinks,
setPauseAnimations,
setBigCursor,
setDyslexiaFont,
setReadingAid,
setKeyboardShortcut,
resetPreferences
} = _chunkALPGURNKjs.useAccessibilityStore.call(void 0, );
_react.useEffect.call(void 0, () => {
if (!isOpen) return;
previouslyFocusedRef.current = document.activeElement;
_optionalChain([closeButtonRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.focus, 'call', _3 => _3()]);
const handleKeyDown = (event) => {
if (event.key === "Escape") {
event.stopPropagation();
onClose();
}
};
globalThis.addEventListener("keydown", handleKeyDown);
return () => {
globalThis.removeEventListener("keydown", handleKeyDown);
const previous = previouslyFocusedRef.current;
if (previous && typeof previous.focus === "function") {
previous.focus();
}
};
}, [isOpen, onClose]);
if (!isOpen) return null;
const levelOptions = LEVEL_LABELS.map((label, index) => ({
value: index,
label
}));
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"dialog",
{
open: true,
"aria-label": "Op\xE7\xF5es de acessibilidade",
"data-testid": "accessibility-panel",
style: { height: "calc(100vh - 5rem)" },
className: _chunkTN3AYOMVjs.cn.call(void 0,
"a11y-widget-shield",
"fixed bottom-0 z-40 m-0",
PANEL_EDGE_CLASSES[position],
"flex w-[calc(100vw-3rem)] max-w-110 flex-col overflow-hidden rounded-2xl p-0",
"border border-background-200 bg-background shadow-2xl",
className
),
children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "header", { className: "flex items-center justify-between gap-3 bg-primary-50 px-4 py-3", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 items-center gap-3", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"img",
{
src: accessibility_default,
alt: "",
"aria-hidden": "true",
className: "h-10 w-10 shrink-0"
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-col gap-1", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "md",
weight: "bold",
className: "leading-none tracking-[0.2px] text-text-950",
children: "Acessibilidade"
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "xs",
weight: "normal",
className: "leading-none text-text-800",
children: "Personalize a leitura e navega\xE7\xE3o"
}
)
] })
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkBVUPM6EYjs.IconButton_default,
{
ref: closeButtonRef,
size: "sm",
"aria-label": "Fechar op\xE7\xF5es de acessibilidade",
onClick: onClose,
icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.XIcon, { size: 18 })
}
)
] }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 overflow-y-auto", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
AccordionSection,
{
title: "Vis\xE3o",
icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.EyeIcon, { size: 18 }),
testId: "a11y-section-vision",
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubControl, { label: "Contraste", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
Segmented,
{
ariaLabel: "Modo de contraste",
value: contrastMode,
options: CONTRAST_OPTIONS,
onChange: setContrastMode
}
) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubControl, { label: "Satura\xE7\xE3o", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
Segmented,
{
ariaLabel: "Modo de satura\xE7\xE3o",
value: saturationMode,
options: SATURATION_OPTIONS,
onChange: setSaturationMode
}
) })
]
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
AccordionSection,
{
title: "Leitura",
icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.TextTIcon, { size: 18 }),
testId: "a11y-section-reading",
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubControl, { label: "Fonte para dislexia", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
AccessibilityToggleRow,
{
ariaLabel: "Trocar para Comic Sans MS",
rowTestId: "a11y-toggle-dyslexia-font-row",
switchTestId: "a11y-toggle-dyslexia-font",
checked: dyslexiaFont,
onChange: () => setDyslexiaFont(!dyslexiaFont),
label: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
"Trocar para",
" ",
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontFamily: '"Comic Sans MS", cursive' }, children: "Comic Sans MS" })
] })
}
) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubControl, { label: "Tamanho da fonte", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
PreviewSegmented,
{
ariaLabel: "Tamanho da fonte",
value: fontSize,
options: levelOptions.map((opt) => ({
...opt,
preview: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"span",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"font-semibold leading-none",
FONT_SIZE_PREVIEW_CLASSES[opt.value]
),
children: "Aa"
}
)
})),
onChange: setFontSize
}
) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubControl, { label: "Espa\xE7amento entre letras", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
PreviewSegmented,
{
ariaLabel: "Espa\xE7amento entre letras",
value: letterSpacing,
options: levelOptions.map((opt) => ({
...opt,
preview: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"span",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
// Mesmo tamanho do "Aa" no botão Padrão de "Tamanho
// da fonte" (text-base), pra que essa scale visualize
// só a variação de letter-spacing.
"text-base font-semibold leading-none",
LETTER_SPACING_PREVIEW_CLASSES[opt.value]
),
children: "Aa"
}
)
})),
onChange: setLetterSpacing
}
) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubControl, { label: "Espa\xE7amento entre linhas", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
PreviewSegmented,
{
ariaLabel: "Espa\xE7amento entre linhas",
value: lineSpacing,
options: levelOptions.map((opt) => ({
...opt,
preview: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"span",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"flex flex-col items-stretch",
LINE_SPACING_PREVIEW_GAPS[opt.value]
),
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "h-0.5 w-7 rounded-full bg-current" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "h-0.5 w-7 rounded-full bg-current" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "h-0.5 w-7 rounded-full bg-current" })
]
}
)
})),
onChange: setLineSpacing
}
) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubControl, { label: "Auxiliar de leitura", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
Segmented,
{
ariaLabel: "Auxiliar de leitura",
value: readingAid,
options: READING_AID_OPTIONS,
onChange: setReadingAid
}
) })
]
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
AccordionSection,
{
title: "Leitor de texto",
icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.SpeakerHighIcon, { size: 18 }),
testId: "a11y-section-tts",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TTSSection, { PreviewSegmented })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
AccordionSection,
{
title: "Anima\xE7\xE3o",
icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.FilmReelIcon, { size: 18 }),
testId: "a11y-section-animation",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
AccessibilityToggleRow,
{
label: "Pausar anima\xE7\xF5es para conforto visual",
checked: pauseAnimations,
onChange: () => setPauseAnimations(!pauseAnimations),
switchTestId: "a11y-toggle-pause-animations"
}
)
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
AccordionSection,
{
title: "Navega\xE7\xE3o",
icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.NavigationArrowIcon, { size: 18 }),
testId: "a11y-section-navigation",
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubControl, { label: "Destacar links e bot\xF5es", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
AccessibilityToggleRow,
{
label: "Adicionar contorno em elementos clic\xE1veis",
checked: highlightLinks,
onChange: () => setHighlightLinks(!highlightLinks),
switchTestId: "a11y-toggle-highlight-links"
}
) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubControl, { label: "Cursor maior", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
AccessibilityToggleRow,
{
label: "Aumentar e escurecer cursor",
checked: bigCursor,
onChange: () => setBigCursor(!bigCursor),
switchTestId: "a11y-toggle-big-cursor"
}
) })
]
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
AccordionSection,
{
title: "Atalho de teclado",
icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.KeyboardIcon, { size: 18 }),
testId: "a11y-section-shortcut",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
AccessibilityToggleRow,
{
label: "Alt+A para abrir o painel",
checked: keyboardShortcut,
onChange: () => setKeyboardShortcut(!keyboardShortcut),
switchTestId: "a11y-toggle-keyboard-shortcut"
}
)
}
)
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "footer", { className: "border-t border-background-200 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
variant: "outline",
action: "primary",
size: "medium",
iconLeft: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_react3.ArrowCounterClockwiseIcon,
{
size: 16,
weight: "bold",
"aria-hidden": "true"
}
),
onClick: resetPreferences,
"data-testid": "a11y-reset",
className: "w-full justify-center",
children: "Redefinir ajustes"
}
) })
]
}
);
}
// src/components/AccessibilityWidget/LibrasFab.tsx
function LibrasFab({
onClick,
position = "right",
verticalAlign = "below-center",
className
}) {
const label = "Tradu\xE7\xE3o em Libras";
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkOSTHYDKMjs.Tooltip,
{
content: label,
position: FAB_TOOLTIP_POSITION[position],
className: _chunkTN3AYOMVjs.cn.call(void 0,
"fixed z-40",
FAB_VERTICAL_ALIGN_CLASSES[verticalAlign],
FAB_POSITION_CLASSES[position]
),
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
variant: "raw",
onClick,
"aria-label": label,
"data-testid": "libras-fab",
className: _chunkTN3AYOMVjs.cn.call(void 0,
"a11y-widget-shield",
FAB_POSITION_CLASSES[position],
"flex h-10 w-10 cursor-pointer items-center justify-center",
// `text-text-50` flipa junto com `bg-info-900`: claro no light,
// escuro no dark. Como o ícone usa `currentColor`, com `text-white`
// a mãozinha sumiria no tema escuro (branco em fundo azul-claro).
"bg-info-900 text-text-50 shadow-lg",
"transition-all duration-200 hover:scale-110 hover:bg-info-800",
"focus:outline-none focus:ring-4 focus:ring-info-300",
className
),
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.HandWavingIcon, { size: 25, weight: "fill", "aria-hidden": "true" })
}
)
}
);
}
// src/components/AccessibilityWidget/ReadingAid.tsx
var RULER_HEIGHT_PX = 32;
var MASK_GAP_PX = 80;
function ReadingAid() {
const readingAid = _chunkALPGURNKjs.useAccessibilityStore.call(void 0, (s) => s.readingAid);
const [mouseY, setMouseY] = _react.useState.call(void 0, null);
_react.useEffect.call(void 0, () => {
if (readingAid === "none") {
setMouseY(null);
return;
}
let frame = 0;
const handleMouseMove = (event) => {
cancelAnimationFrame(frame);
frame = requestAnimationFrame(() => setMouseY(event.clientY));
};
document.addEventListener("mousemove", handleMouseMove, { passive: true });
return () => {
cancelAnimationFrame(frame);
document.removeEventListener("mousemove", handleMouseMove);
};
}, [readingAid]);
if (readingAid === "none" || mouseY === null) return null;
if (readingAid === "ruler") {
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
"aria-hidden": "true",
"data-testid": "a11y-reading-ruler",
className: "a11y-widget-shield pointer-events-none fixed left-0 right-0 z-30",
style: {
top: mouseY - RULER_HEIGHT_PX / 2,
height: RULER_HEIGHT_PX,
background: "rgba(255, 235, 59, 0.25)",
borderTop: "2px solid #facc15",
borderBottom: "2px solid #facc15"
}
}
);
}
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
"aria-hidden": "true",
"data-testid": "a11y-reading-mask-top",
className: "a11y-widget-shield pointer-events-none fixed left-0 right-0 top-0 z-30 bg-black/90",
style: { height: Math.max(0, mouseY - MASK_GAP_PX) }
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
"aria-hidden": "true",
"data-testid": "a11y-reading-mask-bottom",
className: "a11y-widget-shield pointer-events-none fixed left-0 right-0 bottom-0 z-30 bg-black/90",
style: { top: mouseY + MASK_GAP_PX }
}
)
] });
}
// src/components/AccessibilityWidget/ColorBlindFilters.tsx
function ColorBlindFilters() {
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"svg",
{
"aria-hidden": "true",
"data-testid": "a11y-colorblind-filters",
style: {
position: "absolute",
width: 0,
height: 0,
overflow: "hidden"
},
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "defs", { children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "filter", { id: _chunkALPGURNKjs.getColorBlindFilterId.call(void 0, "protanopia" /* Protanopia */), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"feColorMatrix",
{
type: "matrix",
values: "0.567 0.433 0 0 0\n 0.558 0.442 0 0 0\n 0 0.242 0.758 0 0\n 0 0 0 1 0"
}
) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "filter", { id: _chunkALPGURNKjs.getColorBlindFilterId.call(void 0, "deuteranopia" /* Deuteranopia */), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"feColorMatrix",
{
type: "matrix",
values: "0.625 0.375 0 0 0\n 0.700 0.300 0 0 0\n 0 0.300 0.7 0 0\n 0 0 0 1 0"
}
) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "filter", { id: _chunkALPGURNKjs.getColorBlindFilterId.call(void 0, "tritanopia" /* Tritanopia */), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"feColorMatrix",
{
type: "matrix",
values: "0.95 0.05 0 0 0\n 0 0.433 0.567 0 0\n 0 0.475 0.525 0 0\n 0 0 0 1 0"
}
) })
] })
}
);
}
// src/components/AccessibilityWidget/TTSController.tsx
var HIGHLIGHT_CLASS = "a11y-tts-target";
function TTSController() {
const ttsMode = _chunkALPGURNKjs.useAccessibilityStore.call(void 0, (s) => s.ttsMode);
const ttsStatus = _chunkALPGURNKjs.useAccessibilityStore.call(void 0, (s) => s.ttsStatus);
const { speak, stop, isSupported } = _chunkQ3SVOFHAjs.useTTS.call(void 0, );
_react.useEffect.call(void 0, () => {
if (!isSupported || ttsMode !== "click-to-read") return;
const handler = (event) => {
const initialTarget = event.target;
if (!initialTarget) return;
if (initialTarget.closest(".a11y-widget-shield")) return;
const found = findReadableAncestor(initialTarget);
if (!found) return;
event.preventDefault();
event.stopPropagation();
document.querySelectorAll(`.${HIGHLIGHT_CLASS}`).forEach((el) => el.classList.remove(HIGHLIGHT_CLASS));
found.node.classList.add(HIGHLIGHT_CLASS);
speak(found.text);
};
document.addEventListener("click", handler, true);
return () => {
document.removeEventListener("click", handler, true);
document.querySelectorAll(`.${HIGHLIGHT_CLASS}`).forEach((el) => el.classList.remove(HIGHLIGHT_CLASS));
stop();
};
}, [isSupported, ttsMode, speak, stop]);
_react.useEffect.call(void 0, () => {
if (ttsStatus === "idle") {
document.querySelectorAll(`.${HIGHLIGHT_CLASS}`).forEach((el) => el.classList.remove(HIGHLIGHT_CLASS));
}
}, [ttsStatus]);
_react.useEffect.call(void 0, () => () => stop(), [stop]);
return null;
}
var extractReadableText = (el) => {
const aria = _optionalChain([el, 'access', _4 => _4.getAttribute, 'call', _5 => _5("aria-label"), 'optionalAccess', _6 => _6.trim, 'call', _7 => _7()]);
if (aria) return aria;
const title = _optionalChain([el, 'access', _8 => _8.getAttribute, 'call', _9 => _9("title"), 'optionalAccess', _10 => _10.trim, 'call', _11 => _11()]);
if (title) return title;
const text = _nullishCoalesce(_optionalChain([el, 'access', _12 => _12.innerText, 'optionalAccess', _13 => _13.trim, 'call', _14 => _14()]), () => ( ""));
return text.length > 600 ? `${text.slice(0, 600)}...` : text;
};
var MAX_ANCESTOR_LOOKUP = 8;
var findReadableAncestor = (start) => {
let node = start;
let depth = 0;
while (node && depth < MAX_ANCESTOR_LOOKUP && node !== document.body) {
const text = extractReadableText(node);
if (text) return { node, text };
node = node.parentElement;
depth++;
}
return null;
};
// src/components/AccessibilityWidget/VLibrasLoader.tsx
var SCRIPT_ID = "a11y-vlibras-script";
var SCRIPT_URL = "https://vlibras.gov.br/app/vlibras-plugin.js";
var APP_URL = "https://vlibras.gov.br/app";
var WRAPPER_ID = "a11y-vlibras-wrapper";
function VLibrasLoader() {
const enabled = _chunkALPGURNKjs.useAccessibilityStore.call(void 0, (s) => s.librasEnabled);
_react.useEffect.call(void 0, () => {
if (typeof document === "undefined") return;
if (!enabled) {
hideWrapper();
return;
}
injectWrapper();
loadScript().then(() => {
const VLibras = globalThis.VLibras;
if (!_optionalChain([VLibras, 'optionalAccess', _15 => _15.Widget])) return;
const previousOnload = globalThis.onload;
new VLibras.Widget(APP_URL);
const installed = globalThis.onload;
if (typeof installed === "function" && installed !== previousOnload) {
installed.call(
globalThis,
new Event("load")
);
}
requestAnimationFrame(() => {
const accessButton = document.querySelector("[vw-access-button]");
_optionalChain([accessButton, 'optionalAccess', _16 => _16.click, 'call', _17 => _17()]);
});
}).catch(() => {
_chunkALPGURNKjs.useAccessibilityStore.getState().setLibrasEnabled(false);
});
return () => {
};
}, [enabled]);
return null;
}
var injectWrapper = () => {
const existing = document.getElementById(WRAPPER_ID);
if (existing) {
existing.style.removeProperty("display");
return;
}
const wrapper = document.createElement("div");
wrapper.id = WRAPPER_ID;
wrapper.setAttribute("vw", "");
wrapper.className = "enabled";
const accessButton = document.createElement("div");
accessButton.setAttribute("vw-access-button", "");
accessButton.className = "active";
wrapper.appendChild(accessButton);
const pluginWrapper = document.createElement("div");
pluginWrapper.setAttribute("vw-plugin-wrapper", "");
const top = document.createElement("div");
top.className = "vw-plugin-top-wrapper";
pluginWrapper.appendChild(top);
wrapper.appendChild(pluginWrapper);
document.body.appendChild(wrapper);
};
var hideWrapper = () => {
const wrapper = document.getElementById(WRAPPER_ID);
if (wrapper) {
wrapper.style.display = "none";
}
};
var loadScript = () => {
return new Promise((resolve, reject) => {
if (document.getElementById(SCRIPT_ID)) {
resolve();
return;
}
const script = document.createElement("script");
script.id = SCRIPT_ID;
script.src = SCRIPT_URL;
script.async = true;
script.onload = () => resolve();
script.onerror = () => reject(new Error("Falha ao carregar o script do VLibras"));
document.head.appendChild(script);
});
};
// src/components/AccessibilityWidget/AccessibilityWidget.tsx
function AccessibilityWidget({
position = "right",
fabClassName,
panelClassName,
showLibras = true
}) {
_chunkNWESVOUHjs.useA11yPreferences.call(void 0, );
_chunkZ2LTOXF3js.useA11yKeyboardShortcut.call(void 0, );
const isPanelOpen = _chunkALPGURNKjs.useAccessibilityStore.call(void 0, (s) => s.isPanelOpen);
const togglePanel = _chunkALPGURNKjs.useAccessibilityStore.call(void 0, (s) => s.togglePanel);
const closePanel = _chunkALPGURNKjs.useAccessibilityStore.call(void 0, (s) => s.closePanel);
const librasEnabled = _chunkALPGURNKjs.useAccessibilityStore.call(void 0, (s) => s.librasEnabled);
const setLibrasEnabled = _chunkALPGURNKjs.useAccessibilityStore.call(void 0, (s) => s.setLibrasEnabled);
const accessibilityVerticalAlign = showLibras ? "above-center" : "center";
const handleLibrasClick = () => {
if (!librasEnabled) {
setLibrasEnabled(true);
return;
}
_optionalChain([document, 'access', _18 => _18.querySelector, 'call', _19 => _19("[vw-access-button]"), 'optionalAccess', _20 => _20.click, 'call', _21 => _21()]);
};
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
!isPanelOpen && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
AccessibilityFab,
{
onClick: togglePanel,
isOpen: isPanelOpen,
position,
verticalAlign: accessibilityVerticalAlign,
className: fabClassName
}
),
!isPanelOpen && showLibras && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LibrasFab, { onClick: handleLibrasClick, position }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
AccessibilityPanel,
{
isOpen: isPanelOpen,
onClose: closePanel,
position,
className: panelClassName
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, ReadingAid, {}),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, ColorBlindFilters, {}),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, TTSController, {}),
showLibras && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, VLibrasLoader, {})
] });
}
exports.AccessibilityFab = AccessibilityFab; exports.AccessibilityPanel = AccessibilityPanel; exports.LibrasFab = LibrasFab; exports.ReadingAid = ReadingAid; exports.ColorBlindFilters = ColorBlindFilters; exports.TTSController = TTSController; exports.VLibrasLoader = VLibrasLoader; exports.AccessibilityWidget = AccessibilityWidget;
//# sourceMappingURL=chunk-4WNTVWQC.js.map