@adres/mgda-ui 0.0.0-stage → 0.0.1

package/src/components/nav-sidebar.tsx

@@ -0,0 +1,462 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown, ChevronLeft } from "lucide-react"
+import { Sidebar, SidebarSection } from "./sidebar"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip"
+import { cn } from "../lib/cn"
+
+// ─── Nav config types ────────────────────────────────────────────────────────
+
+export interface NavSubItem {
+  href: string
+  label: string
+  /** Optional trailing count rendered on the inline-end of the row, e.g. a
+   *  per-category item tally. Muted + `tabular-nums` so columns of numbers
+   *  line up. Omit (or pass `undefined`) to render no trailing element. */
+  count?: number
+}
+
+export interface NavItem {
+  href: string
+  label: string
+  icon: React.ReactNode
+  /** When set, the item is active only on an exact pathname match. */
+  exact?: boolean
+  /** Show a small accent dot at the top-end corner of the icon. Accepts
+   *  `true` for "just-on" or a number that is treated as truthy (>0 → on).
+   *  Items with children never render a dot - the chevron toggle owns the
+   *  trailing space and the dot would compete with it. */
+  dot?: boolean | number
+  /** Optional trailing count, e.g. saved items or drafts. Rendered like
+   *  `NavSubItem.count` (muted, `tabular-nums`, hidden at 0). Collapsed rows
+   *  show it in the tooltip instead. Ignored on items with children, where the
+   *  chevron owns the trailing space. */
+  count?: number
+  /** Nested children expand under this item with a tree-indent guide and a
+   *  chevron toggle. */
+  children?: NavSubItem[]
+}
+
+export interface NavSection {
+  /** Overline section label (omitted when undefined). */
+  label?: string
+  items: NavItem[]
+}
+
+// ─── Component props ─────────────────────────────────────────────────────────
+
+export interface NavSidebarProps {
+  sections: NavSection[]
+  /** The application's current pathname - used to compute active rows and to
+   *  auto-open the active branch on first render. Pass `usePathname()` from
+   *  your router. */
+  currentPath: string
+  /** Optional brand slot rendered in the sidebar header. Typically a logo
+   *  with an optional sub-label. Hidden in collapsed mode (the collapse
+   *  toggle takes the slot instead) - the consumer is responsible for
+   *  rendering a compact mark separately if needed. */
+  brand?: React.ReactNode
+  /** Optional footer slot, typically a `SidebarUserCard`. */
+  footer?: React.ReactNode
+
+  // ─── Controlled / uncontrolled collapse ────────────────────────────────
+  collapsed?: boolean
+  defaultCollapsed?: boolean
+  onCollapsedChange?: (collapsed: boolean) => void
+  /** Hide the built-in collapse toggle. Useful when the consumer controls
+   *  collapse from elsewhere (e.g. a media-query hook on mobile). */
+  hideCollapseToggle?: boolean
+
+  // ─── Controlled / uncontrolled per-item open overrides ─────────────────
+  /** Map of item href → explicit open state. Items not present in the map
+   *  fall back to auto-open-when-active. */
+  expandedItems?: Record<string, boolean>
+  defaultExpandedItems?: Record<string, boolean>
+  onExpandedItemsChange?: (next: Record<string, boolean>) => void
+
+  // ─── Link integration ──────────────────────────────────────────────────
+  /** Component used to render navigable rows. Defaults to a plain anchor;
+   *  pass your router's link component (e.g. Next.js `<Link>`) to get
+   *  client-side navigation. Receives standard anchor props. */
+  LinkComponent?: React.ElementType
+
+  // ─── i18n / a11y labels ────────────────────────────────────────────────
+  expandSidebarLabel?: string
+  collapseSidebarLabel?: string
+  /** Called with `(label)` to format aria-labels for chevron toggle buttons.
+   *  Defaults to `"Expand {label}"` / `"Collapse {label}"`. */
+  expandItemLabel?: (label: string) => string
+  collapseItemLabel?: (label: string) => string
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function isItemActive(href: string, pathname: string, exact?: boolean): boolean {
+  if (exact) return pathname === href
+  return pathname === href || pathname.startsWith(`${href}/`)
+}
+
+function isItemOpenAuto(item: NavItem, pathname: string): boolean {
+  if (!item.children?.length) return false
+  if (isItemActive(item.href, pathname, item.exact)) return true
+  return item.children.some((c) => isItemActive(c.href, pathname))
+}
+
+function countLabel(count: number) {
+  return `${count} item${count === 1 ? "" : "s"}`
+}
+
+function NavCount({ count }: { count: number }) {
+  return (
+    <span className="ax:t-caption ax:text-muted-foreground ax:tabular-nums ax:shrink-0" aria-label={countLabel(count)}>
+      {count}
+    </span>
+  )
+}
+
+// ─── Internal: NavRow ────────────────────────────────────────────────────────
+//
+// Renders a single top-level nav row. When the item has children the chevron
+// is split out as a sibling button so clicking the chevron toggles the
+// submenu without navigating. The "raised white card" active treatment lives
+// on the row when there are no children; when children exist the parent
+// wrapper renders the card so the submenu sits on the same surface.
+
+interface NavRowProps {
+  item: NavItem
+  active: boolean
+  collapsed: boolean
+  open?: boolean
+  onToggle?: () => void
+  LinkComponent: React.ElementType
+  expandItemLabel: (label: string) => string
+  collapseItemLabel: (label: string) => string
+}
+
+function NavRow({
+  item,
+  active,
+  collapsed,
+  open,
+  onToggle,
+  LinkComponent,
+  expandItemLabel,
+  collapseItemLabel,
+}: NavRowProps) {
+  const hasChildren = Boolean(item.children?.length)
+  const dotValue = typeof item.dot === "number" ? item.dot : undefined
+  const showDot = item.dot === true || (typeof item.dot === "number" && item.dot > 0)
+  const count = !hasChildren && item.count !== undefined && item.count > 0 ? item.count : undefined
+
+  const linkBase =
+    "ax:group ax:flex ax:items-center ax:gap-xs ax:t-label-sm " +
+    "ax:rounded-md ax:py-2xs " +
+    "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 "
+
+  const inactiveText = "ax:text-foreground-muted ax:hover:text-foreground-strong"
+  const activeText = "ax:text-primary-foreground"
+  const standaloneActive = !hasChildren && active
+
+  const row = (
+    <LinkComponent
+      href={item.href}
+      aria-current={active ? "page" : undefined}
+      // Collapsed rows render only the icon, so the label has to come from here.
+      aria-label={collapsed ? (count !== undefined ? `${item.label}, ${countLabel(count)}` : item.label) : undefined}
+      className={cn(
+        linkBase,
+        hasChildren ? "ax:ps-xs ax:pe-2xs ax:flex-1" : "ax:ps-xs ax:pe-xs",
+        standaloneActive
+          ? "ax:bg-card ax:shadow-xs " + activeText
+          : active
+            ? activeText
+            : inactiveText + " ax:hover:bg-card/60",
+      )}
+    >
+      <span className="ax:relative ax:size-4 ax:shrink-0 ax:flex ax:items-center ax:justify-center ax:[&>svg]:size-4 ax:[&>svg]:shrink-0">
+        {item.icon}
+        {showDot && !hasChildren && (
+          <span
+            className="ax:absolute ax:-top-0.5 ax:-inset-e-0.5 ax:size-2 ax:rounded-full ax:bg-accent ax:shrink-0"
+            aria-label={dotValue ? `${dotValue} unread` : "Unread"}
+          />
+        )}
+      </span>
+      {!collapsed && <span className="ax:flex-1 ax:truncate ax:leading-normal">{item.label}</span>}
+      {!collapsed && count !== undefined && <NavCount count={count} />}
+    </LinkComponent>
+  )
+
+  // ─── Collapsed: icon-only row with a tooltip ─────────────────────────
+  if (collapsed) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{row}</TooltipTrigger>
+        <TooltipContent side="right">
+          {item.label}
+          {count !== undefined && <span className="ax:tabular-nums">{` · ${count}`}</span>}
+        </TooltipContent>
+      </Tooltip>
+    )
+  }
+
+  if (!hasChildren) return row
+
+  // ─── With children: row + chevron toggle as siblings ─────────────────
+  return (
+    <div
+      className={cn(
+        "ax:flex ax:items-center ax:rounded-md ax:transition-colors ax:transition-snappy",
+        active ? "" : "ax:hover:bg-card/60",
+      )}
+    >
+      {row}
+      <button
+        type="button"
+        onClick={onToggle}
+        aria-label={open ? collapseItemLabel(item.label) : expandItemLabel(item.label)}
+        aria-expanded={open}
+        className={cn(
+          "ax:shrink-0 ax:size-2xl ax:me-2xs ax:rounded-md ax:flex ax:items-center ax:justify-center",
+          "ax:text-muted-foreground ax:hover:text-foreground ax:transition-colors",
+          "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",
+        )}
+      >
+        <ChevronDown
+          className={cn(
+            "ax:size-3.5 ax:transition-transform",
+            open ? "ax:rotate-0" : "ax:-rotate-90 ax:rtl:rotate-90",
+          )}
+          aria-hidden="true"
+        />
+      </button>
+    </div>
+  )
+}
+
+// ─── Internal: NavSubRow ─────────────────────────────────────────────────────
+
+interface NavSubRowProps {
+  href: string
+  label: string
+  active: boolean
+  count?: number
+  LinkComponent: React.ElementType
+}
+
+function NavSubRow({ href, label, count, active, LinkComponent }: NavSubRowProps) {
+  return (
+    <LinkComponent
+      href={href}
+      aria-current={active ? "page" : undefined}
+      className={cn(
+        "ax:flex ax:items-center ax:gap-sm ax:ps-md ax:pe-sm ax:py-2xs ax:t-label-sm ax:rounded-md",
+        "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",
+        active ? "ax:text-foreground" : "ax:text-muted-foreground ax:hover:text-foreground",
+      )}
+    >
+      <span className="ax:flex-1 ax:truncate ax:leading-normal">{label}</span>
+      {count !== undefined && count > 0 && <NavCount count={count} />}
+    </LinkComponent>
+  )
+}
+
+// ─── NavSidebar ──────────────────────────────────────────────────────────────
+
+/**
+ * NavSidebar - opinionated, product-agnostic sidebar navigation.
+ *
+ * Combines the structural primitives (`Sidebar`, `SidebarSection`) with a
+ * custom row visual: an active "raised white card" state that extends to
+ * wrap nested sub-items, a chevron toggle that opens/closes the submenu
+ * without navigating, and a status-dot badge that sits on the top-end
+ * corner of the icon (visible in both expanded and collapsed modes).
+ *
+ * Pass your router's link component via `LinkComponent` for client-side
+ * navigation; defaults to a plain `<a>`. State (collapse, per-item
+ * open overrides) can be controlled or uncontrolled.
+ *
+ * @example
+ *   <NavSidebar
+ *     LinkComponent={Link}
+ *     currentPath={usePathname()}
+ *     brand={<MyLogo />}
+ *     footer={<SidebarUserCard avatar={…} name="Sara" />}
+ *     sections={[
+ *       {
+ *         label: "Main menu",
+ *         items: [
+ *           { href: "/dashboard", label: "Dashboard", icon: <Home /> },
+ *           {
+ *             href: "/courses",
+ *             label: "Courses",
+ *             icon: <Book />,
+ *             children: [
+ *               { href: "/courses",            label: "All courses" },
+ *               { href: "/courses/categories", label: "Categories" },
+ *             ],
+ *           },
+ *         ],
+ *       },
+ *     ]}
+ *   />
+ */
+export function NavSidebar({
+  sections,
+  currentPath,
+  brand,
+  footer,
+  collapsed: collapsedProp,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  hideCollapseToggle,
+  expandedItems: expandedProp,
+  defaultExpandedItems,
+  onExpandedItemsChange,
+  LinkComponent = "a",
+  expandSidebarLabel = "Expand sidebar",
+  collapseSidebarLabel = "Collapse sidebar",
+  expandItemLabel = (label) => `Expand ${label}`,
+  collapseItemLabel = (label) => `Collapse ${label}`,
+}: NavSidebarProps) {
+  // ─── Uncontrolled collapse state ──────────────────────────────────────
+  const [collapsedInternal, setCollapsedInternal] = React.useState(defaultCollapsed)
+  const collapsed = collapsedProp ?? collapsedInternal
+  const setCollapsed = (next: boolean) => {
+    if (collapsedProp === undefined) setCollapsedInternal(next)
+    onCollapsedChange?.(next)
+  }
+
+  // ─── Uncontrolled per-item open overrides ─────────────────────────────
+  const [overridesInternal, setOverridesInternal] = React.useState<Record<string, boolean>>(
+    defaultExpandedItems ?? {},
+  )
+  const overrides = expandedProp ?? overridesInternal
+  const setOverrides = (next: Record<string, boolean>) => {
+    if (expandedProp === undefined) setOverridesInternal(next)
+    onExpandedItemsChange?.(next)
+  }
+
+  const isItemOpenResolved = (item: NavItem): boolean => {
+    if (item.href in overrides) return overrides[item.href]!
+    return isItemOpenAuto(item, currentPath)
+  }
+
+  const toggleItem = (item: NavItem) => {
+    const current = isItemOpenResolved(item)
+    setOverrides({ ...overrides, [item.href]: !current })
+  }
+
+  // ─── Brand area ────────────────────────────────────────────────────────
+  // The collapse toggle used to live here as an icon button; it's now the
+  // floating circular button straddling the sidebar's edge (below), so the
+  // brand row just hides the logo when collapsed.
+  const brandSlot = collapsed ? null : (
+    <div className="ax:flex ax:items-center ax:w-full ax:overflow-hidden ax:gap-xs">{brand}</div>
+  )
+
+  // The wrapper needs its own explicit width matching `Sidebar`'s (rather than
+  // shrink-wrapping it) so the floating toggle's `end-0` anchor lands exactly
+  // on the sidebar's real edge instead of drifting with any ambiguity in the
+  // surrounding flex layout. Mirrors `Sidebar`'s own default width/collapsed
+  // width (16rem / 4rem) since `width` isn't exposed as a prop here.
+  const wrapperWidth = collapsed ? "4rem" : "16rem"
+
+  return (
+    <div className="ax:relative ax:h-full ax:shrink-0 ax:transition-[width] ax:duration-300" style={{ width: wrapperWidth }}>
+      <Sidebar
+        collapsed={collapsed}
+        brand={brandSlot}
+        footer={footer}
+        className="ax:bg-transparent ax:border-e-0"
+      >
+        {sections.map((section, sectionIdx) => (
+        <SidebarSection
+          key={section.label ?? sectionIdx}
+          label={section.label}
+          collapsed={collapsed}
+          className={sectionIdx === 0 ? undefined : "ax:border-t ax:border-border ax:mt-sm"}
+        >
+          {section.items.map((item) => {
+            const hasChildren = Boolean(item.children?.length)
+            const active = isItemActive(item.href, currentPath, item.exact)
+            const open = hasChildren ? isItemOpenResolved(item) : false
+            // When an item has children AND is active, the elevated white
+            // card wraps both the parent row and the submenu so the whole
+            // branch reads as one surface. When inactive, the wrapper is a
+            // transparent layout container.
+            const groupActiveCard = hasChildren && active
+
+            return (
+              <div
+                key={item.href}
+                className={cn(
+                  "ax:flex ax:flex-col ax:gap-2xs ax:rounded-md ax:transition-colors",
+                  groupActiveCard && "ax:bg-transparent",
+                )}
+              >
+                <NavRow
+                  item={item}
+                  active={active}
+                  collapsed={collapsed}
+                  open={open}
+                  onToggle={() => toggleItem(item)}
+                  LinkComponent={LinkComponent}
+                  expandItemLabel={expandItemLabel}
+                  collapseItemLabel={collapseItemLabel}
+                />
+                {!collapsed && hasChildren && open && (
+                  <div className="ax:relative ax:ms-md ax:ps-sm ax:pb-sm ax:flex ax:flex-col ax:gap-2xs">
+                    <span
+                      aria-hidden="true"
+                      className="ax:absolute ax:inset-y-0 ax:inset-s-0 ax:w-px ax:bg-border"
+                    />
+                    {item.children!.map((child) => (
+                      <NavSubRow
+                        key={child.href}
+                        href={child.href}
+                        label={child.label}
+                        count={child.count}
+                        active={isItemActive(child.href, currentPath)}
+                        LinkComponent={LinkComponent}
+                      />
+                    ))}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </SidebarSection>
+      ))}
+      </Sidebar>
+
+      {/* Floating collapse/expand toggle - vertically centred, straddling
+          the border between the sidebar and the main container. */}
+      {!hideCollapseToggle && (
+        <button
+          type="button"
+          onClick={() => setCollapsed(!collapsed)}
+          aria-label={collapsed ? expandSidebarLabel : collapseSidebarLabel}
+          className={cn(
+            "ax:absolute ax:top-1/2 ax:inset-e-0 ax:z-20 ax:-translate-y-1/2 ax:translate-x-1/2 ax:rtl:-translate-x-1/2 ax:-mr-3.5",
+            "ax:flex ax:h-8 ax:w-6 ax:items-center ax:justify-center ax:rounded-sm",
+            "ax:border ax:border-border ax:bg-card ax:text-muted-foreground ax:shadow-xs",
+            "ax:transition-colors ax:hover:bg-muted ax:hover:text-foreground",
+            "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",
+          )}
+        >
+          <ChevronLeft
+            aria-hidden="true"
+            className={cn(
+              "ax:size-4 ax:transition-transform",
+              collapsed ? "ax:rotate-180 ax:rtl:rotate-0" : "ax:rotate-0 ax:rtl:rotate-180",
+            )}
+          />
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/number-stepper.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { NumberStepper } from "./number-stepper"
+
+const meta: Meta<typeof NumberStepper> = {
+  title: "Components/NumberStepper",
+  component: NumberStepper,
+  tags: ["autodocs"],
+  args: {
+    defaultValue: 1,
+    min: 0,
+    max: 10,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof NumberStepper>
+
+export const Default: Story = {}

package/src/components/number-stepper.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import * as React from "react"
+import { Minus, Plus } from "lucide-react"
+import { Button } from "./button"
+import { Input } from "./input"
+import { cn } from "../lib/cn"
+
+export type NumberStepperSize = "sm" | "md" | "lg"
+
+export interface NumberStepperProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  value: number
+  onChange: (next: number) => void
+  /** Smallest value the stepper allows. Defaults to 1. */
+  min?: number
+  /** Largest value the stepper allows. Defaults to 999. */
+  max?: number
+  /** Increment / decrement amount. Defaults to 1. */
+  step?: number
+  /** Disables the whole control (both buttons + input). Per-bound disabling
+   *  of the +/- buttons still happens automatically at min/max. */
+  disabled?: boolean
+  /** Visual density. Matches Button / Input size scale. */
+  size?: NumberStepperSize
+  /** Pass-through id for the central <input>, so a sibling <label htmlFor>
+   *  binds correctly. */
+  id?: string
+  /** Accessible label for the wrapper. Set this when context isn't obvious
+   *  from the surrounding label element. */
+  ariaLabel?: string
+}
+
+// Height token per size. Button's `size="icon"` is fixed at h-3xl (40px), so
+// the button's height is overridden here to match the requested stepper size.
+const HEIGHT: Record<NumberStepperSize, string> = {
+  sm: "ax:h-2xl",  // 32px
+  md: "ax:h-3xl",  // 40px (matches Button md / Input md)
+  lg: "ax:h-4xl",  // 48px
+}
+
+const ICON_SIZE: Record<NumberStepperSize, string> = {
+  sm: "ax:size-3",
+  md: "ax:size-3.5",
+  lg: "ax:size-4",
+}
+
+/** Joined +/-/input control. The three segments split the parent width
+ *  equally via `flex-1` so the control reads as a single unit at any
+ *  container size. Negative 1px margins prevent the doubled border between
+ *  segments; the focus ring on the input is elevated above its neighbours
+ *  via z-index so it isn't clipped.
+ *
+ *  The wrapper is `w-full`: constrain the parent (e.g. `max-w-sm`) for a
+ *  more traditional, compact stepper; leave unconstrained to fill the row.
+ *
+ *  Common uses: seat counts in request forms, quantity selectors, any
+ *  bounded integer input where direct typing should remain possible. */
+export const NumberStepper = React.forwardRef<HTMLDivElement, NumberStepperProps>(
+  (
+    {
+      value,
+      onChange,
+      min = 1,
+      max = 999,
+      step = 1,
+      disabled = false,
+      size = "md",
+      id,
+      ariaLabel = "Number",
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    // Local string buffer so the user can clear the field mid-edit, type
+    // multi-digit values that transit through the bounds, etc. We commit
+    // live ONLY when the typed string parses to a value already within
+    // bounds; out-of-range or empty strings stay as a draft until blur.
+    const [draft, setDraft] = React.useState(String(value))
+
+    // Sync the buffer when `value` changes from the outside (e.g. parent
+    // form state update). Avoids tearing between controlled prop and draft.
+    React.useEffect(() => {
+      setDraft(String(value))
+    }, [value])
+
+    const clamp = (n: number) => Math.min(max, Math.max(min, n))
+
+    const decrement = () => onChange(clamp(value - step))
+    const increment = () => onChange(clamp(value + step))
+
+    const handleType = (raw: string) => {
+      setDraft(raw)
+      const parsed = parseInt(raw, 10)
+      // Commit live only for clean, in-bounds integers, keeps disabled-state
+      // buttons accurate as the user types, without snapping mid-edit.
+      if (!Number.isNaN(parsed) && parsed >= min && parsed <= max && parsed !== value) {
+        onChange(parsed)
+      }
+    }
+
+    const handleBlur = () => {
+      const parsed = parseInt(draft, 10)
+      const next = Number.isNaN(parsed) ? min : clamp(parsed)
+      setDraft(String(next))
+      if (next !== value) onChange(next)
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn("ax:flex ax:items-stretch ax:w-full", className)}
+        role="group"
+        aria-label={ariaLabel}
+        {...props}
+      >
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={decrement}
+          disabled={disabled || value <= min}
+          aria-label="Decrease"
+          className={cn("ax:flex-1 ax:w-0 ax:rounded-e-none ax:-me-px ax:bg-neutral-weakest", HEIGHT[size])}
+        >
+          <Minus className={ICON_SIZE[size]} />
+        </Button>
+        <Input
+          id={id}
+          type="number"
+          inputMode="numeric"
+          min={min}
+          max={max}
+          step={step}
+          size={size}
+          value={draft}
+          onChange={(e) => handleType(e.target.value)}
+          onBlur={handleBlur}
+          disabled={disabled}
+          className={cn(
+            "ax:flex-1 ax:w-0 ax:text-center ax:rounded-none ax:focus-visible:relative ax:focus-visible:z-10",
+            "ax:[appearance:textfield] ax:[&::-webkit-outer-spin-button]:appearance-none ax:[&::-webkit-inner-spin-button]:appearance-none",
+          )}
+        />
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={increment}
+          disabled={disabled || value >= max}
+          aria-label="Increase"
+          className={cn("ax:flex-1 ax:w-0 ax:rounded-s-none ax:-ms-px ax:bg-neutral-weakest", HEIGHT[size])}
+        >
+          <Plus className={ICON_SIZE[size]} />
+        </Button>
+      </div>
+    )
+  },
+)
+NumberStepper.displayName = "NumberStepper"

package/src/components/page-header.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button } from "./button"
+import { PageHeader } from "./page-header"
+
+const meta: Meta<typeof PageHeader> = {
+  title: "Components/PageHeader",
+  component: PageHeader,
+  tags: ["autodocs"],
+  args: {
+    title: "Students",
+    subtitle: "38 active learners",
+    children: (
+      <>
+        <Button variant="outline">Import CSV</Button>
+        <Button>Invite students</Button>
+      </>
+    ),
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof PageHeader>
+
+export const Default: Story = {}