@ponti-studios/ui 0.1.2 → 0.4.0

package/src/components/forms/textarea.tsx

@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "placeholder:text-secondary aria-invalid:ring-destructive/20 aria-invalid:border-destructive focus-visible:ring-focus flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "placeholder:text-muted-foreground aria-invalid:ring-destructive/20 aria-invalid:border-destructive focus-visible:ring-ring border-input flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className,
       )}
       {...props}

package/src/components/layout/index.ts

@@ -1,2 +1,5 @@
 export { ScrollArea } from "./scroll-area";
 export type { ScrollAreaProps } from "./scroll-area";
+export { SectionIntro } from "./section-intro";
+export type { SectionIntroProps } from "./section-intro";
+export { SurfacePanel } from "./surface-panel";

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

@@ -25,7 +25,7 @@ export const Default: Story = {
         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>
+        <span className="text-foreground font-medium">{item.label}</span>
       </div>
     )),
   },
@@ -41,7 +41,7 @@ export const WithSnap: Story = {
         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>
+        <span className="text-foreground font-medium">{item.label}</span>
       </div>
     )),
   },
@@ -57,7 +57,7 @@ export const Vertical: Story = {
         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>
+        <span className="text-foreground font-medium">{item.label}</span>
       </div>
     )),
   },
@@ -74,7 +74,7 @@ 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-primary/70 text-sm">{item.label}</span>
+            <span className="text-foreground/70 text-sm">{item.label}</span>
           </div>
         ))}
       </ScrollArea>

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

@@ -1,7 +1,9 @@
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
 import * as React from "react";
+
 import { cn } from "../../lib/utils";
 
-interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ScrollAreaProps extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> {
   orientation?: "horizontal" | "vertical";
   snap?: "start" | "center" | "none";
 }
@@ -9,31 +11,31 @@ interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
 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") {
+      <ScrollAreaPrimitive.Root ref={ref} className={cn("relative", className)} {...props}>
+        <ScrollAreaPrimitive.Viewport
+          className={cn(
+            "scrollbar-hide flex overflow-auto",
+            orientation === "horizontal" ? "flex-row" : "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-${snap}`, (child.props as { className?: string }).className),
+              className: cn(
+                snap !== "none" && orientation === "horizontal" && `snap-${snap}`,
+                snap !== "none" && orientation === "vertical" && `snap-${snap}`,
+                (child.props as { className?: string }).className,
+              ),
             });
-          }
-          return child;
-        })}
-      </div>
+          })}
+        </ScrollAreaPrimitive.Viewport>
+      </ScrollAreaPrimitive.Root>
     );
   },
 );
+
 ScrollArea.displayName = "ScrollArea";
 
 export { ScrollArea };

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

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

@@ -0,0 +1,31 @@
+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-title-2 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

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

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

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

@@ -33,8 +33,8 @@ function PageContent({
   message?: string;
 }) {
   return (
-    <div style={{ padding: "2rem" }}>
-      <p style={{ color: "var(--muted-foreground, #888)", fontSize: 14 }}>{message}</p>
+    <div className="p-8">
+      <p className="text-muted-foreground text-sm">{message}</p>
     </div>
   );
 }

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

