@redis-ui/components 41.4.1 → 42.0.0

package/dist/MidBar/components/Header/Header.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { MidBarHeaderProps } from './Header.types';
+declare const MidBarHeader: (({ tabs, startGroup, middleGroup, endGroup, ...restProps }: MidBarHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
+    Group: ({ position, ...restProps }: import("./components/Group/Group.types").MidBarHeaderGroupProps) => import("react/jsx-runtime").JSX.Element;
+    Compose: (props: import("./components/Compose/Compose.types").MidBarHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
+    TabBar: (({ tabs, ...restProps }: import("../../..").TabsBarProps & import("../../..").RestTabsBarProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: ({ children, variant, ...restProps }: import("../../../Tabs/components/TabBar/components/Compose/Compose.types").TabsBarComposeProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+        Trigger: (({ value, children, ...restProps }: import("../../../Tabs/components/TabBar/components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element) & {
+            Compose: ({ children, ...restProps }: import("../../../Tabs/components/TabBar/components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+            Tab: ({ children, ...restProps }: import("../../..").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+            Marker: (props: import("../../..").ChildFree<import("react").HTMLAttributes<HTMLDivElement>>) => import("react/jsx-runtime").JSX.Element;
+        };
+    };
+};
+export default MidBarHeader;

package/dist/MidBar/components/Header/Header.js

@@ -0,0 +1,32 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import Tabs from "../../../Tabs/Tabs.js";
+import MidBarHeaderGroup from "./components/Group/Group.js";
+import Compose from "./components/Compose/Compose.js";
+const MidBarHeader = Object.assign(({
+  tabs,
+  startGroup,
+  middleGroup,
+  endGroup,
+  ...restProps
+}) => jsxRuntimeExports.jsxs(MidBarHeader.Compose, {
+  ...restProps,
+  children: [startGroup && jsxRuntimeExports.jsx(MidBarHeader.Group, {
+    position: "start",
+    children: startGroup
+  }), !(tabs == null ? void 0 : tabs.length) ? middleGroup && jsxRuntimeExports.jsx(MidBarHeader.Group, {
+    position: "middle",
+    children: middleGroup
+  }) : jsxRuntimeExports.jsx(MidBarHeader.TabBar, {
+    tabs
+  }), endGroup && jsxRuntimeExports.jsx(MidBarHeader.Group, {
+    position: "end",
+    children: endGroup
+  })]
+}), {
+  Group: MidBarHeaderGroup,
+  Compose,
+  TabBar: Tabs.TabBar
+});
+export {
+  MidBarHeader as default
+};

package/dist/MidBar/components/Header/Header.types.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { TabTriggerInfo } from '../../../Tabs/components/TabBar/TabBar.types';
+import { ChildFree } from '../../../Helpers';
+import { MidBarHeaderComposeProps } from './components/Compose/Compose.types';
+export interface OwnMidBarHeaderProps<TValue extends string = string> {
+    tabs?: TabTriggerInfo<TValue>[];
+    startGroup?: React.ReactNode;
+    middleGroup?: React.ReactNode;
+    endGroup?: React.ReactNode;
+}
+export type RestMidBarHeaderProps = ChildFree<MidBarHeaderComposeProps>;
+export interface MidBarHeaderProps<T extends string = string> extends OwnMidBarHeaderProps<T>, RestMidBarHeaderProps {
+}

package/dist/MidBar/components/Header/components/Compose/Compose.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const Compose_style = require("./Compose.style.cjs");
+const Compose = (props) => jsxRuntime.jsxRuntimeExports.jsx(Compose_style.MidBarHeaderCompose, {
+  ...props
+});
+exports.default = Compose;

package/dist/MidBar/components/Header/components/Compose/Compose.d.ts

@@ -0,0 +1,3 @@
+import { MidBarHeaderComposeProps } from './Compose.types';
+declare const Compose: (props: MidBarHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
+export default Compose;

package/dist/MidBar/components/Header/components/Compose/Compose.js

@@ -0,0 +1,8 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { MidBarHeaderCompose } from "./Compose.style.js";
+const Compose = (props) => jsxRuntimeExports.jsx(MidBarHeaderCompose, {
+  ...props
+});
+export {
+  Compose as default
+};

package/dist/MidBar/components/Header/components/Compose/Compose.style.cjs

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Compose_style = require("../../../../../Tabs/components/TabBar/components/Compose/Compose.style.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const MidBarHeaderCompose = _styled__default.default.div.withConfig({
+  displayName: "Composestyle__MidBarHeaderCompose",
+  componentId: "RedisUI__sc-un4fa3-0"
+})(["display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:'start middle end';align-items:center;", ""], () => {
+  const tabsTheme = redisUiStyles.useTheme().components.tabs;
+  const midBarTheme = redisUiStyles.useTheme().components.midBar;
+  return _styled.css`
+      min-height: ${midBarTheme.header.height};
+      padding-inline: ${midBarTheme.header.paddingInline};
+      gap: ${midBarTheme.header.gap};
+      border-top: ${tabsTheme.variants.default.tabsLine.size} solid transparent;
+      border-bottom: ${tabsTheme.variants.default.tabsLine.size} solid
+        ${tabsTheme.variants.default.tabsLine.color};
+
+      & ${Compose_style.TabsBarCompose} {
+        width: auto;
+        border-bottom: none;
+        align-self: stretch;
+        grid-area: middle;
+        gap: ${midBarTheme.header.tabBar.gap};
+      }
+    `;
+});
+exports.MidBarHeaderCompose = MidBarHeaderCompose;

package/dist/MidBar/components/Header/components/Compose/Compose.style.d.ts

@@ -0,0 +1 @@
+export declare const MidBarHeaderCompose: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/MidBar/components/Header/components/Compose/Compose.style.js

@@ -0,0 +1,29 @@
+import _styled, { css } from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { TabsBarCompose } from "../../../../../Tabs/components/TabBar/components/Compose/Compose.style.js";
+const MidBarHeaderCompose = _styled.div.withConfig({
+  displayName: "Composestyle__MidBarHeaderCompose",
+  componentId: "RedisUI__sc-un4fa3-0"
+})(["display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:'start middle end';align-items:center;", ""], () => {
+  const tabsTheme = useTheme().components.tabs;
+  const midBarTheme = useTheme().components.midBar;
+  return css`
+      min-height: ${midBarTheme.header.height};
+      padding-inline: ${midBarTheme.header.paddingInline};
+      gap: ${midBarTheme.header.gap};
+      border-top: ${tabsTheme.variants.default.tabsLine.size} solid transparent;
+      border-bottom: ${tabsTheme.variants.default.tabsLine.size} solid
+        ${tabsTheme.variants.default.tabsLine.color};
+
+      & ${TabsBarCompose} {
+        width: auto;
+        border-bottom: none;
+        align-self: stretch;
+        grid-area: middle;
+        gap: ${midBarTheme.header.tabBar.gap};
+      }
+    `;
+});
+export {
+  MidBarHeaderCompose
+};

package/dist/MidBar/components/Header/components/Compose/Compose.types.d.ts

@@ -0,0 +1,2 @@
+import { ComposeElementProps } from '../../../../../Helpers';
+export type MidBarHeaderComposeProps = ComposeElementProps;

package/dist/MidBar/components/Header/components/Group/Group.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const Group_style = require("./Group.style.cjs");
+const MidBarHeaderGroup = ({
+  position,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(Group_style.MidBarHeaderGroup, {
+  "$position": position,
+  ...restProps
+});
+exports.default = MidBarHeaderGroup;

package/dist/MidBar/components/Header/components/Group/Group.d.ts

@@ -0,0 +1,3 @@
+import type { MidBarHeaderGroupProps } from './Group.types';
+declare const MidBarHeaderGroup: ({ position, ...restProps }: MidBarHeaderGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default MidBarHeaderGroup;

package/dist/MidBar/components/Header/components/Group/Group.js

@@ -0,0 +1,12 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { MidBarHeaderGroup as MidBarHeaderGroup$1 } from "./Group.style.js";
+const MidBarHeaderGroup = ({
+  position,
+  ...restProps
+}) => jsxRuntimeExports.jsx(MidBarHeaderGroup$1, {
+  "$position": position,
+  ...restProps
+});
+export {
+  MidBarHeaderGroup as default
+};

package/dist/MidBar/components/Header/components/Group/Group.style.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const MidBarHeaderGroup = _styled__default.default.div.withConfig({
+  displayName: "Groupstyle__MidBarHeaderGroup",
+  componentId: "RedisUI__sc-ennaru-0"
+})(["display:flex;align-items:center;grid-area:", ";", " ", ""], ({
+  $position
+}) => $position, ({
+  $position
+}) => $position === "end" && _styled.css`
+      justify-content: flex-end;
+    `, () => {
+  const theme = redisUiStyles.useTheme().components.midBar;
+  return _styled.css`
+      gap: ${theme.header.group.gap};
+    `;
+});
+exports.MidBarHeaderGroup = MidBarHeaderGroup;

package/dist/MidBar/components/Header/components/Group/Group.style.d.ts

@@ -0,0 +1,4 @@
+import { MidBarHeaderGroupPosition } from './Group.types';
+export declare const MidBarHeaderGroup: import("styled-components").StyledComponent<"div", any, {
+    $position: MidBarHeaderGroupPosition;
+}, never>;

package/dist/MidBar/components/Header/components/Group/Group.style.js

@@ -0,0 +1,20 @@
+import _styled, { css } from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const MidBarHeaderGroup = _styled.div.withConfig({
+  displayName: "Groupstyle__MidBarHeaderGroup",
+  componentId: "RedisUI__sc-ennaru-0"
+})(["display:flex;align-items:center;grid-area:", ";", " ", ""], ({
+  $position
+}) => $position, ({
+  $position
+}) => $position === "end" && css`
+      justify-content: flex-end;
+    `, () => {
+  const theme = useTheme().components.midBar;
+  return css`
+      gap: ${theme.header.group.gap};
+    `;
+});
+export {
+  MidBarHeaderGroup
+};

package/dist/MidBar/components/Header/components/Group/Group.types.d.ts

@@ -0,0 +1,5 @@
+import { ComposeElementProps } from '../../../../../Helpers';
+export type MidBarHeaderGroupPosition = 'start' | 'middle' | 'end';
+export interface MidBarHeaderGroupProps extends ComposeElementProps {
+    position: MidBarHeaderGroupPosition;
+}

package/dist/MidBar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MidBar } from './MidBar';
+export * from './MidBar.types';

package/dist/MoreInfoIcon/MoreInfoIcon.style.cjs

@@ -7,5 +7,5 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const TooltipTrigger = _styled__default.default.span.withConfig({
   displayName: "MoreInfoIconstyle__TooltipTrigger",
   componentId: "RedisUI__sc-1wx6c2q-0"
-})(["display:inline-flex;color:", ";"], () => redisUiStyles.useTheme().components.moreInfoIcon.iconColor);
+})(["display:inline-flex;color:", ";width:fit-content;"], () => redisUiStyles.useTheme().components.moreInfoIcon.iconColor);
 exports.TooltipTrigger = TooltipTrigger;

package/dist/MoreInfoIcon/MoreInfoIcon.style.js

@@ -3,7 +3,7 @@ import { useTheme } from "@redislabsdev/redis-ui-styles";
 const TooltipTrigger = _styled.span.withConfig({
   displayName: "MoreInfoIconstyle__TooltipTrigger",
   componentId: "RedisUI__sc-1wx6c2q-0"
-})(["display:inline-flex;color:", ";"], () => useTheme().components.moreInfoIcon.iconColor);
+})(["display:inline-flex;color:", ";width:fit-content;"], () => useTheme().components.moreInfoIcon.iconColor);
 export {
   TooltipTrigger
 };

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,