{"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":[]}