@ponti-studios/ui 0.7.1 → 1.0.0

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

@@ -1,155 +1,183 @@
 import { Menu } from "lucide-react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as React from "react";
 
-import { Button } from "../primitives/button";
+import { cn } from "../../lib/utils";
+import { Slot } from "../../lib/slot";
 import { Sheet, SheetClose, SheetContent, SheetTitle, SheetTrigger } from "../overlays/sheet";
+import { Button } from "../primitives/button";
 
-export interface AppNavigationLink {
-  href: string;
-  label: string;
-}
-
-export interface AppNavigationCta {
-  href: string;
-  label: string;
-  variant?: "default" | "outline";
-}
+/** True while rendering inside the mobile Sheet copy of the nav content. */
+const MobileMenuContext = React.createContext(false);
 
-export interface AppNavigationProps {
-  brand?: React.ReactNode;
-  brandHref?: string;
-  endContent?: React.ReactNode;
-  links?: AppNavigationLink[];
-  cta?: AppNavigationCta;
+export interface NavigationRootProps {
+  children: ReactNode;
   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>;
+  className?: string;
 }
 
-export function AppNavigation({
-  brand,
-  brandHref = "/",
-  endContent,
-  links,
-  cta,
-  ariaLabel = "Primary navigation",
-  activeHref,
-  linkComponent: LinkComponent = "a",
-  linkProp = "href",
-  linkProps,
-}: AppNavigationProps) {
+/**
+ * Sticky nav shell. Compose it with `Navigation.Brand`, `Navigation.List`
+ * (containing `Navigation.Item`s), and any other content — a CTA `Button`,
+ * a search input, a notification bell — as plain children. `Navigation`
+ * only owns the responsive chrome: `Navigation.Brand` stays visible at
+ * every width, everything else collapses into a Sheet-based mobile menu
+ * below `sm`, reusing the exact elements you composed (not a parallel data
+ * shape) so `Navigation.Item`'s active state and `asChild` composition
+ * behave identically in both places.
+ */
+function NavigationRoot({ children, ariaLabel = "Primary navigation", className }: NavigationRootProps) {
   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
-          ? "inline-flex min-h-9 shrink-0 items-center rounded-md px-3 py-2 text-sm font-medium"
-          : variant
-            ? "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,
-      },
-      children,
-    );
+  const items = React.Children.toArray(children);
+  const brand = items.find((child) => React.isValidElement(child) && child.type === NavigationBrand);
+  const rest = items.filter((child) => child !== brand);
 
   return (
-    <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="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) })}
-              </React.Fragment>
-            ))}
-            {cta &&
-              createLink({
-                href: cta.href,
-                children: cta.label,
-                variant: cta.variant ?? "default",
-              })}
-            {endContent}
-          </div>
-
-          <div className="ml-auto flex items-center sm:hidden">
-            <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>
-                <SheetTitle className="sr-only">Navigation menu</SheetTitle>
-
-                <div className="mt-8 flex flex-1 flex-col gap-1">
-                  {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="flex flex-col gap-4 border-t pt-4">
-                    {cta && (
-                      <SheetClose asChild>
-                        {createLink({
-                          href: cta.href,
-                          children: cta.label,
-                          variant: cta.variant ?? "default",
-                        })}
-                      </SheetClose>
-                    )}
-                    {endContent && <div className="flex items-center gap-3">{endContent}</div>}
-                  </div>
-                )}
-              </SheetContent>
-            </Sheet>
-          </div>
+    <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={cn("flex min-h-14 w-full max-w-7xl items-center justify-between gap-6", className)}
+        aria-label={ariaLabel}
+      >
+        <div className="flex min-w-0 items-center">{brand}</div>
+
+        <div className="ml-auto hidden min-w-0 items-center gap-6 sm:flex">{rest}</div>
+
+        <div className="ml-auto flex items-center sm:hidden">
+          <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>
+              <SheetTitle className="sr-only">Navigation menu</SheetTitle>
+              <div className="mt-8 flex flex-1 flex-col gap-4">
+                <MobileMenuContext.Provider value={true}>{rest}</MobileMenuContext.Provider>
+              </div>
+            </SheetContent>
+          </Sheet>
         </div>
       </nav>
     </header>
   );
 }
