@hexclave/dashboard-ui-components 1.0.0

package/dist/esm/components/chart-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-theme.js","names":[],"sources":["../../../src/components/chart-theme.tsx"],"sourcesContent":["\"use client\";\n\nexport type DesignChartColorEntry = {\n  light: string,\n  dark: string,\n};\n\n/**\n * Design-system-consistent chart colors that work in light and dark mode.\n * Maps to the gradient system used across the dashboard design components.\n */\nexport const DESIGN_CHART_COLORS: readonly DesignChartColorEntry[] = [\n  { light: \"hsl(221, 83%, 53%)\", dark: \"hsl(217, 91%, 60%)\" },   // blue\n  { light: \"hsl(192, 91%, 36%)\", dark: \"hsl(188, 94%, 43%)\" },   // cyan\n  { light: \"hsl(271, 91%, 65%)\", dark: \"hsl(270, 95%, 75%)\" },   // purple\n  { light: \"hsl(160, 84%, 39%)\", dark: \"hsl(160, 84%, 45%)\" },   // emerald/green\n  { light: \"hsl(38, 92%, 50%)\",  dark: \"hsl(38, 92%, 50%)\" },    // amber/orange\n  { light: \"hsl(0, 84%, 60%)\",   dark: \"hsl(0, 84%, 65%)\" },     // red\n] as const;\n\nexport type DesignChartColorName = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"red\";\n\nconst colorNameIndexMap = new Map<DesignChartColorName, number>([\n  [\"blue\", 0],\n  [\"cyan\", 1],\n  [\"purple\", 2],\n  [\"green\", 3],\n  [\"orange\", 4],\n  [\"red\", 5],\n]);\n\n/**\n * Get a chart color by index (wraps around) or by name.\n */\nexport function getDesignChartColor(\n  indexOrName: number | DesignChartColorName,\n  mode: \"light\" | \"dark\" = \"dark\",\n): string {\n  const index = typeof indexOrName === \"string\"\n    ? colorNameIndexMap.get(indexOrName) ?? 0\n    : indexOrName % DESIGN_CHART_COLORS.length;\n  return DESIGN_CHART_COLORS[index][mode];\n}\n\n/**\n * Recharts-compatible grid/axis styling constants that match the design system.\n */\nexport const DESIGN_CHART_GRID_COLOR = \"hsl(0 0% 50% / 0.12)\";\nexport const DESIGN_CHART_AXIS_TICK_STYLE = {\n  fill: \"hsl(0 0% 50% / 0.5)\",\n  fontSize: 11,\n} as const;\n"],"mappings":";;;;;;;AAWA,MAAa,sBAAwD;CACnE;EAAE,OAAO;EAAsB,MAAM;EAAsB;CAC3D;EAAE,OAAO;EAAsB,MAAM;EAAsB;CAC3D;EAAE,OAAO;EAAsB,MAAM;EAAsB;CAC3D;EAAE,OAAO;EAAsB,MAAM;EAAsB;CAC3D;EAAE,OAAO;EAAsB,MAAM;EAAqB;CAC1D;EAAE,OAAO;EAAsB,MAAM;EAAoB;CAC1D;AAID,MAAM,oBAAoB,IAAI,IAAkC;CAC9D,CAAC,QAAQ,EAAE;CACX,CAAC,QAAQ,EAAE;CACX,CAAC,UAAU,EAAE;CACb,CAAC,SAAS,EAAE;CACZ,CAAC,UAAU,EAAE;CACb,CAAC,OAAO,EAAE;CACX,CAAC;;;;AAKF,SAAgB,oBACd,aACA,OAAyB,QACjB;AAIR,QAAO,oBAHO,OAAO,gBAAgB,WACjC,kBAAkB,IAAI,YAAY,IAAI,IACtC,cAAc,oBAAoB,QACJ;;;;;AAMpC,MAAa,0BAA0B;AACvC,MAAa,+BAA+B;CAC1C,MAAM;CACN,UAAU;CACX"}

package/dist/esm/components/chart-tooltip.d.ts

@@ -0,0 +1,41 @@
+import * as React$1 from "react";
+import * as RechartsPrimitive from "recharts";
+import * as recharts_types_component_DefaultTooltipContent0 from "recharts/types/component/DefaultTooltipContent";
+import * as recharts_types_util_types0 from "recharts/types/util/types";
+import * as recharts_types_component_Tooltip0 from "recharts/types/component/Tooltip";
+import * as recharts_types_util_payload_getUniqPayload0 from "recharts/types/util/payload/getUniqPayload";
+
+//#region src/components/chart-tooltip.d.ts
+declare const DesignChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare const DesignChartTooltipContent: React$1.ForwardRefExoticComponent<Omit<RechartsPrimitive.DefaultTooltipContentProps<recharts_types_component_DefaultTooltipContent0.ValueType, recharts_types_component_DefaultTooltipContent0.NameType> & {
+  accessibilityLayer?: boolean;
+  active?: boolean | undefined;
+  includeHidden?: boolean | undefined;
+  allowEscapeViewBox?: recharts_types_util_types0.AllowInDimension;
+  animationDuration?: recharts_types_util_types0.AnimationDuration;
+  animationEasing?: recharts_types_util_types0.AnimationTiming;
+  content?: recharts_types_component_Tooltip0.ContentType<recharts_types_component_DefaultTooltipContent0.ValueType, recharts_types_component_DefaultTooltipContent0.NameType> | undefined;
+  coordinate?: Partial<recharts_types_util_types0.Coordinate>;
+  cursor?: boolean | React$1.ReactElement | React$1.SVGProps<SVGElement>;
+  filterNull?: boolean;
+  defaultIndex?: number;
+  isAnimationActive?: boolean;
+  offset?: number;
+  payloadUniqBy?: recharts_types_util_payload_getUniqPayload0.UniqueOption<recharts_types_component_DefaultTooltipContent0.Payload<recharts_types_component_DefaultTooltipContent0.ValueType, recharts_types_component_DefaultTooltipContent0.NameType>> | undefined;
+  position?: Partial<recharts_types_util_types0.Coordinate>;
+  reverseDirection?: recharts_types_util_types0.AllowInDimension;
+  shared?: boolean;
+  trigger?: "hover" | "click";
+  useTranslate3d?: boolean;
+  viewBox?: recharts_types_util_types0.CartesianViewBox;
+  wrapperStyle?: React$1.CSSProperties;
+} & React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+  hideLabel?: boolean;
+  hideIndicator?: boolean;
+  indicator?: "line" | "dot" | "dashed";
+  nameKey?: string;
+  labelKey?: string;
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DesignChartTooltip, DesignChartTooltipContent };
+//# sourceMappingURL=chart-tooltip.d.ts.map

