@ponti-studios/ui 1.6.0 → 1.7.0

package/src/components/layout/particle-background.tsx

@@ -0,0 +1,378 @@
+"use client";
+
+import * as React from "react";
+
+import { useMediaQuery } from "../../hooks/use-media-query";
+import { cn } from "../../lib/utils";
+
+interface Particle {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  opacity: number;
+  depth: number;
+  twinklePhase: number;
+  twinkleSpeed: number;
+}
+
+export interface ParticleBackgroundPalette {
+  particle: string;
+  link: string;
+}
+
+export interface ParticleBackgroundProps extends React.ComponentProps<"div"> {
+  enabled?: boolean;
+  interactive?: boolean;
+  particleCount?: number;
+  particleDensity?: number;
+  maxLinkDistance?: number;
+  attractRadius?: number;
+  attractStrength?: number;
+  velocity?: number;
+  showGradient?: boolean;
+  palette?: ParticleBackgroundPalette;
+}
+
+const DEFAULT_PARTICLE_COUNT = 320;
+const DEFAULT_PARTICLE_DENSITY = 2800;
+const DEFAULT_LINK_DISTANCE = 90;
+const DEFAULT_ATTRACT_STRENGTH = 0.003;
+const DEFAULT_ATTRACT_RADIUS = 150;
+const DEFAULT_VELOCITY = 0.06;
+const PARALLAX_STRENGTH = 0.015;
+const TWINKLE_MIN_SPEED = 0.0002;
+const TWINKLE_MAX_SPEED = 0.0008;
+const PARTICLE_BASE_OPACITY = 0.2;
+
+const DEFAULT_PALETTE = {
+  particle: "15,23,42",
+  link: "15,23,42",
+};
+
+function readCssVar(name: string, fallback: string) {
+  if (typeof window === "undefined") return fallback;
+  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return value || fallback;
+}
+
+function toRgbTriplet(color: string): string {
+  if (color.startsWith("#")) {
+    let hex = color.slice(1);
+    if (hex.length === 3) {
+      hex = hex
+        .split("")
+        .map((c) => c + c)
+        .join("");
+    }
+    const num = Number.parseInt(hex, 16);
+    return `${(num >> 16) & 255},${(num >> 8) & 255},${num & 255}`;
+  }
+
+  const match = color.match(/rgba?\(([^)]+)\)/);
+  if (match) {
+    return match[1]
+      .split(",")
+      .slice(0, 3)
+      .map((part) => part.trim())
+      .join(",");
+  }
+
+  return DEFAULT_PALETTE.particle;
+}
+
+function useThemePalette(): ParticleBackgroundPalette {
+  const [palette, setPalette] = React.useState<ParticleBackgroundPalette>(DEFAULT_PALETTE);
+
+  React.useEffect(() => {
+    const resolve = () => {
+      const accent = toRgbTriplet(readCssVar("--color-primary", "#0969da"));
+      const foreground = toRgbTriplet(readCssVar("--color-foreground", "#25292e"));
+      setPalette({ particle: accent, link: foreground });
+    };
+
+    resolve();
+
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    media.addEventListener("change", resolve);
+
+    return () => {
+      media.removeEventListener("change", resolve);
+    };
+  }, []);
+
+  return palette;
+}
+
+function useResolvedTheme() {
+  const [resolvedTheme, setResolvedTheme] = React.useState<"light" | "dark">("light");
+
+  React.useEffect(() => {
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const resolve = () => setResolvedTheme(media.matches ? "dark" : "light");
+
+    resolve();
+    media.addEventListener("change", resolve);
+
+    return () => {
+      media.removeEventListener("change", resolve);
+    };
+  }, []);
+
+  return resolvedTheme;
+}
+
+/** Animated canvas background of drifting, linked particles. Skips rendering under `prefers-reduced-motion`. */
+export function ParticleBackground({
+  className,
+  enabled = true,
+  interactive = true,
+  particleCount,
+  particleDensity = DEFAULT_PARTICLE_DENSITY,
+  maxLinkDistance = DEFAULT_LINK_DISTANCE,
+  attractRadius = DEFAULT_ATTRACT_RADIUS,
+  attractStrength = DEFAULT_ATTRACT_STRENGTH,
+  velocity = DEFAULT_VELOCITY,
+  showGradient: _showGradient = true,
+  palette,
+  ...props
+}: ParticleBackgroundProps) {
+  const prefersReduced = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+  const mouse = React.useRef({ x: -9999, y: -9999 });
+  const particles = React.useRef<Particle[]>([]);
+  const raf = React.useRef<number>(0);
+  const scrollOffset = React.useRef(typeof window === "undefined" ? 0 : window.scrollY);
+  const resolvedTheme = useResolvedTheme();
+  const themePalette = useThemePalette();
+  const resolvedPalette = palette ?? themePalette;
+
+  React.useEffect(() => {
+    if (prefersReduced || !enabled) return;
+
+    const canvasEl = canvasRef.current;
+    if (!canvasEl) return;
+
+    const ctx = canvasEl.getContext("2d");
+    if (!ctx) return;
+
+    const canvas = canvasEl;
+    const context = ctx;
+
+    function resize() {
+      const rect = canvas.getBoundingClientRect();
+      const dpr = window.devicePixelRatio || 1;
+
+      canvas.width = Math.max(1, Math.round(rect.width * dpr));
+      canvas.height = Math.max(1, Math.round(rect.height * dpr));
+      context.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+      const targetCount =
+        particleCount ??
+        Math.max(
+          80,
+          Math.min(
+            DEFAULT_PARTICLE_COUNT,
+            Math.round((rect.width * rect.height) / particleDensity),
+          ),
+        );
+
+      particles.current = Array.from({ length: targetCount }, () => {
+        const depth = Math.random();
+
+        return {
+          x: Math.random() * rect.width,
+          y: Math.random() * rect.height,
+          vx: (Math.random() - 0.5) * velocity * (0.4 + depth * 0.8),
+          vy: (Math.random() - 0.5) * velocity * (0.4 + depth * 0.8),
+          opacity: PARTICLE_BASE_OPACITY * (0.5 + depth * 0.5),
+          depth,
+          twinklePhase: Math.random() * Math.PI * 2,
+          twinkleSpeed: TWINKLE_MIN_SPEED + Math.random() * (TWINKLE_MAX_SPEED - TWINKLE_MIN_SPEED),
+        };
+      });
+    }
+
+    let isRunning = false;
+    let inView = true;
+    let tabVisible = !document.hidden;
+    const renderPositions: { x: number; y: number }[] = [];
+
+    function draw(time: number) {
+      const width = canvas.clientWidth;
+      const height = canvas.clientHeight;
+
+      context.clearRect(0, 0, width, height);
+      context.lineCap = "round";
+
+      const ps = particles.current;
+      const parallaxY = scrollOffset.current * PARALLAX_STRENGTH;
+
+      for (let i = 0; i < ps.length; i++) {
+        const p = ps[i];
+
+        const mdx = mouse.current.x - p.x;
+        const mdy = mouse.current.y - p.y;
+        const mdist = Math.sqrt(mdx * mdx + mdy * mdy);
+
+        if (interactive && mdist < attractRadius) {
+          const force = (1 - mdist / attractRadius) * attractStrength;
+          p.vx += mdx * force;
+          p.vy += mdy * force;
+        }
+
+        p.vx *= 0.98;
+        p.vy *= 0.98;
+
+        p.x += p.vx;
+        p.y += p.vy;
+
+        if (p.x < 0) p.x = width;
+        if (p.x > width) p.x = 0;
+        if (p.y < 0) p.y = height;
+        if (p.y > height) p.y = 0;
+
+        const renderY = (((p.y + parallaxY * p.depth) % height) + height) % height;
+        renderPositions[i] = { x: p.x, y: renderY };
+
+        const twinkle = 0.6 + 0.4 * Math.sin(time * p.twinkleSpeed + p.twinklePhase);
+        const radius = 0.6 + p.depth * 1.4;
+
+        context.beginPath();
+        context.arc(p.x, renderY, radius, 0, Math.PI * 2);
+        context.fillStyle = `rgba(${resolvedPalette.particle},${p.opacity * twinkle})`;
+        context.fill();
+
+        for (let j = i + 1; j < ps.length; j++) {
+          const q = ps[j];
+          const qRender = renderPositions[j] ?? { x: q.x, y: q.y };
+          const dx = p.x - q.x;
+          const dy = renderY - qRender.y;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+
+          if (dist < maxLinkDistance) {
+            const depthFactor = (p.depth + q.depth) / 2;
+
+            // Links are more transparent in dark mode to reduce contrast and visual noise, and slightly more opaque in light mode to add some subtlety.
+            const alpha =
+              (1 - dist / maxLinkDistance) *
+              (resolvedTheme === "dark" ? 0.015 : 0.01) *
+              depthFactor;
+            context.beginPath();
+            context.moveTo(p.x, renderY);
+            context.lineTo(qRender.x, qRender.y);
+            context.strokeStyle = `rgba(${resolvedPalette.link},${alpha})`;
+            context.lineWidth = 0.5;
+            context.stroke();
+          }
+        }
+      }
+
+      if (isRunning) {
+        raf.current = requestAnimationFrame(draw);
+      }
+    }
+
+    function syncRunning() {
+      const shouldRun = inView && tabVisible;
+
+      if (shouldRun && !isRunning) {
+        isRunning = true;
+        raf.current = requestAnimationFrame(draw);
+      } else if (!shouldRun && isRunning) {
+        isRunning = false;
+        cancelAnimationFrame(raf.current);
+      }
+    }
+
+    // Resizing the canvas element clears its pixels, so repaint a frame
+    // whenever the loop isn't already running to redraw for it.
+    function handleResize() {
+      resize();
+      if (!isRunning) {
+        draw(performance.now());
+      }
+    }
+
+    const ro = new ResizeObserver(handleResize);
+    ro.observe(canvas);
+    resize();
+    // Paint one frame immediately so the canvas is never left blank while
+    // waiting on the intersection/visibility observers to report in.
+    draw(performance.now());
+    syncRunning();
+
+    const onMouseMove = (event: MouseEvent) => {
+      const rect = canvas.getBoundingClientRect();
+      mouse.current = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    };
+
+    const onMouseLeave = () => {
+      mouse.current = { x: -9999, y: -9999 };
+    };
+
+    if (interactive) {
+      canvas.addEventListener("mousemove", onMouseMove);
+      canvas.addEventListener("mouseleave", onMouseLeave);
+      document.addEventListener("mousemove", onMouseMove);
+    }
+
+    const onScroll = () => {
+      scrollOffset.current = window.scrollY;
+    };
+
+    window.addEventListener("scroll", onScroll, { passive: true });
+
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        inView = entry?.isIntersecting ?? true;
+        syncRunning();
+      },
+      { threshold: 0 },
+    );
+    io.observe(canvas);
+
+    const onVisibilityChange = () => {
+      tabVisible = !document.hidden;
+      syncRunning();
+    };
+
+    document.addEventListener("visibilitychange", onVisibilityChange);
+
+    return () => {
+      isRunning = false;
+      cancelAnimationFrame(raf.current);
+      ro.disconnect();
+      io.disconnect();
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      canvas.removeEventListener("mousemove", onMouseMove);
+      canvas.removeEventListener("mouseleave", onMouseLeave);
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, [
+    attractRadius,
+    attractStrength,
+    enabled,
+    interactive,
+    maxLinkDistance,
+    resolvedPalette,
+    particleCount,
+    particleDensity,
+    prefersReduced,
+    resolvedTheme,
+    velocity,
+  ]);
+
+  if (!enabled || prefersReduced) return null;
+
+  return (
+    <div
+      className={cn("pointer-events-none absolute inset-0 overflow-hidden", className)}
+      aria-hidden="true"
+      {...props}
+    >
+      <canvas ref={canvasRef} className="absolute inset-0 h-full w-full" />
+    </div>
+  );
+}