+
+export interface NavigationBrandProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/** Always visible, at every viewport width — compose your own link/logo markup directly. */
+function NavigationBrand({ children, className }: NavigationBrandProps) {
+  return <div className={cn("flex items-center font-semibold", className)}>{children}</div>;
+}
+
+export interface NavigationListProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/** Semantic `<ul>` of `Navigation.Item`s. Lays out horizontally on desktop, stacks inside the mobile Sheet. */
+function NavigationList({ children, className }: NavigationListProps) {
+  const isMobile = React.useContext(MobileMenuContext);
+  return (
+    <ul
+      className={cn(
+        "flex items-center gap-1",
+        isMobile && "flex-col items-stretch gap-1",
+        className,
+      )}
+    >
+      {children}
+    </ul>
+  );
+}
+
+interface NavigationItemOwnProps {
+  active?: boolean;
+  /** Apply the item styling to a single child (e.g. your router's `Link`) instead of rendering an `<a>`. */
+  asChild?: boolean;
+}
+
+export type NavigationItemProps = NavigationItemOwnProps &
+  Omit<ComponentPropsWithoutRef<"a">, keyof NavigationItemOwnProps>;
+
+/** A single nav link, wrapped in `<li>`. Auto-closes the mobile Sheet on click when rendered there. */
+function NavigationItem({ active = false, asChild = false, className, children, ...props }: NavigationItemProps) {
+  const isMobile = React.useContext(MobileMenuContext);
+  const itemClassName = cn(
+    "inline-flex h-9 max-h-9 shrink-0 items-center px-3 py-2 text-sm font-medium hover:bg-muted hover:text-muted-foreground data-[active]:font-semibold data-[active]:text-foreground",
+    className,
+  );
+
+  const content = asChild ? (
+    <Slot
+      {...props}
+      data-active={active || undefined}
+      aria-current={active ? "page" : undefined}
+      className={itemClassName}
+    >
+      {children}
+    </Slot>
+  ) : (
+    <a
+      {...props}
+      data-active={active || undefined}
+      aria-current={active ? "page" : undefined}
+      className={itemClassName}
+    >
+      {children}
+    </a>
+  );
+
+  return <li>{isMobile ? <SheetClose asChild>{content}</SheetClose> : content}</li>;
+}
+
+export interface NavigationActionProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Layout wrapper for a CTA, avatar menu, theme toggle, etc. — bring your
+ * own `Button`, no dedicated CTA component needed. Content here does not
+ * auto-close the mobile Sheet on click (it may hold more than one
+ * element, or non-navigational controls) — use `Navigation.Item` instead
+ * for a link that should close the menu when tapped.
+ */
+function NavigationAction({ children, className }: NavigationActionProps) {
+  const isMobile = React.useContext(MobileMenuContext);
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-3",
+        isMobile && "mt-2 flex-col items-stretch gap-3 border-t pt-4",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+type NavigationComponent = typeof NavigationRoot & {
+  Brand: typeof NavigationBrand;
+  List: typeof NavigationList;
+  Item: typeof NavigationItem;
+  Action: typeof NavigationAction;
+};
+
+export const Navigation: NavigationComponent = Object.assign(NavigationRoot, {
+  Brand: NavigationBrand,
+  List: NavigationList,
+  Item: NavigationItem,
+  Action: NavigationAction,
+});
+
+/** @deprecated Use `Navigation` instead. */
+export const AppNavigation = Navigation;

package/src/components/navigation/index.ts

@@ -1,7 +1,11 @@
-export { AppNavigation } from "./app-navigation";
-export type { AppNavigationCta, AppNavigationLink, AppNavigationProps } from "./app-navigation";
+export { AppNavigation, Navigation } from "./app-navigation";
+export type {
+  NavigationActionProps,
+  NavigationBrandProps,
+  NavigationItemProps,
+  NavigationListProps,
+  NavigationRootProps,
+} 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

@@ -35,7 +35,7 @@ export const Default: Story = {
 };
 
 export const SinglePage: Story = {
-  name: "Single page (renders nothing)",
+  name: "Single page (disabled controls)",
   args: { ...baseArgs, totalPages: 1 },
   render: () => <PaginationPreview totalPages={1} />,
 };

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

@@ -8,41 +8,37 @@ export interface PaginationControlsProps {
   onPageChange: (page: number) => void;
 }
 
-/** Zero-indexed prev/next pagination control. Renders nothing for a single page. */
+/** Zero-indexed prev/next pagination control. */
 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">
+    <div className="border-border bg-background text-foreground inline-flex items-center overflow-hidden rounded-full border text-sm">
       <Button
         type="button"
         variant="outline"
-        size="sm"
-        className="border-dashed"
+        size="icon"
+        className="rounded-none border-0 border-r bg-transparent shadow-none"
         onClick={() => onPageChange(currentPage - 1)}
         disabled={currentPage === 0}
+        aria-label="Previous page"
       >
         <ChevronLeft className="size-4" aria-hidden />
-        Previous
       </Button>
-      <span className="text-foreground text-xs">
-        Page {currentPage + 1} of {totalPages}
+      <span className="min-w-20 px-3 text-center text-xs tabular-nums">
+        {currentPage + 1} of {totalPages}
       </span>
       <Button
         type="button"
         variant="outline"
-        size="sm"
-        className="border-dashed"
+        size="icon"
+        className="rounded-none border-0 border-l bg-transparent shadow-none"
         onClick={() => onPageChange(currentPage + 1)}
         disabled={currentPage >= totalPages - 1}
+        aria-label="Next page"
       >
-        Next
         <ChevronRight className="size-4" aria-hidden />
       </Button>
     </div>

package/src/components/overlays/dropdown-menu.stories.tsx

@@ -44,9 +44,9 @@ export const Default: Story = {
         <Button variant="outline">Open Menu</Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56">
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuSeparator />
         <DropdownMenuGroup>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
           <DropdownMenuItem>
             <User className="mr-2 size-4" />
             <span>Profile</span>

package/src/components/primitives/card.tsx

@@ -6,7 +6,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card"
-      className={cn("bg-card text-card-foreground flex flex-col rounded-xl border", className)}
+      className={cn("bg-card text-card-foreground flex flex-col gap-4 rounded border", className)}
       {...props}
     />
   );
@@ -17,7 +17,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "flex items-center justify-between gap-2 border-b px-4 py-3 has-data-[slot=card-action]:grid has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+        "flex flex-col items-start justify-between gap-1 p-4 has-data-[slot=card-action]:grid has-data-[slot=card-action]:grid-cols-[1fr_auto]",
         className,
       )}
       {...props}
