@exxatdesignux/ui 0.0.5

package/src/components/ui/radio-group.tsx

@@ -0,0 +1,217 @@
+"use client"
+
+/**
+ * Radio group — Radix `RadioGroup` + `RadioGroupItem` with Exxat styling.
+ *
+ * Aligned with Shadcn Studio radio-group guidance (see shadcnstudio.com/docs/components/radio-group):
+ *   • Visual variants: default, outline, secondary, success, destructive, warning, muted
+ *   • Sizes: sm, default, lg (outer ring + inner dot scale together)
+ *   • Motion: none | pop | glow | pop-glow — `motion-safe` / `motion-reduce` (WCAG 2.3.3)
+ *   • Optional group defaults: `<RadioGroup itemVariant="outline" itemSize="sm">` so items inherit
+ *   • Per-item overrides: `<RadioGroupItem variant="success" />`
+ *   • Forms: `aria-invalid`, `disabled`, hit slop (`after:`); pair with `RadioGroupLabel` + `htmlFor` / `id`
+ */
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+import { Label } from "./label"
+
+// ── Item chrome (variants / sizes / motion) ─────────────────────────────────
+
+const radioGroupItemVariants = cva(
+  [
+    "group/radio-group-item peer relative flex shrink-0 aspect-square rounded-full border border-input",
+    "outline-none transition-[color,box-shadow,transform,background-color,border-color] duration-150",
+    "motion-reduce:transition-none",
+    "group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2",
+    "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:data-[state=checked]:border-primary",
+    "dark:bg-input/15 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: [
+          "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary",
+        ].join(" "),
+        outline: [
+          "bg-background",
+          "data-[state=checked]:border-primary data-[state=checked]:bg-background data-[state=checked]:text-primary data-[state=checked]:ring-2 data-[state=checked]:ring-primary/25",
+        ].join(" "),
+        secondary: [
+          "data-[state=checked]:border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground",
+        ].join(" "),
+        success: [
+          "data-[state=checked]:border-chart-2 data-[state=checked]:bg-chart-2 data-[state=checked]:text-primary-foreground",
+        ].join(" "),
+        destructive: [
+          "data-[state=checked]:border-destructive data-[state=checked]:bg-destructive data-[state=checked]:text-destructive-foreground",
+        ].join(" "),
+        warning: [
+          "data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500 data-[state=checked]:text-amber-950",
+        ].join(" "),
+        muted: [
+          "data-[state=checked]:border-muted-foreground/50 data-[state=checked]:bg-muted data-[state=checked]:text-foreground",
+        ].join(" "),
+      },
+      size: {
+        sm: "size-3.5 min-h-3.5 min-w-3.5 max-h-3.5 max-w-3.5",
+        default: "size-4 min-h-4 min-w-4 max-h-4 max-w-4",
+        lg: "size-5 min-h-5 min-w-5 max-h-5 max-w-5",
+      },
+      motion: {
+        none: "",
+        pop: [
+          "motion-safe:active:scale-95",
+          "data-[state=checked]:motion-safe:scale-[1.04]",
+        ].join(" "),
+        glow: "data-[state=checked]:shadow-[0_0_0_3px] data-[state=checked]:shadow-primary/35",
+        "pop-glow": [
+          "motion-safe:active:scale-95",
+          "data-[state=checked]:motion-safe:scale-[1.04]",
+          "data-[state=checked]:shadow-[0_0_0_3px] data-[state=checked]:shadow-primary/35",
+        ].join(" "),
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      motion: "none",
+    },
+  }
+)
+
+const radioIndicatorDotVariants = cva(
+  "pointer-events-none absolute top-1/2 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 rounded-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary-foreground",
+        outline: "bg-primary",
+        secondary: "bg-secondary-foreground",
+        success: "bg-primary-foreground",
+        destructive: "bg-destructive-foreground",
+        warning: "bg-amber-950",
+        muted: "bg-foreground",
+      },
+      size: {
+        sm: "size-1.5",
+        default: "size-2",
+        lg: "size-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const radioIndicatorWrapperVariants = cva("relative flex size-full items-center justify-center", {
+  variants: {
+    motion: {
+      none: "",
+      pop: "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:duration-150",
+      glow: "",
+      "pop-glow": "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:duration-150",
+    },
+  },
+  defaultVariants: { motion: "none" },
+})
+
+type ItemChrome = {
+  itemVariant?: VariantProps<typeof radioGroupItemVariants>["variant"]
+  itemSize?: VariantProps<typeof radioGroupItemVariants>["size"]
+  itemMotion?: VariantProps<typeof radioGroupItemVariants>["motion"]
+}
+
+const RadioGroupItemChromeContext = React.createContext<ItemChrome>({})
+
+// ── RadioGroup root ─────────────────────────────────────────────────────────
+
+export type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> &
+  ItemChrome
+
+function RadioGroup({
+  className,
+  itemVariant,
+  itemSize,
+  itemMotion,
+  ...props
+}: RadioGroupProps) {
+  const ctx = React.useMemo(
+    () => ({ itemVariant, itemSize, itemMotion }),
+    [itemVariant, itemSize, itemMotion],
+  )
+  return (
+    <RadioGroupItemChromeContext.Provider value={ctx}>
+      <RadioGroupPrimitive.Root
+        data-slot="radio-group"
+        className={cn("grid w-full gap-2", className)}
+        {...props}
+      />
+    </RadioGroupItemChromeContext.Provider>
+  )
+}
+
+// ── RadioGroupItem ──────────────────────────────────────────────────────────
+
+export type RadioGroupItemProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> &
+  VariantProps<typeof radioGroupItemVariants>
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  RadioGroupItemProps
+>(function RadioGroupItem(
+  { className, variant: variantProp, size: sizeProp, motion: motionProp, ...props },
+  ref,
+) {
+  const ctx = React.useContext(RadioGroupItemChromeContext)
+  const variant = variantProp ?? ctx.itemVariant
+  const size = sizeProp ?? ctx.itemSize
+  const motion = motionProp ?? ctx.itemMotion ?? "none"
+  const vResolved = variant ?? "default"
+  const sResolved = size ?? "default"
+
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      data-slot="radio-group-item"
+      data-variant={vResolved}
+      data-motion={motion}
+      className={cn(radioGroupItemVariants({ variant, size, motion }), className)}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className={radioIndicatorWrapperVariants({ motion })}
+      >
+        <span className={radioIndicatorDotVariants({ variant: vResolved, size: sResolved })} />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+
+// ── Label helper (touch-friendly row with peer-disabled) ────────────────────
+
+export type RadioGroupLabelProps = React.ComponentPropsWithRef<typeof Label>
+
+function RadioGroupLabel({ className, ...props }: RadioGroupLabelProps) {
+  return (
+    <Label
+      data-slot="radio-group-label"
+      className={cn(
+        "inline-flex min-h-11 cursor-pointer select-none items-center gap-2 py-1 -my-1 text-sm font-medium leading-snug",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-60",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { RadioGroup, RadioGroupItem, RadioGroupLabel, radioGroupItemVariants }

package/src/components/ui/select.tsx

@@ -0,0 +1,191 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pe-2 ps-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/15 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <i className="fa-light fa-chevron-down pointer-events-none size-4 text-muted-foreground" aria-hidden="true" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        data-align-trigger={position === "item-aligned"}
+        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 rtl:data-[side=left]:translate-x-1 data-[side=right]:translate-x-1 rtl:data-[side=right]:-translate-x-1 data-[side=top]:-translate-y-1", className )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          data-position={position}
+          className={cn(
+            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+            position === "popper" && ""
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pe-8 ps-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute end-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <i className="fa-light fa-check pointer-events-none" aria-hidden="true" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <i className="fa-light fa-chevron-up" aria-hidden="true"
+      />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <i className="fa-light fa-chevron-down" aria-hidden="true"
+      />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

package/src/components/ui/selection-tile-grid.tsx

@@ -0,0 +1,246 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import { Label } from "./label"
+import { RadioGroup, RadioGroupItem, type RadioGroupProps } from "./radio-group"
+
+export interface SelectionTileOption<T extends string = string> {
+  value: T
+  label: string
+  /** Font Awesome icon class without prefix (e.g. `fa-table`); rendered with `fa-light`. Ignored when `leading` is set. */
+  icon?: string
+  /** Custom graphic (SVG, swatch, etc.) instead of `icon`. */
+  leading?: React.ReactNode
+}
+
+/** Shared surface classes for icon+label tiles (Properties view type, Export format, etc.). */
+export function selectionTileClassNames(selected: boolean) {
+  return cn(
+    "flex flex-col items-center justify-center gap-1.5 rounded-lg border py-3 text-xs transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    selected
+      ? "border-brand bg-brand/5 text-foreground font-medium shadow-sm"
+      : "border-border bg-background text-muted-foreground hover:border-border/80 hover:text-interactive-hover-foreground",
+  )
+}
+
+/** Preview box only — label rendered below (Settings appearance pattern). */
+export function selectionTilePreviewClassNames(selected: boolean) {
+  return cn(
+    "relative box-border flex aspect-square w-full max-w-full flex-col rounded-lg border p-1 transition-colors",
+    selected
+      ? "border-brand bg-brand/5 shadow-sm"
+      : "border-border bg-background hover:border-border/80",
+  )
+}
+
+function SelectionTileGraphic<T extends string>({
+  option,
+  selected,
+}: {
+  option: SelectionTileOption<T>
+  selected: boolean
+}) {
+  if (option.leading != null) {
+    return (
+      <span className="flex h-full min-h-0 w-full min-w-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:block [&_svg]:h-full [&_svg]:w-auto [&_svg]:max-h-full [&_svg]:max-w-full [&_svg]:object-contain [&_svg]:object-center">
+        {option.leading}
+      </span>
+    )
+  }
+  if (option.icon) {
+    return (
+      <i
+        className={cn(
+          "fa-light shrink-0 text-[18px] leading-none",
+          option.icon,
+          selected && "text-brand",
+        )}
+        aria-hidden="true"
+      />
+    )
+  }
+  return null
+}
+
+function SelectionTileLabelText<T extends string>({
+  option,
+}: {
+  option: SelectionTileOption<T>
+}) {
+  return <span className="text-center leading-tight">{option.label}</span>
+}
+
+export interface SelectionTileGridProps<T extends string> {
+  /** Section caption above the grid (e.g. “View type”). */
+  sectionLabel?: string
+  options: readonly SelectionTileOption<T>[]
+  columns?: 2 | 3 | 4
+  value: T
+  onValueChange: (value: T) => void
+  /** `radio` — Form / RadioGroup; `button` — toggle buttons with aria-pressed. */
+  interaction: "radio" | "button"
+  /** Prefix for radio ids (`${idPrefix}-${value}`). */
+  idPrefix?: string
+  /** Forwarded to `RadioGroup` when `interaction="radio"` (sr-only inputs; affects focus ring / state tokens). */
+  itemVariant?: RadioGroupProps["itemVariant"]
+  itemSize?: RadioGroupProps["itemSize"]
+  itemMotion?: RadioGroupProps["itemMotion"]
+  className?: string
+  /**
+   * `inside` — label in the bordered tile (default). `below` — label under the preview
+   * (matches system settings: preview box + caption outside).
+   */
+  labelPlacement?: "inside" | "below"
+}
+
+/**
+ * Icon tile grid for single selection — matches Properties “View type” and Export “File format” patterns.
+ */
+function SelectionTileCaptionBelow<T extends string>({
+  option,
+  selected,
+  ariaHidden = false,
+}: {
+  option: SelectionTileOption<T>
+  selected: boolean
+  /** When the parent `button` already has `aria-label` (avoids duplicate SR output). */
+  ariaHidden?: boolean
+}) {
+  return (
+    <span
+      className={cn(
+        "max-w-full px-0.5 text-center text-xs leading-tight",
+        selected ? "font-medium text-foreground" : "text-muted-foreground",
+      )}
+      {...(ariaHidden ? { "aria-hidden": true as const } : {})}
+    >
+      {option.label}
+    </span>
+  )
+}
+
+export function SelectionTileGrid<T extends string>({
+  sectionLabel,
+  options,
+  columns = 4,
+  value,
+  onValueChange,
+  interaction,
+  idPrefix = "tile",
+  className,
+  labelPlacement = "inside",
+  itemVariant,
+  itemSize,
+  itemMotion,
+}: SelectionTileGridProps<T>) {
+  const gridClass = cn(
+    "gap-2",
+    columns === 2 && "grid grid-cols-2",
+    columns === 3 && "grid grid-cols-3",
+    columns === 4 && "grid grid-cols-4",
+  )
+
+  if (interaction === "radio") {
+    return (
+      <div className={className}>
+        {sectionLabel ? (
+          <p className="mb-2 text-xs font-medium text-muted-foreground">{sectionLabel}</p>
+        ) : null}
+        <RadioGroup
+          value={value}
+          onValueChange={v => onValueChange(v as T)}
+          className={gridClass}
+          itemVariant={itemVariant}
+          itemSize={itemSize}
+          itemMotion={itemMotion}
+        >
+          {options.map(opt => {
+            const selected = value === opt.value
+            const id = `${idPrefix}-${opt.value}`
+            if (labelPlacement === "below") {
+              return (
+                <Label
+                  key={opt.value}
+                  htmlFor={id}
+                  className={cn(
+                    "flex min-w-0 cursor-pointer flex-col items-center gap-1.5 rounded-lg focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background",
+                  )}
+                >
+                  <span className={cn("flex w-full justify-center", selectionTilePreviewClassNames(selected))}>
+                    <RadioGroupItem value={opt.value} id={id} className="sr-only" />
+                    <span className="flex min-h-0 w-full min-w-0 flex-1 items-center justify-center">
+                      <SelectionTileGraphic option={opt} selected={selected} />
+                    </span>
+                  </span>
+                  <SelectionTileCaptionBelow option={opt} selected={selected} />
+                </Label>
+              )
+            }
+            return (
+              <Label
+                key={opt.value}
+                htmlFor={id}
+                className={cn(
+                  "cursor-pointer rounded-lg focus-within:rounded-lg focus-within:ring-2 focus-within:ring-ring focus-within:outline-none",
+                  selectionTileClassNames(selected),
+                )}
+              >
+                <RadioGroupItem value={opt.value} id={id} className="sr-only" />
+                <SelectionTileGraphic option={opt} selected={selected} />
+                <SelectionTileLabelText option={opt} />
+              </Label>
+            )
+          })}
+        </RadioGroup>
+      </div>
+    )
+  }
+
+  return (
+    <div className={className}>
+      {sectionLabel ? (
+        <p className="mb-2 text-xs font-medium text-muted-foreground">{sectionLabel}</p>
+      ) : null}
+      <div className={gridClass}>
+        {options.map(opt => {
+          const selected = value === opt.value
+          if (labelPlacement === "below") {
+            return (
+              <button
+                key={opt.value}
+                type="button"
+                aria-label={opt.label}
+                aria-pressed={selected}
+                onClick={() => onValueChange(opt.value)}
+                className="flex min-w-0 flex-col items-center gap-1.5 rounded-lg border-0 bg-transparent p-0 text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              >
+                <span className={cn("flex w-full justify-center", selectionTilePreviewClassNames(selected))}>
+                  <span className="flex min-h-0 w-full min-w-0 flex-1 items-center justify-center">
+                    <SelectionTileGraphic option={opt} selected={selected} />
+                  </span>
+                </span>
+                <SelectionTileCaptionBelow option={opt} selected={selected} ariaHidden />
+              </button>
+            )
+          }
+          return (
+            <button
+              key={opt.value}
+              type="button"
+              aria-label={opt.label}
+              aria-pressed={selected}
+              onClick={() => onValueChange(opt.value)}
+              className={selectionTileClassNames(selected)}
+            >
+              <SelectionTileGraphic option={opt} selected={selected} />
+              <SelectionTileLabelText option={opt} />
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }