@aspprev/versi-ds 0.5.6 → 0.5.7

package/dist/{chunk-ZPY72ILO.js → chunk-A2ZWDP7Y.js}

@@ -169,7 +169,7 @@ var getInputSwitchStyles = ({
   const sizeStyle = SIZE_STYLES[size];
   const containerVariant = cva(
     classNames(
-      "switch-control relative inline-flex shrink-0 items-center rounded-full transition-colors before:absolute before:left-1/2 before:top-1/2 before:h-5 before:w-full before:min-w-5 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-1 disabled:bg-switch-track-disabled",
+      "switch-control relative inline-flex shrink-0 items-center rounded-full transition-colors before:absolute before:left-1/2 before:top-1/2 before:h-5 before:w-full before:min-w-5 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:bg-switch-track-disabled",
       sizeStyle.container,
       { "pointer-events-none": disabled }
     ),
@@ -737,4 +737,4 @@ export {
   DEFAULT_ACCESSIBILITY_PREFERENCES,
   HighContrastToggle
 };
-//# sourceMappingURL=chunk-ZPY72ILO.js.map
+//# sourceMappingURL=chunk-A2ZWDP7Y.js.map

package/dist/chunk-A2ZWDP7Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Modal/Modal.tsx","../src/components/InputSwitch/InputSwitch.tsx","../src/components/InputSwitch/InputSwitch.style.ts","../src/components/accessibility-preferences/ContrastPreference.tsx","../src/components/accessibility-preferences/PreferenceSection.tsx","../src/components/accessibility-preferences/FontSizePreference.tsx","../src/components/accessibility-preferences/ReadingPreferences.tsx","../src/components/accessibility-preferences/ThemePreference.tsx","../src/components/accessibility-preferences/AccessibilityPreferencesPanel.tsx","../src/components/accessibility-preferences/types.ts","../src/components/accessibility-preferences/HighContrastToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { Fragment } from \"react\";\nimport {\n  MdCheckCircle,\n  MdCancel,\n  MdDeleteForever,\n  MdOutlineClose,\n  MdDownload,\n  MdSend,\n  MdErrorOutline,\n} from \"react-icons/md\";\nimport {\n  Transition,\n  Dialog,\n  TransitionChild,\n  DialogTitle,\n  DialogPanel,\n} from \"@headlessui/react\";\n\nexport type ModalProps = {\n  children?: React.ReactNode;\n  isOpen: boolean;\n  title?: string;\n  onClose: () => void;\n  showIcon?: boolean;\n  variant?:\n    | \"success\"\n    | \"error\"\n    | \"warning\"\n    | \"delete\"\n    | \"downloading\"\n    | \"sendMessage\";\n  size?: \"small\" | \"medium\" | \"large\" | \"viewer\" | \"full\";\n  className?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst modalMaxWidths = {\n  small: \"28rem\",\n  medium: \"42rem\",\n  large: \"56rem\",\n  viewer: \"72rem\",\n  full: \"calc(100vw - 40px)\",\n} as const;\n\nconst Modal = ({\n  children,\n  isOpen,\n  onClose,\n  className,\n  style,\n  title,\n  showIcon = true,\n  variant = \"success\",\n  size = \"small\",\n}: ModalProps) => {\n  const variantStyles = {\n    success: {\n      bgColor: \"bg-feedback-success-soft\",\n      icon: <MdCheckCircle className=\"h-6 w-6 text-feedback-success-content\" />,\n    },\n    error: {\n      bgColor: \"bg-feedback-danger-soft\",\n      icon: <MdCancel className=\"h-6 w-6 text-feedback-danger-content\" />,\n    },\n    warning: {\n      bgColor: \"bg-feedback-warning-soft\",\n      icon: (\n        <MdErrorOutline className=\"h-6 w-6 text-feedback-warning-content\" />\n      ),\n    },\n    downloading: {\n      bgColor: \"bg-feedback-info-soft\",\n      icon: <MdDownload className=\"h-6 w-6 text-feedback-info-content\" />,\n    },\n    delete: {\n      bgColor: \"bg-feedback-info-soft\",\n      icon: <MdDeleteForever className=\"h-6 w-6 text-feedback-info-content\" />,\n    },\n    sendMessage: {\n      bgColor: \"bg-feedback-info-soft\",\n      icon: <MdSend className=\"h-6 w-6 text-feedback-info-content\" />,\n    },\n  };\n\n  const { bgColor, icon } = variantStyles[variant];\n\n  return (\n    <Transition appear show={isOpen} as={Fragment}>\n      <Dialog\n        as=\"div\"\n        className=\"relative z-modal gap-0\"\n        aria-label={title ? undefined : \"Janela de diálogo\"}\n        onClose={onClose}\n      >\n        <TransitionChild\n          as={Fragment}\n          enter=\"ease-out duration-300\"\n          enterFrom=\"opacity-0\"\n          enterTo=\"opacity-100\"\n          leave=\"ease-in duration-200\"\n          leaveFrom=\"opacity-100\"\n          leaveTo=\"opacity-0\"\n        >\n          <div className=\"fixed inset-0 bg-overlay/50 backdrop-blur-[1px]\" />\n        </TransitionChild>\n        <div className=\"portal-safe-modal fixed inset-0 overflow-y-auto gap-0\">\n          <div className=\"flex min-h-full items-center justify-center p-5 gap-0\">\n            <DialogPanel\n              className={`relative flex max-h-[calc(100dvh-40px)] max-w-[calc(100vw-40px)] flex-col space-y-5 overflow-x-hidden overflow-y-auto rounded-sm bg-surface-card p-5 shadow-md transition-all ${className ?? \"\"}`}\n              style={{\n                ...style,\n                width: \"100%\",\n                maxWidth: modalMaxWidths[size],\n              }}\n            >\n              <div className=\"absolute right-5 top-5 flex items-center justify-end\">\n                <button\n                  type=\"button\"\n                  aria-label=\"Fechar janela\"\n                  onClick={onClose}\n                  className=\"inline-flex h-6 w-6 touch-manipulation items-center justify-center rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\n                >\n                  <MdOutlineClose\n                    aria-hidden=\"true\"\n                    size={20}\n                    className=\"text-content-secondary\"\n                  />\n                </button>\n              </div>\n\n              {showIcon && (\n                <div aria-hidden=\"true\" className=\"flex justify-center p-0\">\n                  <div\n                    className={`inline-flex items-center justify-center w-12 h-12 rounded-full ${bgColor}`}\n                  >\n                    {icon}\n                  </div>\n                </div>\n              )}\n\n              <div className=\"space-y-3\">\n                {title && (\n                  <DialogTitle\n                    as=\"h3\"\n                    className=\"text-xl font-extrabold text-center\"\n                  >\n                    {title}\n                  </DialogTitle>\n                )}\n                {children}\n              </div>\n            </DialogPanel>\n          </div>\n        </div>\n      </Dialog>\n    </Transition>\n  );\n};\n\nexport default Modal;\n\n","\"use client\";\n\nimport React, { useState } from \"react\";\nimport useStyle from \"./InputSwitch.style\";\nimport { MdCheck, MdOutlineClose, MdSunny, MdNightsStay } from \"react-icons/md\";\nimport type { IconType } from \"react-icons\";\n\ntype NativeSwitchProps = {\n  id?: string;\n  name?: string;\n  value?: string;\n  form?: string;\n  autoFocus?: boolean;\n  tabIndex?: number;\n} & React.AriaAttributes & (\n  | {\n      \"aria-label\": string;\n      \"aria-labelledby\"?: never;\n    }\n  | {\n      \"aria-label\"?: never;\n      \"aria-labelledby\": string;\n    }\n);\n\nexport type InputSwitchProps = {\n  defaultEnable?: boolean;\n  checked?: boolean;\n  variant?: \"primary\" | \"secondary\" | \"tertiary\" | \"contract\" | \"theme\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  disabled?: boolean;\n  onChange?: (enabled: boolean) => void;\n  icon?: IconType;\n} & NativeSwitchProps;\n\nexport type InputSwitchStyleProps = Pick<\n  InputSwitchProps,\n  \"variant\" | \"disabled\" | \"size\"\n> & {\n  enabled: boolean;\n};\n\nexport type SwitchProps = InputSwitchProps;\n\nconst InputSwitch: React.FC<InputSwitchProps> = ({\n  defaultEnable: enabledByDefault,\n  id,\n  name,\n  value,\n  form,\n  autoFocus,\n  tabIndex,\n  variant = \"primary\",\n  size = \"md\",\n  disabled,\n  onChange,\n  checked,\n  icon: Icon,\n  ...rest\n}) => {\n  const [enabled, setEnabled] = useState(enabledByDefault ?? false);\n  const resolvedEnabled = typeof checked === \"boolean\" ? checked : enabled;\n  const style = useStyle({\n    variant,\n    enabled: resolvedEnabled,\n    disabled,\n    size,\n  });\n\n  const toggle = () => {\n    const newState = !resolvedEnabled;\n    if (typeof checked !== \"boolean\") {\n      setEnabled(newState);\n    }\n    onChange?.(newState);\n  };\n  return (\n    <>\n      {name && (\n        <input\n          type=\"checkbox\"\n          name={name}\n          value={value ?? \"on\"}\n          form={form}\n          checked={resolvedEnabled}\n          readOnly\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          className=\"sr-only\"\n        />\n      )}\n      <button\n        {...rest}\n        id={id}\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={resolvedEnabled}\n        disabled={disabled ?? false}\n        autoFocus={autoFocus}\n        tabIndex={tabIndex}\n        onClick={toggle}\n        className={style.Container}\n      >\n      {variant !== \"contract\" && variant !== \"theme\" && (\n        <span className={style.Switch}>\n          {Icon && <Icon aria-hidden=\"true\" className={style.Icon} />}\n        </span>\n      )}\n      {variant === \"contract\" && (\n        <span className={style.Switch}>\n          {resolvedEnabled && (\n            <MdCheck className={style.Icon} aria-disabled={disabled} />\n          )}\n          {resolvedEnabled || (\n            <MdOutlineClose className={style.Icon} aria-disabled={disabled} />\n          )}\n        </span>\n      )}\n\n      {variant === \"theme\" && (\n        <span className={style.SwitchTheme}>\n          {resolvedEnabled && (\n            <MdNightsStay\n              className={style.IconTheme}\n              aria-disabled={disabled}\n            />\n          )}\n          {resolvedEnabled || (\n            <MdSunny className={style.IconTheme} aria-disabled={disabled} />\n          )}\n        </span>\n      )}\n      </button>\n    </>\n  );\n};\n\nexport default InputSwitch;\n\n","import { cva } from \"class-variance-authority\";\nimport classNames from \"classnames\";\nimport { InputSwitchProps, InputSwitchStyleProps } from \"./InputSwitch\";\n\nconst SIZE_STYLES: Record<\n  NonNullable<InputSwitchProps[\"size\"]>,\n  {\n    container: string;\n    knob: string;\n    icon: string;\n  }\n> = {\n  sm: {\n    container:\n      \"h-[1rem] w-[1.75rem] [--switch-padding:2px] [--switch-knob-size:0.75rem] [--switch-width:1.75rem]\",\n    knob: \"h-[var(--switch-knob-size)] w-[var(--switch-knob-size)]\",\n    icon: \"h-2 w-2\",\n  },\n  md: {\n    container:\n      \"h-[1.25rem] w-[3rem] [--switch-padding:2px] [--switch-knob-size:1rem] [--switch-width:3rem]\",\n    knob: \"h-[var(--switch-knob-size)] w-[var(--switch-knob-size)]\",\n    icon: \"h-3 w-3\",\n  },\n  lg: {\n    container:\n      \"h-[1.5rem] w-[3.5rem] [--switch-padding:2px] [--switch-knob-size:1.25rem] [--switch-width:3.5rem]\",\n    knob: \"h-[var(--switch-knob-size)] w-[var(--switch-knob-size)]\",\n    icon: \"h-4 w-4\",\n  },\n};\n\nconst getInputSwitchStyles = ({\n  variant,\n  enabled,\n  disabled,\n  size = \"md\",\n}: InputSwitchStyleProps) => {\n  const sizeStyle = SIZE_STYLES[size];\n  const containerVariant = cva(\n    classNames(\n      \"switch-control relative inline-flex shrink-0 items-center rounded-full transition-colors before:absolute before:left-1/2 before:top-1/2 before:h-5 before:w-full before:min-w-5 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:bg-switch-track-disabled\",\n      sizeStyle.container,\n      { \"pointer-events-none\": disabled },\n    ),\n    {\n      variants: {\n        variant: {\n          primary: classNames(\n            \"[--switch-state-layer:var(--switch-track-primary-on)]\",\n            { \"bg-switch-track-primary-on\": enabled },\n            { \"bg-switch-track-off\": !enabled },\n          ),\n          secondary: classNames(\n            \"[--switch-state-layer:var(--switch-track-secondary-on)]\",\n            { \"bg-switch-track-secondary-on\": enabled },\n            { \"bg-switch-track-off\": !enabled },\n          ),\n          tertiary: classNames(\n            \"[--switch-state-layer:var(--switch-track-tertiary-on)]\",\n            { \"bg-switch-track-tertiary-on\": enabled },\n            { \"bg-switch-track-off\": !enabled },\n          ),\n          contract: classNames(\n            enabled\n              ? \"bg-switch-track-contract-on [--switch-state-layer:var(--switch-track-contract-on)]\"\n              : \"bg-switch-track-contract-off [--switch-state-layer:var(--switch-track-contract-off)]\",\n          ),\n          theme: classNames(\n            enabled\n              ? \"bg-switch-track-theme-on [--switch-state-layer:var(--switch-track-theme-on)]\"\n              : \"bg-switch-track-theme-off [--switch-state-layer:var(--switch-track-theme-off)]\",\n          ),\n        },\n      },\n      defaultVariants: {\n        variant: \"primary\",\n      },\n    },\n  );\n  const containerClasses = containerVariant({ variant });\n\n  const switchClasses = classNames(\n    \"switch-knob absolute left-[var(--switch-padding)] top-1/2 flex items-center justify-center rounded-full transition-[transform,box-shadow,background-color] duration-200 ease-in-out -translate-y-1/2\",\n    sizeStyle.knob,\n    disabled ? \"bg-switch-knob-disabled\" : \"bg-switch-knob\",\n    enabled\n      ? \"translate-x-[calc(var(--switch-width)-var(--switch-knob-size)-var(--switch-padding)*2)]\"\n      : \"translate-x-0\",\n  );\n\n  const switchClassesTheme = classNames(\n    \"switch-knob absolute left-[var(--switch-padding)] top-1/2 flex items-center justify-center rounded-full transition-[transform,box-shadow,background-color] duration-200 ease-in-out -translate-y-1/2\",\n    sizeStyle.knob,\n    {\n      \"bg-switch-knob-theme-on\": enabled && !disabled,\n      \"bg-switch-knob\": !enabled && !disabled,\n      \"bg-switch-knob-disabled\": disabled,\n      \"translate-x-[calc(var(--switch-width)-var(--switch-knob-size)-var(--switch-padding)*2)]\":\n        enabled,\n      \"translate-x-0\": !enabled,\n    },\n  );\n\n  const iconClasses = classNames(\n    \"aria-disabled:text-font-disabled\",\n    sizeStyle.icon,\n    { \"text-feedback-success-content\": enabled && !disabled },\n    { \"text-feedback-danger-content\": !enabled && !disabled },\n    { \"text-content-disabled\": disabled },\n  );\n\n  const iconClassesTheme = classNames(\n    \"aria-disabled:text-font-disabled\",\n    sizeStyle.icon,\n    { \"text-content-inverse\": enabled && !disabled },\n    { \"text-feedback-warning-content\": !enabled && !disabled },\n    { \"text-content-disabled\": disabled },\n  );\n\n  return {\n    Icon: iconClasses,\n    IconTheme: iconClassesTheme,\n    Switch: switchClasses,\n    SwitchTheme: switchClassesTheme,\n    Container: containerClasses,\n  };\n};\n\nexport default getInputSwitchStyles;\n\n","import { MdContrast } from \"react-icons/md\";\nimport InputSwitch from \"../InputSwitch/InputSwitch\";\nimport PreferenceSection from \"./PreferenceSection\";\n\nexport type ContrastPreferenceProps = {\n  checked: boolean;\n  onChange: (checked: boolean) => void;\n  className?: string;\n};\n\nexport default function ContrastPreference({\n  checked,\n  onChange,\n  className,\n}: ContrastPreferenceProps) {\n  return (\n    <PreferenceSection\n      title=\"Contraste\"\n      description=\"Aumente a diferenciação entre conteúdo e superfície.\"\n      icon={MdContrast}\n      className={className}\n    >\n      <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\">\n        <span className=\"flex items-center gap-1.5 font-semibold\">\n          <MdContrast aria-hidden=\"true\" className=\"h-4 w-4\" />\n          Alto contraste\n        </span>\n        <InputSwitch\n          aria-label=\"Alternar alto contraste\"\n          checked={checked}\n          size=\"lg\"\n          onChange={onChange}\n        />\n      </div>\n    </PreferenceSection>\n  );\n}\n","import type { IconType } from \"react-icons\";\n\nexport type PreferenceSectionProps = {\n  title: string;\n  description: string;\n  icon: IconType;\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport default function PreferenceSection({\n  title,\n  description,\n  icon: Icon,\n  children,\n  className,\n}: PreferenceSectionProps) {\n  return (\n    <fieldset\n      className={`rounded-md border border-border-default bg-surface-subtle p-4 tablet:p-5 ${className ?? \"\"}`.trim()}\n    >\n      <legend className=\"sr-only\">{title}</legend>\n      <div className=\"mb-4 flex items-start gap-3\">\n        <span className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary-5 text-primary-1\">\n          <Icon aria-hidden=\"true\" className=\"h-5 w-5\" />\n        </span>\n        <div>\n          <h3 className=\"font-bold\">{title}</h3>\n          <p className=\"text-sm text-content-secondary\">{description}</p>\n        </div>\n      </div>\n      {children}\n    </fieldset>\n  );\n}\n","import { useId } from \"react\";\nimport { MdTextFields } from \"react-icons/md\";\nimport PreferenceSection from \"./PreferenceSection\";\nimport type { AccessibilityFontScale } from \"./types\";\n\nconst FONT_SCALE_OPTIONS: Array<{\n  value: AccessibilityFontScale;\n  label: string;\n}> = [\n  { value: \"standard\", label: \"Padrão\" },\n  { value: \"large\", label: \"Grande\" },\n  { value: \"extra-large\", label: \"Muito grande\" },\n];\n\nexport type FontSizePreferenceProps = {\n  value: AccessibilityFontScale;\n  onChange: (value: AccessibilityFontScale) => void;\n  className?: string;\n};\n\nexport default function FontSizePreference({\n  value,\n  onChange,\n  className,\n}: FontSizePreferenceProps) {\n  const groupId = useId();\n\n  return (\n    <PreferenceSection\n      title=\"Tamanho do texto\"\n      description=\"Amplie os textos para facilitar a leitura.\"\n      icon={MdTextFields}\n      className={className}\n    >\n      <div className=\"grid gap-2\">\n        {FONT_SCALE_OPTIONS.map((option) => (\n          <label\n            key={option.value}\n            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\"\n          >\n            <input\n              type=\"radio\"\n              name={`${groupId}-font-scale`}\n              value={option.value}\n              checked={value === option.value}\n              onChange={() => onChange(option.value)}\n              className=\"radio-control shrink-0\"\n            />\n            <span className=\"flex w-9 shrink-0 justify-center font-extrabold text-primary-1\">\n              Aa\n            </span>\n            <span className=\"font-semibold\">{option.label}</span>\n          </label>\n        ))}\n      </div>\n    </PreferenceSection>\n  );\n}\n","import {\n  MdAccessibilityNew,\n  MdAnimation,\n  MdCenterFocusStrong,\n  MdLink,\n} from \"react-icons/md\";\nimport PreferenceSection from \"./PreferenceSection\";\nimport type { AccessibilityPreferences } from \"./types\";\n\ntype ReadingPreferenceKey =\n  | \"reduceMotion\"\n  | \"emphasizeFocus\"\n  | \"underlineLinks\";\n\nconst READING_OPTIONS: Array<{\n  key: ReadingPreferenceKey;\n  label: string;\n  description: string;\n  Icon: typeof MdAnimation;\n}> = [\n  {\n    key: \"reduceMotion\",\n    label: \"Reduzir animações\",\n    description: \"Minimiza animações, transições e rolagens suaves.\",\n    Icon: MdAnimation,\n  },\n  {\n    key: \"emphasizeFocus\",\n    label: \"Destacar foco\",\n    description: \"Evidencia o elemento selecionado durante o uso do teclado.\",\n    Icon: MdCenterFocusStrong,\n  },\n  {\n    key: \"underlineLinks\",\n    label: \"Sublinhar links\",\n    description: \"Mantém links de texto sublinhados fora do foco.\",\n    Icon: MdLink,\n  },\n];\n\nexport type ReadingPreferencesProps = Pick<\n  AccessibilityPreferences,\n  ReadingPreferenceKey\n> & {\n  onChange: (\n    changes: Partial<Pick<AccessibilityPreferences, ReadingPreferenceKey>>,\n  ) => void;\n  className?: string;\n};\n\nexport default function ReadingPreferences({\n  reduceMotion,\n  emphasizeFocus,\n  underlineLinks,\n  onChange,\n  className,\n}: ReadingPreferencesProps) {\n  const values = { reduceMotion, emphasizeFocus, underlineLinks };\n\n  return (\n    <PreferenceSection\n      title=\"Leitura e navegação\"\n      description=\"Ajustes para reduzir distrações e facilitar a orientação.\"\n      icon={MdAccessibilityNew}\n      className={`desktop:col-span-2 ${className ?? \"\"}`.trim()}\n    >\n      <div className=\"grid gap-3 tablet:grid-cols-3\">\n        {READING_OPTIONS.map(({ key, label, description, Icon }) => (\n          <label\n            key={key}\n            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\"\n          >\n            <input\n              type=\"checkbox\"\n              aria-label={label}\n              checked={values[key]}\n              onChange={(event) => onChange({ [key]: event.target.checked })}\n              className=\"checkbox-control mt-1\"\n            />\n            <span>\n              <span className=\"flex items-center gap-2 font-semibold\">\n                <Icon aria-hidden=\"true\" className=\"h-5 w-5 shrink-0 text-primary-1\" />\n                {label}\n              </span>\n              <span className=\"mt-1 block text-sm text-content-secondary\">\n                {description}\n              </span>\n            </span>\n          </label>\n        ))}\n      </div>\n    </PreferenceSection>\n  );\n}\n","import { MdPalette } from \"react-icons/md\";\nimport InputSwitch from \"../InputSwitch/InputSwitch\";\nimport PreferenceSection from \"./PreferenceSection\";\nimport type { AccessibilityColorScheme } from \"./types\";\n\nexport type ThemePreferenceProps = {\n  value: AccessibilityColorScheme;\n  onChange: (value: AccessibilityColorScheme) => void;\n  className?: string;\n};\n\nexport default function ThemePreference({\n  value,\n  onChange,\n  className,\n}: ThemePreferenceProps) {\n  const isDark = value === \"dark\";\n  const isSystem = value === \"system\";\n\n  return (\n    <PreferenceSection\n      title=\"Aparência\"\n      description=\"Tema e esquema de cores da interface.\"\n      icon={MdPalette}\n      className={className}\n    >\n      <div className=\"divide-y divide-border-subtle rounded-sm border border-border-default bg-surface-card px-3\">\n        <div className=\"flex min-h-16 items-center justify-between gap-4 py-3\">\n          <span className=\"font-semibold\">Tema {isDark ? \"escuro\" : \"claro\"}</span>\n          <InputSwitch\n            aria-label=\"Alternar tema claro ou escuro\"\n            variant=\"theme\"\n            size=\"lg\"\n            checked={isDark}\n            disabled={isSystem}\n            onChange={(enabled) => onChange(enabled ? \"dark\" : \"light\")}\n          />\n        </div>\n        <label className=\"flex min-h-14 cursor-pointer items-start gap-3 py-3\">\n          <input\n            type=\"checkbox\"\n            className=\"checkbox-control mt-0.5\"\n            checked={isSystem}\n            onChange={(event) =>\n              onChange(event.target.checked ? \"system\" : isDark ? \"dark\" : \"light\")\n            }\n          />\n          <span className=\"font-semibold\">Usar configuração do dispositivo</span>\n        </label>\n      </div>\n    </PreferenceSection>\n  );\n}\n","\"use client\";\n\nimport { useState } from \"react\";\nimport { MdAccessibilityNew, MdRestartAlt } from \"react-icons/md\";\nimport Modal from \"../Modal/Modal\";\nimport ContrastPreference from \"./ContrastPreference\";\nimport FontSizePreference from \"./FontSizePreference\";\nimport ReadingPreferences from \"./ReadingPreferences\";\nimport ThemePreference from \"./ThemePreference\";\nimport type { AccessibilityPreferences } from \"./types\";\n\nexport type AccessibilityPreferencesPanelProps = {\n  preferences: AccessibilityPreferences;\n  onPreferencesChange: (\n    changes: Partial<AccessibilityPreferences>,\n  ) => void;\n  onReset?: () => void;\n  isOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  showTrigger?: boolean;\n  triggerLabel?: string;\n  className?: string;\n};\n\nexport default function AccessibilityPreferencesPanel({\n  preferences,\n  onPreferencesChange,\n  onReset,\n  isOpen: controlledOpen,\n  onOpenChange,\n  showTrigger = true,\n  triggerLabel = \"Preferências de acessibilidade\",\n  className,\n}: AccessibilityPreferencesPanelProps) {\n  const [internalOpen, setInternalOpen] = useState(false);\n  const [announcement, setAnnouncement] = useState(\"\");\n  const isOpen = controlledOpen ?? internalOpen;\n\n  const setOpen = (open: boolean) => {\n    if (controlledOpen === undefined) setInternalOpen(open);\n    onOpenChange?.(open);\n  };\n\n  const update = (\n    changes: Partial<AccessibilityPreferences>,\n    message: string,\n  ) => {\n    onPreferencesChange(changes);\n    setAnnouncement(message);\n  };\n\n  return (\n    <>\n      {showTrigger && (\n        <button\n          type=\"button\"\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          onClick={() => setOpen(true)}\n          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 ?? \"\"}`.trim()}\n        >\n          <MdAccessibilityNew aria-hidden=\"true\" className=\"h-5 w-5\" />\n          <span>{triggerLabel}</span>\n        </button>\n      )}\n\n      <Modal\n        isOpen={isOpen}\n        onClose={() => setOpen(false)}\n        title={triggerLabel}\n        showIcon={false}\n        size=\"large\"\n      >\n        <p className=\"mt-2 text-center text-sm text-content-secondary\">\n          As alterações são aplicadas pelo consumidor do componente.\n        </p>\n\n        <div className=\"mt-5 grid gap-4 desktop:grid-cols-2\">\n          <ThemePreference\n            value={preferences.colorScheme}\n            onChange={(colorScheme) =>\n              update(\n                {\n                  colorScheme,\n                  ...(colorScheme === \"system\"\n                    ? {}\n                    : {\n                        highContrastTheme:\n                          colorScheme === \"dark\" ? \"dark\" : \"light\",\n                      }),\n                },\n                `Tema ${colorScheme === \"dark\" ? \"escuro\" : colorScheme === \"light\" ? \"claro\" : \"do dispositivo\"} ativado.`,\n              )\n            }\n          />\n          <ContrastPreference\n            checked={preferences.highContrast}\n            onChange={(highContrast) =>\n              update(\n                { highContrast },\n                `Alto contraste ${highContrast ? \"ativado\" : \"desativado\"}.`,\n              )\n            }\n          />\n          <FontSizePreference\n            value={preferences.fontScale}\n            onChange={(fontScale) =>\n              update({ fontScale }, \"Tamanho do texto alterado.\")\n            }\n          />\n          <ReadingPreferences\n            reduceMotion={preferences.reduceMotion}\n            emphasizeFocus={preferences.emphasizeFocus}\n            underlineLinks={preferences.underlineLinks}\n            onChange={(changes) => {\n              const key = Object.keys(changes)[0] as\n                | \"reduceMotion\"\n                | \"emphasizeFocus\"\n                | \"underlineLinks\";\n              const label =\n                key === \"reduceMotion\"\n                  ? \"Reduzir animações\"\n                  : key === \"emphasizeFocus\"\n                    ? \"Destacar foco\"\n                    : \"Sublinhar links\";\n              update(\n                changes,\n                `${label} ${changes[key] ? \"ativado\" : \"desativado\"}.`,\n              );\n            }}\n          />\n        </div>\n        <div className=\"mt-5 flex justify-center border-t border-border-subtle pt-4 tablet:justify-start\">\n          <button\n            type=\"button\"\n            onClick={() => {\n              onReset?.();\n              setAnnouncement(\"Configurações padrão restauradas.\");\n            }}\n            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\"\n          >\n            <MdRestartAlt aria-hidden=\"true\" className=\"h-5 w-5\" />\n            Restaurar configurações padrão\n          </button>\n        </div>\n        <p className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {announcement}\n        </p>\n      </Modal>\n    </>\n  );\n}\n","export type AccessibilityColorScheme = \"system\" | \"light\" | \"dark\";\nexport type AccessibilityHighContrastTheme = \"light\" | \"dark\";\nexport type AccessibilityFontScale = \"standard\" | \"large\" | \"extra-large\";\n\nexport interface AccessibilityPreferences {\n  colorScheme: AccessibilityColorScheme;\n  highContrast: boolean;\n  highContrastTheme: AccessibilityHighContrastTheme;\n  fontScale: AccessibilityFontScale;\n  reduceMotion: boolean;\n  emphasizeFocus: boolean;\n  underlineLinks: boolean;\n}\n\nexport const DEFAULT_ACCESSIBILITY_PREFERENCES: AccessibilityPreferences = {\n  colorScheme: \"light\",\n  highContrast: false,\n  highContrastTheme: \"light\",\n  fontScale: \"standard\",\n  reduceMotion: false,\n  emphasizeFocus: false,\n  underlineLinks: false,\n};\n","\"use client\";\n\nimport { MdContrast } from \"react-icons/md\";\n\nexport interface HighContrastToggleProps {\n  checked: boolean;\n  onChange: (checked: boolean) => void;\n  label?: string;\n  className?: string;\n}\n\nexport default function HighContrastToggle({\n  checked,\n  onChange,\n  label = \"Alto contraste\",\n  className,\n}: HighContrastToggleProps) {\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={checked}\n      onClick={() => onChange(!checked)}\n      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 ?? \"\"}`.trim()}\n    >\n      <MdContrast aria-hidden=\"true\" className=\"h-5 w-5\" />\n      <span>{label}</span>\n      <span aria-hidden=\"true\" className=\"rounded-sm bg-surface-card px-1.5 py-0.5 text-xs text-content-primary\">\n        {checked ? \"Ativado\" : \"Desativado\"}\n      </span>\n    </button>\n  );\n}\n"],"mappings":"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","names":["MdOutlineClose","Fragment","jsx","jsxs","jsx","jsxs","jsx","jsxs","jsx","jsxs","jsx","jsxs","jsx","jsxs","useState","MdAccessibilityNew","Fragment","jsx","jsxs","useState","MdAccessibilityNew","MdContrast","jsx","jsxs"]}

package/dist/{chunk-2KJU6VM4.js → chunk-SMWLRZCK.js}

@@ -1361,7 +1361,7 @@ var Slider = ({
         ]
       }
     ),
