@aortl/admin-react 0.10.0 → 0.12.0

package/dist/index.cjs

@@ -100,7 +100,7 @@ function renderIcon(icon, size = "1em") {
 }
 //#endregion
 //#region src/Alert.tsx
-function AlertRoot({ variant = "info", icon, title, description, className, role, children, ...rest }) {
+function AlertRoot({ variant, icon, title, description, 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),
@@ -183,7 +183,7 @@ function Badge({ variant = "neutral", size = "md", icon, className, children, ..
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: cn([
 			"badge",
-			`badge-${variant}`,
+			variant !== "neutral" && `badge-${variant}`,
 			size !== "md" && `badge-${size}`
 		], className),
 		...rest,
@@ -447,7 +447,7 @@ function useHotkey(keys, handler, options) {
 }
 //#endregion
 //#region src/Button.tsx
-function Button({ variant = "primary", size = "md", fullWidth, loading, icon, iconTrailing, hotkey, className, type = "button", disabled, children, onClick, ...rest }) {
+function Button({ variant = "default", size = "md", fullWidth, loading, icon, iconTrailing, hotkey, className, type = "button", disabled, children, onClick, ...rest }) {
 	const { ariaKeyShortcuts, primaryChord } = useHotkey(hotkey, (e) => onClick?.(e), { enabled: !disabled && !loading });
 	const iconOnly = children == null && (icon != null || iconTrailing != null);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_button.Button, {
@@ -458,7 +458,7 @@ function Button({ variant = "primary", size = "md", fullWidth, loading, icon, ic
 		"aria-keyshortcuts": ariaKeyShortcuts,
 		className: cn([
 			"btn",
-			`btn-${variant}`,
+			variant !== "default" && `btn-${variant}`,
 			size !== "md" && `btn-${size}`,
 			fullWidth && "btn-full-width",
 			loading && "btn-loading",
@@ -531,7 +531,7 @@ function Input({ variant = "bordered", inputSize = "md", className, type = "text
 		type,
 		className: cn([
 			"input",
-			`input-${variant}`,
+			variant !== "bordered" && `input-${variant}`,
 			inputSize !== "md" && `input-${inputSize}`
 		], className),
 		...rest
@@ -544,7 +544,7 @@ function FileInput({ variant = "bordered", inputSize = "md", className, ...rest
 		type: "file",
 		className: cn([
 			"file-input",
-			`file-input-${variant}`,
+			variant !== "bordered" && `file-input-${variant}`,
 			inputSize !== "md" && `file-input-${inputSize}`
 		], className),
 		...rest
@@ -763,7 +763,7 @@ function Textarea({ variant = "bordered", textareaSize = "md", className, ...res
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 		className: cn([
 			"textarea",
-			`textarea-${variant}`,
+			variant !== "bordered" && `textarea-${variant}`,
 			textareaSize !== "md" && `textarea-${textareaSize}`
 		], className),
 		...rest
@@ -879,7 +879,7 @@ function SelectTrigger({ variant = "bordered", triggerSize = "md", className, ..
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Trigger, {
 		className: cn([
 			"select",
-			`select-${variant}`,
+			variant !== "bordered" && `select-${variant}`,
 			triggerSize !== "md" && `select-${triggerSize}`
 		], className),
 		...rest
@@ -975,15 +975,34 @@ var Select = Object.assign(SelectRoot, {
 	GroupLabel: SelectGroupLabel
 });
 //#endregion
+//#region src/Container.tsx
+/**
+* Page content region: a centered, max-width column that also owns the
+* vertical gap between stacked sections. Place inside `<AppShell.Main>`,
+* which provides no padding of its own. Distinct from the `.Container`
+* escape hatch (e.g. `Card.Container`) — this is a standalone page region.
+*/
+function Container({ size = "md", compact, className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn([
+			"container",
+			size !== "md" && `container-${size}`,
+			compact && "container-compact"
+		], className),
+		...rest
+	});
+}
+//#endregion
 //#region src/Card.tsx
 /**
 * 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({ bordered, compact, className, ...rest }) {
+function CardContainer({ variant = "default", bordered, compact, className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: cn([
 			"card",
+			variant !== "default" && `card-${variant}`,
 			bordered && "card-bordered",
 			compact && "card-compact"
 		], className),
@@ -995,12 +1014,13 @@ 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, toolbar, actions, className, children, ...rest }) {
+function CardRoot({ variant, bordered, compact, 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, {
+		variant,
 		bordered,
 		compact,
 		className,
@@ -1062,18 +1082,22 @@ var Card = Object.assign(CardRoot, {
 //#endregion
 //#region src/StatCard.tsx
 /**
-* Compact KPI tile — `label / value / detail`. Outer chrome matches `<Card>`
-* (border, radius, shadow) but the inner shape inverts the visual hierarchy:
-* value dominates, label is the small annotation. For free-form tiles, use
-* `<Card>`; for label/value tables, use `<PropertyList>`.
+* Compact KPI tile — `label / value / detail`. Renders a `.card` shell (so it
+* shares the surface, border, radius, shadow, and every card modifier) with an
+* inverted inner hierarchy: the value dominates, the label is a small
+* annotation. `compact`/`bordered` map to the shared `.card-compact`/
+* `.card-bordered` modifiers. For free-form tiles, use `<Card>`; for
+* label/value tables, use `<PropertyList>`.
 */
-function StatCard({ label, value, detail, icon, compact, bordered, className, children, ...rest }) {
+function StatCard({ variant = "default", label, value, detail, icon, compact, bordered, className, children, ...rest }) {
 	const hasLabel = icon !== void 0 || label !== void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cn([
+			"card",
 			"stat-card",
-			compact && "stat-card-compact",
-			bordered && "stat-card-bordered"
+			variant !== "default" && `card-${variant}`,
+			compact && "card-compact",
+			bordered && "card-bordered"
 		], className),
 		...rest,
 		children: [
@@ -1469,7 +1493,7 @@ function TabsRoot({ variant = "bordered", size = "md", fullWidth = false, classN
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Root, {
 		className: cn([
 			"tabs",
-			`tabs-${variant}`,
+			variant !== "bordered" && `tabs-${variant}`,
 			size !== "md" && `tabs-${size}`,
 			fullWidth && "tabs-full-width"
 		], className),
@@ -1919,6 +1943,7 @@ exports.ButtonGroup = ButtonGroup;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.CodeBlock = CodeBlock;
+exports.Container = Container;
 exports.Dialog = Dialog;
 exports.Field = Field;
 exports.FileInput = FileInput;