Accessibility

import { useAccessibility } from "@sourceful-energy/ui"

function AccessibilitySettings() {
  const {
    fontMode, setFontMode,
    colorMode, setColorMode,
    spacingMode, setSpacingMode,
    focusMode, setFocusMode,
  } = useAccessibility()

  return (
    <div className="space-y-4">
      {/* Dyslexia-friendly font */}
      <Switch
        checked={fontMode === "dyslexic"}
        onCheckedChange={(v) => setFontMode(v ? "dyslexic" : "default")}
      />

      {/* Color blind modes */}
      <Select value={colorMode} onValueChange={setColorMode}>
        <SelectItem value="default">Default colors</SelectItem>
        <SelectItem value="deuteranopia">Red-green color blind</SelectItem>
        <SelectItem value="protanopia">Red color blind</SelectItem>
        <SelectItem value="tritanopia">Blue-yellow color blind</SelectItem>
        <SelectItem value="achromatopsia">Grayscale</SelectItem>
      </Select>

      {/* Text spacing (WCAG 1.4.12) */}
      <Switch
        checked={spacingMode === "comfortable"}
        onCheckedChange={(v) => setSpacingMode(v ? "comfortable" : "default")}
      />

      {/* Enhanced focus (WCAG 2.4.7) */}
      <Switch
        checked={focusMode === "enhanced"}
        onCheckedChange={(v) => setFocusMode(v ? "enhanced" : "default")}
      />
    </div>
  )
}

import {
  useFontMode,
  useColorMode,
  useSpacingMode,
  useFocusMode,
  useDesignSystem,
} from "@sourceful-energy/ui"

// Individual settings
const { fontMode, setFontMode } = useFontMode()
const { colorMode, setColorMode } = useColorMode()
const { spacingMode, setSpacingMode } = useSpacingMode()
const { focusMode, setFocusMode } = useFocusMode()

// Full context (theme + all accessibility)
const ctx = useDesignSystem()