-    ticks.map((tick, idx) => {
+    ticks.map((_tick, idx) => {
       return /* @__PURE__ */ jsx19(
         "div",
         {
@@ -1626,6 +1626,7 @@ function PageHeading({
 }
 
 // src/components/page-tabs/PageTabsHeader.tsx
+import { useRef as useRef3 } from "react";
 import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 function PageTabsHeader({
   title,
@@ -1635,6 +1636,9 @@ function PageTabsHeader({
   className = "",
   size = "default"
 }) {
+  const tabRefs = useRef3(/* @__PURE__ */ new Map());
+  const enabledTabs = tabs.filter((tab) => !tab.disabled);
+  const entryTab = enabledTabs.find((tab) => tab.id === activeTab)?.id ?? enabledTabs[0]?.id;
   return /* @__PURE__ */ jsxs14(
     "div",
     {
@@ -1645,20 +1649,37 @@ function PageTabsHeader({
           "nav",
           {
             "aria-label": title,
-            className: "flex w-auto flex-row flex-nowrap items-end gap-3 overflow-x-auto tablet:w-fit tablet:shrink-0 tablet:justify-end tablet:overflow-visible",
-            children: /* @__PURE__ */ jsx24("div", { role: "tablist", className: "flex flex-nowrap items-end gap-3", children: tabs.map((tab) => {
+            className: "flex w-auto flex-row flex-nowrap items-end gap-3 overflow-x-auto p-1 tablet:w-fit tablet:shrink-0 tablet:justify-end tablet:overflow-visible",
+            children: /* @__PURE__ */ jsx24("div", { role: "tablist", "aria-label": title, className: "flex flex-nowrap items-end gap-3", children: tabs.map((tab) => {
               const Icon = tab.icon;
               const isActive = activeTab === tab.id;
               return /* @__PURE__ */ jsxs14(
                 "button",
                 {
                   type: "button",
+                  ref: (element) => {
+                    if (element) tabRefs.current.set(tab.id, element);
+                    else tabRefs.current.delete(tab.id);
+                  },
                   role: "tab",
+                  tabIndex: tab.id === entryTab ? 0 : -1,
                   "aria-selected": isActive,
                   "aria-current": isActive ? "page" : void 0,
                   disabled: tab.disabled,
                   onClick: () => onTabChange(tab.id),
-                  className: `inline-flex items-center gap-1 whitespace-nowrap border-b-[3px] transition-colors duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-1 disabled:cursor-not-allowed disabled:opacity-50 tablet:px-1 ${size === "small" ? "px-0.5 py-0 text-sm" : "p-0.5 text-base"} ${isActive ? "border-primary-1 font-semibold text-primary-1" : "border-transparent text-content-secondary hover:text-content-muted"}`,
+                  onKeyDown: (event) => {
+                    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+                    event.preventDefault();
+                    const index = enabledTabs.findIndex((item) => item.id === tab.id);
+                    const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+                    const forward = event.key === (rtl ? "ArrowLeft" : "ArrowRight");
+                    const targetIndex = event.key === "Home" ? 0 : event.key === "End" ? enabledTabs.length - 1 : (index + (forward ? 1 : -1) + enabledTabs.length) % enabledTabs.length;
+                    const target = enabledTabs[targetIndex];
+                    if (!target) return;
+                    tabRefs.current.get(target.id)?.focus();
+                    onTabChange(target.id);
+                  },
+                  className: `inline-flex items-center gap-1 whitespace-nowrap border-b-[3px] transition-colors duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed disabled:opacity-50 tablet:px-1 ${size === "small" ? "px-0.5 py-0 text-sm" : "p-0.5 text-base"} ${isActive ? "border-primary-1 font-semibold text-primary-1" : "border-transparent text-content-secondary hover:text-content-muted"}`,
                   children: [
                     Icon && /* @__PURE__ */ jsx24(Icon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }),
                     /* @__PURE__ */ jsx24("span", { children: tab.label }),
@@ -2060,7 +2081,7 @@ import React4, { useEffect as useEffect8, useId as useId3, useMemo as useMemo2,
 import {
   useEffect as useEffect7,
   useId as useId2,
-  useRef as useRef4,
+  useRef as useRef5,
   useState as useState3
 } from "react";
 import {
@@ -2074,7 +2095,7 @@ import {
 
 // src/components/table/components/filter/FilterView.tsx
 import cs3 from "classnames";
-import { useEffect as useEffect6, useRef as useRef3 } from "react";
+import { useEffect as useEffect6, useRef as useRef4 } from "react";
 import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 function FilterView({
   id,
@@ -2095,7 +2116,7 @@ function FilterView({
   const handleControlChange = (control, event) => {
     onControlChange?.(control, event.target.value);
   };
-  const containerRef = useRef3(null);
+  const containerRef = useRef4(null);
   useEffect6(() => {
     if (!containerRef.current) return;
     containerRef.current.style.maxHeight = maxHeight ? `${maxHeight}px` : "";
@@ -2288,11 +2309,11 @@ function TableView({
   const [filterMaxHeight, setFilterMaxHeight] = useState3();
   const [filterCoords, setFilterCoords] = useState3(null);
   const [tableWidth, setTableWidth] = useState3();
-  const scrollContainerRef = useRef4(null);
-  const tableWrapperRef = useRef4(null);
-  const headerCellRefs = useRef4([]);
-  const filterTriggerRefs = useRef4([]);
-  const filterRef = useRef4(null);
+  const scrollContainerRef = useRef5(null);
+  const tableWrapperRef = useRef5(null);
+  const headerCellRefs = useRef5([]);
+  const filterTriggerRefs = useRef5([]);
+  const filterRef = useRef5(null);
   useEffect7(() => {
     const wrapper = tableWrapperRef.current;
     if (!wrapper) return;
@@ -3282,4 +3303,4 @@ export {
   resolveContainerBreakpoint,
   useContainerBreakpoint
 };
-//# sourceMappingURL=chunk-2KJU6VM4.js.map
+//# sourceMappingURL=chunk-SMWLRZCK.js.map