Aurora Button Group

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/lib/utils"
5 
6/**
7 * Segmented container for related, mutually-exclusive controls. Renders the
8 * shared raised surface and `role="group"`. It does NOT coordinate selection —
9 * pair with `ButtonGroupItem` and manage the pressed state yourself (there is no
10 * `value`/`onValueChange`). Any children work; `ButtonGroupItem` supplies the
11 * ready-made segment styling.
12 */
13export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
14  /** Lay the items in a row (default) or a column. */
15  orientation?: "horizontal" | "vertical"
16}
17 
18const ButtonGroup = ({ ref, className, orientation = "horizontal", style, ...props }: ButtonGroupProps & { ref?: React.Ref<HTMLDivElement> }) => (
19    <div
20      ref={ref}
21      role="group"
22      data-orientation={orientation}
23      className={cn(
24        "aurora-btn-group inline-flex border",
25        orientation === "vertical" ? "flex-col" : "items-center",
26        className
27      )}
28      style={{
29        // CD ButtonGroup is a segmented control: shared raised panel-strong
30        // surface (gradient + recessed hairline + inset highlight), 4px gap +
31        // padding, 10px radius — 1:1 with the dsCard container.
32        gap: 4,
33        padding: 4,
34        borderRadius: 10,
35        background:
36          "linear-gradient(180deg, var(--aurora-panel-strong-top), var(--aurora-panel-strong))",
37        borderColor: "color-mix(in srgb, var(--aurora-panel-strong) 72%, #000)",
38        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)",
39        ...style,
40      }}
41      {...props}
42    />
43  )
44ButtonGroup.displayName = "ButtonGroup"
45 
46/**
47 * A segment inside a `ButtonGroup`. Bare `<button>` with the Aurora segmented
48 * look (idle / hover / selected / focus-visible / disabled) supplied by
49 * `@layer aurora-components` — no hand-rolled inline styles. Drive selection via
50 * the `selected` prop, which sets `aria-pressed`.
51 */
52export interface ButtonGroupItemProps
53  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
54  /** Selected/active segment — sets `aria-pressed` and the lit styling. */
55  selected?: boolean
56}
57 
58const ButtonGroupItem = ({ ref, className, selected, type = "button", ...props }: ButtonGroupItemProps & { ref?: React.Ref<HTMLButtonElement> }) => (
59    <button
60      ref={ref}
61      type={type}
62      aria-pressed={selected}
63      className={cn("aurora-btn-group-item", className)}
64      {...props}
65    />
66  )
67// … truncated