@redis-ui/components 41.11.0 → 42.7.0

package/dist/ProgressBar/{ProgressBar.styles.cjs → ProgressBar.style.cjs}

@@ -7,16 +7,16 @@ const Typography = require("../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const Root = _styled__default.default(index.Root).withConfig({
-  displayName: "ProgressBarstyles__Root",
-  componentId: "RedisUI__sc-caf7e3-0"
+  displayName: "ProgressBarstyle__Root",
+  componentId: "RedisUI__sc-cdzix5-0"
 })(["overflow:hidden;width:100%;height:", ";background-color:", ";border-radius:", ";"], ({
   size
 }) => redisUiStyles.useTheme().components.progressBar.size[size].size, ({
   variant
 }) => redisUiStyles.useTheme().components.progressBar.variant[variant].color, () => redisUiStyles.useTheme().components.progressBar.borderRadius);
 const Indicator = _styled__default.default(index.Indicator).withConfig({
-  displayName: "ProgressBarstyles__Indicator",
-  componentId: "RedisUI__sc-caf7e3-1"
+  displayName: "ProgressBarstyle__Indicator",
+  componentId: "RedisUI__sc-cdzix5-1"
 })(["width:100%;height:100%;background-color:", ";transform:", ";transition:transform 660ms cubic-bezier(0.65,0,0.35,1);"], ({
   variant
 }) => redisUiStyles.useTheme().components.progressBar.indicator.variant[variant].color, ({
@@ -36,8 +36,8 @@ const getStyleByPosition = (position) => {
   `;
 };
 const ProgressBar = _styled__default.default.div.withConfig({
-  displayName: "ProgressBarstyles__ProgressBar",
-  componentId: "RedisUI__sc-caf7e3-2"
+  displayName: "ProgressBarstyle__ProgressBar",
+  componentId: "RedisUI__sc-cdzix5-2"
 })(["display:flex;", ";gap:", ";", "{order:", ";}"], ({
   textPosition
 }) => getStyleByPosition(textPosition), ({
@@ -49,8 +49,8 @@ const ProgressBar = _styled__default.default.div.withConfig({
   textPosition: position
 }) => position === "top" || position === "left" ? 1 : 0);
 const TypographyBody = _styled__default.default(Typography.default.Body).withConfig({
-  displayName: "ProgressBarstyles__TypographyBody",
-  componentId: "RedisUI__sc-caf7e3-3"
+  displayName: "ProgressBarstyle__TypographyBody",
+  componentId: "RedisUI__sc-cdzix5-3"
 })(["color:", ";"], () => redisUiStyles.useTheme().components.progressBar.text.color);
 exports.Indicator = Indicator;
 exports.ProgressBar = ProgressBar;

package/dist/ProgressBar/{ProgressBar.styles.d.ts → ProgressBar.style.d.ts}

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as RadixProgressBar from '@radix-ui/react-progress';
 import { ProgressBarTextPosition, ProgressBarSize, ProgressBarVariant } from './ProgressBar.types';
 export declare const Root: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadixProgressBar.ProgressProps & import("react").RefAttributes<HTMLDivElement>>, any, {
@@ -10,6 +9,6 @@ export declare const Indicator: import("styled-components").StyledComponent<impo
     variant: ProgressBarVariant;
 }, never>;
 export declare const ProgressBar: import("styled-components").StyledComponent<"div", any, {
-    textPosition?: ProgressBarTextPosition | undefined;
+    textPosition?: ProgressBarTextPosition;
 }, never>;
 export declare const TypographyBody: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/ProgressBar/{ProgressBar.styles.js → ProgressBar.style.js}

@@ -3,16 +3,16 @@ import { Root as Root$1, Indicator as Indicator$1 } from "../node_modules/@radix
 import { useTheme } from "@redislabsdev/redis-ui-styles";
 import Typography from "../Typography/Typography.js";
 const Root = _styled(Root$1).withConfig({
-  displayName: "ProgressBarstyles__Root",
-  componentId: "RedisUI__sc-caf7e3-0"
+  displayName: "ProgressBarstyle__Root",
+  componentId: "RedisUI__sc-cdzix5-0"
 })(["overflow:hidden;width:100%;height:", ";background-color:", ";border-radius:", ";"], ({
   size
 }) => useTheme().components.progressBar.size[size].size, ({
   variant
 }) => useTheme().components.progressBar.variant[variant].color, () => useTheme().components.progressBar.borderRadius);
 const Indicator = _styled(Indicator$1).withConfig({
-  displayName: "ProgressBarstyles__Indicator",
-  componentId: "RedisUI__sc-caf7e3-1"
+  displayName: "ProgressBarstyle__Indicator",
+  componentId: "RedisUI__sc-cdzix5-1"
 })(["width:100%;height:100%;background-color:", ";transform:", ";transition:transform 660ms cubic-bezier(0.65,0,0.35,1);"], ({
   variant
 }) => useTheme().components.progressBar.indicator.variant[variant].color, ({
@@ -32,8 +32,8 @@ const getStyleByPosition = (position) => {
   `;
 };
 const ProgressBar = _styled.div.withConfig({
-  displayName: "ProgressBarstyles__ProgressBar",
-  componentId: "RedisUI__sc-caf7e3-2"
+  displayName: "ProgressBarstyle__ProgressBar",
+  componentId: "RedisUI__sc-cdzix5-2"
 })(["display:flex;", ";gap:", ";", "{order:", ";}"], ({
   textPosition
 }) => getStyleByPosition(textPosition), ({
@@ -45,8 +45,8 @@ const ProgressBar = _styled.div.withConfig({
   textPosition: position
 }) => position === "top" || position === "left" ? 1 : 0);
 const TypographyBody = _styled(Typography.Body).withConfig({
-  displayName: "ProgressBarstyles__TypographyBody",
-  componentId: "RedisUI__sc-caf7e3-3"
+  displayName: "ProgressBarstyle__TypographyBody",
+  componentId: "RedisUI__sc-cdzix5-3"
 })(["color:", ";"], () => useTheme().components.progressBar.text.color);
 export {
   Indicator,

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,27 +1,10 @@
-/// <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"> & {
-        onChange?: ((value: string) => void) | undefined;
-        layout?: "horizontal" | "vertical" | undefined;
-        readOnly?: boolean | undefined;
-    } & import("./components/Compose/Compose.types").RestRadioGroupComposeProps) => import("react/jsx-runtime").JSX.Element;
+declare const RadioGroup: (({ items, ...restProps }: RestRadioGroupProps & RadioGroupProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: ({ id, onChange, value: valueProp, defaultValue, disabled, layout, readOnly, ...restProps }: import("./components/Compose/Compose.types").RadioGroupComposeProps & import("./components/Compose/Compose.types").RestRadioGroupComposeProps) => import("react/jsx-runtime").JSX.Element;
     Item: (({ label, id, value, disabled, className, ...restProps }: import("./components/Item/Item.types").ItemProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: ({ children, id, value, disabled, ...restProps }: import("./components/Item/components/Compose/Compose.types").RadioItemComposeProps) => import("react/jsx-runtime").JSX.Element;
         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,34 @@ 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(FormField_context.FieldAdditionTextIdTransProvider, {
+          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,29 +1,42 @@
 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";
-import { FieldReadonlyTransProvider } from "../../../FormField/FormField.context.js";
+import { FieldReadonlyTransProvider, FieldAdditionTextIdTransProvider } from "../../../FormField/FormField.context.js";
 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(FieldAdditionTextIdTransProvider, {
+          children: jsxRuntimeExports.jsx(RadioGroupCompose, {
+            onValueChange: readOnly ? void 0 : setValue,
+            value,
+            orientation: layout,
+            ...restProps
+          })
+        })
       })
     })
-  })
-});
+  });
+};
 export {
   Compose
 };

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

