{"version":3,"sources":["../src/color-selector-swatches.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, Token } from \"@yamada-ui/core\"\nimport type { ReactNode } from \"react\"\nimport type { ColorSwatchProps } from \"./color-swatch\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx, replaceObject } from \"@yamada-ui/utils\"\nimport { ColorSwatch } from \"./color-swatch\"\nimport { useColorSelectorContext } from \"./use-color-selector\"\n\ninterface ColorSelectorSwatchesOptions {\n  /**\n   * An array of colors in one of the supported formats.\n   * Used to render swatches list below the color selector.\n   */\n  swatches?: string[]\n  /**\n   * Number of swatches grid columns.\n   *\n   * @default 7\n   */\n  swatchesColumns?: Token<number>\n  /**\n   * The swatches label to use.\n   */\n  swatchesLabel?: ReactNode\n  /**\n   * Props for the swatches container element.\n   */\n  swatchesContainerProps?: Omit<HTMLUIProps, \"children\">\n  /**\n   * Props for the color swatch component.\n   */\n  swatchProps?: ColorSwatchProps\n}\n\nexport interface ColorSelectorSwatchesProps\n  extends Omit<HTMLUIProps, \"children\">,\n    ColorSelectorSwatchesOptions {}\n\nexport const ColorSelectorSwatches = forwardRef<\n  ColorSelectorSwatchesProps,\n  \"div\"\n>(\n  (\n    {\n      className,\n      swatches,\n      swatchesColumns,\n      swatchesLabel,\n      swatchesContainerProps,\n      swatchProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { readOnly, styles, getSwatchProps } = useColorSelectorContext()\n\n    const css: CSSUIObject = {\n      display: \"grid\",\n      gridTemplateColumns: replaceObject(swatchesColumns, (value) =>\n        value != null ? `repeat(${value}, minmax(0, 1fr))` : undefined,\n      ),\n      ...styles.swatches,\n    }\n\n    return swatches?.length ? (\n      <ui.div {...swatchesContainerProps}>\n        {swatchesLabel ? (\n          <ui.p\n            className=\"ui-color-selector__swatches__label\"\n            __css={{ ...styles.swatchesLabel }}\n          >\n            {swatchesLabel}\n          </ui.p>\n        ) : null}\n\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-color-selector__swatches\", className)}\n          __css={css}\n          {...rest}\n        >\n          {swatches.map((color) => (\n            <ColorSwatch\n              key={color}\n              as=\"button\"\n              __css={{\n                boxSize: \"100%\",\n                pointerEvents: readOnly ? \"none\" : undefined,\n                ...styles.swatch,\n              }}\n              {...getSwatchProps({ color, ...swatchProps })}\n            />\n          ))}\n        </ui.div>\n      </ui.div>\n    ) : null\n  },\n)\n\nColorSelectorSwatches.displayName = \"ColorSelectorSwatches\"\nColorSelectorSwatches.__ui__ = \"ColorSelectorSwatches\"\n"],"mappings":";;;;;;;;;AAGA,SAAS,YAAY,UAAU;AAC/B,SAAS,IAAI,qBAAqB;AA6D5B,SAEI,KAFJ;AA3BC,IAAM,wBAAwB;AAAA,EAInC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,UAAU,QAAQ,eAAe,IAAI,wBAAwB;AAErE,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,qBAAqB;AAAA,QAAc;AAAA,QAAiB,CAAC,UACnD,SAAS,OAAO,UAAU,KAAK,sBAAsB;AAAA,MACvD;AAAA,MACA,GAAG,OAAO;AAAA,IACZ;AAEA,YAAO,qCAAU,UACf,qBAAC,GAAG,KAAH,EAAQ,GAAG,wBACT;AAAA,sBACC;AAAA,QAAC,GAAG;AAAA,QAAH;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,GAAG,OAAO,cAAc;AAAA,UAEhC;AAAA;AAAA,MACH,IACE;AAAA,MAEJ;AAAA,QAAC,GAAG;AAAA,QAAH;AAAA,UACC;AAAA,UACA,WAAW,GAAG,+BAA+B,SAAS;AAAA,UACtD,OAAO;AAAA,UACN,GAAG;AAAA,UAEH,mBAAS,IAAI,CAAC,UACb;AAAA,YAAC;AAAA;AAAA,cAEC,IAAG;AAAA,cACH,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,eAAe,WAAW,SAAS;AAAA,gBACnC,GAAG,OAAO;AAAA,cACZ;AAAA,cACC,GAAG,eAAe,EAAE,OAAO,GAAG,YAAY,CAAC;AAAA;AAAA,YAPvC;AAAA,UAQP,CACD;AAAA;AAAA,MACH;AAAA,OACF,IACE;AAAA,EACN;AACF;AAEA,sBAAsB,cAAc;AACpC,sBAAsB,SAAS;","names":[]}