@adres/mgda-ui 0.0.0-stage → 0.0.2

package/src/components/reasoning.test.tsx

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest"
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { Reasoning, ReasoningContent, ReasoningTrigger } from "./reasoning"
+
+const contentTag = (html: string) => html.match(/<div[^>]*data-slot="reasoning-content"[^>]*>/)?.[0] ?? ""
+
+function render(props: React.ComponentProps<typeof Reasoning>) {
+  return renderToStaticMarkup(
+    <Reasoning {...props}>
+      <ReasoningTrigger>Reasoning</ReasoningTrigger>
+      <ReasoningContent>Compared 42 sales</ReasoningContent>
+    </Reasoning>,
+  )
+}
+
+describe("Reasoning", () => {
+  it("starts closed, with the content inert and hidden from assistive tech", () => {
+    const html = render({})
+    expect(html).toContain('aria-expanded="false"')
+    expect(contentTag(html)).toContain('aria-hidden="true"')
+    expect(contentTag(html)).toContain("inert")
+  })
+
+  it("starts open while streaming and shimmers the label", () => {
+    const html = render({ streaming: true })
+    expect(html).toContain('aria-expanded="true"')
+    expect(contentTag(html)).not.toContain("aria-hidden")
+    expect(contentTag(html)).not.toContain("inert")
+    expect(html).toContain('data-slot="shimmer-text"')
+  })
+
+  it("opens with defaultOpen and points the trigger at the content", () => {
+    const html = render({ defaultOpen: true })
+    const controls = html.match(/aria-controls="([^"]+)"/)?.[1]
+    expect(controls).toBeTruthy()
+    expect(html).toContain(`id="${controls}"`)
+    expect(html).toContain('data-state="open"')
+  })
+
+  it("lets a controlled open win over streaming", () => {
+    expect(render({ open: false, streaming: true })).toContain('aria-expanded="false"')
+  })
+
+  it("throws when a part is used outside Reasoning", () => {
+    expect(() => renderToStaticMarkup(<ReasoningTrigger>Orphan</ReasoningTrigger>)).toThrow(/Reasoning/)
+  })
+})

