@flanksource/clicky-ui
Version:
Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.
74 lines (73 loc) • 2.59 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { useState } from "react";
import { cn } from "../lib/utils.js";
import { Icon } from "../data/Icon.js";
const toneRing = {
default: "",
danger: "border-l-2 border-red-500",
warning: "border-l-2 border-yellow-500",
success: "border-l-2 border-green-500",
info: "border-l-2 border-blue-500"
};
function Section({
title,
summary,
defaultOpen = false,
open: openProp,
onToggle,
icon,
tone = "default",
className,
headerClassName,
bodyClassName,
children
}) {
const isControlled = openProp !== void 0;
const [innerOpen, setInnerOpen] = useState(defaultOpen);
const open = isControlled ? openProp : innerOpen;
function toggle() {
const next = !open;
if (!isControlled) setInnerOpen(next);
onToggle == null ? void 0 : onToggle(next);
}
return /* @__PURE__ */ jsxs("div", { className: cn("rounded-md border border-border bg-background", toneRing[tone], className), children: [
/* @__PURE__ */ jsxs(
"button",
{
type: "button",
onClick: toggle,
"aria-expanded": open,
className: cn(
"w-full flex items-center gap-2 px-density-3 py-density-2 text-left",
"hover:bg-accent/50 transition-colors",
headerClassName
),
children: [
/* @__PURE__ */ jsx(
Icon,
{
name: open ? "codicon:chevron-down" : "codicon:chevron-right",
className: "text-muted-foreground text-xs"
}
),
icon && /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-base" }),
/* @__PURE__ */ jsx("span", { className: "font-medium text-sm flex-1 truncate", children: title }),
summary && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: summary })
]
}
),
open && /* @__PURE__ */ jsx("div", { className: cn("px-density-3 py-density-2 border-t border-border", bodyClassName), children })
] });
}
function DetailEmptyState({ icon, label, description, className }) {
return /* @__PURE__ */ jsxs("div", { className: cn("p-density-6 text-center text-muted-foreground", className), children: [
icon && /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-3xl mb-density-2" }),
/* @__PURE__ */ jsx("p", { className: "text-sm", children: label }),
description && /* @__PURE__ */ jsx("p", { className: "text-xs mt-density-1 opacity-70", children: description })
] });
}
export {
DetailEmptyState,
Section
};
//# sourceMappingURL=Section.js.map