@ponti-studios/ui 2.0.1 → 3.0.0

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

@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { ParticleBackground } from "./particle-background";
-
-const meta = {
-  title: "Layout/ParticleBackground",
-  component: ParticleBackground,
-  tags: ["autodocs"],
-} satisfies Meta<typeof ParticleBackground>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <div className="bg-background relative h-80 w-[640px] overflow-hidden">
-      <ParticleBackground {...args} />
-    </div>
-  ),
-};
-
-export const Static: Story = {
-  args: { interactive: false },
-  render: (args) => (
-    <div className="bg-background relative h-80 w-[640px] overflow-hidden">
-      <ParticleBackground {...args} />
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  args: { enabled: false },
-  render: (args) => (
-    <div className="bg-background relative h-80 w-[640px] overflow-hidden">
-      <ParticleBackground {...args} />
-    </div>
-  ),
-};

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

@@ -1,378 +0,0 @@
-"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

@@ -1,91 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ScrollArea } from "./scroll-area";
-
-const meta = {
-  title: "Layout/ScrollArea",
-  component: ScrollArea,
-  tags: ["autodocs"],
-} satisfies Meta<typeof ScrollArea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const placeholderItems = Array.from({ length: 8 }, (_, i) => ({
-  id: i + 1,
-  label: `Item ${i + 1}`,
-  bg: `hsl(${i * 45}, 70%, 80%)`,
-}));
-
-export const Default: Story = {
-  args: {
-    className: "gap-4 p-4 max-w-lg",
-    children: placeholderItems.map((item) => (
-      <div
-        key={item.id}
-        className="flex size-40 shrink-0 items-center justify-center rounded-lg"
-        style={{ backgroundColor: item.bg }}
-      >
-        <span className="font-medium" style={{ color: "#171714" }}>
-          {item.label}
-        </span>
-      </div>
-    )),
-  },
-};
-
-export const WithSnap: Story = {
-  args: {
-    className: "gap-4 p-4 max-w-lg",
-    snap: "start",
-    children: placeholderItems.map((item) => (
-      <div
-        key={item.id}
-        className="flex size-48 shrink-0 items-center justify-center rounded-lg"
-        style={{ backgroundColor: item.bg }}
-      >
-        <span className="font-medium" style={{ color: "#171714" }}>
-          {item.label}
-        </span>
-      </div>
-    )),
-  },
-};
-
-export const Vertical: Story = {
-  args: {
-    orientation: "vertical",
-    className: "gap-3 p-4 max-h-64",
-    children: placeholderItems.map((item) => (
-      <div
-        key={item.id}
-        className="flex h-24 shrink-0 items-center justify-center rounded-lg"
-        style={{ backgroundColor: item.bg }}
-      >
-        <span className="font-medium" style={{ color: "#171714" }}>
-          {item.label}
-        </span>
-      </div>
-    )),
-  },
-};
-
-export const ScreenshotsGallery: Story = {
-  render: () => (
-    <div className="flex max-w-2xl flex-col gap-3">
-      <h2 className="text-lg font-semibold">Screenshots</h2>
-      <ScrollArea className="gap-4" snap="start">
-        {placeholderItems.map((item) => (
-          <div
-            key={item.id}
-            className="flex aspect-video w-72 shrink-0 items-center justify-center overflow-hidden rounded-xl border"
-            style={{ backgroundColor: item.bg }}
-          >
-            <span className="text-sm" style={{ color: "#171714" }}>
-              {item.label}
-            </span>
-          </div>
-        ))}
-      </ScrollArea>
-    </div>
-  ),
-};

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

