@aspprev/versi-ds 0.2.0 → 0.4.0

package/dist/{chunk-JSPXVXUY.js → chunk-WOD44OEH.js}

@@ -143,9 +143,6 @@ var Modal = ({
 var Modal_default = Modal;
 
 // src/components/InputSwitch/InputSwitch.tsx
-import {
-  Switch as HeadlessSwitch
-} from "@headlessui/react";
 import { useState } from "react";
 
 // src/components/InputSwitch/InputSwitch.style.ts
@@ -256,10 +253,16 @@ var InputSwitch_style_default = getInputSwitchStyles;
 
 // src/components/InputSwitch/InputSwitch.tsx
 import { MdCheck, MdOutlineClose as MdOutlineClose2, MdSunny, MdNightsStay } from "react-icons/md";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var InputSwitch = (_a) => {
   var _b = _a, {
     defaultEnable: enabledByDefault,
+    id,
+    name,
+    value,
+    form,
+    autoFocus,
+    tabIndex,
     variant = "primary",
     size = "md",
     disabled,
@@ -268,6 +271,12 @@ var InputSwitch = (_a) => {
     icon: Icon
   } = _b, rest = __objRest(_b, [
     "defaultEnable",
+    "id",
+    "name",
+    "value",
+    "form",
+    "autoFocus",
+    "tabIndex",
     "variant",
     "size",
     "disabled",
@@ -290,59 +299,177 @@ var InputSwitch = (_a) => {
     }
     onChange == null ? void 0 : onChange(newState);
   };
-  return /* @__PURE__ */ jsxs2(
-    HeadlessSwitch,
-    __spreadProps(__spreadValues({
-      checked: resolvedEnabled,
-      onChange: toggle,
-      disabled: disabled != null ? disabled : false,
-      className: style.Container
-    }, rest), {
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    name && /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "checkbox",
+        name,
+        value: value != null ? value : "on",
+        form,
+        checked: resolvedEnabled,
+        readOnly: true,
+        tabIndex: -1,
+        "aria-hidden": "true",
+        className: "sr-only"
+      }
+    ),
+    /* @__PURE__ */ jsxs2(
+      "button",
+      __spreadProps(__spreadValues({}, rest), {
+        id,
+        type: "button",
+        role: "switch",
+        "aria-checked": resolvedEnabled,
+        disabled: disabled != null ? disabled : false,
+        autoFocus,
+        tabIndex,
+        onClick: toggle,
+        className: style.Container,
+        children: [
+          variant !== "contract" && variant !== "theme" && /* @__PURE__ */ jsx2("span", { className: style.Switch, children: Icon && /* @__PURE__ */ jsx2(Icon, { "aria-hidden": "true", className: style.Icon }) }),
+          variant === "contract" && /* @__PURE__ */ jsxs2("span", { className: style.Switch, children: [
+            resolvedEnabled && /* @__PURE__ */ jsx2(MdCheck, { className: style.Icon, "aria-disabled": disabled }),
+            resolvedEnabled || /* @__PURE__ */ jsx2(MdOutlineClose2, { className: style.Icon, "aria-disabled": disabled })
+          ] }),
+          variant === "theme" && /* @__PURE__ */ jsxs2("span", { className: style.SwitchTheme, children: [
+            resolvedEnabled && /* @__PURE__ */ jsx2(
+              MdNightsStay,
+              {
+                className: style.IconTheme,
+                "aria-disabled": disabled
+              }
+            ),
+            resolvedEnabled || /* @__PURE__ */ jsx2(MdSunny, { className: style.IconTheme, "aria-disabled": disabled })
+          ] })
+        ]
+      })
+    )
+  ] });
+};
+var InputSwitch_default = InputSwitch;
+
+// src/components/accessibility-preferences/ContrastPreference.tsx
+import { MdContrast } from "react-icons/md";
+
+// src/components/accessibility-preferences/PreferenceSection.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function PreferenceSection({
+  title,
+  description,
+  icon: Icon,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "fieldset",
+    {
+      className: `rounded-md border border-border-default bg-surface-subtle p-4 tablet:p-5 ${className != null ? className : ""}`.trim(),
       children: [
-        variant !== "contract" && variant !== "theme" && /* @__PURE__ */ jsx2("span", { className: style.Switch, children: Icon && /* @__PURE__ */ jsx2(Icon, { "aria-hidden": "true", className: style.Icon }) }),
-        variant === "contract" && /* @__PURE__ */ jsxs2("span", { className: style.Switch, children: [
-          resolvedEnabled && /* @__PURE__ */ jsx2(MdCheck, { className: style.Icon, "aria-disabled": disabled }),
-          resolvedEnabled || /* @__PURE__ */ jsx2(MdOutlineClose2, { className: style.Icon, "aria-disabled": disabled })
+        /* @__PURE__ */ jsx3("legend", { className: "sr-only", children: title }),
+        /* @__PURE__ */ jsxs3("div", { className: "mb-4 flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx3("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary-5 text-primary-1", children: /* @__PURE__ */ jsx3(Icon, { "aria-hidden": "true", className: "h-5 w-5" }) }),
+          /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsx3("h3", { className: "font-bold", children: title }),
+            /* @__PURE__ */ jsx3("p", { className: "text-sm text-content-secondary", children: description })
+          ] })
         ] }),
-        variant === "theme" && /* @__PURE__ */ jsxs2("span", { className: style.SwitchTheme, children: [
-          resolvedEnabled && /* @__PURE__ */ jsx2(
-            MdNightsStay,
-            {
-              className: style.IconTheme,
-              "aria-disabled": disabled
-            }
-          ),
-          resolvedEnabled || /* @__PURE__ */ jsx2(MdSunny, { className: style.IconTheme, "aria-disabled": disabled })
-        ] })
+        children
       ]
-    })
+    }
   );