@@ -26,14 +26,14 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="card-title" className={cn(className)} {...props} />;
+  return <div data-slot="card-title" className={cn("text-xl", className)} {...props} />;
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-muted-foreground text-xs", className)}
       {...props}
     />
   );
@@ -55,12 +55,8 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center border-t px-4 py-3", className)}
-      {...props}
-    />
+    <div data-slot="card-footer" className={cn("flex items-center p-4", className)} {...props} />
   );
 }
 
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/src/components/primitives/label.stories.tsx

@@ -27,21 +27,3 @@ export const WithInput: Story = {
     </div>
   ),
 };
-
-export const Disabled: Story = {
-  render: () => (
-    <div className="flex w-full max-w-sm flex-col gap-2">
-      <Label htmlFor="disabled-field">Subscription plan</Label>
-      <div className="flex items-center gap-3">
-        <Input id="disabled-field" className="peer" disabled placeholder="Enterprise" />
-        <Label htmlFor="disabled-field" className="shrink-0">
-          (locked)
-        </Label>
-      </div>
-      <p className="text-muted-foreground text-xs">
-        The <code className="font-mono">peer-disabled</code> variant mutes the label when its paired
-        input is disabled.
-      </p>
-    </div>
-  ),
-};

package/src/components/primitives/label.tsx

@@ -1,20 +1,20 @@
-"use client";
-
-import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from "../../lib/utils";
 
-const labelVariants = cva(
-  "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+const Label = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+  ({ className, ...props }, ref) => (
+    <label
+      htmlFor={props.htmlFor}
+      ref={ref}
+      className={cn(
+        "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className,
+      )}
+      {...props}
+    />
+  ),
 );
