analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1 lines • 6.34 kB
Source Map (JSON)
{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { forwardRef, useId, InputHTMLAttributes, ChangeEvent } from 'react';\nimport { WarningCircleIcon } from '@phosphor-icons/react/dist/csr/WarningCircle';\nimport { cn } from '../../utils/utils';\nimport Text from '../Text/Text';\n\n/**\n * ColorPicker component props interface\n */\nexport type ColorPickerProps = {\n /** Label text displayed above the color picker */\n label?: string;\n /** Helper text displayed below the color picker */\n helperText?: string;\n /** Error message displayed below the color picker */\n errorMessage?: string;\n /** Current color value in hex format (e.g., \"#FFFFFF\") */\n value?: string;\n /** Callback when color changes */\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /** Placeholder for the text input */\n placeholder?: string;\n /** Additional CSS classes for the container */\n className?: string;\n /** Whether the input is disabled */\n disabled?: boolean;\n /** Whether the input is required */\n required?: boolean;\n} & Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'value' | 'onChange' | 'size'\n>;\n\n/**\n * ColorPicker component for Analytica Ensino platforms\n *\n * A color picker component that combines a native color input with a text input\n * for manual hex value entry. Includes label, helper text, and error message support.\n *\n * @param label - Optional label text displayed above the color picker\n * @param helperText - Optional helper text displayed below the color picker\n * @param errorMessage - Optional error message displayed below the color picker\n * @param value - Current color value in hex format\n * @param onChange - Callback when color changes\n * @param placeholder - Placeholder for the text input (default: \"#FFFFFF\")\n * @param className - Additional CSS classes for the container\n * @param disabled - Whether the input is disabled\n * @param required - Whether the input is required\n *\n * @example\n * ```tsx\n * // Basic usage\n * <ColorPicker\n * label=\"Cor\"\n * value={color}\n * onChange={(e) => setColor(e.target.value)}\n * helperText=\"Selecione uma cor para representar o componente\"\n * />\n *\n * // With error state\n * <ColorPicker\n * label=\"Cor\"\n * value={color}\n * onChange={(e) => setColor(e.target.value)}\n * errorMessage=\"Cor inválida\"\n * />\n * ```\n */\nconst ColorPicker = forwardRef<HTMLInputElement, ColorPickerProps>(\n (\n {\n label,\n helperText,\n errorMessage,\n value = '#FFFFFF',\n onChange,\n placeholder = '#FFFFFF',\n className,\n disabled,\n required,\n id,\n ...props\n },\n ref\n ) => {\n const generatedId = useId();\n const inputId = id ?? `color-picker-${generatedId}`;\n\n const hasError = Boolean(errorMessage);\n\n const inputClasses = cn(\n 'bg-background w-full py-2 px-3 font-normal text-text-900 text-sm',\n 'border rounded-lg focus:outline-primary-950',\n hasError\n ? 'border-2 border-indicator-error'\n : 'border-border-300 hover:border-border-400',\n disabled && 'cursor-not-allowed opacity-40'\n );\n\n const colorInputClasses = cn(\n 'w-12 h-10 rounded cursor-pointer border',\n hasError ? 'border-indicator-error' : 'border-border-200',\n disabled && 'cursor-not-allowed opacity-40'\n );\n\n return (\n <div className={className}>\n {label && (\n <label\n htmlFor={inputId}\n className=\"block font-bold text-text-900 mb-2 text-sm\"\n >\n {label}{' '}\n {required && <span className=\"text-indicator-error\">*</span>}\n </label>\n )}\n\n <div className=\"flex items-center gap-3\">\n <input\n type=\"color\"\n value={value}\n onChange={onChange}\n disabled={disabled}\n className={colorInputClasses}\n aria-label={label ? `${label} color picker` : 'Color picker'}\n />\n <input\n ref={ref}\n id={inputId}\n type=\"text\"\n value={value}\n onChange={onChange}\n placeholder={placeholder}\n disabled={disabled}\n required={required}\n className={inputClasses}\n aria-invalid={hasError ? 'true' : undefined}\n {...props}\n />\n </div>\n\n <div className=\"mt-1\">\n {helperText && !errorMessage && (\n <Text size=\"xs\" color=\"text-text-500\">\n {helperText}\n </Text>\n )}\n {errorMessage && (\n <Text size=\"xs\" color=\"text-indicator-error\">\n <WarningCircleIcon size={14} /> {errorMessage}\n </Text>\n )}\n </div>\n </div>\n );\n }\n);\n\nColorPicker.displayName = 'ColorPicker';\n\nexport default ColorPicker;\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,aAA+C;AACpE,SAAS,yBAAyB;AA0GxB,SAKe,KALf;AAxCV,IAAM,cAAc;AAAA,EAClB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,cAAc,MAAM;AAC1B,UAAM,UAAU,MAAM,gBAAgB,WAAW;AAEjD,UAAM,WAAW,QAAQ,YAAY;AAErC,UAAM,eAAe;AAAA,MACnB;AAAA,MACA;AAAA,MACA,WACI,oCACA;AAAA,MACJ,YAAY;AAAA,IACd;AAEA,UAAM,oBAAoB;AAAA,MACxB;AAAA,MACA,WAAW,2BAA2B;AAAA,MACtC,YAAY;AAAA,IACd;AAEA,WACE,qBAAC,SAAI,WACF;AAAA,eACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,WAAU;AAAA,UAET;AAAA;AAAA,YAAO;AAAA,YACP,YAAY,oBAAC,UAAK,WAAU,wBAAuB,eAAC;AAAA;AAAA;AAAA,MACvD;AAAA,MAGF,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW;AAAA,YACX,cAAY,QAAQ,GAAG,KAAK,kBAAkB;AAAA;AAAA,QAChD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,IAAI;AAAA,YACJ,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW;AAAA,YACX,gBAAc,WAAW,SAAS;AAAA,YACjC,GAAG;AAAA;AAAA,QACN;AAAA,SACF;AAAA,MAEA,qBAAC,SAAI,WAAU,QACZ;AAAA,sBAAc,CAAC,gBACd,oBAAC,gBAAK,MAAK,MAAK,OAAM,iBACnB,sBACH;AAAA,QAED,gBACC,qBAAC,gBAAK,MAAK,MAAK,OAAM,wBACpB;AAAA,8BAAC,qBAAkB,MAAM,IAAI;AAAA,UAAE;AAAA,UAAE;AAAA,WACnC;AAAA,SAEJ;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAE1B,IAAO,sBAAQ;","names":[]}