package/src/components/layout/scroll-area.stories.tsx

@@ -25,7 +25,9 @@ export const Default: Story = {
         className="flex size-40 shrink-0 items-center justify-center rounded-lg"
         style={{ backgroundColor: item.bg }}
       >
-        <span className="text-foreground font-medium">{item.label}</span>
+        <span className="font-medium" style={{ color: "#171714" }}>
+          {item.label}
+        </span>
       </div>
     )),
   },
@@ -41,7 +43,9 @@ export const WithSnap: Story = {
         className="flex size-48 shrink-0 items-center justify-center rounded-lg"
         style={{ backgroundColor: item.bg }}
       >
-        <span className="text-foreground font-medium">{item.label}</span>
+        <span className="font-medium" style={{ color: "#171714" }}>
+          {item.label}
+        </span>
       </div>
     )),
   },
@@ -57,7 +61,9 @@ export const Vertical: Story = {
         className="flex h-24 shrink-0 items-center justify-center rounded-lg"
         style={{ backgroundColor: item.bg }}
       >
-        <span className="text-foreground font-medium">{item.label}</span>
+        <span className="font-medium" style={{ color: "#171714" }}>
+          {item.label}
+        </span>
       </div>
     )),
   },
@@ -74,7 +80,9 @@ export const ScreenshotsGallery: Story = {
             className="flex aspect-video w-72 shrink-0 items-center justify-center overflow-hidden rounded-xl border"
             style={{ backgroundColor: item.bg }}
           >
-            <span className="text-foreground text-sm">{item.label}</span>
+            <span className="text-sm" style={{ color: "#171714" }}>
+              {item.label}
+            </span>
           </div>
         ))}
       </ScrollArea>