package/src/components/reasoning.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown } from "lucide-react"
+import { cn } from "../lib/cn"
+import { ShimmerText } from "./shimmer-text"
+
+interface ReasoningContextValue {
+  open: boolean
+  setOpen: (open: boolean) => void
+  streaming: boolean
+  contentId: string
+}
+
+const ReasoningContext = React.createContext<ReasoningContextValue | null>(null)
+
+function useReasoning(part: string) {
+  const context = React.useContext(ReasoningContext)
+  if (!context) throw new Error(`${part} must be used inside Reasoning`)
+  return context
+}
+
+export interface ReasoningProps extends React.HTMLAttributes<HTMLDivElement> {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** True while the model is still reasoning: the panel opens, then closes when it turns false. */
+  streaming?: boolean
+}
+
+/**
+ * Reasoning - the model's thinking behind an answer, in a panel that opens
+ * while it streams and folds away once the answer is ready.
+ *
+ * @example
+ *   <Reasoning streaming={thinking}>
+ *     <ReasoningTrigger>Show reasoning</ReasoningTrigger>
+ *     <ReasoningContent>{reasoningText}</ReasoningContent>
+ *   </Reasoning>
+ */
+export const Reasoning = React.forwardRef<HTMLDivElement, ReasoningProps>(
+  ({ open: openProp, defaultOpen = false, onOpenChange, streaming = false, className, children, ...props }, ref) => {
+    const contentId = React.useId()
+    const [uncontrolled, setUncontrolled] = React.useState(defaultOpen || streaming)
+    const open = openProp ?? uncontrolled
+
+    const setOpen = React.useCallback(
+      (next: boolean) => {
+        if (openProp === undefined) setUncontrolled(next)
+        onOpenChange?.(next)
+      },
+      [openProp, onOpenChange],
+    )
+
+    // Follow streaming edges only, so a manual toggle mid-stream sticks until the next edge.
+    const wasStreaming = React.useRef(streaming)
+    React.useEffect(() => {
+      if (streaming === wasStreaming.current) return
+      wasStreaming.current = streaming
+      setOpen(streaming)
+    }, [streaming, setOpen])
+
+    const value = React.useMemo(() => ({ open, setOpen, streaming, contentId }), [open, setOpen, streaming, contentId])
+
+    return (
+      <ReasoningContext.Provider value={value}>
+        <div ref={ref} data-slot="reasoning" data-state={open ? "open" : "closed"} className={className} {...props}>
+          {children}
+        </div>
+      </ReasoningContext.Provider>
+    )
+  },
+)
+Reasoning.displayName = "Reasoning"
+
+export interface ReasoningTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+/** Toggles the panel. The label shimmers while the model is still reasoning. */
+export const ReasoningTrigger = React.forwardRef<HTMLButtonElement, ReasoningTriggerProps>(
+  ({ className, children, onClick, ...props }, ref) => {
+    const { open, setOpen, streaming, contentId } = useReasoning("ReasoningTrigger")
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-expanded={open}
+        aria-controls={contentId}
+        onClick={(event) => {
+          onClick?.(event)
+          if (!event.defaultPrevented) setOpen(!open)
+        }}
+        className={cn(
+          "ax:flex ax:items-center ax:gap-1 ax:rounded-xs ax:t-body-sm ax:text-muted-foreground ax:transition-colors",
+          "ax:hover:text-foreground ax:focus-visible:outline-none ax:focus-visible:ring-2 ax:focus-visible:ring-ring",
+          className,
+        )}
+        {...props}
+      >
+        {streaming ? <ShimmerText className="ax:font-medium">{children}</ShimmerText> : <span>{children}</span>}
+        <ChevronDown className={cn("ax:size-4 ax:transition-transform ax:motion-reduce:transition-none", open && "ax:rotate-180")} aria-hidden />
+      </button>
+    )
+  },
+)
+ReasoningTrigger.displayName = "ReasoningTrigger"
+
+export interface ReasoningContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Extra classes for the inner text block, inside the animated wrapper. */
+  contentClassName?: string
+}
+
+/**
+ * The reasoning text beside a thin rule. Grows and shrinks with the panel;
+ * while closed it stays in the DOM but is inert and hidden from assistive tech.
+ */
+export const ReasoningContent = React.forwardRef<HTMLDivElement, ReasoningContentProps>(
+  ({ className, contentClassName, children, ...props }, ref) => {
+    const { open, contentId } = useReasoning("ReasoningContent")
+    return (
+      <div
+        ref={ref}
+        id={contentId}
+        data-slot="reasoning-content"
+        data-state={open ? "open" : "closed"}
+        aria-hidden={!open || undefined}
+        inert={!open}
+        className={cn(
+          "ax:grid ax:transition-[grid-template-rows] ax:duration-150 ax:ease-out ax:motion-reduce:transition-none",
+          open ? "ax:grid-rows-[1fr]" : "ax:grid-rows-[0fr]",
+          className,
+        )}
+        {...props}
+      >
+        <div className="ax:min-h-0 ax:overflow-hidden">
+          <div className={cn("ax:mt-sm ax:border-s-2 ax:border-border ax:ps-md ax:t-body-sm ax:text-muted-foreground", contentClassName)}>
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  },
+)
+ReasoningContent.displayName = "ReasoningContent"

package/src/components/search.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Search } from "./search"
+
+const meta: Meta<typeof Search> = {
+  title: "Components/Search",
+  component: Search,
+  tags: ["autodocs"],
+  args: {
+    placeholder: "Search students…",
+    className: "ax:w-65",
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Search>
+
+export const Default: Story = {}

package/src/components/search.tsx

@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from "react"
+import { Search as SearchIcon, X as ClearIcon } from "lucide-react"
+import { Input, TextFieldRoot, TextFieldSlot, type InputSize } from "./input"
+import { cn } from "../lib/cn"
+
+export interface SearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+  /** Visual density - passes through to the underlying `TextFieldRoot` /
+   *  `Input`. Defaults to `md`. */
+  size?: InputSize
+  /** Marks the input as invalid (red border + ring). */
+  invalid?: boolean
+  /** Optional className applied to the outer `TextFieldRoot`. Useful for
+   *  setting width (e.g. `"ax:w-65"`) or alignment helpers (`"ax:ms-auto"`). */
+  className?: string
+  /**
+   * Show a trailing clear button when the input has a value. Defaults to
+   * `true` for controlled inputs (when `value` is set). Pass `false` to
+   * suppress entirely.
+   *
+   * When clicked, the input is cleared by calling either:
+   *   • `onClear` (if provided), or
+   *   • `onChange` with a synthetic event whose `target.value` is `""`.
+   * The latter keeps controlled callers working without an extra prop.
+   */
+  clearable?: boolean
+  /** Called when the user clicks the clear button. Takes precedence over the
+   *  default behaviour of dispatching an empty-string change event. */
+  onClear?: () => void
+}
+
+/**
+ * Search - a styled search input with a leading magnifying-glass icon and an
+ * optional trailing clear button.
+ *
+ * A thin composition over `TextFieldRoot` + `TextFieldSlot` + `Input` that
+ * codifies the search-field pattern in one component, so every product gets
+ * the same look (icon, sizing, focus ring, clear affordance) without
+ * re-assembling the three primitives at every call site.
+ *
+ * Accepts all standard input props (`value`, `defaultValue`, `onChange`,
+ * `placeholder`, `aria-label`, `name`, `disabled`, etc.) via spread.
+ *
+ * @example
+ *   <Search placeholder="Search students…" aria-label="Search" />
+ *
+ * @example
+ *   <Search
+ *     value={query}
+ *     onChange={(e) => setQuery(e.target.value)}
+ *     onClear={() => setQuery("")}
+ *     placeholder="Search…"
+ *     className="ax:w-65"
+ *   />
+ */
+export const Search = React.forwardRef<HTMLInputElement, SearchProps>(
+  (
+    {
+      size = "md",
+      invalid,
+      className,
+      clearable,
+      onClear,
+      value,
+      onChange,
+      placeholder = "Search…",
+      "aria-label": ariaLabel = "Search",
+      ...inputProps
+    },
+    ref,
+  ) => {
+    const innerRef = React.useRef<HTMLInputElement>(null)
+    React.useImperativeHandle(ref, () => innerRef.current as HTMLInputElement)
+
+    // Show the clear button when:
+    //   • clearable is explicitly true, OR
+    //   • clearable is undefined AND we're in controlled mode with a value.
+    const hasValue = typeof value === "string" && value.length > 0
+    const showClear = clearable === true || (clearable === undefined && hasValue)
+
+    function handleClear() {
+      if (onClear) {
+        onClear()
+      } else if (onChange && innerRef.current) {
+        // Synthesise a change event so controlled callers update their state
+        // without needing an extra `onClear` prop.
+        const input = innerRef.current
+        const setter = Object.getOwnPropertyDescriptor(
+          window.HTMLInputElement.prototype,
+          "value",
+        )?.set
+        setter?.call(input, "")
+        input.dispatchEvent(new Event("input", { bubbles: true }))
+      }
+      innerRef.current?.focus()
+    }
+
+    return (
+      <TextFieldRoot size={size} invalid={invalid} className={cn(className)}>
+        {/* TextFieldRoot already applies the horizontal padding (px-sm/px-md);
+            the slot must not add its own or the icon gets doubled left inset. */}
+        <TextFieldSlot>
+          <SearchIcon className="ax:size-4" />
+        </TextFieldSlot>
+        <Input
+          ref={innerRef}
+          type="search"
+          // The trailing clear button replaces the browser's own, which would otherwise show alongside it.
+          className="ax:[&::-webkit-search-cancel-button]:appearance-none ax:[&::-webkit-search-decoration]:appearance-none"
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          aria-label={ariaLabel}
+          {...inputProps}
+        />
+        {showClear && (
+          <TextFieldSlot>
+            <button
+              type="button"
+              onClick={handleClear}
+              aria-label="Clear search"
+              className="ax:text-muted-foreground ax:hover:text-foreground ax:transition-colors ax:rounded-sm ax:focus-visible:outline-none ax:focus-visible:ring-2 ax:focus-visible:ring-ring"
+            >
+              <ClearIcon className="ax:size-4" />
+            </button>
+          </TextFieldSlot>
+        )}
+      </TextFieldRoot>
+    )
+  },
+)
+Search.displayName = "Search"

package/src/components/section-nav.stories.tsx

@@ -0,0 +1,59 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { SectionNav } from "./section-nav"
+
+const meta: Meta<typeof SectionNav> = {
+  title: "Components/SectionNav",
+  component: SectionNav,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof SectionNav>
+
+const items = [
+  { id: "overview", label: "Overview" },
+  { id: "eligibility", label: "Eligibility" },
+  { id: "how-it-works", label: "How it works" },
+  { id: "support", label: "Support" },
+]
+
+export const Default: Story = {
+  render: () => (
+    <div className="ax:flex ax:gap-xl">
+      <div className="ax:w-56 ax:shrink-0">
+        <div className="ax:sticky ax:top-md">
+          <SectionNav items={items} />
+        </div>
+      </div>
+      <div className="ax:flex-1 ax:space-y-xl">
+        {items.map((item) => (
+          <section key={item.id} id={item.id} className="ax:min-h-[60vh]">
+            <h2 className="ax:t-h2">{item.label}</h2>
+          </section>
+        ))}
+      </div>
+    </div>
+  ),
+}
+
+export const InScrollContainer: Story = {
+  render: () => (
+    <div className="ax:flex ax:h-96 ax:gap-xl">
+      <div className="ax:w-56 ax:shrink-0">
+        <SectionNav items={items} scrollRoot="#section-nav-story-root" />
+      </div>
+      <div id="section-nav-story-root" className="ax:flex-1 ax:space-y-xl ax:overflow-y-auto">
+        {items.map((item) => (
+          <section key={item.id} id={item.id} className="ax:min-h-80">
+            <h2 className="ax:t-h2">{item.label}</h2>
+          </section>
+        ))}
+      </div>
+    </div>
+  ),
+}
+
+export const Responsive: Story = {
+  render: () => <SectionNav items={items} layout="responsive" />,
+}

package/src/components/section-nav.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest"
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { SectionNav } from "./section-nav"
+
+const items = [
+  { id: "one", label: "One" },
+  { id: "two", label: "Two" },
+]
+
+describe("SectionNav", () => {
+  it("renders a labelled nav with an anchor per section", () => {
+    const html = renderToStaticMarkup(<SectionNav items={items} />)
+    expect(html).toContain('aria-label="Page sections"')
+    expect(html).toContain('href="#one"')
+    expect(html).toContain('href="#two"')
+  })
+
+  it("marks the first section as current before any scrolling", () => {
+    const html = renderToStaticMarkup(<SectionNav items={items} />)
+    expect(html.match(/aria-current="page"/g)).toHaveLength(1)
+    expect(html).toContain("ax:border-primary")
+  })
+
+  it("shows the default title and lets it be hidden", () => {
+    expect(renderToStaticMarkup(<SectionNav items={items} />)).toContain("Jump to")
+    expect(renderToStaticMarkup(<SectionNav items={items} title={null} />)).not.toContain("Jump to")
+  })
+
+  it("adds the horizontal-row classes only for the responsive layout", () => {
+    const vertical = renderToStaticMarkup(<SectionNav items={items} />)
+    const responsive = renderToStaticMarkup(<SectionNav items={items} layout="responsive" />)
+    expect(vertical).not.toContain("ax:overflow-x-auto")
+    expect(responsive).toContain("ax:overflow-x-auto")
+  })
+})

package/src/components/section-nav.tsx

@@ -0,0 +1,146 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/cn"
+import { ListNav, ListNavItem } from "./list-nav"
+
+export interface SectionNavItem {
+  /** The `id` of the section element this item jumps to. */
+  id: string
+  label: React.ReactNode
+}
+
+export interface SectionNavProps extends Omit<React.HTMLAttributes<HTMLElement>, "title" | "onSelect"> {
+  /** Sections to list, in page order. Each `id` must match an element on the page. */
+  items: SectionNavItem[]
+  /** Eyebrow title above the list. Pass `null` to hide it. */
+  title?: React.ReactNode
+  /**
+   * The scrolling container the sections live in: a CSS selector, an element,
+   * or `null` (default) for the window.
+   */
+  scrollRoot?: string | HTMLElement | null
+  /**
+   * How far down the scroll root (0-1) a section's top must pass to count as
+   * the current one. Default `0.24`.
+   */
+  activationRatio?: number
+  /**
+   * `vertical` (default) is a stacked list at every width. `responsive` runs as
+   * a horizontally scrolling row below `xl` and a stacked list from `xl` up,
+   * hiding the title in the row.
+   */
+  layout?: "vertical" | "responsive"
+  /** Fires when the current section changes, from scrolling or from a click. */
+  onActiveChange?: (id: string) => void
+}
+
+function resolveScrollRoot(scrollRoot: SectionNavProps["scrollRoot"]): HTMLElement | null {
+  if (typeof scrollRoot === "string") return document.querySelector<HTMLElement>(scrollRoot)
+  return scrollRoot ?? null
+}
+
+/**
+ * SectionNav - an in-page "Jump to" menu with scroll-spy. Lists the page's
+ * sections as anchor links, marks the one currently in view with a primary
+ * left border and text, and follows the page as it scrolls.
+ *
+ * Built on `ListNav`: each item is an `<a href="#id">`, so it still works as a
+ * plain anchor without JavaScript. Use `scrollRoot` when the page scrolls
+ * inside a container rather than the window.
+ */
+export const SectionNav = React.forwardRef<HTMLElement, SectionNavProps>(
+  (
+    {
+      items,
+      title = "Jump to",
+      scrollRoot = null,
+      activationRatio = 0.24,
+      layout = "vertical",
+      onActiveChange,
+      className,
+      "aria-label": ariaLabel = "Page sections",
+      ...props
+    },
+    ref,
+  ) => {
+    const [activeId, setActiveId] = React.useState(items[0]?.id ?? "")
+    const onActiveChangeRef = React.useRef(onActiveChange)
+    onActiveChangeRef.current = onActiveChange
+
+    const select = React.useCallback((id: string) => {
+      setActiveId((current) => {
+        if (current === id) return current
+        onActiveChangeRef.current?.(id)
+        return id
+      })
+    }, [])
+
+    React.useEffect(() => {
+      const root = resolveScrollRoot(scrollRoot)
+      if (typeof scrollRoot === "string" && !root) return
+
+      const scrollTarget: HTMLElement | Window = root ?? window
+
+      const update = () => {
+        const rootTop = root ? root.getBoundingClientRect().top : 0
+        const rootHeight = root ? root.clientHeight : window.innerHeight
+        const activationLine = rootTop + rootHeight * activationRatio
+        let nextId = items[0]?.id ?? ""
+        let nearestPassedTop = Number.NEGATIVE_INFINITY
+
+        for (const item of items) {
+          const section = document.getElementById(item.id)
+          if (!section) continue
+          const sectionTop = section.getBoundingClientRect().top
+          if (sectionTop <= activationLine && sectionTop > nearestPassedTop) {
+            nearestPassedTop = sectionTop
+            nextId = item.id
+          }
+        }
+        select(nextId)
+      }
+
+      scrollTarget.addEventListener("scroll", update, { passive: true })
+      update()
+      return () => scrollTarget.removeEventListener("scroll", update)
+    }, [items, scrollRoot, activationRatio, select])
+
+    return (
+      <ListNav
+        ref={ref}
+        title={title ?? undefined}
+        aria-label={ariaLabel}
+        className={cn(
+          layout === "responsive" && [
+            "ax:overflow-x-auto ax:pb-sm ax:[&>div]:flex-row ax:[&>div]:gap-2xs ax:[&>p]:hidden",
+            "ax:xl:overflow-visible ax:xl:pb-0 ax:xl:[&>div]:flex-col ax:xl:[&>div]:gap-0 ax:xl:[&>p]:block ax:xl:[&>p]:pt-0",
+          ],
+          className,
+        )}
+        {...props}
+      >
+        {items.map((item) => {
+          const active = item.id === activeId
+          return (
+            <ListNavItem
+              key={item.id}
+              asChild
+              active={active}
+              className={cn(
+                "ax:rounded-none ax:border-s-2 ax:py-2xs ax:pl-md ax:ml-sm",
+                layout === "responsive" && "ax:shrink-0 ax:xl:whitespace-normal",
+                active ? "ax:border-primary-foreground ax:bg-transparent" : "ax:border-border/50",
+              )}
+            >
+              <a href={`#${item.id}`} onClick={() => select(item.id)} className="ax:min-w-0">
+                <span className="ax:flex-1 ax:truncate ax:leading-snug">{item.label}</span>
+              </a>
+            </ListNavItem>
+          )
+        })}
+      </ListNav>
+    )
+  },
+)
+SectionNav.displayName = "SectionNav"

package/src/components/segmented-control.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { SegmentedControl, SegmentedControlItem } from "./segmented-control"
+
+const meta: Meta<typeof SegmentedControl> = {
+  title: "Components/SegmentedControl",
+  component: SegmentedControl,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof SegmentedControl>
+
+export const Default: Story = {
+  render: () => (
+    <SegmentedControl defaultValue="day">
+      <SegmentedControlItem value="day">Day</SegmentedControlItem>
+      <SegmentedControlItem value="week">Week</SegmentedControlItem>
+      <SegmentedControlItem value="month">Month</SegmentedControlItem>
+    </SegmentedControl>
+  ),
+}