Omarchy Settings Row

import * as React from "react"
import { cn } from "cn"

/**
 * A labelled settings line: name and explanation on the left, its control on
 * the right. Pass `controlId` matching the control's `id` so the label points
 * at it.
 */
function OmarchySettingsRow({
  label,
  description,
  controlId,
  keys,
  children,
  className,
  ...props
}: Omit<React.ComponentProps<"div">, "children"> & {
  label: string
  description?: string
  controlId?: string
  keys?: React.ReactNode
  children?: React.ReactNode
}) {
  return (
    <div
      data-slot="omarchy-settings-row"
      className={cn(
        "flex items-center justify-between gap-4 py-3 not-last:border-b not-last:border-border",
        className
      )}
      {...props}
    >
      <div className="flex min-w-0 flex-col gap-0.5">
        <label
          htmlFor={controlId}
          className="flex items-center gap-2 text-sm font-medium"
        >
          {label}
          {keys}
        </label>
        {description ? (
          <span className="text-xs leading-relaxed text-muted-foreground">
            {description}
          </span>
        ) : null}
      </div>
      {children ? <div className="shrink-0">{children}</div> : null}
    </div>
  )
}

/** Groups settings rows under a heading. */
function OmarchySettingsGroup({
  heading,
  children,
  className,
  ...props
}: React.ComponentProps<"section"> & {
  heading: string
}) {
  const headingId = React.useId()

  return (
    <section
      data-slot="omarchy-settings-group"
      aria-labelledby={headingId}
      className={cn("flex flex-col", className)}
      {...props}
    >
      <h3
        id={headingId}
        className="pb-1 font-mono text-[0.6875rem] tracking-wide text-muted-foreground uppercase"
      >
        {heading}
      </h3>
      {children}
    </section>
  )
}

export { OmarchySettingsRow, OmarchySettingsGroup }