@espressif/dashboard-ui-components 1.9.1 → 1.11.0

package/dist/components/calendar/calendar.js

@@ -0,0 +1,105 @@
+import { cn } from "../../utils/cn.js";
+import { buttonVariants } from "../../core/button.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+//#region src/components/calendar/calendar.tsx
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
+	const defaultClassNames = getDefaultClassNames();
+	return /* @__PURE__ */ jsx(DayPicker, {
+		showOutsideDays,
+		className: cn("group/calendar bg-background p-3 [--cell-size:2rem]", className),
+		captionLayout,
+		formatters: {
+			formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+			...formatters
+		},
+		classNames: {
+			root: cn("w-fit", defaultClassNames.root),
+			months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+			month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+			nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+			button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-[var(--cell-size)] p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
+			button_next: cn(buttonVariants({ variant: buttonVariant }), "size-[var(--cell-size)] p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
+			month_caption: cn("flex h-[var(--cell-size)] w-full items-center justify-center px-[var(--cell-size)]", defaultClassNames.month_caption),
+			dropdowns: cn("flex h-[var(--cell-size)] w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
+			dropdown_root: cn("relative rounded-md has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50", defaultClassNames.dropdown_root),
+			dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+			caption_label: cn("font-medium select-none", captionLayout === "label" ? "text-sm" : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
+			table: "w-full border-collapse",
+			weekdays: cn("flex", defaultClassNames.weekdays),
+			weekday: cn("flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
+			week: cn("mt-2 flex w-full", defaultClassNames.week),
+			week_number_header: cn("w-[var(--cell-size)] select-none", defaultClassNames.week_number_header),
+			week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
+			day: cn("group/day relative aspect-square h-full w-full p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md", defaultClassNames.day),
+			range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
+			range_middle: cn("rounded-none", defaultClassNames.range_middle),
+			range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+			today: cn("rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
+			outside: cn("text-disabled aria-selected:text-muted-foreground", defaultClassNames.outside),
+			disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+			hidden: cn("invisible", defaultClassNames.hidden),
+			...classNames
+		},
+		components: {
+			Root: ({ className: rootClassName, rootRef, ...rootProps }) => {
+				return /* @__PURE__ */ jsx("div", {
+					"data-slot": "calendar",
+					ref: rootRef,
+					className: cn(rootClassName),
+					...rootProps
+				});
+			},
+			Chevron: ({ className: chevronClassName, orientation, ...chevronProps }) => {
+				if (orientation === "left") return /* @__PURE__ */ jsx(ChevronLeftIcon, {
+					className: cn("size-4", chevronClassName),
+					...chevronProps
+				});
+				if (orientation === "right") return /* @__PURE__ */ jsx(ChevronRightIcon, {
+					className: cn("size-4", chevronClassName),
+					...chevronProps
+				});
+				return /* @__PURE__ */ jsx(ChevronDownIcon, {
+					className: cn("size-4", chevronClassName),
+					...chevronProps
+				});
+			},
+			DayButton: CalendarDayButton,
+			WeekNumber: ({ children, ...weekProps }) => {
+				return /* @__PURE__ */ jsx("td", {
+					...weekProps,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex size-[var(--cell-size)] items-center justify-center text-center",
+						children
+					})
+				});
+			},
+			...components
+		},
+		...props
+	});
+}
+function CalendarDayButton({ className: dayClassName, day, modifiers, ...props }) {
+	const ref = React$1.useRef(null);
+	React$1.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		"data-day": day.date.toLocaleDateString(),
+		"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+		"data-range-start": modifiers.range_start,
+		"data-range-end": modifiers.range_end,
+		"data-range-middle": modifiers.range_middle,
+		className: cn(buttonVariants({
+			variant: "ghost",
+			size: "icon"
+		}), "flex aspect-square size-auto w-full min-w-[var(--cell-size)] flex-col gap-1 leading-none font-normal", "group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50", "data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground", "data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground", "data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground", "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground", "[&>span]:text-xs [&>span]:opacity-70", dayClassName),
+		...props
+	});
+}
+Calendar.displayName = "Calendar";
+//#endregion
+export { Calendar, CalendarDayButton };

