npm - @aortl/admin-react - Versions diffs - 0.11.0 → 0.12.0 - Mend

@aortl/admin-react 0.11.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/Card.d.ts CHANGED Viewed

@@ -1,6 +1,9 @@
 import { ComponentProps, ReactNode } from 'react';
 import { IconProp } from './icon';
+export type CardVariant = "default" | "muted" | "primary" | "info" | "success" | "warning" | "danger";
 export interface CardContainerProps extends ComponentProps<"div"> {
+    /** Tinted surface + matching border. Defaults to the neutral surface. */
+    variant?: CardVariant;
     bordered?: boolean;
     compact?: boolean;
 }
@@ -8,8 +11,10 @@ export interface CardContainerProps extends ComponentProps<"div"> {
  * 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).
  */
-declare function CardContainer({ bordered, compact, className, ...rest }: CardContainerProps): import("react/jsx-runtime").JSX.Element;
+declare function CardContainer({ variant, bordered, compact, className, ...rest }: CardContainerProps): import("react/jsx-runtime").JSX.Element;
 export interface CardProps extends Omit<ComponentProps<"div">, "title"> {
+    /** Tinted surface + matching border. Defaults to the neutral surface. */
+    variant?: CardVariant;
     bordered?: boolean;
     compact?: boolean;
     /** Leading icon for the title row. */
@@ -28,7 +33,7 @@ export interface CardProps extends Omit<ComponentProps<"div">, "title"> {
  * an optional title (with icon), description, children, and actions. For
  * anything outside that shape, use `<Card.Container>` and compose by hand.
  */
-declare function CardRoot({ bordered, compact, icon, title, description, toolbar, actions, className, children, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
+declare function CardRoot({ variant, bordered, compact, icon, title, description, toolbar, actions, className, children, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
 export type CardBodyProps = ComponentProps<"div">;
 declare function CardBody({ className, ...rest }: CardBodyProps): import("react/jsx-runtime").JSX.Element;
 export type CardHeaderProps = ComponentProps<"div">;

package/dist/Card.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,~~EAAE~~,QAAQ,~~EAAE~~,OAAO,~~EAAE~~,SAAS,~~EAAE~~,GAAG,IAAI,~~EAAE~~,EAAE,kBAAkB,~~2CAOnF~~;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,iCAAiC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,SAAS,~~2CAoBX~~;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAClD,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,2CAEtD;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AACpD,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,2CAE1D;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AACrD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAE5D;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC1D,oBAAoB;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AACD,iBAAS,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,2CAOxE;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;AACvD,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,2CAEpE;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AACrD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAE5D;AAED,eAAO,MAAM,IAAI;;;;;;;;CAQf,CAAC"}
1	+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEnD,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,GACN,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;AAEb,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC/D,yEAAyE;IACzE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,EACrB,OAAmB,EACnB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,EAAE,kBAAkB,2CAepB;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACrE,yEAAyE;IACzE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,iCAAiC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,EAChB,OAAO,EACP,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,SAAS,2CA0BX;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAClD,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,2CAEtD;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AACpD,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,2CAE1D;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AACrD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAE5D;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC1D,oBAAoB;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AACD,iBAAS,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,2CAOxE;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;AACvD,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,2CAEpE;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AACrD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAE5D;AAED,eAAO,MAAM,IAAI;;;;;;;;CAQf,CAAC"}

package/dist/StatCard.d.ts CHANGED Viewed

@@ -1,6 +1,9 @@
 import { ComponentProps, ReactNode } from 'react';
+import { CardVariant } from './Card';
 import { IconProp } from './icon';
 export interface StatCardProps extends Omit<ComponentProps<"div">, "label"> {
+    /** Tinted surface + matching border, shared with `<Card>`. The value picks up the accent (except `warning`). Defaults to the neutral surface. */
+    variant?: CardVariant;
     /** Small annotation above the value (e.g. "Total Generations"). */
     label?: ReactNode;
     /** The headline metric. Rendered with `tabular-nums` so digits don't shift between values. */
@@ -13,10 +16,12 @@ export interface StatCardProps extends Omit<ComponentProps<"div">, "label"> {
     bordered?: boolean;
 }
 /**
- * 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>`.
  */
-export declare function StatCard({ label, value, detail, icon, compact, bordered, className, children, ...rest }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatCard({ variant, label, value, detail, icon, compact, bordered, className, children, ...rest }: StatCardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=StatCard.d.ts.map

package/dist/StatCard.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatCard.d.ts","sourceRoot":"","sources":["../src/StatCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAEvD~~,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEnD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzE,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qCAAqC;IACrC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED~~;;;;;GAKG~~;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,MAAM,EACN,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,aAAa,~~2CAqBf~~"}
1	+ {"version":3,"file":"StatCard.d.ts","sourceRoot":"","sources":["../src/StatCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEnD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzE,iJAAiJ;IACjJ,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qCAAqC;IACrC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAmB,EACnB,KAAK,EACL,KAAK,EACL,MAAM,EACN,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,aAAa,2CA2Bf"}

package/dist/admin.scoped.css CHANGED Viewed

@@ -2291,7 +2291,7 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-border);
-    background-color: var(--color-surface);
+    background-color: var(--color-surface-strong);
     color: var(--color-text);
     --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2347,19 +2347,44 @@
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+:scope._ao-card-muted, :scope ._ao-card-muted {
+    background-color: var(--color-surface);
+  }
+:scope._ao-card-primary, :scope ._ao-card-primary {
+    border-color: var(--color-primary-muted);
+    background-color: var(--color-primary-muted);
+  }
+:scope._ao-card-info, :scope ._ao-card-info {
+    border-color: var(--color-info-muted);
+    background-color: var(--color-info-muted);
+  }
+:scope._ao-card-success, :scope ._ao-card-success {
+    border-color: var(--color-success-muted);
+    background-color: var(--color-success-muted);
+  }
+:scope._ao-card-warning, :scope ._ao-card-warning {
+    border-color: var(--color-warning-muted);
+    background-color: var(--color-warning-muted);
+  }
+:scope._ao-card-danger, :scope ._ao-card-danger {
+    border-color: var(--color-danger-muted);
+    background-color: var(--color-danger-muted);
+  }
+:scope._ao-card-primary ._ao-card-title, :scope ._ao-card-primary ._ao-card-title {
+    color: var(--color-primary);
+  }
+:scope._ao-card-info ._ao-card-title, :scope ._ao-card-info ._ao-card-title {
+    color: var(--color-info);
+  }
+:scope._ao-card-success ._ao-card-title, :scope ._ao-card-success ._ao-card-title {
+    color: var(--color-success);
+  }
+:scope._ao-card-danger ._ao-card-title, :scope ._ao-card-danger ._ao-card-title {
+    color: var(--color-danger);
+  }
 :scope._ao-stat-card, :scope ._ao-stat-card {
-    display: flex;
-    flex-direction: column;
     gap: calc(var(--spacing) * 1);
-    border-radius: var(--radius-xl);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-border);
-    background-color: var(--color-surface);
     padding: calc(var(--spacing) * 4);
-    color: var(--color-text);
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 :scope._ao-stat-card-label, :scope ._ao-stat-card-label {
     display: flex;
@@ -2386,14 +2411,21 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
     color: var(--color-text-muted);
   }
-:scope._ao-stat-card-compact, :scope ._ao-stat-card-compact {
+:scope._ao-card-compact._ao-stat-card, :scope ._ao-card-compact._ao-stat-card {
     gap: calc(var(--spacing) * 0.5);
     padding: calc(var(--spacing) * 3);
   }
-:scope._ao-stat-card-bordered, :scope ._ao-stat-card-bordered {
-    border-color: var(--color-border-strong);
-    --tw-shadow: 0 0 #0000;
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+:scope._ao-card-primary ._ao-stat-card-value, :scope ._ao-card-primary ._ao-stat-card-value {
+    color: var(--color-primary);
+  }
+:scope._ao-card-info ._ao-stat-card-value, :scope ._ao-card-info ._ao-stat-card-value {
+    color: var(--color-info);
+  }
+:scope._ao-card-success ._ao-stat-card-value, :scope ._ao-card-success ._ao-stat-card-value {
+    color: var(--color-success);
+  }
+:scope._ao-card-danger ._ao-stat-card-value, :scope ._ao-card-danger ._ao-stat-card-value {
+    color: var(--color-danger);
   }
 :scope._ao-dialog, :scope ._ao-dialog {
     margin: auto;

package/dist/index.cjs CHANGED Viewed

@@ -998,10 +998,11 @@ 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({ 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),
@@ -1013,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,
@@ -1080,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: [