basalt-ui 1.26.0 → 1.28.0

package/dist/dashboard/query-state.d.ts

@@ -1,24 +1,25 @@
 import type { ReactNode } from 'react';
-/** `'page'` = a full route body (generous padding). `'section'` = a card/panel region (compact). */
-export type QueryStateVariant = 'page' | 'section';
+import type { BasaltProps, SlotStylesProps } from '../common/props.js';
+import type { QueryStateLike } from '../common/query-state-like.js';
 /**
- * The structural subset of a TanStack `UseQueryResult` these components read.
+ * How loud this state is: `'page'` = a full route body (generous padding), `'section'` = a
+ * card/panel region (compact).
  *
- * Typed as a SUBSET rather than as `UseQueryResult<T>` on purpose: a composed, derived or
- * hand-rolled result must be passable without a cast, and
- * these components stay independent of which `@tanstack/react-query` major a consumer pins. This
- * is NOT a claim that the root barrel is free of that package — `./connectivity` imports
- * `onlineManager` as a value and is re-exported from `src/index.ts`. The cost of the subset is
- * that the compiler stops policing the shape — which is why {@link QueryState} asserts it at
- * runtime.
+ * Named `tier`, not `variant` (audit B #19): `tier` is already the package's word for "how loud is
+ * this" on `WidgetHeader` and `CtlSlot`, and `'section'` meant two different things across the two
+ * spellings. {@link QueryStateVariant} stays exported as an alias — nothing is renamed out from
+ * under a consumer.
  */