package/dist/esm/components/chart-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-tooltip.d.ts","names":[],"sources":["../../../src/components/chart-tooltip.tsx"],"mappings":";;;;;;;;cAOa,kBAAA,SAAkB,iBAAA,CAAA,OAAA;AAAA,cAElB,yBAAA,EAAyB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,CAAA,0BAAA,CA0JrC,+CAAA,CA1JqC,SAAA,EAAA,+CAAA,CAAA,QAAA;;;;uBAAA,0BAAA,CAAA,gBAAA"}

package/dist/esm/components/chart-tooltip.js

@@ -0,0 +1,84 @@
+"use client";
+
+import { cn } from "@hexclave/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import * as RechartsPrimitive from "recharts";
+import { getPayloadConfigFromPayload, useDesignChart } from "./chart-container.js";
+
+//#region src/components/chart-tooltip.tsx
+const DesignChartTooltip = RechartsPrimitive.Tooltip;
+const DesignChartTooltipContent = React$1.forwardRef(({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }, ref) => {
+	const { config } = useDesignChart();
+	const tooltipLabel = React$1.useMemo(() => {
+		if (hideLabel || !payload?.length) return null;
+		const [item] = payload;
+		const itemConfig = getPayloadConfigFromPayload(config, item, `${labelKey || item.dataKey || item.name || "value"}`);
+		const configEntry = typeof label === "string" ? config[label] : void 0;
+		const value = !labelKey && typeof label === "string" ? configEntry?.label ?? label : itemConfig?.label;
+		if (labelFormatter) return /* @__PURE__ */ jsx("div", {
+			className: cn("font-medium text-muted-foreground tracking-wide", labelClassName),
+			children: labelFormatter(value, payload)
+		});
+		if (!value) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: cn("font-medium text-muted-foreground tracking-wide", labelClassName),
+			children: value
+		});
+	}, [
+		label,
+		labelFormatter,
+		payload,
+		hideLabel,
+		labelClassName,
+		config,
+		labelKey
+	]);
+	if (!active || !payload?.length) return null;
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("grid min-w-[8rem] items-start gap-1.5 rounded-xl bg-background/95 px-3.5 py-2.5 text-xs shadow-lg backdrop-blur-xl ring-1 ring-foreground/[0.08]", className),
+		style: { zIndex: 9999 },
+		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("div", {
+			className: "grid gap-1.5",
+			children: payload.map((item, index) => {
+				const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey || item.name || item.dataKey || "value"}`);
+				const indicatorColor = color || item.payload.fill || item.color;
+				return /* @__PURE__ */ jsx("div", {
+					className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"),
+					children: formatter && item.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx("div", {
+						className: cn("shrink-0 rounded-full", {
+							"h-2 w-2 ring-2 ring-white/20": indicator === "dot",
+							"w-1 rounded-[2px]": indicator === "line",
+							"w-0 border-[1.5px] border-dashed bg-transparent rounded-[2px]": indicator === "dashed",
+							"my-0.5": nestLabel && indicator === "dashed"
+						}),
+						style: {
+							"--color-bg": indicatorColor,
+							"--color-border": indicatorColor,
+							backgroundColor: indicator === "dot" ? indicatorColor : void 0
+						}
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "grid gap-1.5",
+							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("span", {
+								className: "text-[11px] text-muted-foreground",
+								children: itemConfig?.label || item.name
+							})]
+						}), item.value != null && /* @__PURE__ */ jsx("span", {
+							className: "ml-auto font-mono text-xs font-semibold tabular-nums text-foreground",
+							children: typeof item.value === "number" ? item.value.toLocaleString() : item.value
+						})]
+					})] })
+				}, item.dataKey);
+			})
+		})]
+	});
+});
+DesignChartTooltipContent.displayName = "DesignChartTooltipContent";
+
+//#endregion
+export { DesignChartTooltip, DesignChartTooltipContent };
+//# sourceMappingURL=chart-tooltip.js.map

package/dist/esm/components/chart-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-tooltip.js","names":["React"],"sources":["../../../src/components/chart-tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as RechartsPrimitive from \"recharts\";\nimport { cn } from \"@stackframe/stack-ui\";\nimport { useDesignChart, getPayloadConfigFromPayload } from \"./chart-container\";\n\nexport const DesignChartTooltip = RechartsPrimitive.Tooltip;\n\nexport const DesignChartTooltipContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n    React.ComponentProps<\"div\"> & {\n      hideLabel?: boolean,\n      hideIndicator?: boolean,\n      indicator?: \"line\" | \"dot\" | \"dashed\",\n      nameKey?: string,\n      labelKey?: string,\n    }\n>(\n  (\n    {\n      active,\n      payload,\n      className,\n      indicator = \"dot\",\n      hideLabel = false,\n      hideIndicator = false,\n      label,\n      labelFormatter,\n      labelClassName,\n      formatter,\n      color,\n      nameKey,\n      labelKey,\n    },\n    ref\n  ) => {\n    const { config } = useDesignChart();\n\n    const tooltipLabel = React.useMemo(() => {\n      if (hideLabel || !payload?.length) {\n        return null;\n      }\n\n      const [item] = payload;\n      const key = `${labelKey || item.dataKey || item.name || \"value\"}`;\n      const itemConfig = getPayloadConfigFromPayload(config, item, key);\n      const configEntry = typeof label === \"string\" ? config[label as keyof typeof config] : undefined;\n      const value =\n        !labelKey && typeof label === \"string\"\n          ? configEntry?.label ?? label\n          : itemConfig?.label;\n\n      if (labelFormatter) {\n        return (\n          <div className={cn(\"font-medium text-muted-foreground tracking-wide\", labelClassName)}>\n            {labelFormatter(value, payload)}\n          </div>\n        );\n      }\n\n      if (!value) {\n        return null;\n      }\n\n      return <div className={cn(\"font-medium text-muted-foreground tracking-wide\", labelClassName)}>{value}</div>;\n    }, [\n      label,\n      labelFormatter,\n      payload,\n      hideLabel,\n      labelClassName,\n      config,\n      labelKey,\n    ]);\n\n    if (!active || !payload?.length) {\n      return null;\n    }\n\n    const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"grid min-w-[8rem] items-start gap-1.5 rounded-xl bg-background/95 px-3.5 py-2.5 text-xs shadow-lg backdrop-blur-xl ring-1 ring-foreground/[0.08]\",\n          className\n        )}\n        style={{ zIndex: 9999 }}\n      >\n        {!nestLabel ? tooltipLabel : null}\n        <div className=\"grid gap-1.5\">\n          {payload.map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`;\n            const itemConfig = getPayloadConfigFromPayload(config, item, key);\n            const indicatorColor = color || item.payload.fill || item.color;\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-full\",\n                            {\n                              \"h-2 w-2 ring-2 ring-white/20\": indicator === \"dot\",\n                              \"w-1 rounded-[2px]\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent rounded-[2px]\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                              backgroundColor: indicator === \"dot\" ? indicatorColor : undefined,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-[11px] text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"ml-auto font-mono text-xs font-semibold tabular-nums text-foreground\">\n                          {typeof item.value === \"number\" ? item.value.toLocaleString() : item.value}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\nDesignChartTooltipContent.displayName = \"DesignChartTooltipContent\";\n"],"mappings":";;;;;;;;;AAOA,MAAa,qBAAqB,kBAAkB;AAEpD,MAAa,4BAA4BA,QAAM,YAY3C,EACE,QACA,SACA,WACA,YAAY,OACZ,YAAY,OACZ,gBAAgB,OAChB,OACA,gBACA,gBACA,WACA,OACA,SACA,YAEF,QACG;CACH,MAAM,EAAE,WAAW,gBAAgB;CAEnC,MAAM,eAAeA,QAAM,cAAc;AACvC,MAAI,aAAa,CAAC,SAAS,OACzB,QAAO;EAGT,MAAM,CAAC,QAAQ;EAEf,MAAM,aAAa,4BAA4B,QAAQ,MAD3C,GAAG,YAAY,KAAK,WAAW,KAAK,QAAQ,UACS;EACjE,MAAM,cAAc,OAAO,UAAU,WAAW,OAAO,SAAgC;EACvF,MAAM,QACJ,CAAC,YAAY,OAAO,UAAU,WAC1B,aAAa,SAAS,QACtB,YAAY;AAElB,MAAI,eACF,QACE,oBAAC;GAAI,WAAW,GAAG,mDAAmD,eAAe;aAClF,eAAe,OAAO,QAAQ;IAC3B;AAIV,MAAI,CAAC,MACH,QAAO;AAGT,SAAO,oBAAC;GAAI,WAAW,GAAG,mDAAmD,eAAe;aAAG;IAAY;IAC1G;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,KAAI,CAAC,UAAU,CAAC,SAAS,OACvB,QAAO;CAGT,MAAM,YAAY,QAAQ,WAAW,KAAK,cAAc;AAExD,QACE,qBAAC;EACM;EACL,WAAW,GACT,oJACA,UACD;EACD,OAAO,EAAE,QAAQ,MAAM;aAEtB,CAAC,YAAY,eAAe,MAC7B,oBAAC;GAAI,WAAU;aACZ,QAAQ,KAAK,MAAM,UAAU;IAE5B,MAAM,aAAa,4BAA4B,QAAQ,MAD3C,GAAG,WAAW,KAAK,QAAQ,KAAK,WAAW,UACU;IACjE,MAAM,iBAAiB,SAAS,KAAK,QAAQ,QAAQ,KAAK;AAE1D,WACE,oBAAC;KAEC,WAAW,GACT,uGACA,cAAc,SAAS,eACxB;eAEA,aAAa,KAAK,UAAU,UAAa,KAAK,OAC7C,UAAU,KAAK,OAAO,KAAK,MAAM,MAAM,OAAO,KAAK,QAAQ,GAE3D,4CACG,YAAY,OACX,oBAAC,WAAW,SAAO,GAEnB,CAAC,iBACC,oBAAC;MACC,WAAW,GACT,yBACA;OACE,gCAAgC,cAAc;OAC9C,qBAAqB,cAAc;OACnC,iEACE,cAAc;OAChB,UAAU,aAAa,cAAc;OACtC,CACF;MACD,OACE;OACE,cAAc;OACd,kBAAkB;OAClB,iBAAiB,cAAc,QAAQ,iBAAiB;OACzD;OAEH,EAGN,qBAAC;MACC,WAAW,GACT,4CACA,YAAY,cAAc,eAC3B;iBAED,qBAAC;OAAI,WAAU;kBACZ,YAAY,eAAe,MAC5B,oBAAC;QAAK,WAAU;kBACb,YAAY,SAAS,KAAK;SACtB;QACH,EACL,KAAK,SAAS,QACb,oBAAC;OAAK,WAAU;iBACb,OAAO,KAAK,UAAU,WAAW,KAAK,MAAM,gBAAgB,GAAG,KAAK;QAChE;OAEL,IACL;OArDA,KAAK,QAuDN;KAER;IACE;GACF;EAGX;AACD,0BAA0B,cAAc"}

package/dist/esm/components/cursor-blast-effect.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/cursor-blast-effect.d.ts
+type CursorBlastEffectProps = {
+  /** Lifetime of each blast animation in ms. Default: 720 */blastLifetimeMs?: number; /** Maximum number of concurrent active blasts. Default: 18 */
+  maxActiveBlasts?: number; /** Minimum rapid clicks in the time window to trigger a blast. Default: 3 */
+  rageClickThreshold?: number; /** Time window (ms) for counting rage clicks. Default: 600 */
+  rageClickWindowMs?: number; /** Max distance (px) between clicks to count as same-spot rage clicking. Default: 60 */
+  rageClickRadiusPx?: number;
+  /**
+   * When provided, the blast effect is scoped to this container element.
+   * Clicks are only detected within the container and blasts are positioned
+   * relative to the container rather than the viewport.
+   */
+  containerRef?: React.RefObject<HTMLElement | null>;
+};
+declare function CursorBlastEffect({
+  blastLifetimeMs,
+  maxActiveBlasts,
+  rageClickThreshold,
+  rageClickWindowMs,
+  rageClickRadiusPx,
+  containerRef
+}?: CursorBlastEffectProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { CursorBlastEffect, CursorBlastEffectProps };
+//# sourceMappingURL=cursor-blast-effect.d.ts.map

package/dist/esm/components/cursor-blast-effect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cursor-blast-effect.d.ts","names":[],"sources":["../../../src/components/cursor-blast-effect.tsx"],"mappings":";;;KA6BY,sBAAA;6DAEV,eAAA,WAFU;EAIV,eAAA;EAEA,kBAAA,WAJA;EAMA,iBAAA,WAFA;EAIA,iBAAA;EAAA;;;;;EAMA,YAAA,GAAe,KAAA,CAAM,SAAA,CAAU,WAAA;AAAA;AAAA,iBAGjB,iBAAA,CAAA;EACd,eAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;EACA,iBAAA;EACA;AAAA,IACC,sBAAA,GAA2B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/cursor-blast-effect.js

@@ -0,0 +1,242 @@
+"use client";
+
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+//#region src/components/cursor-blast-effect.tsx
+const DEFAULT_BLAST_LIFETIME_MS = 720;
+const DEFAULT_MAX_ACTIVE_BLASTS = 18;
+/** Minimum rapid clicks in the time window to count as a rage click */
+const DEFAULT_RAGE_CLICK_THRESHOLD = 3;
+/** Time window (ms) in which clicks must occur to be considered rage clicking */
+const DEFAULT_RAGE_CLICK_WINDOW_MS = 600;
+/** Max distance (px) between clicks to still count as same-spot rage clicking */
+const DEFAULT_RAGE_CLICK_RADIUS_PX = 60;
+function CursorBlastEffect({ blastLifetimeMs = DEFAULT_BLAST_LIFETIME_MS, maxActiveBlasts = DEFAULT_MAX_ACTIVE_BLASTS, rageClickThreshold = DEFAULT_RAGE_CLICK_THRESHOLD, rageClickWindowMs = DEFAULT_RAGE_CLICK_WINDOW_MS, rageClickRadiusPx = DEFAULT_RAGE_CLICK_RADIUS_PX, containerRef } = {}) {
+	const [blasts, setBlasts] = useState([]);
+	const [mounted, setMounted] = useState(false);
+	const idCounterRef = useRef(0);
+	const timeoutIdsRef = useRef(/* @__PURE__ */ new Map());
+	const recentClicksRef = useRef([]);
+	const configRef = useRef({
+		blastLifetimeMs,
+		maxActiveBlasts,
+		rageClickThreshold,
+		rageClickWindowMs,
+		rageClickRadiusPx
+	});
+	configRef.current = {
+		blastLifetimeMs,
+		maxActiveBlasts,
+		rageClickThreshold,
+		rageClickWindowMs,
+		rageClickRadiusPx
+	};
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	useEffect(() => {
+		const removeBlast = (id) => {
+			setBlasts((prev) => prev.filter((blast) => blast.id !== id));
+			const timeoutId = timeoutIdsRef.current.get(id);
+			if (timeoutId !== void 0) {
+				window.clearTimeout(timeoutId);
+				timeoutIdsRef.current.delete(id);
+			}
+		};
+		const spawnBlast = (x, y) => {
+			const cfg = configRef.current;
+			const nextId = idCounterRef.current;
+			idCounterRef.current += 1;
+			const nextBlast = {
+				id: nextId,
+				x,
+				y,
+				size: 44 + Math.random() * 20,
+				hue: 185 + Math.random() * 35
+			};
+			setBlasts((prev) => {
+				const next = [...prev, nextBlast];
+				if (next.length <= cfg.maxActiveBlasts) return next;
+				return next.slice(next.length - cfg.maxActiveBlasts);
+			});
+			const timeoutId = window.setTimeout(() => removeBlast(nextId), cfg.blastLifetimeMs);
+			timeoutIdsRef.current.set(nextId, timeoutId);
+		};
+		const onClick = (event) => {
+			if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+			const cfg = configRef.current;
+			const now = performance.now();
+			let x;
+			let y;
+			if (containerRef?.current) {
+				const rect = containerRef.current.getBoundingClientRect();
+				x = event.clientX - rect.left;
+				y = event.clientY - rect.top;
+			} else {
+				x = event.clientX;
+				y = event.clientY;
+			}
+			recentClicksRef.current = recentClicksRef.current.filter((click) => now - click.time < cfg.rageClickWindowMs);
+			recentClicksRef.current.push({
+				time: now,
+				x,
+				y
+			});
+			if (recentClicksRef.current.filter((click) => {
+				const dx = click.x - x;
+				const dy = click.y - y;
+				return Math.sqrt(dx * dx + dy * dy) <= cfg.rageClickRadiusPx;
+			}).length >= cfg.rageClickThreshold) spawnBlast(x, y);
+		};
+		const target = containerRef?.current ?? window;
+		const timeoutIds = timeoutIdsRef.current;
+		target.addEventListener("click", onClick);
+		return () => {
+			target.removeEventListener("click", onClick);
+			for (const timeoutId of timeoutIds.values()) window.clearTimeout(timeoutId);
+			timeoutIds.clear();
+		};
+	}, [containerRef]);
+	if (!mounted) return null;
+	const blastElements = /* @__PURE__ */ jsxs(Fragment, { children: [blasts.map((blast) => /* @__PURE__ */ jsxs("div", {
+		style: {
+			position: "absolute",
+			left: blast.x,
+			top: blast.y,
+			width: blast.size,
+			height: blast.size,
+			transform: "translate(-50%, -50%)",
+			willChange: "transform, opacity",
+			filter: `hue-rotate(${blast.hue}deg)`
+		},
+		children: [
+			/* @__PURE__ */ jsx("span", { className: "cursor-blast-ring" }),
+			/* @__PURE__ */ jsx("span", { className: "cursor-blast-core" }),
+			Array.from({ length: 10 }).map((_, index) => {
+				return /* @__PURE__ */ jsx("span", {
+					className: "cursor-blast-shard-wrap",
+					style: {
+						transform: `translate(-50%, -50%) rotate(${360 / 10 * index}deg)`,
+						animationDelay: `${index * 16}ms`
+					},
+					children: /* @__PURE__ */ jsx("span", { className: "cursor-blast-shard" })
+				}, `${blast.id}-${index}`);
+			})
+		]
+	}, blast.id)), /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `
+        .cursor-blast-ring {
+          position: absolute;
+          inset: 0;
+          border-radius: 999px;
+          border: 2px solid hsl(197 98% 67% / 0.9);
+          box-shadow:
+            0 0 22px hsl(191 100% 72% / 0.6),
+            inset 0 0 12px hsl(204 100% 77% / 0.65);
+          animation: blast-ring 560ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+        }
+
+        .cursor-blast-core {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          width: 10px;
+          height: 10px;
+          border-radius: 999px;
+          transform: translate(-50%, -50%);
+          background: hsl(196 100% 85%);
+          box-shadow:
+            0 0 26px hsl(193 100% 72% / 0.9),
+            0 0 10px hsl(201 100% 85% / 0.9);
+          animation: blast-core 420ms ease-out forwards;
+        }
+
+        .cursor-blast-shard-wrap {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          width: 0;
+          height: 0;
+        }
+
+        .cursor-blast-shard {
+          position: absolute;
+          left: 0;
+          top: -1.5px;
+          width: 12px;
+          height: 3px;
+          border-radius: 999px;
+          background: linear-gradient(90deg, hsl(190 100% 84%), hsl(197 98% 67%));
+          box-shadow: 0 0 12px hsl(195 100% 70% / 0.8);
+          animation: blast-shard 680ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+        }
+
+        @keyframes blast-ring {
+          0% {
+            transform: scale(0.2);
+            opacity: 0.95;
+          }
+          100% {
+            transform: scale(1.6);
+            opacity: 0;
+          }
+        }
+
+        @keyframes blast-core {
+          0% {
+            transform: translate(-50%, -50%) scale(0.5);
+            opacity: 1;
+          }
+          100% {
+            transform: translate(-50%, -50%) scale(2.2);
+            opacity: 0;
+          }
+        }
+
+        @keyframes blast-shard {
+          0% {
+            transform: translateX(0) scaleX(0.7);
+            opacity: 1;
+          }
+          100% {
+            transform: translateX(46px) scaleX(1.1);
+            opacity: 0;
+          }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .cursor-blast-ring,
+          .cursor-blast-core,
+          .cursor-blast-shard {
+            animation-duration: 1ms;
+          }
+        }
+      ` } })] });
+	if (containerRef) return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		style: {
+			position: "absolute",
+			inset: 0,
+			zIndex: 2147483647,
+			pointerEvents: "none",
+			overflow: "hidden",
+			borderRadius: "inherit"
+		},
+		children: blastElements
+	});
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		style: {
+			position: "fixed",
+			inset: 0,
+			zIndex: 2147483647,
+			pointerEvents: "none"
+		},
+		children: blastElements
+	}), document.body);
+}
+
+//#endregion
+export { CursorBlastEffect };
+//# sourceMappingURL=cursor-blast-effect.js.map

