@aortl/admin-react 0.6.0 → 0.7.0

package/dist/PropertyList.d.ts

@@ -0,0 +1,44 @@
+import { ComponentProps, ReactNode } from 'react';
+export interface PropertyListProps extends Omit<ComponentProps<"section">, "title"> {
+    striped?: boolean;
+    /** Reveals a copy button on every item's value cell. Per-item `copyable`
+     *  on `<PropertyList.Item>` opts in for individual rows. */
+    copyable?: boolean;
+    /** Collapses the whole section when every item rendered the auto em-dash
+     *  fallback for an empty value. */
+    hideIfAllEmpty?: boolean;
+    /** Optional section heading rendered as `<h3 class="property-list-title">`
+     *  above the items grid. */
+    title?: ReactNode;
+}
+declare function PropertyListRoot({ striped, copyable, hideIfAllEmpty, title, className, children, ...rest }: PropertyListProps): import("react/jsx-runtime").JSX.Element;
+export interface PropertyListItemProps extends Omit<ComponentProps<"dd">, "title" | "label"> {
+    label?: ReactNode;
+    value?: ReactNode;
+    /** Right-aligns the value cell + applies `tabular-nums`. Mirrors `Table.Cell.numeric`. */
+    numeric?: boolean;
+    /** Opts this row into the copy affordance regardless of list-level `copyable`. */
+    copyable?: boolean;
+    /** Overrides the text the copy button writes to the clipboard. */
+    copyValue?: string;
+}
+declare function PropertyListItem({ label, value, numeric, copyable, copyValue, children, ...rest }: PropertyListItemProps): import("react/jsx-runtime").JSX.Element;
+export type PropertyListLabelProps = ComponentProps<"dt">;
+declare function PropertyListLabel({ className, ...rest }: PropertyListLabelProps): import("react/jsx-runtime").JSX.Element;
+export interface PropertyListValueProps extends ComponentProps<"dd"> {
+    numeric?: boolean;
+    copyable?: boolean;
+    /** Marks the cell as carrying an auto-rendered em-dash. The list-level
+     *  `hideIfAllEmpty` collapses the section when every value is empty. */
+    empty?: boolean;
+    /** Overrides the text the copy button writes to the clipboard. */
+    copyValue?: string;
+}
+declare function PropertyListValue({ numeric, copyable, empty, copyValue, className, children, ...rest }: PropertyListValueProps): import("react/jsx-runtime").JSX.Element;
+export declare const PropertyList: typeof PropertyListRoot & {
+    Item: typeof PropertyListItem;
+    Label: typeof PropertyListLabel;
+    Value: typeof PropertyListValue;
+};
+export {};
+//# sourceMappingURL=PropertyList.d.ts.map

package/dist/PropertyList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyList.d.ts","sourceRoot":"","sources":["../src/PropertyList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA+C9E,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IACjF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;gEAC4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;uCACmC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;gCAC4B;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,iBAAS,gBAAgB,CAAC,EACxB,OAAO,EACP,QAAQ,EACR,cAAc,EACd,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAoBnB;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAWD,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,qBAAqB,2CAmBvB;AAED,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;AAC1D,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,sBAAsB,2CAExE;AAED,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;4EACwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,iBAAiB,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,sBAAsB,2CA2CxB;AAED,eAAO,MAAM,YAAY;;;;CAIvB,CAAC"}

package/dist/admin.scoped.css

@@ -277,6 +277,7 @@
     --text-xl--line-height: calc(1.75 / 1.25);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --font-weight-bold: 700;
     --tracking-wide: 0.025em;
     --leading-tight: 1.25;
     --leading-snug: 1.375;
@@ -1165,6 +1166,101 @@
     -webkit-user-select: none;
     user-select: none;
   }
