@adres/mgda-ui 0.0.0-stage → 0.0.2

package/src/components/step-indicator.tsx

@@ -0,0 +1,286 @@
+"use client"
+
+import * as React from "react"
+import { Check, AlertTriangle } from "lucide-react"
+import { cn } from "../lib/cn"
+
+export type StepIndicatorSize        = "sm" | "md" | "lg"
+export type StepIndicatorOrientation = "horizontal" | "vertical"
+
+export interface StepIndicatorStep {
+  /** Step label. A string in the common case; rich content (ReactNode) is
+   *  allowed for the vertical timeline layout, e.g. a details block per step. */
+  label: React.ReactNode
+  /** Optional glyph rendered inside the circle in place of the step number. */
+  icon?: React.ReactNode
+  /** Marks the step as failed - tints the circle and connector destructive
+   *  and renders a warning glyph regardless of the step's done/active state. */
+  status?: "error"
+}
+
+export interface StepIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  steps: StepIndicatorStep[]
+  /** Zero-based index of the active step. Steps before it render as done; the
+   *  step at this index renders as active; later steps stay muted. */
+  currentStep: number
+  /** Visual density. */
+  size?: StepIndicatorSize
+  /** Layout direction. `horizontal` (default) is best for desktop wizards;
+   *  `vertical` is better on mobile or in side panels. */
+  orientation?: StepIndicatorOrientation
+  /** When provided, the indicator becomes interactive: done and active steps
+   *  render as buttons that call back with the step index. Upcoming steps
+   *  remain inert (users can't jump ahead). */
+  onStepClick?: (index: number) => void
+}
+
+// ─── Size tokens ──────────────────────────────────────────────────────────────
+
+const CIRCLE_SIZE: Record<StepIndicatorSize, string> = {
+  sm: "ax:size-6",   // 24px
+  md: "ax:size-8",   // 32px
+  lg: "ax:size-10",  // 40px
+}
+
+// Height of the circle row - used to pin the connector track to the circle's
+// vertical centerline without hard-coded pixel offsets.
+const CIRCLE_H: Record<StepIndicatorSize, string> = {
+  sm: "ax:h-6",
+  md: "ax:h-8",
+  lg: "ax:h-10",
+}
+
+const NUMBER_CLASS: Record<StepIndicatorSize, string> = {
+  sm: "ax:t-label-sm",
+  md: "ax:t-label-sm",
+  lg: "ax:t-label-lg",
+}
+
+const LABEL_CLASS: Record<StepIndicatorSize, string> = {
+  sm: "ax:t-caption",
+  md: "ax:t-label-sm",
+  lg: "ax:t-label-sm",
+}
+
+const ICON_CLASS: Record<StepIndicatorSize, string> = {
+  sm: "ax:size-2.5",
+  md: "ax:size-3.5",
+  lg: "ax:size-4",
+}
+
+// Shared with the connector track so a "done"/"active" line is the exact same
+// fill as the circle it connects, not just the same hue.
+const PRIMARY_FILL = "ax:bg-primary-weaker ax:dark:bg-primary"
+
+// ─── Circle ───────────────────────────────────────────────────────────────────
+
+type CircleState = "done" | "active" | "upcoming" | "error"
+
+interface StepCircleProps {
+  state:  CircleState
+  size:   StepIndicatorSize
+  index:  number
+  icon?:  React.ReactNode
+}
+
+function StepCircle({ state, size, index, icon }: StepCircleProps) {
+  const glyph =
+    state === "error" ? <AlertTriangle className={ICON_CLASS[size]} /> :
+    state === "done"  ? <Check         className={ICON_CLASS[size]} strokeWidth={4} /> :
+    icon ?? <span>{index + 1}</span>
+
+  return (
+    <div
+      className={cn(
+        CIRCLE_SIZE[size],
+        "ax:rounded-full ax:flex ax:items-center ax:justify-center ax:font-semibold ax:transition-colors ax:shrink-0",
+        NUMBER_CLASS[size],
+        state === "done"     && cn(PRIMARY_FILL, "ax:text-primary-strong ax:dark:text-primary-weakest"),
+        state === "active"   && cn(PRIMARY_FILL, "ax:text-primary-strong ax:dark:text-primary-weakest"),
+        state === "upcoming" && "ax:bg-muted ax:text-muted-foreground",
+        state === "error"    && "ax:bg-destructive ax:text-destructive-muted",
+      )}
+    >
+      {glyph}
+    </div>
+  )
+}
+
+// ─── StepIndicator ────────────────────────────────────────────────────────────
+
+export const StepIndicator = React.forwardRef<HTMLDivElement, StepIndicatorProps>(
+  (
+    { steps, currentStep, size = "md", orientation = "horizontal", onStepClick, className, ...props },
+    ref,
+  ) => {
+    const interactive = !!onStepClick
+
+    const stateFor = (i: number, status?: "error"): CircleState => {
+      if (status === "error") return "error"
+      if (i < currentStep) return "done"
+      if (i === currentStep) return "active"
+      return "upcoming"
+    }
+
+    const isClickable = (i: number) =>
+      interactive && (i < currentStep || i === currentStep)
+
+    // ── Vertical layout ────────────────────────────────────────────────────────
+    if (orientation === "vertical") {
+      return (
+        <div ref={ref} className={cn("ax:flex ax:flex-col", className)} {...props}>
+          {steps.map((step, i) => {
+            const state    = stateFor(i, step.status)
+            const isLast   = i === steps.length - 1
+            const clickable = isClickable(i)
+            const isError   = step.status === "error"
+
+            const row = (
+              <>
+                <div className="ax:flex ax:flex-col ax:items-center ax:self-stretch ax:shrink-0">
+                  <StepCircle state={state} size={size} index={i} icon={step.icon} />
+                  {!isLast && (
+                    <div
+                      className={cn(
+                        "ax:w-px ax:flex-1 ax:my-xs",
+                        isError ? "ax:bg-destructive" : state === "done" ? PRIMARY_FILL : "ax:bg-border",
+                      )}
+                    />
+                  )}
+                </div>
+                <span
+                  className={cn(
+                    LABEL_CLASS[size],
+                    // leading-snug (not the label's leading-none): vertical labels
+                    // wrap, and a 1.0 line-height crams the lines and clips descenders.
+                    "ax:ms-sm ax:pb-md ax:text-start ax:leading-snug",
+                    state === "active" ? "ax:text-foreground ax:font-medium" :
+                    state === "error"  ? "ax:text-destructive ax:font-medium" :
+                    "ax:text-foreground",
+                  )}
+                >
+                  {step.label}
+                </span>
+              </>
+            )
+
+            return clickable ? (
+              <button
+                key={i}
+                type="button"
+                onClick={() => onStepClick?.(i)}
+                aria-current={state === "active" ? "step" : undefined}
+                className={cn(
+                  "ax:flex ax:items-start ax:text-start",
+                  "ax:focus-visible:outline-none ax:focus-visible:ring-2 ax:focus-visible:ring-ring ax:rounded-md",
+                  "ax:transition-opacity ax:hover:opacity-80",
+                )}
+              >
+                {row}
+              </button>
+            ) : (
+              <div
+                key={i}
+                aria-current={state === "active" ? "step" : undefined}
+                className="ax:flex ax:items-start"
+              >
+                {row}
+              </div>
+            )
+          })}
+        </div>
+      )
+    }
+
+    // ── Horizontal layout ──────────────────────────────────────────────────────
+    // Colour of the connector segment whose left-hand ("source") step is `src`.
+    const connectorColor = (src: number) =>
+      steps[src]?.status === "error" ? "ax:bg-destructive" :
+      src < currentStep             ? PRIMARY_FILL :
+      "ax:bg-border"
+
+    return (
+      <div ref={ref} className={cn("ax:flex ax:items-start", className)} {...props}>
+        {steps.map((step, i) => {
+          const state     = stateFor(i, step.status)
+          const isFirst   = i === 0
+          const isLast    = i === steps.length - 1
+          const clickable = isClickable(i)
+
+          // `text-align` can't anchor overflowing nowrap text to a box edge - browsers
+          // overflow nowrap content toward its natural start regardless of alignment.
+          // So the visible label is absolutely positioned against the circle's own box
+          // (not centered-by-content), anchored by its inset edge instead: start-0 for
+          // the first step, end-0 for the last, centered for everything in between. An
+          // invisible clone stays in normal flow purely to reserve the row's height.
+          const labelPosition = cn(
+            "ax:absolute ax:top-full ax:mt-xs ax:whitespace-nowrap",
+            isFirst ? "ax:start-0 ax:text-start" :
+            isLast  ? "ax:end-0 ax:text-end" :
+            "ax:start-1/2 ax:-translate-x-1/2 ax:rtl:translate-x-1/2 ax:text-center",
+          )
+
+          const stepNode = (
+            <div className="ax:flex ax:flex-col ax:items-center ax:gap-xs">
+              <div className="ax:relative">
+                <StepCircle state={state} size={size} index={i} icon={step.icon} />
+                <span
+                  className={cn(
+                    LABEL_CLASS[size],
+                    labelPosition,
+                    "ax:leading-snug",
+                    state === "active" ? "ax:text-foreground ax:font-medium" :
+                    state === "error"  ? "ax:text-destructive-foreground ax:font-medium" :
+                    "ax:text-muted-foreground",
+                  )}
+                >
+                  {step.label}
+                </span>
+              </div>
+              <span aria-hidden className={cn(LABEL_CLASS[size], "ax:invisible ax:whitespace-nowrap ax:leading-snug")}>
+                {step.label}
+              </span>
+            </div>
+          )
+
+          return (
+            <div key={i} className="ax:relative ax:flex ax:flex-1 ax:flex-col ax:items-center">
+              {/* Connector track - pinned to the circle's centerline and spanning
+                  the full (equal-width) column, so it always meets the circle
+                  edges and never shifts with the label width. Each column draws
+                  the half-segment on either side of its circle; the circle's
+                  opaque fill masks the seam where the halves meet at its centre. */}
+              <div
+                aria-hidden
+                className={cn("ax:pointer-events-none ax:absolute ax:inset-x-0 ax:top-0 ax:flex ax:items-center", CIRCLE_H[size])}
+              >
+                <div className={cn("ax:h-px ax:flex-1", isFirst ? "ax:opacity-0" : connectorColor(i - 1))} />
+                <div className={cn("ax:h-px ax:flex-1", isLast  ? "ax:opacity-0" : connectorColor(i))} />
+              </div>
+
+              {clickable ? (
+                <button
+                  type="button"
+                  onClick={() => onStepClick?.(i)}
+                  aria-current={state === "active" ? "step" : undefined}
+                  className={cn(
+                    "ax:relative ax:rounded-md",
+                    "ax:focus-visible:outline-none ax:focus-visible:ring-2 ax:focus-visible:ring-ring",
+                    "ax:transition-opacity ax:hover:opacity-80",
+                  )}
+                >
+                  {stepNode}
+                </button>
+              ) : (
+                <div aria-current={state === "active" ? "step" : undefined} className="ax:relative">
+                  {stepNode}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    )
+  },
+)
+StepIndicator.displayName = "StepIndicator"

package/src/components/switch.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Label } from "./input"
+import { Switch } from "./switch"
+
+const meta: Meta<typeof Switch> = {
+  title: "Components/Switch",
+  component: Switch,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Switch>
+
+export const Default: Story = {
+  render: () => (
+    <div className="ax:flex ax:items-center ax:gap-sm">
+      <Switch id="airplane" />
+      <Label htmlFor="airplane">Airplane mode</Label>
+    </div>
+  ),
+}
+
+export const Checked: Story = {
+  render: () => <Switch defaultChecked />,
+}

package/src/components/switch.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+import { cn } from "../lib/cn"
+
+export const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    ref={ref}
+    className={cn(
+      "ax:peer ax:inline-flex ax:h-5 ax:w-9 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",
+      className
+    )}
+    {...props}
+  >
+    <SwitchPrimitive.Thumb
+      className={cn(
+        "ax:pointer-events-none ax:block ax:size-4 ax:rounded-full ax:bg-background ax:shadow-sm",
+        "ax:transition-transform ax:transition-snappy",
+        "ax:data-[state=checked]:translate-x-4 ax:data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitive.Root>
+))
+Switch.displayName = SwitchPrimitive.Root.displayName

package/src/components/table.stories.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table"
+
+const meta: Meta<typeof Table> = {
+  title: "Components/Table",
+  component: Table,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Table>
+
+export const Default: Story = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>Aisha Khan</TableCell>
+          <TableCell>Active</TableCell>
+          <TableCell>Admin</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Marco Silva</TableCell>
+          <TableCell>Active</TableCell>
+          <TableCell>Editor</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  ),
+}

package/src/components/table.tsx

@@ -0,0 +1,220 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/cn"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type TableSize    = "sm" | "md" | "lg"
+export type TableVariant = "surface" | "ghost"
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+interface TableContextValue {
+  size:    TableSize
+  variant: TableVariant
+}
+
+const TableContext = React.createContext<TableContextValue>({
+  size:    "md",
+  variant: "surface",
+})
+
+// `py-1.5` (6px) and `py-2.5` (10px) are intentional half-steps: they fall
+// between the token scale (xs=8, sm=12) and tune vertical rhythm to the
+// row's font size. `px-*` values map cleanly to spacing tokens.
+const CELL_PADDING: Record<TableSize, string> = {
+  sm: "ax:px-sm ax:py-1.5",
+  md: "ax:px-md ax:py-2.5",
+  lg: "ax:px-lg ax:py-md",
+}
+
+const TEXT_SIZE: Record<TableSize, string> = {
+  sm: "ax:text-xs",
+  md: "ax:text-sm",
+  lg: "ax:text-base",
+}
+
+// ─── Root ─────────────────────────────────────────────────────────────────────
+
+export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+  size?:    TableSize
+  variant?: TableVariant
+}
+
+const Table = React.forwardRef<HTMLTableElement, TableProps>(
+  ({ className, size = "md", variant = "surface", ...props }, ref) => (
+    <TableContext.Provider value={{ size, variant }}>
+      <div
+        className={cn(
+          "ax:w-full ax:overflow-auto",
+          variant === "surface" && "ax:rounded-(--input-radius) ax:border ax:border-border"
+        )}
+      >
+        <table
+          ref={ref}
+          className={cn(
+            "ax:w-full ax:caption-bottom ax:border-collapse",
+            TEXT_SIZE[size],
+            className
+          )}
+          {...props}
+        />
+      </div>
+    </TableContext.Provider>
+  )
+)
+Table.displayName = "Table"
+
+// ─── Header ───────────────────────────────────────────────────────────────────
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => {
+  const { variant } = React.useContext(TableContext)
+  return (
+    <thead
+      ref={ref}
+      className={cn(
+        variant === "surface" && "ax:bg-muted/50",
+        "ax:[&_tr]:border-b ax:[&_tr]:border-border",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+TableHeader.displayName = "TableHeader"
+
+// ─── Body ─────────────────────────────────────────────────────────────────────
+//
+// `bg-card` and the hover state live HERE (not on `TableRow`) so they only
+// apply to data rows. Putting them on `TableRow` would paint over the
+// header's `bg-muted/50` and add a misleading hover effect to header rows.
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn(
+      "ax:[&_tr]:border-b ax:[&_tr]:border-border ax:[&_tr:last-child]:border-0",
+      "ax:[&_tr]:bg-card ax:[&_tr]:transition-colors",
+      "ax:[&_tr:hover]:bg-background",
+      // Selected row: `weakest` auto-inverts to a deep tint in dark; keep it
+      // translucent there (/25) so the row reads as a subtle highlight, not a slab.
+      "ax:[&_tr[data-state=selected]]:bg-primary-muted",
+      "ax:dark:[&_tr[data-state=selected]]:bg-primary-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+// ─── Footer ───────────────────────────────────────────────────────────────────
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => {
+  const { variant } = React.useContext(TableContext)
+  return (
+    <tfoot
+      ref={ref}
+      className={cn(
+        "ax:border-t ax:border-border ax:font-medium",
+        variant === "surface" && "ax:bg-muted/50",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+TableFooter.displayName = "TableFooter"
+
+// ─── Row ──────────────────────────────────────────────────────────────────────
+//
+// Intentionally minimal: base bg / hover / selected styles are scoped on
+// `TableBody` so they apply only to data rows.
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr ref={ref} className={cn(className)} {...props} />
+))
+TableRow.displayName = "TableRow"
+
+// ─── Head cell ────────────────────────────────────────────────────────────────
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => {
+  const { size } = React.useContext(TableContext)
+  return (
+    <th
+      ref={ref}
+      className={cn(
+        CELL_PADDING[size],
+        "ax:text-start ax:align-middle ax:font-medium ax:text-foreground-strong",
+        "ax:[&:has([role=checkbox])]:pe-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+TableHead.displayName = "TableHead"
+
+// ─── Data cell ────────────────────────────────────────────────────────────────
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => {
+  const { size } = React.useContext(TableContext)
+  return (
+    <td
+      ref={ref}
+      className={cn(
+        CELL_PADDING[size],
+        "ax:align-middle ax:text-foreground",
+        "ax:[&:has([role=checkbox])]:pe-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+TableCell.displayName = "TableCell"
+
+// ─── Caption ──────────────────────────────────────────────────────────────────
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("ax:mt-3 ax:t-body-sm ax:text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+// ─── Exports ──────────────────────────────────────────────────────────────────
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+}

package/src/components/tabs.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs"
+
+const meta: Meta<typeof Tabs> = {
+  title: "Components/Tabs",
+  component: Tabs,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Tabs>
+
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="ax:w-[400px]">
+      <TabsList>
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">Make changes to your account here.</TabsContent>
+      <TabsContent value="password">Change your password here.</TabsContent>
+    </Tabs>
+  ),
+}