@adres/mgda-ui 0.0.0-stage → 0.0.2

package/src/components/footer.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Footer } from "./footer"
+
+const meta: Meta<typeof Footer> = {
+  title: "Components/Footer",
+  component: Footer,
+  tags: ["autodocs"],
+  args: {
+    brand: <span className="ax:t-h5">Adres</span>,
+    tagline: "Multi-brand design system.",
+    columns: [
+      { heading: "Product", links: [{ label: "Features", href: "#" }, { label: "Pricing", href: "#" }] },
+      { heading: "Company", links: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
+    ],
+    legal: "© 2026 Adres. All rights reserved.",
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Footer>
+
+export const Default: Story = {}

package/src/components/footer.tsx

@@ -0,0 +1,78 @@
+import * as React from "react"
+import { cn } from "../lib/cn"
+
+export interface FooterLink {
+  label: string
+  href: string
+}
+
+export interface FooterColumn {
+  heading: string
+  links: FooterLink[]
+}
+
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
+  brand?: React.ReactNode
+  tagline?: React.ReactNode
+  columns?: FooterColumn[]
+  legal?: React.ReactNode
+  social?: React.ReactNode
+}
+
+export function Footer({ className, brand, tagline, columns, legal, social, ...props }: FooterProps) {
+  return (
+    <footer
+      className={cn(
+        "ax:w-full ax:border-t ax:border-border ax:bg-card ax:text-card-foreground",
+        "ax:px-xl ax:md:px-3xl ax:py-4xl ax:md:py-5xl",
+        className
+      )}
+      {...props}
+    >
+      <div className="ax:mx-auto ax:max-w-420">
+        <div
+          className={cn(
+            "ax:grid ax:gap-3xl",
+            columns && columns.length > 0
+              ? "ax:grid-cols-1 ax:md:grid-cols-[1fr_repeat(var(--col-count),auto)]"
+              : "ax:grid-cols-1"
+          )}
+          style={columns ? { "--col-count": String(Math.min(columns.length, 4)) } as React.CSSProperties : undefined}
+        >
+          {(brand || tagline) && (
+            <div className="ax:flex ax:flex-col ax:gap-sm ax:max-w-xs">
+              {brand}
+              {tagline && <p className="ax:t-body-sm ax:text-muted-foreground">{tagline}</p>}
+              {social && <div className="ax:flex ax:gap-sm ax:mt-xs">{social}</div>}
+            </div>
+          )}
+          {columns?.map((col) => (
+            <div key={col.heading} className="ax:flex ax:flex-col ax:gap-sm">
+              <div className="ax:t-overline ax:text-foreground">
+                {col.heading}
+              </div>
+              <ul className="ax:space-y-2.5">
+                {col.links.map((link) => (
+                  <li key={link.label}>
+                    <a
+                      href={link.href}
+                      className="ax:t-body-sm ax:text-muted-foreground ax:hover:text-foreground ax:transition-colors"
+                    >
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        {legal && (
+          <div className="ax:mt-3xl ax:pt-xl ax:border-t ax:border-border ax:t-caption ax:text-muted-foreground">
+            {legal}
+          </div>
+        )}
+      </div>
+    </footer>
+  )
+}

package/src/components/heading.stories.tsx

@@ -0,0 +1,45 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Heading, type HeadingSize } from "./heading"
+
+const meta: Meta<typeof Heading> = {
+  title: "Components/Heading",
+  component: Heading,
+  tags: ["autodocs"],
+  argTypes: {
+    as: { control: "select", options: ["h1", "h2", "h3", "h4", "h5", "h6"] },
+    color: { control: "select", options: ["default", "strong", "muted", "primary"] },
+  },
+  args: {
+    as: "h2",
+    children: "Manage every unit in one place",
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Heading>
+
+export const Default: Story = {}
+
+/** The level stays `h1` for the outline while the look drops to `h3`. */
+export const LevelDiffersFromSize: Story = {
+  args: { as: "h1", size: "h3", children: "Welcome back" },
+}
+
+const SIZES: HeadingSize[] = [
+  "display-2xl", "display-xl", "display-lg", "display-md", "display-sm",
+  "h1", "h2", "h3", "h4", "h5", "h6",
+]
+
+export const Scale: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+      {SIZES.map((size) => (
+        <div key={size} style={{ display: "flex", alignItems: "baseline", gap: "1rem" }}>
+          <code style={{ minWidth: "8rem" }}>size=&quot;{size}&quot;</code>
+          <Heading as="h2" size={size}>The quick brown fox</Heading>
+        </div>
+      ))}
+    </div>
+  ),
+}

package/src/components/heading.test.tsx

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest"
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { Heading } from "./heading"
+
+describe("Heading", () => {
+  it("defaults to an h2 styled as h2", () => {
+    const html = renderToStaticMarkup(<Heading>Title</Heading>)
+    expect(html).toMatch(/^<h2 class="[^"]*ax:t-h2/)
+  })
+
+  it("takes its size from the level when size is omitted", () => {
+    expect(renderToStaticMarkup(<Heading as="h4">Title</Heading>)).toContain("ax:t-h4")
+  })
+
+  it("keeps the level when size differs", () => {
+    const html = renderToStaticMarkup(<Heading as="h1" size="h3">Title</Heading>)
+    expect(html).toMatch(/^<h1 /)
+    expect(html).toContain("ax:t-h3")
+    expect(html).not.toContain("ax:t-h1")
+  })
+})

package/src/components/heading.tsx

@@ -0,0 +1,77 @@
+import * as React from "react"
+import { tv, type VariantProps } from "tailwind-variants"
+import { cn } from "../lib/cn"
+
+export type HeadingAs    = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+export type HeadingSize  =
+  | "display-2xl" | "display-xl" | "display-lg" | "display-md" | "display-sm"
+  | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+export type HeadingColor = "default" | "strong" | "muted" | "primary"
+export type HeadingAlign = "left" | "center" | "right"
+export type HeadingWrap  = "wrap" | "balance" | "pretty"
+
+/** Sizes are the t-* heading and display utilities from typography.css, so brand overrides apply. */
+export const headingVariants = tv({
+  variants: {
+    size: {
+      "display-2xl": "ax:t-display-2xl",
+      "display-xl":  "ax:t-display-xl",
+      "display-lg":  "ax:t-display-lg",
+      "display-md":  "ax:t-display-md",
+      "display-sm":  "ax:t-display-sm",
+      h1: "ax:t-h1",
+      h2: "ax:t-h2",
+      h3: "ax:t-h3",
+      h4: "ax:t-h4",
+      h5: "ax:t-h5",
+      h6: "ax:t-h6",
+    },
+    color: {
+      default: "ax:text-foreground",
+      strong:  "ax:text-foreground-strong",
+      muted:   "ax:text-muted-foreground",
+      primary: "ax:text-primary-foreground",
+    },
+    align: {
+      left:   "ax:text-left",
+      center: "ax:text-center",
+      right:  "ax:text-right",
+    },
+    wrap: {
+      wrap:    "ax:text-wrap",
+      balance: "ax:text-balance",
+      pretty:  "ax:text-pretty",
+    },
+  },
+  defaultVariants: {
+    color: "default",
+  },
+}, { twMerge: false })
+
+export interface HeadingProps
+  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
+    VariantProps<typeof headingVariants> {
+  /** The heading level, chosen for document outline. Defaults to `h2`. */
+  as?: HeadingAs
+  truncate?: boolean
+}
+
+/**
+ * Semantic heading. `as` sets the level for the document outline; `size` sets
+ * the look and defaults to the matching level, so the two can differ when a
+ * page needs, say, an `h1` that reads at `h3` size.
+ */
+export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
+  ({ as: Tag = "h2", size, color, align, wrap, truncate, className, ...props }, ref) => (
+    <Tag
+      ref={ref}
+      className={cn(
+        headingVariants({ size: size ?? Tag, color, align, wrap }),
+        truncate && "ax:truncate",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+Heading.displayName = "Heading"

package/src/components/hero.stories.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button } from "./button"
+import { Hero } from "./hero"
+
+const meta: Meta<typeof Hero> = {
+  title: "Components/Hero",
+  component: Hero,
+  tags: ["autodocs"],
+  args: {
+    eyebrow: "Design system",
+    headline: "Build beautiful products across every brand",
+    description: "Shared components, unique themes, one codebase.",
+    actions: (
+      <>
+        <Button>Get started</Button>
+        <Button variant="outline">View docs</Button>
+      </>
+    ),
+    layout: "centered",
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Hero>
+
+export const Default: Story = {}
+
+export const Split: Story = {
+  args: {
+    layout: "split",
+    media: (
+      <div className="ax:flex ax:h-full ax:min-h-[240px] ax:items-center ax:justify-center ax:bg-muted ax:text-muted-foreground">
+        Media slot
+      </div>
+    ),
+  },
+}