@aortl/admin-react 0.16.2 → 0.17.0

package/dist/index.cjs

@@ -2,6 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let clsx = require("clsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+let _base_ui_react_avatar = require("@base-ui/react/avatar");
 let _base_ui_react_button = require("@base-ui/react/button");
 let _base_ui_react_input = require("@base-ui/react/input");
 let _base_ui_react_field = require("@base-ui/react/field");
@@ -114,7 +115,7 @@ function renderIcon(icon, size = "1em") {
 }
 //#endregion
 //#region src/Alert.tsx
-function AlertRoot({ variant, icon, title, description, className, role, children, ...rest }) {
+function AlertRoot({ variant, icon, title, description, action, className, role, children, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		role: role ?? (variant === "danger" || variant === "warning" ? "alert" : "status"),
 		className: cn(["alert", `alert-${variant}`], className),
@@ -123,7 +124,8 @@ function AlertRoot({ variant, icon, title, description, className, role, childre
 			renderIcon(icon),
 			title !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertTitle, { children: title }) : null,
 			description !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDescription, { children: description }) : null,
-			children
+			children,
+			action !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertAction, { children: action }) : null
 		]
 	});
 }
@@ -139,9 +141,16 @@ function AlertDescription({ className, ...rest }) {
 		...rest
 	});
 }
+function AlertAction({ className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("alert-action", className),
+		...rest
+	});
+}
 var Alert = Object.assign(AlertRoot, {
 	Title: AlertTitle,
-	Description: AlertDescription
+	Description: AlertDescription,
+	Action: AlertAction
 });
 //#endregion
 //#region src/AppShell.tsx
@@ -189,25 +198,97 @@ function AppShellMain({ className, ...rest }) {
 var AppShell = Object.assign(AppShellRoot, { Main: AppShellMain });
 //#endregion
 //#region src/Badge.tsx
-function Badge({ variant = "neutral", size = "md", icon, className, children, ...rest }) {
+function RemoveIcon() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })]
+	});
+}
+function Badge({ variant = "neutral", size = "md", icon, soft = false, onRemove, removeLabel = "Remove", className, children, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: cn([
 			"badge",
 			variant !== "neutral" && `badge-${variant}`,
-			size !== "md" && `badge-${size}`
+			size !== "md" && `badge-${size}`,
+			soft && "badge-soft"
 		], className),
 		...rest,
-		children: [renderIcon(icon), children]
+		children: [
+			renderIcon(icon),
+			children,
+			onRemove ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: cn("badge-remove", void 0),
+				"aria-label": removeLabel,
+				onClick: onRemove,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RemoveIcon, {})
+			}) : null
+		]
 	});
 }
 //#endregion
 //#region src/BrandTile.tsx
-function BrandTile({ monogram, icon, className, children, ...rest }) {
+/**
+* Brand/system mark for the navbar — monogram, icon, or shop logo. Precedence
+* is `src` > `icon` > `monogram`. Monogram/icon tiles are `aria-hidden`; image
+* tiles expose `alt` to assistive tech instead.
+*/
+function BrandTile({ variant = "solid", size = "md", monogram, icon, src, alt = "", className, children, ...rest }) {
+	const classes = cn([
+		"brand-tile",
+		variant !== "solid" && `brand-tile-${variant}`,
+		size === "lg" && "brand-tile-lg"
+	], className);
+	if (src) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: classes,
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src,
+			alt
+		})
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: cn("brand-tile", className),
+		className: classes,
 		"aria-hidden": true,
 		...rest,
-		children: icon ? renderIcon(icon, 14) : children ?? monogram
+		children: icon ? renderIcon(icon) : children ?? monogram
+	});
+}
+//#endregion
+//#region src/Avatar.tsx
+/**
+* Image avatar with an initials fallback. Initials show until the image loads
+* (and again, React-only, if it errors); the vanilla CSS layers the `<img>`
+* over the initials instead.
+*/
+function Avatar({ src, alt, initials, size = "md", shape = "circle", className, children, ...rest }) {
+	const fallback = children ?? initials;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_avatar.Avatar.Root, {
+		className: cn([
+			"avatar",
+			size !== "md" && `avatar-${size}`,
+			shape === "square" && "avatar-square"
+		], className),
+		...rest,
+		children: [fallback !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_avatar.Avatar.Fallback, { children: fallback }) : null, src !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_avatar.Avatar.Image, {
+			src,
+			alt
+		}) : null]
+	});
+}
+/** Overlapping stack of avatars; later children paint on top. */
+function AvatarGroup({ className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("avatar-group", className),
+		...rest
 	});
 }
 //#endregion
@@ -535,8 +616,8 @@ var Breadcrumbs = Object.assign(BreadcrumbsRoot, {
 });
 //#endregion
 //#region src/Input.tsx
