@adres/mgda-ui 0.0.0-stage → 0.0.1

package/src/components/hero.tsx

@@ -0,0 +1,498 @@
+"use client"
+
+import * as React from "react"
+import { Check } from "lucide-react"
+import { motion } from "motion/react"
+import { cn } from "../lib/cn"
+import { Card, type CardProps } from "./card"
+import { useReducedMotion } from "../hooks/use-reduced-motion"
+import { transitions, variants } from "../lib/motion"
+
+export type HeroLayout = "centered" | "split" | "capsule" | "magazine" | "cinematic" | "editorial" | "mosaic" | "search"
+
+export interface HeroStat {
+  value: React.ReactNode
+  label: React.ReactNode
+}
+
+export interface HeroProps extends CardProps {
+  /** Optional pre-headline label / eyebrow. In magazine layout, appears in the footer-left strip. */
+  eyebrow?: React.ReactNode
+  /** Required: the marketing headline. Accepts JSX for styled spans. */
+  headline: React.ReactNode
+  /** Optional supporting paragraph. */
+  description?: React.ReactNode
+  /** CTA action slots - typically primary + secondary buttons. */
+  actions?: React.ReactNode
+  /** Main image / media slot. */
+  media?: React.ReactNode
+  /** Secondary image slot - magazine right column. */
+  secondaryMedia?: React.ReactNode
+  /** Visual template. Defaults to "split" when media is set, "centered" otherwise. */
+  layout?: HeroLayout
+  /** Metric pairs rendered below content (capsule/split) or in a bottom grid (cinematic). */
+  stats?: HeroStat[]
+  /** Brand name list for the magazine footer strip. */
+  brands?: React.ReactNode[]
+  /** Pill / live-indicator badge. split: above headline. cinematic: top-right. */
+  badge?: React.ReactNode
+  /** Brand identity element - cinematic top-left logo. */
+  brand?: React.ReactNode
+  /** Content overlaid on the media column - split floating cards, badges, etc. */
+  overlay?: React.ReactNode
+  /** Search widget slot - rendered below description in the "search" layout. */
+  search?: React.ReactNode
+  /** Trust-point strings shown below the search widget. A checkmark is prepended to each. */
+  badges?: string[]
+  /** "dark" applies a deep neutral background - intended for the cinematic layout. */
+  theme?: "light" | "dark"
+}
+
+export const Hero = React.forwardRef<HTMLDivElement, HeroProps>(
+  (
+    {
+      className,
+      style,
+      eyebrow,
+      headline,
+      description,
+      actions,
+      media,
+      secondaryMedia,
+      layout: layoutProp,
+      stats,
+      brands,
+      badge,
+      brand,
+      overlay,
+      search,
+      badges,
+      theme,
+      padding = "none",
+      variant,
+      ...props
+    },
+    ref
+  ) => {
+    const reduce = useReducedMotion()
+    const layout = layoutProp ?? (media ? "split" : "centered")
+
+    // cinematic manages its own background: use ghost to avoid bg-card conflict
+    const cardVariant = variant ?? (layout === "cinematic" ? "ghost" : "default")
+
+    const mergedStyle: React.CSSProperties = {
+      ...(theme === "dark" ? { background: "hsl(var(--neutral-950))" } : {}),
+      ...style,
+    }
+
+    const enter = reduce
+      ? {}
+      : {
+          variants: variants.fadeUp,
+          initial: "hidden" as const,
+          animate: "visible" as const,
+          transition: transitions.slow,
+        }
+
+    const cardRoot = (children: React.ReactNode) => (
+      <Card
+        ref={ref}
+        variant={cardVariant}
+        padding={padding}
+        style={mergedStyle}
+        className={cn("ax:relative ax:w-full", className)}
+        {...props}
+      >
+        {children}
+      </Card>
+    )
+
+    // ── Centered ─────────────────────────────────────────────────────────
+    if (layout === "centered") {
+      return cardRoot(
+        <div className="ax:px-xl ax:md:px-3xl ax:py-5xl ax:md:py-6xl ax:mx-auto ax:max-w-7xl">
+          <div className="ax:max-w-3xl ax:text-center ax:mx-auto">
+            <motion.div {...enter} className="ax:flex ax:flex-col ax:gap-lg ax:items-center">
+              {eyebrow && (
+                <span className="ax:inline-flex ax:items-center ax:self-start ax:t-overline ax:text-primary ax:px-2.5 ax:py-1 ax:rounded-full ax:bg-primary/10">
+                  {eyebrow}
+                </span>
+              )}
+              <h1 className="ax:t-display-lg ax:md:t-display-xl ax:lg:t-display-2xl ax:text-foreground ax:[text-wrap:balance]">
+                {headline}
+              </h1>
+              {description && (
+                <p className="ax:t-body-md ax:md:t-body-lg ax:text-muted-foreground ax:[text-wrap:pretty] ax:max-w-prose ax:mx-auto">
+                  {description}
+                </p>
+              )}
+              {actions && <div className="ax:flex ax:flex-wrap ax:gap-sm ax:pt-xs">{actions}</div>}
+            </motion.div>
+          </div>
+        </div>
+      )
+    }
+
+    // ── Split ─────────────────────────────────────────────────────────────
+    if (layout === "split") {
+      return cardRoot(
+        <div className="ax:grid ax:md:grid-cols-2 ax:min-h-[480px]">
+          <motion.div
+            {...enter}
+            className="ax:flex ax:flex-col ax:justify-center ax:gap-6 ax:px-10 ax:py-14 ax:bg-background"
+          >
+            {badge && <div className="ax:w-fit">{badge}</div>}
+            <div>
+              <h1 className="ax:t-display-lg ax:md:t-display-xl ax:text-foreground ax:leading-[1.1] ax:[text-wrap:balance]">
+                {headline}
+              </h1>
+              {description && (
+                <p className="ax:mt-4 ax:t-body-md ax:text-muted-foreground ax:max-w-sm ax:[text-wrap:pretty]">
+                  {description}
+                </p>
+              )}
+            </div>
+            {actions && (
+              <div className="ax:flex ax:items-center ax:gap-3 ax:flex-wrap">{actions}</div>
+            )}
+            {stats && stats.length > 0 && (
+              <div className="ax:flex ax:items-center ax:gap-5 ax:pt-2 ax:flex-wrap">
+                {stats.map((stat, i) => (
+                  <div key={i}>
+                    <p className="ax:t-h3 ax:font-bold ax:text-foreground ax:tabular-nums">{stat.value}</p>
+                    <p className="ax:t-caption ax:text-muted-foreground">{stat.label}</p>
+                  </div>
+                ))}
+              </div>
+            )}
+          </motion.div>
+          {media && (
+            <motion.div
+              {...(reduce
+                ? {}
+                : {
+                    variants: variants.scaleIn,
+                    initial: "hidden" as const,
+                    animate: "visible" as const,
+                    transition: { ...transitions.slow, delay: 0.1 },
+                  })}
+              className="ax:relative ax:min-h-[320px] ax:overflow-hidden"
+            >
+              {media}
+              {overlay}
+            </motion.div>
+          )}
+        </div>
+      )
+    }
+
+    // ── Capsule ───────────────────────────────────────────────────────────
+    if (layout === "capsule") {
+      return cardRoot(
+        <motion.div {...enter} className="ax:px-8 ax:pt-10 ax:pb-8 ax:md:px-12 ax:md:pt-12 ax:md:pb-10">
+          {/* Row 1 - Headline + description */}
+          <div className="ax:flex ax:items-start ax:justify-between ax:gap-8 ax:mb-10">
+            <h1 className="ax:t-display-lg ax:md:t-display-xl ax:font-semibold ax:leading-[1.06] ax:text-foreground ax:[text-wrap:balance]">
+              {headline}
+            </h1>
+            {description && (
+              <p className="ax:hidden ax:md:block ax:t-body-sm ax:text-muted-foreground ax:leading-relaxed ax:max-w-[260px] ax:shrink-0">
+                {description}
+              </p>
+            )}
+          </div>
+          {/* Row 2 - Capsule image + featured stat */}
+          {(media || stats?.[0]) && (
+            <div className="ax:flex ax:items-center ax:gap-8 ax:mb-8">
+              {media && (
+                <div className="ax:flex-1 ax:rounded-full ax:overflow-hidden ax:h-[200px] ax:md:h-[240px] ax:lg:h-[260px]">
+                  {media}
+                </div>
+              )}
+              {stats?.[0] && (
+                <div className="ax:hidden ax:md:block ax:shrink-0 ax:text-right">
+                  <p className="ax:t-display-sm ax:lg:t-display-xl ax:font-bold ax:text-foreground ax:tabular-nums ax:leading-none">
+                    {stats[0].value}
+                  </p>
+                  <p className="ax:t-body-sm ax:text-muted-foreground ax:mt-2">{stats[0].label}</p>
+                </div>
+              )}
+            </div>
+          )}
+          {/* Row 3 - Bottom stats */}
+          {stats && stats.length > 1 && (
+            <div className="ax:flex ax:items-center ax:gap-10 ax:md:gap-16">
+              {stats.slice(1).map((stat, i) => (
+                <div key={i}>
+                  <p className="ax:t-h1 ax:md:t-display-md ax:font-bold ax:text-foreground ax:tabular-nums">{stat.value}</p>
+                  <p className="ax:t-caption ax:text-muted-foreground ax:mt-0.5">{stat.label}</p>
+                </div>
+              ))}
+            </div>
+          )}
+          {actions && <div className="ax:flex ax:flex-wrap ax:gap-sm ax:mt-lg">{actions}</div>}
+        </motion.div>
+      )
+    }
+
+    // ── Magazine ──────────────────────────────────────────────────────────
+    if (layout === "magazine") {
+      return cardRoot(
+        <motion.div {...enter} className="ax:p-8 ax:md:p-10 ax:lg:p-12">
+          {/* Row 1 - Headline + description */}
+          <div className="ax:flex ax:items-start ax:justify-between ax:gap-6 ax:mb-8 ax:md:mb-10">
+            <h1 className="ax:t-display-sm ax:md:t-display-xl ax:lg:t-display-2xl ax:leading-[0.92] ax:text-foreground ax:[text-wrap:balance]">
+              {headline}
+            </h1>
+            {description && (
+              <p className="ax:hidden ax:md:block ax:t-body-sm ax:text-muted-foreground ax:leading-relaxed ax:max-w-[190px] ax:shrink-0 ax:pt-1">
+                {description}
+              </p>
+            )}
+          </div>
+          {/* Row 2 - Main image + right column */}
+          {(media || secondaryMedia || stats?.[0]) && (
+            <div className="ax:flex ax:gap-3 ax:items-stretch">
+              {media && (
+                <div className="ax:relative ax:flex-1 ax:rounded-xl ax:overflow-hidden ax:min-h-[260px] ax:md:min-h-[340px] ax:lg:min-h-[380px]">
+                  {media}
+                </div>
+              )}
+              {(stats?.[0] || secondaryMedia) && (
+                <div className="ax:hidden ax:md:flex ax:flex-col ax:gap-3 ax:shrink-0 ax:w-36 ax:lg:w-44">
+                  {stats?.[0] && (
+                    <div className="ax:rounded-xl ax:bg-muted ax:px-4 ax:py-5">
+                      <p className="ax:t-display-md ax:lg:t-display-lg ax:font-black ax:text-foreground ax:tabular-nums ax:leading-none">
+                        {stats[0].value}
+                      </p>
+                      <p className="ax:t-overline ax:text-muted-foreground ax:mt-2">{stats[0].label}</p>
+                    </div>
+                  )}
+                  {secondaryMedia && (
+                    <div className="ax:relative ax:flex-1 ax:rounded-xl ax:overflow-hidden">{secondaryMedia}</div>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+          {/* Row 3 - Footer strip */}
+          {(eyebrow || brands || stats?.[1]) && (
+            <div className="ax:flex ax:items-center ax:justify-between ax:gap-4 ax:mt-6 ax:pt-5 ax:border-t ax:border-border">
+              {eyebrow && (
+                <p className="ax:t-overline ax:font-black ax:text-muted-foreground ax:leading-snug ax:shrink-0">
+                  {eyebrow}
+                </p>
+              )}
+              {brands && brands.length > 0 && (
+                <div className="ax:hidden ax:sm:flex ax:items-center ax:gap-5 ax:t-label-sm ax:text-muted-foreground/50">
+                  {brands.map((b, i) => (
+                    <span key={i}>{b}</span>
+                  ))}
+                </div>
+              )}
+              {stats?.[1] && (
+                <div className="ax:shrink-0 ax:text-right">
+                  <p className="ax:t-h1 ax:lg:t-display-md ax:font-black ax:text-foreground ax:tabular-nums ax:leading-none">
+                    {stats[1].value}
+                  </p>
+                  <p className="ax:t-overline ax:text-muted-foreground ax:mt-1">{stats[1].label}</p>
+                </div>
+              )}
+            </div>
+          )}
+        </motion.div>
+      )
+    }
+
+    // ── Editorial ─────────────────────────────────────────────────────────
+    if (layout === "editorial") {
+      return cardRoot(
+        <>
+          {/* Top accent rule */}
+          <div className="ax:h-1 ax:bg-primary" />
+          <div className="ax:px-10 ax:py-14">
+            {/* Eyebrow row - dateline + issue badge */}
+            <div className="ax:flex ax:items-center ax:justify-between ax:mb-8">
+              <div className="ax:flex ax:items-center ax:gap-3">
+                <span className="ax:h-px ax:w-8 ax:inline-block ax:bg-primary" />
+                <p className="ax:t-code ax:uppercase ax:tracking-[0.25em] ax:text-muted-foreground">{eyebrow}</p>
+              </div>
+              {badge}
+            </div>
+            <motion.div {...enter}>
+              {/* Oversized headline */}
+              <h1 className="ax:t-display-sm ax:md:t-display-2xl ax:lg:t-display-3xl ax:text-foreground ax:[text-wrap:balance]">
+                {headline}
+              </h1>
+              {/* Below-headline grid - description left, stats + actions right */}
+              <div className="ax:mt-8 ax:pt-8 ax:border-t ax:border-border ax:grid ax:md:grid-cols-[2fr_1fr] ax:gap-8">
+                {description && (
+                  <p className="ax:t-body-md ax:text-muted-foreground ax:leading-relaxed ax:max-w-prose">
+                    {description}
+                  </p>
+                )}
+                <div className="ax:flex ax:flex-col ax:gap-4 ax:justify-between">
+                  {stats && stats.length > 0 && (
+                    <div className="ax:grid ax:grid-cols-2 ax:gap-4">
+                      {stats.map((stat, i) => (
+                        <div key={i} className="ax:border-l-2 ax:border-primary ax:pl-3">
+                          <p className="ax:t-h2">{stat.value}</p>
+                          <p className="ax:t-caption ax:text-muted-foreground ax:mt-0.5">{stat.label}</p>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  {actions && <div className="ax:flex ax:gap-2 ax:mt-auto">{actions}</div>}
+                </div>
+              </div>
+            </motion.div>
+          </div>
+          {/* Bottom rule */}
+          <div className="ax:h-px ax:bg-border" />
+        </>
+      )
+    }
+
+    // ── Mosaic ────────────────────────────────────────────────────────────
+    if (layout === "mosaic") {
+      return cardRoot(
+        <div className="ax:grid ax:md:grid-cols-[1fr_1.2fr] ax:min-h-[480px]">
+          <motion.div {...enter} className="ax:flex ax:flex-col ax:justify-center ax:gap-6 ax:px-10 ax:py-14">
+            {eyebrow && <p className="ax:t-overline ax:text-primary">{eyebrow}</p>}
+            <h1 className="ax:t-display-lg ax:md:t-display-xl ax:text-foreground ax:leading-[1.1] ax:[text-wrap:balance]">
+              {headline}
+            </h1>
+            {description && (
+              <p className="ax:t-body-sm ax:text-muted-foreground ax:leading-relaxed ax:max-w-xs">{description}</p>
+            )}
+            {actions && <div className="ax:flex ax:flex-col ax:gap-3">{actions}</div>}
+          </motion.div>
+          {media && (
+            <motion.div
+              {...(reduce
+                ? {}
+                : {
+                    variants: variants.scaleIn,
+                    initial: "hidden" as const,
+                    animate: "visible" as const,
+                    transition: { ...transitions.slow, delay: 0.1 },
+                  })}
+              className="ax:p-4"
+            >
+              {media}
+            </motion.div>
+          )}
+        </div>
+      )
+    }
+
+    // ── Search-first ──────────────────────────────────────────────────────
+    if (layout === "search") {
+      return cardRoot(
+        <div className="ax:px-6 ax:py-16 ax:text-center">
+          <motion.div {...enter} className="ax:flex ax:flex-col ax:items-center ax:gap-4">
+            {eyebrow && <p className="ax:t-overline ax:text-primary">{eyebrow}</p>}
+            <h1 className="ax:t-display-lg ax:md:t-display-xl ax:text-foreground ax:leading-tight ax:[text-wrap:balance]">
+              {headline}
+            </h1>
+            {description && (
+              <p className="ax:t-body-md ax:text-muted-foreground ax:max-w-lg ax:mx-auto ax:[text-wrap:pretty]">
+                {description}
+              </p>
+            )}
+            {search && <div className="ax:mt-6 ax:w-full ax:max-w-2xl ax:mx-auto">{search}</div>}
+            {badges && badges.length > 0 && (
+              <div className="ax:mt-4 ax:flex ax:items-center ax:justify-center ax:gap-6 ax:flex-wrap">
+                {badges.map((b, i) => (
+                  <div key={i} className="ax:flex ax:items-center ax:gap-1.5 ax:t-caption ax:text-muted-foreground">
+                    <Check className="ax:size-3.5 ax:text-primary ax:shrink-0" />
+                    {b}
+                  </div>
+                ))}
+              </div>
+            )}
+          </motion.div>
+        </div>
+      )
+    }
+
+    // ── Cinematic ─────────────────────────────────────────────────────────
+    const isDark = theme === "dark"
+    const col = {
+      text:   isDark ? "hsl(var(--neutral-50))"  : undefined,
+      muted:  isDark ? "hsl(var(--neutral-400))" : undefined,
+      dim:    isDark ? "hsl(var(--neutral-500))" : undefined,
+      bg:     isDark ? "hsl(var(--neutral-900))" : undefined,
+      border: isDark ? "hsl(var(--neutral-800))" : undefined,
+    }
+
+    return cardRoot(
+      <div className="ax:relative ax:min-h-[520px] ax:flex ax:flex-col ax:justify-between ax:px-10 ax:py-14 ax:overflow-hidden">
+        {/* Atmospheric glow decorations */}
+        <div
+          className="ax:absolute ax:-top-32 ax:left-1/2 ax:-translate-x-1/2 ax:w-[600px] ax:h-[400px] ax:rounded-full ax:opacity-20 ax:blur-3xl ax:pointer-events-none"
+          style={{ background: "hsl(var(--primary))" }}
+        />
+        <div
+          className="ax:absolute ax:-bottom-20 ax:right-0 ax:w-72 ax:h-72 ax:rounded-full ax:opacity-10 ax:blur-3xl ax:pointer-events-none"
+          style={{ background: "hsl(var(--accent))" }}
+        />
+        {/* Top bar - brand identity + live badge */}
+        {(brand || badge) && (
+          <div className="ax:relative ax:flex ax:items-center ax:justify-between">{brand}{badge}</div>
+        )}
+        {/* Center - eyebrow + headline + description + actions */}
+        <motion.div {...enter} className="ax:relative ax:text-center ax:py-8">
+          {eyebrow && (
+            <p
+              className="ax:t-code ax:uppercase ax:tracking-[0.3em] ax:mb-6"
+              style={{ color: col.dim }}
+            >
+              {eyebrow}
+            </p>
+          )}
+          <h1
+            className="ax:t-display-xl ax:md:t-display-3xl ax:[text-wrap:balance]"
+            style={{ color: col.text }}
+          >
+            {headline}
+          </h1>
+          {description && (
+            <p className="ax:mt-6 ax:t-body-sm ax:max-w-md ax:mx-auto" style={{ color: col.muted }}>
+              {description}
+            </p>
+          )}
+          {actions && (
+            <div className="ax:mt-8 ax:flex ax:items-center ax:justify-center ax:gap-3">{actions}</div>
+          )}
+        </motion.div>
+        {/* Bottom stats grid */}
+        {stats && stats.length > 0 && (
+          <div
+            className="ax:relative ax:grid ax:gap-px ax:rounded-lg ax:overflow-hidden"
+            style={{
+              gridTemplateColumns: `repeat(${stats.length}, 1fr)`,
+              border: col.border ? `1px solid ${col.border}` : undefined,
+            }}
+          >
+            {stats.map((stat, i) => (
+              <div
+                key={i}
+                className="ax:flex ax:flex-col ax:items-center ax:gap-1 ax:px-4 ax:py-3"
+                style={{ background: col.bg }}
+              >
+                <p className="ax:t-h5 ax:font-bold ax:tabular-nums" style={{ color: col.text }}>
+                  {stat.value}
+                </p>
+                <p className="ax:text-[10px]" style={{ color: col.dim }}>
+                  {stat.label}
+                </p>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+Hero.displayName = "Hero"

package/src/components/input-button.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { InputButton } from "./input-button"
+
+const meta: Meta<typeof InputButton> = {
+  title: "Components/InputButton",
+  component: InputButton,
+  tags: ["autodocs"],
+  args: {
+    placeholder: "Enter your email",
+    buttonLabel: "Subscribe",
+    onButtonClick: () => {},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof InputButton>
+
+export const Default: Story = {}

package/src/components/input-button.tsx

@@ -0,0 +1,112 @@
+"use client"
+
+import * as React from "react"
+import { Button, type ButtonProps } from "./button"
+import { Input, type InputProps, type InputSize } from "./input"
+import { cn } from "../lib/cn"
+
+/**
+ * InputButton - a text Input + Button compactly joined into a single inline group.
+ *
+ * The sibling of SelectButton: where that pairs a Select with a commit action,
+ * this pairs a free-text Input with one (search, submit, apply). Both halves
+ * share the same height ladder (sm/md/lg align with Button, Input, Select, and
+ * Dropdown) so they line up when placed side-by-side, and they overlap by 1px so
+ * the seam reads as a single squared pill.
+ *
+ *   <InputButton
+ *     size="md"
+ *     placeholder="e.g. AUH-100482"
+ *     value={value}
+ *     onChange={(e) => setValue(e.target.value)}
+ *     buttonType="submit"
+ *     buttonLabel="Search"
+ *   />
+ *
+ * All standard input attributes (value, onChange, placeholder, disabled, name,
+ * aria-*, …) are forwarded to the inner Input. `disabled` disables BOTH halves;
+ * use `buttonDisabled` to disable only the button.
+ */
+
+export type InputButtonSize = InputSize
+
+/**
+ * Variant whitelist for the right-hand action button - mirrors SelectButton.
+ * Excludes Button variants that don't fit the joined-pill composite:
+ *   ghost       - transparent background reads as "no button"
+ *   accent      - wrong semantics for a commit action
+ *   destructive - wrong semantics for a search/submit toolbar
+ *   link        - underline-on-hover text breaks the joined-pill shape
+ */
+export type InputButtonVariant = Exclude<NonNullable<ButtonProps["variant"]>, "ghost" | "accent" | "destructive">
+
+export interface InputButtonProps extends Omit<InputProps, "size"> {
+  /** Shared height/typography ladder - matches Button, Input, Select. */
+  size?: InputButtonSize
+  /** Visual treatment of the right-hand action button. */
+  variant?: InputButtonVariant
+
+  // ─── Button half ──────────────────────────────────────────────────────────────
+  buttonLabel: React.ReactNode
+  onButtonClick?: React.MouseEventHandler<HTMLButtonElement>
+  buttonDisabled?: boolean
+  buttonType?: "button" | "submit" | "reset"
+  /** Extra className appended to the inner Button. */
+  buttonClassName?: string
+
+  /** Extra className appended to the inner Input. */
+  inputClassName?: string
+
+  /** className for the wrapping group (the input fills the remaining width). */
+  className?: string
+}
+
+export const InputButton = React.forwardRef<HTMLInputElement, InputButtonProps>(
+  (
+    {
+      size = "md",
+      variant = "primary",
+      buttonLabel,
+      onButtonClick,
+      buttonDisabled,
+      buttonType = "button",
+      buttonClassName,
+      inputClassName,
+      className,
+      disabled,
+      ...inputProps
+    },
+    ref
+  ) => (
+    <div data-slot="input-button" className={cn("ax:isolate ax:flex ax:w-full ax:items-stretch", className)}>
+      <Input
+        ref={ref}
+        size={size}
+        disabled={disabled}
+        className={cn(
+          // Join: square the right corners, overlap the button by 1px, and lift
+          // on focus so the focus ring sits above the adjoining button.
+          "ax:relative ax:min-w-0 ax:flex-1 ax:-mr-px ax:rounded-r-none ax:focus-visible:z-10",
+          inputClassName
+        )}
+        {...inputProps}
+      />
+      <Button
+        type={buttonType}
+        size={size}
+        variant={variant}
+        onClick={onButtonClick}
+        disabled={buttonDisabled || disabled}
+        className={cn(
+          // Use --input-radius (not --radius) on the right corner so the
+          // composite stays squared in pill brands, matches SelectButton.
+          "ax:shrink-0 ax:rounded-l-none ax:rounded-r-[var(--input-radius)] ax:focus-visible:z-10",
+          buttonClassName
+        )}
+      >
+        {buttonLabel}
+      </Button>
+    </div>
+  )
+)
+InputButton.displayName = "InputButton"

package/src/components/input-group.stories.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { InputGroup } from "./input-group"
+import { SelectItem } from "./select"
+
+const meta: Meta<typeof InputGroup> = {
+  title: "Components/InputGroup",
+  component: InputGroup,
+  tags: ["autodocs"],
+  args: {
+    selectDefaultValue: "mr",
+    selectPlaceholder: "Title",
+    placeholder: "Full name",
+    children: (
+      <>
+        <SelectItem value="mr">Mr.</SelectItem>
+        <SelectItem value="ms">Ms.</SelectItem>
+        <SelectItem value="dr">Dr.</SelectItem>
+        <SelectItem value="prof">Prof.</SelectItem>
+      </>
+    ),
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof InputGroup>
+
+export const Default: Story = {}
+
+export const Sizes: Story = {
+  render: (args) => (
+    <div className="ax:flex ax:flex-col ax:gap-md ax:max-w-sm">
+      <InputGroup {...args} size="sm" />
+      <InputGroup {...args} size="md" />
+      <InputGroup {...args} size="lg" />
+    </div>
+  ),
+}