{"mappings":";;;;;;;;;;;;;AA+BO,MAAM,0DAA4B,CAAA,GAAA,oBAAY,EAAyC;AAsDvF,MAAM,yDAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAC5C,KAAsB,EACtB,GAAiC;IAEjC,IAAI,SACF,KAAK,cACL,UAAU,aACV,SAAS,aACT,SAAS,eACT,WAAW,eACX,WAAW,cACX,aAAa,OACd,GAAG,CAAA,GAAA,iBAAS,EAAE;IACf,IAAI,cAAC,UAAU,aAAE,SAAS,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW;IACzD,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;IAEvC,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,cAAc;YACZ,GAAG,WAAW,KAAK;YACnB,iBAAiB,MAAM,eAAe,GAAG,QAAQ;QACnD;QACA,QAAQ;YACN,OAAO,MAAM,eAAe;uBAC5B;YACA,YAAY,MAAM,UAAU;uBAC5B;4BACA;wBACA;QACF;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,QAAQ;IAAI;IAClD,OAAO,SAAS,EAAE;IAElB,qBACE,gCAAC,CAAA,GAAA,yCAAE,EAAE,GAAG;QACL,GAAG,CAAA,GAAA,iBAAS,EAAE,YAAY,YAAY,SAAS;QAC/C,GAAG,WAAW;QACf,KAAK;QACL,gBAAc,aAAa;QAC3B,iBAAe,MAAM,UAAU,IAAI;QACnC,gBAAc,aAAa;QAC3B,sBAAoB,kBAAkB;QACtC,iBAAe,cAAc;qBAC7B,gCAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrD,6BAAe,gCAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrE,YAAY,QAAQ;AAG3B","sources":["packages/react-aria-components/src/ColorThumb.tsx"],"sourcesContent":["import {ClassNameOrFunction, dom, RenderProps, useRenderProps} from './utils';\nimport {Color} from 'react-stately/Color';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {GlobalDOMAttributes, HoverEvents, RefObject} from '@react-types/shared';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport React, {\n  createContext,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  useContext\n} from 'react';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useHover} from 'react-aria/useHover';\n\ninterface ColorState {\n  getDisplayColor(): Color;\n  isDragging: boolean;\n}\n\ninterface InternalColorThumbContextValue {\n  state: ColorState;\n  thumbProps: HTMLAttributes<HTMLElement>;\n  inputXRef: RefObject<HTMLInputElement | null>;\n  inputYRef?: RefObject<HTMLInputElement | null>;\n  xInputProps: InputHTMLAttributes<HTMLInputElement>;\n  yInputProps?: InputHTMLAttributes<HTMLInputElement>;\n  isDisabled?: boolean;\n}\n\nexport const InternalColorThumbContext = createContext<InternalColorThumbContextValue | null>(null);\n\nexport interface ColorThumbRenderProps {\n  /**\n   * The selected color, excluding the alpha channel.\n   */\n  color: Color;\n  /**\n   * Whether this thumb is currently being dragged.\n   *\n   * @selector [data-dragging]\n   */\n  isDragging: boolean;\n  /**\n   * Whether the thumb is currently hovered with a mouse.\n   *\n   * @selector [data-hovered]\n   */\n  isHovered: boolean;\n  /**\n   * Whether the thumb is currently focused.\n   *\n   * @selector [data-focused]\n   */\n  isFocused: boolean;\n  /**\n   * Whether the thumb is keyboard focused.\n   *\n   * @selector [data-focus-visible]\n   */\n  isFocusVisible: boolean;\n  /**\n   * Whether the thumb is disabled.\n   *\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean;\n}\n\nexport interface ColorThumbProps\n  extends HoverEvents, RenderProps<ColorThumbRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n  /**\n   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n   * element. A function may be provided to compute the class based on component state.\n   *\n   * @default 'react-aria-ColorThumb'\n   */\n  className?: ClassNameOrFunction<ColorThumbRenderProps>;\n}\n\n/**\n * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to\n * adjust the color value.\n */\nexport const ColorThumb = forwardRef(function ColorThumb(\n  props: ColorThumbProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  let {\n    state,\n    thumbProps,\n    inputXRef,\n    inputYRef,\n    xInputProps,\n    yInputProps,\n    isDisabled = false\n  } = useContext(InternalColorThumbContext)!;\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n  let {hoverProps, isHovered} = useHover(props);\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorThumb',\n    defaultStyle: {\n      ...thumbProps.style,\n      backgroundColor: state.getDisplayColor().toString()\n    },\n    values: {\n      color: state.getDisplayColor(),\n      isHovered,\n      isDragging: state.isDragging,\n      isFocused,\n      isFocusVisible,\n      isDisabled\n    }\n  });\n\n  let DOMProps = filterDOMProps(props, {global: true});\n  delete DOMProps.id;\n\n  return (\n    <dom.div\n      {...mergeProps(thumbProps, hoverProps, DOMProps)}\n      {...renderProps}\n      ref={ref}\n      data-hovered={isHovered || undefined}\n      data-dragging={state.isDragging || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined}\n      data-disabled={isDisabled || undefined}>\n      <input ref={inputXRef} {...xInputProps} {...focusProps} />\n      {yInputProps && <input ref={inputYRef} {...yInputProps} {...focusProps} />}\n      {renderProps.children}\n    </dom.div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorThumb.mjs.map"}