@react-spectrum/s2/dist/ColorSwatchPicker.mjs.map

Spectrum 2 UI components in React

{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA+BM,MAAM,0DAA2B,CAAA,GAAA,oBAAY,EAA8E;AAK3H,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAA2B;IAC/H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,0BACX,mBAAmB,IACnB,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,wBAAoB;QAClB,GAAG,UAAU;QACd,KAAK;QACL,WAAW,mBAAmB;;;;;;;;;;;;UAUJ;qBAAC;QAAO,GAAG,MAAM,MAAM;kBACjD,cAAA,gBAAC,CAAA,GAAA,yCAAyB,EAAE,QAAQ;YAAC,OAAO;4BAAC;sBAAY;0BAAM;YAAQ;sBACpE,MAAM,QAAQ;;;AAIvB;AAEA,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAAsC;IAC5F,qBACE,gBAAC,CAAA,GAAA,4BAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;eAUvB;gBAAC,GAAG,WAAW;0BAAE;YAAQ;kBAC3B,CAAC,cAAC,UAAU,EAAC,iBAAM;;oBACjB;oBACA,4BACC,gBAAC;wBACC,aAAW;wBACX,SAAS;;;;;AAmBrB","sources":["packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, Color, ContextValue, SlotProps} from 'react-aria-components';\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\nimport {createContext, forwardRef, ReactElement, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps, SlotProps {\n  /** The ColorSwatches within the ColorSwatchPicker. */\n  children: ReactNode,\n  /**\n   * The amount of padding between the swatches.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The size of the color swatches.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the color swatches.\n   * @default 'none'\n   */\n  rounding?: 'none' | 'default' | 'full'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);\n  let {\n    density = 'regular',\n    size = 'M',\n    rounding = 'none',\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      ref={domRef}\n      className={UNSAFE_className + style({\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: {\n          density: {\n            compact: space(2),\n            regular: 4,\n            spacious: space(6)\n          }\n        }\n      }, getAllowedOverrides())({density}, props.styles)}>\n      <InternalColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </InternalColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps => style({\n        ...focusRing(),\n        position: 'relative',\n        borderRadius: {\n          rounding: {\n            none: 'none',\n            default: 'sm',\n            full: 'full'\n          }\n        }\n      })({...renderProps, rounding})}>\n      {({isSelected}) => (<>\n        {swatch}\n        {isSelected && (\n          <div\n            aria-hidden\n            className={style({\n              position: 'absolute',\n              pointerEvents: 'none',\n              inset: 0,\n              boxSizing: 'border-box',\n              borderColor: 'gray-900',\n              borderStyle: 'solid',\n              borderWidth: 2,\n              outlineColor: 'gray-25',\n              outlineStyle: 'solid',\n              outlineWidth: 2,\n              outlineOffset: -4,\n              forcedColorAdjust: 'none',\n              borderRadius: 'inherit'\n            })} />\n        )}\n      </>)}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.mjs.map"}