@wordpress/components/build-module/alignment-matrix-control/cell.mjs

UI components for WordPress.

// packages/components/src/alignment-matrix-control/cell.tsx
import clsx from "clsx";
import { Composite } from "../composite/index.mjs";
import Tooltip from "../tooltip/index.mjs";
import { VisuallyHidden } from "../visually-hidden/index.mjs";
import { ALIGNMENT_LABEL } from "./utils.mjs";

// packages/components/src/alignment-matrix-control/style.module.scss
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='ae7603bd56']")) {
  const style = document.createElement("style");
  style.setAttribute("data-wp-hash", "ae7603bd56");
  style.appendChild(document.createTextNode("._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}"));
  document.head.appendChild(style);
}
var style_module_default = { "grid-container": "_02e2af5803bf5bda__grid-container", "grid-row": "c421f8ed08c23077__grid-row", "cell": "_3af769f755097fdb__cell", "point": "_37ef12d4fb6d6131__point" };

// packages/components/src/alignment-matrix-control/cell.tsx
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function Cell({
  id,
  value,
  ...props
}) {
  return /* @__PURE__ */ _jsx(Tooltip, {
    text: ALIGNMENT_LABEL[value],
    children: /* @__PURE__ */ _jsxs(Composite.Item, {
      id,
      render: /* @__PURE__ */ _jsx("span", {
        ...props,
        className: clsx(style_module_default.cell, props.className),
        role: "gridcell"
      }),
      children: [/* @__PURE__ */ _jsx(VisuallyHidden, {
        children: value
      }), /* @__PURE__ */ _jsx("span", {
        className: style_module_default.point,
        role: "presentation"
      })]
    })
  });
}
export {
  Cell as default
};
//# sourceMappingURL=cell.mjs.map