-export type QueryStateLike<TData> = {
-    data: TData | undefined;
-    isError: boolean;
-    error: unknown;
-    fetchStatus: 'fetching' | 'paused' | 'idle';
-    refetch: () => unknown;
-};
+export type QueryStateTier = 'page' | 'section';
+/** The former name of {@link QueryStateTier}. Kept as an alias; prefer `QueryStateTier`. */
+export type QueryStateVariant = QueryStateTier;
+/**
+ * The structural subset of a TanStack `UseQueryResult` these components read — defined in
+ * `common/query-state-like.ts` and re-exported here, where consumers have always imported it from.
+ * The runtime assertion over it lives beside the type, because `./data`'s containers read the same
+ * envelope and a second copy of the check had already drifted to a weaker one.
+ */
+export type { QueryStateLike };
 /** Copy for the empty branch. Rendered through `EmptyState`, so it looks like every other one. */
 export type QueryEmptyCopy = {
     title: string;
@@ -29,14 +30,17 @@ export type QueryEmptyCopy = {
     /** Call-to-action below the copy (e.g. "Reset filters"). */
     action?: ReactNode;
 };
-export type LoadingStateProps = {
-    variant?: QueryStateVariant;
+export type LoadingStateProps = BasaltProps & {
+    /** How loud this state is. Default `'page'`. */
+    tier?: QueryStateTier;
+    /** @deprecated Renamed to `tier` — see {@link QueryStateTier}. Still honoured; `tier` wins. */
+    variant?: QueryStateTier;
     /** Accessible name for the spinner. Say what is loading. */
     label?: string;
 };
-/** A spinner on its own — `variant="page"` centres it in a generous block, `'section'` is bare. */
-export declare function LoadingState({ variant, label, }: LoadingStateProps): ReactNode;
-export type ErrorStateProps = {
+/** A spinner on its own — `tier="page"` centres it in a generous block, `'section'` is bare. */
+export declare function LoadingState({ tier, variant, label, className, style, }: LoadingStateProps): ReactNode;
+export type ErrorStateProps = BasaltProps & {
     /** Whatever was thrown — the raw Eden/fetch envelope is fine, it gets decoded. */
     error: unknown;
     /** Alert heading. Say what failed, e.g. `Could not load images`. */
@@ -46,7 +50,10 @@ export type ErrorStateProps = {
     onRetry?: () => void;
     /** Disables/spins the retry button while a refetch is in flight. */
     retrying?: boolean;
-    variant?: QueryStateVariant;
+    /** How loud this state is. Default `'page'`. */
+    tier?: QueryStateTier;
+    /** @deprecated Renamed to `tier` — see {@link QueryStateTier}. Still honoured; `tier` wins. */
+    variant?: QueryStateTier;
     /** Extra controls beside Retry (e.g. a "Back to shares" link). */
     action?: ReactNode;
 };
@@ -54,8 +61,19 @@ export type ErrorStateProps = {
  * The error branch: the REAL server message (via `toErrorMessage`) plus a retry. Usable on its own,
  * outside a query — an auth gate or a boundary fallback renders it directly.
  */
-export declare function ErrorState({ error, title, fallback, onRetry, retrying, variant, action, }: ErrorStateProps): ReactNode;
-export type QueryStateProps<TData> = {
+export declare function ErrorState({ error, title, fallback, onRetry, retrying, tier, variant, action, className, style, }: ErrorStateProps): ReactNode;
+/**
+ * ONE slot, and the single-member union is the statement (`common/props.ts` lists this among the
+ * composites): `root` is whichever branch is live — the error alert's stack, the spinner's centre,
+ * the empty state, or the cached-data wrapper. `QueryState` renders exactly one of them at a time
+ * and never two boxes at once, so there is no second slot to name; `className` and `classNames.root`
+ * both land on it, joined rather than one replacing the other.
+ *
+ * A branch a consumer wants styled DIFFERENTLY from its siblings is `LoadingState`/`ErrorState`/
+ * `EmptyState` placed by hand — that escape hatch is why they ship.
+ */
+export type QueryStateSlot = 'root';
+export type QueryStateProps<TData> = BasaltProps & SlotStylesProps<QueryStateSlot> & {
     query: QueryStateLike<TData>;
     /** A render function gets `data` narrowed to non-undefined; a plain node also works. */
     children: ReactNode | ((data: TData) => ReactNode);
@@ -69,7 +87,10 @@ export type QueryStateProps<TData> = {
     errorFallback?: string;
     /** Extra controls beside Retry on the error branch. */
     errorAction?: ReactNode;
-    variant?: QueryStateVariant;
+    /** How loud every branch is. Default `'page'`. */
+    tier?: QueryStateTier;
+    /** @deprecated Renamed to `tier` — see {@link QueryStateTier}. Still honoured; `tier` wins. */
+    variant?: QueryStateTier;
     /** Replace the default spinner (e.g. with a skeleton grid). */
     loading?: ReactNode;
 };
@@ -92,5 +113,5 @@ export type QueryStateProps<TData> = {
  *   {(data) => <ImageGrid images={data.rows} />}
  * </QueryState>
  */
-export declare function QueryState<TData>({ query, children, empty, isEmpty, errorTitle, errorFallback, errorAction, variant, loading, }: QueryStateProps<TData>): ReactNode;
+export declare function QueryState<TData>({ query, children, empty, isEmpty, errorTitle, errorFallback, errorAction, tier, variant, loading, className, style, classNames, }: QueryStateProps<TData>): ReactNode;
 //# sourceMappingURL=query-state.d.ts.map

package/dist/dashboard/query-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"query-state.d.ts","sourceRoot":"","sources":["../../src/dashboard/query-state.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,oGAAoG;AACpG,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,SAAS,CAAA;AAElD;;;;;;;;;;GAUG;AACH,MAAM,MAAM,cAAc,CAAC,KAAK,IAAI;IAClC,IAAI,EAAE,KAAK,GAAG,SAAS,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,OAAO,CAAA;IACd,WAAW,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC3C,OAAO,EAAE,MAAM,OAAO,CAAA;CACvB,CAAA;AAED,kGAAkG;AAClG,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,CAAA;AAID,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,mGAAmG;AACnG,wBAAgB,YAAY,CAAC,EAC3B,OAAgB,EAChB,KAAiB,GAClB,EAAE,iBAAiB,GAAG,SAAS,CAI/B;AAID,MAAM,MAAM,eAAe,GAAG;IAC5B,kFAAkF;IAClF,KAAK,EAAE,OAAO,CAAA;IACd,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAA8B,EAC9B,QAAgC,EAChC,OAAO,EACP,QAAgB,EAChB,OAAgB,EAChB,MAAM,GACP,EAAE,eAAe,GAAG,SAAS,CAoB7B;AAyCD,MAAM,MAAM,eAAe,CAAC,KAAK,IAAI;IACnC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,CAAA;IAC5B,wFAAwF;IACxF,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAK,SAAS,CAAC,CAAA;IAClD,uDAAuD;IACvD,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,6FAA6F;IAC7F,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAA;IAClC,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,uDAAuD;IACvD,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,EAChC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAAO,EACP,UAA6B,EAC7B,aAAqC,EACrC,WAAW,EACX,OAAgB,EAChB,OAAO,GACR,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG,SAAS,CAiDpC"}
+{"version":3,"file":"query-state.d.ts","sourceRoot":"","sources":["../../src/dashboard/query-state.tsx"],"names":[],"mappings":"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"}

package/dist/dashboard/query-state.js

@@ -1,14 +1,36 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Alert, Button, Center, Group, Loader, Stack, Text } from "@mantine/core";
 import { toErrorMessage } from "../query/error-message.js";
+import { cx } from "../common/props.js";
 import { EmptyState } from "./empty-state.js";
+import { assertQueryStateLike } from "../common/query-state-like.js";
 function LoadingState({
-  variant = "page",
-  label = "Loading"
+  tier,
+  variant,
+  label = "Loading",
+  className,
+  style
 }) {
-  const loader = /* @__PURE__ */ jsx(Loader, { size: "sm", "aria-label": label });
-  if (variant === "section") return loader;
-  return /* @__PURE__ */ jsx(Center, { py: 64, children: loader });
+  const resolved = tier ?? variant ?? "page";
+  if (resolved === "section") {
+    return /* @__PURE__ */ jsx(
+      Loader,
+      {
+        size: "sm",
+        "aria-label": label,
+        ...className !== void 0 && { className },
+        ...style !== void 0 && { style }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Center,
+    {
+      ...className !== void 0 && { className },
+      style: { paddingBlock: "calc(var(--vx-space-stack-xs, 0.25rem) * 16)", ...style },
+      children: /* @__PURE__ */ jsx(Loader, { size: "sm", "aria-label": label })
+    }
+  );
 }
 function ErrorState({
   error,
@@ -16,18 +38,40 @@ function ErrorState({
   fallback = "The request failed.",
   onRetry,
   retrying = false,
-  variant = "page",
-  action
+  tier,
+  variant,
+  action,
+  className,
+  style
 }) {
-  const alert = /* @__PURE__ */ jsx(Alert, { color: "red", variant: "light", title, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
-    /* @__PURE__ */ jsx(Text, { size: "sm", children: toErrorMessage(error, fallback) }),
-    (onRetry ?? action) !== void 0 && /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-      onRetry && /* @__PURE__ */ jsx(Button, { size: "xs", variant: "default", loading: retrying, onClick: onRetry, children: "Retry" }),
-      action
-    ] })
-  ] }) });
-  if (variant === "section") return alert;
-  return /* @__PURE__ */ jsx(Stack, { py: "md", children: alert });
+  const resolved = tier ?? variant ?? "page";
+  const alert = /* @__PURE__ */ jsx(
+    Alert,
+    {
+      color: "red",
+      variant: "light",
+      title,
+      ...resolved === "section" && className !== void 0 && { className },
+      ...resolved === "section" && style !== void 0 && { style },
+      children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", children: toErrorMessage(error, fallback) }),
+        (onRetry ?? action) !== void 0 && /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          onRetry && /* @__PURE__ */ jsx(Button, { size: "xs", variant: "default", loading: retrying, onClick: onRetry, children: "Retry" }),
+          action
+        ] })
+      ] })
+    }
+  );
+  if (resolved === "section") return alert;
+  return /* @__PURE__ */ jsx(
+    Stack,
+    {
+      py: "md",
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style },
+      children: alert
+    }
+  );
 }
 function defaultIsEmpty(data) {
   if (data === null || data === void 0) return true;
@@ -37,22 +81,6 @@ function defaultIsEmpty(data) {
   }
   return false;
 }
