Tone separators

"use client"

import type * as React from "react"

import { cn } from "@/lib/utils"

/* Tone separator family: 5 decorative horizontal separators. The skeleton is the
   same in every variant; the whole difference is the SEMANTIC TONE family: info,
   success, warning, danger and the neutral muted. The line is a tone gradient
   fading to transparent at both ends, with a soft glow of the same tone in the
   middle. Color comes ONLY from tokens, via alpha color-mix. size controls the
   thickness (sm..xl). Note: the BASE separator has no tone (the Axis Contract);
   this is a separate component in the STYLED layer, so the base matrix stays clean.
   No motion. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

export type SeparatorTone = "info" | "success" | "warning" | "danger" | "muted"

type Props = React.ComponentProps<"div"> & { size?: StyledSize }

const thickness: Record<StyledSize, string> = {
  sm: "h-px",
  md: "h-0.5",
  lg: "h-1",
  xl: "h-1.5",
}

/* The gradient mid colour plus the glow shadow per tone. The classes are written statically, because Tailwind cannot see dynamically concatenated classes. */
const toneClass: Record<SeparatorTone, string> = {
  info: "via-info shadow-[0_0_10px_-2px_color-mix(in_oklab,var(--color-info)_70%,transparent)]",
  success:
    "via-success shadow-[0_0_10px_-2px_color-mix(in_oklab,var(--color-success)_70%,transparent)]",
  warning:
    "via-warning shadow-[0_0_10px_-2px_color-mix(in_oklab,var(--color-warning)_70%,transparent)]",
  danger:
    "via-danger shadow-[0_0_10px_-2px_color-mix(in_oklab,var(--color-danger)_70%,transparent)]",
  muted:
    "via-[color-mix(in_oklab,var(--color-muted-foreground)_55%,transparent)]",
}

/* Shared shell: the only difference is the tone class and data-tone. */
function ToneRule({
  tone,
  className,
  size = "md",
  ...props
}: Props & { tone: SeparatorTone }) {
  return (
    <div
      data-slot="styled-separator"
      data-tone={tone}
      role="separator"
      aria-orientation="horizontal"
      className={cn(
        "w-full rounded-full bg-gradient-to-r from-transparent to-transparent",
        toneClass[tone],
        thickness[size],
        className
      )}
      {...props}
    />
  )
}

/* Info: bilgi tonunda ayirac. */
export function InfoSeparator(props: Props) {
  return <ToneRule tone="info" {...props} />
}

/* Success: basari tonunda ayirac. */
export function SuccessSeparator(props: Props) {
  return <ToneRule tone="success" {...props} />
}

/* Warning: uyari tonunda ayirac. */
export function WarningSeparator(props: Props) {
  return <ToneRule tone="warning" {...props} />
}

/* Danger: tehlike tonunda ayirac. */
export function DangerSeparator(props: Props) {
  return <ToneRule tone="danger" {...props} />
}

/* Muted: notr, geri cekilmis ton. */
export function MutedSeparator(props: Props) {
  return <ToneRule tone="muted" {...props} />
}