@adres/mgda-ui 0.0.0-stage → 0.0.2

package/src/components/page-header.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { cn } from "../lib/cn"
+
+export interface PageHeaderProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Page or section title. Rendered as an `<h1>` with `t-h1` typography. */
+  title: React.ReactNode
+  /** Optional subtitle / context line shown directly under the title. */
+  subtitle?: React.ReactNode
+  /**
+   * Right-aligned slot - typically `<Button>`s, a search input, a `Select`,
+   * or any other action(s) the page exposes at the top. Wraps to a new line
+   * on narrow viewports rather than truncating.
+   */
+  children?: React.ReactNode
+}
+
+/**
+ * PageHeader - top-of-content heading row.
+ *
+ * Pairs an h1 title (using `t-h1`) with an optional subtitle on the start
+ * side and a free-form actions slot on the end side. Designed to sit at the
+ * top of a page or major section inside an app shell.
+ *
+ * Layout:
+ *   • Title + subtitle take the available inline space (`flex-1`).
+ *   • Actions sit on the inline-end (`shrink-0`) and wrap onto a new line on
+ *     narrow viewports.
+ *   • Title and actions are baseline-aligned to the bottom of the row so a
+ *     tall title (multi-line wrap) keeps actions anchored to its baseline.
+ *
+ * @example
+ *   <PageHeader title="Students" subtitle="38 active learners">
+ *     <Button variant="outline">Import CSV</Button>
+ *     <Button>Invite students</Button>
+ *   </PageHeader>
+ */
+export const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
+  ({ className, title, subtitle, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "ax:pb-lg ax:flex ax:flex-wrap ax:items-start ax:gap-md ax:justify-between",
+          className,
+        )}
+        {...props}
+      >
+        <div className="ax:flex ax:flex-col ax:gap-xs ax:flex-1 ax:min-w-0">
+          <h1 className="ax:t-h1">{title}</h1>
+          {subtitle && (
+            <p className="ax:t-body-sm ax:text-muted-foreground">{subtitle}</p>
+          )}
+        </div>
+        {children && (
+          <div className="ax:flex ax:items-center ax:gap-md ax:shrink-0 ax:flex-wrap">
+            {children}
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+PageHeader.displayName = "PageHeader"

package/src/components/pagination.stories.tsx

@@ -0,0 +1,110 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import {
+  Pagination, PaginationContent, PaginationItem, PaginationLink,
+  PaginationPrevious, PaginationNext, PaginationEllipsis,
+} from "./pagination"
+
+const meta: Meta<typeof Pagination> = {
+  title: "Components/Pagination",
+  component: Pagination,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Pagination>
+
+export const Default: Story = {
+  render: () => {
+    const [page, setPage] = React.useState(1)
+    const pageCount = 5
+    return (
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious disabled={page === 1} onClick={() => setPage((p) => p - 1)} />
+          </PaginationItem>
+          {Array.from({ length: pageCount }, (_, i) => i + 1).map((n) => (
+            <PaginationItem key={n}>
+              <PaginationLink isActive={n === page} onClick={() => setPage(n)}>
+                {n}
+              </PaginationLink>
+            </PaginationItem>
+          ))}
+          <PaginationItem>
+            <PaginationNext disabled={page === pageCount} onClick={() => setPage((p) => p + 1)} />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    )
+  },
+}
+
+export const WithEllipsis: Story = {
+  render: () => {
+    const [page, setPage] = React.useState(6)
+    const pageCount = 20
+
+    const link = (n: number) => (
+      <PaginationItem key={n}>
+        <PaginationLink isActive={n === page} onClick={() => setPage(n)}>{n}</PaginationLink>
+      </PaginationItem>
+    )
+
+    return (
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious disabled={page === 1} onClick={() => setPage((p) => p - 1)} />
+          </PaginationItem>
+          {link(1)}
+          {page > 3 && (
+            <PaginationItem><PaginationEllipsis /></PaginationItem>
+          )}
+          {[page - 1, page, page + 1]
+            .filter((n) => n > 1 && n < pageCount)
+            .map(link)}
+          {page < pageCount - 2 && (
+            <PaginationItem><PaginationEllipsis /></PaginationItem>
+          )}
+          {link(pageCount)}
+          <PaginationItem>
+            <PaginationNext disabled={page === pageCount} onClick={() => setPage((p) => p + 1)} />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    )
+  },
+}
+
+export const Small: Story = {
+  render: () => (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem><PaginationPrevious size="sm" /></PaginationItem>
+        {[1, 2, 3].map((n) => (
+          <PaginationItem key={n}>
+            <PaginationLink size="sm" isActive={n === 1}>{n}</PaginationLink>
+          </PaginationItem>
+        ))}
+        <PaginationItem><PaginationNext size="sm" /></PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  ),
+}
+
+export const DisabledEdges: Story = {
+  render: () => (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem><PaginationPrevious disabled /></PaginationItem>
+        {[1, 2, 3].map((n) => (
+          <PaginationItem key={n}>
+            <PaginationLink isActive={n === 1}>{n}</PaginationLink>
+          </PaginationItem>
+        ))}
+        <PaginationItem><PaginationNext /></PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  ),
+}

package/src/components/pagination.test.tsx

@@ -0,0 +1,46 @@
+import { describe, expect, it } from "vitest"
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import {
+  Pagination, PaginationContent, PaginationItem, PaginationLink,
+  PaginationPrevious, PaginationNext,
+} from "./pagination"
+
+describe("Pagination", () => {
+  it("renders a nav landmark labelled for pagination", () => {
+    const html = renderToStaticMarkup(
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem><PaginationLink>1</PaginationLink></PaginationItem>
+        </PaginationContent>
+      </Pagination>,
+    )
+    expect(html).toContain('role="navigation"')
+    expect(html).toContain('aria-label="pagination"')
+  })
+
+  it("marks the active page with aria-current and the active fill", () => {
+    const html = renderToStaticMarkup(<PaginationLink isActive>3</PaginationLink>)
+    expect(html).toContain('aria-current="page"')
+    expect(html).toContain("ax:bg-primary-weaker")
+  })
+
+  it("leaves aria-current off inactive pages", () => {
+    const html = renderToStaticMarkup(<PaginationLink>3</PaginationLink>)
+    expect(html).not.toContain("aria-current")
+  })
+
+  it("defaults Previous/Next labels and lets them be overridden", () => {
+    const defaults = renderToStaticMarkup(<PaginationPrevious />)
+    expect(defaults).toContain("Previous")
+
+    const custom = renderToStaticMarkup(<PaginationNext aria-label="Older results">Older</PaginationNext>)
+    expect(custom).toContain("Older")
+    expect(custom).toContain('aria-label="Older results"')
+  })
+
+  it("passes disabled through to the native button", () => {
+    const html = renderToStaticMarkup(<PaginationPrevious disabled />)
+    expect(html).toContain("disabled")
+  })
+})

package/src/components/pagination.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import { tv, type VariantProps } from "tailwind-variants"
+import { cn } from "../lib/cn"
+
+/**
+ * Pagination - a composable set of parts (Pagination, PaginationContent,
+ * PaginationItem, PaginationLink, PaginationPrevious, PaginationNext,
+ * PaginationEllipsis), following the shadcn/ui pattern: plain semantic
+ * elements (nav/ul/li/button) styled with design-system tokens, no Radix
+ * primitive underneath - page navigation doesn't need focus-trapping or
+ * portal behaviour, just a nav landmark and native buttons.
+ *
+ * Ships the primitives only, not a page-range calculator: compose the
+ * `PaginationItem`/`PaginationEllipsis` list yourself from your own page
+ * count, the same way shadcn's docs do.
+ */
+export interface PaginationProps extends React.ComponentPropsWithoutRef<"nav"> {}
+
+export const Pagination = React.forwardRef<HTMLElement, PaginationProps>(
+  ({ className, ...props }, ref) => (
+    <nav
+      ref={ref}
+      role="navigation"
+      aria-label="pagination"
+      className={cn("ax:mx-auto ax:flex ax:w-full ax:justify-center", className)}
+      {...props}
+    />
+  )
+)
+Pagination.displayName = "Pagination"
+
+export const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentPropsWithoutRef<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn("ax:flex ax:flex-row ax:items-center ax:gap-1", className)} {...props} />
+  )
+)
+PaginationContent.displayName = "PaginationContent"
+
+export const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+  (props, ref) => <li ref={ref} {...props} />
+)
+PaginationItem.displayName = "PaginationItem"
+
+export const paginationLinkVariants = tv({
+  base: [
+    "ax:inline-flex ax:items-center ax:justify-center ax:gap-xs ax:whitespace-nowrap ax:select-none ax:cursor-pointer",
+    "ax:font-medium ax:leading-none ax:text-sm ax:rounded-(--button-radius)",
+    "ax:transition-colors ax:transition-snappy",
+    "ax:focus-visible:outline-none ax:focus-visible:ring-2 ax:focus-visible:ring-ring ax:focus-visible:ring-offset-2 ax:focus-visible:ring-offset-background",
+    "ax:disabled:pointer-events-none ax:disabled:opacity-50",
+    "ax:[&_svg]:pointer-events-none ax:[&_svg]:size-4 ax:[&_svg]:shrink-0",
+  ],
+  variants: {
+    isActive: {
+      // Mirrors Button's primary fill: emphasis aliases auto-invert in dark.
+      true:  "ax:bg-primary-weaker ax:text-primary-foreground ax:dark:bg-primary-strong ax:dark:text-primary-weaker",
+      false: "ax:bg-transparent ax:text-foreground ax:hover:bg-muted",
+    },
+    size: {
+      sm: "ax:size-2xl",
+      md: "ax:size-3xl",
+    },
+  },
+  defaultVariants: {
+    isActive: false,
+    size: "md",
+  },
+}, { twMerge: false })
+
+export interface PaginationLinkProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof paginationLinkVariants> {
+  /** Render the child element instead of a button (e.g. a router `<Link>`). */
+  asChild?: boolean
+  /** Marks the current page: sets `aria-current="page"` and the active fill. */
+  isActive?: boolean
+}
+
+export const PaginationLink = React.forwardRef<HTMLButtonElement, PaginationLinkProps>(
+  ({ className, isActive, size, asChild = false, type = "button", ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        ref={ref}
+        type={asChild ? undefined : type}
+        aria-current={isActive ? "page" : undefined}
+        className={cn(paginationLinkVariants({ isActive, size }), className)}
+        {...props}
+      />
+    )
+  }
+)
+PaginationLink.displayName = "PaginationLink"
+
+export interface PaginationNavLinkProps extends Omit<PaginationLinkProps, "isActive"> {}
+
+export const PaginationPrevious = React.forwardRef<HTMLButtonElement, PaginationNavLinkProps>(
+  ({ className, children, "aria-label": ariaLabel = "Go to previous page", ...props }, ref) => (
+    <PaginationLink
+      ref={ref}
+      aria-label={ariaLabel}
+      className={cn("ax:w-auto ax:px-sm", className)}
+      {...props}
+    >
+      <ChevronLeft />
+      {children !== undefined ? children : <span className="ax:hidden ax:sm:inline">Previous</span>}
+    </PaginationLink>
+  )
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+export const PaginationNext = React.forwardRef<HTMLButtonElement, PaginationNavLinkProps>(
+  ({ className, children, "aria-label": ariaLabel = "Go to next page", ...props }, ref) => (
+    <PaginationLink
+      ref={ref}
+      aria-label={ariaLabel}
+      className={cn("ax:w-auto ax:px-sm", className)}
+      {...props}
+    >
+      {children !== undefined ? children : <span className="ax:hidden ax:sm:inline">Next</span>}
+      <ChevronRight />
+    </PaginationLink>
+  )
+)
+PaginationNext.displayName = "PaginationNext"
+
+export const PaginationEllipsis = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      aria-hidden="true"
+      className={cn("ax:flex ax:size-3xl ax:items-center ax:justify-center ax:text-muted-foreground", className)}
+      {...props}
+    >
+      <MoreHorizontal className="ax:size-4" />
+      <span className="ax:sr-only">More pages</span>
+    </span>
+  )
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"