@@ -1,79 +0,0 @@
-import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-interface ScrollAreaProps extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> {
-  orientation?: "horizontal" | "vertical";
-  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 flex overflow-hidden",
-          orientation === "horizontal" ? "flex-row" : "flex-col",
-          className,
-        )}
-        {...props}
-      >
-        <ScrollAreaPrimitive.Viewport
-          className={cn(
-            "scrollbar-hide flex overflow-auto",
-            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",
-          )}
-        >
-          {React.Children.map(children, (child) => {
-            if (!React.isValidElement(child)) return child;
-            return React.cloneElement(child as React.ReactElement<{ className?: string }>, {
-              className: cn(
-                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>
-    );
-  },
-);
-
-ScrollArea.displayName = "ScrollArea";
-
-export { ScrollArea };
-export type { ScrollAreaProps };

package/src/components/layout/section-intro.stories.tsx

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Button } from "../primitives/button";
-import { SectionIntro } from "./section-intro";
-
-const meta = {
-  title: "Layout/SectionIntro",
-  component: SectionIntro,
-  tags: ["autodocs"],
-} satisfies Meta<typeof SectionIntro>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    title: "Accounts",
-    description: "Connect and manage the accounts you track.",
-  },
-};
-
-export const WithEyebrowAndActions: Story = {
-  args: {
-    eyebrow: "Settings",
-    title: "Security",
-    description: "Manage how you sign in and keep your account secure.",
-    actions: <Button variant="outline">Add passkey</Button>,
-  },
-};

package/src/components/layout/section-intro.tsx

@@ -1,31 +0,0 @@
-import type { ReactNode } from "react";
-
-export interface SectionIntroProps {
-  eyebrow?: ReactNode;
-  title: ReactNode;
-  description?: ReactNode;
-  actions?: ReactNode;
-}
-
-/**
- * Page-level heading composition: eyebrow label, title, description, and an
- * optional trailing actions slot.
- */
-export function SectionIntro({ eyebrow, title, description, actions }: SectionIntroProps) {
-  return (
-    <div className="flex items-start justify-between gap-6">
-      <div className="min-w-0 flex-1">
-        {eyebrow ? (
-          <div className="text-muted-foreground mb-3 text-[11px] font-medium tracking-[0.18em] uppercase">
-            {eyebrow}
-          </div>
-        ) : null}
-        <div className="space-y-3">
-          <h1 className="text-2xl text-foreground font-semibold tracking-tight">{title}</h1>
-          {description ? <p className="text-muted-foreground text-sm">{description}</p> : null}
-        </div>
-      </div>
-      {actions ? <div className="shrink-0">{actions}</div> : null}
-    </div>
-  );
-}

package/src/components/layout/surface-panel.stories.tsx

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { SurfacePanel } from "./surface-panel";
-
-const meta = {
-  title: "Layout/SurfacePanel",
-  component: SurfacePanel,
-  tags: ["autodocs"],
-} satisfies Meta<typeof SurfacePanel>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <div className="w-80">
-      <SurfacePanel>
-        <p className="text-muted-foreground text-sm">Panel content goes here.</p>
-      </SurfacePanel>
-    </div>
-  ),
-};
-
-export const AsSection: Story = {
-  render: () => (
-    <div className="w-80">
-      <SurfacePanel as="section" aria-label="Example panel">
-        <p className="text-muted-foreground text-sm">Rendered as a semantic &lt;section&gt;.</p>
-      </SurfacePanel>
-    </div>
-  ),
-};

package/src/components/layout/surface-panel.tsx

@@ -1,23 +0,0 @@
-import type { ComponentPropsWithoutRef, ElementType } from "react";
-
-import { cn } from "../../lib/utils";
-
-type SurfacePanelProps<T extends ElementType = "div"> = { as?: T } & Omit<
-  ComponentPropsWithoutRef<T>,
-  "as"
->;
-
-/** Rounded, bordered surface panel — a generic content container. */
-export function SurfacePanel<T extends ElementType = "div">({
-  as,
-  className,
-  ...props
-}: SurfacePanelProps<T>) {
-  const Component = as ?? "div";
-  return (
-    <Component
-      className={cn("border-border bg-card rounded-3xl border p-5", className)}
-      {...props}
-    />
-  );
-}