{"version":3,"file":"color-swatch.cjs","names":["checkersProps: HTMLStyledProps","layers: HTMLStyledProps[]","createSlotComponent","colorSwatchStyle","styled"],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n  bgImage: [\n    \"linear-gradient(45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear-gradient(-45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear-gradient(45deg, transparent 75%, {checkers-fg} 75%)\",\n    \"linear-gradient(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)\",\n  ].join(\", \"),\n  bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n  bgSize: `8px 8px`,\n}\n\nconst defaultLayers = (\n  background: CSSProps[\"color\"],\n  withShadow: boolean,\n): HTMLStyledProps[] => {\n  const layers: HTMLStyledProps[] = [checkersProps, { background }]\n\n  if (withShadow) layers.push({ boxShadow: \"inner\" })\n\n  return layers\n}\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLStyledProps, \"color\">,\n    ThemeProps<ColorSwatchStyle> {\n  /**\n   * The color used for the swatch element.\n   *\n   * @default '#ffffff00'\n   */\n  color?: CSSProps[\"color\"]\n  /**\n   * The overlay used for the swatch element.\n   */\n  layers?: HTMLStyledProps[]\n  /**\n   * If `true`, the swatch element has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n}\n\nconst {\n  PropsContext: ColorSwatchPropsContext,\n  usePropsContext: useColorSwatchPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n  \"color-swatch\",\n  colorSwatchStyle,\n)\n\nexport { ColorSwatchPropsContext, useColorSwatchPropsContext }\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n  ({\n    children,\n    color = \"#ffffff00\",\n    withShadow = true,\n    layers = defaultLayers(color, withShadow),\n    ...rest\n  }) => {\n    return (\n      <styled.div\n        aria-label={isString(color) ? color : undefined}\n        aria-roledescription=\"color swatch\"\n        role=\"img\"\n        {...rest}\n      >\n        {children}\n        {layers.map((props, index) => (\n          <ColorSwatchOverlay key={index} {...props} />\n        ))}\n      </styled.div>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n  \"div\",\n  \"overlay\",\n)()\n"],"mappings":";;;;;;;;;;;;AAQA,MAAaA,gBAAiC;CAC5C,SAAS;EACP;EACA;EACA;EACA;EACD,CAAC,KAAK,KAAK;CACZ,YAAY;CACZ,QAAQ;CACT;AAED,MAAM,iBACJ,YACA,eACsB;CACtB,MAAMC,SAA4B,CAAC,eAAe,EAAE,YAAY,CAAC;AAEjE,KAAI,WAAY,QAAO,KAAK,EAAE,WAAW,SAAS,CAAC;AAEnD,QAAO;;AAwBT,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACEC,6CACF,gBACAC,4CACD;;;;;;AASD,MAAa,cAAc,cACxB,EACC,UACA,QAAQ,aACR,aAAa,MACb,SAAS,cAAc,OAAO,WAAW,CACzC,GAAG,WACC;AACJ,QACE,4CAACC,uBAAO;EACN,8DAAqB,MAAM,GAAG,QAAQ;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;aAEH,UACA,OAAO,KAAK,OAAO,UAClB,2CAAC,sBAA+B,GAAI,SAAX,MAAoB,CAC7C;GACS;GAGjB,OACD,EAAE;AAIH,MAAa,qBAAqB,YAChC,OACA,UACD,EAAE"}