@@ -8,10 +8,15 @@ const Field_context = require("../../../Inputs/components/Context/Field.context.
 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,
+const RadioGroupCompose = _styled__default.default(index.Root).attrs(({
+  "aria-describedby": ariaDescribedby
+}) => ({
+  ...FormField_context.useFieldReadonly() ? {
+    tabIndex: -1
+  } : null,
   disabled: Field_context.useFieldDisabled() ? true : void 0,
-  id: SharedId_context.useSharedId()
+  id: SharedId_context.useSharedId(),
+  "aria-describedby": [FormField_context.useFieldAdditionTextId(), ariaDescribedby].filter(Boolean).join(" ") || void 0
 })).withConfig({
   displayName: "Composestyle__RadioGroupCompose",
   componentId: "RedisUI__sc-e1h84t-0"

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import * as RadioGroup from '@radix-ui/react-radio-group';
 export declare const RadioGroupCompose: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

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

@@ -1,13 +1,18 @@
 import _styled, { css } from "styled-components";
 import { Root as Root2 } from "../../../node_modules/@radix-ui/react-radio-group/dist/index.js";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
-import { useFieldReadonly } from "../../../FormField/FormField.context.js";
+import { useFieldReadonly, useFieldAdditionTextId } 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,
+const RadioGroupCompose = _styled(Root2).attrs(({
+  "aria-describedby": ariaDescribedby
+}) => ({
+  ...useFieldReadonly() ? {
+    tabIndex: -1
+  } : null,
   disabled: useFieldDisabled() ? true : void 0,
-  id: useSharedId()
+  id: useSharedId(),
+  "aria-describedby": [useFieldAdditionTextId(), ariaDescribedby].filter(Boolean).join(" ") || void 0
 })).withConfig({
   displayName: "Composestyle__RadioGroupCompose",
   componentId: "RedisUI__sc-e1h84t-0"

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,2 @@
-/// <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/dist/RadioGroup/components/Item/components/Indicator/Indicator.style.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import * as RadioGroup from '@radix-ui/react-radio-group';
 export type RadioStates = 'on' | 'off';
-export declare const RadioGroupItemIndicator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const RadioGroupItemIndicator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, any, import("styled-components").ThemeProps<import("@redislabsdev/redis-ui-styles").Theme>, never>;
 export declare const RadioGroupItemIndicatorCheck: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;

package/dist/SearchBar/SearchBar.context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SearchBarContextProps } from './SearchBar.types';
 export declare const SearchBarContext: import("react").Context<SearchBarContextProps | null>;
 export declare const useSearchBarContext: () => SearchBarContextProps;

package/dist/SearchBar/SearchBar.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
 import { SearchBarProps } from './SearchBar.types';
 declare const SearchBar: (({ onFiltersChange, availableFilters, activeFilters, searchValue, onSearchChange, availableColumns, activeColumns, onColumnsChange, ...restProps }: SearchBarProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ children, activeFilters }: import("./components/Compose/Compose.types").SearchBarComposeProps) => import("react/jsx-runtime").JSX.Element;
     FiltersSection: ({ availableFilters, onFiltersChange }: import("./components/FiltersSection/FiltersSection.types").FiltersContainerProps) => import("react/jsx-runtime").JSX.Element;
     SearchSection: (({ onSearchChange, searchValue, ...restProps }: import("./components/SearchSection/SearchSection.types").SearchSectionProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: ({ children, ...restProps }: import("react").HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-        SearchInput: ({ ...restProps }: import("..").SearchInputProps) => import("react/jsx-runtime").JSX.Element;
+        SearchInput: ({ ...restProps }: import("./components/SearchSection/components/SearchInput/SearchInput.types").SearchInputProps) => import("react/jsx-runtime").JSX.Element;
         Actions: (({ availableColumns, activeColumns, onColumnsChange }: import("./components/SearchSection/components/Actions/Actions.types").ActionProps) => import("react/jsx-runtime").JSX.Element) & {
             Compose: ({ children, ...restProps }: import("./components/SearchSection/components/Actions/components/Compose/Compose.types").SearchBarComposeProps) => import("react/jsx-runtime").JSX.Element;
             FilterToggle: () => import("react/jsx-runtime").JSX.Element;

package/dist/SearchBar/SearchBar.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FilterActive, FilterItemConfig } from '../Filters';
 import { ColumnOption } from './components/SearchSection/components/Actions/components/ColumnSelector/ColumnSelector.types';
 export interface SearchBarProps {

package/dist/SearchBar/components/FiltersSection/FiltersSection.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 export declare const FiltersContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CollapsedFiltersContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadixCollapsible.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/dist/SearchBar/components/SearchSection/SearchSection.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { SearchSectionProps } from './SearchSection.types';
 declare const SearchSection: (({ onSearchChange, searchValue, ...restProps }: SearchSectionProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ children, ...restProps }: import("react").HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-    SearchInput: ({ ...restProps }: import("../../..").SearchInputProps) => import("react/jsx-runtime").JSX.Element;
+    SearchInput: ({ ...restProps }: import("./components/SearchInput/SearchInput.types").SearchInputProps) => import("react/jsx-runtime").JSX.Element;
     Actions: (({ availableColumns, activeColumns, onColumnsChange }: import("./components/Actions/Actions.types").ActionProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: ({ children, ...restProps }: import("./components/Actions/components/Compose/Compose.types").SearchBarComposeProps) => import("react/jsx-runtime").JSX.Element;
         FilterToggle: () => import("react/jsx-runtime").JSX.Element;

package/dist/SearchBar/components/SearchSection/SearchSection.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ColumnOption } from './components/Actions/components/ColumnSelector/ColumnSelector.types';
 export interface SearchSectionProps {
     searchValue: string;

package/dist/SearchBar/components/SearchSection/components/Actions/components/ColumnSelector/ColumnSelector.cjs

@@ -26,9 +26,12 @@ const ColumnSelector = ({
         customContainer: true,
         children: jsxRuntime.jsxRuntimeExports.jsxs(ToggleButton.default, {
           pressed: isOpen,
+          "aria-description": shouldShowFilterIndication ? "Filter Active" : void 0,
           children: [jsxRuntime.jsxRuntimeExports.jsx(Button.default.Icon, {
             icon: redisUiIcons.ColumnsIcon
-          }), "Columns", shouldShowFilterIndication && jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.FilterActiveIcon, {})]
+          }), "Columns", shouldShowFilterIndication && jsxRuntime.jsxRuntimeExports.jsx(Button.default.Icon, {
+            icon: redisUiIcons.FilterActiveIcon
+          })]
         })
       }), jsxRuntime.jsxRuntimeExports.jsx(MultiSelect.default.Content, {})]
     })

package/dist/SearchBar/components/SearchSection/components/Actions/components/ColumnSelector/ColumnSelector.js

@@ -24,9 +24,12 @@ const ColumnSelector = ({
         customContainer: true,
         children: jsxRuntimeExports.jsxs(ToggleButton, {
           pressed: isOpen,
+          "aria-description": shouldShowFilterIndication ? "Filter Active" : void 0,
           children: [jsxRuntimeExports.jsx(Button.Icon, {
             icon: ColumnsIcon
-          }), "Columns", shouldShowFilterIndication && jsxRuntimeExports.jsx(FilterActiveIcon, {})]
+          }), "Columns", shouldShowFilterIndication && jsxRuntimeExports.jsx(Button.Icon, {
+            icon: FilterActiveIcon
+          })]
         })
       }), jsxRuntimeExports.jsx(MultiSelect.Content, {})]
     })