package/src/components/layout/scroll-area.tsx

@@ -8,14 +8,45 @@ interface ScrollAreaProps extends React.ComponentProps<typeof ScrollAreaPrimitiv
   snap?: "start" | "center" | "none";
 }
 
+/**
+ * Full literal class names, not `snap-${snap}` — Tailwind's scanner only
+ * picks up complete strings present in the source, so an interpolated class
+ * name never generates any CSS.
+ */
+const SNAP_ALIGN_CLASS_NAME = {
+  start: "snap-start",
+  center: "snap-center",
+  none: undefined,
+} as const satisfies Record<NonNullable<ScrollAreaProps["snap"]>, string | undefined>;
+
+/**
+ * Overlay scrollbar: invisible at rest, fades in on hover/scroll and back
+ * out on idle (data-hovering / data-scrolling from Base UI). Opacity-only,
+ * transitions (not keyframes) since hover/scroll toggle rapidly.
+ */
+const scrollbarClassName = cn(
+  "flex touch-none p-0.5 opacity-0 transition-opacity duration-150 ease-out",
+  "data-[hovering]:opacity-100 data-[scrolling]:opacity-100",
+  "data-[orientation=vertical]:w-2.5",
+  "data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col",
+);
+
 const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
   ({ className, children, orientation = "horizontal", snap = "none", ...props }, ref) => {
     return (
-      <ScrollAreaPrimitive.Root ref={ref} className={cn("relative", className)} {...props}>
+      <ScrollAreaPrimitive.Root
+        ref={ref}
+        className={cn(
+          "relative flex overflow-hidden",
+          orientation === "horizontal" ? "flex-row" : "flex-col",
+          className,
+        )}
+        {...props}
+      >
         <ScrollAreaPrimitive.Viewport
           className={cn(
             "scrollbar-hide flex overflow-auto",
-            orientation === "horizontal" ? "flex-row" : "flex-col",
+            orientation === "horizontal" ? "min-w-0 flex-1 flex-row" : "min-h-0 flex-1 flex-col",
             snap !== "none" && (orientation === "horizontal" ? "snap-x" : "snap-y"),
             snap !== "none" && "snap-mandatory",
           )}
@@ -24,13 +55,19 @@ const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
             if (!React.isValidElement(child)) return child;
             return React.cloneElement(child as React.ReactElement<{ className?: string }>, {
               className: cn(
-                snap !== "none" && orientation === "horizontal" && `snap-${snap}`,
-                snap !== "none" && orientation === "vertical" && `snap-${snap}`,
+                SNAP_ALIGN_CLASS_NAME[snap],
                 (child.props as { className?: string }).className,
               ),
             });
           })}
         </ScrollAreaPrimitive.Viewport>
