analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1 lines • 4.68 kB
Source Map (JSON)
{"version":3,"sources":["../src/components/ToggleSwitch/ToggleSwitch.tsx"],"sourcesContent":["import { ButtonHTMLAttributes } from 'react';\nimport { cn } from '../../utils/utils';\nimport Button from '../Button/Button';\n\n/**\n * ToggleSwitch size variants\n */\ntype ToggleSwitchSize = 'small' | 'medium' | 'large';\n\n/**\n * Size configurations using Tailwind classes\n */\nconst SIZE_CLASSES = {\n small: {\n track: 'h-5 w-9',\n thumb: 'h-4 w-4',\n translate: 'translate-x-4',\n },\n medium: {\n track: 'h-6 w-11',\n thumb: 'h-5 w-5',\n translate: 'translate-x-5',\n },\n large: {\n track: 'h-7 w-14',\n thumb: 'h-6 w-6',\n translate: 'translate-x-7',\n },\n} as const;\n\n/**\n * ToggleSwitch component props interface\n */\nexport type ToggleSwitchProps = {\n /** Whether the toggle is checked */\n checked?: boolean;\n /** Callback when toggle state changes */\n onChange?: () => void;\n /** Size variant of the toggle switch */\n size?: ToggleSwitchSize;\n /** Whether the toggle switch is disabled */\n disabled?: boolean;\n /** Additional CSS classes for the track */\n className?: string;\n /** Additional CSS classes for the thumb */\n thumbClassName?: string;\n /** Color when checked (Tailwind class, e.g., 'bg-success-500') */\n checkedColor?: string;\n /** Color when unchecked (Tailwind class, e.g., 'bg-border-300') */\n uncheckedColor?: string;\n} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'type' | 'onChange'>;\n\n/**\n * ToggleSwitch component for Analytica Ensino platforms\n *\n * A toggle switch component with support for different sizes and colors.\n * Uses the Button component with variant=\"raw\" for clean rendering.\n *\n * @example\n * ```tsx\n * // Basic toggle switch\n * <ToggleSwitch checked={isActive} onChange={() => setIsActive(!isActive)} />\n *\n * // Different sizes\n * <ToggleSwitch size=\"small\" checked={value} onChange={toggle} />\n * <ToggleSwitch size=\"large\" checked={value} onChange={toggle} />\n *\n * // Custom colors\n * <ToggleSwitch\n * checked={isEnabled}\n * onChange={toggle}\n * checkedColor=\"bg-primary-950\"\n * uncheckedColor=\"bg-border-400\"\n * />\n * ```\n */\nconst ToggleSwitch = ({\n checked = false,\n onChange,\n size = 'small',\n disabled = false,\n className = '',\n thumbClassName = '',\n checkedColor = 'bg-success-500',\n uncheckedColor = 'bg-border-300',\n ...props\n}: ToggleSwitchProps) => {\n const sizeClasses = SIZE_CLASSES[size];\n\n const trackClasses = cn(\n 'relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent',\n 'transition-colors duration-200 ease-in-out',\n 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2',\n sizeClasses.track,\n checked ? checkedColor : uncheckedColor,\n disabled && 'cursor-not-allowed opacity-40',\n className\n );\n\n const thumbClasses = cn(\n 'pointer-events-none inline-block transform rounded-full bg-white shadow ring-0',\n 'transition duration-200 ease-in-out',\n sizeClasses.thumb,\n checked ? sizeClasses.translate : 'translate-x-0',\n thumbClassName\n );\n\n return (\n <Button\n variant=\"raw\"\n type=\"button\"\n role=\"switch\"\n aria-checked={checked}\n disabled={disabled}\n className={trackClasses}\n {...props}\n onClick={(e) => {\n props.onClick?.(e);\n if (!e.defaultPrevented) {\n onChange?.();\n }\n }}\n >\n <span className={thumbClasses} />\n </Button>\n );\n};\n\nToggleSwitch.displayName = 'ToggleSwitch';\n\nexport default ToggleSwitch;\n"],"mappings":";;;;;;;;AA2HM;AA/GN,IAAM,eAAe;AAAA,EACnB,OAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,EACb;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,EACb;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,EACb;AACF;AAgDA,IAAM,eAAe,CAAC;AAAA,EACpB,UAAU;AAAA,EACV;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,GAAG;AACL,MAAyB;AACvB,QAAM,cAAc,aAAa,IAAI;AAErC,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,UAAU,eAAe;AAAA,IACzB,YAAY;AAAA,IACZ;AAAA,EACF;AAEA,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,UAAU,YAAY,YAAY;AAAA,IAClC;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,MAAK;AAAA,MACL,gBAAc;AAAA,MACd;AAAA,MACA,WAAW;AAAA,MACV,GAAG;AAAA,MACJ,SAAS,CAAC,MAAM;AACd,cAAM,UAAU,CAAC;AACjB,YAAI,CAAC,EAAE,kBAAkB;AACvB,qBAAW;AAAA,QACb;AAAA,MACF;AAAA,MAEA,8BAAC,UAAK,WAAW,cAAc;AAAA;AAAA,EACjC;AAEJ;AAEA,aAAa,cAAc;AAE3B,IAAO,uBAAQ;","names":[]}