@kobalte/core/dist/color-swatch/index.jsx

Unstyled components and primitives for building accessible web apps and design systems with SolidJS.

import {
  COLOR_INTL_TRANSLATIONS
} from "../chunk/KNLKPWUU.jsx";
import "../chunk/LR7LBJN3.jsx";
import {
  Polymorphic
} from "../chunk/FLVHQV4A.jsx";
import "../chunk/5WXHJDCZ.jsx";

// src/color-swatch/color-swatch-root.tsx
import { mergeDefaultProps } from "@kobalte/utils";
import { combineStyle } from "@solid-primitives/props";
import {
  createUniqueId,
  splitProps
} from "solid-js";

// src/color-swatch/color-swatch.intl.ts
var COLOR_SWATCH_INTL_TRANSLATIONS = {
  roleDescription: "Color Swatch",
  transparent: "transparent"
};

// src/color-swatch/color-swatch-root.tsx
function ColorSwatchRoot(props) {
  const defaultId = `colorswatch-${createUniqueId()}`;
  const mergedProps = mergeDefaultProps(
    { id: defaultId, translations: COLOR_SWATCH_INTL_TRANSLATIONS },
    props
  );
  const [local, others] = splitProps(mergedProps, [
    "style",
    "value",
    "colorName",
    "aria-label",
    "translations"
  ]);
  const ariaLabel = () => {
    const colorName = local.colorName ?? (local.value.getChannelValue("alpha") === 0 ? local.translations.transparent : local.value.getColorName(COLOR_INTL_TRANSLATIONS));
    return [colorName, local["aria-label"]].filter(Boolean).join(", ");
  };
  return <Polymorphic
    as="div"
    role="img"
    aria-roledescription={local.translations.roleDescription}
    aria-label={ariaLabel()}
    style={combineStyle(
      {
        "background-color": local.value.toString("css"),
        "forced-color-adjust": "none"
      },
      local.style
    )}
    {...others}
  />;
}

// src/color-swatch/index.tsx
var ColorSwatch = ColorSwatchRoot;
export {
  ColorSwatch,
  ColorSwatchRoot as Root
};