@grafana/ui/dist/cjs/components/ColorPicker/NamedColorsGroup.cjs

Grafana Components Library

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var lodash = require('lodash');
var React = require('react');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var ColorSwatch = require('./ColorSwatch.cjs');

"use strict";
const NamedColorsGroup = ({ hue, selectedColor, onColorSelect, ...otherProps }) => {
  const label = lodash.upperFirst(hue.name);
  const styles = ThemeContext.useStyles2(getStyles);
  const reversedShades = React.useMemo(() => {
    return [...hue.shades].reverse();
  }, [hue.shades]);
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.colorRow, children: [
    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.colorLabel, children: label }),
    /* @__PURE__ */ jsxRuntime.jsx("div", { ...otherProps, className: styles.swatchRow, children: reversedShades.map((shade) => /* @__PURE__ */ jsxRuntime.jsx(
      ColorSwatch.ColorSwatch,
      {
        "aria-label": shade.name,
        variant: shade.primary ? ColorSwatch.ColorSwatchVariant.Large : ColorSwatch.ColorSwatchVariant.Small,
        isSelected: shade.name === selectedColor,
        color: shade.color,
        onClick: () => onColorSelect(shade.name)
      },
      shade.name
    )) })
  ] });
};
const getStyles = (theme) => {
  return {
    colorRow: css.css({
      display: "grid",
      gridTemplateColumns: "25% 1fr",
      gridColumnGap: theme.spacing(2),
      padding: theme.spacing(0.5, 0),
      "&:hover": {
        background: theme.colors.background.secondary
      }
    }),
    colorLabel: css.css({
      paddingLeft: theme.spacing(1),
      display: "flex",
      alignItems: "center"
    }),
    swatchRow: css.css({
      display: "flex",
      gap: theme.spacing(1),
      alignItems: "center",
      justifyContent: "space-around",
      flexDirection: "row"
    })
  };
};

module.exports = NamedColorsGroup;
//# sourceMappingURL=NamedColorsGroup.cjs.map