-const FETCH_STATUSES = /* @__PURE__ */ new Set(["fetching", "paused", "idle"]);
-function assertQueryStateLike(query) {
-  const bad = (detail) => {
-    throw new Error(
-      `QueryState: \`query\` ${detail}. It must carry { data, isError, error, fetchStatus, refetch } \u2014 a TanStack UseQueryResult does; a hand-composed one must spell every field, because a missing branch flag renders a false claim about the data instead of an error.`
-    );
-  };
-  if (query === null || typeof query !== "object")
-    bad(`is ${query === null ? "null" : typeof query}`);
-  const q = query;
-  if (!("data" in q)) bad("has no `data` key");
-  if (typeof q["isError"] !== "boolean") bad("has no boolean `isError`");
-  if (typeof q["fetchStatus"] !== "string" || !FETCH_STATUSES.has(q["fetchStatus"]))
-    bad(`has fetchStatus=${JSON.stringify(q["fetchStatus"])}, not 'fetching' | 'paused' | 'idle'`);
-  if (typeof q["refetch"] !== "function") bad("has no `refetch()`");
-}
 function QueryState({
   query,
   children,
@@ -61,10 +89,16 @@ function QueryState({
   errorTitle = "Could not load",
   errorFallback = "The request failed.",
   errorAction,
-  variant = "page",
-  loading
+  tier,
+  variant,
+  loading,
+  className,
+  style,
+  classNames
 }) {
-  assertQueryStateLike(query);
+  assertQueryStateLike("QueryState", query);
+  const resolvedTier = tier ?? variant ?? "page";
+  const rootClassName = cx(classNames?.root, className) || void 0;
   const { data, isError, error, fetchStatus } = query;
   const retrying = fetchStatus === "fetching";
   const retry = () => void query.refetch();
@@ -77,42 +111,62 @@ function QueryState({
         fallback: errorFallback,
         onRetry: retry,
         retrying,
-        variant,
-        ...errorAction !== void 0 && { action: errorAction }
+        tier: resolvedTier,
+        ...errorAction !== void 0 && { action: errorAction },
+        ...rootClassName !== void 0 && { className: rootClassName },
+        ...style !== void 0 && { style }
       }
     );
   }
   if (data === void 0) {
-    if (fetchStatus === "idle" && !isError) return empty ? renderEmpty(empty, variant) : null;
-    return loading ?? /* @__PURE__ */ jsx(LoadingState, { variant });
+    if (fetchStatus === "idle" && !isError)
+      return empty ? renderEmpty(empty, resolvedTier, rootClassName, style) : null;
+    return loading ?? /* @__PURE__ */ jsx(
+      LoadingState,
+      {
+        tier: resolvedTier,
+        ...rootClassName !== void 0 && { className: rootClassName },
+        ...style !== void 0 && { style }
+      }
+    );
   }
   const emptyNow = isEmpty ? isEmpty(data) : defaultIsEmpty(data);
-  const body = emptyNow ? empty ? renderEmpty(empty, variant) : null : typeof children === "function" ? children(data) : children;
+  const body = emptyNow ? empty ? renderEmpty(empty, resolvedTier, rootClassName, style) : null : typeof children === "function" ? children(data) : children;
   if (!isError) return body;
-  return /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
-    /* @__PURE__ */ jsx(
-      ErrorState,
-      {
-        error,
-        title: "Showing cached data",
-        fallback: "The last refresh failed.",
-        onRetry: retry,
-        retrying,
-        variant: "section"
-      }
-    ),
-    body
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      gap: "sm",
+      ...rootClassName !== void 0 && { className: rootClassName },
+      ...style !== void 0 && { style },
+      children: [
+        /* @__PURE__ */ jsx(
+          ErrorState,
+          {
+            error,
+            title: "Showing cached data",
+            fallback: "The last refresh failed.",
+            onRetry: retry,
+            retrying,
+            tier: "section"
+          }
+        ),
+        body
+      ]
+    }
+  );
 }