+        <ScrollAreaPrimitive.Scrollbar orientation="horizontal" className={scrollbarClassName}>
+          <ScrollAreaPrimitive.Thumb className="bg-foreground/40 hover:bg-foreground/60 relative flex-1 rounded-full transition-colors duration-150 ease" />
+        </ScrollAreaPrimitive.Scrollbar>
+        <ScrollAreaPrimitive.Scrollbar orientation="vertical" className={scrollbarClassName}>
+          <ScrollAreaPrimitive.Thumb className="bg-foreground/40 hover:bg-foreground/60 relative flex-1 rounded-full transition-colors duration-150 ease" />
+        </ScrollAreaPrimitive.Scrollbar>
+        <ScrollAreaPrimitive.Corner />
       </ScrollAreaPrimitive.Root>
     );
   },

package/src/components/navigation/tabs.stories.tsx

@@ -32,27 +32,6 @@ export const Default: Story = {
   ),
 };
 
-export const LineVariant: Story = {
-  render: () => (
-    <Tabs defaultValue="tab1" className="w-[400px]">
-      <TabsList className="border-x-0 border-t-0 bg-transparent">
-        <TabsTrigger value="tab1">Overview</TabsTrigger>
-        <TabsTrigger value="tab2">Analytics</TabsTrigger>
-        <TabsTrigger value="tab3">Reports</TabsTrigger>
-      </TabsList>
-      <TabsContent value="tab1">
-        <p className="text-muted-foreground p-4 text-sm">Overview content</p>
-      </TabsContent>
-      <TabsContent value="tab2">
-        <p className="text-muted-foreground p-4 text-sm">Analytics content</p>
-      </TabsContent>
-      <TabsContent value="tab3">
-        <p className="text-muted-foreground p-4 text-sm">Reports content</p>
-      </TabsContent>
-    </Tabs>
-  ),
-};
-
 export const Vertical: Story = {
   render: () => (
     <Tabs defaultValue="tab1" orientation="vertical" className="w-[400px]">

package/src/components/overlays/dialog.stories.tsx

@@ -5,6 +5,7 @@ import { booleanControl, hiddenControl } from "../../storybook/controls";
 import { Button } from "../primitives/button";
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -103,9 +104,45 @@ export const WithCloseButton: Story = {
           <DialogDescription>Are you sure you want to proceed?</DialogDescription>
         </DialogHeader>
         <DialogFooter>
-          <Button>Confirm</Button>
+          <DialogClose asChild>
+            <Button>Confirm</Button>
+          </DialogClose>
         </DialogFooter>
       </DialogContent>
     </DialogPreview>
   ),
 };
+
+/**
+ * `alert` swaps in Base UI's AlertDialog primitive: `role="alertdialog"`,
+ * forced modal, and no dismiss via outside click or Escape. Use it for
+ * confirmations that need explicit acknowledgment (destructive actions,
+ * unsaved-changes warnings). The close (X) button is off by default in this
+ * mode — dismissal should go through an explicit action.
+ */
+export const Alert: Story = {
+  render: () => (
+    <Dialog alert>
+      <DialogTrigger asChild>
+        <Button variant="outline">Delete account</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Are you absolutely sure?</DialogTitle>
+          <DialogDescription>
+            This action cannot be undone. This will permanently delete your account and remove your
+            data from our servers.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <DialogClose asChild>
+            <Button>Continue</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};

package/src/components/overlays/dialog.tsx

@@ -1,11 +1,47 @@
+"use client";
+
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import { XIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "../../lib/utils";
 
-function Dialog({ ...props }: React.ComponentProps<typeof BaseDialog.Root>) {
-  return <BaseDialog.Root {...props} />;
+/**
+ * Whether the nearest ancestor `<Dialog alert>` is in alert mode. Every part
+ * below (`DialogContent`, etc.) reads this instead of taking its own `alert`
+ * prop, so the mode only has to be set once, at the root.
+ */
+const DialogAlertContext = React.createContext(false);
+
+/**
+ * `alert: true` swaps the root primitive for Base UI's `AlertDialog.Root`:
+ * `role="alertdialog"`, forced `modal`, and no dismiss via outside click or
+ * Escape — for confirmations that need explicit acknowledgment. Every other
+ * part (`Trigger`, `Popup`, `Close`, `Title`, `Description`, ...) is a plain
+ * re-export shared by both Base UI primitives, so only the root needs to
+ * branch; `DialogContent` reads `DialogAlertContext` to default its close
+ * button off in alert mode.
+ */
+function Dialog({
+  alert = false,
+  modal,
+  disablePointerDismissal,
+  ...props
+}: Omit<React.ComponentProps<typeof BaseDialog.Root>, "handle"> & { alert?: boolean }) {
+  return (
+    <DialogAlertContext value={alert}>
+      {alert ? (
+        <BaseAlertDialog.Root {...props} />
+      ) : (
+        <BaseDialog.Root
+          modal={modal}
+          disablePointerDismissal={disablePointerDismissal}
+          {...props}
+        />
+      )}
+    </DialogAlertContext>
+  );
 }
 
 function DialogTrigger({
@@ -62,36 +98,41 @@ function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Base
   return (
     <BaseDialog.Backdrop
       data-slot="dialog-overlay"
-      className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 transition-opacity",
-        className,
-      )}
+      className={cn("fixed inset-0 z-50 bg-black/80", className)}
       {...props}
     />
   );
 }
 
+/**
+ * Flush to the bottom edge as a sheet on mobile, centered as a card from
+ * `sm` up. Animation (slide-up on mobile, fade/zoom on desktop) is driven by
+ * [data-slot="dialog-content"] rules in animations.css, not by this class.
+ */
+const dialogContentClassName =
+  "bg-popover text-popover-foreground fixed inset-x-0 bottom-0 z-50 grid max-h-[90dvh] w-full gap-6 overflow-y-auto rounded-t-xl border p-4 outline-none sm:top-[50%] sm:bottom-auto sm:left-[50%] sm:w-[calc(100%-2rem)] sm:max-w-[30rem] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:p-6";
+
 function DialogContent({
   className,
   children,
-  showCloseButton = true,
+  showCloseButton,
   ...props
 }: React.ComponentProps<typeof BaseDialog.Popup> & {
   showCloseButton?: boolean;
 }) {
+  const isAlert = React.useContext(DialogAlertContext);
+  const shouldShowClose = showCloseButton ?? !isAlert;
+
   return (
     <BaseDialog.Portal data-slot="dialog-portal">
       <DialogOverlay />
       <BaseDialog.Popup
         data-slot="dialog-content"
-        className={cn(
-          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid max-h-[90dvh] w-[calc(100%-2rem)] max-w-[30rem] translate-x-[-50%] translate-y-[-50%] gap-6 overflow-y-auto rounded-lg border p-4 duration-200 outline-none sm:p-6",
-          className,
-        )}
+        className={cn(dialogContentClassName, className)}
         {...props}
       >
         {children}
-        {showCloseButton && (
+        {shouldShowClose && (
           <BaseDialog.Close
             data-slot="dialog-close"
             className="text-muted-foreground hover:bg-muted hover:text-muted-foreground focus-visible:outline-ring absolute top-3 right-3 inline-flex size-9 items-center justify-center rounded-md border border-transparent opacity-100 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none sm:top-4 sm:right-4 [&_svg]:pointer-events-none [&_svg]:size-4.5 [&_svg]:shrink-0"

package/src/components/overlays/index.ts

@@ -1,14 +1,3 @@
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "./alert-dialog";
 export {
   Command,
   CommandDialog,