-};
-var InputSwitch_default = InputSwitch;
+}
 
-// src/components/accessibility-preferences/AccessibilityPreferencesPanel.tsx
-import { useId, useState as useState2 } from "react";
+// src/components/accessibility-preferences/ContrastPreference.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ContrastPreference({
+  checked,
+  onChange,
+  className
+}) {
+  return /* @__PURE__ */ jsx4(
+    PreferenceSection,
+    {
+      title: "Contraste",
+      description: "Aumente a diferencia\xE7\xE3o entre conte\xFAdo e superf\xEDcie.",
+      icon: MdContrast,
+      className,
+      children: /* @__PURE__ */ jsxs4("div", { className: "flex min-h-16 items-center justify-between gap-4 rounded-sm border border-border-default bg-surface-card px-3 py-3", children: [
+        /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1.5 font-semibold", children: [
+          /* @__PURE__ */ jsx4(MdContrast, { "aria-hidden": "true", className: "h-4 w-4" }),
+          "Alto contraste"
+        ] }),
+        /* @__PURE__ */ jsx4(
+          InputSwitch_default,
+          {
+            "aria-label": "Alternar alto contraste",
+            checked,
+            size: "lg",
+            onChange
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/accessibility-preferences/FontSizePreference.tsx
+import { useId } from "react";
+import { MdTextFields } from "react-icons/md";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var FONT_SCALE_OPTIONS = [
+  { value: "standard", label: "Padr\xE3o" },
+  { value: "large", label: "Grande" },
+  { value: "extra-large", label: "Muito grande" }
+];
+function FontSizePreference({
+  value,
+  onChange,
+  className
+}) {
+  const groupId = useId();
+  return /* @__PURE__ */ jsx5(
+    PreferenceSection,
+    {
+      title: "Tamanho do texto",
+      description: "Amplie os textos para facilitar a leitura.",
+      icon: MdTextFields,
+      className,
+      children: /* @__PURE__ */ jsx5("div", { className: "grid gap-2", children: FONT_SCALE_OPTIONS.map((option) => /* @__PURE__ */ jsxs5(
+        "label",
+        {
+          className: "flex min-h-11 cursor-pointer items-center gap-3 rounded-sm border border-border-default bg-surface-card p-3 text-content-primary transition-colors hover:border-border-strong hover:bg-surface-muted",
+          children: [
+            /* @__PURE__ */ jsx5(
+              "input",
+              {
+                type: "radio",
+                name: `${groupId}-font-scale`,
+                value: option.value,
+                checked: value === option.value,
+                onChange: () => onChange(option.value),
+                className: "radio-control shrink-0"
+              }
+            ),
+            /* @__PURE__ */ jsx5("span", { className: "flex w-9 shrink-0 justify-center font-extrabold text-primary-1", children: "Aa" }),
+            /* @__PURE__ */ jsx5("span", { className: "font-semibold", children: option.label })
+          ]
+        },
+        option.value
+      )) })
+    }
+  );
+}
+
+// src/components/accessibility-preferences/ReadingPreferences.tsx
 import {
   MdAccessibilityNew,
   MdAnimation,
   MdCenterFocusStrong,
-  MdContrast,
-  MdLink,
-  MdPalette,
-  MdRestartAlt,
-  MdTextFields
+  MdLink
 } from "react-icons/md";
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var DEFAULT_ACCESSIBILITY_PREFERENCES = {
-  colorScheme: "light",
-  highContrast: false,
-  highContrastTheme: "light",
-  fontScale: "standard",
-  reduceMotion: false,
-  emphasizeFocus: false,
-  underlineLinks: false
-};
-var readingOptions = [
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var READING_OPTIONS = [
   {
     key: "reduceMotion",
     label: "Reduzir anima\xE7\xF5es",
@@ -362,8 +489,107 @@ var readingOptions = [
     Icon: MdLink
   }
 ];
-var sectionClass = "rounded-md border border-border-default bg-surface-subtle p-4 tablet:p-5";
-var choiceClass = "flex min-h-11 cursor-pointer gap-3 rounded-sm border border-border-default bg-surface-card p-3 text-content-primary transition-colors hover:border-border-strong hover:bg-surface-muted";
+function ReadingPreferences({
+  reduceMotion,
+  emphasizeFocus,
+  underlineLinks,
+  onChange,
+  className
+}) {
+  const values = { reduceMotion, emphasizeFocus, underlineLinks };
+  return /* @__PURE__ */ jsx6(
+    PreferenceSection,
+    {
+      title: "Leitura e navega\xE7\xE3o",
+      description: "Ajustes para reduzir distra\xE7\xF5es e facilitar a orienta\xE7\xE3o.",
+      icon: MdAccessibilityNew,
+      className: `desktop:col-span-2 ${className != null ? className : ""}`.trim(),
+      children: /* @__PURE__ */ jsx6("div", { className: "grid gap-3 tablet:grid-cols-3", children: READING_OPTIONS.map(({ key, label, description, Icon }) => /* @__PURE__ */ jsxs6(
+        "label",
+        {
+          className: "flex min-h-11 cursor-pointer items-start gap-3 rounded-sm border border-border-default bg-surface-card p-3 text-content-primary transition-colors hover:border-border-strong hover:bg-surface-muted",
+          children: [
+            /* @__PURE__ */ jsx6(
+              "input",
+              {
+                type: "checkbox",
+                "aria-label": label,
+                checked: values[key],
+                onChange: (event) => onChange({ [key]: event.target.checked }),
+                className: "checkbox-control mt-1"
+              }
+            ),
+            /* @__PURE__ */ jsxs6("span", { children: [
+              /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2 font-semibold", children: [
+                /* @__PURE__ */ jsx6(Icon, { "aria-hidden": "true", className: "h-5 w-5 shrink-0 text-primary-1" }),
+                label
+              ] }),
+              /* @__PURE__ */ jsx6("span", { className: "mt-1 block text-sm text-content-secondary", children: description })
+            ] })
+          ]
+        },
+        key
+      )) })
+    }
+  );
+}
+
+// src/components/accessibility-preferences/ThemePreference.tsx
+import { MdPalette } from "react-icons/md";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function ThemePreference({
+  value,
+  onChange,
+  className
+}) {
+  const isDark = value === "dark";
+  const isSystem = value === "system";
+  return /* @__PURE__ */ jsx7(
+    PreferenceSection,
+    {
+      title: "Apar\xEAncia",
+      description: "Tema e esquema de cores da interface.",
+      icon: MdPalette,
+      className,
+      children: /* @__PURE__ */ jsxs7("div", { className: "divide-y divide-border-subtle rounded-sm border border-border-default bg-surface-card px-3", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex min-h-16 items-center justify-between gap-4 py-3", children: [
+          /* @__PURE__ */ jsxs7("span", { className: "font-semibold", children: [
+            "Tema ",
+            isDark ? "escuro" : "claro"
+          ] }),
+          /* @__PURE__ */ jsx7(
+            InputSwitch_default,
+            {
+              "aria-label": "Alternar tema claro ou escuro",
+              variant: "theme",
+              size: "lg",
+              checked: isDark,
+              disabled: isSystem,
+              onChange: (enabled) => onChange(enabled ? "dark" : "light")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs7("label", { className: "flex min-h-14 cursor-pointer items-start gap-3 py-3", children: [
+          /* @__PURE__ */ jsx7(
+            "input",
+            {
+              type: "checkbox",
+              className: "checkbox-control mt-0.5",
+              checked: isSystem,
+              onChange: (event) => onChange(event.target.checked ? "system" : isDark ? "dark" : "light")
+            }
+          ),
+          /* @__PURE__ */ jsx7("span", { className: "font-semibold", children: "Usar configura\xE7\xE3o do dispositivo" })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/components/accessibility-preferences/AccessibilityPreferencesPanel.tsx
+import { useState as useState2 } from "react";
+import { MdAccessibilityNew as MdAccessibilityNew2, MdRestartAlt } from "react-icons/md";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function AccessibilityPreferencesPanel({
   preferences,
   onPreferencesChange,
@@ -376,7 +602,6 @@ function AccessibilityPreferencesPanel({
 }) {
   const [internalOpen, setInternalOpen] = useState2(false);
   const [announcement, setAnnouncement] = useState2("");
-  const titleId = useId();
   const isOpen = controlledOpen != null ? controlledOpen : internalOpen;
   const setOpen = (open) => {
     if (controlledOpen === void 0) setInternalOpen(open);
@@ -386,9 +611,8 @@ function AccessibilityPreferencesPanel({
     onPreferencesChange(changes);
     setAnnouncement(message);
   };
-  const isDark = preferences.colorScheme === "dark";
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    showTrigger && /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    showTrigger && /* @__PURE__ */ jsxs8(
       "button",
       {
         type: "button",
@@ -397,12 +621,12 @@ function AccessibilityPreferencesPanel({
         onClick: () => setOpen(true),
         className: `inline-flex min-h-11 items-center justify-center gap-2 rounded-sm border-2 border-action-primary-content bg-action-primary px-3 text-sm font-bold text-action-primary-content shadow-sm hover:bg-action-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring ${className != null ? className : ""}`.trim(),
         children: [
-          /* @__PURE__ */ jsx3(MdAccessibilityNew, { "aria-hidden": "true", className: "h-5 w-5" }),
-          /* @__PURE__ */ jsx3("span", { children: triggerLabel })
+          /* @__PURE__ */ jsx8(MdAccessibilityNew2, { "aria-hidden": "true", className: "h-5 w-5" }),
+          /* @__PURE__ */ jsx8("span", { children: triggerLabel })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsxs8(
       Modal_default,
       {
         isOpen,
@@ -411,130 +635,99 @@ function AccessibilityPreferencesPanel({
         showIcon: false,
         size: "large",
         children: [
-          /* @__PURE__ */ jsx3("p", { className: "mt-2 text-center text-sm text-content-secondary", children: "As altera\xE7\xF5es s\xE3o aplicadas pelo consumidor do componente." }),
-          /* @__PURE__ */ jsxs3("div", { className: "mt-5 grid gap-4 desktop:grid-cols-2", children: [
-            /* @__PURE__ */ jsxs3("fieldset", { className: sectionClass, children: [
-              /* @__PURE__ */ jsx3("legend", { className: "sr-only", children: "Apar\xEAncia" }),
-              /* @__PURE__ */ jsxs3("div", { className: "mb-4 flex items-start gap-3", children: [
-                /* @__PURE__ */ jsx3("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary-5 text-primary-1", children: /* @__PURE__ */ jsx3(MdPalette, { "aria-hidden": "true", className: "h-5 w-5" }) }),
-                /* @__PURE__ */ jsxs3("div", { children: [
-                  /* @__PURE__ */ jsx3("h3", { className: "font-bold", children: "Apar\xEAncia" }),
-                  /* @__PURE__ */ jsx3("p", { className: "text-sm text-content-secondary", children: "Tema e contraste visual." })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs3("div", { className: "divide-y divide-border-subtle rounded-sm border border-border-default bg-surface-card px-3", children: [
-                /* @__PURE__ */ jsxs3("div", { className: "flex min-h-16 items-center justify-between gap-4 py-3", children: [
-                  /* @__PURE__ */ jsxs3("span", { className: "font-semibold", children: [
-                    "Tema ",
-                    isDark ? "escuro" : "claro"
-                  ] }),
-                  /* @__PURE__ */ jsx3(
-                    InputSwitch_default,
-                    {
-                      "aria-label": "Alternar tema claro ou escuro",
-                      variant: "theme",
-                      size: "lg",
-                      checked: isDark,
-                      disabled: preferences.colorScheme === "system",
-                      onChange: (enabled) => update(
-                        { colorScheme: enabled ? "dark" : "light", highContrastTheme: enabled ? "dark" : "light" },
-                        `Tema ${enabled ? "escuro" : "claro"} ativado.`
-                      )
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs3("label", { className: "flex min-h-14 cursor-pointer items-start gap-3 py-3", children: [
-                  /* @__PURE__ */ jsx3(
-                    "input",
-                    {
-                      type: "checkbox",
-                      className: "checkbox-control mt-0.5",
-                      checked: preferences.colorScheme === "system",
-                      onChange: (event) => update(
-                        { colorScheme: event.target.checked ? "system" : isDark ? "dark" : "light" },
-                        event.target.checked ? "Tema definido pelo dispositivo." : "Tema do dispositivo desativado."
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx3("span", { className: "font-semibold", children: "Usar configura\xE7\xE3o do dispositivo" })
-                ] }),
-                /* @__PURE__ */ jsxs3("div", { className: "flex min-h-16 items-center justify-between gap-4 py-3", children: [
-                  /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1.5 font-semibold", children: [
-                    /* @__PURE__ */ jsx3(MdContrast, { "aria-hidden": "true", className: "h-4 w-4" }),
-                    "Alto contraste"
-                  ] }),
-                  /* @__PURE__ */ jsx3(
-                    InputSwitch_default,
-                    {
-                      "aria-label": "Alternar alto contraste",
-                      checked: preferences.highContrast,
-                      size: "lg",
-                      onChange: (enabled) => update({ highContrast: enabled }, `Alto contraste ${enabled ? "ativado" : "desativado"}.`)
-                    }
-                  )
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs3("fieldset", { className: sectionClass, children: [
-              /* @__PURE__ */ jsx3("legend", { className: "sr-only", children: "Tamanho do texto" }),
-              /* @__PURE__ */ jsxs3("div", { className: "mb-4 flex items-start gap-3", children: [
-                /* @__PURE__ */ jsx3("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary-5 text-primary-1", children: /* @__PURE__ */ jsx3(MdTextFields, { "aria-hidden": "true", className: "h-5 w-5" }) }),
-                /* @__PURE__ */ jsxs3("div", { children: [
-                  /* @__PURE__ */ jsx3("h3", { className: "font-bold", children: "Tamanho do texto" }),
-                  /* @__PURE__ */ jsx3("p", { className: "text-sm text-content-secondary", children: "Amplie os textos para facilitar a leitura." })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx3("div", { className: "grid gap-2", children: ["standard", "large", "extra-large"].map((scale) => /* @__PURE__ */ jsxs3("label", { className: `${choiceClass} items-center`, children: [
-                /* @__PURE__ */ jsx3("input", { type: "radio", name: `${titleId}-font-scale`, value: scale, checked: preferences.fontScale === scale, onChange: () => update({ fontScale: scale }, `Tamanho do texto alterado.`), className: "radio-control shrink-0" }),
-                /* @__PURE__ */ jsx3("span", { className: "flex w-9 shrink-0 justify-center font-extrabold text-primary-1", children: "Aa" }),
-                /* @__PURE__ */ jsx3("span", { className: "font-semibold", children: scale === "standard" ? "Padr\xE3o" : scale === "large" ? "Grande" : "Muito grande" })
-              ] }, scale)) })
-            ] }),
-            /* @__PURE__ */ jsxs3("fieldset", { className: `${sectionClass} desktop:col-span-2`, children: [
-              /* @__PURE__ */ jsx3("legend", { className: "sr-only", children: "Leitura e navega\xE7\xE3o" }),
-              /* @__PURE__ */ jsxs3("div", { className: "mb-4 flex items-start gap-3", children: [
-                /* @__PURE__ */ jsx3("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary-5 text-primary-1", children: /* @__PURE__ */ jsx3(MdAccessibilityNew, { "aria-hidden": "true", className: "h-5 w-5" }) }),
-                /* @__PURE__ */ jsxs3("div", { children: [
-                  /* @__PURE__ */ jsx3("h3", { className: "font-bold", children: "Leitura e navega\xE7\xE3o" }),
-                  /* @__PURE__ */ jsx3("p", { className: "text-sm text-content-secondary", children: "Ajustes para reduzir distra\xE7\xF5es e facilitar a orienta\xE7\xE3o." })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx3("div", { className: "grid gap-3 tablet:grid-cols-3", children: readingOptions.map(({ key, label, description, Icon }) => /* @__PURE__ */ jsxs3("label", { className: `${choiceClass} items-start`, children: [
-                /* @__PURE__ */ jsx3("input", { type: "checkbox", checked: preferences[key], onChange: (event) => update({ [key]: event.target.checked }, `${label} ${event.target.checked ? "ativado" : "desativado"}.`), className: "checkbox-control mt-1" }),
-                /* @__PURE__ */ jsxs3("span", { children: [
-                  /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-2 font-semibold", children: [
-                    /* @__PURE__ */ jsx3(Icon, { "aria-hidden": "true", className: "h-5 w-5 shrink-0 text-primary-1" }),
-                    label
-                  ] }),
-                  /* @__PURE__ */ jsx3("span", { className: "mt-1 block text-sm text-content-secondary", children: description })
-                ] })
-              ] }, key)) })
-            ] })
+          /* @__PURE__ */ jsx8("p", { className: "mt-2 text-center text-sm text-content-secondary", children: "As altera\xE7\xF5es s\xE3o aplicadas pelo consumidor do componente." }),
+          /* @__PURE__ */ jsxs8("div", { className: "mt-5 grid gap-4 desktop:grid-cols-2", children: [
+            /* @__PURE__ */ jsx8(
+              ThemePreference,
+              {
+                value: preferences.colorScheme,
+                onChange: (colorScheme) => update(
+                  __spreadValues({
+                    colorScheme
+                  }, colorScheme === "system" ? {} : {
+                    highContrastTheme: colorScheme === "dark" ? "dark" : "light"
+                  }),
+                  `Tema ${colorScheme === "dark" ? "escuro" : colorScheme === "light" ? "claro" : "do dispositivo"} ativado.`
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              ContrastPreference,
+              {
+                checked: preferences.highContrast,
+                onChange: (highContrast) => update(
+                  { highContrast },
+                  `Alto contraste ${highContrast ? "ativado" : "desativado"}.`
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              FontSizePreference,
+              {
+                value: preferences.fontScale,
+                onChange: (fontScale) => update({ fontScale }, "Tamanho do texto alterado.")
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              ReadingPreferences,
+              {
+                reduceMotion: preferences.reduceMotion,
+                emphasizeFocus: preferences.emphasizeFocus,
+                underlineLinks: preferences.underlineLinks,
+                onChange: (changes) => {
+                  const key = Object.keys(changes)[0];
+                  const label = key === "reduceMotion" ? "Reduzir anima\xE7\xF5es" : key === "emphasizeFocus" ? "Destacar foco" : "Sublinhar links";
+                  update(
+                    changes,
+                    `${label} ${changes[key] ? "ativado" : "desativado"}.`
+                  );
+                }
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsx3("div", { className: "mt-5 flex justify-center border-t border-border-subtle pt-4 tablet:justify-start", children: /* @__PURE__ */ jsxs3("button", { type: "button", onClick: () => {
-            onReset == null ? void 0 : onReset();
-            setAnnouncement("Configura\xE7\xF5es padr\xE3o restauradas.");
-          }, className: "inline-flex min-h-11 items-center gap-2 rounded-sm border-2 border-action-primary px-4 font-bold text-content-link hover:bg-surface-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring", children: [
-            /* @__PURE__ */ jsx3(MdRestartAlt, { "aria-hidden": "true", className: "h-5 w-5" }),
-            "Restaurar configura\xE7\xF5es padr\xE3o"
-          ] }) }),
-          /* @__PURE__ */ jsx3("p", { className: "sr-only", role: "status", "aria-live": "polite", children: announcement })
+          /* @__PURE__ */ jsx8("div", { className: "mt-5 flex justify-center border-t border-border-subtle pt-4 tablet:justify-start", children: /* @__PURE__ */ jsxs8(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                onReset == null ? void 0 : onReset();
+                setAnnouncement("Configura\xE7\xF5es padr\xE3o restauradas.");
+              },
+              className: "inline-flex min-h-11 items-center gap-2 rounded-sm border-2 border-action-primary px-4 font-bold text-content-link hover:bg-surface-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
+              children: [
+                /* @__PURE__ */ jsx8(MdRestartAlt, { "aria-hidden": "true", className: "h-5 w-5" }),
+                "Restaurar configura\xE7\xF5es padr\xE3o"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx8("p", { className: "sr-only", role: "status", "aria-live": "polite", children: announcement })
         ]
       }
     )
   ] });
 }
 
+// src/components/accessibility-preferences/types.ts
+var DEFAULT_ACCESSIBILITY_PREFERENCES = {
+  colorScheme: "light",
+  highContrast: false,
+  highContrastTheme: "light",
+  fontScale: "standard",
+  reduceMotion: false,
+  emphasizeFocus: false,
+  underlineLinks: false
+};
+
 // src/components/accessibility-preferences/HighContrastToggle.tsx
 import { MdContrast as MdContrast2 } from "react-icons/md";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function HighContrastToggle({
   checked,
   onChange,
   label = "Alto contraste",
   className
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs9(
     "button",
     {
       type: "button",
@@ -542,9 +735,9 @@ function HighContrastToggle({
       onClick: () => onChange(!checked),
       className: `inline-flex min-h-11 items-center justify-center gap-2 rounded-sm border-2 border-action-primary-content bg-action-primary px-3 text-sm font-bold text-action-primary-content shadow-sm hover:bg-action-primary-hover active:bg-action-primary-active focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring ${className != null ? className : ""}`.trim(),
       children: [
-        /* @__PURE__ */ jsx4(MdContrast2, { "aria-hidden": "true", className: "h-5 w-5" }),
-        /* @__PURE__ */ jsx4("span", { children: label }),
-        /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: "rounded-sm bg-surface-card px-1.5 py-0.5 text-xs text-content-primary", children: checked ? "Ativado" : "Desativado" })
+        /* @__PURE__ */ jsx9(MdContrast2, { "aria-hidden": "true", className: "h-5 w-5" }),
+        /* @__PURE__ */ jsx9("span", { children: label }),
+        /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", className: "rounded-sm bg-surface-card px-1.5 py-0.5 text-xs text-content-primary", children: checked ? "Ativado" : "Desativado" })
       ]
     }
   );
@@ -553,8 +746,12 @@ function HighContrastToggle({
 export {
   Modal_default,
   InputSwitch_default,
-  DEFAULT_ACCESSIBILITY_PREFERENCES,
+  ContrastPreference,
+  FontSizePreference,
+  ReadingPreferences,
+  ThemePreference,
   AccessibilityPreferencesPanel,
+  DEFAULT_ACCESSIBILITY_PREFERENCES,
   HighContrastToggle
 };
-//# sourceMappingURL=chunk-JSPXVXUY.js.map
+//# sourceMappingURL=chunk-WOD44OEH.js.map