@aortl/admin-react 0.5.2 → 0.7.0

package/dist/index.mjs

@@ -696,18 +696,18 @@ function CardContainer({ bordered, compact, className, ...rest }) {
 * an optional title (with icon), description, children, and actions. For
 * anything outside that shape, use `<Card.Container>` and compose by hand.
 */
-function CardRoot({ bordered, compact, icon, title, description, actions, className, children, ...rest }) {
-	const hasTitle = icon !== void 0 || title !== void 0;
+function CardRoot({ bordered, compact, icon, title, description, toolbar, actions, className, children, ...rest }) {
+	const titleEl = icon !== void 0 || title !== void 0 ? /* @__PURE__ */ jsx(CardTitle, {
+		icon,
+		children: title
+	}) : null;
 	return /* @__PURE__ */ jsx(CardContainer, {
 		bordered,
 		compact,
 		className,
 		...rest,
 		children: /* @__PURE__ */ jsxs(CardBody, { children: [
-			hasTitle ? /* @__PURE__ */ jsx(CardTitle, {
-				icon,
-				children: title
-			}) : null,
+			toolbar !== void 0 ? /* @__PURE__ */ jsxs(CardHeader, { children: [titleEl, /* @__PURE__ */ jsx(CardToolbar, { children: toolbar })] }) : titleEl,
 			description !== void 0 ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null,
 			children,
 			actions !== void 0 ? /* @__PURE__ */ jsx(CardActions, { children: actions }) : null
@@ -720,6 +720,18 @@ function CardBody({ className, ...rest }) {
 		...rest
 	});
 }
+function CardHeader({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("card-header", className),
+		...rest
+	});
+}
+function CardToolbar({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("card-toolbar", className),
+		...rest
+	});
+}
 function CardTitle({ icon, className, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("h3", {
 		className: cn("card-title", className),
@@ -742,6 +754,8 @@ function CardActions({ className, ...rest }) {
 var Card = Object.assign(CardRoot, {
 	Container: CardContainer,
 	Body: CardBody,
+	Header: CardHeader,
+	Toolbar: CardToolbar,
 	Title: CardTitle,
 	Description: CardDescription,
 	Actions: CardActions
@@ -1152,6 +1166,117 @@ var Tooltip = Object.assign(TooltipShorthand, {
 	Popup: TooltipPopup
 });
 //#endregion
+//#region src/PropertyList.tsx
+function CopyGlyph({ className }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "14",
+		height: "14",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className,
+		children: [/* @__PURE__ */ jsx("path", { d: "M7 7m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" }), /* @__PURE__ */ jsx("path", { d: "M15 7v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" })]
+	});
+}
+function CheckGlyph({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "14",
+		height: "14",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className,
+		children: /* @__PURE__ */ jsx("path", { d: "M5 12l5 5l10 -10" })
+	});
+}
+function PropertyListRoot({ striped, copyable, hideIfAllEmpty, title, className, children, ...rest }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn([
+			"property-list",
+			striped && "property-list-striped",
+			copyable && "property-list-copyable",
+			hideIfAllEmpty && "property-list-hide-if-empty"
+		], className),
+		...rest,
+		children: [title !== void 0 ? /* @__PURE__ */ jsx("h3", {
+			className: cn("property-list-title", void 0),
+			children: title
+		}) : null, /* @__PURE__ */ jsx("dl", {
+			className: cn("property-list-items", void 0),
+			children
+		})]
+	});
+}
+function isEmptyValue(value) {
+	if (value == null) return true;
+	if (typeof value === "string") return value.trim() === "";
+	return false;
+}
+function PropertyListItem({ label, value, numeric, copyable, copyValue, children, ...rest }) {
+	if (children !== void 0) return /* @__PURE__ */ jsx(Fragment, { children });
+	const empty = isEmptyValue(value);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PropertyListLabel, { children: label }), /* @__PURE__ */ jsx(PropertyListValue, {
+		numeric,
+		copyable,
+		empty,
+		copyValue: copyValue ?? (typeof value === "string" ? value : void 0),
+		...rest,
+		children: empty ? "—" : value
+	})] });
+}
+function PropertyListLabel({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("dt", {
+		className: cn("property-list-label", className),
+		...rest
+	});
+}
+function PropertyListValue({ numeric, copyable, empty, copyValue, className, children, ...rest }) {
+	const ddRef = useRef(null);
+	const [copied, setCopied] = useState(false);
+	async function handleCopy() {
+		const text = copyValue ?? ddRef.current?.textContent?.trim() ?? "";
+		if (!text) return;
+		try {
+			await navigator.clipboard.writeText(text);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 1200);
+		} catch {}
+	}
+	return /* @__PURE__ */ jsxs("dd", {
+		ref: ddRef,
+		className: cn([
+			"property-list-value",
+			numeric && "property-list-value-numeric",
+			copyable && "property-list-value-copyable",
+			empty && "property-list-value-empty"
+		], className),
+		...rest,
+		children: [children, /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-label": "Copy",
+			className: cn("property-list-copy", void 0),
+			onClick: handleCopy,
+			"data-copied": copied ? "true" : void 0,
+			children: [/* @__PURE__ */ jsx(CopyGlyph, { className: cn("property-list-copy-icon", void 0) }), /* @__PURE__ */ jsx(CheckGlyph, { className: cn("property-list-copy-icon-copied", void 0) })]
+		})]
+	});
+}
+var PropertyList = Object.assign(PropertyListRoot, {
+	Item: PropertyListItem,
+	Label: PropertyListLabel,
+	Value: PropertyListValue
+});
+//#endregion
 //#region src/Table.tsx
 function TableRoot({ striped, bordered, relaxed, sticky, className, ...rest }) {
 	return /* @__PURE__ */ jsx("table", {
@@ -1381,6 +1506,6 @@ var Sidebar = Object.assign(SidebarRoot, {
 	CollapseToggle: SidebarCollapseToggle
 });
 //#endregion
-export { Accordion, AdminRoot, Alert, AppShell, Badge, BrandTile, Breadcrumbs, Button, ButtonGroup, Card, Checkbox, Dialog, Field, FileInput, Footer, Input, InputGroup, Menu, Navbar, Pagination, Progress, Radio, RadioGroup, Select, Sidebar, Spinner, Switch, Table, Tabs, Textarea, Tooltip, getPaginationItems, useAppShell };
+export { Accordion, AdminRoot, Alert, AppShell, Badge, BrandTile, Breadcrumbs, Button, ButtonGroup, Card, Checkbox, Dialog, Field, FileInput, Footer, Input, InputGroup, Menu, Navbar, Pagination, Progress, PropertyList, Radio, RadioGroup, Select, Sidebar, Spinner, Switch, Table, Tabs, Textarea, Tooltip, getPaginationItems, useAppShell };
 
 //# sourceMappingURL=index.mjs.map