@@ -72,10 +72,10 @@ export function AppNavigation({
         ...linkProps,
         ...(linkProp === "to" ? { to: href } : { href }),
         className: brand
-          ? "navigation-link navigation-brand shrink-0"
+          ? "inline-flex min-h-9 shrink-0 items-center rounded-md px-3 py-2 text-sm font-medium"
           : variant
-            ? "navigation-cta"
-            : "navigation-link",
+            ? "inline-flex min-h-9 shrink-0 items-center justify-center rounded-md px-3 py-2 text-sm font-medium"
+            : "inline-flex min-h-9 shrink-0 items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-muted hover:text-muted-foreground",
         "aria-current": active ? "page" : undefined,
         "data-variant": variant,
       },
@@ -83,14 +83,14 @@ export function AppNavigation({
     );
 
   return (
-    <header className="navigation-shell">
-      <nav className="navigation" aria-label={ariaLabel}>
-        <div className="navigation-inner">
-          <div className="navigation-start">
+    <header className="bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 flex w-full justify-center border-b px-4 backdrop-blur">
+      <nav className="w-full max-w-7xl" aria-label={ariaLabel}>
+        <div className="flex min-h-14 items-center justify-between gap-6">
+          <div className="flex min-w-0 items-center">
             {brand && createLink({ href: brandHref, children: brand, brand: true })}
           </div>
 
-          <div className="navigation-end">
+          <div className="ml-auto hidden min-w-0 items-center gap-1 sm:flex">
             {links?.map((link) => (
               <React.Fragment key={link.href}>
                 {createLink({ href: link.href, children: link.label, active: isActive(link.href) })}
@@ -105,7 +105,7 @@ export function AppNavigation({
             {endContent}
           </div>
 
-          <div className="navigation-mobile">
+          <div className="ml-auto flex items-center sm:hidden">
             <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
               <SheetTrigger asChild>
                 <Button
@@ -116,10 +116,10 @@ export function AppNavigation({
                   <Menu className="size-4" aria-hidden="true" />
                 </Button>
               </SheetTrigger>
-              <SheetContent className="navigation-panel">
+              <SheetContent>
                 <SheetTitle className="sr-only">Navigation menu</SheetTitle>
 
-                <div className="navigation-panel-links">
+                <div className="mt-8 flex flex-1 flex-col gap-1">
                   {links?.map((link) => (
                     <SheetClose asChild key={link.href}>
                       {createLink({
@@ -132,7 +132,7 @@ export function AppNavigation({
                 </div>
 
                 {(cta || endContent) && (
-                  <div className="navigation-panel-end">
+                  <div className="flex flex-col gap-4 border-t pt-4">
                     {cta && (
                       <SheetClose asChild>
                         {createLink({
@@ -142,7 +142,7 @@ export function AppNavigation({
                         })}
                       </SheetClose>
                     )}
-                    {endContent && <div className="navigation-panel-content">{endContent}</div>}
+                    {endContent && <div className="flex items-center gap-3">{endContent}</div>}
                   </div>
                 )}
               </SheetContent>

package/src/components/navigation/index.ts

@@ -1,3 +1,7 @@
 export { AppNavigation } from "./app-navigation";
 export type { AppNavigationCta, AppNavigationLink, AppNavigationProps } from "./app-navigation";
+export { PaginationControls } from "./pagination-controls";
+export type { PaginationControlsProps } from "./pagination-controls";
+export { RouteLink } from "./route-link";
+export type { RouteLinkProps } from "./route-link";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";

package/src/components/navigation/pagination-controls.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import { PaginationControls } from "./pagination-controls";
+
+const meta = {
+  title: "Navigation/PaginationControls",
+  component: PaginationControls,
+  tags: ["autodocs"],
+} satisfies Meta<typeof PaginationControls>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function PaginationPreview({ totalPages }: { totalPages: number }) {
+  const [currentPage, setCurrentPage] = useState(0);
+  return (
+    <PaginationControls
+      currentPage={currentPage}
+      totalPages={totalPages}
+      onPageChange={setCurrentPage}
+    />
+  );
+}
+
+const baseArgs = {
+  currentPage: 0,
+  totalPages: 5,
+  onPageChange: () => {},
+};
+
+export const Default: Story = {
+  args: baseArgs,
+  render: () => <PaginationPreview totalPages={5} />,
+};
+
+export const SinglePage: Story = {
+  name: "Single page (renders nothing)",
+  args: { ...baseArgs, totalPages: 1 },
+  render: () => <PaginationPreview totalPages={1} />,
+};

package/src/components/navigation/pagination-controls.tsx

@@ -0,0 +1,50 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "../primitives/button";
+
+export interface PaginationControlsProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+/** Zero-indexed prev/next pagination control. Renders nothing for a single page. */
+export function PaginationControls({
+  currentPage,
+  totalPages,
+  onPageChange,
+}: PaginationControlsProps) {
+  if (totalPages <= 1) {
+    return null;
+  }
+
+  return (
+    <div className="text-muted-foreground flex items-center justify-end gap-2 text-sm">
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        className="border-dashed"
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 0}
+      >
+        <ChevronLeft className="size-4" aria-hidden />
+        Previous
+      </Button>
+      <span className="text-foreground text-xs">
+        Page {currentPage + 1} of {totalPages}
+      </span>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        className="border-dashed"
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage >= totalPages - 1}
+      >
+        Next
+        <ChevronRight className="size-4" aria-hidden />
+      </Button>
+    </div>
+  );
+}

package/src/components/navigation/route-link.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { RouteLink } from "./route-link";
+
+const meta = {
+  title: "Navigation/RouteLink",
+  component: RouteLink,
+  tags: ["autodocs"],
+} satisfies Meta<typeof RouteLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "View accounts",
+    href: "#",
+    className: "text-accent underline",
+  },
+};
+
+export const WithOnNavigate: Story = {
+  name: "With onNavigate callback",
+  args: {
+    children: "Go to analytics",
+    href: "#",
+    className: "text-accent underline",
+    onNavigate: () => console.log("route loading started"),
+  },
+};

package/src/components/navigation/route-link.tsx

@@ -0,0 +1,42 @@
+import type { ComponentPropsWithoutRef, ElementType, MouseEvent, ReactNode } from "react";
+import { useCallback } from "react";
+
+type RouteLinkOwnProps<T extends ElementType> = {
+  as?: T;
+  children: ReactNode;
+  /** Called before the click is forwarded — e.g. to flip a route-loading store. */
+  onNavigate?: () => void;
+};
+
+export type RouteLinkProps<T extends ElementType = "a"> = RouteLinkOwnProps<T> &
+  Omit<ComponentPropsWithoutRef<T>, keyof RouteLinkOwnProps<T>>;
+
+/**
+ * Polymorphic link that fires `onNavigate` before `onClick`. Pass your
+ * router's `Link` component as `as` for client-side navigation (e.g.
+ * `as={Link} to="/accounts"`); the host app owns any route-loading state via
+ * `onNavigate` instead of a hardcoded store.
+ */
+export function RouteLink<T extends ElementType = "a">({
+  as,
+  children,
+  onNavigate,
+  onClick,
+  ...props
+}: RouteLinkProps<T>) {
+  const Component = (as ?? "a") as ElementType;
+
+  const handleClick = useCallback(
+    (e: MouseEvent) => {
+      onNavigate?.();
+      (onClick as ((e: MouseEvent) => void) | undefined)?.(e);
+    },
+    [onNavigate, onClick],
+  );
+
+  return (
+    <Component onClick={handleClick} {...props}>
+      {children}
+    </Component>
+  );
+}

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

@@ -19,12 +19,12 @@ export const Default: Story = {
         <TabsTrigger value="password">Password</TabsTrigger>
       </TabsList>
       <TabsContent value="account">
-        <p className="text-secondary p-4 text-sm">
+        <p className="text-muted-foreground 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">
+        <p className="text-muted-foreground p-4 text-sm">
           Change your password here. After saving, you'll be logged out.
         </p>
       </TabsContent>
@@ -41,13 +41,13 @@ export const LineVariant: Story = {
         <TabsTrigger value="tab3">Reports</TabsTrigger>
       </TabsList>
       <TabsContent value="tab1">
-        <p className="text-secondary p-4 text-sm">Overview content</p>
+        <p className="text-muted-foreground p-4 text-sm">Overview content</p>
       </TabsContent>
       <TabsContent value="tab2">
-        <p className="text-secondary p-4 text-sm">Analytics content</p>
+        <p className="text-muted-foreground p-4 text-sm">Analytics content</p>
       </TabsContent>
       <TabsContent value="tab3">
-        <p className="text-secondary p-4 text-sm">Reports content</p>
+        <p className="text-muted-foreground p-4 text-sm">Reports content</p>
       </TabsContent>
     </Tabs>
   ),

package/src/components/navigation/tabs.tsx

@@ -1,4 +1,4 @@
-import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import * as React from "react";
 
 import { cn } from "../../lib/utils";
@@ -12,7 +12,7 @@ function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimi
     <TabsPrimitive.List
       data-slot="tabs-list"
       className={cn(
-        "bg-panel flex h-auto w-full items-center gap-1 rounded-full border p-1",
+        "bg-muted flex h-auto w-full items-center gap-1 rounded-full border p-1",
         className,
       )}
       {...props}
@@ -20,12 +20,12 @@ function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimi
   );
 }
 
-function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Tab>) {
   return (
-    <TabsPrimitive.Trigger
+    <TabsPrimitive.Tab
       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",
+        "text-foreground focus-visible:ring-ring data-active:bg-background data-active:text-foreground data-active:border-border 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-active:border",
         className,
       )}
       {...props}
@@ -33,12 +33,12 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
   );
 }
 
-function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Panel>) {
   return (
-    <TabsPrimitive.Content
+    <TabsPrimitive.Panel
       data-slot="tabs-content"
       className={cn(
-        "focus-visible:bg-accent/10 mt-2 rounded-md focus-visible:border focus-visible:outline-none",
+        "focus-visible:bg-muted/10 mt-2 rounded-md focus-visible:border focus-visible:outline-none",
         className,
       )}
       {...props}