-function renderEmpty(empty, variant) {
+function renderEmpty(empty, tier, className, style) {
   return /* @__PURE__ */ jsx(
     EmptyState,
     {
       title: empty.title,
-      variant,
+      tier,
       ...empty.description !== void 0 && { description: empty.description },
       ...empty.icon !== void 0 && { icon: empty.icon },
-      ...empty.action !== void 0 && { action: empty.action }
+      ...empty.action !== void 0 && { action: empty.action },
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style }
     }
   );
 }

package/dist/dashboard/settings-section.d.ts

@@ -1,16 +1,26 @@
 import type { ReactNode } from 'react';
-export type SettingsSectionProps = {
-    /** Head-font section title, rendered via `WidgetHeader tier="section"`. */
-    title: string;
-    /** Optional 13px muted description below the title. */
-    subtitle?: string;
+import type { WidgetHeaderTitleProps } from '../widget-header/index.js';
+import type { BasaltProps, SlotStylesProps } from '../common/props.js';
+/** The three boxes `SettingsSection`/`DangerZone` paint (`common/props.ts`). */
+export type SettingsSectionSlot = 'root' | 'header' | 'body';
+/**
+ * Composed from the named `WidgetHeaderTitleProps` slice (audit B #2) rather than a hand-picked
+ * `title`/`subtitle` pair — which is why `icon` and `info` now reach the header too. `value`/`delta`
+ * are deliberately NOT taken: a settings section groups controls, it states no metric.
+ *
+ * `Section` and `ChartCard` still cut their own ad-hoc subsets; both should move onto the same
+ * slices.
+ */
+export type SettingsSectionProps = BasaltProps & SlotStylesProps<SettingsSectionSlot> & WidgetHeaderTitleProps & {
     /** Header-right slot — wrapped in `CtlSlot` (C1/C5). */
     actions?: ReactNode;
     /** Section body — typically a stack of `SettingsRow`s. */
     children: ReactNode;
 };
-export declare function SettingsSection({ title, subtitle, actions, children }: SettingsSectionProps): import("react").JSX.Element;
-export type SettingsRowProps = {
+export declare function SettingsSection({ title, icon, subtitle, info, actions, children, className, style, classNames, }: SettingsSectionProps): import("react").JSX.Element;
+/** The three boxes `SettingsRow` paints (`common/props.ts`). */
+export type SettingsRowSlot = 'root' | 'label' | 'control';
+export type SettingsRowProps = BasaltProps & SlotStylesProps<SettingsRowSlot> & {
     /** 13px ink label on the left. */
     label: string;
     /** Optional 12.5px muted description under the label. */
@@ -20,7 +30,7 @@ export type SettingsRowProps = {
     /** Alternative to `control` for a fully custom right-hand region. */
     children?: ReactNode;
 };
-export declare function SettingsRow({ label, description, control, children }: SettingsRowProps): import("react").JSX.Element;
+export declare function SettingsRow({ label, description, control, children, className, style, classNames, }: SettingsRowProps): import("react").JSX.Element;
 export type DangerZoneProps = SettingsSectionProps;
-export declare function DangerZone({ title, subtitle, actions, children }: DangerZoneProps): import("react").JSX.Element;
+export declare function DangerZone({ title, icon, subtitle, info, actions, children, className, style, classNames, }: DangerZoneProps): import("react").JSX.Element;
 //# sourceMappingURL=settings-section.d.ts.map

package/dist/dashboard/settings-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-section.d.ts","sourceRoot":"","sources":["../../src/dashboard/settings-section.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAetC,MAAM,MAAM,oBAAoB,GAAG;IACjC,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wDAAwD;IACxD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,oBAAoB,+BAc3F;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mDAAmD;IACnD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,gBAAgB,+BAYtF;AAED,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAA;AAElD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,eAAe,+BAoBjF"}
+{"version":3,"file":"settings-section.d.ts","sourceRoot":"","sources":["../../src/dashboard/settings-section.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAA;AAI9D,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAYnE,gFAAgF;AAChF,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE5D;;;;;;;GAOG;AACH,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAC5C,eAAe,CAAC,mBAAmB,CAAC,GACpC,sBAAsB,GAAG;IACvB,wDAAwD;IACxD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAEH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,KAAK,EACL,UAAU,GACX,EAAE,oBAAoB,+BAmBtB;AAED,gEAAgE;AAChE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;AAE1D,MAAM,MAAM,gBAAgB,GAAG,WAAW,GACxC,eAAe,CAAC,eAAe,CAAC,GAAG;IACjC,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mDAAmD;IACnD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAEH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,SAAS,EACT,KAAK,EACL,UAAU,GACX,EAAE,gBAAgB,+BAelB;AAED,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAA;AAElD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,KAAK,EACL,UAAU,GACX,EAAE,eAAe,+BAwBjB"}

package/dist/dashboard/settings-section.js

@@ -3,6 +3,7 @@ import { Card, Stack } from "@mantine/core";
 import { WidgetHeader } from "../widget-header/index.js";
 import { CtlSlot } from "../theme/index.js";
 import { alpha, VX } from "../tokens/index.js";
+import { cx } from "../common/props.js";
 import classes from "./settings-section.module.css";
 const eyebrowStyle = {
   fontFamily: "var(--basalt-font-mono)",
@@ -12,51 +13,99 @@ const eyebrowStyle = {
   textTransform: "uppercase",
   color: VX.status.bad
 };
-function SettingsSection({ title, subtitle, actions, children }) {
-  return /* @__PURE__ */ jsxs(Card, { style: { padding: "var(--mantine-spacing-xs) var(--mantine-spacing-sm)" }, children: [
-    /* @__PURE__ */ jsx("div", { className: classes.header, children: /* @__PURE__ */ jsx(
-      WidgetHeader,
-      {
-        tier: "section",
-        title,
-        ...subtitle !== void 0 && { subtitle },
-        ...actions !== void 0 && { actions: /* @__PURE__ */ jsx(CtlSlot, { children: actions }) }
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { className: classes.rows, children })
-  ] });
+function SettingsSection({
+  title,
+  icon,
+  subtitle,
+  info,
+  actions,
+  children,
+  className,
+  style,
+  classNames
+}) {
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cx(classNames?.root, className),
+      style: { padding: "var(--mantine-spacing-xs) var(--mantine-spacing-sm)", ...style },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cx(classes.header, classNames?.header), children: /* @__PURE__ */ jsx(
+          WidgetHeader,
+          {
+            tier: "section",
+            title,
+            ...icon !== void 0 && { icon },
+            ...subtitle !== void 0 && { subtitle },
+            ...info !== void 0 && { info },
+            ...actions !== void 0 && { actions: /* @__PURE__ */ jsx(CtlSlot, { children: actions }) }
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: cx(classes.rows, classNames?.body), children })
+      ]
+    }
+  );
 }
-function SettingsRow({ label, description, control, children }) {
-  return /* @__PURE__ */ jsxs("div", { className: classes.row, children: [
-    /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
-      /* @__PURE__ */ jsx("span", { style: { fontSize: VX.text.md, color: VX.ink }, children: label }),
-      description && /* @__PURE__ */ jsx("span", { style: { fontSize: VX.text.sm, color: VX.muted }, children: description })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: classes.control, children: control ?? children })
-  ] });
+function SettingsRow({
+  label,
+  description,
+  control,
+  children,
+  className,
+  style,
+  classNames
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(classes.row, classNames?.root, className),
+      ...style !== void 0 && { style },
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, ...classNames?.label !== void 0 && { className: classNames.label }, children: [
+          /* @__PURE__ */ jsx("span", { style: { fontSize: VX.text.md, color: VX.ink }, children: label }),
+          description && /* @__PURE__ */ jsx("span", { style: { fontSize: VX.text.sm, color: VX.muted }, children: description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cx(classes.control, classNames?.control), children: control ?? children })
+      ]
+    }
+  );
 }
-function DangerZone({ title, subtitle, actions, children }) {
+function DangerZone({
+  title,
+  icon,
+  subtitle,
+  info,
+  actions,
+  children,
+  className,
+  style,
+  classNames
+}) {
   return /* @__PURE__ */ jsxs(
     Card,
     {
+      className: cx(classNames?.root, className),
       style: {
         padding: "var(--mantine-spacing-xs) var(--mantine-spacing-sm)",
-        boxShadow: `${VX.shadowCard}, 0 0 0 1px ${alpha(VX.status.bad, 0.25)}`
+        boxShadow: `${VX.shadowCard}, 0 0 0 1px ${alpha(VX.status.bad, 0.25)}`,
+        ...style
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: classes.header, children: [
+        /* @__PURE__ */ jsxs("div", { className: cx(classes.header, classNames?.header), children: [
           /* @__PURE__ */ jsx("span", { style: eyebrowStyle, children: "Danger Zone" }),
           /* @__PURE__ */ jsx(
             WidgetHeader,
             {
               tier: "section",
               title,
+              ...icon !== void 0 && { icon },
               ...subtitle !== void 0 && { subtitle },
+              ...info !== void 0 && { info },
               ...actions !== void 0 && { actions: /* @__PURE__ */ jsx(CtlSlot, { children: actions }) }
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: classes.rows, children })
+        /* @__PURE__ */ jsx("div", { className: cx(classes.rows, classNames?.body), children })
       ]
     }
   );