-
-const Label = React.forwardRef<
-  HTMLLabelElement,
-  React.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <label ref={ref} className={cn(labelVariants(), className)} {...props} />
-));
 Label.displayName = "Label";
 
 export { Label };

package/src/constants/chart-colors.ts

@@ -4,15 +4,15 @@
  */
 
 export const CHART_COLORS = {
-  chart1: "var(--color-chart-1)",
-  chart2: "var(--color-chart-2)",
-  chart3: "var(--color-chart-3)",
-  chart4: "var(--color-chart-4)",
-  chart5: "var(--color-chart-5)",
+  chart1: "var(--chart-1)",
+  chart2: "var(--chart-2)",
+  chart3: "var(--chart-3)",
+  chart4: "var(--chart-4)",
+  chart5: "var(--chart-5)",
 
-  positive: "var(--color-chart-positive)",
-  negative: "var(--color-chart-negative)",
-  neutral: "var(--color-chart-neutral)",
+  positive: "var(--chart-positive)",
+  negative: "var(--chart-negative)",
+  neutral: "var(--chart-neutral)",
 
   background: "var(--color-background)",
   grid: "var(--color-border)",
@@ -28,12 +28,12 @@ export const CHART_COLORS = {
 } as const;
 
 export const CHART_CSS_VARS = {
-  positive: "var(--color-chart-positive)",
-  negative: "var(--color-chart-negative)",
-  neutral: "var(--color-chart-neutral)",
-  chart1: "var(--color-chart-1)",
-  chart2: "var(--color-chart-2)",
-  chart3: "var(--color-chart-3)",
-  chart4: "var(--color-chart-4)",
-  chart5: "var(--color-chart-5)",
+  positive: "var(--chart-positive)",
+  negative: "var(--chart-negative)",
+  neutral: "var(--chart-neutral)",
+  chart1: "var(--chart-1)",
+  chart2: "var(--chart-2)",
+  chart3: "var(--chart-3)",
+  chart4: "var(--chart-4)",
+  chart5: "var(--chart-5)",
 } as const;

package/src/lib/slot.tsx

@@ -0,0 +1,29 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import type { ReactElement } from "react";
+import * as React from "react";
+
+export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+}
+
+/**
+ * Generic `asChild` primitive: merges the props it receives onto its single
+ * child instead of rendering its own DOM element. Lets compound components
+ * (e.g. `Navigation.Item`) apply base styling/aria wiring to whatever the
+ * app renders — a router `Link`, a plain `<a>`, anything — without the app
+ * passing a component as a prop; it's composed as JSX children instead.
+ *
+ * Uses `mergeProps` (already a dependency via `@base-ui/react`) so
+ * event handlers chain instead of one overwriting the other, and
+ * `className`/`style` merge instead of replacing.
+ */
+export const Slot = React.forwardRef<HTMLElement, SlotProps>(({ children, ...props }, ref) => {
+  if (!React.isValidElement(children)) return null;
+  const child = children as ReactElement<Record<string, unknown>>;
+  const merged = mergeProps<"div">(
+    props as React.ComponentPropsWithRef<"div">,
+    child.props as React.ComponentPropsWithRef<"div">,
+  );
+  return React.cloneElement(child, { ...merged, ref } as Record<string, unknown>);
+});
+Slot.displayName = "Slot";

package/src/styles/animations.css

@@ -51,28 +51,6 @@
   }
 }
 
-.animate-in {
-  animation:
-    fade-in 150ms ease-out,
-    zoom-in 150ms ease-out;
-}
-.animate-out {
-  animation:
-    fade-out 120ms ease-in,
-    zoom-out 120ms ease-in;
-}
-.fade-in-0 {
-  animation-name: fade-in;
-}
-.fade-out-0 {
-  animation-name: fade-out;
-}
-.zoom-in-95 {
-  animation-name: zoom-in;
-}
-.zoom-out-95 {
-  animation-name: zoom-out;
-}
 .data-open\:animate-in[data-open],
 .data-open\:animate-in[data-state="open"] {
   animation: