@yamada-ui/react/dist/cjs/components/color-swatch/color-swatch-group.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"color-swatch-group.cjs","names":["ColorSwatch","Grid"],"sources":["../../../../src/components/color-swatch/color-swatch-group.tsx"],"sourcesContent":["import type { Component, CSSProps } from \"../../core\"\nimport type { ColorSwatchProps } from \"./color-swatch\"\nimport { Grid } from \"../grid\"\nimport { ColorSwatch } from \"./color-swatch\"\n\nexport interface ColorSwatchGroupProps extends Omit<ColorSwatchProps, \"color\"> {\n  /**\n   * The color used for the swatch element.\n   *\n   * @default '#ffffff00'\n   */\n  items?: CSSProps[\"color\"][]\n  /**\n   * The props for the `ColorSwatch` component.\n   */\n  itemProps?: ColorSwatchProps\n}\n\n/**\n * `ColorSwatchGroup` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatchGroup = (({\n  items = [],\n  layers,\n  withShadow = true,\n  itemProps,\n  ...rest\n}: ColorSwatchGroupProps) => {\n  if (items.length > 4)\n    console.warn(\"ColorSwatchMix: doesn't support more than 4 items\")\n\n  const empty = items.length === 0\n  const threeColors = items.length === 3\n\n  if (empty) {\n    return (\n      <ColorSwatch\n        aria-label=\"color swatch group\"\n        layers={layers}\n        overflow=\"hidden\"\n        withShadow={withShadow}\n        {...rest}\n      />\n    )\n  } else {\n    return (\n      <ColorSwatch\n        aria-label=\"color swatch group\"\n        layers={withShadow ? [{ boxShadow: \"inner\" }] : []}\n        {...rest}\n      >\n        <Grid templateColumns=\"repeat(2, 1fr)\">\n          {items.map((color, index) => (\n            <ColorSwatch\n              key={index}\n              boxSize=\"inherit\"\n              color={color}\n              gridColumn={threeColors && !index ? \"1 / 3\" : undefined}\n              rounded=\"0\"\n              w={threeColors && !index ? \"unset\" : undefined}\n              withShadow={false}\n              {...itemProps}\n            />\n          ))}\n        </Grid>\n      </ColorSwatch>\n    )\n  }\n}) as Component<\"div\", ColorSwatchGroupProps>\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAa,qBAAqB,EAChC,QAAQ,EAAE,EACV,QACA,aAAa,MACb,UACA,GAAG,WACwB;AAC3B,KAAI,MAAM,SAAS,EACjB,SAAQ,KAAK,oDAAoD;CAEnE,MAAM,QAAQ,MAAM,WAAW;CAC/B,MAAM,cAAc,MAAM,WAAW;AAErC,KAAI,MACF,QACE,2CAACA;EACC,cAAW;EACH;EACR,UAAS;EACG;EACZ,GAAI;GACJ;KAGJ,QACE,2CAACA;EACC,cAAW;EACX,QAAQ,aAAa,CAAC,EAAE,WAAW,SAAS,CAAC,GAAG,EAAE;EAClD,GAAI;YAEJ,2CAACC;GAAK,iBAAgB;aACnB,MAAM,KAAK,OAAO,UACjB,2CAACD;IAEC,SAAQ;IACD;IACP,YAAY,eAAe,CAAC,QAAQ,UAAU;IAC9C,SAAQ;IACR,GAAG,eAAe,CAAC,QAAQ,UAAU;IACrC,YAAY;IACZ,GAAI;MAPC,MAQL,CACF;IACG;GACK"}