+:scope._ao-property-list, :scope ._ao-property-list {
+    display: flex;
+    flex-direction: column;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-text);
+  }
+:scope._ao-property-list-title, :scope ._ao-property-list-title {
+    margin-bottom: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-text);
+  }
+:scope._ao-property-list-items, :scope ._ao-property-list-items {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+  }
+:scope._ao-property-list-label, :scope ._ao-property-list-label, :scope._ao-property-list-value, :scope ._ao-property-list-value {
+    display: flex;
+    align-items: center;
+    padding: 0.375rem 0.75rem;
+    min-height: 2rem;
+  }
+:scope._ao-property-list-label, :scope ._ao-property-list-label {
+    color: var(--color-text-muted);
+  }
+:scope._ao-property-list-value, :scope ._ao-property-list-value {
+    gap: 0.5rem;
+    min-width: 0;
+  }
+:scope._ao-property-list-value-numeric, :scope ._ao-property-list-value-numeric {
+    justify-content: flex-end;
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
+:scope._ao-property-list-striped dt:nth-of-type(2n + 2), :scope ._ao-property-list-striped dt:nth-of-type(2n + 2), :scope._ao-property-list-striped dd:nth-of-type(2n + 2), :scope ._ao-property-list-striped dd:nth-of-type(2n + 2) {
+    background-color: var(--color-surface-muted);
+  }
+:scope._ao-property-list-hide-if-empty:not(:has(._ao-property-list-value:not(._ao-property-list-value-empty))), :scope ._ao-property-list-hide-if-empty:not(:has(._ao-property-list-value:not(._ao-property-list-value-empty))) {
+    display: none;
+  }
+:scope._ao-property-list-copy, :scope ._ao-property-list-copy {
+    margin-left: auto;
+    display: inline-flex;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.25rem;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    color: var(--color-text-muted);
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-text);
+      }
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+    &:focus-visible {
+      outline-color: var(--color-primary);
+    }
+    display: none;
+    flex-shrink: 0;
+    padding: 0.125rem;
+    transition: opacity 100ms ease, color 100ms ease;
+  }
+:scope._ao-property-list-copyable ._ao-property-list-copy, :scope ._ao-property-list-copyable ._ao-property-list-copy, :scope._ao-property-list-value-copyable ._ao-property-list-copy, :scope ._ao-property-list-value-copyable ._ao-property-list-copy {
+    display: inline-flex;
+    opacity: 0;
+    pointer-events: none;
+  }
+:scope._ao-property-list-copyable ._ao-property-list-label:hover + ._ao-property-list-value ._ao-property-list-copy, :scope ._ao-property-list-copyable ._ao-property-list-label:hover + ._ao-property-list-value ._ao-property-list-copy, :scope._ao-property-list-copyable ._ao-property-list-value:hover ._ao-property-list-copy, :scope ._ao-property-list-copyable ._ao-property-list-value:hover ._ao-property-list-copy, :scope._ao-property-list-label:has(+ ._ao-property-list-value-copyable):hover + ._ao-property-list-value ._ao-property-list-copy, :scope ._ao-property-list-label:has(+ ._ao-property-list-value-copyable):hover + ._ao-property-list-value ._ao-property-list-copy, :scope._ao-property-list-value-copyable:hover ._ao-property-list-copy, :scope ._ao-property-list-value-copyable:hover ._ao-property-list-copy, :scope._ao-property-list-copy:focus-visible, :scope ._ao-property-list-copy:focus-visible, :scope._ao-property-list-copy[data-copied], :scope ._ao-property-list-copy[data-copied] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+:scope._ao-property-list-copy ._ao-property-list-copy-icon-copied, :scope ._ao-property-list-copy ._ao-property-list-copy-icon-copied {
+    display: none;
+  }
+:scope._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon, :scope ._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon {
+    display: none;
+  }
+:scope._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon-copied, :scope ._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon-copied {
+    display: inline-flex;
+  }
+:scope._ao-property-list-copy[data-copied], :scope ._ao-property-list-copy[data-copied] {
+    color: var(--color-success);
+  }
 :scope._ao-btn, :scope ._ao-btn {
     display: inline-flex;
     cursor: pointer;

package/dist/index.cjs

@@ -1167,6 +1167,117 @@ var Tooltip = Object.assign(TooltipShorthand, {
 	Popup: TooltipPopup
 });
 //#endregion
+//#region src/PropertyList.tsx
+function CopyGlyph({ className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12l5 5l10 -10" })
+	});
+}
+function PropertyListRoot({ striped, copyable, hideIfAllEmpty, title, className, children, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("h3", {
+			className: cn("property-list-title", void 0),
+			children: title
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+	const empty = isEmptyValue(value);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PropertyListLabel, { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PropertyListValue, {
+		numeric,
+		copyable,
+		empty,
+		copyValue: copyValue ?? (typeof value === "string" ? value : void 0),
+		...rest,
+		children: empty ? "—" : value
+	})] });
+}
+function PropertyListLabel({ className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+		className: cn("property-list-label", className),
+		...rest
+	});
+}
+function PropertyListValue({ numeric, copyable, empty, copyValue, className, children, ...rest }) {
+	const ddRef = (0, react.useRef)(null);
+	const [copied, setCopied] = (0, react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			"aria-label": "Copy",
+			className: cn("property-list-copy", void 0),
+			onClick: handleCopy,
+			"data-copied": copied ? "true" : void 0,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyGlyph, { className: cn("property-list-copy-icon", void 0) }), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("table", {
@@ -1417,6 +1528,7 @@ exports.Menu = Menu;
 exports.Navbar = Navbar;
 exports.Pagination = Pagination;
 exports.Progress = Progress;
+exports.PropertyList = PropertyList;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.Select = Select;