@adres/mgda-ui 0.0.0-stage → 0.0.1

package/src/components/input-group.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { ChevronDown } from "lucide-react"
+import { tv } from "tailwind-variants"
+import { SelectContent } from "./select"
+import { Input, type InputProps } from "./input"
+import { cn } from "../lib/cn"
+
+/**
+ * InputGroup - a Select + Input compactly joined into a single inline group.
+ *
+ * The third member of the joined-pill composite family alongside InputButton
+ * (Input+Button) and SelectButton (Select+Button): the Select trigger occupies
+ * the left half, the Input occupies the right half, both at the same height
+ * ladder so they line up with the other composites at a matching size.
+ *
+ *   <InputGroup
+ *     size="md"
+ *     selectPlaceholder="Title"
+ *     selectValue={title}
+ *     onSelectValueChange={setTitle}
+ *     placeholder="Full name"
+ *     value={name}
+ *     onChange={(e) => setName(e.target.value)}
+ *   >
+ *     <SelectItem value="mr">Mr.</SelectItem>
+ *     <SelectItem value="ms">Ms.</SelectItem>
+ *   </InputGroup>
+ *
+ * Select-half props are prefixed (selectValue, selectPlaceholder, ...) so they
+ * don't collide with the native input attributes (value, placeholder, ...)
+ * inherited from InputProps. `disabled` disables BOTH halves; use
+ * `selectDisabled` to disable only the select.
+ */
+
+export type InputGroupSize = "sm" | "md" | "lg"
+
+// Two-slot composite: the select trigger's height/padding/type ramp scales
+// with `size` (mirrors the standalone Select / SelectButton trigger); the
+// input slot only carries the static join classes since Input derives its
+// own size-driven height/padding/type from its own `size` prop.
+const inputGroupVariants = tv(
+  {
+    slots: {
+      trigger: [
+        "ax:inline-flex ax:shrink-0 ax:items-center ax:justify-between ax:gap-xs ax:whitespace-nowrap ax:cursor-pointer ax:select-none",
+        "ax:bg-transparent ax:text-foreground",
+        "ax:border ax:border-input ax:rounded-l-(--input-radius) ax:rounded-r-none ax:-mr-px",
+        "ax:transition-[border-color,box-shadow] ax:transition-snappy",
+        // ring-inset (not ring-offset) keeps the focus ring inside the trigger's
+        // own box: an outward halo would bleed across the seam onto the Input.
+        "ax:focus:outline-none ax:focus:z-10 ax:focus:ring-2 ax:focus:ring-inset ax:focus:ring-ring ax:focus:border-transparent",
+        "ax:disabled:cursor-not-allowed ax:disabled:opacity-50",
+        "ax:data-placeholder:text-muted-foreground",
+        // leading-snug on the value span: t-label-sm is leading-none, and line-clamp-1
+        // sets overflow-hidden: a 1.0 line-height would shave descenders (g, y, p).
+        "ax:[&>span]:line-clamp-1 ax:[&>span]:leading-snug",
+      ],
+      // Join: square the left corner, overlap the trigger by 1px, and lift on
+      // focus so the focus ring sits above the adjoining trigger. ring-inset +
+      // ring-offset-0 override Input's own standalone ring-offset styling so
+      // its focus ring doesn't bleed left onto the trigger either.
+      input: "ax:relative ax:min-w-0 ax:flex-1 ax:-ml-px ax:rounded-l-none ax:focus-visible:z-10 ax:focus-visible:ring-inset ax:focus-visible:ring-offset-0",
+    },
+    variants: {
+      size: {
+        sm: { trigger: "ax:h-2xl ax:px-sm ax:t-label-sm" },
+        md: { trigger: "ax:h-3xl ax:px-md ax:t-label-sm" },
+        lg: { trigger: "ax:h-4xl ax:px-xl ax:text-base" },
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+  { twMerge: false }
+)
+
+export interface InputGroupProps extends Omit<InputProps, "size"> {
+  /** Shared height/typography ladder - matches Button, Input, Select, InputButton, SelectButton. */
+  size?: InputGroupSize
+
+  // ─── Select half ──────────────────────────────────────────────────────────────
+  selectValue?: string
+  selectDefaultValue?: string
+  onSelectValueChange?: (value: string) => void
+  selectPlaceholder?: string
+  selectName?: string
+  /** Disables only the select half. `disabled` (inherited from InputProps) disables both. */
+  selectDisabled?: boolean
+  /** Extra className appended to the select trigger. */
+  selectClassName?: string
+  /** SelectItem (and SelectLabel/SelectSeparator) children for the popover. */
+  children: React.ReactNode
+
+  // ─── Input half ───────────────────────────────────────────────────────────────
+  /** Extra className appended to the inner Input. */
+  inputClassName?: string
+
+  /** className for the wrapping group (the input fills the remaining width). */
+  className?: string
+}
+
+export const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
+  (
+    {
+      size = "md",
+      selectValue,
+      selectDefaultValue,
+      onSelectValueChange,
+      selectPlaceholder,
+      selectName,
+      selectDisabled,
+      selectClassName,
+      children,
+      inputClassName,
+      className,
+      disabled,
+      ...inputProps
+    },
+    ref
+  ) => {
+    const { trigger, input } = inputGroupVariants({ size })
+    return (
+      <div
+        data-slot="input-group"
+        className={cn("ax:isolate ax:flex ax:w-full ax:items-stretch", disabled && "ax:opacity-50 ax:pointer-events-none", className)}
+      >
+        <SelectPrimitive.Root
+          value={selectValue}
+          defaultValue={selectDefaultValue}
+          onValueChange={onSelectValueChange}
+          disabled={disabled || selectDisabled}
+          name={selectName}
+        >
+          <SelectPrimitive.Trigger className={cn(trigger(), selectClassName)}>
+            <SelectPrimitive.Value placeholder={selectPlaceholder} />
+            <SelectPrimitive.Icon asChild>
+              <ChevronDown className="ax:size-4 ax:shrink-0 ax:text-muted-foreground" />
+            </SelectPrimitive.Icon>
+          </SelectPrimitive.Trigger>
+          <SelectContent>{children}</SelectContent>
+        </SelectPrimitive.Root>
+        <Input
+          ref={ref}
+          size={size}
+          disabled={disabled}
+          className={cn(input(), inputClassName)}
+          {...inputProps}
+        />
+      </div>
+    )
+  }
+)
+InputGroup.displayName = "InputGroup"

package/src/components/input.stories.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Field, Input, Label, Textarea } from "./input"
+
+const meta: Meta<typeof Input> = {
+  title: "Components/Input",
+  component: Input,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Input>
+
+export const Default: Story = {
+  render: () => (
+    <Field className="ax:max-w-sm">
+      <Label htmlFor="email">Email</Label>
+      <Input id="email" type="email" placeholder="you@example.com" />
+    </Field>
+  ),
+}
+
+export const TextareaStory: Story = {
+  name: "Textarea",
+  render: () => (
+    <Field className="ax:max-w-sm">
+      <Label htmlFor="bio">Bio</Label>
+      <Textarea id="bio" placeholder="Tell us about yourself" />
+    </Field>
+  ),
+}

package/src/components/input.tsx

@@ -0,0 +1,284 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/cn"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type InputSize = "sm" | "md" | "lg"
+
+// ─── TextField context ────────────────────────────────────────────────────────
+
+interface TextFieldContextValue {
+  inRoot: boolean
+  size:   InputSize
+}
+
+const TextFieldContext = React.createContext<TextFieldContextValue>({
+  inRoot: false,
+  size:   "md",
+})
+
+// ─── Size maps ────────────────────────────────────────────────────────────────
+
+const HEIGHT: Record<InputSize, string> = {
+  sm: "ax:h-2xl",  // 32px
+  md: "ax:h-3xl",  // 40px
+  lg: "ax:h-4xl",  // 48px
+}
+
+// Mirrors Button's px-scale so an Input and a Button at the same size share
+// identical horizontal interior padding.
+const PADDING_X: Record<InputSize, string> = {
+  sm: "ax:px-sm",
+  md: "ax:px-sm",
+  lg: "ax:px-md",
+}
+
+// Mirrors Button's type ramp (label-md for sm/md, text-base for lg).
+const TEXT_SIZE: Record<InputSize, string> = {
+  sm: "ax:t-label-sm",
+  md: "ax:t-label-sm",
+  lg: "ax:text-base",
+}
+
+// ─── Input ────────────────────────────────────────────────────────────────────
+
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+  invalid?: boolean
+  size?:    InputSize
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type = "text", invalid, size: sizeProp, ...props }, ref) => {
+    const { inRoot, size: ctxSize } = React.useContext(TextFieldContext)
+    const size = sizeProp ?? ctxSize
+
+    return (
+      <input
+        ref={ref}
+        type={type}
+        aria-invalid={invalid || props["aria-invalid"]}
+        data-slot="input"
+        className={cn(
+          "ax:bg-card ax:text-foreground ax:placeholder:text-muted-foreground/50",
+          "ax:transition-[border-color,box-shadow] ax:transition-snappy",
+          "ax:file:border-0 ax:file:bg-transparent ax:file:text-sm ax:file:font-medium",
+          TEXT_SIZE[size],
+          inRoot
+            ? [
+                // Inside TextFieldRoot: root owns the border, ring, height, and px
+                "ax:flex-1 ax:min-w-0 ax:h-full ax:rounded-none ax:border-0 ax:px-0 ax:py-0",
+                "ax:focus-visible:outline-none ax:focus-visible:ring-0 ax:focus-visible:ring-offset-0",
+                "ax:disabled:cursor-not-allowed ax:disabled:opacity-50 ax:disabled:bg-transparent",
+              ]
+            : [
+                // Standalone
+                "ax:w-full ax:rounded-(--input-radius) ax:border ax:border-input",
+                HEIGHT[size],
+                PADDING_X[size],
+                "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-background ax:focus-visible:border-transparent",
+                "ax:disabled:cursor-not-allowed ax:disabled:opacity-50 ax:disabled:bg-muted",
+                "ax:aria-[invalid=true]:border-destructive ax:aria-[invalid=true]:ring-2 ax:aria-[invalid=true]:ring-destructive/30",
+              ],
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+// ─── TextFieldRoot ─────────────────────────────────────────────────────────────
+
+export interface TextFieldRootProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?:    InputSize
+  invalid?: boolean
+}
+
+export const TextFieldRoot = React.forwardRef<HTMLDivElement, TextFieldRootProps>(
+  ({ className, size: sizeProp, invalid, ...props }, ref) => {
+    const { size: ctxSize } = React.useContext(TextFieldContext)
+    const size = sizeProp ?? ctxSize
+
+    return (
+      <TextFieldContext.Provider value={{ inRoot: true, size }}>
+        <div
+          ref={ref}
+          className={cn(
+            "ax:flex ax:items-center ax:gap-xs ax:w-full ax:rounded-(--input-radius) ax:border ax:border-input ax:bg-card ax:overflow-hidden",
+            "ax:transition-[border-color,box-shadow] ax:transition-snappy",
+            "ax:focus-within:ring-2 ax:focus-within:ring-ring ax:focus-within:ring-offset-1 ax:focus-within:ring-offset-background ax:focus-within:border-transparent",
+            // CSS detects disabled/invalid state on nested input
+            "ax:has-[input:disabled]:opacity-50 ax:has-[input:disabled]:cursor-not-allowed ax:has-[input:disabled]:bg-muted",
+            "ax:has-[input[aria-invalid=true]]:border-destructive ax:has-[input[aria-invalid=true]]:focus-within:ring-destructive/30",
+            HEIGHT[size],
+            PADDING_X[size],
+            invalid && "ax:border-destructive ax:ring-2 ax:ring-destructive/30",
+            className
+          )}
+          {...props}
+        />
+      </TextFieldContext.Provider>
+    )
+  }
+)
+TextFieldRoot.displayName = "TextFieldRoot"
+
+// ─── TextFieldSlot ─────────────────────────────────────────────────────────────
+
+export interface TextFieldSlotProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const TextFieldSlot = React.forwardRef<HTMLDivElement, TextFieldSlotProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "ax:flex ax:items-center ax:shrink-0 ax:text-muted-foreground",
+        // Slots with interactive children (buttons, links) need pointer events
+        "ax:pointer-events-none ax:[&:has(button)]:pointer-events-auto ax:[&:has(a)]:pointer-events-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+TextFieldSlot.displayName = "TextFieldSlot"
+
+// ─── Textarea ─────────────────────────────────────────────────────────────────
+
+export type TextareaResize = "none" | "vertical" | "horizontal" | "both"
+export type TextareaSize   = "sm" | "md" | "lg"
+
+// Mirrors Button's px-scale + type ramp. py-* tuned so the single-line
+// height of a Textarea matches the equivalent-size Button:
+// sm 32px (py-1.5 = 6px × 2 + 20px line), md 40px, lg 48px.
+const TEXTAREA_SIZE: Record<TextareaSize, string> = {
+  sm: "ax:p-sm ax:t-label-sm",
+  md: "ax:p-md ax:t-label-sm",
+  lg: "ax:p-md ax:text-base",
+}
+
+const RESIZE_CLASS: Record<TextareaResize, string> = {
+  none:       "ax:resize-none",
+  vertical:   "ax:resize-y",
+  horizontal: "ax:resize-x",
+  both:       "resize",
+}
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  invalid?: boolean
+  resize?:  TextareaResize
+  size?:    TextareaSize
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, invalid, resize = "vertical", size: sizeProp, ...props }, ref) => {
+    const { size: ctxSize } = React.useContext(TextFieldContext)
+    const size = sizeProp ?? ctxSize
+
+    return (
+      <textarea
+        ref={ref}
+        aria-invalid={invalid || props["aria-invalid"]}
+        data-slot="textarea"
+        className={cn(
+          "ax:flex ax:min-h-20 ax:w-full ax:rounded-(--input-radius) ax:bg-card",
+          "ax:border ax:border-input",
+          "ax:text-foreground ax:placeholder:text-muted-foreground/50",
+          "ax:transition-[border-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-1 ax:focus-visible:ring-offset-background ax:focus-visible:border-transparent",
+          "ax:disabled:cursor-not-allowed ax:disabled:opacity-50 ax:disabled:bg-muted",
+          "ax:aria-[invalid=true]:border-destructive ax:aria-[invalid=true]:ring-2 ax:aria-[invalid=true]:ring-destructive/30",
+          TEXTAREA_SIZE[size],
+          RESIZE_CLASS[resize],
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+// ─── Label ────────────────────────────────────────────────────────────────────
+
+export type LabelSize = "xs" | "sm" | "md" | "lg"
+
+// xs/sm/md share the compact label scale; only lg steps up, matching the
+// point where Input's own type ramp moves off t-label-sm (see TEXT_SIZE above).
+const LABEL_TEXT_SIZE: Record<LabelSize, string> = {
+  xs: "ax:t-label-xs",
+  sm: "ax:t-label-xs",
+  md: "ax:t-label-xs",
+  lg: "ax:t-label-sm",
+}
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  size?: LabelSize
+}
+
+export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, size: sizeProp, ...props }, ref) => {
+    const { size: ctxSize } = React.useContext(TextFieldContext)
+    const size = sizeProp ?? ctxSize
+
+    return (
+      <label
+        ref={ref}
+        className={cn(
+          LABEL_TEXT_SIZE[size],
+          "ax:text-foreground",
+          "ax:peer-disabled:cursor-not-allowed ax:peer-disabled:opacity-70",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+Label.displayName = "Label"
+
+// ─── Field ────────────────────────────────────────────────────────────────────
+
+export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
+  help?:  React.ReactNode
+  error?: React.ReactNode
+  /** Sizes the Label and any Input/Textarea/TextFieldRoot inside, unless one overrides it directly. */
+  size?:  InputSize
+}
+
+export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  ({ className, help, error, size = "md", children, ...props }, ref) => {
+    const id = React.useId()
+    const helpId = `${id}-help`
+    return (
+      <TextFieldContext.Provider value={{ inRoot: false, size }}>
+        <div ref={ref} className={cn("ax:flex ax:flex-col ax:gap-1.5", className)} {...props}>
+          {React.Children.map(children, (child) =>
+            React.isValidElement<{ id?: string; "aria-describedby"?: string; "aria-invalid"?: boolean }>(child)
+              ? React.cloneElement(child, {
+                  id: child.props.id ?? id,
+                  "aria-describedby":
+                    help || error
+                      ? `${helpId} ${child.props["aria-describedby"] ?? ""}`.trim()
+                      : child.props["aria-describedby"],
+                  "aria-invalid": error ? true : child.props["aria-invalid"],
+                })
+              : child
+          )}
+          {(error || help) && (
+            <p
+              id={helpId}
+              className={cn("ax:text-xs", error ? "ax:text-destructive-foreground" : "ax:text-muted-foreground")}
+            >
+              {error ?? help}
+            </p>
+          )}
+        </div>
+      </TextFieldContext.Provider>
+    )
+  }
+)
+Field.displayName = "Field"

package/src/components/inset.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Card, CardContent, CardHeader, CardTitle } from "./card"
+import { Inset } from "./inset"
+
+const meta: Meta<typeof Inset> = {
+  title: "Components/Inset",
+  component: Inset,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Inset>
+
+export const Default: Story = {
+  render: () => (
+    <Card className="ax:max-w-sm">
+      <CardHeader>
+        <CardTitle>Media card</CardTitle>
+      </CardHeader>
+      <Inset side="x" clip="padding-box">
+        <div className="ax:h-32 ax:bg-muted ax:flex ax:items-center ax:justify-center ax:text-muted-foreground">Inset content</div>
+      </Inset>
+      <CardContent>
+        <p>Content below the inset.</p>
+      </CardContent>
+    </Card>
+  ),
+}

package/src/components/inset.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/cn"
+
+export type InsetSide = "all" | "x" | "y" | "top" | "bottom" | "left" | "right"
+export type InsetClip = "border-box" | "padding-box"
+
+export interface InsetProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Which edges the content bleeds to. Named by the face of the container:
+   * "top" → bleeds to top, left, and right edges.
+   * "left" → bleeds to left, top, and bottom edges.
+   */
+  side?: InsetSide
+  /** Whether the content clips at the border or allows overflow. Default "border-box". */
+  clip?: InsetClip
+  /** Add padding equal to the container's inset padding ABOVE the element.
+   *  Use with side="bottom" to gap the inset away from siblings above it. */
+  pt?: "none" | "current"
+  /** Add padding equal to the container's inset padding BELOW the element.
+   *  Use with side="top" to gap the inset away from siblings below it. */
+  pb?: "none" | "current"
+  /** Add padding equal to the container's inset padding LEFT of the element.
+   *  Use with side="right" to gap the inset away from siblings to its left. */
+  pl?: "none" | "current"
+  /** Add padding equal to the container's inset padding RIGHT of the element.
+   *  Use with side="left" to gap the inset away from siblings to its right. */
+  pr?: "none" | "current"
+}
+
+const P = "var(--inset-padding, 0px)"
+const NEG = `calc(-1 * ${P})`
+
+function sideStyle(side: InsetSide): React.CSSProperties {
+  switch (side) {
+    case "all":    return { margin: NEG }
+    case "x":      return { marginLeft: NEG, marginRight: NEG }
+    case "y":      return { marginTop: NEG, marginBottom: NEG }
+    case "top":    return { marginTop: NEG, marginLeft: NEG, marginRight: NEG }
+    case "bottom": return { marginBottom: NEG, marginLeft: NEG, marginRight: NEG }
+    case "left":   return { marginLeft: NEG, marginTop: NEG, marginBottom: NEG }
+    case "right":  return { marginRight: NEG, marginTop: NEG, marginBottom: NEG }
+  }
+}
+
+export const Inset = React.forwardRef<HTMLDivElement, InsetProps>(
+  ({ className, side = "all", clip = "border-box", pt = "none", pb = "none", pl = "none", pr = "none", style, children, ...props }, ref) => {
+    const inlineStyle: React.CSSProperties = {
+      ...sideStyle(side),
+      ...(pt === "current" ? { paddingTop:    P } : {}),
+      ...(pb === "current" ? { paddingBottom: P } : {}),
+      ...(pl === "current" ? { paddingLeft:   P } : {}),
+      ...(pr === "current" ? { paddingRight:  P } : {}),
+      ...style,
+    }
+
+    return (
+      <div
+        ref={ref}
+        style={inlineStyle}
+        className={cn(clip === "border-box" && "ax:overflow-hidden", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+Inset.displayName = "Inset"

package/src/components/kpi-card.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Users } from "lucide-react"
+import { KpiCard, KpiCardGroup } from "./kpi-card"
+
+const meta: Meta<typeof KpiCard> = {
+  title: "Components/KpiCard",
+  component: KpiCard,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof KpiCard>
+
+export const Default: Story = {
+  render: () => (
+    <KpiCardGroup className="ax:max-w-xs">
+      <KpiCard title="Active users" value={1284} change={12} icon={<Users className="ax:size-4" />} description="vs last 30 days" />
+    </KpiCardGroup>
+  ),
+}
+
+export const Loading: Story = {
+  render: () => (
+    <KpiCardGroup className="ax:max-w-xs">
+      <KpiCard title="Active users" value={0} loading />
+    </KpiCardGroup>
+  ),
+}