@civitai/blocks-react 0.12.0 → 0.12.1

package/README.md

@@ -274,7 +274,7 @@ export function App() {
 | `TextInput` / `Textarea` | `label` / `description` / `error` / `required`, wired via `htmlFor` + `aria-describedby` + `aria-invalid`. `Textarea` takes `minRows`. |
 | `Card` | themed surface; `withBorder`, `padding`, `radius`. |
 | `Stack` / `Group` | vertical / horizontal flex; `gap`, `align`, `justify` (+ `Group` `wrap`). |
-| `Alert` | `color` (`info`/`success`/`warning`/`error`), `title`, `withCloseButton` + `onClose`; `role="alert"`. |
+| `Alert` | `color` (`info`/`success`/`warning`/`error`), `title`, `withCloseButton` + `onClose`. ARIA role defaults by color — `error`/`warning` → `role="alert"` (assertive), `info`/`success` → `role="status"` (polite); pass `role` to override. |
 | `Loader` | CSS-keyframe spinner; `size`, `color`; `role="status"`. |
 | `Badge` | `variant`, `size`, `color`. |
 | `Modal` | `opened` + `onClose`, `title`, `size`; `role="dialog"` + `aria-modal`, Escape- and overlay-click-to-close, focuses the panel on open and restores focus on close. |

package/dist/ui/Alert.d.ts

@@ -10,10 +10,20 @@ export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     onClose?: () => void;
     /** Accessible label for the close button. Defaults to "Close alert". */
     closeButtonLabel?: string;
+    /**
+     * ARIA live-region role. Defaults by `color`: `error`/`warning` →
+     * `'alert'` (assertive, interrupts), `info`/`success` → `'status'`
+     * (polite). Set explicitly to override the color-derived default — an
+     * explicit value always wins.
+     */
+    role?: React.AriaRole;
 }
 /**
- * A themed callout. Carries `role="alert"` so it's announced. Optional
- * dismiss button calls `onClose`. Auto-themed via `useBlocksStyles()`.
+ * A themed callout. Its ARIA role defaults by `color` —
+ * `error`/`warning` get `role="alert"` (assertive), `info`/`success`
+ * get `role="status"` (polite) so a static callout isn't announced
+ * interruptively. Pass `role` to override. Optional dismiss button
+ * calls `onClose`. Auto-themed via `useBlocksStyles()`.
  */
 export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Alert.d.ts.map

package/dist/ui/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/ui/Alert.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAElE,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACrE,4CAA4C;IAC5C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,sEAAsE;IACtE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,uGAuChB,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/ui/Alert.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAElE,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACrE,4CAA4C;IAC5C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,sEAAsE;IACtE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC;CACvB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,KAAK,uGA0ChB,CAAC"}

package/dist/ui/Alert.js

@@ -2,11 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useBlocksStyles } from './styles.js';
 /**
- * A themed callout. Carries `role="alert"` so it's announced. Optional
- * dismiss button calls `onClose`. Auto-themed via `useBlocksStyles()`.
+ * A themed callout. Its ARIA role defaults by `color` —
+ * `error`/`warning` get `role="alert"` (assertive), `info`/`success`
+ * get `role="status"` (polite) so a static callout isn't announced
+ * interruptively. Pass `role` to override. Optional dismiss button
+ * calls `onClose`. Auto-themed via `useBlocksStyles()`.
  */
-export const Alert = forwardRef(function Alert({ color = 'info', title, withCloseButton = false, onClose, closeButtonLabel = 'Close alert', children, ...rest }, ref) {
+export const Alert = forwardRef(function Alert({ color = 'info', title, withCloseButton = false, onClose, closeButtonLabel = 'Close alert', role, children, ...rest }, ref) {
     useBlocksStyles();
-    return (_jsxs("div", { ref: ref, ...rest, "data-civitai-ui": "alert", "data-color": color, role: "alert", children: [_jsxs("div", { "data-civitai-ui-alert-body": true, children: [title != null ? (_jsx("div", { "data-civitai-ui-alert-title": true, children: title })) : null, children] }), withCloseButton ? (_jsx("button", { type: "button", "data-civitai-ui-alert-close": true, "aria-label": closeButtonLabel, onClick: () => onClose?.(), children: "\u00D7" })) : null] }));
+    const resolvedRole = role ?? (color === 'error' || color === 'warning' ? 'alert' : 'status');
+    return (_jsxs("div", { ref: ref, ...rest, "data-civitai-ui": "alert", "data-color": color, role: resolvedRole, children: [_jsxs("div", { "data-civitai-ui-alert-body": true, children: [title != null ? (_jsx("div", { "data-civitai-ui-alert-title": true, children: title })) : null, children] }), withCloseButton ? (_jsx("button", { type: "button", "data-civitai-ui-alert-close": true, "aria-label": closeButtonLabel, onClick: () => onClose?.(), children: "\u00D7" })) : null] }));
 });
 //# sourceMappingURL=Alert.js.map

package/dist/ui/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/ui/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAkB9C;;;GAGG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA6B,SAAS,KAAK,CACxE,EACE,KAAK,GAAG,MAAM,EACd,KAAK,EACL,eAAe,GAAG,KAAK,EACvB,OAAO,EACP,gBAAgB,GAAG,aAAa,EAChC,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG;IAEH,eAAe,EAAE,CAAC;IAClB,OAAO,CACL,eACE,GAAG,EAAE,GAAG,KACJ,IAAI,qBACQ,OAAO,gBACX,KAAK,EACjB,IAAI,EAAC,OAAO,aAEZ,8DACG,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CACf,6DAAkC,KAAK,GAAO,CAC/C,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,IACL,EACL,eAAe,CAAC,CAAC,CAAC,CACjB,iBACE,IAAI,EAAC,QAAQ,qDAED,gBAAgB,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,uBAGnB,CACV,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/ui/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAyB9C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA6B,SAAS,KAAK,CACxE,EACE,KAAK,GAAG,MAAM,EACd,KAAK,EACL,eAAe,GAAG,KAAK,EACvB,OAAO,EACP,gBAAgB,GAAG,aAAa,EAChC,IAAI,EACJ,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG;IAEH,eAAe,EAAE,CAAC;IAClB,MAAM,YAAY,GAChB,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC1E,OAAO,CACL,eACE,GAAG,EAAE,GAAG,KACJ,IAAI,qBACQ,OAAO,gBACX,KAAK,EACjB,IAAI,EAAE,YAAY,aAElB,8DACG,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CACf,6DAAkC,KAAK,GAAO,CAC/C,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,IACL,EACL,eAAe,CAAC,CAAC,CAAC,CACjB,iBACE,IAAI,EAAC,QAAQ,qDAED,gBAAgB,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,uBAGnB,CACV,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civitai/blocks-react",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "React hooks and iframe transport for Civitai App Blocks. Pairs with @civitai/app-sdk/blocks.",
   "license": "MIT",
   "type": "module",