@adres/mgda-ui 0.0.0-stage → 0.0.1

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

@@ -0,0 +1,31 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { ButtonGroup, ButtonGroupItem } from "./button-group"
+
+const meta: Meta<typeof ButtonGroup> = {
+  title: "Components/ButtonGroup",
+  component: ButtonGroup,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof ButtonGroup>
+
+export const Default: Story = {
+  render: () => (
+    <ButtonGroup>
+      <ButtonGroupItem active>List</ButtonGroupItem>
+      <ButtonGroupItem>Grid</ButtonGroupItem>
+      <ButtonGroupItem>Board</ButtonGroupItem>
+    </ButtonGroup>
+  ),
+}
+
+export const Primary: Story = {
+  render: () => (
+    <ButtonGroup variant="primary">
+      <ButtonGroupItem>Save</ButtonGroupItem>
+      <ButtonGroupItem compact>▾</ButtonGroupItem>
+    </ButtonGroup>
+  ),
+}

package/src/components/button-group.tsx

@@ -0,0 +1,156 @@
+"use client"
+
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { cn } from "../lib/cn"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type ButtonGroupSize = "sm" | "md" | "lg"
+export type ButtonGroupVariant = "outline" | "primary"
+export type ButtonGroupSelected = "primary" | "muted"
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+interface ButtonGroupContextValue {
+  size: ButtonGroupSize
+  variant: ButtonGroupVariant
+  selected: ButtonGroupSelected
+}
+
+const ButtonGroupContext = React.createContext<ButtonGroupContextValue>({
+  size: "md",
+  variant: "outline",
+  selected: "primary",
+})
+
+// ─── Root ─────────────────────────────────────────────────────────────────────
+
+const rootVariants = cva(
+  "ax:inline-flex ax:items-stretch ax:overflow-hidden ax:rounded-[var(--radius)]",
+  {
+    variants: {
+      variant: {
+        outline: "ax:border ax:border-border",
+        primary: "",
+      },
+    },
+    defaultVariants: { variant: "outline" },
+  }
+)
+
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Item height + type metrics - mirrors Button at the same size. */
+  size?: ButtonGroupSize
+  /** Visual mode. `outline` = bordered container with transparent items;
+   *  `primary` = solid primary surface across all items (split-button look). */
+  variant?: ButtonGroupVariant
+  /** How an `active` item stands out (only relevant when variant="outline").
+   *  `primary` - strong, brand-coloured active cell (view toggle).
+   *  `muted`   - quiet, neutral-grey active cell (filter group). */
+  selected?: ButtonGroupSelected
+}
+
+/**
+ * ButtonGroup - a row of connected buttons sharing one container.
+ *
+ * Use for: view toggles, filter groups, toolbars, split-action buttons.
+ * NOT for: navigating between content panels (use Tabs) or single-selection
+ * view-mode switches with a sliding indicator (use SegmentedControl).
+ */
+export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+  ({ className, size = "md", variant = "outline", selected = "primary", children, ...props }, ref) => (
+    <ButtonGroupContext.Provider value={{ size, variant, selected }}>
+      <div
+        ref={ref}
+        role="group"
+        className={cn(rootVariants({ variant }), className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </ButtonGroupContext.Provider>
+  )
+)
+ButtonGroup.displayName = "ButtonGroup"
+
+// ─── Item ─────────────────────────────────────────────────────────────────────
+
+// Height + type metrics mirror Button so a ButtonGroup reads as a strip of
+// connected Buttons. Padding is applied separately per size + compact flag
+// to avoid Tailwind class collisions.
+const itemBase = cva(
+  [
+    "ax:inline-flex ax:items-center ax:justify-center ax:gap-xs ax:whitespace-nowrap ax:select-none ax:cursor-pointer",
+    "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-inset",
+    "ax:disabled:pointer-events-none ax:disabled:opacity-50",
+    "ax:[&_svg]:pointer-events-none ax:[&_svg]:shrink-0",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "ax:h-2xl ax:t-label-xs ax:[&_svg]:size-3",
+        md: "ax:h-3xl ax:t-label-sm ax:[&_svg]:size-3.5",
+        lg: "ax:h-4xl ax:text-base   ax:[&_svg]:size-4",
+      },
+    },
+  }
+)
+
+const PADDING: Record<ButtonGroupSize, { normal: string; compact: string }> = {
+  sm: { normal: "ax:px-sm", compact: "ax:px-2" },
+  md: { normal: "ax:px-md", compact: "ax:px-2.5" },
+  lg: { normal: "ax:px-xl", compact: "ax:px-3" },
+}
+
+// Cells use emphasis aliases, so the selected/primary fills auto-invert to deep
+// tints in dark (no dark: override). One exception: the idle cell's hover:
+// `neutral-weakest` inverts to ~the dark background, giving no visible lift, so a
+// `dark:hover:bg-neutral-weaker` provides the lift. `outlineSelectedMuted` uses
+// mode-aware `bg-selected`/`text-foreground`.
+const STATE = {
+  outlineIdle: "ax:bg-muted ax:text-foreground ax:border-r ax:border-border ax:last:border-r-0 ax:hover:bg-muted/50",
+  outlineSelectedPrimary: "ax:bg-primary-weaker ax:text-primary-foreground  ax:dark:bg-primary-strong ax:dark:text-primary-weaker ax:font-medium ax:border-r ax:border-border ax:last:border-r-0 ax:hover:bg-primary-weak/80 ax:dark:hover:bg-primary-strong/80",
+  outlineSelectedMuted: "ax:bg-selected ax:text-foreground ax:font-medium ax:border-r ax:border-border ax:last:border-r-0",
+  primary: "ax:bg-primary-weaker ax:text-primary-foreground ax:dark:bg-primary-strong ax:dark:text-primary-weaker ax:font-medium ax:hover:bg-primary-weak/80 ax:border-r ax:border-background ax:dark:hover:bg-primary-strong/80 ax:last:border-r-0",
+} as const
+
+export interface ButtonGroupItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Marks this item as the currently-selected cell (sets aria-pressed). */
+  active?: boolean
+  /** Reduces horizontal padding - use for chevron/icon-only trailing buttons
+   *  (the dropdown side of a split button). */
+  compact?: boolean
+}
+
+export const ButtonGroupItem = React.forwardRef<HTMLButtonElement, ButtonGroupItemProps>(
+  ({ className, active, compact, type = "button", children, ...props }, ref) => {
+    const { size, variant, selected } = React.useContext(ButtonGroupContext)
+    const stateClass =
+      variant === "primary"
+        ? STATE.primary
+        : active
+          ? selected === "muted"
+            ? STATE.outlineSelectedMuted
+            : STATE.outlineSelectedPrimary
+          : STATE.outlineIdle
+    return (
+      <button
+        ref={ref}
+        type={type}
+        aria-pressed={active ?? undefined}
+        className={cn(
+          itemBase({ size }),
+          PADDING[size][compact ? "compact" : "normal"],
+          stateClass,
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    )
+  }
+)
+ButtonGroupItem.displayName = "ButtonGroupItem"

package/src/components/button.stories.tsx

@@ -0,0 +1,66 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Settings } from "lucide-react"
+import { Button } from "./button"
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["primary", "secondary", "outline", "ghost", "destructive", "accent"],
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg", "icon-sm", "icon", "icon-lg"],
+    },
+    elevated: { control: "boolean" },
+    aurora: { control: "boolean" },
+    disabled: { control: "boolean" },
+  },
+  args: {
+    children: "Button",
+    variant: "primary",
+    size: "md",
+    elevated: false,
+    aurora: false,
+    disabled: false,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
+
+export const Primary: Story = {}
+
+export const Secondary: Story = {
+  args: { variant: "secondary" },
+}
+
+export const Outline: Story = {
+  args: { variant: "outline" },
+}
+
+export const Destructive: Story = {
+  args: { variant: "destructive" },
+}
+
+export const Elevated: Story = {
+  args: { elevated: true },
+}
+
+export const Large: Story = {
+  args: { size: "lg", children: "Get started" },
+}
+
+export const IconSizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+      <Button variant="outline" size="icon-sm" aria-label="Settings"><Settings /></Button>
+      <Button variant="outline" size="icon" aria-label="Settings"><Settings /></Button>
+      <Button variant="outline" size="icon-lg" aria-label="Settings"><Settings /></Button>
+    </div>
+  ),
+}