package/dist/esm/components/cursor-blast-effect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cursor-blast-effect.js","names":[],"sources":["../../../src/components/cursor-blast-effect.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ntype Blast = {\n  id: number,\n  x: number,\n  y: number,\n  size: number,\n  hue: number,\n};\n\nconst DEFAULT_BLAST_LIFETIME_MS = 720;\nconst DEFAULT_MAX_ACTIVE_BLASTS = 18;\n\n/** Minimum rapid clicks in the time window to count as a rage click */\nconst DEFAULT_RAGE_CLICK_THRESHOLD = 3;\n/** Time window (ms) in which clicks must occur to be considered rage clicking */\nconst DEFAULT_RAGE_CLICK_WINDOW_MS = 600;\n/** Max distance (px) between clicks to still count as same-spot rage clicking */\nconst DEFAULT_RAGE_CLICK_RADIUS_PX = 60;\n\ntype RecentClick = {\n  time: number,\n  x: number,\n  y: number,\n};\n\nexport type CursorBlastEffectProps = {\n  /** Lifetime of each blast animation in ms. Default: 720 */\n  blastLifetimeMs?: number,\n  /** Maximum number of concurrent active blasts. Default: 18 */\n  maxActiveBlasts?: number,\n  /** Minimum rapid clicks in the time window to trigger a blast. Default: 3 */\n  rageClickThreshold?: number,\n  /** Time window (ms) for counting rage clicks. Default: 600 */\n  rageClickWindowMs?: number,\n  /** Max distance (px) between clicks to count as same-spot rage clicking. Default: 60 */\n  rageClickRadiusPx?: number,\n  /**\n   * When provided, the blast effect is scoped to this container element.\n   * Clicks are only detected within the container and blasts are positioned\n   * relative to the container rather than the viewport.\n   */\n  containerRef?: React.RefObject<HTMLElement | null>,\n};\n\nexport function CursorBlastEffect({\n  blastLifetimeMs = DEFAULT_BLAST_LIFETIME_MS,\n  maxActiveBlasts = DEFAULT_MAX_ACTIVE_BLASTS,\n  rageClickThreshold = DEFAULT_RAGE_CLICK_THRESHOLD,\n  rageClickWindowMs = DEFAULT_RAGE_CLICK_WINDOW_MS,\n  rageClickRadiusPx = DEFAULT_RAGE_CLICK_RADIUS_PX,\n  containerRef,\n}: CursorBlastEffectProps = {}) {\n  const [blasts, setBlasts] = useState<Blast[]>([]);\n  const [mounted, setMounted] = useState(false);\n  const idCounterRef = useRef(0);\n  const timeoutIdsRef = useRef<Map<number, number>>(new Map());\n  const recentClicksRef = useRef<RecentClick[]>([]);\n\n  // Store latest config in refs so the effect callback always reads current values\n  const configRef = useRef({\n    blastLifetimeMs,\n    maxActiveBlasts,\n    rageClickThreshold,\n    rageClickWindowMs,\n    rageClickRadiusPx,\n  });\n  configRef.current = {\n    blastLifetimeMs,\n    maxActiveBlasts,\n    rageClickThreshold,\n    rageClickWindowMs,\n    rageClickRadiusPx,\n  };\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  useEffect(() => {\n    const removeBlast = (id: number) => {\n      setBlasts((prev) => prev.filter((blast) => blast.id !== id));\n      const timeoutId = timeoutIdsRef.current.get(id);\n      if (timeoutId !== undefined) {\n        window.clearTimeout(timeoutId);\n        timeoutIdsRef.current.delete(id);\n      }\n    };\n\n    const spawnBlast = (x: number, y: number) => {\n      const cfg = configRef.current;\n      const nextId = idCounterRef.current;\n      idCounterRef.current += 1;\n\n      const nextBlast: Blast = {\n        id: nextId,\n        x,\n        y,\n        size: 44 + Math.random() * 20,\n        hue: 185 + Math.random() * 35,\n      };\n\n      setBlasts((prev) => {\n        const next = [...prev, nextBlast];\n        if (next.length <= cfg.maxActiveBlasts) {\n          return next;\n        }\n        return next.slice(next.length - cfg.maxActiveBlasts);\n      });\n\n      const timeoutId = window.setTimeout(() => removeBlast(nextId), cfg.blastLifetimeMs);\n      timeoutIdsRef.current.set(nextId, timeoutId);\n    };\n\n    const onClick = (event: MouseEvent) => {\n      if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n        return;\n      }\n\n      const cfg = configRef.current;\n      const now = performance.now();\n\n      let x: number;\n      let y: number;\n\n      if (containerRef?.current) {\n        const rect = containerRef.current.getBoundingClientRect();\n        x = event.clientX - rect.left;\n        y = event.clientY - rect.top;\n      } else {\n        x = event.clientX;\n        y = event.clientY;\n      }\n\n      // Prune clicks outside the time window\n      recentClicksRef.current = recentClicksRef.current.filter(\n        (click) => now - click.time < cfg.rageClickWindowMs,\n      );\n\n      recentClicksRef.current.push({ time: now, x, y });\n\n      // Count how many recent clicks are within the radius of the current click\n      const nearbyCount = recentClicksRef.current.filter((click) => {\n        const dx = click.x - x;\n        const dy = click.y - y;\n        return Math.sqrt(dx * dx + dy * dy) <= cfg.rageClickRadiusPx;\n      }).length;\n\n      if (nearbyCount >= cfg.rageClickThreshold) {\n        spawnBlast(x, y);\n      }\n    };\n\n    const target = containerRef?.current ?? window;\n    const timeoutIds = timeoutIdsRef.current;\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion -- EventTarget union requires cast\n    (target as EventTarget).addEventListener(\"click\", onClick as EventListener);\n    return () => {\n      (target as EventTarget).removeEventListener(\"click\", onClick as EventListener);\n      for (const timeoutId of timeoutIds.values()) {\n        window.clearTimeout(timeoutId);\n      }\n      timeoutIds.clear();\n    };\n  }, [containerRef]);\n\n  if (!mounted) {\n    return null;\n  }\n\n  const blastElements = (\n    <>\n      {blasts.map((blast) => (\n        <div\n          key={blast.id}\n          style={{\n            position: \"absolute\",\n            left: blast.x,\n            top: blast.y,\n            width: blast.size,\n            height: blast.size,\n            transform: \"translate(-50%, -50%)\",\n            willChange: \"transform, opacity\",\n            filter: `hue-rotate(${blast.hue}deg)`,\n          }}\n        >\n          <span className=\"cursor-blast-ring\" />\n          <span className=\"cursor-blast-core\" />\n          {Array.from({ length: 10 }).map((_, index) => {\n            const angle = (360 / 10) * index;\n            return (\n              <span\n                key={`${blast.id}-${index}`}\n                className=\"cursor-blast-shard-wrap\"\n                style={{\n                  transform: `translate(-50%, -50%) rotate(${angle}deg)`,\n                  animationDelay: `${index * 16}ms`,\n                }}\n              >\n                <span className=\"cursor-blast-shard\" />\n              </span>\n            );\n          })}\n        </div>\n      ))}\n      <style dangerouslySetInnerHTML={{ __html: `\n        .cursor-blast-ring {\n          position: absolute;\n          inset: 0;\n          border-radius: 999px;\n          border: 2px solid hsl(197 98% 67% / 0.9);\n          box-shadow:\n            0 0 22px hsl(191 100% 72% / 0.6),\n            inset 0 0 12px hsl(204 100% 77% / 0.65);\n          animation: blast-ring 560ms cubic-bezier(0.16, 1, 0.3, 1) forwards;\n        }\n\n        .cursor-blast-core {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          width: 10px;\n          height: 10px;\n          border-radius: 999px;\n          transform: translate(-50%, -50%);\n          background: hsl(196 100% 85%);\n          box-shadow:\n            0 0 26px hsl(193 100% 72% / 0.9),\n            0 0 10px hsl(201 100% 85% / 0.9);\n          animation: blast-core 420ms ease-out forwards;\n        }\n\n        .cursor-blast-shard-wrap {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          width: 0;\n          height: 0;\n        }\n\n        .cursor-blast-shard {\n          position: absolute;\n          left: 0;\n          top: -1.5px;\n          width: 12px;\n          height: 3px;\n          border-radius: 999px;\n          background: linear-gradient(90deg, hsl(190 100% 84%), hsl(197 98% 67%));\n          box-shadow: 0 0 12px hsl(195 100% 70% / 0.8);\n          animation: blast-shard 680ms cubic-bezier(0.22, 1, 0.36, 1) forwards;\n        }\n\n        @keyframes blast-ring {\n          0% {\n            transform: scale(0.2);\n            opacity: 0.95;\n          }\n          100% {\n            transform: scale(1.6);\n            opacity: 0;\n          }\n        }\n\n        @keyframes blast-core {\n          0% {\n            transform: translate(-50%, -50%) scale(0.5);\n            opacity: 1;\n          }\n          100% {\n            transform: translate(-50%, -50%) scale(2.2);\n            opacity: 0;\n          }\n        }\n\n        @keyframes blast-shard {\n          0% {\n            transform: translateX(0) scaleX(0.7);\n            opacity: 1;\n          }\n          100% {\n            transform: translateX(46px) scaleX(1.1);\n            opacity: 0;\n          }\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n          .cursor-blast-ring,\n          .cursor-blast-core,\n          .cursor-blast-shard {\n            animation-duration: 1ms;\n          }\n        }\n      ` }} />\n    </>\n  );\n\n  // When scoped to a container, render inline (the container must have position: relative)\n  if (containerRef) {\n    return (\n      <div\n        aria-hidden\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          zIndex: 2147483647,\n          pointerEvents: \"none\",\n          overflow: \"hidden\",\n          borderRadius: \"inherit\",\n        }}\n      >\n        {blastElements}\n      </div>\n    );\n  }\n\n  // Default: portal to body with fixed positioning (original behaviour)\n  return createPortal(\n    <div\n      aria-hidden\n      style={{\n        position: \"fixed\",\n        inset: 0,\n        zIndex: 2147483647,\n        pointerEvents: \"none\",\n      }}\n    >\n      {blastElements}\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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"}

package/dist/esm/components/data-grid/data-grid-sizing.d.ts

@@ -0,0 +1,13 @@
+import { DataGridColumnDef } from "./types";
+
+//#region src/components/data-grid/data-grid-sizing.d.ts
+declare const DEFAULT_MAX_COL_WIDTH = 800;
+declare const DEFAULT_COL_WIDTH = 150;
+/** Effective minimum column width. When `col.minWidth` is unset, derive
+ * one from the header label so it never gets clipped during resize. */
+declare function getEffectiveMinWidth<TRow>(col: DataGridColumnDef<TRow>): number;
+declare function getEffectiveMaxWidth<TRow>(col: DataGridColumnDef<TRow>): number;
+declare function clampColumnWidth<TRow>(col: DataGridColumnDef<TRow>, width: number): number;
+//#endregion
+export { DEFAULT_COL_WIDTH, DEFAULT_MAX_COL_WIDTH, clampColumnWidth, getEffectiveMaxWidth, getEffectiveMinWidth };
+//# sourceMappingURL=data-grid-sizing.d.ts.map

package/dist/esm/components/data-grid/data-grid-sizing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-sizing.d.ts","names":[],"sources":["../../../../src/components/data-grid/data-grid-sizing.ts"],"mappings":";;;cAIa,qBAAA;AAAA,cACA,iBAAA;AADb;;AAAA,iBA+BgB,oBAAA,MAAA,CAA2B,GAAA,EAAK,iBAAA,CAAkB,IAAA;AAAA,iBASlD,oBAAA,MAAA,CAA2B,GAAA,EAAK,iBAAA,CAAkB,IAAA;AAAA,iBAIlD,gBAAA,MAAA,CAAuB,GAAA,EAAK,iBAAA,CAAkB,IAAA,GAAO,KAAA"}

package/dist/esm/components/data-grid/data-grid-sizing.js

@@ -0,0 +1,38 @@
+//#region src/components/data-grid/data-grid-sizing.ts
+const MIN_COL_WIDTH = 20;
+const MIN_CUSTOM_HEADER_WIDTH = 50;
+const DEFAULT_MAX_COL_WIDTH = 800;
+const DEFAULT_COL_WIDTH = 150;
+const HEADER_CHROME_PX = 44;
+let measureContext = null;
+const headerWidthCache = /* @__PURE__ */ new Map();
+function measureHeaderLabelWidth(label) {
+	const cached = headerWidthCache.get(label);
+	if (cached != null) return cached;
+	if (typeof document === "undefined") return 0;
+	if (measureContext == null) measureContext = document.createElement("canvas").getContext("2d");
+	if (measureContext == null) return 0;
+	measureContext.font = "600 12px system-ui, -apple-system, sans-serif";
+	const text = label.toUpperCase();
+	const width = Math.ceil(measureContext.measureText(text).width + .05 * 12 * text.length);
+	headerWidthCache.set(label, width);
+	return width;
+}
+/** Effective minimum column width. When `col.minWidth` is unset, derive
+* one from the header label so it never gets clipped during resize. */
+function getEffectiveMinWidth(col) {
+	if (col.minWidth != null) return col.minWidth;
+	const label = typeof col.header === "string" ? col.header : null;
+	if (label == null) return typeof col.header === "function" ? MIN_CUSTOM_HEADER_WIDTH : MIN_COL_WIDTH;
+	return Math.max(MIN_COL_WIDTH, measureHeaderLabelWidth(label) + HEADER_CHROME_PX);
+}
+function getEffectiveMaxWidth(col) {
+	return col.maxWidth ?? DEFAULT_MAX_COL_WIDTH;
+}
+function clampColumnWidth(col, width) {
+	return Math.max(getEffectiveMinWidth(col), Math.min(getEffectiveMaxWidth(col), width));
+}
+
+//#endregion
+export { DEFAULT_COL_WIDTH, DEFAULT_MAX_COL_WIDTH, clampColumnWidth, getEffectiveMaxWidth, getEffectiveMinWidth };
+//# sourceMappingURL=data-grid-sizing.js.map

package/dist/esm/components/data-grid/data-grid-sizing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-sizing.js","names":[],"sources":["../../../../src/components/data-grid/data-grid-sizing.ts"],"sourcesContent":["import type { DataGridColumnDef } from \"./types\";\n\nconst MIN_COL_WIDTH = 20;\nconst MIN_CUSTOM_HEADER_WIDTH = 50;\nexport const DEFAULT_MAX_COL_WIDTH = 800;\nexport const DEFAULT_COL_WIDTH = 150;\n\n// px-3 both sides + gap-1.5 + sort icon (h-3 w-3) + 2px rounding buffer\nconst HEADER_CHROME_PX = 12 + 12 + 6 + 12 + 2;\n\nlet measureContext: CanvasRenderingContext2D | null = null;\nconst headerWidthCache = new Map<string, number>();\n\nfunction measureHeaderLabelWidth(label: string): number {\n  const cached = headerWidthCache.get(label);\n  if (cached != null) return cached;\n  if (typeof document === \"undefined\") return 0;\n  if (measureContext == null) {\n    measureContext = document.createElement(\"canvas\").getContext(\"2d\");\n  }\n  if (measureContext == null) return 0;\n\n  // Match header cell: text-xs (12px) font-semibold uppercase tracking-wider (0.05em)\n  measureContext.font = \"600 12px system-ui, -apple-system, sans-serif\";\n  const text = label.toUpperCase();\n  const letterSpacingPx = 0.05 * 12;\n  const width = Math.ceil(\n    measureContext.measureText(text).width + letterSpacingPx * text.length,\n  );\n  headerWidthCache.set(label, width);\n  return width;\n}\n\n/** Effective minimum column width. When `col.minWidth` is unset, derive\n * one from the header label so it never gets clipped during resize. */\nexport function getEffectiveMinWidth<TRow>(col: DataGridColumnDef<TRow>): number {\n  if (col.minWidth != null) return col.minWidth;\n  const label = typeof col.header === \"string\" ? col.header : null;\n  if (label == null) {\n    return typeof col.header === \"function\" ? MIN_CUSTOM_HEADER_WIDTH : MIN_COL_WIDTH;\n  }\n  return Math.max(MIN_COL_WIDTH, measureHeaderLabelWidth(label) + HEADER_CHROME_PX);\n}\n\nexport function getEffectiveMaxWidth<TRow>(col: DataGridColumnDef<TRow>): number {\n  return col.maxWidth ?? DEFAULT_MAX_COL_WIDTH;\n}\n\nexport function clampColumnWidth<TRow>(col: DataGridColumnDef<TRow>, width: number): number {\n  return Math.max(getEffectiveMinWidth(col), Math.min(getEffectiveMaxWidth(col), width));\n}\n"],"mappings":";AAEA,MAAM,gBAAgB;AACtB,MAAM,0BAA0B;AAChC,MAAa,wBAAwB;AACrC,MAAa,oBAAoB;AAGjC,MAAM,mBAAmB;AAEzB,IAAI,iBAAkD;AACtD,MAAM,mCAAmB,IAAI,KAAqB;AAElD,SAAS,wBAAwB,OAAuB;CACtD,MAAM,SAAS,iBAAiB,IAAI,MAAM;AAC1C,KAAI,UAAU,KAAM,QAAO;AAC3B,KAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,KAAI,kBAAkB,KACpB,kBAAiB,SAAS,cAAc,SAAS,CAAC,WAAW,KAAK;AAEpE,KAAI,kBAAkB,KAAM,QAAO;AAGnC,gBAAe,OAAO;CACtB,MAAM,OAAO,MAAM,aAAa;CAEhC,MAAM,QAAQ,KAAK,KACjB,eAAe,YAAY,KAAK,CAAC,QAFX,MAAO,KAE8B,KAAK,OACjE;AACD,kBAAiB,IAAI,OAAO,MAAM;AAClC,QAAO;;;;AAKT,SAAgB,qBAA2B,KAAsC;AAC/E,KAAI,IAAI,YAAY,KAAM,QAAO,IAAI;CACrC,MAAM,QAAQ,OAAO,IAAI,WAAW,WAAW,IAAI,SAAS;AAC5D,KAAI,SAAS,KACX,QAAO,OAAO,IAAI,WAAW,aAAa,0BAA0B;AAEtE,QAAO,KAAK,IAAI,eAAe,wBAAwB,MAAM,GAAG,iBAAiB;;AAGnF,SAAgB,qBAA2B,KAAsC;AAC/E,QAAO,IAAI,YAAY;;AAGzB,SAAgB,iBAAuB,KAA8B,OAAuB;AAC1F,QAAO,KAAK,IAAI,qBAAqB,IAAI,EAAE,KAAK,IAAI,qBAAqB,IAAI,EAAE,MAAM,CAAC"}

