@adres/mgda-ui 0.0.0-stage → 0.0.1

package/src/components/tabs.tsx

@@ -0,0 +1,276 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cn } from "../lib/cn"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type TabsSize        = "sm" | "md" | "lg"
+export type TabsOrientation = "horizontal" | "vertical"
+
+// Sizing mirrors SegmentedControl + Button exactly so all three primitives can
+// sit side-by-side in a toolbar without visual conflict. Heights:
+//   sm → 32px (h-2xl)   md → 40px (h-3xl)   lg → 48px (h-4xl)
+const LIST_HEIGHT: Record<TabsSize, string> = {
+  sm: "ax:h-2xl",
+  md: "ax:h-3xl",
+  lg: "ax:h-4xl",
+}
+const TRIGGER_PADDING: Record<TabsSize, string> = {
+  sm: "ax:px-sm",
+  md: "ax:px-md",
+  lg: "ax:px-xl",
+}
+const TRIGGER_TEXT: Record<TabsSize, string> = {
+  sm: "ax:t-label-sm",
+  md: "ax:t-label-sm",
+  lg: "ax:t-label-lg",
+}
+// Vertical triggers own their height (no fixed list height), so they need
+// their own vertical padding. Horizontal triggers get height from LIST_HEIGHT.
+const TRIGGER_PADDING_Y: Record<TabsSize, string> = {
+  sm: "ax:py-xs",  //  8px
+  md: "ax:py-sm",  // 12px
+  lg: "ax:py-md",  // 16px
+}
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+interface TabsContextValue {
+  size:            TabsSize
+  orientation:     TabsOrientation
+  currentValue:    string
+  registerTrigger: (value: string, el: HTMLButtonElement | null) => void
+  triggerRefs:     React.MutableRefObject<Map<string, HTMLButtonElement>>
+}
+
+const TabsContext = React.createContext<TabsContextValue>({
+  size:            "md",
+  orientation:     "horizontal",
+  currentValue:    "",
+  registerTrigger: () => {},
+  triggerRefs:     { current: new Map() },
+})
+
+// ─── Root ─────────────────────────────────────────────────────────────────────
+
+export interface TabsProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
+  size?: TabsSize
+  /** `horizontal` (default) is a segmented row; `vertical` stacks the triggers
+   *  in a left-aligned column (labels may wrap). */
+  orientation?: TabsOrientation
+}
+
+export const Tabs = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  TabsProps
+>(({ size = "md", orientation = "horizontal", value, defaultValue, onValueChange, children, ...props }, ref) => {
+  // Trigger refs are kept in a Map so TabsList can measure the active one for
+  // the floating indicator. The Map identity is stable across renders.
+  const triggerRefs = React.useRef(new Map<string, HTMLButtonElement>())
+
+  // Mirror Radix's value internally so the indicator has something to point at
+  // even when the consumer hasn't provided value/onValueChange (uncontrolled).
+  const [internalValue, setInternalValue] = React.useState<string>(
+    value ?? defaultValue ?? ""
+  )
+  const currentValue = value ?? internalValue
+
+  const handleValueChange = React.useCallback(
+    (v: string) => {
+      setInternalValue(v)
+      onValueChange?.(v)
+    },
+    [onValueChange]
+  )
+
+  const registerTrigger = React.useCallback(
+    (val: string, el: HTMLButtonElement | null) => {
+      if (el) triggerRefs.current.set(val, el)
+      else    triggerRefs.current.delete(val)
+    },
+    []
+  )
+
+  const ctx = React.useMemo<TabsContextValue>(
+    () => ({ size, orientation, currentValue, registerTrigger, triggerRefs }),
+    [size, orientation, currentValue, registerTrigger]
+  )
+
+  return (
+    <TabsContext.Provider value={ctx}>
+      <TabsPrimitive.Root
+        ref={ref}
+        orientation={orientation}
+        value={value}
+        defaultValue={defaultValue}
+        onValueChange={handleValueChange}
+        {...props}
+      >
+        {children}
+      </TabsPrimitive.Root>
+    </TabsContext.Provider>
+  )
+})
+Tabs.displayName = TabsPrimitive.Root.displayName
+
+// ─── List ─────────────────────────────────────────────────────────────────────
+//
+// Hosts the floating indicator: a single absolute-positioned div that slides
+// behind the active trigger. Position is measured via getBoundingClientRect on
+// every value change and on parent resize (ResizeObserver). The transition is
+// suppressed on the very first measurement so the indicator doesn't slide in
+// from 0,0 on mount.
+
+export const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, children, ...props }, ref) => {
+  const { size, orientation, currentValue, triggerRefs } = React.useContext(TabsContext)
+
+  const rootRef = React.useRef<HTMLDivElement>(null)
+  const positioned = React.useRef(false)
+  const [indicatorStyle, setIndicatorStyle] = React.useState<React.CSSProperties>({ opacity: 0 })
+
+  const updateIndicator = React.useCallback((val: string) => {
+    const el   = triggerRefs.current.get(val)
+    const root = rootRef.current
+    if (!el || !root) return
+
+    const rootRect = root.getBoundingClientRect()
+    const itemRect = el.getBoundingClientRect()
+
+    setIndicatorStyle({
+      left:       itemRect.left - rootRect.left,
+      width:      itemRect.width,
+      top:        itemRect.top  - rootRect.top,
+      height:     itemRect.height,
+      opacity:    1,
+      transition: positioned.current
+        ? "left 150ms ease, width 150ms ease, top 150ms ease, height 150ms ease"
+        : undefined,
+    })
+    positioned.current = true
+  }, [triggerRefs])
+
+  React.useLayoutEffect(() => {
+    updateIndicator(currentValue)
+  }, [currentValue, updateIndicator])
+
+  React.useEffect(() => {
+    const root = rootRef.current
+    if (!root) return
+    const observer = new ResizeObserver(() => updateIndicator(currentValue))
+    observer.observe(root)
+    return () => observer.disconnect()
+  }, [currentValue, updateIndicator])
+
+  // Merge the forwarded ref with the local root ref so consumers can still
+  // attach their own ref while we measure the same node.
+  const mergedRef = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      (rootRef as React.MutableRefObject<HTMLDivElement | null>).current = node
+      if (typeof ref === "function") ref(node)
+      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node
+    },
+    [ref]
+  )
+
+  return (
+    <TabsPrimitive.List
+      ref={mergedRef}
+      className={cn(
+        "ax:relative ax:items-stretch ax:bg-muted ax:rounded-(--input-radius) ax:gap-px",
+        orientation === "vertical"
+          // Stacks full-width in a column; height is content-driven. Set a width
+          // on this element (or its container) to let long labels wrap.
+          ? "ax:flex ax:flex-col ax:w-full"
+          : cn("ax:inline-flex", LIST_HEIGHT[size]),
+        className
+      )}
+      {...props}
+    >
+      {/* Floating indicator - slides behind the active trigger */}
+      <div
+        aria-hidden="true"
+        // Dark mode: a raised neutral-stronger thumb, lighter than the `bg-muted`
+        // track, so the active tab pops off the track (mirrors the light-mode
+        // white-on-grey lift). Matches SegmentedControl. Light stays --card.
+        className="ax:absolute ax:bg-card ax:dark:bg-neutral-weaker ax:shadow-sm ax:rounded-(--input-radius) ax:pointer-events-none"
+        style={indicatorStyle}
+      />
+      {children}
+    </TabsPrimitive.List>
+  )
+})
+TabsList.displayName = TabsPrimitive.List.displayName
+
+// ─── Trigger ──────────────────────────────────────────────────────────────────
+
+export const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, value, children, ...props }, ref) => {
+  const { size, orientation, currentValue, registerTrigger } = React.useContext(TabsContext)
+  const isActive = currentValue === value
+  const localRef = React.useRef<HTMLButtonElement>(null)
+
+  React.useImperativeHandle(ref, () => localRef.current!)
+
+  React.useLayoutEffect(() => {
+    registerTrigger(value, localRef.current)
+    return () => registerTrigger(value, null)
+  }, [value, registerTrigger])
+
+  return (
+    <TabsPrimitive.Trigger
+      ref={localRef}
+      value={value}
+      className={cn(
+        "ax:relative ax:z-10 ax:flex ax:items-center ax:cursor-pointer ax:select-none",
+        "ax:rounded-(--input-radius) ax:leading-snug",
+        "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-1 ax:focus-visible:ring-offset-muted",
+        "ax:disabled:cursor-not-allowed ax:disabled:opacity-50",
+        TRIGGER_PADDING[size],
+        TRIGGER_TEXT[size],
+        // Horizontal: centered single line. Vertical: full-width, start-aligned,
+        // owns its vertical padding and may wrap (hence leading-snug above).
+        orientation === "vertical"
+          ? cn("ax:w-full ax:justify-start ax:text-start", TRIGGER_PADDING_Y[size])
+          : "ax:justify-center ax:whitespace-nowrap",
+        isActive ? "ax:text-primary-foreground" : "ax:text-muted-foreground ax:hover:text-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </TabsPrimitive.Trigger>
+  )
+})
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+// ─── Content ──────────────────────────────────────────────────────────────────
+
+export const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => {
+  const { orientation } = React.useContext(TabsContext)
+  return (
+    <TabsPrimitive.Content
+      ref={ref}
+      className={cn(
+        // Horizontal stacks content under the list; vertical places it beside
+        // the list, so spacing is left to the consumer's row layout.
+        orientation === "vertical" ? "" : "ax:mt-4",
+        "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",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+TabsContent.displayName = TabsPrimitive.Content.displayName

package/src/components/testimonials.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Testimonials } from "./testimonials"
+
+const meta: Meta<typeof Testimonials> = {
+  title: "Components/Testimonials",
+  component: Testimonials,
+  tags: ["autodocs"],
+  args: {
+    eyebrow: "Testimonials",
+    title: "Loved by teams everywhere",
+    items: [
+      { quote: "Adres helped us ship a consistent UI across three brands.", name: "Sarah Chen", role: "Design Lead", company: "Madhmoun", rating: 5 },
+      { quote: "The component library saved us months of work.", name: "Omar Ali", role: "Engineering Manager", company: "ThinkProp", rating: 5 },
+    ],
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Testimonials>
+
+export const Default: Story = {}

package/src/components/testimonials.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { Star } from "lucide-react"
+import { motion } from "motion/react"
+import { cn } from "../lib/cn"
+import { cardCn } from "./card"
+import { useReducedMotion } from "../hooks/use-reduced-motion"
+import { stagger, variants, viewport as defaultViewport } from "../lib/motion"
+
+export interface Testimonial {
+  quote: string
+  name: string
+  role?: string
+  company?: string
+  avatar?: string
+  rating?: number
+}
+
+export interface TestimonialsProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: React.ReactNode
+  title?: React.ReactNode
+  items: Testimonial[]
+  columns?: 2 | 3
+}
+
+export function Testimonials({ className, eyebrow, title, items, columns = 3, ...props }: TestimonialsProps) {
+  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) && (
+          <div className="ax:max-w-2xl ax:mb-4xl ax:space-y-sm">
+            {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>
+            )}
+          </div>
+        )}
+
+        <motion.div
+          className={cn(
+            "ax:grid ax:gap-xl",
+            columns === 2 ? "ax:md:grid-cols-2" : "ax:md:grid-cols-2 ax:lg:grid-cols-3"
+          )}
+          {...(reduce ? {} : {
+            variants: stagger(0, 0.07),
+            initial: "hidden",
+            whileInView: "visible",
+            viewport: defaultViewport,
+          })}
+        >
+          {items.map((item, i) => (
+            <motion.figure
+              key={i}
+              {...(reduce ? {} : { variants: variants.fadeUp })}
+              className={cardCn("default", "xl", "ax:flex ax:flex-col ax:gap-md")}
+            >
+              {item.rating && (
+                <div className="ax:flex ax:gap-0.5">
+                  {Array.from({ length: 5 }).map((_, j) => (
+                    <Star
+                      key={j}
+                      className={cn(
+                        "ax:size-4",
+                        j < item.rating! ? "ax:fill-warning ax:text-warning-strong" : "ax:fill-muted ax:text-muted"
+                      )}
+                    />
+                  ))}
+                </div>
+              )}
+              <blockquote className="ax:flex-1 ax:t-body-sm ax:text-foreground">
+                "{item.quote}"
+              </blockquote>
+              <figcaption className="ax:flex ax:items-center ax:gap-sm">
+                {item.avatar ? (
+                  <img
+                    src={item.avatar}
+                    alt={item.name}
+                    className="ax:size-9 ax:rounded-full ax:object-cover ax:bg-muted"
+                  />
+                ) : (
+                  <div className="ax:size-9 ax:rounded-full ax:bg-primary/10 ax:text-primary ax:flex ax:items-center ax:justify-center ax:t-label-sm">
+                    {item.name.charAt(0)}
+                  </div>
+                )}
+                <div>
+                  <div className="ax:t-label-sm ax:text-foreground">{item.name}</div>
+                  {(item.role || item.company) && (
+                    <div className="ax:t-caption ax:text-muted-foreground">
+                      {[item.role, item.company].filter(Boolean).join(" · ")}
+                    </div>
+                  )}
+                </div>
+              </figcaption>
+            </motion.figure>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  )
+}

package/src/components/text-link.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { TextLink } from "./text-link"
+import { Text } from "./text"
+
+const meta: Meta<typeof TextLink> = {
+  title: "Components/TextLink",
+  component: TextLink,
+  tags: ["autodocs"],
+  argTypes: {
+    color: { control: "select", options: ["primary", "default", "muted"] },
+    underline: { control: "select", options: ["hover", "always", "none"] },
+    weight: { control: "select", options: ["regular", "medium"] },
+  },
+  args: {
+    href: "#",
+    children: "Forgot password?",
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof TextLink>
+
+export const Default: Story = {}
+
+/** Inherits the surrounding size when `size` is omitted, so it never shifts the line. */
+export const InSentence: Story = {
+  render: (args) => (
+    <Text as="p" size="2" color="muted">
+      Don&apos;t have an account? <TextLink {...args}>Create one</TextLink>
+    </Text>
+  ),
+}
+
+export const Colors: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "1.5rem" }}>
+      <TextLink href="#">Primary</TextLink>
+      <TextLink href="#" color="default">Default</TextLink>
+      <TextLink href="#" color="muted">Muted</TextLink>
+    </div>
+  ),
+}
+
+export const External: Story = {
+  args: { href: "https://example.com", external: true, underline: "always", children: "Read the privacy policy" },
+}

package/src/components/text-link.test.tsx

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest"
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { TextLink } from "./text-link"
+
+describe("TextLink", () => {
+  it("adds safe new-tab attributes and a screen-reader hint when external", () => {
+    const html = renderToStaticMarkup(<TextLink href="https://example.com" external>Docs</TextLink>)
+    expect(html).toContain('target="_blank"')
+    expect(html).toContain('rel="noopener noreferrer"')
+    expect(html).toContain("(opens in a new tab)")
+  })
+
+  it("inherits the surrounding text size unless size is set", () => {
+    expect(renderToStaticMarkup(<TextLink href="#">Link</TextLink>)).not.toContain("ax:t-body")
+    expect(renderToStaticMarkup(<TextLink href="#" size="2">Link</TextLink>)).toContain("ax:t-body-sm")
+  })
+})

package/src/components/text-link.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { tv, type VariantProps } from "tailwind-variants"
+import { cn } from "../lib/cn"
+
+export type TextLinkColor     = "primary" | "default" | "muted"
+export type TextLinkUnderline = "hover" | "always" | "none"
+export type TextLinkSize      = "1" | "2" | "3" | "4" | "5"
+
+/**
+ * Inline text link. Unlike Button's `link` variant it carries no height or
+ * padding, so it sits inside a sentence without shifting the line. `size`
+ * shares Text's body scale and is omitted by default so the link inherits the
+ * surrounding text size.
+ */
+export const textLinkVariants = tv({
+  base: [
+    "ax:cursor-pointer ax:rounded-xs ax:underline-offset-4 ax:decoration-1",
+    "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",
+  ],
+  variants: {
+    color: {
+      primary: "ax:text-primary-foreground",
+      default: "ax:text-foreground",
+      muted:   "ax:text-muted-foreground ax:hover:text-foreground",
+    },
+    underline: {
+      hover:  "ax:no-underline ax:hover:underline",
+      always: "ax:underline",
+      none:   "ax:no-underline",
+    },
+    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",
+    },
+    weight: {
+      regular: "ax:font-normal",
+      medium:  "ax:font-medium",
+    },
+  },
+  defaultVariants: {
+    color:     "primary",
+    underline: "hover",
+    weight:    "medium",
+  },
+}, { twMerge: false })
+
+export interface TextLinkProps
+  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "color">,
+    VariantProps<typeof textLinkVariants> {
+  /** Render the child instead of an `<a>`, e.g. a framework router link. */
+  asChild?: boolean
+  /** Opens in a new tab with `rel="noopener noreferrer"` and announces that to screen readers. */
+  external?: boolean
+}
+
+export const TextLink = React.forwardRef<HTMLAnchorElement, TextLinkProps>(
+  ({ className, color, underline, size, weight, asChild = false, external = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a"
+    const externalProps = external ? { target: "_blank", rel: "noopener noreferrer" } : {}
+    return (
+      <Comp
+        ref={ref}
+        data-slot="text-link"
+        className={cn(textLinkVariants({ color, underline, size, weight }), className)}
+        {...externalProps}
+        {...props}
+      >
+        {/* Slot needs a single child to merge into, so the external hint only renders on a plain <a>. */}
+        {external && !asChild ? (
+          <>
+            {children}
+            <span className="ax:sr-only"> (opens in a new tab)</span>
+          </>
+        ) : (
+          children
+        )}
+      </Comp>
+    )
+  },
+)
+TextLink.displayName = "TextLink"

package/src/components/text.stories.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Text, type TextSize } from "./text"
+
+const meta: Meta<typeof Text> = {
+  title: "Components/Text",
+  component: Text,
+  tags: ["autodocs"],
+  args: {
+    children: "The quick brown fox jumps over the lazy dog.",
+    size: "3",
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Text>
+
+export const Default: Story = {}
+
+export const Muted: Story = {
+  args: { color: "muted", size: "2" },
+}
+
+const SIZE_TO_T_CLASS: Record<TextSize, string> = {
+  "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",
+}
+
+export const Scale: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+      {Object.entries(SIZE_TO_T_CLASS).map(([size, tClass]) => (
+        <div key={size} style={{ display: "flex", alignItems: "baseline", gap: "1rem" }}>
+          <code style={{ minWidth: "8rem" }}>
+            size=&quot;{size}&quot; -&gt; {tClass}
+          </code>
+          <Text size={size as TextSize}>The quick brown fox jumps over the lazy dog.</Text>
+        </div>
+      ))}
+    </div>
+  ),
+}