@box/blueprint-web 12.105.0 → 12.106.0

package/dist/lib-esm/index.css

@@ -9582,23 +9582,32 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-overflow:ellipsis;
   white-space:nowrap;
 }
-.bp_radio_tiles_module_radioTiles--81b06{
+.bp_radio_tiles_module_container--1020c{
+  display:flex;
+  flex-direction:column;
+}
+
+.bp_radio_tiles_module_radioTiles--1020c{
   display:flex;
   gap:var(--space-2);
 }
-.bp_radio_tiles_module_radioTiles--81b06.bp_radio_tiles_module_hasColumns--81b06{
+.bp_radio_tiles_module_radioTiles--1020c.bp_radio_tiles_module_hasColumns--1020c{
   flex-wrap:wrap;
 }
-.bp_radio_tiles_module_radioTiles--81b06.bp_radio_tiles_module_hasColumns--81b06 > *{
+.bp_radio_tiles_module_radioTiles--1020c.bp_radio_tiles_module_hasColumns--1020c > *{
   width:100%;
 }
-.bp_radio_tiles_module_radioTiles--81b06.bp_radio_tiles_module_default--81b06 > *{
+.bp_radio_tiles_module_radioTiles--1020c.bp_radio_tiles_module_default--1020c > *{
   flex:1 1 calc(100%/var(--columns) - var(--space-2));
   width:100%;
 }
-.bp_radio_tiles_module_radioTiles--81b06.bp_radio_tiles_module_compact--81b06 > *{
+.bp_radio_tiles_module_radioTiles--1020c.bp_radio_tiles_module_compact--1020c > *{
   flex:0 1 calc(100%/var(--columns) - var(--space-2) + var(--space-2)/var(--columns));
 }
+
+.bp_radio_tiles_module_inlineError--1020c{
+  margin-block-start:var(--bp-space-020);
+}
 .bp_search_module_search--19aba[data-modern=false]{
   --search-default-padding:var(--space-2);
   --search-input-height:var(--size-10);

package/dist/lib-esm/radio-tiles/radio-tiles.d.ts

@@ -1,4 +1,4 @@
 import { type RadioTilesProps } from './types';
-export declare const RadioTiles: (<T extends string | null = string>({ children, name, value, variant, columns, disabled, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onChange, }: RadioTilesProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+export declare const RadioTiles: (<T extends string | null = string>({ children, name, value, variant, columns, disabled, className, error, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onChange, }: RadioTilesProps<T>) => import("react/jsx-runtime").JSX.Element) & {
     Option: <T extends string>({ children, value, label, icon, disabled: disabledProp, className, "aria-label": ariaLabel, }: import("./types").RadioTilesOptionProps<T>) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/lib-esm/radio-tiles/radio-tiles.js

@@ -1,7 +1,9 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useMemo } from 'react';
 import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
+import { InlineError } from '../primitives/inline-error/inline-error.js';
+import { useUniqueId } from '../utils/useUniqueId.js';
 import { RadioTilesOption } from './radio-tiles-option.js';
 import { RadioTilesContext } from './radio-tiles.context.js';
 import styles from './radio-tiles.module.js';
@@ -14,6 +16,7 @@ const RadioTilesRoot = ({
   columns,
   disabled,
   className,
+  error,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
   onChange
@@ -21,13 +24,15 @@ const RadioTilesRoot = ({
   const containerStyles = {
     '--columns': columns
   };
-  const containerClassNames = clsx(styles.radioTiles, {
+  const radioTilesClassNames = clsx(styles.radioTiles, {
     [styles.hasColumns]: Number(columns) > 0,
     [variant === 'compact' ? styles.compact : styles.default]: true
   }, className);
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const hasError = !!error && !disabled;
+  const inlineErrorId = useUniqueId('inline-error-');
   const contextValue = useMemo(() => ({
     name,
     selectedValue: value,
@@ -36,14 +41,23 @@ const RadioTilesRoot = ({
   }), [name, value, disabled, onChange]);
   return jsx(RadioTilesContext.Provider, {
     value: contextValue,
-    children: jsx("div", {
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      className: containerClassNames,
+    children: jsxs("div", {
+      className: styles.container,
       "data-modern": enableModernizedComponents ? 'true' : 'false',
-      role: "radiogroup",
-      style: containerStyles,
-      children: children
+      children: [jsx("div", {
+        "aria-describedby": hasError ? inlineErrorId : undefined,
+        "aria-invalid": hasError || undefined,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        className: radioTilesClassNames,
+        role: "radiogroup",
+        style: containerStyles,
+        children: children
+      }), hasError ? jsx(InlineError, {
+        className: styles.inlineError,
+        id: inlineErrorId,
+        children: error
+      }) : null]
     })
   });
 };

package/dist/lib-esm/radio-tiles/radio-tiles.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"radioTiles":"bp_radio_tiles_module_radioTiles--81b06","hasColumns":"bp_radio_tiles_module_hasColumns--81b06","default":"bp_radio_tiles_module_default--81b06","compact":"bp_radio_tiles_module_compact--81b06"};
+var styles = {"container":"bp_radio_tiles_module_container--1020c","radioTiles":"bp_radio_tiles_module_radioTiles--1020c","hasColumns":"bp_radio_tiles_module_hasColumns--1020c","default":"bp_radio_tiles_module_default--1020c","compact":"bp_radio_tiles_module_compact--1020c","inlineError":"bp_radio_tiles_module_inlineError--1020c"};
 
 export { styles as default };

package/dist/lib-esm/radio-tiles/types.d.ts

@@ -1,4 +1,4 @@
-import { type ChangeEvent, type CSSProperties, type ReactElement, type SVGProps } from 'react';
+import { type ChangeEvent, type CSSProperties, type ReactElement, type ReactNode, type SVGProps } from 'react';
 /**
  * RadioTilesProps
  */
@@ -19,6 +19,7 @@ export type RadioTilesProps<T extends string | null = string | null> = {
     variant?: 'default' | 'compact';
     disabled?: boolean;
     className?: string;
+    error?: ReactNode;
     onChange: (event: ChangeEvent<HTMLInputElement>) => void;
 } & (WithAriaLabel | WithAriaLabelledBy);
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.105.0",
+    "version": "12.106.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.88.0",
+        "@box/blueprint-web-assets": "^4.88.1",
         "@internationalized/date": "^3.7.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.14.28",
+        "@box/storybook-utils": "^0.14.29",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",