package/dist/esm/components/data-grid/data-grid-toolbar.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React from "react";
+import { DataGridToolbarContext } from "./types";
+
+//#region src/components/data-grid/data-grid-toolbar.d.ts
+declare function DataGridToolbar<TRow>({
+  ctx,
+  extra,
+  extraLeading,
+  hideQuickSearch
+}: {
+  ctx: DataGridToolbarContext<TRow>;
+  /** Extra content rendered inside the toolbar row, to the left of the
+   *  built-in columns / export actions. Use this to add table-specific
+   *  affordances (refresh, custom toggles, row counts) without giving up
+   *  the default actions. */
+  extra?: React.ReactNode;
+  /** Extra content rendered at the START of the toolbar row — occupies
+   *  the same position as the built-in quick search (after it, if the
+   *  quick search is visible). Use this together with `hideQuickSearch`
+   *  to fully replace the quick search with a custom input, e.g. an
+   *  AI-powered search bar. */
+  extraLeading?: React.ReactNode;
+  /** Whether to hide the built-in quick-search input. When `true`,
+   *  callers are expected to provide their own search UI via
+   *  `extraLeading`. */
+  hideQuickSearch?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DataGridToolbar };
+//# sourceMappingURL=data-grid-toolbar.d.ts.map

package/dist/esm/components/data-grid/data-grid-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-toolbar.d.ts","names":[],"sources":["../../../../src/components/data-grid/data-grid-toolbar.tsx"],"mappings":";;;;;iBA6QgB,eAAA,MAAA,CAAA;EACd,GAAA;EACA,KAAA;EACA,YAAA;EACA;AAAA;EAEA,GAAA,EAAK,sBAAA,CAAuB,IAAA;;AAN9B;;;EAWE,KAAA,GAAQ,KAAA,CAAM,SAAA;EATd;;;;;EAeA,YAAA,GAAe,KAAA,CAAM,SAAA;EAAN;;;EAIf,eAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}