@etus/ui 0.3.2 → 0.4.0-beta.10

package/dist/chunk-6DN2UAIR.js

@@ -0,0 +1,172 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var headerVariants = cva(
+  [
+    // Base styles
+    "flex w-full items-center",
+    // Figma height model — min 64px (logo-only), hugs to 76px with nav/actions
+    "min-h-[var(--header-height)]",
+    // Transition
+    "transition-colors"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-[color:var(--header-root-bg)] border-b border-[color:var(--header-root-border-color)]",
+        transparent: "bg-transparent",
+        floating: "bg-[color:var(--header-root-bg)]/80 backdrop-blur-sm border-b border-[color:var(--header-root-border-color)]/50 shadow-sm"
+      },
+      sticky: {
+        true: "sticky top-0 z-[var(--header-sticky-z-index)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      sticky: false
+    }
+  }
+);
+var headerContainerVariants = cva(
+  [
+    "flex w-full items-center gap-4 px-[var(--header-root-padding-x)] py-[var(--header-root-padding-y)]"
+  ],
+  {
+    variants: {
+      contained: {
+        true: "mx-auto max-w-[var(--header-contained-max-width)]",
+        false: ""
+      },
+      layout: {
+        // Brand left, Nav middle, Actions right (default)
+        default: "justify-between",
+        // Brand center; Nav and Actions on sides if provided
+        "logo-centered": "justify-center [&>[data-slot=header-brand]]:order-2 [&>[data-slot=header-nav]]:order-1 [&>[data-slot=header-actions]]:order-3 [&>[data-slot=header-nav]]:flex-1 [&>[data-slot=header-actions]]:flex-1",
+        // Nav left, Brand right (mirror of default)
+        "links-left": "justify-between [&>[data-slot=header-brand]]:order-2 [&>[data-slot=header-nav]]:order-1 [&>[data-slot=header-actions]]:order-3",
+        // Brand + Nav clustered center, Actions right
+        centered: "[&>[data-slot=header-brand]]:flex-none [&>[data-slot=header-nav]]:flex-1 [&>[data-slot=header-nav]]:justify-center [&>[data-slot=header-actions]]:flex-none [&>[data-slot=header-actions]]:ml-auto"
+      }
+    },
+    defaultVariants: {
+      contained: false,
+      layout: "default"
+    }
+  }
+);
+var headerBrandVariants = cva([
+  "flex shrink-0 items-center gap-2"
+]);
+var headerNavVariants = cva([
+  "hidden md:flex items-center gap-1 min-h-[var(--header-content-height)]"
+]);
+var headerActionsVariants = cva(
+  [
+    "flex items-center gap-2 min-h-[var(--header-content-height)]"
+  ],
+  {
+    variants: {
+      align: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end"
+      }
+    },
+    defaultVariants: {
+      align: "end"
+    }
+  }
+);
+function Header({
+  className,
+  variant = "default",
+  sticky = false,
+  contained = false,
+  layout = "default",
+  containerClassName,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: cn(headerVariants({ variant, sticky }), className),
+      "data-slot": "header",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            headerContainerVariants({ contained, layout }),
+            containerClassName
+          ),
+          "data-layout": layout,
+          "data-slot": "header-container",
+          children
+        }
+      )
+    }
+  );
+}
+function HeaderBrand({
+  className,
+  asLink = false,
+  href = "/",
+  children,
+  ...props
+}) {
+  if (asLink) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: cn(headerBrandVariants(), className),
+        "data-slot": "header-brand",
+        href,
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(headerBrandVariants(), className),
+      "data-slot": "header-brand",
+      ...props,
+      children
+    }
+  );
+}
+function HeaderNav({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: cn(headerNavVariants(), className),
+      "data-slot": "header-nav",
+      ...props,
+      children
+    }
+  );
+}
+function HeaderActions({
+  className,
+  align = "end",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(headerActionsVariants({ align }), className),
+      "data-slot": "header-actions",
+      ...props,
+      children
+    }
+  );
+}
+
+export { Header, HeaderActions, HeaderBrand, HeaderNav, headerActionsVariants, headerBrandVariants, headerContainerVariants, headerNavVariants, headerVariants };
+//# sourceMappingURL=chunk-6DN2UAIR.js.map
+//# sourceMappingURL=chunk-6DN2UAIR.js.map

