Selection bar

"use client";

import * as React from "react";
import { XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type SelectionBarProps = React.ComponentProps<"div"> & {
  /** How many items are selected. The bar hides at 0. */
  count: number;
  /** Clears the selection. Omit to hide the clear button. */
  onClear?: () => void;
  /** Count label. {count} is replaced with the number. */
  label?: string;
  /** Accessible name of the clear button. */
  clearLabel?: string;
  /** absolute floats in the nearest positioned parent, fixed floats over the viewport. */
  position?: "absolute" | "fixed";
  /** Bar height. sm is 36px, default is 44px. */
  size?: "sm" | "default";
  /** The actions, usually small ghost buttons. */
  children?: React.ReactNode;
};

/**
 * A floating bar at the bottom center that appears while something is selected.
 * Shows the count, your actions and a clear button. Hidden, and inert, when count is 0.
 */
export function SelectionBar({
  count,
  onClear,
  label = "{count} selected",
  clearLabel = "Clear selection",
  position = "absolute",
  size = "default",
  className,
  children,
  ...props
}: SelectionBarProps) {
  const open = count > 0;
  const text = label.replace("{count}", String(count));

  return (
    <div
      data-slot="selection-bar"
      data-state={open ? "open" : "closed"}
      inert={!open}
      className={cn(
        "inset-x-0 bottom-3 z-40 flex justify-center px-3 transition-[opacity,transform] duration-150 ease-out motion-reduce:transform-none",
        position === "fixed" ? "fixed bottom-4" : "absolute",
        open ? "opacity-100" : "pointer-events-none translate-y-2 opacity-0",
        className,
      )}
      {...props}
    >
      <div
        role="toolbar"
        aria-label="Selection"
        className={cn(
          "flex max-w-full items-center gap-1 rounded-lg border bg-popover text-popover-foreground shadow-md",
          size === "sm" ? "h-9 p-1" : "h-11 p-1.5",
        )}
      >
        <span
          aria-live="polite"
          className={cn("shrink-0 px-2 font-medium tabular-nums", size === "sm" ? "text-xs" : "text-sm")}
        >
          {text}
        </span>
        {children && (
          <>
            <span aria-hidden="true" className="h-4 w-px shrink-0 bg-border" />
            <div className="flex items-center gap-1">{children}</div>
          </>
        )}
        {onClear && (
          <Button
            type="button"
            variant="ghost"
            size={size === "sm" ? "icon-xs" : "icon-sm"}
            aria-label={clearLabel}
            onClick={onClear}
            className="shrink-0 text-muted-foreground"
          >
            <XIcon aria-hidden="true" />
          </Button>
        )}
      </div>
    </div>
  );
}