@ponti-studios/ui 2.0.1 → 3.0.0

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

@@ -1,217 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import * as React from "react";
-import { userEvent, within } from "storybook/test";
-
-import { Button } from "../primitives/button";
-import { Navigation } from "./app-navigation";
-
-const meta: Meta<typeof Navigation> = {
-  title: "Navigation/AppNavigation",
-  component: Navigation,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-// Shared helpers
-// ---------------------------------------------------------------------------
-
-const defaultLinks = [
-  { 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 className="p-8">
-      <p className="text-muted-foreground text-sm">{message}</p>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Stories
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {
-  render: () => (
-    <>
-      <Navigation>
-        <Navigation.Brand>
-          <a href="/">Acme</a>
-        </Navigation.Brand>
-
-        <Navigation.List>
-          {defaultLinks.map((link) => (
-            <Navigation.Item key={link.href} href={link.href}>
-              {link.label}
-            </Navigation.Item>
-          ))}
-        </Navigation.List>
-
-        <Navigation.Action>
-          <Button size="md" asChild>
-            <a href="/get-started">Get started</a>
-          </Button>
-        </Navigation.Action>
-      </Navigation>
-      <PageContent />
-    </>
-  ),
-};
-
-export const NoCta: Story = {
-  render: () => (
-    <>
-      <Navigation>
-        <Navigation.Brand>
-          <a href="/">Acme</a>
-        </Navigation.Brand>
-        <Navigation.List>
-          {defaultLinks.map((link) => (
-            <Navigation.Item key={link.href} href={link.href}>
-              {link.label}
-            </Navigation.Item>
-          ))}
-        </Navigation.List>
-      </Navigation>
-      <PageContent message="Same nav, no Action content." />
-    </>
-  ),
-};
-
-/**
- * `Navigation.Item` (and any of the other pieces) support the same
- * `asChild` composition as `Button`: pass your router's `Link` (or
- * anything else) as the single child. This story stands in for a router
- * `Link` with a plain anchor that no-ops on click, since Storybook has no
- * router.
- */
-export const WithCustomRouterLink: Story = {
-  render: () => {
-    const activeHref = "/pricing";
-    return (
-      <>
-        <Navigation>
-          <Navigation.Brand>
-            <a href="/" data-router-link="stand-in" onClick={(e) => e.preventDefault()}>
-              Acme
-            </a>
-          </Navigation.Brand>
-
-          <Navigation.List>
-            {defaultLinks.map((link) => (
-              <Navigation.Item key={link.href} asChild active={link.href === activeHref}>
-                <a href={link.href} data-router-link="stand-in" onClick={(e) => e.preventDefault()}>
-                  {link.label}
-                </a>
-              </Navigation.Item>
-            ))}
-          </Navigation.List>
-
-          <Navigation.Action>
-            <Button size="md" asChild>
-              <a
-                href="/get-started"
-                data-router-link="stand-in"
-                onClick={(e) => e.preventDefault()}
-              >
-                Get started
-              </a>
-            </Button>
-          </Navigation.Action>
-        </Navigation>
-        <PageContent message="Every link here is a custom element composed via asChild - open the elements panel to see data-router-link on each one, and the /pricing item's data-active/aria-current." />
-      </>
-    );
-  },
-};
-
-/**
- * Composition means arbitrary content can sit alongside the link list and
- * action area without any prop-shape changes to `Navigation` itself.
- */
-export const WithExtraContent: Story = {
-  render: () => (
-    <>
-      <Navigation>
-        <Navigation.Brand>
-          <a href="/">Acme</a>
-        </Navigation.Brand>
-
-        <Navigation.List>
-          {defaultLinks.slice(0, 2).map((link) => (
-            <Navigation.Item key={link.href} href={link.href}>
-              {link.label}
-            </Navigation.Item>
-          ))}
-        </Navigation.List>
-
-        <input
-          type="search"
-          placeholder="Search..."
-          className="h-9 w-40 rounded-md border bg-background px-3 text-sm"
-        />
-
-        <Navigation.Action>
-          <Button size="md" variant="outline" asChild>
-            <a href="/get-started">Get started</a>
-          </Button>
-        </Navigation.Action>
-      </Navigation>
-      <PageContent message="A search input sits directly between the link list and the action area — no endContent prop needed." />
-    </>
-  ),
-};
-
-/**
- * `@internal` — undocumented Nokia 3310-style LCD skin for the mobile Sheet
- * menu, opted into via `variant="nokia"`. Only affects the mobile Sheet, so
- * this story forces a mobile viewport and auto-opens the menu trigger.
- */
-export const Nokia: Story = {
-  parameters: {
-    viewport: { defaultViewport: "mobile1" },
-    chromatic: { viewports: [375] },
-  },
-  render: () => (
-    <>
-      <Navigation variant="nokia">
-        <Navigation.Brand>
-          <a href="/">Acme</a>
-        </Navigation.Brand>
-
-        <Navigation.List>
-          {defaultLinks.map((link) => (
-            <Navigation.Item key={link.href} href={link.href} active={link.href === "/pricing"}>
-              {link.label}
-            </Navigation.Item>
-          ))}
-        </Navigation.List>
-
-        <Navigation.Action>
-          <Button size="md" asChild>
-            <a href="/get-started">Get started</a>
-          </Button>
-        </Navigation.Action>
-      </Navigation>
-      <PageContent message="Open the menu button to see the Nokia 3310-style LCD skin." />
-    </>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const trigger = canvas.getByRole("button", { name: /open menu/i });
-    await userEvent.click(trigger);
-  },
-};

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

@@ -1,234 +0,0 @@
-import { Menu } from "lucide-react";
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Slot } from "../../lib/slot";
-import { Sheet, SheetClose, SheetContent, SheetTitle, SheetTrigger } from "../overlays/sheet";
-import { Button } from "../primitives/button";
-
-type MobileMenuState = {
-  /** True while rendering inside the mobile Sheet copy of the nav content. */
-  isMobile: boolean;
-  variant?: NavigationVariant;
-};
-
-const MobileMenuContext = React.createContext<MobileMenuState>({ isMobile: false });
-
-/** @internal Undocumented — not part of the public API surface. */
-type NavigationVariant = "nokia";
-
-// Nokia 3310-style monochrome LCD skin for the mobile Sheet. See
-// src/styles/nokia.css for the palette/font tokens and scanline texture.
-const NOKIA_SHEET_CLASSNAME =
-  "nokia-screen rounded-none border-[6px] border-nokia-bezel bg-nokia-screen p-4 font-nokia text-nokia-ink shadow-[0_0_0_3px_var(--color-nokia-screen-deep),0_10px_30px_-6px_rgba(0,0,0,0.65)]";
-const NOKIA_SHEET_CLOSE_CLASSNAME =
-  "text-nokia-ink hover:bg-nokia-ink hover:text-nokia-screen rounded-none border-2 border-nokia-ink";
-const NOKIA_LIST_CLASSNAME = "!grid grid-cols-3 gap-3";
-const NOKIA_ITEM_CLASSNAME =
-  "!h-auto !max-h-none w-full flex-col justify-center gap-1 rounded-none border-2 border-nokia-ink/40 px-2 py-3 text-center font-nokia text-base tracking-widest uppercase hover:bg-transparent active:bg-nokia-ink active:text-nokia-screen data-[active]:border-nokia-ink data-[active]:bg-nokia-ink data-[active]:text-nokia-screen";
-
-export interface NavigationRootProps {
-  children: ReactNode;
-  ariaLabel?: string;
-  className?: string;
-  /**
-   * @internal Undocumented mobile-Sheet skin, not part of the public API
-   * (no README/Storybook entry). Opt in at your own risk.
-   */
-  variant?: NavigationVariant;
-}
-
-/**
- * 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,
-  variant,
-}: NavigationRootProps) {
-  const [mobileOpen, setMobileOpen] = React.useState(false);
-  const isNokia = variant === "nokia";
-
-  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={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
-              className={isNokia ? NOKIA_SHEET_CLASSNAME : undefined}
-              closeClassName={isNokia ? NOKIA_SHEET_CLOSE_CLASSNAME : undefined}
-            >
-              <SheetTitle className="sr-only">Navigation menu</SheetTitle>
-              <div className="mt-8 flex flex-1 flex-col gap-4">
-                <MobileMenuContext.Provider value={{ isMobile: true, variant }}>
-                  {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, variant } = React.useContext(MobileMenuContext);
-  const isNokia = isMobile && variant === "nokia";
-  return (
-    <ul
-      className={cn(
-        "flex items-center gap-1",
-        isMobile && "flex-col items-stretch gap-1",
-        isNokia && NOKIA_LIST_CLASSNAME,
-        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, variant } = React.useContext(MobileMenuContext);
-  const isNokia = isMobile && variant === "nokia";
-  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",
-    isNokia && NOKIA_ITEM_CLASSNAME,
-    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, variant } = React.useContext(MobileMenuContext);
-  const isNokia = isMobile && variant === "nokia";
-  return (
-    <div
-      className={cn(
-        "flex items-center gap-3",
-        isMobile && "mt-2 flex-col items-stretch gap-3 border-t pt-4",
-        isNokia && "border-nokia-ink/40",
-        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/pagination-controls.stories.tsx

@@ -1,41 +0,0 @@
-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 (disabled controls)",
-  args: { ...baseArgs, totalPages: 1 },
-  render: () => <PaginationPreview totalPages={1} />,
-};

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

@@ -1,46 +0,0 @@
-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. */
-export function PaginationControls({
-  currentPage,
-  totalPages,
-  onPageChange,
-}: PaginationControlsProps) {
-  return (
-    <div className="border-border bg-background text-foreground inline-flex w-fit shrink-0 items-center self-start overflow-hidden rounded-full border text-sm">
-      <Button
-        type="button"
-        variant="outline"
-        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 />
-      </Button>
-      <span className="min-w-20 px-3 text-center text-xs tabular-nums">
-        {currentPage + 1} of {totalPages}
-      </span>
-      <Button
-        type="button"
-        variant="outline"
-        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"
-      >
-        <ChevronRight className="size-4" aria-hidden />
-      </Button>
-    </div>
-  );
-}

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

@@ -1,48 +0,0 @@
-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-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-muted-foreground p-4 text-sm">
-          Change your password here. After saving, you'll be logged out.
-        </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

@@ -1,52 +0,0 @@
-import { Tabs as TabsPrimitive } from "@base-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-muted flex h-auto w-full items-center gap-1 rounded-full border p-1",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Tab>) {
-  return (
-    <TabsPrimitive.Tab
-      data-slot="tabs-trigger"
-      className={cn(
-        "text-foreground flex flex-1 items-center justify-center gap-2 rounded-full px-3 py-2 text-sm font-medium whitespace-nowrap transition-all",
-        "disabled:pointer-events-none disabled:opacity-50",
-        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
-        "data-active:ring-1 data-active:ring-inset data-active:bg-background data-active:text-foreground data-active:ring-border",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Panel>) {
-  return (
-    <TabsPrimitive.Panel
-      data-slot="tabs-content"
-      className={cn(
-        "focus-visible:bg-muted/10 mt-2 rounded-md focus-visible:border focus-visible:outline-none",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Tabs, TabsContent, TabsList, TabsTrigger };

package/src/components/overlays/bottom-sheet.stories.tsx

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { BottomSheet } from "./bottom-sheet";
-
-const meta = {
-  title: "Overlays/BottomSheet",
-  component: BottomSheet,
-  tags: ["autodocs"],
-} satisfies Meta<typeof BottomSheet>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    label: "Example panel",
-    children: "Panel content",
-  },
-  render: () => (
-    <div className="bg-muted relative h-105 w-120 overflow-hidden rounded-xl border">
-      <BottomSheet
-        label="Example panel"
-        defaultExpanded
-        className="bg-card absolute inset-x-4 bottom-4 max-h-[70%] rounded-2xl border shadow-lg"
-        scrollClassName="p-4"
-      >
-        <p className="text-sm font-semibold">Drag the handle or press it to collapse.</p>
-        <p className="text-muted-foreground mt-1 text-sm">
-          Non-modal persistent panel. Positioning and sizing are app-owned via className.
-        </p>
-      </BottomSheet>
-    </div>
-  ),
-};
-
-export const Collapsed: Story = {
-  args: {
-    label: "Example panel",
-    children: "Panel content",
-  },
-  render: () => (
-    <div className="bg-muted relative h-105 w-120 overflow-hidden rounded-xl border">
-      <BottomSheet
-        label="Example panel"
-        className="bg-card absolute inset-x-4 bottom-4 max-h-[70%] rounded-2xl border shadow-lg"
-        scrollClassName="p-4"
-      >
-        <p className="text-sm font-semibold">Starts collapsed to its 48px peek.</p>
-      </BottomSheet>
-    </div>
-  ),
-};