@ponti-studios/ui 0.1.2

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

@@ -0,0 +1,83 @@
+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="text-primary font-medium">{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="text-primary font-medium">{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="text-primary font-medium">{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-primary/70 text-sm">{item.label}</span>
+          </div>
+        ))}
+      </ScrollArea>
+    </div>
+  ),
+};

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical";
+  snap?: "start" | "center" | "none";
+}
+
+const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
+  ({ className, children, orientation = "horizontal", snap = "none", ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "scrollbar-hide flex overflow-auto",
+          orientation === "horizontal" && "flex-row",
+          orientation === "vertical" && "flex-col",
+          snap !== "none" && orientation === "horizontal" && "snap-x snap-mandatory",
+          snap !== "none" && orientation === "vertical" && "snap-y snap-mandatory",
+          className,
+        )}
+        {...props}
+      >
+        {React.Children.map(children, (child) => {
+          if (!React.isValidElement(child)) return child;
+          if (snap !== "none") {
+            return React.cloneElement(child as React.ReactElement<{ className?: string }>, {
+              className: cn(`snap-${snap}`, (child.props as { className?: string }).className),
+            });
+          }
+          return child;
+        })}
+      </div>
+    );
+  },
+);
+ScrollArea.displayName = "ScrollArea";
+
+export { ScrollArea };
+export type { ScrollAreaProps };