package/src/components/button.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest"
+import { buttonVariants } from "./button"
+
+describe("buttonVariants", () => {
+  it("includes the ax prefix on the base classes", () => {
+    expect(buttonVariants()).toContain("ax:inline-flex")
+  })
+
+  it("matches each icon size to its text-button height", () => {
+    expect(buttonVariants({ size: "sm" })).toContain("ax:h-2xl")
+    expect(buttonVariants({ size: "icon-sm" })).toContain("ax:size-2xl")
+    expect(buttonVariants({ size: "md" })).toContain("ax:h-3xl")
+    expect(buttonVariants({ size: "icon" })).toContain("ax:size-3xl")
+    expect(buttonVariants({ size: "lg" })).toContain("ax:h-4xl")
+    expect(buttonVariants({ size: "icon-lg" })).toContain("ax:size-4xl")
+  })
+})

package/src/components/button.tsx

@@ -0,0 +1,139 @@
+"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"
+
+/**
+ * Button - the most leveraged primitive in the system.
+ *
+ * Variants reflect role, not colour: every brand can re-skin them by changing
+ * `--primary`, `--secondary`, `--accent`, etc.; the component never knows
+ * which brand it's wearing.
+ *
+ * Sizes follow the type+touch ladder:
+ *   sm - dense UI rows (32px tall)
+ *   md - DEFAULT, comfortable body buttons (40px)
+ *   lg - primary marketing CTAs (48px)
+ *   icon-sm / icon / icon-lg - square 32 / 40 / 48px icon-only actions, matching
+ *     sm / md / lg heights (a11y label still required)
+ */
+export const buttonVariants = tv({
+  base: [
+    "ax:inline-flex ax:items-center ax:justify-center ax:gap-xs ax:whitespace-nowrap ax:select-none ax:cursor-pointer",
+    // Font size is set per-size below (not via `t-label-sm`) so an app that
+    // re-scales the `t-label-*` utilities can't shrink the button text.
+    "ax:font-medium ax:leading-none",
+    "ax:transition-[transform,background-color,border-color,color,box-shadow] 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:pointer-events-none ax:disabled:opacity-50",
+    "ax:active:scale-[0.98]",
+    "ax:[&_svg]:pointer-events-none ax:[&_svg]:size-4 ax:[&_svg]:shrink-0",
+  ],
+  variants: {
+    variant: {
+      primary: [
+        // `weak` fill + `weaker` hover: emphasis aliases auto-invert to deep
+        // tints in dark, so `-foreground` stays legible in both modes (no dark:).
+        "ax:bg-primary-weaker ax:text-primary-foreground ax:dark:bg-primary-weakest ax:dark:text-primary-strong",
+        "ax:hover:bg-primary-weak/80 ax:dark:hover:bg-primary-weak/80",
+      ],
+      secondary: [
+        "ax:bg-secondary-weaker ax:text-secondary-foreground ax:dark:bg-secondary-strong ax:dark:text-secondary-muted",
+        "ax:hover:bg-secondary-weaker/80 ax:dark:hover:bg-secondary-strong/80",
+        "ax:shadow-xs",
+      ],
+      outline: [
+        "ax:bg-transparent ax:text-foreground ax:border ax:border-border",
+        "ax:hover:bg-muted",
+      ],
+      ghost: [
+        "ax:bg-transparent ax:text-foreground",
+        "ax:hover:bg-muted",
+      ],
+      destructive: [
+        "ax:bg-destructive-weaker ax:text-destructive-foreground",
+        "ax:hover:bg-destructive-weaker/80",
+      ],
+      accent: [
+        "ax:bg-accent-weak ax:text-accent-foreground",
+        "ax:hover:bg-accent-weak/80",
+        "ax:shadow-sm",
+      ],
+    },
+    size: {
+      sm:   "ax:h-2xl ax:px-sm ax:rounded-(--button-radius) ax:text-sm",
+      md:   "ax:h-3xl ax:px-md ax:rounded-(--button-radius) ax:text-sm",
+      lg:   "ax:h-4xl ax:px-xl ax:rounded-(--button-radius) ax:text-base",
+      // Square icon-only buttons, one per height above: 32 / 40 / 48px.
+      "icon-sm": "ax:size-2xl ax:rounded-(--button-radius)",
+      icon:      "ax:size-3xl ax:rounded-(--button-radius)",
+      "icon-lg": "ax:size-4xl ax:rounded-(--button-radius) ax:[&_svg]:size-5",
+    },
+    // Opt-in tinted drop shadow. Only variants with a defined tinted shadow
+    // (primary, destructive) react, wired in compoundVariants below.
+    elevated: {
+      true:  "",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    // Tinted button shadow is a light-mode flourish, cleared in dark, where the
+    // low-contrast page makes a coloured lift read as muddy.
+    { variant: "primary",     elevated: true, class: "ax:shadow-primary-btn ax:dark:shadow-none" },
+    { variant: "destructive", elevated: true, class: "ax:shadow-destructive-btn ax:dark:shadow-none" },
+  ],
+  defaultVariants: {
+    variant:  "primary",
+    size:     "md",
+    elevated: false,
+  },
+}, { twMerge: false })
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  /** When true, renders the child element instead of a button (e.g. for `<Link>`). */
+  asChild?: boolean
+  /** Decorative "aurora" - two soft, blurred orbs (primary + accent) drifting
+   *  behind the label for a modern, glowing look. Designed for the `primary`
+   *  variant. Ignored with `asChild` (it needs to inject its own children). */
+  aurora?: boolean
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, elevated, aurora = false, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    // Aurora injects decorative children, so it can't pass through Slot.
+    const showAurora = aurora && !asChild
+    return (
+      <Comp
+        ref={ref}
+        data-slot="button"
+        className={cn(
+          buttonVariants({ variant, size, elevated }),
+          // `isolate` scopes the orbs' negative z-index to the button; `overflow-hidden`
+          // clips them to the (rounded) button shape.
+          showAurora && "ax:relative ax:isolate ax:overflow-hidden",
+          className,
+        )}
+        {...props}
+      >
+        {showAurora ? (
+          <>
+            {/* Blurred orbs sit behind the label (-z-10): a primary glow top-start,
+                an accent glow bottom-end. */}
+            <span aria-hidden="true" className="ax:pointer-events-none ax:absolute ax:-top-12 ax:-left-2 ax:-z-10 ax:size-14 ax:rounded-full ax:bg-primary/40 ax:dark:bg-primary-weaker ax:blur-xl ax:saturate-250" />
+            <span aria-hidden="true" className="ax:pointer-events-none ax:absolute ax:-top-4 ax:-z-10 ax:size-16 ax:rounded-full ax:bg-primary-weaker ax:dark:bg-primary/20 ax:blur-xl ax:saturate-250" />
+            <span aria-hidden="true" className="ax:pointer-events-none ax:absolute ax:-bottom-12 ax:-right-6 ax:-z-10 ax:size-16 ax:rounded-full ax:bg-primary-weaker ax:blur-xl ax:saturate-250" />
+            {children}
+          </>
+        ) : (
+          children
+        )}
+      </Comp>
+    )
+  }
+)
+Button.displayName = "Button"

package/src/components/calendar.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Calendar } from "./calendar"
+
+const meta: Meta<typeof Calendar> = {
+  title: "Components/Calendar",
+  component: Calendar,
+  tags: ["autodocs"],
+  args: {
+    mode: "single",
+    defaultValue: new Date(2026, 7, 11),
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Calendar>
+
+export const Default: Story = {}
+
+export const Range: Story = {
+  args: {
+    mode: "range",
+    defaultValue: { from: new Date(2026, 7, 10), to: new Date(2026, 7, 15) },
+  },
+}