package/dist/components/cards/animated-card/animated-card-animations.js

@@ -0,0 +1,57 @@
+import access_denied_default from "../../lottie-animations/animation-data/access-denied.js";
+import active_default from "../../lottie-animations/animation-data/active.js";
+import bar_chart_default from "../../lottie-animations/animation-data/bar-chart.js";
+import chart_loading_default from "../../lottie-animations/animation-data/chart-loading.js";
+import cloud_download_default from "../../lottie-animations/animation-data/cloud-download.js";
+import cloud_sync_default from "../../lottie-animations/animation-data/cloud-sync.js";
+import coud_upload_default from "../../lottie-animations/animation-data/coud-upload.js";
+import cross_throb_default from "../../lottie-animations/animation-data/cross-throb.js";
+import dashboard_loading_default from "../../lottie-animations/animation-data/dashboard-loading.js";
+import error_default from "../../lottie-animations/animation-data/error.js";
+import error_spread_out_default from "../../lottie-animations/animation-data/error-spread-out.js";
+import green_success_default from "../../lottie-animations/animation-data/green-success.js";
+import inactive_default from "../../lottie-animations/animation-data/inactive.js";
+import light_default from "../../lottie-animations/animation-data/light.js";
+import lock_default from "../../lottie-animations/animation-data/lock.js";
+import lock2_default from "../../lottie-animations/animation-data/lock2.js";
+import locked_default from "../../lottie-animations/animation-data/locked.js";
+import search_error_default from "../../lottie-animations/animation-data/search-error.js";
+import security_default from "../../lottie-animations/animation-data/security.js";
+import success_default from "../../lottie-animations/animation-data/success.js";
+import warning_default from "../../lottie-animations/animation-data/warning.js";
+//#region src/components/cards/animated-card/animated-card-animations.ts
+/**
+* Central registry for AnimatedCard Lottie assets.
+*
+* Adding a new animation:
+* 1. Drop `my-animation.json` in `src/components/lottie-animations/animation-data/` (kebab-case filename).
+* 2. Import it below and add one entry: `myAnimation: myAnimationJson,` (camelCase key).
+* 3. `AnimatedCardType` updates automatically.
+*/
+var animatedCardAnimations = {
+	accessDenied: access_denied_default,
+	active: active_default,
+	barChart: bar_chart_default,
+	chartLoading: chart_loading_default,
+	cloudDownload: cloud_download_default,
+	cloudSync: cloud_sync_default,
+	coudUpload: coud_upload_default,
+	crossThrob: cross_throb_default,
+	dashboardLoading: dashboard_loading_default,
+	error: error_default,
+	errorSpreadOut: error_spread_out_default,
+	greenSuccess: green_success_default,
+	inactive: inactive_default,
+	light: light_default,
+	lock: lock_default,
+	lock2: lock2_default,
+	locked: locked_default,
+	searchError: search_error_default,
+	security: security_default,
+	success: success_default,
+	warning: warning_default
+};
+/** All valid `type` values (same keys as `animatedCardAnimations`), for selects and tests. */
+var animatedCardTypeKeys = Object.keys(animatedCardAnimations);
+//#endregion
+export { animatedCardAnimations, animatedCardTypeKeys };

package/dist/components/cards/animated-card/animated-card.js

