@redis-ui/components 41.11.0 → 42.0.0

package/dist/Button/Button.style.cjs

@@ -25,7 +25,7 @@ const baseButtonStyle = _styled.css`
   }
 `;
 const sizeTokenMaps = [css_utils.tokenMaps.borderRadius, css_utils.tokenMaps.padding, css_utils.tokenMaps.height, css_utils.tokenMaps.lineHeight];
-const variantTokenMaps = [css_utils.tokenMaps.bgColor, css_utils.tokenMaps.textColor, css_utils.tokenMaps.shadowBorder];
+const variantTokenMaps = [css_utils.tokenMaps.bgColor, css_utils.tokenMaps.bgGradient, css_utils.tokenMaps.textColor, css_utils.tokenMaps.shadowBorder];
 const Button = _styled__default.default.button.withConfig({
   displayName: "Buttonstyle__Button",
   componentId: "RedisUI__sc-6zckac-0"

package/dist/Button/Button.style.js

@@ -21,7 +21,7 @@ const baseButtonStyle = css`
   }
 `;
 const sizeTokenMaps = [tokenMaps.borderRadius, tokenMaps.padding, tokenMaps.height, tokenMaps.lineHeight];
-const variantTokenMaps = [tokenMaps.bgColor, tokenMaps.textColor, tokenMaps.shadowBorder];
+const variantTokenMaps = [tokenMaps.bgColor, tokenMaps.bgGradient, tokenMaps.textColor, tokenMaps.shadowBorder];
 const Button = _styled.button.withConfig({
   displayName: "Buttonstyle__Button",
   componentId: "RedisUI__sc-6zckac-0"

package/dist/Button/Button.types.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const buttonSizes = ["large", "medium", "small"];
-const buttonVariants = ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost"];
+const buttonVariants = ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost", "upsell"];
 exports.buttonSizes = buttonSizes;
 exports.buttonVariants = buttonVariants;

package/dist/Button/Button.types.d.ts

@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 import { Theme } from '@redislabsdev/redis-ui-styles';
 export declare const buttonSizes: readonly ["large", "medium", "small"];
-export declare const buttonVariants: readonly ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost"];
+export declare const buttonVariants: readonly ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost", "upsell"];
 export type ButtonSizes = (typeof buttonSizes)[number];
 export type ButtonVariants = (typeof buttonVariants)[number];
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {

package/dist/Button/Button.types.js

@@ -1,5 +1,5 @@
 const buttonSizes = ["large", "medium", "small"];
-const buttonVariants = ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost"];
+const buttonVariants = ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost", "upsell"];
 export {
   buttonSizes,
   buttonVariants

package/dist/Chip/Chip.cjs

@@ -7,6 +7,7 @@ const Title = require("./components/Title/Title.cjs");
 const Chip = Object.assign(({
   text,
   onClose,
+  closeButtonTitle,
   ...restProps
 }) => {
   return jsxRuntime.jsxRuntimeExports.jsxs(Chip.Compose, {
@@ -14,7 +15,8 @@ const Chip = Object.assign(({
     children: [jsxRuntime.jsxRuntimeExports.jsx(Chip.Title, {
       children: text
     }), jsxRuntime.jsxRuntimeExports.jsx(Chip.CloseButton, {
-      onClose
+      onClose,
+      title: closeButtonTitle
     })]
   });
 }, {

package/dist/Chip/Chip.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { ChipProps } from './Chip.types';
-declare const Chip: (({ text, onClose, ...restProps }: ChipProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const Chip: (({ text, onClose, closeButtonTitle, ...restProps }: ChipProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ size, variant, disabled, tooltip, ...restProps }: import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLSpanElement>, "content" | "children"> & import("./components/Compose/Compose.types").ChipComposeProps) => import("react/jsx-runtime").JSX.Element;
     Title: ({ size, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
-    CloseButton: ({ onClose, icon: Icon, ...restProps }: Pick<import("react").HTMLAttributes<HTMLElement>, "style" | "className"> & {
+    CloseButton: ({ onClose, icon: Icon, title, ...restProps }: Pick<import("react").HTMLAttributes<HTMLElement>, "style" | "title" | "className"> & {
         icon?: import("@redislabsdev/redis-ui-icons/monochrome").IconType | undefined;
     } & import("./components/CloseButton/CloseButton.types").ChipCloseButtonProps) => import("react/jsx-runtime").JSX.Element | null;
 };

package/dist/Chip/Chip.js

@@ -5,6 +5,7 @@ import { Title } from "./components/Title/Title.js";
 const Chip = Object.assign(({
   text,
   onClose,
+  closeButtonTitle,
   ...restProps
 }) => {
   return jsxRuntimeExports.jsxs(Chip.Compose, {
@@ -12,7 +13,8 @@ const Chip = Object.assign(({
     children: [jsxRuntimeExports.jsx(Chip.Title, {
       children: text
     }), jsxRuntimeExports.jsx(Chip.CloseButton, {
-      onClose
+      onClose,
+      title: closeButtonTitle
     })]
   });
 }, {

package/dist/Chip/Chip.types.d.ts

@@ -1,8 +1,9 @@
 import type { ChipComposeProps, RestChipComposeProps } from './components/Compose/Compose.types';
 import type { ChipCloseButtonProps } from './components/CloseButton/CloseButton.types';
-import type { ChildFree } from '../Helpers/common.types';
+import type { ChildFree } from '../Helpers';
 export interface ChipProps extends ChipComposeProps, ChildFree<RestChipComposeProps>, ChipCloseButtonProps {
     text: string;
+    closeButtonTitle?: string;
 }
 export type ChipSizes = 'M' | 'S';
 export type ChipVariants = 'regular' | 'flat';

package/dist/Chip/components/CloseButton/CloseButton.cjs

@@ -11,6 +11,7 @@ const sizeMapper = {
 const CloseButton = ({
   onClose,
   icon: Icon = redisUiIcons.ToastCancelIcon,
+  title = "Remove",
   ...restProps
 }) => {
   const {
@@ -29,7 +30,7 @@ const CloseButton = ({
     onClick: handleRemoveChip,
     "$size": size,
     "$variant": variant,
-    title: "Remove",
+    title,
     ...restProps,
     children: jsxRuntime.jsxRuntimeExports.jsx(Icon, {
       size: sizeMapper[size],

package/dist/Chip/components/CloseButton/CloseButton.d.ts

@@ -1,2 +1,2 @@
 import { ChipCloseButtonProps, RestChipCloseButtonProps } from './CloseButton.types';
-export declare const CloseButton: ({ onClose, icon: Icon, ...restProps }: RestChipCloseButtonProps & ChipCloseButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CloseButton: ({ onClose, icon: Icon, title, ...restProps }: RestChipCloseButtonProps & ChipCloseButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Chip/components/CloseButton/CloseButton.js

@@ -9,6 +9,7 @@ const sizeMapper = {
 const CloseButton = ({
   onClose,
   icon: Icon = ToastCancelIcon,
+  title = "Remove",
   ...restProps
 }) => {
   const {
@@ -27,7 +28,7 @@ const CloseButton = ({
     onClick: handleRemoveChip,
     "$size": size,
     "$variant": variant,
-    title: "Remove",
+    title,
     ...restProps,
     children: jsxRuntimeExports.jsx(Icon, {
       size: sizeMapper[size],

package/dist/Chip/components/CloseButton/CloseButton.types.d.ts

@@ -3,6 +3,6 @@ import { IconType } from '@redislabsdev/redis-ui-icons';
 export type ChipCloseButtonProps = {
     onClose?: VoidFunction;
 };
-export type RestChipCloseButtonProps = Pick<HTMLAttributes<HTMLElement>, 'className' | 'style'> & {
+export type RestChipCloseButtonProps = Pick<HTMLAttributes<HTMLElement>, 'className' | 'style' | 'title'> & {
     icon?: IconType;
 };

package/dist/ChipList/ChipList.cjs

@@ -7,6 +7,7 @@ const ChipList_style = require("./ChipList.style.cjs");
 const ChipList = ({
   chips,
   onRemoveItem,
+  removeItemButtonTitle,
   maxRows = 1,
   size = "M",
   variant,
@@ -28,6 +29,7 @@ const ChipList = ({
   children: chips.map((item) => jsxRuntime.jsxRuntimeExports.jsx(Chip.default, {
     text: item.label,
     onClose: onRemoveItem ? () => onRemoveItem(item.key) : void 0,
+    closeButtonTitle: removeItemButtonTitle,
     tooltip: item.tooltip,
     size,
     variant,

package/dist/ChipList/ChipList.d.ts

@@ -1,3 +1,3 @@
 import { ChipListProps } from './ChipList.types';
-declare const ChipList: ({ chips, onRemoveItem, maxRows, size, variant, disabled, renderExtraTooltip, ...restProps }: ChipListProps) => import("react/jsx-runtime").JSX.Element;
+declare const ChipList: ({ chips, onRemoveItem, removeItemButtonTitle, maxRows, size, variant, disabled, renderExtraTooltip, ...restProps }: ChipListProps) => import("react/jsx-runtime").JSX.Element;
 export default ChipList;

package/dist/ChipList/ChipList.js

@@ -5,6 +5,7 @@ import { ChipListOverflow } from "./ChipList.style.js";
 const ChipList = ({
   chips,
   onRemoveItem,
+  removeItemButtonTitle,
   maxRows = 1,
   size = "M",
   variant,
@@ -26,6 +27,7 @@ const ChipList = ({
   children: chips.map((item) => jsxRuntimeExports.jsx(Chip, {
     text: item.label,
     onClose: onRemoveItem ? () => onRemoveItem(item.key) : void 0,
+    closeButtonTitle: removeItemButtonTitle,
     tooltip: item.tooltip,
     size,
     variant,

package/dist/ChipList/ChipList.types.d.ts

@@ -10,6 +10,7 @@ export interface ChipItem extends HTMLAttributes<HTMLSpanElement> {
 export interface ChipListProps {
     chips: ChipItem[];
     onRemoveItem?: (chip: string) => void;
+    removeItemButtonTitle?: string;
     maxRows?: number;
     size?: ChipSizes;
     variant?: ChipVariants;

package/dist/Helpers/css.utils.cjs

@@ -34,6 +34,10 @@ const tokenMaps = {
     cssProp: "background-color",
     token: "bgColor"
   },
+  bgGradient: {
+    cssProp: "background-image",
+    token: "bgGradient"
+  },
   textColor: {
     cssProp: "color",
     token: "textColor"

package/dist/Helpers/css.utils.js

@@ -32,6 +32,10 @@ const tokenMaps = {
     cssProp: "background-color",
     token: "bgColor"
   },
+  bgGradient: {
+    cssProp: "background-image",
+    token: "bgGradient"
+  },
   textColor: {
     cssProp: "color",
     token: "textColor"

package/dist/RadioGroup/RadioGroup.cjs

@@ -1,39 +1,21 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const React = require("react");
 const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
 const Item = require("./components/Item/Item.cjs");
 const Compose = require("./components/Compose/Compose.cjs");
-const Label = require("../Label/Label.cjs");
 const RadioGroup = Object.assign(({
-  label,
-  required = false,
-  optional = false,
-  infoIconProps,
-  initialValue,
-  defaultValue = initialValue,
   items,
-  children,
   ...restProps
-}) => jsxRuntime.jsxRuntimeExports.jsxs(RadioGroup.Compose, {
-  defaultValue,
+}) => jsxRuntime.jsxRuntimeExports.jsx(RadioGroup.Compose, {
   ...restProps,
-  children: [label && jsxRuntime.jsxRuntimeExports.jsx(RadioGroup.Label, {
-    label,
-    infoIconProps,
-    required,
-    optional
-  }), items ? items.map((item) => React.createElement(RadioGroup.Item, {
+  children: items.map((item) => React.createElement(RadioGroup.Item, {
     ...item,
     key: item.value
-  })) : children]
+  }))
 }), {
   Compose: Compose.Compose,
-  Item: Item.default,
-  /**
-   * @deprecated use global `Label` or `FormField` instead
-   */
-  Label: Label.default
+  Item: Item.default
 });
 const RadioGroup$1 = RadioGroup;
 exports.default = RadioGroup$1;

package/dist/RadioGroup/RadioGroup.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { RadioGroupProps, RestRadioGroupProps } from './RadioGroup.types';
-declare const RadioGroup: (({ label, required, optional, infoIconProps, initialValue, defaultValue, items, children, ...restProps }: RestRadioGroupProps & RadioGroupProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: ({ id, onChange, disabled, layout, readOnly, ...restProps }: Pick<import("@radix-ui/react-radio-group").RadioGroupProps, "defaultValue" | "disabled" | "value"> & {
+declare const RadioGroup: (({ items, ...restProps }: RestRadioGroupProps & RadioGroupProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: ({ id, onChange, value: valueProp, defaultValue, disabled, layout, readOnly, ...restProps }: Pick<import("@radix-ui/react-radio-group").RadioGroupProps, "defaultValue" | "disabled" | "value"> & {
         onChange?: ((value: string) => void) | undefined;
         layout?: "horizontal" | "vertical" | undefined;
         readOnly?: boolean | undefined;
@@ -11,17 +10,5 @@ declare const RadioGroup: (({ label, required, optional, infoIconProps, initialV
         Indicator: ({ ...restProps }: import("./components/Item/components/Indicator/Indicator.types").IndicatorProps) => import("react/jsx-runtime").JSX.Element;
         Label: ({ children, ...restProps }: import("./components/Item/components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element;
     };
-    /**
-     * @deprecated use global `Label` or `FormField` instead
-     */
-    Label: (({ label, infoIconProps, required, optional, readOnly, ...restProps }: import("../Label").LabelProps) => import("react/jsx-runtime").JSX.Element) & {
-        Text: ({ children, readOnly, ...restProps }: import("../Label/components/Text/Text.types").TextProps) => import("react/jsx-runtime").JSX.Element;
-        InfoIcon: ({ size, text, content, ...tooltipProps }: import("../Label/components/InfoIcon/InfoIcon.types").InfoIconProps) => import("react/jsx-runtime").JSX.Element;
-        Required: ({ children, show, size, ...restProps }: import("../Label/components/Required/Required.types").RequiredProps) => import("react/jsx-runtime").JSX.Element | null;
-        Optional: ({ children, show, size, ...restProps }: import("../Label/components/Optional/Optional.types").OptionalProps) => import("react/jsx-runtime").JSX.Element | null;
-        Compose: ({ htmlFor, show, ...props }: import("react").LabelHTMLAttributes<HTMLLabelElement> & {
-            show?: boolean | undefined;
-        }) => import("react/jsx-runtime").JSX.Element | null;
-    };
 };
 export default RadioGroup;

package/dist/RadioGroup/RadioGroup.js

@@ -1,37 +1,19 @@
-import { createElement } from "react";
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { createElement } from "react";
 import Item from "./components/Item/Item.js";
 import { Compose } from "./components/Compose/Compose.js";
-import Label from "../Label/Label.js";
 const RadioGroup = Object.assign(({
-  label,
-  required = false,
-  optional = false,
-  infoIconProps,
-  initialValue,
-  defaultValue = initialValue,
   items,
-  children,
   ...restProps
-}) => jsxRuntimeExports.jsxs(RadioGroup.Compose, {
-  defaultValue,
+}) => jsxRuntimeExports.jsx(RadioGroup.Compose, {
   ...restProps,
-  children: [label && jsxRuntimeExports.jsx(RadioGroup.Label, {
-    label,
-    infoIconProps,
-    required,
-    optional
-  }), items ? items.map((item) => createElement(RadioGroup.Item, {
+  children: items.map((item) => createElement(RadioGroup.Item, {
     ...item,
     key: item.value
-  })) : children]
+  }))
 }), {
   Compose,
-  Item,
-  /**
-   * @deprecated use global `Label` or `FormField` instead
-   */
-  Label
+  Item
 });
 const RadioGroup$1 = RadioGroup;
 export {

package/dist/RadioGroup/RadioGroup.types.d.ts

@@ -1,32 +1,6 @@
-import { ReactNode } from 'react';
-import { InfoIconProps } from '../Label/components/InfoIcon/InfoIcon.types';
 import { RadioGroupComposeProps, RestRadioGroupComposeProps } from './components/Compose/Compose.types';
 export interface RadioGroupProps extends RadioGroupComposeProps {
-    items?: RadioGroupItem[];
-    /**
-     * @deprecated use `defaultValue` instead
-     */
-    initialValue?: string;
-    /**
-     * @deprecated use global `Label` or `FormField` instead
-     */
-    label?: string;
-    /**
-     * @deprecated use global `Label` or `FormField` instead
-     */
-    infoIconProps?: InfoIconProps;
-    /**
-     * @deprecated use global `Label` or `FormField` instead
-     */
-    required?: boolean;
-    /**
-     * @deprecated use global `Label` or `FormField` instead
-     */
-    optional?: boolean;
-    /**
-     * @deprecated use `items` prop or `Compose` with `children` instead
-     */
-    children?: ReactNode;
+    items: RadioGroupItem[];
 }
 export type RestRadioGroupProps = Omit<RestRadioGroupComposeProps, 'children'>;
 export type RadioGroupItem = {

package/dist/RadioGroup/components/Compose/Compose.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const index = require("../../../node_modules/@radix-ui/react-use-controllable-state/dist/index.cjs");
 const Compose_style = require("./Compose.style.cjs");
 const Field_context = require("../../../Inputs/components/Context/Field.context.cjs");
 const SharedId_context = require("../../../Helpers/contexts/SharedId.context.cjs");
@@ -8,22 +9,32 @@ const FormField_context = require("../../../FormField/FormField.context.cjs");
 const Compose = ({
   id,
   onChange,
+  value: valueProp,
+  defaultValue,
   disabled,
   layout,
   readOnly,
   ...restProps
-}) => jsxRuntime.jsxRuntimeExports.jsx(SharedId_context.SharedIdTransProvider, {
-  customId: id,
-  children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldReadonlyTransProvider, {
-    value: readOnly,
-    children: jsxRuntime.jsxRuntimeExports.jsx(Field_context.FieldDisabledTransProvider, {
-      value: disabled,
-      children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.RadioGroupCompose, {
-        onValueChange: onChange,
-        orientation: layout,
-        ...restProps
+}) => {
+  const [value = "", setValue] = index.useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue,
+    onChange
+  });
+  return jsxRuntime.jsxRuntimeExports.jsx(SharedId_context.SharedIdTransProvider, {
+    customId: id,
+    children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldReadonlyTransProvider, {
+      value: readOnly,
+      children: jsxRuntime.jsxRuntimeExports.jsx(Field_context.FieldDisabledTransProvider, {
+        value: disabled,
+        children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.RadioGroupCompose, {
+          onValueChange: readOnly ? void 0 : setValue,
+          value,
+          orientation: layout,
+          ...restProps
+        })
       })
     })
-  })
-});
+  });
+};
 exports.Compose = Compose;

package/dist/RadioGroup/components/Compose/Compose.d.ts

@@ -1,2 +1,2 @@
 import { RadioGroupComposeProps, RestRadioGroupComposeProps } from './Compose.types';
-export declare const Compose: ({ id, onChange, disabled, layout, readOnly, ...restProps }: RadioGroupComposeProps & RestRadioGroupComposeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Compose: ({ id, onChange, value: valueProp, defaultValue, disabled, layout, readOnly, ...restProps }: RadioGroupComposeProps & RestRadioGroupComposeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/RadioGroup/components/Compose/Compose.js

@@ -1,4 +1,5 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { useControllableState } from "../../../node_modules/@radix-ui/react-use-controllable-state/dist/index.js";
 import { RadioGroupCompose } from "./Compose.style.js";
 import { FieldDisabledTransProvider } from "../../../Inputs/components/Context/Field.context.js";
 import { SharedIdTransProvider } from "../../../Helpers/contexts/SharedId.context.js";
@@ -6,24 +7,34 @@ import { FieldReadonlyTransProvider } from "../../../FormField/FormField.context
 const Compose = ({
   id,
   onChange,
+  value: valueProp,
+  defaultValue,
   disabled,
   layout,
   readOnly,
   ...restProps
-}) => jsxRuntimeExports.jsx(SharedIdTransProvider, {
-  customId: id,
-  children: jsxRuntimeExports.jsx(FieldReadonlyTransProvider, {
-    value: readOnly,
-    children: jsxRuntimeExports.jsx(FieldDisabledTransProvider, {
-      value: disabled,
-      children: jsxRuntimeExports.jsx(RadioGroupCompose, {
-        onValueChange: onChange,
-        orientation: layout,
-        ...restProps
+}) => {
+  const [value = "", setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue,
+    onChange
+  });
+  return jsxRuntimeExports.jsx(SharedIdTransProvider, {
+    customId: id,
+    children: jsxRuntimeExports.jsx(FieldReadonlyTransProvider, {
+      value: readOnly,
+      children: jsxRuntimeExports.jsx(FieldDisabledTransProvider, {
+        value: disabled,
+        children: jsxRuntimeExports.jsx(RadioGroupCompose, {
+          onValueChange: readOnly ? void 0 : setValue,
+          value,
+          orientation: layout,
+          ...restProps
+        })
       })
     })
-  })
-});
+  });
+};
 export {
   Compose
 };

package/dist/RadioGroup/components/Compose/Compose.style.cjs

@@ -9,7 +9,9 @@ const SharedId_context = require("../../../Helpers/contexts/SharedId.context.cjs
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const RadioGroupCompose = _styled__default.default(index.Root).attrs(() => ({
-  tabIndex: FormField_context.useFieldReadonly() ? -1 : void 0,
+  ...FormField_context.useFieldReadonly() ? {
+    tabIndex: -1
+  } : null,
   disabled: Field_context.useFieldDisabled() ? true : void 0,
   id: SharedId_context.useSharedId()
 })).withConfig({

package/dist/RadioGroup/components/Compose/Compose.style.js

@@ -5,7 +5,9 @@ import { useFieldReadonly } from "../../../FormField/FormField.context.js";
 import { useFieldDisabled } from "../../../Inputs/components/Context/Field.context.js";
 import { useSharedId } from "../../../Helpers/contexts/SharedId.context.js";
 const RadioGroupCompose = _styled(Root2).attrs(() => ({
-  tabIndex: useFieldReadonly() ? -1 : void 0,
+  ...useFieldReadonly() ? {
+    tabIndex: -1
+  } : null,
   disabled: useFieldDisabled() ? true : void 0,
   id: useSharedId()
 })).withConfig({

package/dist/RadioGroup/components/Item/Item.context.cjs

@@ -1,13 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const ItemContext = React.createContext(null);
-function useItemContext() {
-  const itemContext = React.useContext(ItemContext);
-  if (!itemContext) {
-    throw new Error(`Item compound components cannot be rendered outside the Item component`);
-  }
-  return itemContext;
-}
-exports.ItemContext = ItemContext;
+const NullableContext = require("../../../Helpers/contexts/NullableContext.cjs");
+const [useItemContext, ItemContextProvider] = NullableContext.createNullableContext({
+  forComponentName: "RadioGroupItem"
+});
+exports.ItemContextProvider = ItemContextProvider;
 exports.useItemContext = useItemContext;

package/dist/RadioGroup/components/Item/Item.context.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 import { ItemContextType } from './components/Compose/Compose.types';
-export declare const ItemContext: import("react").Context<ItemContextType | null>;
-export declare function useItemContext(): ItemContextType;
+export declare const useItemContext: () => ItemContextType, ItemContextProvider: import("react").Provider<ItemContextType>;

package/dist/RadioGroup/components/Item/Item.context.js

@@ -1,13 +1,8 @@
-import { createContext, useContext } from "react";
-const ItemContext = createContext(null);
-function useItemContext() {
-  const itemContext = useContext(ItemContext);
-  if (!itemContext) {
-    throw new Error(`Item compound components cannot be rendered outside the Item component`);
-  }
-  return itemContext;
-}
+import { createNullableContext } from "../../../Helpers/contexts/NullableContext.js";
+const [useItemContext, ItemContextProvider] = createNullableContext({
+  forComponentName: "RadioGroupItem"
+});
 export {
-  ItemContext,
+  ItemContextProvider,
   useItemContext
 };

package/dist/RadioGroup/components/Item/components/Compose/Compose.cjs

@@ -18,7 +18,7 @@ const Compose = ({
   }), [value, disabled]);
   return jsxRuntime.jsxRuntimeExports.jsx(SharedId_context.SharedIdProvider, {
     customId: id,
-    children: jsxRuntime.jsxRuntimeExports.jsx(Item_context.ItemContext.Provider, {
+    children: jsxRuntime.jsxRuntimeExports.jsx(Item_context.ItemContextProvider, {
       value: contextValue,
       children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.RadioGroupItemCompose, {
         ...restProps,

package/dist/RadioGroup/components/Item/components/Compose/Compose.js

@@ -1,6 +1,6 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import { useMemo } from "react";
-import { ItemContext } from "../../Item.context.js";
+import { ItemContextProvider } from "../../Item.context.js";
 import { RadioGroupItemCompose } from "./Compose.style.js";
 import { SharedIdProvider } from "../../../../../Helpers/contexts/SharedId.context.js";
 const Compose = ({
@@ -16,7 +16,7 @@ const Compose = ({
   }), [value, disabled]);
   return jsxRuntimeExports.jsx(SharedIdProvider, {
     customId: id,
-    children: jsxRuntimeExports.jsx(ItemContext.Provider, {
+    children: jsxRuntimeExports.jsx(ItemContextProvider, {
       value: contextValue,
       children: jsxRuntimeExports.jsx(RadioGroupItemCompose, {
         ...restProps,

package/dist/RadioGroup/components/Item/components/Indicator/Indicator.cjs

@@ -17,7 +17,9 @@ const Indicator = ({
     disabled,
     id: SharedId_context.useSharedId(),
     ...restProps,
-    tabIndex: FormField_context.useFieldReadonly() ? -1 : void 0,
+    ...FormField_context.useFieldReadonly() ? {
+      tabIndex: -1
+    } : null,
     children: jsxRuntime.jsxRuntimeExports.jsx(Indicator_style.RadioGroupItemIndicatorCheck, {})
   });
 };

package/dist/RadioGroup/components/Item/components/Indicator/Indicator.js

@@ -15,7 +15,9 @@ const Indicator = ({
     disabled,
     id: useSharedId(),
     ...restProps,
-    tabIndex: useFieldReadonly() ? -1 : void 0,
+    ...useFieldReadonly() ? {
+      tabIndex: -1
+    } : null,
     children: jsxRuntimeExports.jsx(RadioGroupItemIndicatorCheck, {})
   });
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/components",
   "license": "UNLICENSED",
-  "version": "41.11.0",
+  "version": "42.0.0",
   "type": "module",
   "sideEffects": false,
   "publishConfig": {