@alpic-ai/ui 0.0.0-dev.g05467b7 → 0.0.0-dev.g05c89ce

package/src/components/line-chart.tsx

@@ -16,7 +16,7 @@ import {
 } from "recharts";
 
 import { useReducedMotion } from "../hooks/use-reduced-motion";
-import { type ChartSeries, resolveSeries } from "../lib/chart";
+import { type ChartSeries, makeXAxisTick, resolveSeries } from "../lib/chart";
 import type { ChartPaletteName } from "../lib/chart-palette";
 import { cn } from "../lib/cn";
 import type { ChartMarker } from "./area-chart";
@@ -32,6 +32,7 @@ export interface LineChartProps {
   series: ChartSeries[];
   curve?: keyof typeof CURVE_TYPE;
   legend?: boolean;
+  legendAlign?: "left" | "center" | "right";
   valueFlags?: boolean;
   dots?: boolean;
   height?: number;
@@ -52,6 +53,7 @@ function LineChart({
   series,
   curve = "monotone",
   legend = false,
+  legendAlign = "left",
   valueFlags = false,
   dots = false,
   height = 200,
@@ -170,11 +172,22 @@ function LineChart({
             no data in range
           </div>
         ) : (
-          <ResponsiveContainer width="100%" height="100%">
+          <ResponsiveContainer width="100%" height="100%" initialDimension={{ width: 0, height }}>
             <RechartsLineChart data={data as Record<string, string | number>[]} margin={margin}>
               <CartesianGrid vertical={false} stroke={theme.grid} strokeDasharray="2 4" />
-              <XAxis dataKey={index} {...axis} interval="preserveStartEnd" minTickGap={44} />
-              <YAxis {...axis} width={yAxisWidth} tickFormatter={(value: number) => valueFormatter(value)} />
+              <XAxis
+                dataKey={index}
+                {...axis}
+                tick={makeXAxisTick(theme)}
+                interval="preserveStartEnd"
+                minTickGap={44}
+              />
+              <YAxis
+                {...axis}
+                width={yAxisWidth}
+                domain={["auto", "auto"]}
+                tickFormatter={(value: number) => valueFormatter(value)}
+              />
               <Tooltip
                 offset={12}
                 allowEscapeViewBox={{ x: false, y: false }}
@@ -256,7 +269,7 @@ function LineChart({
         )}
       </div>
 
-      {legend && !isEmpty && <ChartLegend items={legendItems} style={{ paddingLeft: yAxisWidth }} />}
+      {legend && !isEmpty && <ChartLegend items={legendItems} align={legendAlign} insetLeft={yAxisWidth} />}
     </div>
   );
 }

package/src/components/stat.tsx

@@ -31,8 +31,9 @@ export interface StatDelta {
 export interface StatProps extends React.ComponentProps<"div"> {
   value: React.ReactNode;
   unit?: string;
-  delta?: StatDelta;
+  delta?: StatDelta | null;
   sparkline?: number[] | Array<{ value: number }>;
+  semantic?: "error" | "warning" | "success";
 }
 
 const toSparkData = (sparkline: StatProps["sparkline"]) =>
@@ -40,12 +41,15 @@ const toSparkData = (sparkline: StatProps["sparkline"]) =>
     typeof point === "number" ? { index, value: point } : { index, value: point.value },
   );
 
-function Stat({ value, unit, delta, sparkline, className, ...props }: StatProps) {
-  const { palette } = useChartContext();
+const SEMANTIC_KEY = { error: "destructive", warning: "warning", success: "success" } as const;
+
+function Stat({ value, unit, delta, sparkline, semantic, className, ...props }: StatProps) {
+  const { palette, theme } = useChartContext();
   const gradientId = React.useId().replace(/:/g, "");
   const sparkData = React.useMemo(() => toSparkData(sparkline), [sparkline]);
+  const hasSpark = sparkData.some((point) => point.value > 0);
   // biome-ignore lint/style/noNonNullAssertion: palettes are never empty
-  const sparkColor = palette[0]!;
+  const sparkColor = semantic ? theme[SEMANTIC_KEY[semantic]] : palette[0]!;
 
   const sentiment =
     delta && (delta.invert ? delta.direction === "down" : delta.direction === "up") ? "positive" : "negative";
@@ -64,9 +68,9 @@ function Stat({ value, unit, delta, sparkline, className, ...props }: StatProps)
           </DeltaPill>
         )}
       </div>
-      {sparkData.length > 0 && (
+      {hasSpark && (
         <div className="h-9 w-full">
-          <ResponsiveContainer width="100%" height="100%">
+          <ResponsiveContainer width="100%" height="100%" initialDimension={{ width: 0, height: 36 }}>
             <AreaChart data={sparkData} margin={{ top: 4, right: 2, bottom: 0, left: 2 }}>
               <defs>
                 <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">

package/src/components/wizard.tsx

@@ -3,45 +3,12 @@
 /*
  * Wizard family — primitives for multi-step flows.
  *
- * - WizardSteps   — vertical step rail (controlled by activeIdx + onSelect)
  * - WizardProgress — step counter + progress bar
- *
- * Consumers compose these inside whatever container they need (sticky aside, modal, etc.).
  */
 
 import type * as React from "react";
 
 import { cn } from "../lib/cn";
-import { TabsNav, TabsNavList, TabsNavTrigger } from "./tabs";
-
-interface WizardStep {
-  id: string;
-  label: string;
-}
-
-interface WizardStepsProps {
-  steps: readonly WizardStep[];
-  activeIdx: number;
-  onSelect: (idx: number) => void;
-  ariaLabel?: string;
-  className?: string;
-}
-
-function WizardSteps({ steps, activeIdx, onSelect, ariaLabel = "Wizard steps", className }: WizardStepsProps) {
-  return (
-    <TabsNav orientation="vertical" aria-label={ariaLabel} className={className}>
-      <TabsNavList>
-        {steps.map((step, idx) => (
-          <TabsNavTrigger key={step.id} active={idx === activeIdx} asChild>
-            <button type="button" onClick={() => onSelect(idx)} className="w-full justify-start text-left">
-              {step.label}
-            </button>
-          </TabsNavTrigger>
-        ))}
-      </TabsNavList>
-    </TabsNav>
-  );
-}
 
 interface WizardProgressProps extends React.ComponentProps<"div"> {
   current: number;
@@ -65,5 +32,4 @@ function WizardProgress({ current, total, className, ...props }: WizardProgressP
   );
 }
 
-export type { WizardStep };
-export { WizardProgress, WizardSteps };
+export { WizardProgress };

package/src/lib/chart.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { ChartTheme } from "../hooks/use-chart-theme";
 import { luminance, paletteColor } from "./chart-palette";
 
@@ -54,3 +55,36 @@ export const resolveSeries = (
  */
 export const orderByLuminance = (series: ResolvedSeries[]) =>
   [...series].sort((lower, upper) => luminance(lower.color) - luminance(upper.color));
+
+export const makeXAxisTick =
+  (theme: ChartTheme) =>
+  ({
+    x,
+    y,
+    payload,
+    index,
+    visibleTicksCount,
+  }: {
+    x?: string | number;
+    y?: string | number;
+    payload?: { value?: string | number };
+    index?: number;
+    visibleTicksCount?: number;
+  }) => {
+    const isFirst = index === 0;
+    const isLast = visibleTicksCount != null && index === visibleTicksCount - 1;
+    const anchor = isFirst ? "start" : isLast ? "end" : "middle";
+    return React.createElement(
+      "text",
+      {
+        x: Number(x ?? 0),
+        y: Number(y ?? 0),
+        dy: 12,
+        textAnchor: anchor,
+        fill: theme.axisForeground,
+        fontFamily: theme.fontMono,
+        fontSize: 10,
+      },
+      String(payload?.value ?? ""),
+    );
+  };

package/src/stories/area-chart.stories.tsx

@@ -2,7 +2,6 @@ import type { Story } from "@ladle/react";
 
 import { AreaChart } from "../components/area-chart";
 import { ChartCard } from "../components/chart-card";
-import { GridFx } from "../components/grid-fx";
 import { Stat } from "../components/stat";
 
 export default { title: "Charts/Area Chart" };
@@ -90,8 +89,7 @@ const latencyPeak = latency.reduce((best, row) => (row.p95 > best.p95 ? row : be
 const errorsPeak = errors.reduce((best, row) => (row.mcp + row.tool > best.mcp + best.tool ? row : best));
 
 export const AllVariants: Story = () => (
-  <div className="chart-canvas mx-auto max-w-[1600px] p-8">
-    <GridFx />
+  <div className="mx-auto max-w-[1600px] p-8">
     <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
       <ChartCard
         palette="magenta"

package/src/stories/bar-chart.stories.tsx

@@ -2,7 +2,6 @@ import type { Story } from "@ladle/react";
 
 import { BarChart } from "../components/bar-chart";
 import { ChartCard } from "../components/chart-card";
-import { GridFx } from "../components/grid-fx";
 import { Stat } from "../components/stat";
 
 export default { title: "Charts/Bar Chart" };
@@ -77,8 +76,7 @@ const sessionsSpark = stacked.map((row) => CLIENTS.reduce((acc, client) => acc +
 const errorsPeak = errors.reduce((best, row) => (row.mcp + row.tool > best.mcp + best.tool ? row : best));
 
 export const AllVariants: Story = () => (
-  <div className="chart-canvas mx-auto max-w-[1600px] p-8">
-    <GridFx />
+  <div className="mx-auto max-w-[1600px] p-8">
     <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
       <ChartCard
         palette="magenta"

package/src/stories/bar-list.stories.tsx

@@ -2,7 +2,6 @@ import type { Story } from "@ladle/react";
 
 import { BarList } from "../components/bar-list";
 import { ChartCard } from "../components/chart-card";
-import { GridFx } from "../components/grid-fx";
 import { Stat } from "../components/stat";
 
 export default { title: "Charts/Bar List" };
@@ -53,8 +52,7 @@ const fmtK = (value: number) => {
 const toolCallsTotal = TOP_TOOLS.reduce((sum, row) => sum + row.calls, 0);
 
 export const AllVariants: Story = () => (
-  <div className="chart-canvas mx-auto max-w-[1600px] p-8">
-    <GridFx />
+  <div className="mx-auto max-w-[1600px] p-8">
     <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
       <ChartCard palette="magenta" kicker="Last 7d" title="Top tools" description="Ranked · magenta ramp">
         <Stat value={fmtK(toolCallsTotal)} unit="calls" delta={{ value: 12.4, direction: "up" }} />

package/src/stories/donut-chart.stories.tsx

@@ -2,7 +2,6 @@ import type { Story } from "@ladle/react";
 
 import { ChartCard } from "../components/chart-card";
 import { DonutChart } from "../components/donut-chart";
-import { GridFx } from "../components/grid-fx";
 import { Stat } from "../components/stat";
 
 export default { title: "Charts/Donut Chart" };
@@ -73,8 +72,7 @@ const fmtK = (value: number) => {
 const clientsTotal = clients.reduce((sum, row) => sum + row.sessions, 0);
 
 export const AllVariants: Story = () => (
-  <div className="chart-canvas mx-auto max-w-[1600px] p-8">
-    <GridFx />
+  <div className="mx-auto max-w-[1600px] p-8">
     <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
       <ChartCard palette="magenta" kicker="Last 7d" title="Sessions by client" description="Donut · share readout">
         <Stat value={fmtK(clientsTotal)} unit="sessions" delta={{ value: 6.2, direction: "up" }} />

package/src/stories/heatmap-chart.stories.tsx

@@ -1,7 +1,6 @@
 import type { Story } from "@ladle/react";
 
 import { ChartCard } from "../components/chart-card";
-import { GridFx } from "../components/grid-fx";
 import { HeatmapChart } from "../components/heatmap-chart";
 
 export default { title: "Charts/Heatmap" };
@@ -40,8 +39,7 @@ const HOURS = Array.from({ length: 24 }, (_, hour) => String(hour).padStart(2, "
 const nf = (value: number) => value.toLocaleString("en-US");
 
 export const AllVariants: Story = () => (
-  <div className="chart-canvas mx-auto max-w-[1600px] p-8">
-    <GridFx />
+  <div className="mx-auto max-w-[1600px] p-8">
     <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
       <ChartCard palette="magenta" accent="left" kicker="Last 7d" title="Activity" description="Square · hour × day">
         <HeatmapChart

package/src/stories/line-chart.stories.tsx

@@ -1,7 +1,6 @@
 import type { Story } from "@ladle/react";
 
 import { ChartCard } from "../components/chart-card";
-import { GridFx } from "../components/grid-fx";
 import { LineChart } from "../components/line-chart";
 import { Stat } from "../components/stat";
 
@@ -64,8 +63,7 @@ const tokensSpark = tokens.map((row) => row.v);
 const latencyPeak = latency.reduce((best, row) => (row.p95 > best.p95 ? row : best));
 
 export const AllVariants: Story = () => (
-  <div className="chart-canvas mx-auto max-w-[1600px] p-8">
-    <GridFx />
+  <div className="mx-auto max-w-[1600px] p-8">
     <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
       <ChartCard
         palette="cyan"

package/src/stories/wizard.stories.tsx

@@ -1,18 +1,36 @@
 import type { Story } from "@ladle/react";
 import { useState } from "react";
 
-import { WizardProgress, type WizardStep, WizardSteps } from "../components/wizard";
+import { TabsNav, TabsNavList, TabsNavTrigger } from "../components/tabs";
+import { WizardProgress } from "../components/wizard";
 
 const SECTION_HEADER = "type-text-xs font-medium text-muted-foreground uppercase tracking-wide pt-4";
 
-const steps: WizardStep[] = [
+const steps = [
   { id: "overview", label: "Overview" },
   { id: "branding", label: "Branding & metadata" },
   { id: "auth", label: "Authentication" },
   { id: "tools", label: "Tools & test cases" },
-  { id: "review", label: "Review & submit" },
+  { id: "review", label: "Review & export" },
 ];
 
+/** The step rail is a vertical `TabsNav` composed with the consumer's selection state. */
+function StepRail({ activeIdx, onSelect }: { activeIdx: number; onSelect: (idx: number) => void }) {
+  return (
+    <TabsNav orientation="vertical" aria-label="Submission steps">
+      <TabsNavList>
+        {steps.map((step, idx) => (
+          <TabsNavTrigger key={step.id} active={idx === activeIdx} asChild>
+            <button type="button" onClick={() => onSelect(idx)} className="w-full justify-start text-left">
+              {step.label}
+            </button>
+          </TabsNavTrigger>
+        ))}
+      </TabsNavList>
+    </TabsNav>
+  );
+}
+
 export const AllVariants: Story = () => {
   const [activeIdx, setActiveIdx] = useState(1);
 
@@ -23,7 +41,7 @@ export const AllVariants: Story = () => {
         <p className={SECTION_HEADER}>Full rail — steps + progress</p>
         <div className="mt-4 flex gap-6">
           <aside className="basis-56 shrink-0 flex flex-col gap-4 self-start">
-            <WizardSteps steps={steps} activeIdx={activeIdx} onSelect={setActiveIdx} ariaLabel="Submission steps" />
+            <StepRail activeIdx={activeIdx} onSelect={setActiveIdx} />
             <WizardProgress current={activeIdx + 1} total={steps.length} />
           </aside>
           <div className="flex-1 rounded-md border p-4">
@@ -36,7 +54,7 @@ export const AllVariants: Story = () => {
       <div>
         <p className={SECTION_HEADER}>Steps only</p>
         <div className="mt-4 max-w-56">
-          <WizardSteps steps={steps} activeIdx={activeIdx} onSelect={setActiveIdx} />
+          <StepRail activeIdx={activeIdx} onSelect={setActiveIdx} />
         </div>
       </div>
 

package/src/styles/tokens.css

@@ -447,51 +447,6 @@
   }
 }
 
-/* ─── Chart canvas — control-room atmosphere for analytics surfaces ───────────
-   Apply `.chart-canvas` to a dashboard/page container holding chart cards: a
-   dotted grid faded from the top, plus a dual brand glow in dark mode. The grid
-   is masked away so it never bleeds into the cards stacked above it. */
-
-.chart-canvas {
-  position: relative;
-  isolation: isolate;
-}
-
-.chart-canvas::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background-image:
-    linear-gradient(var(--color-sidebar-border) 1px, transparent 1px),
-    linear-gradient(90deg, var(--color-sidebar-border) 1px, transparent 1px);
-  background-size:
-    46px 46px,
-    46px 46px;
-  opacity: 0.65;
-  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 100%);
-  mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 100%);
-}
-
-.dark .chart-canvas::before {
-  background-image:
-    radial-gradient(
-      900px 480px at 78% -8%,
-      color-mix(in oklab, var(--color-cta-accent) 12%, transparent),
-      transparent 60%
-    ),
-    radial-gradient(820px 520px at 8% 4%, color-mix(in oklab, var(--color-primary) 12%, transparent), transparent 60%),
-    linear-gradient(var(--color-sidebar-border) 1px, transparent 1px),
-    linear-gradient(90deg, var(--color-sidebar-border) 1px, transparent 1px);
-  background-size:
-    100% 100%,
-    100% 100%,
-    46px 46px,
-    46px 46px;
-  opacity: 0.6;
-}
-
 @media (prefers-reduced-motion: no-preference) {
   .chart-rise {
     animation: chart-rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both;

package/dist/components/grid-fx.d.mts

@@ -1,13 +0,0 @@
-import * as React$1 from "react";
-
-//#region src/components/grid-fx.d.ts
-declare function GridFx({
-  className,
-  cellSize,
-  style,
-  ...props
-}: React$1.ComponentProps<"canvas"> & {
-  cellSize?: number;
-}): React$1.JSX.Element | null;
-//#endregion
-export { GridFx };

package/dist/components/grid-fx.mjs

@@ -1,188 +0,0 @@
-"use client";
-import { cn } from "../lib/cn.mjs";
-import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
-import { jsx } from "react/jsx-runtime";
-import * as React$1 from "react";
-//#region src/components/grid-fx.tsx
-const CELL_SIZE = 46;
-const TTL_MIN = 42;
-const TTL_MAX = 78;
-const SPAWN_MIN = 180;
-const SPAWN_MAX = 480;
-const rand = (min, max) => min + Math.random() * (max - min);
-function resolveColors(element) {
-	const styles = getComputedStyle(element);
-	return {
-		color: styles.getPropertyValue("--color-primary").trim() || "#e90060",
-		colorHi: styles.getPropertyValue("--color-primary-hover").trim() || "#f22b79"
-	};
-}
-function strokeFull(ctx, horiz, at, width, height) {
-	ctx.beginPath();
-	if (horiz) {
-		ctx.moveTo(0, at);
-		ctx.lineTo(width, at);
-	} else {
-		ctx.moveTo(at, 0);
-		ctx.lineTo(at, height);
-	}
-	ctx.stroke();
-}
-function drawGlitchLine(ctx, line, width, height) {
-	const { horiz, at, color, colorHi } = line;
-	const span = horiz ? width : height;
-	const progress = line.life / line.ttl;
-	const envelope = progress < .08 ? progress / .08 : 1 - (progress - .08) / .92;
-	const base = Math.max(0, envelope);
-	ctx.lineCap = "round";
-	const ghosts = [
-		{
-			offset: 0,
-			alpha: .85,
-			blur: 12
-		},
-		{
-			offset: rand(-3, 3),
-			alpha: .35,
-			blur: 0
-		},
-		{
-			offset: rand(-7, 7),
-			alpha: .2,
-			blur: 0
-		}
-	];
-	for (const ghost of ghosts) {
-		ctx.globalAlpha = base * ghost.alpha * (Math.random() < .1 ? .3 : 1);
-		ctx.strokeStyle = color;
-		ctx.lineWidth = 1.5;
-		ctx.shadowBlur = ghost.blur;
-		ctx.shadowColor = color;
-		strokeFull(ctx, horiz, at + ghost.offset, width, height);
-	}
-	if (Math.random() < .5) {
-		ctx.globalAlpha = base * .6;
-		ctx.lineWidth = 2;
-		ctx.shadowBlur = 0;
-		ctx.strokeStyle = colorHi;
-		for (let segment = 0; segment < 3; segment++) {
-			const start = rand(0, span * .85);
-			const end = start + rand(20, 80);
-			const jitter = rand(-4, 4);
-			ctx.beginPath();
-			if (horiz) {
-				ctx.moveTo(start, at + jitter);
-				ctx.lineTo(end, at + jitter);
-			} else {
-				ctx.moveTo(at + jitter, start);
-				ctx.lineTo(at + jitter, end);
-			}
-			ctx.stroke();
-		}
-	}
-}
-function GridFx({ className, cellSize = CELL_SIZE, style, ...props }) {
-	const reduced = useReducedMotion();
-	const canvasRef = React$1.useRef(null);
-	React$1.useEffect(() => {
-		if (reduced) return;
-		const canvas = canvasRef.current;
-		const parent = canvas?.parentElement;
-		const ctx = canvas?.getContext("2d");
-		if (!canvas || !parent || !ctx) return;
-		let width = 0;
-		let height = 0;
-		let dpr = 1;
-		let frame = 0;
-		let nextIn = rand(SPAWN_MIN, SPAWN_MAX);
-		let onScreen = true;
-		const lines = [];
-		const resize = () => {
-			dpr = Math.min(window.devicePixelRatio || 1, 2);
-			width = parent.clientWidth;
-			height = parent.clientHeight;
-			canvas.width = width * dpr;
-			canvas.height = height * dpr;
-			ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-		};
-		const spawn = () => {
-			const horiz = Math.random() < .5;
-			const tracks = Math.ceil((horiz ? height : width) / cellSize);
-			const { color, colorHi } = resolveColors(canvas);
-			lines.push({
-				horiz,
-				at: Math.floor(Math.random() * tracks) * cellSize + .5,
-				life: 0,
-				ttl: rand(TTL_MIN, TTL_MAX),
-				color,
-				colorHi
-			});
-		};
-		const tick = () => {
-			ctx.globalAlpha = 1;
-			ctx.shadowBlur = 0;
-			ctx.clearRect(0, 0, width, height);
-			if (--nextIn <= 0) {
-				spawn();
-				nextIn = rand(SPAWN_MIN, SPAWN_MAX);
-			}
-			for (let index = lines.length - 1; index >= 0; index--) {
-				const line = lines[index];
-				if (!line) continue;
-				line.life++;
-				drawGlitchLine(ctx, line, width, height);
-				if (line.life >= line.ttl) lines.splice(index, 1);
-			}
-			ctx.globalAlpha = 1;
-			ctx.shadowBlur = 0;
-			frame = requestAnimationFrame(tick);
-		};
-		const running = () => onScreen && document.visibilityState === "visible";
-		const start = () => {
-			if (!frame && running()) frame = requestAnimationFrame(tick);
-		};
-		const stop = () => {
-			if (frame) cancelAnimationFrame(frame);
-			frame = 0;
-			ctx.clearRect(0, 0, width, height);
-		};
-		resize();
-		start();
-		const resizeObserver = new ResizeObserver(() => resize());
-		resizeObserver.observe(parent);
-		const intersectionObserver = new IntersectionObserver(([entry]) => {
-			if (!entry) return;
-			onScreen = entry.isIntersecting;
-			if (onScreen) start();
-			else stop();
-		});
-		intersectionObserver.observe(canvas);
-		const onVisibility = () => {
-			if (running()) start();
-			else stop();
-		};
-		document.addEventListener("visibilitychange", onVisibility);
-		return () => {
-			stop();
-			resizeObserver.disconnect();
-			intersectionObserver.disconnect();
-			document.removeEventListener("visibilitychange", onVisibility);
-		};
-	}, [reduced, cellSize]);
-	if (reduced) return null;
-	return /* @__PURE__ */ jsx("canvas", {
-		ref: canvasRef,
-		"aria-hidden": true,
-		"data-slot": "grid-fx",
-		className: cn("pointer-events-none absolute inset-0 h-full w-full", className),
-		style: {
-			zIndex: -1,
-			WebkitMaskImage: "radial-gradient(120% 95% at 50% 0%, #000 30%, transparent 100%)",
-			maskImage: "radial-gradient(120% 95% at 50% 0%, #000 30%, transparent 100%)",
-			...style
-		},
-		...props
-	});
-}
-//#endregion
-export { GridFx };