package/src/components/navigation/app-navigation.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
+
+import { AppNavigation } from "./app-navigation";
+
+const meta: Meta<typeof AppNavigation> = {
+  title: "Navigation/AppNavigation",
+  component: AppNavigation,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+// Shared helpers
+// ---------------------------------------------------------------------------
+
+const defaultLinks: Array<{ href: string; label: string }> = [
+  { href: "/features", label: "Features" },
+  { href: "/pricing", label: "Pricing" },
+  { href: "/blog", label: "Blog" },
+  { href: "/about", label: "About" },
+];
+
+/** Adds a little page content so the navigation can be viewed in context. */
+function PageContent({
+  message = "Page content appears below the sticky nav.",
+}: {
+  message?: string;
+}) {
+  return (
+    <div style={{ padding: "2rem" }}>
+      <p style={{ color: "var(--muted-foreground, #888)", fontSize: 14 }}>{message}</p>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {
+  render: () => (
+    <>
+      <AppNavigation
+        brand="Acme"
+        brandHref="/"
+        links={defaultLinks}
+        cta={{ href: "/get-started", label: "Get started", variant: "default" }}
+      />
+      <PageContent />
+    </>
+  ),
+};
+
+export const NoCta: Story = {
+  render: () => (
+    <>
+      <AppNavigation brand="Acme" brandHref="/" links={defaultLinks} />
+      <PageContent message="Same nav, no CTA button." />
+    </>
+  ),
+};
+
+export const OutlineCta: Story = {
+  render: () => (
+    <>
+      <AppNavigation
+        brand="Acme"
+        brandHref="/"
+        links={defaultLinks}
+        cta={{ href: "/get-started", label: "Get started", variant: "outline" }}
+      />
+      <PageContent message="The outline CTA keeps the same navigation geometry with a quieter emphasis." />
+    </>
+  ),
+};

package/src/components/navigation/app-navigation.tsx

@@ -0,0 +1,155 @@
+import { Menu } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "../primitives/button";
+import { Sheet, SheetClose, SheetContent, SheetTitle, SheetTrigger } from "../overlays/sheet";
+
+export interface AppNavigationLink {
+  href: string;
+  label: string;
+}
+
+export interface AppNavigationCta {
+  href: string;
+  label: string;
+  variant?: "default" | "outline";
+}
+
+export interface AppNavigationProps {
+  brand?: React.ReactNode;
+  brandHref?: string;
+  endContent?: React.ReactNode;
+  links?: AppNavigationLink[];
+  cta?: AppNavigationCta;
+  ariaLabel?: string;
+  /** Current pathname used to highlight the active link. */
+  activeHref?: string;
+  /** A router link component. Native anchors are used when omitted. */
+  linkComponent?: React.ElementType;
+  /** The prop used by the link component for its destination. */
+  linkProp?: "href" | "to";
+  /** Props shared by every link, such as a router's prefetch hint. */
+  linkProps?: Record<string, unknown>;
+}
+
+export function AppNavigation({
+  brand,
+  brandHref = "/",
+  endContent,
+  links,
+  cta,
+  ariaLabel = "Primary navigation",
+  activeHref,
+  linkComponent: LinkComponent = "a",
+  linkProp = "href",
+  linkProps,
+}: AppNavigationProps) {
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+
+  const isActive = (href: string) => {
+    if (!activeHref) return false;
+    if (href === activeHref) return true;
+    // Nested routes (e.g. /work/123) keep the parent link active.
+    return href !== "/" && activeHref.startsWith(`${href}/`);
+  };
+
+  const createLink = ({
+    href,
+    children,
+    active = false,
+    variant,
+    brand = false,
+  }: {
+    href: string;
+    children: React.ReactNode;
+    active?: boolean;
+    variant?: AppNavigationCta["variant"];
+    brand?: boolean;
+  }) =>
+    React.createElement(
+      LinkComponent,
+      {
+        ...linkProps,
+        ...(linkProp === "to" ? { to: href } : { href }),
+        className: brand
+          ? "navigation-link navigation-brand shrink-0"
+          : variant
+            ? "navigation-cta"
+            : "navigation-link",
+        "aria-current": active ? "page" : undefined,
+        "data-variant": variant,
+      },
+      children,
+    );
+
+  return (
+    <header className="navigation-shell">
+      <nav className="navigation" aria-label={ariaLabel}>
+        <div className="navigation-inner">
+          <div className="navigation-start">
+            {brand && createLink({ href: brandHref, children: brand, brand: true })}
+          </div>
+
+          <div className="navigation-end">
+            {links?.map((link) => (
+              <React.Fragment key={link.href}>
+                {createLink({ href: link.href, children: link.label, active: isActive(link.href) })}
+              </React.Fragment>
+            ))}
+            {cta &&
+              createLink({
+                href: cta.href,
+                children: cta.label,
+                variant: cta.variant ?? "default",
+              })}
+            {endContent}
+          </div>
+
+          <div className="navigation-mobile">
+            <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+              <SheetTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  aria-label={mobileOpen ? "Close menu" : "Open menu"}
+                >
+                  <Menu className="size-4" aria-hidden="true" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent className="navigation-panel">
+                <SheetTitle className="sr-only">Navigation menu</SheetTitle>
+
+                <div className="navigation-panel-links">
+                  {links?.map((link) => (
+                    <SheetClose asChild key={link.href}>
+                      {createLink({
+                        href: link.href,
+                        children: link.label,
+                        active: isActive(link.href),
+                      })}
+                    </SheetClose>
+                  ))}
+                </div>
+
+                {(cta || endContent) && (
+                  <div className="navigation-panel-end">
+                    {cta && (
+                      <SheetClose asChild>
+                        {createLink({
+                          href: cta.href,
+                          children: cta.label,
+                          variant: cta.variant ?? "default",
+                        })}
+                      </SheetClose>
+                    )}
+                    {endContent && <div className="navigation-panel-content">{endContent}</div>}
+                  </div>
+                )}
+              </SheetContent>
+            </Sheet>
+          </div>
+        </div>
+      </nav>
+    </header>
+  );
+}

package/src/components/navigation/index.ts

@@ -0,0 +1,3 @@
+export { AppNavigation } from "./app-navigation";
+export type { AppNavigationCta, AppNavigationLink, AppNavigationProps } from "./app-navigation";
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";

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

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+
+const meta = {
+  title: "Navigation/Tabs",
+  component: Tabs,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        <p className="text-secondary p-4 text-sm">
+          Make changes to your account here. Click save when you're done.
+        </p>
+      </TabsContent>
+      <TabsContent value="password">
+        <p className="text-secondary p-4 text-sm">
+          Change your password here. After saving, you'll be logged out.
+        </p>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+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-secondary p-4 text-sm">Overview content</p>
+      </TabsContent>
+      <TabsContent value="tab2">
+        <p className="text-secondary p-4 text-sm">Analytics content</p>
+      </TabsContent>
+      <TabsContent value="tab3">
+        <p className="text-secondary p-4 text-sm">Reports content</p>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <Tabs defaultValue="tab1" orientation="vertical" className="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="tab1">Account</TabsTrigger>
+        <TabsTrigger value="tab2">Billing</TabsTrigger>
+        <TabsTrigger value="tab3">Security</TabsTrigger>
+      </TabsList>
+      <TabsContent value="tab1">Account settings</TabsContent>
+      <TabsContent value="tab2">Billing information</TabsContent>
+      <TabsContent value="tab3">Security settings</TabsContent>
+    </Tabs>
+  ),
+};

package/src/components/navigation/tabs.tsx

@@ -0,0 +1,49 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Tabs({ ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return <TabsPrimitive.Root data-slot="tabs" {...props} />;
+}
+
+function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-panel flex h-auto w-full items-center gap-1 rounded-full border p-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "text-primary focus-visible:ring-focus data-[state=active]:bg-panel data-[state=active]:text-primary data-[state=active]:border-subtle flex flex-1 items-center justify-center gap-2 rounded-full px-3 py-2 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn(
+        "focus-visible:bg-accent/10 mt-2 rounded-md focus-visible:border focus-visible:outline-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

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

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./alert-dialog";
+
+const meta = {
+  title: "Overlays/AlertDialog",
+  component: AlertDialog,
+  tags: ["autodocs"],
+} satisfies Meta<typeof AlertDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger className="rounded border px-4 py-2 text-sm">
+        Open Dialog
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your account and remove your
+            data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+};

package/src/components/overlays/alert-dialog.tsx

@@ -0,0 +1,119 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "../primitives/button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = ({ children, ...props }: AlertDialogPrimitive.AlertDialogPortalProps) => (
+  <AlertDialogPrimitive.Portal {...props}>
+    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
+      {children}
+    </div>
+  </AlertDialogPrimitive.Portal>
+);
+AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "overlay-backdrop data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 transition-opacity",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "bg-raised text-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-10 data-[state=closed]:slide-out-to-bottom-10 border-subtle sm:data-[state=open]:slide-in-from-bottom-0 fixed bottom-0 z-50 grid w-full max-w-lg gap-6 rounded-t-xl border p-4 outline-none sm:top-[50%] sm:right-auto sm:bottom-auto sm:left-[50%] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:p-6",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+function AlertDialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-2 text-left", className)} {...props} />;
+}
+
+function AlertDialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+
+const AlertDialogTitle = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("heading-2 text-primary", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("body-2 text-secondary max-w-prose", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};