@@ -0,0 +1,42 @@
+import { cn } from "../../../utils/cn.js";
+import { Card, CardContent } from "../../../core/card.js";
+import { LottieAnimationContainer } from "../../lottie-animation-container/lottie-animation-container.js";
+import { animatedCardAnimations } from "./animated-card-animations.js";
+import { AnimatedRainmakerLogo } from "../../../common/animated-rainmaker-logo/animated-rainmaker-logo.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/cards/animated-card/animated-card.tsx
+var cardBaseClassName = "w-auto w-full";
+var cardTransparentClassName = "border-0 bg-transparent shadow-none";
+var contentDefaultClassName = "flex flex-col items-center gap-5 py-8 text-center";
+function AnimatedCard({ type, iconSize, transparent = true, children, actions, className, contentClassName }) {
+	const animationData = type === "rainmaker-logo" ? null : animatedCardAnimations[type];
+	return /* @__PURE__ */ jsx(Card, {
+		className: cn(cardBaseClassName, transparent && cardTransparentClassName, className),
+		children: /* @__PURE__ */ jsxs(CardContent, {
+			className: cn(contentDefaultClassName, contentClassName),
+			children: [
+				type === "rainmaker-logo" ? /* @__PURE__ */ jsx(AnimatedRainmakerLogo, { style: {
+					width: iconSize,
+					height: iconSize
+				} }) : animationData != null ? /* @__PURE__ */ jsx(LottieAnimationContainer, {
+					animationData,
+					height: iconSize,
+					width: iconSize
+				}) : null,
+				children != null && /* @__PURE__ */ jsx("div", {
+					className: "text-base text-foreground w-full",
+					children: typeof children === "string" ? /* @__PURE__ */ jsx("p", {
+						className: "text-center font-medium",
+						children
+					}) : children
+				}),
+				actions != null && /* @__PURE__ */ jsx("div", {
+					className: "w-full",
+					children: actions
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { AnimatedCard };

package/dist/components/cards/basic-details-card.js

@@ -0,0 +1,46 @@
+import { cn } from "../../utils/cn.js";
+import { Avatar, AvatarFallback } from "../../core/avatar.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/cards/basic-details-card.tsx
+var content = (icon, primaryText, secondaryText) => /* @__PURE__ */ jsxs(Fragment, { children: [icon != null && /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, {
+	className: "text-xs flex items-center justify-center gap-1 border",
+	children: icon
+}) }), /* @__PURE__ */ jsxs("div", {
+	className: "flex min-w-0 flex-1 flex-col gap-1",
+	children: [primaryText != null && /* @__PURE__ */ jsx("span", {
+		className: "text-sm font-semibold",
+		children: primaryText
+	}), secondaryText != null && /* @__PURE__ */ jsx("span", {
+		className: "truncate text-sm text-muted-foreground",
+		children: secondaryText
+	})]
+})] });
+function BasicDetailsCard({ icon, primaryText, secondaryText, action, className, onClick }) {
+	const rootClassName = cn("flex items-center gap-4", className);
+	if (onClick != null) return /* @__PURE__ */ jsxs("div", {
+		role: "button",
+		tabIndex: 0,
+		className: cn(rootClassName, "cursor-pointer ring-offset-background transition-all duration-300 hover:ring-2 hover:ring-offset-2 hover:ring-primary/90 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary/90"),
+		onClick,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				onClick(e);
+			}
+		},
+		children: [content(icon, primaryText, secondaryText), action != null && /* @__PURE__ */ jsx("div", {
+			className: "shrink-0",
+			onClick: (e) => e.stopPropagation(),
+			children: action
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: rootClassName,
+		children: [content(icon, primaryText, secondaryText), action != null && /* @__PURE__ */ jsx("div", {
+			className: "shrink-0",
+			children: action
+		})]
+	});
+}
+//#endregion
+export { BasicDetailsCard };

package/dist/components/cards/collapsible-card.js

@@ -0,0 +1,48 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../core/collapsible.js";
+import { Card, CardHeader } from "../../core/card.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from "lucide-react";
+//#region src/components/cards/collapsible-card.tsx
+/**
+* Card with a clickable header that toggles a body region.
+*
+* The body is the `CollapsibleContent` child. Its mount lifecycle is the
+* Radix Collapsible default: unmounted while closed, mounted on expand,
+* unmounted again on collapse, remounted on the next expand. See the JSDoc on
+* `CollapsibleContent` in `src/core/collapsible.tsx` for the full rules and
+* the JSX eager-evaluation caveat.
+*/
+function CollapsibleCard({ children, className, defaultOpen = false }) {
+	const childArray = React$1.Children.toArray(children);
+	const contentChild = childArray.find((child) => React$1.isValidElement(child) && child.type === CollapsibleContent);
+	const titleChild = childArray.find((child) => React$1.isValidElement(child) && child.type !== CollapsibleContent);
+	return /* @__PURE__ */ jsx(Card, {
+		className: cn("bg-transparent shadow-none rounded-md", className),
+		children: /* @__PURE__ */ jsxs(Collapsible, {
+			defaultOpen,
+			className: "group",
+			children: [/* @__PURE__ */ jsx(CardHeader, {
+				className: "p-3 border-b border-transparent group-data-[state=open]:border-border",
+				children: /* @__PURE__ */ jsx(CollapsibleTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "flex w-full min-w-0 items-center justify-between gap-2 rounded-md text-left outline-none ring-offset-background transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "min-w-0 flex-1 [&>div]:font-medium [&>div]:text-sm",
+							children: titleChild
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex h-4 w-4 shrink-0 items-center justify-center",
+							children: [/* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 group-data-[state=open]:hidden" }), /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4 shrink-0 group-data-[state=closed]:hidden" })]
+						})]
+					})
+				})
+			}), contentChild && React$1.cloneElement(contentChild, { className: cn("px-4 pb-6 pt-4", contentChild.props.className) })]
+		})
+	});
+}
+//#endregion
+export { CollapsibleCard };

package/dist/components/cards/no-data-card/no-data-card.js

@@ -0,0 +1,30 @@
+import { cn } from "../../../utils/cn.js";
+import { Card, CardContent } from "../../../core/card.js";
+import { Illustration } from "../../illustration/illustration.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/cards/no-data-card/no-data-card.tsx
+function NoDataCard({ illustration, hideIllustration = false, heading, description, action, className }) {
+	return /* @__PURE__ */ jsx(Card, {
+		className: cn("w-auto bg-transparent border-none shadow-none", className),
+		children: /* @__PURE__ */ jsxs(CardContent, {
+			className: "flex flex-col items-center gap-4 py-8 text-center",
+			children: [
+				!hideIllustration && /* @__PURE__ */ jsx("div", {
+					className: "flex w-full shrink-0 justify-center",
+					children: illustration ?? /* @__PURE__ */ jsx(Illustration, { type: "no-search-results" })
+				}),
+				heading != null && /* @__PURE__ */ jsx("div", {
+					className: "text-lg font-semibold",
+					children: heading
+				}),
+				description != null && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: description
+				}),
+				action != null && /* @__PURE__ */ jsx("div", { children: action })
+			]
+		})
+	});
+}
+//#endregion
+export { NoDataCard as default };

package/dist/components/cards/section-card.js

@@ -0,0 +1,265 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { isPresetColor } from "../../utils/color.js";
+import { resolveVariantStyles } from "../../utils/variant.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../core/collapsible.js";
+import { Card } from "../../core/card.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../core/animate-ui/components/animate/tooltip.js";
+import { Button } from "../button/button.js";
+import { VariantGradientUnderlay } from "../../utils/variant-gradient-underlay.js";
+import { Children, cloneElement, isValidElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from "lucide-react";
+//#region src/components/cards/section-card.tsx
+var sizeStyles = {
+	sm: {
+		pad: "p-3",
+		headerRowPadY: "py-3",
+		headerRowGapY: "gap-y-2",
+		headerTriggerPad: "-my-3 py-3 pl-3",
+		headerRightPad: "pl-3 pr-3",
+		gap: "gap-2",
+		primaryTypography: "text-xs font-semibold",
+		secondaryTypography: "text-xs",
+		primary: "text-xs font-semibold text-foreground",
+		secondary: "text-xs text-muted-foreground",
+		icon: "h-[18px] w-[18px] shrink-0",
+		chevron: "h-[18px] w-[18px]",
+		collapseTrigger: "h-[18px] w-[18px] min-h-[18px] min-w-[18px] !p-0 [&_svg]:!h-[18px] [&_svg]:!w-[18px] [&_svg]:!min-h-0 [&_svg]:!min-w-0"
+	},
+	default: {
+		pad: "p-4",
+		headerRowPadY: "py-4",
+		headerRowGapY: "gap-y-3",
+		headerTriggerPad: "-my-4 py-4 pl-4",
+		headerRightPad: "pl-3 pr-4",
+		gap: "gap-3",
+		primaryTypography: "text-sm font-semibold",
+		secondaryTypography: "text-sm",
+		primary: "text-sm font-semibold text-foreground",
+		secondary: "text-sm text-muted-foreground",
+		icon: "h-6 w-6 shrink-0",
+		chevron: "h-6 w-6",
+		collapseTrigger: "h-6 w-6 min-h-6 min-w-6 !p-0 [&_svg]:!h-6 [&_svg]:!w-6 [&_svg]:!min-h-0 [&_svg]:!min-w-0"
+	},
+	lg: {
+		pad: "p-6",
+		headerRowPadY: "py-6",
+		headerRowGapY: "gap-y-4",
+		headerTriggerPad: "-my-6 py-6 pl-6",
+		headerRightPad: "pl-3 pr-6",
+		gap: "gap-4",
+		primaryTypography: "text-base font-semibold",
+		secondaryTypography: "text-sm",
+		primary: "text-base font-semibold text-foreground",
+		secondary: "text-sm text-muted-foreground",
+		icon: "h-8 w-8 shrink-0",
+		chevron: "h-8 w-8",
+		collapseTrigger: "h-8 w-8 min-h-8 min-w-8 !p-0 [&_svg]:!h-8 [&_svg]:!w-8 [&_svg]:!min-h-0 [&_svg]:!min-w-0"
+	}
+};
+/** Merges size-based icon classes; size classes win over any `className` on the node. */
+function iconSizedForSection(icon, iconClass) {
+	if (icon == null) return null;
+	if (isValidElement(icon)) {
+		const el = icon;
+		const prev = el.props.className;
+		return cloneElement(el, { className: cn(prev, iconClass) });
+	}
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex items-center justify-center", iconClass),
+		children: icon
+	});
+}
+var HEADER_WRAP_ROW_CLASS = "flex-wrap";
+var HEADER_MAIN_BASIS_CLASS = "basis-48";
+var HEADER_RIGHT_CLASS = "ml-auto max-w-full shrink-0";
+var cardClassName = "rounded-lg border-border bg-card shadow-none overflow-hidden";
+function hasTooltipContent(content) {
+	if (content == null) return false;
+	if (typeof content === "string") return content.length > 0;
+	if (typeof content === "number") return true;
+	if (typeof content === "boolean") return false;
+	return true;
+}
+function hasRenderableContent(content) {
+	if (!hasTooltipContent(content)) return false;
+	return Children.count(content) > 0;
+}
+function TruncatedLineWithTooltip({ className, textStyle, tooltipContent, children }) {
+	const textRef = useRef(null);
+	const [isTruncated, setIsTruncated] = useState(false);
+	const measure = useCallback(() => {
+		const el = textRef.current;
+		if (!el) return;
+		setIsTruncated(el.scrollWidth > el.clientWidth + 1);
+	}, []);
+	useLayoutEffect(() => {
+		measure();
+	}, [
+		measure,
+		children,
+		tooltipContent
+	]);
+	useEffect(() => {
+		if (typeof ResizeObserver === "undefined") return;
+		const el = textRef.current;
+		const ro = new ResizeObserver(measure);
+		if (el) ro.observe(el);
+		return () => ro.disconnect();
+	}, [measure]);
+	const line = /* @__PURE__ */ jsx("span", {
+		ref: textRef,
+		className: cn("block min-w-0 truncate", className),
+		style: textStyle,
+		children
+	});
+	if (!(isTruncated && hasTooltipContent(tooltipContent))) return line;
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		side: "top",
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			className: "block min-w-0 w-full cursor-inherit text-left",
+			children: line
+		}), /* @__PURE__ */ jsx(TooltipContent, {
+			className: "max-w-sm",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "break-words",
+				children: tooltipContent
+			})
+		})]
+	});
+}
+function SectionCard({ icon, primaryText, secondaryText, truncateSecondaryText = true, actions, allowCollapse = true, hideCollapseIcon = false, defaultOpen = true, open: controlledOpen, size = "default", variant = "outline", color = "gray", children, className, style, fillHeight = false, onOpenChange }) {
+	const s = sizeStyles[size];
+	const resolvedColor = color;
+	const variantStyles = variant != null ? resolveVariantStyles(variant, resolvedColor) : null;
+	const collapseButtonColor = variantStyles != null && isPresetColor(resolvedColor) ? resolvedColor : "gray";
+	const primaryClass = variantStyles != null ? cn(s.primaryTypography, variantStyles.foreground) : s.primary;
+	const secondaryClass = variantStyles != null ? cn(s.secondaryTypography, variantStyles.description) : s.secondary;
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	useEffect(() => {
+		setUncontrolledOpen(defaultOpen);
+	}, [defaultOpen]);
+	const isOpenControlled = controlledOpen !== void 0;
+	const open = isOpenControlled ? controlledOpen : uncontrolledOpen;
+	const toggleLabel = typeof primaryText === "string" ? `Toggle ${primaryText}` : "Toggle section";
+	const hasPrimaryText = hasRenderableContent(primaryText);
+	const hasSecondaryText = hasRenderableContent(secondaryText);
+	const hasHeaderText = hasPrimaryText || hasSecondaryText;
+	const hasIcon = hasRenderableContent(icon);
+	const showCollapseIcon = allowCollapse && !hideCollapseIcon;
+	const hasHeaderRight = hasRenderableContent(actions) || showCollapseIcon;
+	const headerMainPad = hasHeaderRight ? cn(s.headerTriggerPad, HEADER_MAIN_BASIS_CLASS) : s.pad;
+	const headerRowClass = cn("flex min-w-0 items-center justify-between", hasHeaderRight && cn(HEADER_WRAP_ROW_CLASS, s.headerRowPadY, s.headerRowGapY));
+	const isHeaderRequired = hasIcon || hasHeaderText || hasHeaderRight;
+	const hasBody = hasRenderableContent(children);
+	const headerMain = /* @__PURE__ */ jsxs(Fragment$1, { children: [hasIcon && /* @__PURE__ */ jsx("div", {
+		className: "flex shrink-0 self-center items-center justify-center",
+		style: variantStyles?.foregroundStyle,
+		children: iconSizedForSection(icon, cn(s.icon, variantStyles?.foreground))
+	}), hasHeaderText && /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-1 flex-col gap-0.5",
+		children: [hasPrimaryText && /* @__PURE__ */ jsx("div", {
+			className: cn("break-words", primaryClass),
+			style: variantStyles?.foregroundStyle,
+			children: primaryText
+		}), hasSecondaryText && (truncateSecondaryText ? /* @__PURE__ */ jsx(TruncatedLineWithTooltip, {
+			className: secondaryClass,
+			textStyle: variantStyles?.descriptionStyle,
+			tooltipContent: secondaryText,
+			children: secondaryText
+		}) : /* @__PURE__ */ jsx("span", {
+			className: cn("block min-w-0 break-words", secondaryClass),
+			style: variantStyles?.descriptionStyle,
+			children: secondaryText
+		}))]
+	})] });
+	const chevronButton = /* @__PURE__ */ jsx(CollapsibleTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon",
+			color: collapseButtonColor,
+			className: s.collapseTrigger,
+			"aria-label": toggleLabel,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center justify-center",
+				children: [/* @__PURE__ */ jsx(ChevronDown, {
+					className: cn(s.chevron, "shrink-0", open && "hidden", variantStyles?.foreground),
+					style: variantStyles?.foregroundStyle,
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsx(ChevronUp, {
+					className: cn(s.chevron, "shrink-0", !open && "hidden", variantStyles?.foreground),
+					style: variantStyles?.foregroundStyle,
+					"aria-hidden": true
+				})]
+			})
+		})
+	});
+	const headerRight = hasHeaderRight ? /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2", HEADER_RIGHT_CLASS, s.headerRightPad),
+		children: [actions, showCollapseIcon ? chevronButton : null]
+	}) : null;
+	const header = allowCollapse ? /* @__PURE__ */ jsxs("div", {
+		className: headerRowClass,
+		children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn("section-card-header", "flex min-w-0 flex-1 items-center text-left rounded-md", headerMainPad, s.gap, "cursor-pointer outline-none transition-colors hover:bg-muted/50", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"),
+				"aria-label": toggleLabel,
+				children: headerMain
+			})
+		}), headerRight]
+	}) : /* @__PURE__ */ jsxs("div", {
+		className: headerRowClass,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("section-card-header", "flex min-w-0 flex-1 items-center", s.gap, headerMainPad),
+			children: headerMain
+		}), headerRight]
+	});
+	const body = hasBody ? /* @__PURE__ */ jsx("div", {
+		className: cn("section-card-body", isHeaderRequired && "border-t border-border", variant === "outline" && "dark:border-border/45", fillHeight && "flex min-h-0 flex-1 flex-col", s.pad),
+		children
+	}) : null;
+	const isGradientVariant = variant === "gradient";
+	const cardSurfaceClass = variantStyles != null ? cn("rounded-lg shadow-none overflow-hidden", fillHeight && "flex min-h-0 flex-col", variantStyles.container, isGradientVariant && "border-transparent", className) : cn(cardClassName, fillHeight && "flex min-h-0 flex-col", className);
+	const cardSurfaceStyle = variantStyles != null && isGradientVariant ? {
+		...variantStyles.containerStyle,
+		borderColor: "transparent",
+		...style
+	} : {
+		...variantStyles?.containerStyle,
+		...style
+	};
+	const gradientUnderlay = variantStyles?.gradientHoverLayers != null || variantStyles?.gradientHoverLayersInline != null || variantStyles?.silverShine === true || variantStyles?.silverBorder === true ? /* @__PURE__ */ jsx(VariantGradientUnderlay, {
+		layers: variantStyles?.gradientHoverLayers,
+		layersInline: variantStyles?.gradientHoverLayersInline,
+		silverShine: variantStyles?.silverShine,
+		silverBorder: variantStyles?.silverBorder
+	}) : null;
+	if (allowCollapse) return /* @__PURE__ */ jsxs(Card, {
+		className: cardSurfaceClass,
+		style: cardSurfaceStyle,
+		children: [gradientUnderlay, /* @__PURE__ */ jsxs(Collapsible, {
+			open,
+			onOpenChange: (next) => {
+				if (!isOpenControlled) setUncontrolledOpen(next);
+				onOpenChange?.(next);
+			},
+			children: [isHeaderRequired ? header : null, hasBody ? /* @__PURE__ */ jsx(CollapsibleContent, { children: body }) : null]
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cardSurfaceClass,
+		style: cardSurfaceStyle,
+		children: [
+			gradientUnderlay,
+			isHeaderRequired ? header : null,
+			body
+		]
+	});
+}
+//#endregion
+export { SectionCard };

package/dist/components/cards/simple-card.js

@@ -0,0 +1,24 @@
+import { cn } from "../../utils/cn.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../core/card.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/cards/simple-card.tsx
+var SimpleCard = React$1.forwardRef(({ noShadow, noBorder, transparent, title, description, children, className }, ref) => {
+	return /* @__PURE__ */ jsxs(Card, {
+		ref,
+		className: cn(noShadow && "shadow-none", noBorder && "border-0", transparent && "bg-transparent", className),
+		children: [(title || description) && /* @__PURE__ */ jsxs(CardHeader, {
+			className: "space-y-1",
+			children: [title && /* @__PURE__ */ jsx(CardTitle, {
+				className: "text-2xl",
+				children: title
+			}), description && /* @__PURE__ */ jsx(CardDescription, {
+				className: "text-sm tracking-normal",
+				children: description
+			})]
+		}), /* @__PURE__ */ jsx(CardContent, { children })]
+	});
+});
+SimpleCard.displayName = "SimpleCard";
+//#endregion
+export { SimpleCard };