package/src/components/popover.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button } from "./button"
+import { Popover, PopoverContent, PopoverTrigger } from "./popover"
+
+const meta: Meta<typeof Popover> = {
+  title: "Components/Popover",
+  component: Popover,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Popover>
+
+export const Default: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Open popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="ax:w-64">
+        <p className="ax:t-body-sm">Popover content with helpful context.</p>
+      </PopoverContent>
+    </Popover>
+  ),
+}

package/src/components/popover.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/cn"
+
+export type PopoverSize = "sm" | "md" | "lg"
+
+export const Popover        = PopoverPrimitive.Root
+export const PopoverTrigger = PopoverPrimitive.Trigger
+export const PopoverAnchor  = PopoverPrimitive.Anchor
+export const PopoverClose   = PopoverPrimitive.Close
+
+// Padding scale is now smooth: sm → md → lg (was sm → md → xl, which skipped lg).
+// Each size sets only width + padding; text sizing is left to the consumer's
+// child elements (headings, body text, fields) so the popover doesn't impose
+// an ambient text-size that fights nested typography.
+const popoverContentVariants = cva(
+  [
+    "ax:z-[1100] ax:rounded-(--input-radius) ax:border ax:border-border ax:bg-popover ax:text-popover-foreground ax:shadow-md ax:outline-none",
+    "ax:data-[state=open]:animate-in ax:data-[state=closed]:animate-out",
+    "ax:data-[state=closed]:fade-out-0 ax:data-[state=open]:fade-in-0",
+    "ax:data-[state=closed]:zoom-out-[0.96] ax:data-[state=open]:zoom-in-[0.96]",
+    "ax:data-[side=bottom]:slide-in-from-top-1",
+    "ax:data-[side=left]:slide-in-from-right-1",
+    "ax:data-[side=right]:slide-in-from-left-1",
+    "ax:data-[side=top]:slide-in-from-bottom-1",
+    "ax:[animation-duration:var(--motion-fast)] ax:[animation-timing-function:var(--motion-ease-out)]",
+    "ax:motion-reduce:animate-none",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "ax:w-56 ax:p-sm",  // 224px · 12px
+        md: "ax:w-72 ax:p-md",  // 288px · 16px
+        lg: "ax:w-96 ax:p-lg",  // 384px · 20px
+      },
+    },
+    defaultVariants: { size: "md" },
+  }
+)
+
+export interface PopoverContentProps
+  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>,
+    VariantProps<typeof popoverContentVariants> {}
+
+export const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  PopoverContentProps
+>(({ className, align = "center", sideOffset = 6, size, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(popoverContentVariants({ size }), className)}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName

package/src/components/pricing.stories.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button } from "./button"
+import { Pricing } from "./pricing"
+
+const tiers = [
+  {
+    name: "Starter",
+    price: "$0",
+    period: "/mo",
+    description: "For individuals getting started.",
+    features: ["1 project", "Basic support"],
+    cta: <Button variant="outline" className="ax:w-full">Get started</Button>,
+  },
+  {
+    name: "Pro",
+    price: "$29",
+    period: "/mo",
+    description: "For growing teams.",
+    features: ["Unlimited projects", "Priority support"],
+    highlighted: true,
+    badge: "Popular",
+    cta: <Button className="ax:w-full">Start trial</Button>,
+  },
+]
+
+const meta: Meta<typeof Pricing> = {
+  title: "Components/Pricing",
+  component: Pricing,
+  tags: ["autodocs"],
+  args: {
+    eyebrow: "Pricing",
+    title: "Simple, transparent pricing",
+    description: "Choose the plan that fits your team.",
+    tiers,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Pricing>
+
+export const Default: Story = {}

package/src/components/pricing.tsx

@@ -0,0 +1,130 @@
+"use client"
+
+import * as React from "react"
+import { Check } from "lucide-react"
+import { motion } from "motion/react"
+import { cn } from "../lib/cn"
+import { useReducedMotion } from "../hooks/use-reduced-motion"
+import { stagger, variants, viewport as defaultViewport } from "../lib/motion"
+
+export interface PricingTier {
+  name: string
+  price: React.ReactNode
+  period?: string
+  description?: string
+  features: string[]
+  cta: React.ReactNode
+  highlighted?: boolean
+  badge?: string
+}
+
+export interface PricingProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: React.ReactNode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  tiers: PricingTier[]
+}
+
+export function Pricing({ className, eyebrow, title, description, tiers, ...props }: PricingProps) {
+  const reduce = useReducedMotion()
+
+  return (
+    <section className={cn("ax:w-full ax:px-xl ax:md:px-3xl ax:py-5xl ax:md:py-6xl", className)} {...props}>
+      <div className="ax:mx-auto ax:max-w-7xl">
+        {(eyebrow || title || description) && (
+          <div className="ax:mx-auto ax:max-w-2xl ax:text-center ax:mb-4xl ax:md:mb-5xl ax:space-y-md">
+            {eyebrow && (
+              <span className="ax:inline-block ax:t-overline ax:text-primary">
+                {eyebrow}
+              </span>
+            )}
+            {title && (
+              <h2 className="ax:t-display-md ax:md:t-display-lg ax:text-foreground ax:[text-wrap:balance]">
+                {title}
+              </h2>
+            )}
+            {description && (
+              <p className="ax:t-body-md ax:md:t-body-lg ax:text-muted-foreground ax:[text-wrap:pretty]">
+                {description}
+              </p>
+            )}
+          </div>
+        )}
+
+        <motion.div
+          className={cn(
+            "ax:grid ax:gap-xl",
+            tiers.length === 2 && "ax:md:grid-cols-2 ax:max-w-3xl ax:mx-auto",
+            tiers.length === 3 && "ax:md:grid-cols-3",
+            tiers.length >= 4 && "ax:md:grid-cols-2 ax:lg:grid-cols-4",
+          )}
+          {...(reduce ? {} : {
+            variants: stagger(0, 0.1),
+            initial: "hidden",
+            whileInView: "visible",
+            viewport: defaultViewport,
+          })}
+        >
+          {tiers.map((tier, i) => (
+            <motion.div
+              key={tier.name}
+              {...(reduce ? {} : { variants: variants.fadeUp })}
+              className={cn(
+                "ax:relative ax:flex ax:flex-col ax:rounded-xl ax:border ax:p-xl ax:gap-xl",
+                tier.highlighted
+                  ? "ax:border-primary ax:bg-primary ax:text-primary-foreground ax:shadow-lg"
+                  : "ax:border-border ax:bg-card ax:text-card-foreground ax:shadow-sm"
+              )}
+            >
+              {tier.badge && (
+                <span
+                  className={cn(
+                    "ax:absolute ax:-top-3 ax:left-1/2 ax:-translate-x-1/2 ax:rounded-full ax:px-3 ax:py-0.5 ax:t-label-sm",
+                    tier.highlighted
+                      ? "ax:bg-background ax:text-foreground"
+                      : "ax:bg-primary ax:text-primary-foreground"
+                  )}
+                >
+                  {tier.badge}
+                </span>
+              )}
+
+              <div className="ax:space-y-1.5">
+                <div className="ax:t-overline ax:opacity-80">{tier.name}</div>
+                <div className="ax:flex ax:items-end ax:gap-2xs">
+                  <span className="ax:t-display-lg">{tier.price}</span>
+                  {tier.period && (
+                    <span className="ax:t-body-sm ax:opacity-70 ax:mb-1">/{tier.period}</span>
+                  )}
+                </div>
+                {tier.description && (
+                  <p className={cn("ax:t-body-sm", tier.highlighted ? "ax:opacity-80" : "ax:text-muted-foreground")}>
+                    {tier.description}
+                  </p>
+                )}
+              </div>
+
+              <ul className="ax:flex-1 ax:space-y-2.5">
+                {tier.features.map((feature) => (
+                  <li key={feature} className="ax:flex ax:items-start ax:gap-2.5 ax:t-body-sm">
+                    <Check
+                      className={cn(
+                        "ax:size-4 ax:shrink-0 ax:mt-0.5",
+                        tier.highlighted ? "ax:text-primary-foreground" : "ax:text-primary"
+                      )}
+                    />
+                    <span className={tier.highlighted ? "ax:opacity-90" : "ax:text-foreground"}>
+                      {feature}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+
+              <div>{tier.cta}</div>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  )
+}

package/src/components/progress.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Progress } from "./progress"
+
+const meta: Meta<typeof Progress> = {
+  title: "Components/Progress",
+  component: Progress,
+  tags: ["autodocs"],
+  args: {
+    value: 65,
+    size: "md",
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Progress>
+
+export const Default: Story = {}
+
+export const Ring: Story = {
+  args: { shape: "ring", value: 72 },
+}