"use client";
import * as React from "react";
import { ChevronDown } from "lucide-react";
import { Collapsible as CollapsiblePrimitive } from "radix-ui";
import { cn } from "@/lib/utils";
/**
* v1.17.0 — `SheetSection` is the collapsible disclosure primitive that
* powers the sectioned single-sheet add flows (mood, cycle). Each section
* carries a title, an optional leading icon, and a `summary` slot that
* communicates what is selected inside it while collapsed (e.g. a count
* badge) — so a closed section never hides its contents silently.
*
* Built on Radix Collapsible. The chevron rotates and the content height
* animates open/closed via the `tw-animate-css` `collapsible-down/up`
* keyframes; both motions are suppressed under `prefers-reduced-motion`.
* Matches the shadcn new-york + zinc token language used across the app.
*/
interface SheetSectionProps {
/** Section heading shown on the always-visible trigger row. */
title: string;
/**
* A node rendered on the trigger row's trailing edge — typically a count
* badge that reports what is selected inside while the section is
* collapsed. Stays visible whether the section is open or closed.
*/
summary?: React.ReactNode;
/** Optional leading icon (a Lucide component or any node). */
icon?: React.ReactNode;
/** Whether the section starts expanded (uncontrolled). Defaults to closed. */
defaultOpen?: boolean;
/** Controlled open state. When set, pair with `onOpenChange`. */
open?: boolean;
/** Controlled open-state change handler. */
onOpenChange?: (open: boolean) => void;
/** Optional className merged onto the section wrapper. */
className?: string;
children: React.ReactNode;
}
export function SheetSection({
title,
summary,
icon,
defaultOpen = false,
open,
onOpenChange,
className,
children,
}: SheetSectionProps) {
return (
{icon ? (
{icon}
) : null}
{title}
{summary ? (
{summary}
) : null}
{children}
);
}
/**
* A compact "(N)" count badge for a `SheetSection` summary slot. Renders
* nothing when `count <= 0`, so a section with no selections shows a bare
* chevron rather than a "(0)".
*/
export function SheetSectionCount({ count }: { count: number }) {
if (count <= 0) return null;
return (
{count}
);
}