npm - @aortl/admin-react - Versions diffs - 0.9.0 → 0.10.0 - Mend

@aortl/admin-react 0.9.0 → 0.10.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 (14) hide show

package/dist/CodeBlock.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+export interface CodeBlockProps extends ComponentProps<"pre"> {
+    /** Don't wrap long lines — let them overflow horizontally instead. Pair
+     *  with an inline `max-height` to clamp vertical growth. */
+    nowrap?: boolean;
+}
+/**
+ * Styled `<pre>` for logs, JSON dumps, terminal output, raw model output.
+ * Theme-following surface via `--color-code-surface` / `--color-code-text`.
+ * Wraps by default; opt out with `nowrap`. No syntax highlighting — layer
+ * Shiki/Prism on a nested `<code>` if needed.
+ */
+export declare function CodeBlock({ nowrap, className, ...rest }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CodeBlock.d.ts.map

package/dist/CodeBlock.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../src/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3D;gEAC4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,2CAEvE"}

package/dist/Field.d.ts CHANGED Viewed

@@ -1,18 +1,42 @@
 import { Field as BaseField } from '@base-ui/react/field';
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 /**
  * Thin wrappers around Base UI's Field primitives that apply the design
- * system's class names. Compose for fully accessible labeled form fields:
- *
- *   <Field name="email">
- *     <Field.Label>Email</Field.Label>
- *     <Input type="email" required />
- *     <Field.Description>We'll never share your email.</Field.Description>
- *     <Field.Error match="valueMissing">Email is required.</Field.Error>
- *   </Field>
+ * system's class names.
  */
-export type FieldProps = ComponentProps<typeof BaseField.Root>;
-declare function FieldRoot({ className, ...rest }: FieldProps): import("react/jsx-runtime").JSX.Element;
+export type FieldContainerProps = ComponentProps<typeof BaseField.Root>;
+/**
+ * The bare `.field` container. Use this when the default layout doesn't fit —
+ * multiple validity-keyed `<Field.Error>` messages, a control that needs to
+ * sit between description and error, etc.
+ */
+declare function FieldContainer({ className, ...rest }: FieldContainerProps): import("react/jsx-runtime").JSX.Element;
+export interface FieldProps extends FieldContainerProps {
+    /** Renders as `<Field.Label>`. */
+    label?: ReactNode;
+    /** Renders as `<Field.Description>`. */
+    description?: ReactNode;
+    /**
+     * Single-message error. Renders as `<Field.Error match={true}>` — shown
+     * whenever the contained control fails validation. For per-`ValidityState`
+     * messages, use `<Field.Container>` and compose `<Field.Error>` directly.
+     */
+    error?: ReactNode;
+    /** Marks the label with a red asterisk via `data-required`. */
+    required?: boolean;
+    /**
+     * Inline layout — control sits beside its label rather than above it.
+     * Pairs with switches and single checkboxes. Applies `.field-row`.
+     */
+    inline?: boolean;
+}
+/**
+ * Standard field: a `.field` container that lays out an optional label, the
+ * control passed as `children`, an optional description, and an optional
+ * single-message error. For anything outside that shape, use
+ * `<Field.Container>` and compose by hand.
+ */
+declare function FieldRoot({ label, description, error, required, inline, className, children, ...rest }: FieldProps): import("react/jsx-runtime").JSX.Element;
 export type FieldLabelProps = ComponentProps<typeof BaseField.Label> & {
     /** Renders a red asterisk after the label text via `data-required`. */
     required?: boolean;
@@ -23,6 +47,7 @@ declare function FieldDescription({ className, ...rest }: FieldDescriptionProps)
 export type FieldErrorProps = ComponentProps<typeof BaseField.Error>;
 declare function FieldError({ className, ...rest }: FieldErrorProps): import("react/jsx-runtime").JSX.Element;
 export declare const Field: typeof FieldRoot & {
+    Container: typeof FieldContainer;
     Label: typeof FieldLabel;
     Description: typeof FieldDescription;
     Error: typeof FieldError;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../src/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;~~AAG5C;;;;;;;;;;GAUG~~;AAEH,MAAM,MAAM,~~UAAU~~,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC;~~AAE/D~~,iBAAS,~~SAAS~~,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,~~2CAEpD~~;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,GAAG;IACrE,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,2CAQpE;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,WAAW,CAAC,CAAC;AAEjF,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,qBAAqB,2CAEtE;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,CAAC;AAErE,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,2CAE1D;AAED,eAAO,MAAM,KAAK~~;;;;CAIhB~~,CAAC"}
1	+ {"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../src/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD;;;GAGG;AAEH,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC;AAExE;;;;GAIG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,mBAAmB,2CAElE;AAED,MAAM,WAAW,UAAW,SAAQ,mBAAmB;IACrD,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wCAAwC;IACxC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;GAKG;AACH,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,UAAU,2CAsBZ;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,GAAG;IACrE,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,2CAQpE;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,WAAW,CAAC,CAAC;AAEjF,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,qBAAqB,2CAEtE;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,CAAC;AAErE,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,2CAE1D;AAED,eAAO,MAAM,KAAK;;;;;CAKhB,CAAC"}

package/dist/StatCard.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { ComponentProps, ReactNode } from 'react';
+import { IconProp } from './icon';
+export interface StatCardProps extends Omit<ComponentProps<"div">, "label"> {
+    /** 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. */
+    value?: ReactNode;
+    /** Subordinate line under the value (e.g. "42 completed / 12 pending"). */
+    detail?: ReactNode;
+    /** Leading icon in the label row. */
+    icon?: IconProp;
+    compact?: boolean;
+    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>`.
+ */
+export declare function StatCard({ 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 ADDED Viewed

@@ -0,0 +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"}

package/dist/admin.scoped.css CHANGED Viewed

@@ -275,6 +275,8 @@
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -416,6 +418,8 @@
     --color-text-muted: light-dark(var(--color-base-600), var(--color-base-500));
     --color-border: light-dark(var(--color-base-150), var(--color-base-850));
     --color-border-strong: light-dark(var(--color-base-300), var(--color-base-700));
+    --color-code-surface: light-dark(var(--color-base-150), var(--color-base-950));
+    --color-code-text: light-dark(var(--color-base-800), var(--color-base-200));
     --color-primary: light-dark(var(--color-blue-600), var(--color-blue-400));
     --color-primary-hover: light-dark(var(--color-blue-700), var(--color-blue-300));
     --color-primary-muted: light-dark(var(--color-blue-50), var(--color-blue-950));
@@ -797,7 +801,7 @@
     color: var(--color-success);
   }
 :scope._ao-alert-warning ._ao-alert-title, :scope ._ao-alert-warning ._ao-alert-title, :scope._ao-alert-warning > :is(i, svg):first-child, :scope ._ao-alert-warning > :is(i, svg):first-child {
-    color: var(--color-warning);
+    color: var(--color-text);
   }
 :scope._ao-alert-danger ._ao-alert-title, :scope ._ao-alert-danger ._ao-alert-title, :scope._ao-alert-danger > :is(i, svg):first-child, :scope ._ao-alert-danger > :is(i, svg):first-child {
     color: var(--color-danger);
@@ -879,7 +883,7 @@
 :scope._ao-badge-warning, :scope ._ao-badge-warning {
     border-color: var(--color-warning-muted);
     background-color: var(--color-warning-muted);
-    color: var(--color-warning);
+    color: var(--color-text);
   }
 :scope._ao-badge-danger, :scope ._ao-badge-danger {
     border-color: var(--color-danger-muted);
@@ -2293,6 +2297,54 @@
     --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-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;
+    align-items: center;
+    gap: 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-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-muted);
+  }
+:scope._ao-stat-card-value, :scope ._ao-stat-card-value {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+    --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-stat-card-detail, :scope ._ao-stat-card-detail {
+    font-size: var(--text-sm);
+    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 {
+    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-dialog, :scope ._ao-dialog {
     margin: auto;
     flex-direction: column;
@@ -3701,6 +3753,22 @@
     opacity: 100%;
     transition: opacity 150ms ease-out 200ms, visibility 0s linear 200ms;
   }
+:scope._ao-code-block, :scope ._ao-code-block {
+    border-radius: var(--radius-lg);
+    background-color: var(--color-code-surface);
+    padding: calc(var(--spacing) * 3);
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-code-text);
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow: auto;
+  }
+:scope._ao-code-block-nowrap, :scope ._ao-code-block-nowrap {
+    white-space: pre;
+    word-wrap: normal;
+  }
 :scope._ao-collapse, :scope ._ao-collapse {
     visibility: collapse;
   }

package/dist/index.cjs CHANGED Viewed

@@ -1060,6 +1060,40 @@ var Card = Object.assign(CardRoot, {
 	Actions: CardActions
 });
 //#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>`.
+*/
+function StatCard({ 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([
+			"stat-card",
+			compact && "stat-card-compact",
+			bordered && "stat-card-bordered"
+		], className),
+		...rest,
+		children: [
+			hasLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				className: cn("stat-card-label", void 0),
+				children: [renderIcon(icon), label]
+			}) : null,
+			value !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: cn("stat-card-value", void 0),
+				children: value
+			}) : null,
+			detail !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: cn("stat-card-detail", void 0),
+				children: detail
+			}) : null,
+			children
+		]
+	});
+}
+//#endregion
 //#region src/Dialog.tsx
 var DialogContext = (0, react.createContext)(null);
 function DefaultCloseIcon() {
@@ -1189,12 +1223,43 @@ var Dialog = Object.assign(DialogRoot, {
 });
 //#endregion
 //#region src/Field.tsx
-function FieldRoot({ className, ...rest }) {
+/**
+* The bare `.field` container. Use this when the default layout doesn't fit —
+* multiple validity-keyed `<Field.Error>` messages, a control that needs to
+* sit between description and error, etc.
+*/
+function FieldContainer({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_field.Field.Root, {
 		className: cn("field", className),
 		...rest
 	});
 }
+/**
+* Standard field: a `.field` container that lays out an optional label, the
+* control passed as `children`, an optional description, and an optional
+* single-message error. For anything outside that shape, use
+* `<Field.Container>` and compose by hand.
+*/
+function FieldRoot({ label, description, error, required, inline, className, children, ...rest }) {
+	const labelEl = label !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldLabel, {
+		required,
+		children: label
+	}) : null;
+	const descriptionEl = description !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldDescription, { children: description }) : null;
+	const errorEl = error !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldError, {
+		match: true,
+		children: error
+	}) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FieldContainer, {
+		className: cn(inline && "field-row", className),
+		...rest,
+		children: [
+			inline ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [children, labelEl] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [labelEl, children] }),
+			descriptionEl,
+			errorEl
+		]
+	});
+}
 function FieldLabel({ className, required, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_field.Field.Label, {
 		"data-required": required ? "" : void 0,
@@ -1215,6 +1280,7 @@ function FieldError({ className, ...rest }) {
 	});
 }
 var Field = Object.assign(FieldRoot, {
+	Container: FieldContainer,
 	Label: FieldLabel,
 	Description: FieldDescription,
 	Error: FieldError
@@ -1441,6 +1507,20 @@ var Tabs = Object.assign(TabsRoot, {
 	Indicator: TabsIndicator
 });
 //#endregion
+//#region src/CodeBlock.tsx
+/**
+* Styled `<pre>` for logs, JSON dumps, terminal output, raw model output.
+* Theme-following surface via `--color-code-surface` / `--color-code-text`.
+* Wraps by default; opt out with `nowrap`. No syntax highlighting — layer
+* Shiki/Prism on a nested `<code>` if needed.
+*/
+function CodeBlock({ nowrap, className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+		className: cn(["code-block", nowrap && "code-block-nowrap"], className),
+		...rest
+	});
+}
+//#endregion
 //#region src/Tooltip.tsx
 function TooltipProvider(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Provider, { ...props });
@@ -1838,6 +1918,7 @@ exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.CodeBlock = CodeBlock;
 exports.Dialog = Dialog;
 exports.Field = Field;
 exports.FileInput = FileInput;
@@ -1856,6 +1937,7 @@ exports.RadioGroup = RadioGroup;
 exports.Select = Select;
 exports.Sidebar = Sidebar;
 exports.Spinner = Spinner;
+exports.StatCard = StatCard;
 exports.Switch = Switch;
 exports.Table = Table;
 exports.Tabs = Tabs;