@ponti-studios/ui 0.1.2 → 0.3.0

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-11 shrink-0 items-center rounded-md px-3 py-2 text-sm font-medium"
           : variant
-            ? "navigation-cta"
-            : "navigation-link",
+            ? "inline-flex min-h-11 shrink-0 items-center justify-center rounded-md px-3 py-2 text-sm font-medium"
+            : "inline-flex min-h-11 shrink-0 items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-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="sticky top-0 z-50 flex w-full justify-center border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <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-sm text-muted-foreground flex items-center justify-end gap-2">
+      <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-xs text-foreground">
+        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,9 +33,9 @@ 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",

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

@@ -1,4 +1,4 @@
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
 import * as React from "react";
 
 import { cn } from "../../lib/utils";
@@ -7,104 +7,78 @@ import { buttonVariants } from "../primitives/button";
 const AlertDialog = AlertDialogPrimitive.Root;
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
-const AlertDialogPortal = ({ children, ...props }: AlertDialogPrimitive.AlertDialogPortalProps) => (
+const AlertDialogPortal = ({ children, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) => (
   <AlertDialogPrimitive.Portal {...props}>
-    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
-      {children}
-    </div>
+    <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>
+  React.ComponentRef<typeof AlertDialogPrimitive.Backdrop>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Backdrop>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
+  <AlertDialogPrimitive.Backdrop
     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",
+      "bg-black/80 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-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>
+  React.ComponentRef<typeof AlertDialogPrimitive.Popup>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Popup>
 >(({ className, ...props }, ref) => (
   <AlertDialogPortal>
     <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
+    <AlertDialogPrimitive.Popup
       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",
+        "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 border sm:data-open:slide-in-from-bottom-0 fixed bottom-0 z-50 grid w-full max-w-lg gap-6 rounded-t-xl 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}
-    />
-  );
+  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}
-  />
+  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold tracking-tight", 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}
-  />
+  <AlertDialogPrimitive.Description ref={ref} className={cn("max-w-prose text-sm text-muted-foreground", className)} {...props} />
 ));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+  React.ComponentRef<typeof AlertDialogPrimitive.Close>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Close>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+  <AlertDialogPrimitive.Close 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>
+  React.ComponentRef<typeof AlertDialogPrimitive.Close>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Close>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
-    {...props}
-  />
+  <AlertDialogPrimitive.Close ref={ref} className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)} {...props} />
 ));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
@@ -114,6 +88,7 @@ export {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
+  AlertDialogOverlay,
   AlertDialogTitle,
   AlertDialogTrigger,
 };