@adres/mgda-ui 0.0.0-stage → 0.0.2

package/src/components/text.tsx

@@ -0,0 +1,105 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/cn"
+
+// Numeric `size` is a convenience API over the `t-*` scale defined in typography.css.
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type TextAs     = "span" | "p" | "div" | "label" | "strong" | "em"
+export type TextSize   = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
+export type TextWeight = "light" | "regular" | "medium" | "bold"
+export type TextAlign  = "left" | "center" | "right"
+export type TextColor  = "default" | "muted" | "strong" | "primary" | "accent" | "success" | "warning" | "destructive"
+export type TextWrap   = "wrap" | "nowrap" | "balance" | "pretty"
+
+// ─── Variants ─────────────────────────────────────────────────────────────────
+
+const textVariants = cva("", {
+  variants: {
+    size: {
+      "1": "ax:t-body-xs",
+      "2": "ax:t-body-sm",
+      "3": "ax:t-body-md",
+      "4": "ax:t-body-lg",
+      "5": "ax:t-body-xl",
+      "6": "ax:t-h1",
+      "7": "ax:t-display-sm",
+      "8": "ax:t-display-md",
+      "9": "ax:t-display-xl",
+    },
+    weight: {
+      light:   "ax:font-light",
+      regular: "ax:font-normal",
+      medium:  "ax:font-medium",
+      bold:    "ax:font-bold",
+    },
+    align: {
+      left:   "ax:text-left",
+      center: "ax:text-center",
+      right:  "ax:text-right",
+    },
+    color: {
+      default: "ax:text-foreground",
+      muted:   "ax:text-muted-foreground",
+      strong:  "ax:text-foreground-strong",
+      primary: "ax:text-primary-foreground",
+      accent:  "ax:text-accent-foreground",
+      success:     "ax:text-success-foreground",
+      warning:     "ax:text-warning-foreground",
+      destructive: "ax:text-destructive-foreground",
+    },
+  },
+  defaultVariants: {
+    size:   "3",
+    weight: "regular",
+    color:  "default",
+  },
+})
+
+const WRAP_CLASS: Record<TextWrap, string> = {
+  wrap:    "ax:text-wrap",
+  nowrap:  "ax:text-nowrap",
+  balance: "ax:text-balance",
+  pretty:  "ax:text-pretty",
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export interface TextProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "color">,
+    VariantProps<typeof textVariants> {
+  as?:      TextAs
+  truncate?: boolean
+  wrap?:    TextWrap
+}
+
+export const Text = React.forwardRef<HTMLElement, TextProps>(
+  (
+    {
+      as: Tag = "span",
+      className,
+      size,
+      weight,
+      align,
+      color,
+      truncate,
+      wrap,
+      ...props
+    },
+    ref
+  ) => (
+    <Tag
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ref={ref as any}
+      className={cn(
+        textVariants({ size, weight, align, color }),
+        truncate && "ax:truncate",
+        wrap && WRAP_CLASS[wrap],
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Text.displayName = "Text"

package/src/components/thinking-bar.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ThinkingBar } from "./thinking-bar"
+
+const meta: Meta<typeof ThinkingBar> = {
+  title: "Components/ThinkingBar",
+  component: ThinkingBar,
+  tags: ["autodocs"],
+  decorators: [(Story) => <div style={{ maxWidth: 560 }}><Story /></div>],
+  args: { text: "Thinking" },
+}
+
+export default meta
+type Story = StoryObj<typeof ThinkingBar>
+
+export const Default: Story = {}
+
+export const WithActions: Story = {
+  args: { text: "Comparing registered sales", onClick: () => undefined, onStop: () => undefined },
+}

package/src/components/thinking-bar.test.tsx

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest"
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { ThinkingBar } from "./thinking-bar"
+
+const buttons = (html: string) => html.match(/<button/g)?.length ?? 0
+
+describe("ThinkingBar", () => {
+  it("shows a shimmering Thinking status with no buttons by default", () => {
+    const html = renderToStaticMarkup(<ThinkingBar />)
+    expect(html).toContain('data-slot="shimmer-text"')
+    expect(html).toContain(">Thinking<")
+    expect(buttons(html)).toBe(0)
+  })
+
+  it("turns the label into a button with a chevron when onClick is passed", () => {
+    const html = renderToStaticMarkup(<ThinkingBar text="Searching listings" onClick={() => undefined} />)
+    expect(buttons(html)).toBe(1)
+    expect(html).toContain("lucide-chevron-right")
+    expect(html).toContain(">Searching listings<")
+  })
+
+  it("adds the stop action with its label when onStop is passed", () => {
+    expect(renderToStaticMarkup(<ThinkingBar onStop={() => undefined} />)).toContain(">Answer now</button>")
+    expect(renderToStaticMarkup(<ThinkingBar onStop={() => undefined} stopLabel="Skip" />)).toContain(">Skip</button>")
+  })
+})

package/src/components/thinking-bar.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { ChevronRight } from "lucide-react"
+import { cn } from "../lib/cn"
+import { ShimmerText } from "./shimmer-text"
+
+export interface ThinkingBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> {
+  /** The status, present tense. */
+  text?: string
+  /** Makes the label a button with a chevron, e.g. to open the reasoning. */
+  onClick?: () => void
+  /** Adds a stop action on the right, e.g. to answer without more thinking. */
+  onStop?: () => void
+  stopLabel?: string
+}
+
+/**
+ * ThinkingBar - one line that says the assistant is thinking: a shimmering
+ * status, optionally a button to see more, and an optional action to stop
+ * and answer now.
+ *
+ * @example
+ *   <ThinkingBar text="Thinking" onClick={openReasoning} onStop={answerNow} />
+ */
+export const ThinkingBar = React.forwardRef<HTMLDivElement, ThinkingBarProps>(
+  ({ text = "Thinking", onClick, onStop, stopLabel = "Answer now", className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="thinking-bar"
+      className={cn("ax:flex ax:w-full ax:items-center ax:justify-between ax:gap-md ax:t-body-sm", className)}
+      {...props}
+    >
+      {onClick ? (
+        <button
+          type="button"
+          onClick={onClick}
+          className="ax:group/thinking ax:flex ax:items-center ax:gap-1 ax:rounded-xs ax:focus-visible:outline-none ax:focus-visible:ring-2 ax:focus-visible:ring-ring"
+        >
+          <ShimmerText className="ax:font-medium">{text}</ShimmerText>
+          <ChevronRight
+            className="ax:size-4 ax:text-muted-foreground ax:transition-colors ax:group-hover/thinking:text-foreground"
+            aria-hidden
+          />
+        </button>
+      ) : (
+        <ShimmerText className="ax:font-medium">{text}</ShimmerText>
+      )}
+      {onStop && (
+        <button
+          type="button"
+          onClick={onStop}
+          className={cn(
+            "ax:shrink-0 ax:rounded-xs ax:text-muted-foreground ax:underline ax:decoration-dotted ax:underline-offset-4 ax:transition-colors",
+            "ax:hover:text-foreground ax:focus-visible:outline-none ax:focus-visible:ring-2 ax:focus-visible:ring-ring",
+          )}
+        >
+          {stopLabel}
+        </button>
+      )}
+    </div>
+  ),
+)
+ThinkingBar.displayName = "ThinkingBar"

package/src/components/thinking-steps.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { StreamingCursor, ThinkingSteps } from "./thinking-steps"
+import { Text } from "./text"
+
+const meta: Meta<typeof ThinkingSteps> = {
+  title: "Components/ThinkingSteps",
+  component: ThinkingSteps,
+  tags: ["autodocs"],
+  decorators: [(Story) => <div style={{ maxWidth: 560 }}><Story /></div>],
+  args: {
+    running: true,
+    total: 3,
+    steps: [
+      { label: "Searched 128 listings on Yas Island", status: "done" },
+      { label: "Comparing registered sales", status: "running" },
+    ],
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ThinkingSteps>
+
+export const Running: Story = {}
+
+export const Done: Story = {
+  args: {
+    running: false,
+    steps: [
+      { label: "Searched 128 listings on Yas Island", status: "done" },
+      { label: "Compared 42 registered sales", status: "done" },
+      { label: "Checked developer handover dates", status: "done" },
+    ],
+  },
+}
+
+export const Cursor: Story = {
+  render: () => (
+    <Text as="p" size="2">
+      Yas Acres townhouses with a private garden start at
+      <StreamingCursor />
+    </Text>
+  ),
+}

package/src/components/thinking-steps.test.tsx

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest"
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { StreamingCursor, ThinkingSteps, thinkingStepsSummary } from "./thinking-steps"
+
+describe("thinkingStepsSummary", () => {
+  it("names the step in progress out of the planned total while running", () => {
+    expect(thinkingStepsSummary({ running: true, done: 1, total: 3 })).toBe("Working, step 2 of 3")
+  })
+
+  it("never counts past the total", () => {
+    expect(thinkingStepsSummary({ running: true, done: 3, total: 3 })).toBe("Working, step 3 of 3")
+  })
+
+  it("counts steps used once finished, singular for one", () => {
+    expect(thinkingStepsSummary({ running: false, done: 3, total: 3 })).toBe("Used 3 steps")
+    expect(thinkingStepsSummary({ running: false, done: 1, total: 1 })).toBe("Used 1 step")
+  })
+})
+
+describe("ThinkingSteps", () => {
+  it("opens the step list while running", () => {
+    const html = renderToStaticMarkup(
+      <ThinkingSteps running total={2} steps={[{ label: "Searched listings", status: "done" }, { label: "Comparing sales", status: "running" }]} />,
+    )
+    expect(html).toContain("Working, step 2 of 2")
+    expect(html).toContain('aria-expanded="true"')
+    expect(html).toContain("Comparing sales")
+  })
+
+  it("folds the list away once done", () => {
+    const html = renderToStaticMarkup(<ThinkingSteps running={false} steps={[{ label: "Searched listings", status: "done" }]} />)
+    expect(html).toContain("Used 1 step")
+    expect(html).toContain('aria-expanded="false"')
+  })
+})
+
+describe("StreamingCursor", () => {
+  it("is hidden from assistive tech", () => {
+    expect(renderToStaticMarkup(<StreamingCursor />)).toContain('aria-hidden="true"')
+  })
+})

package/src/components/thinking-steps.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown } from "lucide-react"
+import { cn } from "../lib/cn"
+import { ShimmerText } from "./shimmer-text"
+
+export type ThinkingStepStatus = "done" | "running"
+
+export interface ThinkingStep {
+  /** Past tense once done ("Searched 12 listings"), present while running ("Searching listings"). */
+  label: string
+  status: ThinkingStepStatus
+}
+
+/** "Working, step 2 of 4" while running; "Used 4 steps" once finished. */
+export function thinkingStepsSummary({ running, done, total }: { running: boolean; done: number; total: number }) {
+  if (running) return `Working, step ${Math.min(done + 1, total)} of ${total}`
+  return `Used ${done} ${done === 1 ? "step" : "steps"}`
+}
+
+export interface ThinkingStepsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "dir"> {
+  /** Steps to show so far, in order. Leave out steps that have not started. */
+  steps: ThinkingStep[]
+  /** True while the assistant is still working; the list opens and the summary shimmers. */
+  running: boolean
+  /** Steps planned in all, for "step 2 of 4". Defaults to `steps.length`. */
+  total?: number
+}
+
+/**
+ * ThinkingSteps - what the assistant is doing before and while it answers: a
+ * muted one-line summary that toggles the step list, which hangs off a thin
+ * rule. Open while running, folded away once done.
+ *
+ * @example
+ *   <ThinkingSteps running={working} total={3} steps={[{ label: "Searched listings", status: "done" }]} />
+ */
+export const ThinkingSteps = React.forwardRef<HTMLDivElement, ThinkingStepsProps>(
+  ({ steps, running, total = steps.length, className, ...props }, ref) => {
+    const id = React.useId()
+    const [open, setOpen] = React.useState(running)
+    React.useEffect(() => setOpen(running), [running])
+    const done = steps.filter((step) => step.status === "done").length
+    const summary = thinkingStepsSummary({ running, done, total })
+
+    return (
+      <div ref={ref} data-slot="thinking-steps" className={cn("ax:text-sm", className)} {...props}>
+        <button
+          type="button"
+          aria-expanded={open}
+          aria-controls={`${id}-steps`}
+          onClick={() => setOpen((value) => !value)}
+          className="ax:flex ax:items-center ax:gap-1 ax:rounded-xs 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"
+        >
+          {running ? <ShimmerText className="ax:font-medium">{summary}</ShimmerText> : <span>{summary}</span>}
+          <ChevronDown className={cn("ax:size-4 ax:transition-transform ax:motion-reduce:transition-none", open && "ax:rotate-180")} aria-hidden />
+        </button>
+        {open && (
+          <div id={`${id}-steps`} className="ax:mt-sm ax:grid ax:grid-cols-[min-content_minmax(0,1fr)] ax:gap-x-sm">
+            <div className="ax:w-0.5 ax:self-stretch ax:rounded-full ax:bg-muted" aria-hidden />
+            <ol className="ax:flex ax:min-w-0 ax:flex-col ax:gap-xs">
+              {steps.map((step, index) => (
+                <li key={index} className={step.status === "done" ? "ax:text-muted-foreground" : undefined}>
+                  {step.status === "running" ? <ShimmerText>{step.label}</ShimmerText> : step.label}
+                </li>
+              ))}
+            </ol>
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+ThinkingSteps.displayName = "ThinkingSteps"
+
+/** The blinking block caret at the end of text that is still being written. Decorative. */
+export const StreamingCursor = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      data-slot="streaming-cursor"
+      aria-hidden
+      className={cn(
+        "ax:ms-0.5 ax:inline-block ax:h-4 ax:w-1.5 ax:translate-y-0.5 ax:animate-pulse ax:rounded-xs ax:bg-foreground ax:motion-reduce:animate-none",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+StreamingCursor.displayName = "StreamingCursor"

package/src/components/toaster.stories.tsx

@@ -0,0 +1,80 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button } from "./button"
+import { toast } from "./toaster"
+
+const meta = {
+  title: "Components/Toaster",
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Application toast host (Sonner). A single Toaster is mounted in Storybook preview, same as placing it once near your app root. Call `toast()` from click handlers or other events; never call it during render.",
+      },
+    },
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => (
+    <div className="ax:space-y-sm">
+      <p className="ax:t-body-sm ax:text-muted-foreground ax:max-w-sm">
+        Click the button to fire a toast. The host is mounted globally in Storybook preview.
+      </p>
+      <Button onClick={() => toast("Changes saved")}>Show toast</Button>
+    </div>
+  ),
+}
+
+export const WithDescription: Story = {
+  render: () => (
+    <Button
+      onClick={() =>
+        toast("Invite sent", {
+          description: "We emailed a sign-in link to your teammate.",
+        })
+      }
+    >
+      Show toast with description
+    </Button>
+  ),
+}
+
+export const Success: Story = {
+  render: () => (
+    <Button variant="secondary" onClick={() => toast.success("Payment received")}>
+      Success toast
+    </Button>
+  ),
+}
+
+export const Error: Story = {
+  render: () => (
+    <Button variant="destructive" onClick={() => toast.error("Could not save changes")}>
+      Error toast
+    </Button>
+  ),
+}
+
+export const Action: Story = {
+  render: () => (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast("Draft deleted", {
+          action: {
+            label: "Undo",
+            onClick: () => toast("Draft restored"),
+          },
+        })
+      }
+    >
+      Toast with undo action
+    </Button>
+  ),
+}

package/src/components/toaster.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import * as React from "react"
+import { Toaster as SonnerToaster, toast } from "sonner"
+
+/**
+ * Toaster - application-level toast host.
+ *
+ * Uses sonner under the hood. Mount once near the root of every app.
+ * Re-export `toast()` so consumers can call it without a second dependency.
+ */
+export function Toaster() {
+  return (
+    <SonnerToaster
+      position="bottom-right"
+      richColors={false}
+      closeButton
+      toastOptions={{
+        unstyled: false,
+        classNames: {
+          toast:
+            "ax:group ax:bg-card ax:text-card-foreground ax:border ax:border-border ax:rounded-md ax:shadow-md",
+          title: "ax:t-label-sm ax:text-foreground",
+          description: "ax:t-caption ax:text-muted-foreground",
+          actionButton:
+            "ax:bg-primary ax:text-primary-foreground ax:rounded-md ax:px-2.5 ax:py-1 ax:t-label-sm",
+          cancelButton:
+            "ax:bg-muted ax:text-muted-foreground ax:rounded-md ax:px-2.5 ax:py-1 ax:t-label-sm",
+          closeButton: "ax:bg-muted ax:text-muted-foreground ax:border ax:border-border",
+        },
+      }}
+    />
+  )
+}
+
+export { toast }

package/src/components/toggle.stories.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Bold } from "lucide-react"
+import { Toggle } from "./toggle"
+
+const meta: Meta<typeof Toggle> = {
+  title: "Components/Toggle",
+  component: Toggle,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Toggle>
+
+export const Default: Story = {
+  render: () => (
+    <Toggle aria-label="Toggle bold">
+      <Bold className="ax:size-4" />
+    </Toggle>
+  ),
+}

package/src/components/toggle.tsx

@@ -0,0 +1,103 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-switch"
+import { cn } from "../lib/cn"
+
+export type ToggleSize = "sm" | "md" | "lg"
+
+// Track / thumb / travel scale together. Travel = track inner width − thumb:
+//   sm  28−4(borders)−12 = 12  (translate-x-3)
+//   md  36−4−16          = 16  (translate-x-4)
+//   lg  44−4−20          = 20  (translate-x-5)
+const TRACK: Record<ToggleSize, string> = {
+  sm: "ax:h-4 ax:w-7",   // 16 × 28
+  md: "ax:h-5 ax:w-9",   // 20 × 36
+  lg: "ax:h-6 ax:w-11",  // 24 × 44
+}
+const THUMB: Record<ToggleSize, string> = {
+  sm: "ax:size-3",   // 12
+  md: "ax:size-4",   // 16
+  lg: "ax:size-5",   // 20
+}
+const THUMB_TRANSLATE: Record<ToggleSize, string> = {
+  sm: "ax:data-[state=checked]:translate-x-3",
+  md: "ax:data-[state=checked]:translate-x-4",
+  lg: "ax:data-[state=checked]:translate-x-5",
+}
+
+export interface ToggleProps
+  extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> {
+  size?: ToggleSize
+  /**
+   * Optional caption rendered to the inline-start (left) of the switch. When set,
+   * the switch and text are wrapped in a <label> so the text is clickable and
+   * names the control - no separate `aria-label` needed.
+   */
+  label?: React.ReactNode
+  /**
+   * Classes for the wrapping <label> (only used when `label` is set). `className`
+   * still targets the switch track itself.
+   */
+  labelClassName?: string
+}
+
+/**
+ * A binary on/off toggle (built on Radix Switch).
+ *
+ * Pass `label` for a captioned control: the text renders to the LEFT of the
+ * switch and toggles it on click. Omit `label` to render the bare switch and
+ * compose your own layout (e.g. a spaced settings row with `justify-between`).
+ */
+export const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  ToggleProps
+>(({ className, size = "md", label, labelClassName, ...props }, ref) => {
+  const control = (
+    <TogglePrimitive.Root
+      ref={ref}
+      className={cn(
+        "ax:peer ax:inline-flex ax:shrink-0 ax:cursor-pointer ax:items-center ax:rounded-full ax:border-2 ax:border-transparent",
+        "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:cursor-not-allowed ax:disabled:opacity-50",
+        "ax:data-[state=checked]:bg-primary ax:data-[state=unchecked]:bg-input",
+        TRACK[size],
+        className
+      )}
+      {...props}
+    >
+      <TogglePrimitive.Thumb
+        className={cn(
+          "ax:pointer-events-none ax:block ax:rounded-full ax:bg-card ax:shadow-sm",
+          "ax:transition-transform ax:transition-snappy",
+          "ax:data-[state=unchecked]:translate-x-0",
+          THUMB[size],
+          THUMB_TRANSLATE[size]
+        )}
+      />
+    </TogglePrimitive.Root>
+  )
+
+  if (label == null) return control
+
+  // Label on the inline-start (left). The switch dims itself when disabled
+  // (`disabled:opacity-50`); the text follows via `has-[button:disabled]`, so
+  // the two never double up on opacity.
+  return (
+    <label
+      className={cn(
+        "ax:inline-flex ax:items-center ax:gap-sm ax:cursor-pointer",
+        "ax:has-[button:disabled]:cursor-not-allowed",
+        "ax:[&:has(button:disabled)_[data-slot=toggle-label]]:opacity-50",
+        labelClassName
+      )}
+    >
+      <span data-slot="toggle-label" className="ax:t-label-sm ax:text-foreground ax:select-none">
+        {label}
+      </span>
+      {control}
+    </label>
+  )
+})
+Toggle.displayName = "Toggle"