@adres/mgda-ui 0.0.0-stage → 0.0.1

package/src/components/segmented-control.tsx

@@ -0,0 +1,301 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { cva } from "class-variance-authority"
+import { cn } from "../lib/cn"
+
+export type SegmentedControlSize = "sm" | "md" | "lg"
+
+/** Colour theme for the whole control. Drives the track background (a weak
+ *  `{variant}` tint) and the selected thumb's drop shadow (`{variant}-strong`),
+ *  so the control picks up the brand's neutral, primary, or secondary hue. */
+export type SegmentedControlVariant = "neutral" | "primary" | "secondary"
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+interface SegmentedControlContextValue {
+  size:         SegmentedControlSize
+  currentValue: string
+  variant:      SegmentedControlVariant
+  registerItem: (value: string, el: HTMLButtonElement | null) => void
+}
+
+const SegmentedControlContext = React.createContext<SegmentedControlContextValue>({
+  size:         "md",
+  currentValue: "",
+  variant:      "neutral",
+  registerItem: () => {},
+})
+
+// ─── Variants ─────────────────────────────────────────────────────────────────
+
+// Outer heights mirror Button/Input/Dropdown so a SegmentedControl sits at
+// the same height as those primitives when placed side-by-side, and item
+// padding mirrors Button so each item has identical type metrics to a
+// standalone Button at the same size:
+//   sm → 32px (h-2xl)   md → 40px (h-3xl)   lg → 48px (h-4xl)
+//
+// No root inset: items go edge-to-edge so the total outer width matches the
+// sum of equivalent standalone Buttons (no extra 2px frame).
+//
+// Uses --input-radius (not --radius) so the control stays squared in pill
+// brands. Only Button/Badge should pick up the brand's button-pill setting.
+const rootVariants = cva(
+  "ax:relative ax:inline-flex ax:items-stretch ax:rounded-(--input-radius)",
+  {
+    variants: {
+      size: {
+        sm: "ax:h-xl ax:gap-px",
+        md: "ax:h-2xl ax:gap-px",
+        lg: "ax:h-3xl ax:gap-px",
+      },
+      // Track fill tint per theme. Neutral keeps the established `bg-muted`;
+      // primary/secondary use a weak brand tint. Applied via compoundVariants so
+      // it's suppressed when `transparent`.
+      variant: {
+        neutral:   "",
+        primary:   "",
+        secondary: "",
+      },
+      // `transparent` drops the track fill, for placing the control on an
+      // already-tinted surface where the track tint would clash.
+      transparent: {
+        true: "ax:bg-transparent",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      { variant: "neutral",   transparent: false, class: "ax:bg-neutral-weakest" },
+      { variant: "primary",   transparent: false, class: "ax:bg-primary-weakest" },
+      { variant: "secondary", transparent: false, class: "ax:bg-secondary-weakest" },
+    ],
+    defaultVariants: { size: "md", variant: "neutral", transparent: false },
+  }
+)
+
+const itemVariants = cva(
+  [
+    "ax:relative ax:z-10 ax:flex ax:items-center ax:justify-center ax:cursor-pointer ax:select-none ax:whitespace-nowrap",
+    "ax:rounded-(--input-radius)",
+    "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",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "ax:px-sm ax:t-label-xs",
+        md: "ax:px-md ax:t-label-sm",
+        lg: "ax:px-xl ax:t-label-md",
+      },
+    },
+    defaultVariants: { size: "md" },
+  }
+)
+
+// Colours the floating indicator's shadow per theme. The default `--shadow-sm`
+// token bakes its colour in at ~4% alpha, so simply retinting it reads as a
+// plain neutral shadow. Instead we rebuild the token's diffuse layer falloff
+// tinted with the raw `{variant}-strong` triplet (which auto-inverts in dark
+// mode) at a visible alpha, so the selected thumb's lift clearly carries the hue.
+const tintedShadow = (colorVar: string): string =>
+  [
+    `hsl(${colorVar} / 0.10) 0px 0px 0px 1px`,
+    `hsl(${colorVar} / 0.20) 0px 0.5625px 0.5625px -0.28125px`,
+    `hsl(${colorVar} / 0.20) 0px 1.6875px 1.6875px -0.84375px`,
+    `hsl(${colorVar} / 0.18) 0px 3.375px 3.375px -1.6875px`,
+    `hsl(${colorVar} / 0.16) 0px 6.75px 6.75px -3.375px`,
+    `hsl(${colorVar} / 0.14) 0px 13.5px 13.5px -6.75px`,
+  ].join(", ")
+
+// Neutral keeps the default `--shadow-sm` token (unchanged subtle look, no
+// regression for existing usages); branded variants get the tinted shadow.
+const variantBoxShadow: Record<SegmentedControlVariant, string | undefined> = {
+  neutral:   undefined,
+  primary:   tintedShadow("var(--primary)"),
+  secondary: tintedShadow("var(--secondary)"),
+}
+
+// Selected item's label colour, following the control's variant: neutral reads
+// as plain `foreground`; branded variants tint the label `{variant}-stronger`
+// and bump the weight to reinforce the selection.
+const activeLabelClass: Record<SegmentedControlVariant, string> = {
+  neutral:   "ax:text-foreground",
+  primary:   "ax:text-primary-foreground ax:font-medium",
+  secondary: "ax:text-secondary-foreground ax:font-medium",
+}
+
+// Unselected items' label colour, following the control's variant: the
+// `{variant}-strong` hue held back at half opacity, lifting toward full on
+// hover so the option still reads as interactive.
+const inactiveLabelClass: Record<SegmentedControlVariant, string> = {
+  neutral:   "ax:text-muted-foreground ax:hover:opacity-75",
+  primary:   "ax:text-primary-foreground ax:hover:opacity-85",
+  secondary: "ax:text-secondary-foreground ax:hover:opacity-85",
+}
+
+// ─── Root ─────────────────────────────────────────────────────────────────────
+
+export interface SegmentedControlProps
+  extends Omit<
+    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,
+    "orientation"
+  > {
+  size?: SegmentedControlSize
+  /** When true, the control stretches to fill its container and each item
+   *  takes an equal share of the width. Use for view toggles embedded in
+   *  toolbars, modal footers, or any layout where the control should fill
+   *  the available space rather than hug its content. */
+  fullWidth?: boolean
+  /** When true, the track background is transparent (drops the `bg-muted` fill).
+   *  Use when the control sits on an already-tinted surface. */
+  transparent?: boolean
+  /** Colour theme for the whole control: tints the track background (weak
+   *  `{variant}`), the selected thumb's shadow (`{variant}-strong`), and the
+   *  selected item's label (`{variant}-stronger`). Defaults to `neutral`. */
+  variant?: SegmentedControlVariant
+}
+
+export const SegmentedControl = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  SegmentedControlProps
+>(({ className, size = "md", fullWidth = false, transparent = false, variant = "neutral", value, defaultValue, onValueChange, children, ...props }, ref) => {
+  const rootRef   = React.useRef<HTMLDivElement>(null)
+  const itemRefs  = React.useRef(new Map<string, HTMLButtonElement>())
+  const positioned = React.useRef(false)
+
+  const [internalValue, setInternalValue] = React.useState<string>(
+    value ?? defaultValue ?? ""
+  )
+  const currentValue = value ?? internalValue
+
+  const [indicatorStyle, setIndicatorStyle] = React.useState<React.CSSProperties>({ opacity: 0 })
+
+  const updateIndicator = React.useCallback((val: string) => {
+    const el   = itemRefs.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" : undefined,
+    })
+    positioned.current = true
+  }, [])
+
+  // Reposition when value or children change.
+  React.useLayoutEffect(() => {
+    updateIndicator(currentValue)
+  }, [currentValue, updateIndicator])
+
+  // Reposition on container resize (theme panel open/close shifts layout).
+  React.useEffect(() => {
+    const root = rootRef.current
+    if (!root) return
+    const observer = new ResizeObserver(() => updateIndicator(currentValue))
+    observer.observe(root)
+    return () => observer.disconnect()
+  }, [currentValue, updateIndicator])
+
+  const handleValueChange = React.useCallback(
+    (val: string) => {
+      setInternalValue(val)
+      onValueChange?.(val)
+    },
+    [onValueChange]
+  )
+
+  const registerItem = React.useCallback(
+    (val: string, el: HTMLButtonElement | null) => {
+      if (el) itemRefs.current.set(val, el)
+      else    itemRefs.current.delete(val)
+    },
+    []
+  )
+
+  // Merge the forwarded ref with our local root ref.
+  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 (
+    <SegmentedControlContext.Provider value={{ size, currentValue, variant, registerItem }}>
+      <RadioGroupPrimitive.Root
+        ref={mergedRef}
+        orientation="horizontal"
+        value={currentValue}
+        onValueChange={handleValueChange}
+        className={cn(
+          rootVariants({ size, variant, transparent }),
+          fullWidth && "ax:flex ax:w-full *:flex-1",
+          className
+        )}
+        {...props}
+      >
+        {/* Floating indicator - slides behind the active item */}
+        <div
+          aria-hidden="true"
+          // Dark mode: a raised neutral-stronger thumb, lighter than the `bg-muted`
+          // track, so the selection pops off the track (mirrors the light-mode
+          // white-on-grey lift) consistently across brands. Light stays --card.
+          className="ax:absolute ax:bg-card ax:shadow-sm ax:rounded-(--input-radius) ax:pointer-events-none"
+          style={{ ...indicatorStyle, boxShadow: variantBoxShadow[variant] }}
+        />
+        {children}
+      </RadioGroupPrimitive.Root>
+    </SegmentedControlContext.Provider>
+  )
+})
+SegmentedControl.displayName = "SegmentedControl"
+
+// ─── Item ─────────────────────────────────────────────────────────────────────
+
+export interface SegmentedControlItemProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {}
+
+export const SegmentedControlItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  SegmentedControlItemProps
+>(({ className, value, children, ...props }, ref) => {
+  const { size, currentValue, variant, registerItem } = React.useContext(SegmentedControlContext)
+  const isActive = currentValue === value
+  const localRef = React.useRef<HTMLButtonElement>(null)
+
+  React.useImperativeHandle(ref, () => localRef.current!)
+
+  React.useLayoutEffect(() => {
+    registerItem(value, localRef.current)
+    return () => registerItem(value, null)
+  }, [value, registerItem])
+
+  return (
+    <RadioGroupPrimitive.Item
+      ref={localRef}
+      value={value}
+      className={cn(
+        itemVariants({ size }),
+        isActive
+          ? activeLabelClass[variant]
+          : inactiveLabelClass[variant],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </RadioGroupPrimitive.Item>
+  )
+})
+SegmentedControlItem.displayName = "SegmentedControlItem"

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

@@ -0,0 +1,27 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { SelectButton } from "./select-button"
+import { SelectItem } from "./select"
+
+const meta: Meta<typeof SelectButton> = {
+  title: "Components/SelectButton",
+  component: SelectButton,
+  tags: ["autodocs"],
+  args: {
+    defaultValue: "all",
+    placeholder: "Choose status",
+    buttonLabel: "Apply",
+    children: (
+      <>
+        <SelectItem value="all">All statuses</SelectItem>
+        <SelectItem value="active">Active</SelectItem>
+        <SelectItem value="archived">Archived</SelectItem>
+      </>
+    ),
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof SelectButton>
+
+export const Default: Story = {}

package/src/components/select-button.tsx

@@ -0,0 +1,174 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { ChevronDown } from "lucide-react"
+import { Button, type ButtonProps } from "./button"
+import { SelectContent } from "./select"
+import { cn } from "../lib/cn"
+
+/**
+ * SelectButton - a Select + Button compactly joined into a single inline group.
+ *
+ * The two halves share the same height (sm/md/lg align with Button, Input,
+ * and Dropdown so they line up when placed side-by-side). The Select trigger
+ * occupies the left half; the Button occupies the right half and accepts any
+ * Button `variant`. SelectItem children render inside the Select's popover.
+ *
+ *   <SelectButton
+ *     size="md"
+ *     variant="primary"
+ *     placeholder="Choose status"
+ *     value={value}
+ *     onValueChange={setValue}
+ *     buttonLabel="Apply"
+ *     onButtonClick={handleApply}
+ *   >
+ *     <SelectItem value="active">Active</SelectItem>
+ *     <SelectItem value="archived">Archived</SelectItem>
+ *   </SelectButton>
+ */
+
+export type SelectButtonSize = "sm" | "md" | "lg"
+
+/**
+ * Variant whitelist for the right-hand action button.
+ * 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 select+commit toolbar
+ *   link        - underline-on-hover text breaks the joined-pill shape
+ */
+export type SelectButtonVariant = Exclude<NonNullable<ButtonProps["variant"]>, "ghost" | "accent" | "destructive">
+
+
+const TRIGGER_HEIGHT: Record<SelectButtonSize, string> = {
+  sm: "ax:h-2xl",  // 32px
+  md: "ax:h-3xl",  // 40px
+  lg: "ax:h-4xl",  // 48px
+}
+
+// Mirrors the standalone Select / Input trigger scale so a SelectButton's
+// left half has identical horizontal padding + type metrics to a standalone
+// Select at the same size.
+const TRIGGER_PADDING_X: Record<SelectButtonSize, string> = {
+  sm: "ax:px-sm",
+  md: "ax:px-md",
+  lg: "ax:px-xl",
+}
+
+const TRIGGER_TEXT: Record<SelectButtonSize, string> = {
+  sm: "ax:t-label-sm",
+  md: "ax:t-label-sm",
+  lg: "ax:text-base",
+}
+
+export interface SelectButtonProps {
+  /** Shared height/typography ladder - matches Button, Input, Dropdown. */
+  size?: SelectButtonSize
+  /** Visual treatment of the right-hand action button. */
+  variant?: SelectButtonVariant
+
+  // ─── Select half ────────────────────────────────────────────────────────────
+  value?:         string
+  defaultValue?:  string
+  onValueChange?: (value: string) => void
+  placeholder?:   string
+  /** Disables BOTH halves. Use `buttonDisabled` to disable only the button. */
+  disabled?:      boolean
+  name?:          string
+  /** SelectItem (and SelectLabel/SelectSeparator) children for the popover. */
+  children:       React.ReactNode
+
+  // ─── Button half ────────────────────────────────────────────────────────────
+  buttonLabel:    React.ReactNode
+  onButtonClick?: React.MouseEventHandler<HTMLButtonElement>
+  buttonDisabled?: boolean
+  buttonType?:    "button" | "submit" | "reset"
+  /** Extra className appended to the inner Button. */
+  buttonClassName?: string
+
+  className?: string
+}
+
+export const SelectButton = React.forwardRef<HTMLDivElement, SelectButtonProps>(
+  (
+    {
+      size = "md",
+      variant = "primary",
+      value,
+      defaultValue,
+      onValueChange,
+      placeholder,
+      disabled,
+      name,
+      children,
+      buttonLabel,
+      onButtonClick,
+      buttonDisabled,
+      buttonType = "button",
+      buttonClassName,
+      className,
+    },
+    ref
+  ) => (
+    <div
+      ref={ref}
+      data-slot="select-button"
+      className={cn(
+        "ax:inline-flex ax:items-stretch ax:isolate",
+        disabled && "ax:opacity-50 ax:pointer-events-none",
+        className
+      )}
+    >
+      <SelectPrimitive.Root
+        value={value}
+        defaultValue={defaultValue}
+        onValueChange={onValueChange}
+        disabled={disabled}
+        name={name}
+      >
+        <SelectPrimitive.Trigger
+          className={cn(
+            "ax:inline-flex 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-var(--input-radius) ax:rounded-r-none ax:-mr-px",
+            "ax:transition-[border-color,box-shadow] ax:transition-snappy",
+            "ax:focus:outline-none ax:focus:z-10 ax:focus:ring-2 ax:focus:ring-ring ax:focus:ring-offset-1 ax:focus:ring-offset-background 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",
+            TRIGGER_HEIGHT[size],
+            TRIGGER_PADDING_X[size],
+            TRIGGER_TEXT[size]
+          )}
+        >
+          <SelectPrimitive.Value placeholder={placeholder} />
+          <SelectPrimitive.Icon asChild>
+            <ChevronDown className="ax:size-4 ax:shrink-0 ax:text-muted-foreground" />
+          </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+        <SelectContent>{children}</SelectContent>
+      </SelectPrimitive.Root>
+      <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 control stays squared in pill brands. Only the
+          // Button/Badge tokens should pick up the brand button-pill.
+          "ax:rounded-l-none ax:rounded-r-[var(--input-radius)] ax:focus-visible:z-10",
+          buttonClassName
+        )}
+      >
+        {buttonLabel}
+      </Button>
+    </div>
+  )
+)
+SelectButton.displayName = "SelectButton"

package/src/components/select.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select"
+
+const meta: Meta<typeof Select> = {
+  title: "Components/Select",
+  component: Select,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Select>
+
+export const Default: Story = {
+  render: () => (
+    <Select defaultValue="apple">
+      <SelectTrigger className="ax:w-[200px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="orange">Orange</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+}