@aortl/admin-react 0.15.1 → 0.16.0

package/dist/index.cjs

@@ -158,7 +158,7 @@ var AppShellContext = (0, react.createContext)(null);
 function useAppShell() {
 	return (0, react.useContext)(AppShellContext);
 }
-function AppShellRoot({ hasSidebar = false, hasFooter = false, mobileDrawerOpen, defaultMobileDrawerOpen = false, onMobileDrawerOpenChange, systemAccent, className, style, children, ...rest }) {
+function AppShellRoot({ hasSidebar = false, mobileDrawerOpen, defaultMobileDrawerOpen = false, onMobileDrawerOpenChange, systemAccent, className, style, children, ...rest }) {
 	const [uncontrolledOpen, setUncontrolledOpen] = (0, react.useState)(defaultMobileDrawerOpen);
 	const isControlled = mobileDrawerOpen !== void 0;
 	const open = isControlled ? mobileDrawerOpen : uncontrolledOpen;
@@ -182,11 +182,7 @@ function AppShellRoot({ hasSidebar = false, hasFooter = false, mobileDrawerOpen,
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppShellContext.Provider, {
 		value,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: cn([
-				"app-shell",
-				hasSidebar && "app-shell-with-sidebar",
-				hasFooter && "app-shell-with-footer"
-			], className),
+			className: cn(["app-shell", hasSidebar && "app-shell-with-sidebar"], className),
 			style: rootStyle,
 			...rest,
 			children
@@ -210,7 +206,7 @@ function Badge({ variant = "neutral", size = "md", icon, className, children, ..
 			size !== "md" && `badge-${size}`
 		], className),
 		...rest,
-		children: [renderIcon(icon, size === "sm" ? 10 : 12), children]
+		children: [renderIcon(icon), children]
 	});
 }
 //#endregion
@@ -624,7 +620,7 @@ function InputGroupAddon({ className, ...rest }) {
 var InputGroup = Object.assign(InputGroupRoot, { Addon: InputGroupAddon });
 //#endregion
 //#region src/Indicator.tsx
-function Indicator({ label, variant = "neutral", size = "sm", icon, placement = "top-end", offset, className, "aria-label": ariaLabel, children }) {
+function Indicator({ label, variant = "neutral", size = "sm", icon, placement = "top-end", offset, className, "aria-label": ariaLabel, style: styleProp, children, ...rest }) {
 	const [vertical, horizontal] = placement.split("-");
 	const placementClasses = [
 		"indicator-item",
@@ -632,10 +628,14 @@ function Indicator({ label, variant = "neutral", size = "sm", icon, placement =
 		horizontal !== "end" && `indicator-${horizontal}`
 	];
 	const hasContent = label !== void 0 || icon !== void 0;
-	const style = offset !== void 0 ? { "--indicator-offset": `${offset}px` } : void 0;
+	const style = offset !== void 0 ? {
+		...styleProp,
+		"--indicator-offset": `${offset}px`
+	} : styleProp;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cn("indicator", className),
 		style,
+		...rest,
 		children: [hasContent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
 			className: cn(placementClasses, void 0),
 			variant,
@@ -909,13 +909,13 @@ function RadioGroup({ orientation = "horizontal", className, ...rest }) {
 }
 //#endregion
 //#region src/Progress.tsx
-function Progress({ value, max = 100, variant = "primary", size = "md", className, ...rest }) {
+function Progress({ value, max = 100, variant = "info", size = "md", className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("progress", {
 		value,
 		max,
 		className: cn([
 			"progress",
-			variant !== "primary" && `progress-${variant}`,
+			variant !== "info" && `progress-${variant}`,
 			size !== "md" && `progress-${size}`
 		], className),
 		...rest
@@ -1166,7 +1166,7 @@ var Card = Object.assign(CardRoot, {
 * label/value tables, use `<PropertyList>`.
 */
 function StatCard({ variant = "default", label, value, detail, icon, compact, bordered, className, children, ...rest }) {
-	const hasLabel = icon !== void 0 || label !== void 0;
+	const hasLabel = label !== void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cn([
 			"card",
@@ -1271,7 +1271,7 @@ function mergeStyle(vars, incoming) {
 * The bare bar-chart grid — no bars. Compose `<BarChart.Bar>` children by hand
 * (e.g. to interleave a reference line). Sets `role="img"`; pass `aria-label`.
 */
-function BarChartContainer({ orientation = "horizontal", size = "md", showValues, inline, variant = "primary", className, ...rest }) {
+function BarChartContainer({ orientation = "horizontal", size = "md", showValues, inline, variant = "info", className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role: "img",
 		className: cn([
@@ -1281,7 +1281,7 @@ function BarChartContainer({ orientation = "horizontal", size = "md", showValues
 			size !== "md" && `chart-${size}`,
 			showValues && "chart-values",
 			inline && "chart-inline",
-			variant !== "primary" && `chart-${variant}`
+			variant !== "info" && `chart-${variant}`
 		], className),
 		...rest
 	});
@@ -1328,7 +1328,7 @@ function Bar({ datum, value, label, color, className, style, ...rest }) {
 * Horizontal by default; pass `orientation="vertical"` for columns. For
 * hand-composed layouts use `<BarChart.Container>` + `<BarChart.Bar>`.
 */
-function BarChartRoot({ data, max, orientation = "horizontal", size = "md", showValues, inline, variant = "primary", style, "aria-label": ariaLabel, ...rest }) {
+function BarChartRoot({ data, max, orientation = "horizontal", size = "md", showValues, inline, variant = "info", style, "aria-label": ariaLabel, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarChartContainer, {
 		orientation,
 		size,
@@ -1491,10 +1491,15 @@ function DefaultCloseIcon() {
 * Use this when the default `<Dialog>` layout doesn't fit (custom header,
 * media block, multi-step content).
 */
-function DialogContainer({ open, onOpenChange, size = "md", closedby = "any", className, children, ...rest }) {
+function DialogContainer({ open, onOpenChange, size = "md", closedby = "any", className, children, ref: consumerRef, ...rest }) {
 	const ref = (0, react.useRef)(null);
 	const onOpenChangeRef = (0, react.useRef)(onOpenChange);
 	onOpenChangeRef.current = onOpenChange;
+	const setRef = (0, react.useCallback)((node) => {
+		ref.current = node;
+		if (typeof consumerRef === "function") consumerRef(node);
+		else if (consumerRef) consumerRef.current = node;
+	}, [consumerRef]);
 	(0, react.useEffect)(() => {
 		const el = ref.current;
 		if (!el || open === void 0) return;
@@ -1513,7 +1518,7 @@ function DialogContainer({ open, onOpenChange, size = "md", closedby = "any", cl
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalContainerContext.Provider, {
 			value: ref,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dialog", {
-				ref,
+				ref: setRef,
 				className: cn(["dialog", size !== "md" && `dialog-${size}`], className),
 				closedby,
 				...rest,
@@ -1717,14 +1722,23 @@ function MenuPopup({ className, role = "menu", ...rest }) {
 function MenuItem(props) {
 	const ref = (0, react.useRef)(null);
 	const hotkey = props.hotkey;
-	const { ariaKeyShortcuts, primaryChord } = useHotkey(hotkey, () => ref.current?.click(), { enabled: !("disabled" in props && props.disabled) });
+	const ariaDisabled = props["aria-disabled"];
+	const isDisabled = "disabled" in props && props.disabled === true || ariaDisabled === true || ariaDisabled === "true";
+	const { ariaKeyShortcuts, primaryChord } = useHotkey(hotkey, () => ref.current?.click(), { enabled: !isDisabled });
 	if (props.href !== void 0) {
-		const { className, role = "menuitem", icon, children, hotkey: _hk, ...rest } = props;
+		const { className, role = "menuitem", icon, children, hotkey: _hk, onClick, ...rest } = props;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 			ref,
 			role,
 			"aria-keyshortcuts": ariaKeyShortcuts,
 			className: cn("menu-item", className),
+			onClick: (event) => {
+				if (isDisabled) {
+					event.preventDefault();
+					return;
+				}
+				onClick?.(event);
+			},
 			...rest,
 			children: [
 				renderIcon(icon),
@@ -1890,6 +1904,28 @@ function CodeBlock({ nowrap, className, ...rest }) {
 	});
 }
 //#endregion
+//#region src/Prose.tsx
+/**
+* A styled container for HTML the system can't annotate with its semantic class
+* names — backend-rendered markdown, CMS bodies, model output. Styles its
+* descendant flow elements (`p`, `ul`, `a`, `code`, `blockquote`, `table`, …)
+* from the design tokens, scoped to this wrapper so the rest of the admin UI
+* keeps the global element reset.
+*
+* ```tsx
+* <Prose dangerouslySetInnerHTML={{ __html: renderedMarkdown }} />
+* ```
+*
+* Accepts children too — `<Prose><h2>…</h2><p>…</p></Prose>` — for content
+* authored directly in JSX.
+*/
+function Prose({ className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("prose", className),
+		...rest
+	});
+}
+//#endregion
 //#region src/Tooltip.tsx
 function TooltipProvider(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Provider, { ...props });
@@ -2306,6 +2342,7 @@ exports.Navbar = Navbar;
 exports.Pagination = Pagination;
 exports.Progress = Progress;
 exports.PropertyList = PropertyList;
+exports.Prose = Prose;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.SERIES = SERIES;