package/dist/chunk-6DN2UAIR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Header/Header.variants.ts","../src/components/navigation/Header/Header.tsx"],"names":[],"mappings":"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","file":"chunk-6DN2UAIR.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * Header root variant styles\n *\n * Height follows the Figma auto-layout model (DES-1271): the root has a min\n * height of `--header-height` (64px — a logo-only header) and hugs to 76px\n * when a HeaderNav/HeaderActions row is present, because that row enforces\n * `--header-content-height` (36px) and the container adds `--header-root-padding-y`\n * (20px × 2). There is no `size` prop — the Figma component has no size axis.\n */\nexport const headerVariants = cva(\n  [\n    // Base styles\n    \"flex w-full items-center\",\n    // Figma height model — min 64px (logo-only), hugs to 76px with nav/actions\n    \"min-h-[var(--header-height)]\",\n    // Transition\n    \"transition-colors\",\n  ],\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-[color:var(--header-root-bg)] border-b border-[color:var(--header-root-border-color)]\",\n        transparent: \"bg-transparent\",\n        floating:\n          \"bg-[color:var(--header-root-bg)]/80 backdrop-blur-sm border-b border-[color:var(--header-root-border-color)]/50 shadow-sm\",\n      },\n      sticky: {\n        true: \"sticky top-0 z-[var(--header-sticky-z-index)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      sticky: false,\n    },\n  }\n)\n\n/**\n * Header container variant styles (inner wrapper)\n */\nexport const headerContainerVariants = cva(\n  [\n    \"flex w-full items-center gap-4 px-[var(--header-root-padding-x)] py-[var(--header-root-padding-y)]\",\n  ],\n  {\n    variants: {\n      contained: {\n        true: \"mx-auto max-w-[var(--header-contained-max-width)]\",\n        false: \"\",\n      },\n      layout: {\n        // Brand left, Nav middle, Actions right (default)\n        default: \"justify-between\",\n        // Brand center; Nav and Actions on sides if provided\n        \"logo-centered\":\n          \"justify-center [&>[data-slot=header-brand]]:order-2 [&>[data-slot=header-nav]]:order-1 [&>[data-slot=header-actions]]:order-3 [&>[data-slot=header-nav]]:flex-1 [&>[data-slot=header-actions]]:flex-1\",\n        // Nav left, Brand right (mirror of default)\n        \"links-left\":\n          \"justify-between [&>[data-slot=header-brand]]:order-2 [&>[data-slot=header-nav]]:order-1 [&>[data-slot=header-actions]]:order-3\",\n        // Brand + Nav clustered center, Actions right\n        centered:\n          \"[&>[data-slot=header-brand]]:flex-none [&>[data-slot=header-nav]]:flex-1 [&>[data-slot=header-nav]]:justify-center [&>[data-slot=header-actions]]:flex-none [&>[data-slot=header-actions]]:ml-auto\",\n      },\n    },\n    defaultVariants: {\n      contained: false,\n      layout: \"default\",\n    },\n  }\n)\n\n/**\n * HeaderBrand variant styles\n */\nexport const headerBrandVariants = cva([\n  \"flex shrink-0 items-center gap-2\",\n])\n\n/**\n * HeaderNav variant styles\n *\n * Enforces the Figma nav-row height (`--header-content-height` 36px) so a\n * header with navigation hugs to 76px regardless of whether the links are\n * plain text or buttons.\n */\nexport const headerNavVariants = cva([\n  \"hidden md:flex items-center gap-1 min-h-[var(--header-content-height)]\",\n])\n\n/**\n * HeaderActions variant styles\n *\n * Enforces the Figma action-row height (`--header-content-height` 36px) so a\n * header with actions (e.g. the Mobile layout: logo + icons) hugs to 76px.\n */\nexport const headerActionsVariants = cva(\n  [\n    \"flex items-center gap-2 min-h-[var(--header-content-height)]\",\n  ],\n  {\n    variants: {\n      align: {\n        start: \"justify-start\",\n        center: \"justify-center\",\n        end: \"justify-end\",\n      },\n    },\n    defaultVariants: {\n      align: \"end\",\n    },\n  }\n)\n","\"use client\"\n\nimport type {\n  HeaderActionsProps,\n  HeaderBrandProps,\n  HeaderNavProps,\n  HeaderProps,\n} from \"./Header.types\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  headerActionsVariants,\n  headerBrandVariants,\n  headerContainerVariants,\n  headerNavVariants,\n  headerVariants,\n} from \"./Header.variants\"\n\n/**\n * Header - A responsive header component for site navigation.\n *\n * Supports multiple visual variants, Figma layouts, and sticky positioning.\n * Height follows the Figma model: 64px for a logo-only header, 76px once a\n * HeaderNav/HeaderActions row is present (content-driven, no `size` prop).\n *\n * @example\n * <Header variant=\"default\" sticky>\n *   <HeaderBrand asLink href=\"/\">Logo</HeaderBrand>\n *   <HeaderNav>\n *     <a href=\"/about\">About</a>\n *     <a href=\"/contact\">Contact</a>\n *   </HeaderNav>\n *   <HeaderActions>\n *     <Button>Sign In</Button>\n *   </HeaderActions>\n * </Header>\n */\nfunction Header({\n  className,\n  variant = \"default\",\n  sticky = false,\n  contained = false,\n  layout = \"default\",\n  containerClassName,\n  children,\n  ...props\n}: HeaderProps) {\n  return (\n    <header\n      className={cn(headerVariants({ variant, sticky }), className)}\n      data-slot=\"header\"\n      {...props}\n    >\n      <div\n        className={cn(\n          headerContainerVariants({ contained, layout }),\n          containerClassName\n        )}\n        data-layout={layout}\n        data-slot=\"header-container\"\n      >\n        {children}\n      </div>\n    </header>\n  )\n}\n\n/**\n * HeaderBrand - Logo/brand area of the header.\n *\n * Can optionally render as a link when asLink is true.\n */\nfunction HeaderBrand({\n  className,\n  asLink = false,\n  href = \"/\",\n  children,\n  ...props\n}: HeaderBrandProps) {\n  if (asLink) {\n    return (\n      <a\n        className={cn(headerBrandVariants(), className)}\n        data-slot=\"header-brand\"\n        href={href}\n        {...(props as React.ComponentProps<\"a\">)}\n      >\n        {children}\n      </a>\n    )\n  }\n\n  return (\n    <div\n      className={cn(headerBrandVariants(), className)}\n      data-slot=\"header-brand\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * HeaderNav - Navigation container for header links.\n */\nfunction HeaderNav({ className, children, ...props }: HeaderNavProps) {\n  return (\n    <nav\n      className={cn(headerNavVariants(), className)}\n      data-slot=\"header-nav\"\n      {...props}\n    >\n      {children}\n    </nav>\n  )\n}\n\n/**\n * HeaderActions - Actions container for buttons/controls.\n */\nfunction HeaderActions({\n  className,\n  align = \"end\",\n  children,\n  ...props\n}: HeaderActionsProps) {\n  return (\n    <div\n      className={cn(headerActionsVariants({ align }), className)}\n      data-slot=\"header-actions\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport { Header, HeaderActions, HeaderBrand, HeaderNav }\n"]}

package/dist/chunk-6GWO7JNP.js

@@ -0,0 +1,438 @@
+import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-7ZJ32KRQ.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var CSS_VAR_MUTED = "var(--muted)";
+var CSS_VAR_PRIMARY = "var(--primary)";
+var heatmapVariants = cva("inline-flex flex-col gap-2", {
+  variants: {
+    variant: {
+      calendar: "",
+      grid: "",
+      triangular: ""
+    }
+  },
+  defaultVariants: {
+    variant: "grid"
+  }
+});
+function interpolateColor(color1, color2, ratio) {
+  if (color1.startsWith("var(") || color2.startsWith("var(")) {
+    return `color-mix(in srgb, ${color2} ${String(Math.round(ratio * 100))}%, ${color1})`;
+  }
+  if (color1.startsWith("hsl") || color2.startsWith("hsl")) {
+    const opacity = Math.max(0.1, Math.min(1, ratio));
+    return color2.replace(")", ` / ${String(opacity)})`);
+  }
+  const hexToRgb = (hex) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!result?.[1] || !result[2] || !result[3]) return null;
+    return [
+      Number.parseInt(result[1], 16),
+      Number.parseInt(result[2], 16),
+      Number.parseInt(result[3], 16)
+    ];
+  };
+  const rgb1 = hexToRgb(color1);
+  const rgb2 = hexToRgb(color2);
+  if (!rgb1 || !rgb2) {
+    return `color-mix(in srgb, ${color2} ${String(Math.round(ratio * 100))}%, ${color1})`;
+  }
+  const r = Math.round(rgb1[0] + (rgb2[0] - rgb1[0]) * ratio);
+  const g = Math.round(rgb1[1] + (rgb2[1] - rgb1[1]) * ratio);
+  const b = Math.round(rgb1[2] + (rgb2[2] - rgb1[2]) * ratio);
+  return `rgb(${String(r)}, ${String(g)}, ${String(b)})`;
+}
+function getColorForValue(value, min, max, colorScale, minColor, maxColor, midColor) {
+  if (max === min) return maxColor;
+  if (colorScale === "diverging") {
+    const mid = (max + min) / 2;
+    const midColorActual = midColor ?? CSS_VAR_MUTED;
+    if (value < mid) {
+      const ratio2 = (value - min) / (mid - min);
+      return interpolateColor(minColor, midColorActual, ratio2);
+    } else {
+      const ratio2 = (value - mid) / (max - mid);
+      return interpolateColor(midColorActual, maxColor, ratio2);
+    }
+  }
+  const ratio = (value - min) / (max - min);
+  return interpolateColor(minColor, maxColor, ratio);
+}
+function HeatmapCell({
+  color,
+  data,
+  isHighlighted,
+  isSelected,
+  onClick,
+  renderTooltip,
+  showTooltip,
+  size
+}) {
+  const cellContent = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-sm cursor-pointer transition-all",
+        "hover:ring-2 hover:ring-ring hover:ring-offset-1",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        isSelected && "ring-2 ring-primary ring-offset-2",
+        isHighlighted && "ring-1 ring-muted-foreground/50"
+      ),
+      style: {
+        backgroundColor: color,
+        height: size,
+        width: size
+      },
+      "aria-label": `${data.label ?? `${String(data.x)}, ${String(data.y)}`}: ${String(data.value)}`,
+      "data-highlighted": isHighlighted ? true : void 0,
+      "data-selected": isSelected ? true : void 0,
+      "data-slot": "heatmap-cell",
+      "data-value": data.value,
+      role: "gridcell",
+      tabIndex: 0,
+      onClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.(e);
+        }
+      }
+    }
+  );
+  if (!showTooltip) {
+    return cellContent;
+  }
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: cellContent }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: renderTooltip ? renderTooltip(data) : /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      data.label && /* @__PURE__ */ jsx("p", { className: "font-medium", children: data.label }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Value: " }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: data.value })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+        String(data.x),
+        ", ",
+        String(data.y)
+      ] })
+    ] }) })
+  ] });
+}
+function HeatmapLegend({
+  colorScale,
+  max,
+  maxColor,
+  midColor,
+  min,
+  minColor,
+  position
+}) {
+  const isHorizontal = position === "top" || position === "bottom";
+  const gradientStyle = colorScale === "diverging" ? {
+    background: `linear-gradient(${isHorizontal ? "to right" : "to top"}, ${minColor}, ${midColor ?? CSS_VAR_MUTED}, ${maxColor})`
+  } : {
+    background: `linear-gradient(${isHorizontal ? "to right" : "to top"}, ${minColor}, ${maxColor})`
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 text-xs text-muted-foreground",
+        isHorizontal ? "flex-row" : "flex-col"
+      ),
+      "data-slot": "heatmap-legend",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: min }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "rounded",
+              isHorizontal ? "w-24 h-3" : "w-3 h-24"
+            ),
+            style: gradientStyle
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: max })
+      ]
+    }
+  );
+}
+function Heatmap({
+  ariaLabel,
+  cellGap = 2,
+  cellSize = 20,
+  className,
+  colorScale = "sequential",
+  data,
+  highlightedRow,
+  legendPosition = "bottom",
+  maxColor = CSS_VAR_PRIMARY,
+  midColor,
+  minColor = CSS_VAR_MUTED,
+  onCellClick,
+  onRowHover,
+  renderTooltip,
+  selectedCell,
+  showLegend = true,
+  showTooltip = true,
+  valueKey,
+  variant = "grid",
+  xKey,
+  xLabels,
+  yKey,
+  yLabels,
+  ...props
+}) {
+  const derivedXLabels = React.useMemo(() => {
+    if (xLabels) return xLabels;
+    const uniqueX = [...new Set(data.map((d) => String(d[xKey])))];
+    return uniqueX;
+  }, [data, xKey, xLabels]);
+  const derivedYLabels = React.useMemo(() => {
+    if (yLabels) return yLabels;
+    const uniqueY = [...new Set(data.map((d) => String(d[yKey])))];
+    return uniqueY;
+  }, [data, yKey, yLabels]);
+  const { maxValue, minValue } = React.useMemo(() => {
+    const values = data.map((d) => d[valueKey]);
+    return {
+      maxValue: Math.max(...values),
+      minValue: Math.min(...values)
+    };
+  }, [data, valueKey]);
+  const dataMap = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    data.forEach((d) => {
+      const key = `${String(d[xKey])}-${String(d[yKey])}`;
+      map.set(key, d);
+    });
+    return map;
+  }, [data, xKey, yKey]);
+  const handleCellClick = React.useCallback(
+    (cellData) => (event) => {
+      if (!onCellClick) return;
+      const payload = {
+        label: cellData.label,
+        timestamp: Date.now(),
+        value: cellData.value,
+        x: cellData.x,
+        y: cellData.y
+      };
+      onCellClick(event, payload);
+    },
+    [onCellClick]
+  );
+  const shouldRenderCell = React.useCallback(
+    (xIndex, yIndex) => {
+      if (variant === "triangular") {
+        return yIndex >= xIndex;
+      }
+      return true;
+    },
+    [variant]
+  );
+  const getCellData = React.useCallback(
+    (xLabel, yLabel) => {
+      const key = `${xLabel}-${yLabel}`;
+      const found = dataMap.get(key);
+      if (found) return found;
+      const matchingData = data.find(
+        (d) => String(d[xKey]) === xLabel && String(d[yKey]) === yLabel
+      );
+      return matchingData ?? null;
+    },
+    [data, dataMap, xKey, yKey]
+  );
+  const renderLegend = showLegend && /* @__PURE__ */ jsx(
+    HeatmapLegend,
+    {
+      colorScale,
+      max: maxValue,
+      maxColor,
+      midColor,
+      min: minValue,
+      minColor,
+      position: legendPosition
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": ariaLabel ?? "Heatmap visualization",
+      className: cn(heatmapVariants({ variant }), className),
+      "data-slot": "heatmap",
+      role: "region",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("table", { className: "sr-only", children: [
+          /* @__PURE__ */ jsx("caption", { children: ariaLabel ?? "Heatmap data" }),
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Row / Column" }),
+            derivedXLabels.map((label) => /* @__PURE__ */ jsx("th", { scope: "col", children: label }, label))
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: derivedYLabels.map((yLabel, yIndex) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "row", children: yLabel }),
+            derivedXLabels.map((xLabel, xIndex) => {
+              if (!shouldRenderCell(xIndex, yIndex)) {
+                return /* @__PURE__ */ jsx("td", { children: "-" }, xLabel);
+              }
+              const cellData = getCellData(xLabel, yLabel);
+              return /* @__PURE__ */ jsx("td", { children: cellData?.value ?? "-" }, xLabel);
+            })
+          ] }, yLabel)) })
+        ] }),
+        showLegend && (legendPosition === "top" || legendPosition === "left") && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              legendPosition === "left" && "self-center"
+            ),
+            children: renderLegend
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex",
+              legendPosition === "left" || legendPosition === "right" ? "flex-row gap-4" : "flex-col"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex gap-0.5", "data-slot": "heatmap-container", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", style: { gap: cellGap }, children: derivedYLabels.map((yLabel) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex items-center justify-end pr-2 text-xs text-muted-foreground",
+                  style: { height: cellSize },
+                  children: yLabel
+                },
+                yLabel
+              )) }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: "flex flex-col",
+                  "data-slot": "heatmap-grid",
+                  role: "grid",
+                  style: { gap: cellGap },
+                  children: [
+                    derivedYLabels.map((yLabel, yIndex) => /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "flex",
+                        "data-slot": "heatmap-row",
+                        role: "row",
+                        style: { gap: cellGap },
+                        onMouseEnter: () => onRowHover?.(yLabel),
+                        onMouseLeave: () => onRowHover?.(null),
+                        children: derivedXLabels.map((xLabel, xIndex) => {
+                          if (!shouldRenderCell(xIndex, yIndex)) {
+                            return /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: { height: cellSize, width: cellSize }
+                              },
+                              xLabel
+                            );
+                          }
+                          const cellData = getCellData(xLabel, yLabel);
+                          if (!cellData) {
+                            return /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: "rounded-sm bg-muted",
+                                "data-empty": "true",
+                                "data-slot": "heatmap-cell",
+                                role: "gridcell",
+                                style: { height: cellSize, width: cellSize }
+                              },
+                              xLabel
+                            );
+                          }
+                          const color = getColorForValue(
+                            cellData.value,
+                            minValue,
+                            maxValue,
+                            colorScale,
+                            minColor,
+                            maxColor,
+                            midColor
+                          );
+                          const isSelected = selectedCell?.x === cellData.x && selectedCell.y === cellData.y;
+                          const isHighlighted = highlightedRow === yLabel;
+                          return /* @__PURE__ */ jsx(
+                            HeatmapCell,
+                            {
+                              data: {
+                                label: cellData.label,
+                                value: cellData.value,
+                                x: cellData.x,
+                                y: cellData.y
+                              },
+                              color,
+                              isHighlighted,
+                              isSelected,
+                              renderTooltip,
+                              showTooltip,
+                              size: cellSize,
+                              onClick: handleCellClick(cellData)
+                            },
+                            xLabel
+                          );
+                        })
+                      },
+                      yLabel
+                    )),
+                    variant !== "calendar" && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "flex pt-1",
+                        "data-slot": "heatmap-x-labels",
+                        style: { gap: cellGap },
+                        children: derivedXLabels.map((xLabel) => /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "flex items-start justify-center text-xs text-muted-foreground",
+                            style: { width: cellSize },
+                            children: /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: cn(
+                                  derivedXLabels.length > 10 && "rotate-45 origin-top-left text-xs"
+                                ),
+                                children: xLabel
+                              }
+                            )
+                          },
+                          xLabel
+                        ))
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
+          }
+        ),
+        showLegend && (legendPosition === "bottom" || legendPosition === "right") && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex justify-end",
+              legendPosition === "right" && "self-center"
+            ),
+            children: renderLegend
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Heatmap, HeatmapCell, HeatmapLegend, heatmapVariants };
+//# sourceMappingURL=chunk-6GWO7JNP.js.map
+//# sourceMappingURL=chunk-6GWO7JNP.js.map