@helpwave/hightide
Version:
helpwave's component and theming library
62 lines (60 loc) • 1.96 kB
JavaScript
// src/components/InputGroup.tsx
import { useEffect, useState } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";
import clsx from "clsx";
// src/util/noop.ts
var noop = () => void 0;
// src/components/InputGroup.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var InputGroup = ({
children,
title,
expanded = true,
isExpandable = true,
disabled = false,
onChange = noop,
className = ""
}) => {
const [isExpanded, setIsExpanded] = useState(expanded);
useEffect(() => {
setIsExpanded(expanded);
}, [expanded]);
return /* @__PURE__ */ jsxs("div", { className: clsx("col gap-y-4 p-4 bg-white rounded-xl", className), children: [
/* @__PURE__ */ jsxs(
"div",
{
className: clsx(
"row justify-between items-center",
{
"cursor-pointer": isExpandable && !disabled,
"cursor-not-allowed": disabled
},
{
"text-primary": !disabled,
"text-primary/40": disabled
}
),
onClick: () => {
if (!isExpandable) {
return;
}
const updatedIsExpanded = !isExpanded;
onChange(updatedIsExpanded);
setIsExpanded(updatedIsExpanded);
},
children: [
/* @__PURE__ */ jsx("span", { className: "textstyle-title-md", children: title }),
/* @__PURE__ */ jsx("div", { className: clsx("rounded-full text-white w-6 h-6", {
"bg-primary": isExpandable && !disabled || expanded,
"bg-primary/40": disabled
}), children: isExpanded ? /* @__PURE__ */ jsx(ChevronUp, { className: "-translate-y-[1px]", size: 24 }) : /* @__PURE__ */ jsx(ChevronDown, { className: "translate-y-[1px]", size: 24 }) })
]
}
),
isExpanded && /* @__PURE__ */ jsx("div", { className: "col gap-y-2 h-full", children })
] });
};
export {
InputGroup
};
//# sourceMappingURL=InputGroup.mjs.map