@helpwave/hightide
Version:
helpwave's component and theming library
45 lines • 1.57 kB
JavaScript
// src/components/Expandable.tsx
import { forwardRef, useState } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";
import clsx from "clsx";
import { jsx, jsxs } from "react/jsx-runtime";
var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ jsx(ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ jsx(ChevronDown, { size: 16, className: "min-w-[16px]" });
var Expandable = forwardRef(({
children,
label,
icon,
initialExpansion = false,
clickOnlyOnHeader = true,
className = "",
headerClassName = ""
}, ref) => {
const [isExpanded, setIsExpanded] = useState(initialExpansion);
icon ??= DefaultIcon;
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: clsx("col bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader }, className),
onClick: () => !clickOnlyOnHeader && setIsExpanded(!isExpanded),
children: [
/* @__PURE__ */ jsxs(
"button",
{
className: clsx("btn-md rounded-lg justify-between items-center bg-surface text-on-surface", { "group-hover:brightness-95": !isExpanded }, headerClassName),
onClick: () => clickOnlyOnHeader && setIsExpanded(!isExpanded),
children: [
label,
icon(isExpanded)
]
}
),
isExpanded && /* @__PURE__ */ jsx("div", { className: "col", children })
]
}
);
});
Expandable.displayName = "Expandable";
export {
Expandable
};
//# sourceMappingURL=Expandable.mjs.map