Sticky bar

import type { ReactNode } from "react";

// The parts every panel in this kit is made of. The corners of what is inside follow the panel's own.
const air = {
  focus: "outline-none focus-visible:[outline:2px_solid_var(--tui-ring)] focus-visible:[outline-offset:2px]",
};

const round = "rounded-[calc(var(--tui-sticky-bar-radius)_-_var(--tui-sticky-bar-padding))]";

export interface StickyBarProps {
  /** A quiet word at the start: Offer, New. */
  tag?: ReactNode;
  /** The one line it says. */
  children: ReactNode;
  /** A quieter few words after the line, dropped first when there is no room. */
  detail?: ReactNode;
  action?: { label: string; href: string };
  /** Shows a close button and is called when it is pressed. */
  onDismiss?: () => void;
  className?: string;
}

/**
 * One line and one button, as a floating capsule that stays in view while
 * the page scrolls. It does not place itself: fix it to the bottom of the
 * page or make it sticky where it is used.
 */
export function StickyBar({ tag, children, detail, action, onDismiss, className }: StickyBarProps) {
  return (
    <aside
      data-slot="sticky-bar"
      className={[
        "inline-flex h-(--tui-sticky-bar-height) max-w-full items-center gap-(--tui-sticky-bar-gap) rounded-(--tui-sticky-bar-radius) bg-(--tui-sticky-bar-bg) p-(--tui-sticky-bar-padding) font-(family-name:--tui-font) text-(length:--tui-sticky-bar-font-size) leading-none text-(--tui-sticky-bar-fg) shadow-(--tui-sticky-bar-shadow)",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
    >
      {tag && (
        <span data-slot="sticky-bar-tag" className={"inline-flex h-full shrink-0 items-center bg-(--tui-sticky-bar-well) px-3 text-[0.93em] font-medium text-(--tui-sticky-bar-muted) " + round}>
          {tag}
        </span>
      )}
      <p className="m-0 flex min-w-0 flex-1 items-baseline gap-2 px-2">
        <span className="truncate font-medium">{children}</span>
        {detail && <span className="hidden shrink-0 text-(--tui-sticky-bar-muted) sm:inline">{detail}</span>}
      </p>
      {action && (
        <a href={action.href} data-slot="sticky-bar-action" className={["inline-flex h-full shrink-0 items-center bg-(--tui-sticky-bar-accent) px-4 font-medium whitespace-nowrap text-(--tui-sticky-bar-accent-fg) no-underline transition-[opacity,scale] duration-(--tui-duration) hover:opacity-90 active:scale-[0.97]", round, air.focus].join(" ")}>
          {action.label}
        </a>
      )}
      {onDismiss && (
        <button
          type="button"
          onClick={onDismiss}
          aria-label="Close"
          data-slot="sticky-bar-close"
          className={["flex aspect-square h-full shrink-0 cursor-default items-center justify-center rounded-full border-none bg-transparent text-(--tui-sticky-bar-muted) transition-colors duration-(--tui-duration) hover:bg-(--tui-sticky-bar-well) hover:text-(--tui-sticky-bar-fg)", air.focus].join(" ")}
        >
          <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" className="size-[1.1em]">
            <path d="M4 4l8 8M12 4l-8 8" />
          </svg>
        </button>
      )}
    </aside>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Sticky bar */
  --tui-sticky-bar-height: calc(var(--tui-space) * 13);
  --tui-sticky-bar-padding: calc(var(--tui-space) * 1.5);
  --tui-sticky-bar-gap: calc(var(--tui-space) * 1);
  --tui-sticky-bar-radius: calc(var(--tui-radius) * 6.5);
  --tui-sticky-bar-font-size: var(--tui-text);
  --tui-sticky-bar-bg: light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg)));
  --tui-sticky-bar-shadow: 0 0 0 1px color-mix(in srgb, var(--tui-fg) 5%, transparent), 0 2px 6px rgb(0 0 0 / 0.04), 0 16px 40px rgb(0 0 0 / 0.1);
  --tui-sticky-bar-fg: var(--tui-fg);
  --tui-sticky-bar-muted: var(--tui-muted-fg);
  --tui-sticky-bar-well: color-mix(in srgb, light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg))) 94%, var(--tui-fg));
  --tui-sticky-bar-accent: var(--tui-primary);
  --tui-sticky-bar-accent-fg: var(--tui-primary-fg);
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}