{"version":3,"file":"color-picker-input.cjs","sources":["../../../components/color-picker/color-picker-input.tsx"],"sourcesContent":["'use client';\n\nimport { ComponentProps, useMemo } from 'react';\nimport { CopyButton } from '../copy-button';\nimport { Input } from '../input';\nimport { useColorPicker } from './color-picker-root';\nimport { getColorString } from './utils';\n\nexport interface ColorPickerInputProps extends ComponentProps<typeof Input> {\n  /**\n   * Render a copy-to-clipboard button inside the input's trailing slot.\n   * The button copies the current formatted color string in the active mode.\n   * @default false\n   */\n  copyable?: boolean;\n}\n\nexport const ColorPickerInput = ({\n  copyable = false,\n  trailingIcon,\n  ...props\n}: ColorPickerInputProps) => {\n  const { lightness, chroma, hue, alpha, mode } = useColorPicker();\n  const value = useMemo(\n    () =>\n      getColorString(\n        { l: lightness, c: chroma, h: hue, alpha: alpha ?? 1 },\n        mode\n      ),\n    [lightness, chroma, hue, alpha, mode]\n  );\n\n  // A consumer-supplied trailingIcon always wins; copyable only fills the slot\n  // when no trailingIcon was provided. size=2 matches the Input's trailing-icon\n  // wrapper width (--rs-space-5).\n  const resolvedTrailingIcon =\n    trailingIcon ??\n    (copyable ? <CopyButton text={value} size={2} /> : undefined);\n\n  return (\n    <Input\n      value={value}\n      readOnly\n      trailingIcon={resolvedTrailingIcon}\n      data-slot='color-picker-input'\n      {...props}\n    />\n  );\n};\n\nColorPickerInput.displayName = 'ColorPicker.Input';\n"],"names":[],"mappings":";;;;;;;;;;AAiBa;AAKX;;;;;;;AAiBA;AASF;AAEA;;"}