-function Input({ variant = "bordered", inputSize = "md", className, type = "text", ...rest }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_input.Input, {
+function Input({ variant = "bordered", inputSize = "md", icon, iconTrailing, className, type = "text", ...rest }) {
+	const input = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_input.Input, {
 		type,
 		className: cn([
 			"input",
@@ -545,6 +626,15 @@ function Input({ variant = "bordered", inputSize = "md", className, type = "text
 		], className),
 		...rest
 	});
+	if (icon == null && iconTrailing == null) return input;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: cn("input-icon", void 0),
+		children: [
+			renderIcon(icon),
+			input,
+			renderIcon(iconTrailing)
+		]
+	});
 }
 //#endregion
 //#region src/FileInput.tsx
@@ -627,6 +717,20 @@ function Link({ external, icon, iconTrailing, className, target, rel, children,
 	});
 }
 //#endregion
+//#region src/Separator.tsx
+/**
+* A styled `<hr>` (implicit `role="separator"`). Margins are zeroed — spacing
+* comes from the parent's gap or margin utilities.
+*/
+function Separator({ orientation = "horizontal", className, ...rest }) {
+	const vertical = orientation === "vertical";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {
+		className: cn(["separator", vertical && "separator-vertical"], className),
+		"aria-orientation": vertical ? "vertical" : void 0,
+		...rest
+	});
+}
+//#endregion
 //#region src/Pagination.tsx
 /** Pure (safe during render): previous, numbers/ellipses (`boundaryCount` at each end, `siblingCount` around `page`), next. */
 function getPaginationItems({ page, total, siblingCount = 1, boundaryCount = 1 }) {
@@ -1018,13 +1122,14 @@ function Container({ size = "md", compact, className, ...rest }) {
 * The bare `.card` container — no body, no title. Use this when you need to
 * compose the internals yourself (e.g. a media block above the body).
 */
-function CardContainer({ variant = "default", bordered, compact, className, ...rest }) {
+function CardContainer({ variant = "default", bordered, compact, scroll, className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: cn([
 			"card",
 			variant !== "default" && `card-${variant}`,
 			bordered && "card-bordered",
-			compact && "card-compact"
+			compact && "card-compact",
+			scroll && "card-scroll"
 		], className),
 		...rest
 	});
@@ -1034,23 +1139,29 @@ function CardContainer({ variant = "default", bordered, compact, className, ...r
 * an optional title (with icon), description, children, and actions. For
 * anything outside that shape, use `<Card.Container>` and compose by hand.
 */
-function CardRoot({ variant, bordered, compact, icon, title, description, toolbar, actions, className, children, ...rest }) {
+function CardRoot({ variant, bordered, compact, media, icon, title, description, toolbar, actions, className, children, ...rest }) {
 	const titleEl = icon !== void 0 || title !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardTitle, {
 		icon,
 		children: title
 	}) : null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardContainer, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardContainer, {
 		variant,
 		bordered,
 		compact,
 		className,
 		...rest,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardBody, { children: [
+		children: [media !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardMedia, { children: media }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardBody, { children: [
 			toolbar !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardHeader, { children: [titleEl, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardToolbar, { children: toolbar })] }) : titleEl,
 			description !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardDescription, { children: description }) : null,
 			children,
 			actions !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardActions, { children: actions }) : null
-		] })
+		] })]
+	});
+}
+function CardMedia({ className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("card-media", className),
+		...rest
 	});
 }
 function CardBody({ className, ...rest }) {
@@ -1092,6 +1203,7 @@ function CardActions({ className, ...rest }) {
 }
 var Card = Object.assign(CardRoot, {
 	Container: CardContainer,
+	Media: CardMedia,
 	Body: CardBody,
 	Header: CardHeader,
 	Toolbar: CardToolbar,
@@ -1989,6 +2101,7 @@ function TableBody({ className, ...rest }) {
 		...rest
 	});
 }
+/** Footer rows are semibold by default; the first row gets a strong top divider against the body. */
 function TableFoot({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tfoot", {
 		className,
@@ -2197,6 +2310,8 @@ exports.Accordion = Accordion;
 exports.AdminRoot = AdminRoot;
 exports.Alert = Alert;
 exports.AppShell = AppShell;
+exports.Avatar = Avatar;
+exports.AvatarGroup = AvatarGroup;
 exports.Badge = Badge;
 exports.BarChart = BarChart;
 exports.BrandTile = BrandTile;
@@ -2228,6 +2343,7 @@ exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.SERIES = SERIES;
 exports.Select = Select;
+exports.Separator = Separator;
 exports.Sidebar = Sidebar;
 exports.Spinner = Spinner;
 exports.StackedBar = StackedBar;