@redis-ui/components 42.0.0 → 42.7.0

package/README.md

@@ -60,10 +60,12 @@ export default Card;
 ### 1. Component File (`ComponentName.tsx`)
 
 **✅ DO:**
-- Use `React.forwardRef` when the component wraps a DOM element
+- Use `React.forwardRef` when the component should allow access to the DOM element underneath
+  - Use `forwardRefWithGenerics`, if component has generics params (also works as standard `forwardRef`)
 - Provide default props for optional parameters
-- Import styles as `* as S` for namespacing
+- Import styled components as `* as S` for namespacing
 - Keep the main component focused and delegate to sub-components
+- Extract complex logic into separate hooks, separate different logic to separate hooks
 
 **❌ DON'T:**
 - Mix business logic with presentation
@@ -77,6 +79,10 @@ export default Card;
 - Use generics for flexible, reusable components
 - If there are sub-components, create separate types file for each of them and compose the styles at the root level
 - Use fully qualified names for exported types
+- It is preferable to split component props into `Own` and `Rest` props,
+which can simplify property composition and their use in special cases.
+  - Use `Own*Props` primarily to define actively processed props and props for direct inheritance
+  - Use `Rest*Props` for other props that you plan to pass as-is to inner components (e.g. HTMLAttributes<>)
 
 ```tsx
 // Button.types.ts
@@ -88,19 +94,23 @@ export const buttonVariants = ['primary', 'destructive', 'secondary-fill'] as co
 export type ButtonSizes = (typeof buttonSizes)[number];
 export type ButtonVariants = (typeof buttonVariants)[number];
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export type OwnButtonProps = {
   size?: ButtonSizes;
   variant?: ButtonVariants;
   disabled?: boolean;
-}
+};
+
+export type RestButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+
+export type ButtonProps = OwnButtonProps & RestButtonProps;
 ```
 
 ### 3. Style File (`ComponentName.style.ts`)
 
 **✅ DO:**
 - Access theme values via `useTheme().components.componentName`
-- Use token maps for consistent styling
-- Use fully qualified names for exported styled components
+- Use token maps for consistent styling (`styleFromTokens`)
+- Use fully qualified names for exported styled components (simplifies component debugging with React DevTools)
 
 ```tsx
 // Button.style.ts
@@ -139,16 +149,23 @@ export const Button = styled.button<Required<Pick<ButtonProps, 'size' | 'variant
 **Conventions:**
 - Export the default component
 - Export all types using `export *`
-- Export styles as namespace if needed for external customization
 - Export utility hooks/functions if applicable
+- **Do not** export styled components
 
 ## Component Composition
 
 > **Note:** It’s best to discuss whether composition is appropriate early on, ideally during the design phase. By the time a PR is under review, changing this decision will involve substantial changes. Feel free to reach out to FE Infra team for advice.
 
+**Benefits:**
+- Allows both simple and advanced usage patterns.
+   - Note that composed components should also provide simple props for non-advanced usage.
+- Provides flexibility for custom layouts
+- Maintains clean API surface
+- Supports core Design System and allows custom application styling
+
 ### Object.assign Pattern
 
-For components with sub-components, use `Object.assign`:
+For components with sub-components and composition hierarchy, use `Object.assign`:
 
 ```tsx
 // Tabs.tsx
@@ -171,13 +188,38 @@ export default Tabs;
 ```
 
 **Benefits:**
-- Allows both simple and advanced usage patterns. Note that composed components should also provide simple props for non-advanced usage.
-- Provides flexibility for custom layouts
-- Maintains clean API surface
+- The `assign()` function works better with TypeScript and code completion than direct assignment.
 
 ### Context Pattern
 
-For sharing state between parent and children:
+For sharing state and props between component and descendants.
+
+Create component contexts in separate file: `ComponentName.context.ts(x)`
+
+For most cases you can use standard component context generator with first two returned values: context hook and provider
+```tsx
+import { createNullableContext } from '/Helpers';
+
+export const [useMyComponentContext, MyComponentContextProvider, MyComponentContext] =
+  createNullableContext<MyComponentContextType>({
+    forComponentName: 'MyComponent'
+  });
+```
+
+There is also primitive value state context generator (see usages for details.). It generates 3 things (each of them allows update state):
+- Context hook, returning the state
+- Context Provider, holding the state
+- TransProvider, which acts as the Provider if there is no ascending Provider, or becomes transparent if there is one.
+
+```tsx
+import { createPrimitiveContextState } from '/Helpers';
+
+export const [useFieldStatus, FieldStatusProvider, FieldStatusTransProvider] =
+  createPrimitiveContextState<FieldStatus>();
+```
+
+If none of the generators meets the requirements, a custom context can be created based on the regular React Context.<br/>
+In this case, export the Provider and a hook that retrieves, validates, processes the context values and returns the result.
 
 ```tsx
 // Component.context.ts
@@ -205,6 +247,89 @@ export const useComponentParams = (
 - Overuse context for simple prop drilling
 - Forget to memoize context values
 
+### `Compose` pattern
+
+Start component life from pure composition tree.
+
+```tsx
+<Tabs.Compose value={value} onChange={onChange}>
+  <Tabs.TabBar.Compose>
+    {tabs.map(({ value, label, ...rest }) => (
+      <Tabs.TabBar.Tab key={value} value={value} {...rest}>
+        {label}
+      </Tabs.TabBar.Tab>
+    ))}
+    <Tabs.TabBar.Marker/>
+  </Tabs.TabBar.Compose>
+  <Tabs.ContentPane.Compose>
+    {tabs.map(({ value, content }) => (
+      <Tabs.ContentPane.Content key={value} value={value}>
+        {content}
+      </Tabs.ContentPane.Content>
+    ))}
+  </Tabs.ContentPane.Compose>
+</Tabs.Compose>
+```
+
+Each non-leaf node in the tree should be `Compose` node.
+
+`Compose` component receives configuration props, defines states, contexts and core logic and optionally adds container, styled with DS.
+
+Leaf components remain pure renderers, reading context and their own props.
+
+Place components in directory tree, where each node component has its own directory and all sub-components are placed in a `components` directory within the component directory
+
+When composition is ready, wrap each Compose component and sub-components of the level with node component, which exposes simple configuration API
+
+`Compose` and nested components should be assigned to the node component (and used in composition in it).
+
+```tsx
+const Tabs = Object.assign(
+  ({ tabs, ...restProps }: TabsProps) => (
+    <Tabs.Compose {...restProps}>
+      <Tabs.TabBar tabs={tabs} />
+      <Tabs.ContentPane tabs={tabs} />
+    </Tabs.Compose>
+  ),
+  { Compose, TabBar, ContentPane }
+);
+```
+
+**✅ DO:**
+- Define context state and logic (policy/behavior/rules) only in `Compose`
+- Keep nested and especially leaf components focused
+- Keep node components simple (they should only contain simple composition using `Compose` and nested components)
+- When using Radix library, use their node components in `Compose` and their leaf components in leaf
+- Extract and separate complex logic into separate hooks
+
+**❌ DON'T:**
+- Add logic, contexts, states to node components
+- Make leaf components overcomplicated
+- Overload composition hierarchy
+
+**Benefits:**
+- Configuration logic doesn’t leak
+- Nested components stay focused (“lego bricks”)
+- Flexibility
+  - Each NodeComponent works as configuration entry point
+  - Each node can be extracted/rearranged at any level safely
+- Simple by default, powerful when needed
+  - node components limit configuration options to what’s most necessary
+  - if you need more tuning — go to composition
+- DS-based by default, restylable via composition
+- Consumers can build custom composition nodes that still respect invariants
+
+### Form Fields
+
+If you're developing another form component that can be used with the `FormField` component,
+be sure to connect it with the `FormField` contexts (those that are applicable)
+- SharedId
+- FieldStatus
+- FieldRequired
+- FieldDisabled
+- FieldReadonly
+- FieldAdditionText
+
 ## Testing
 
 ### Test File Structure
@@ -266,7 +391,7 @@ const Button = styled.button<{ $variant: string }>`
   color: ${({ $variant }) => $variant === 'primary' ? 'blue' : 'gray'};
 `;
 
-// ❌ Bad - will pass variant to DOM and cause warnings
+// ❌ Bad - will pass variant to DOM and can cause warnings
 const Button = styled.button<{ variant: string }>`
   color: ${({ variant }) => variant === 'primary' ? 'blue' : 'gray'};
 `;

package/dist/AppBar/AppBar.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
 const AppBar_style = require("./AppBar.style.cjs");
 const RightContainer = require("./components/RightContainer/RightContainer.cjs");
 const LeftContainer = require("./components/LeftContainer/LeftContainer.cjs");
-const Separator_styles = require("./components/Separator/Separator.styles.cjs");
+const Separator_style = require("./components/Separator/Separator.style.cjs");
 const AppBar = Object.assign(({
   children,
   className,
@@ -20,7 +20,7 @@ const AppBar = Object.assign(({
 }, {
   LeftContainer: LeftContainer.default,
   RightContainer: RightContainer.default,
-  Separator: Separator_styles.Separator
+  Separator: Separator_style.Separator
 });
 const AppBar$1 = AppBar;
 exports.default = AppBar$1;

package/dist/AppBar/AppBar.js

@@ -2,7 +2,7 @@ import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
 import { AppBar as AppBar$2 } from "./AppBar.style.js";
 import RightContainer from "./components/RightContainer/RightContainer.js";
 import LeftContainer from "./components/LeftContainer/LeftContainer.js";
-import { Separator } from "./components/Separator/Separator.styles.js";
+import { Separator } from "./components/Separator/Separator.style.js";
 const AppBar = Object.assign(({
   children,
   className,

package/dist/AppBar/components/Container/{Container.styles.cjs → Container.style.cjs}

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
-const Separator_styles = require("../Separator/Separator.styles.cjs");
+const Separator_style = require("../Separator/Separator.style.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const Container = _styled__default.default.div.withConfig({
-  displayName: "Containerstyles__Container",
-  componentId: "RedisUI__sc-cmrw6b-0"
-})(["display:flex;align-items:center;height:100%;gap:", ";& > ", "{margin:0;}"], () => redisUiStyles.useTheme().components.appBar.group.gap, Separator_styles.Separator);
+  displayName: "Containerstyle__Container",
+  componentId: "RedisUI__sc-cw62co-0"
+})(["display:flex;align-items:center;height:100%;gap:", ";& > ", "{margin:0;}"], () => redisUiStyles.useTheme().components.appBar.group.gap, Separator_style.Separator);
 exports.Container = Container;

package/dist/AppBar/components/Container/{Container.styles.js → Container.style.js}

@@ -1,9 +1,9 @@
 import _styled from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
-import { Separator } from "../Separator/Separator.styles.js";
+import { Separator } from "../Separator/Separator.style.js";
 const Container = _styled.div.withConfig({
-  displayName: "Containerstyles__Container",
-  componentId: "RedisUI__sc-cmrw6b-0"
+  displayName: "Containerstyle__Container",
+  componentId: "RedisUI__sc-cw62co-0"
 })(["display:flex;align-items:center;height:100%;gap:", ";& > ", "{margin:0;}"], () => useTheme().components.appBar.group.gap, Separator);
 export {
   Container

package/dist/AppBar/components/LeftContainer/LeftContainer.style.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
-const Container_styles = require("../Container/Container.styles.cjs");
+const Container_style = require("../Container/Container.style.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const LeftContainer = _styled__default.default(Container_styles.Container).withConfig({
+const LeftContainer = _styled__default.default(Container_style.Container).withConfig({
   displayName: "LeftContainerstyle__LeftContainer",
   componentId: "RedisUI__sc-1lvkwe5-0"
 })(["flex-grow:1;order:0;"]);

package/dist/AppBar/components/LeftContainer/LeftContainer.style.js

@@ -1,5 +1,5 @@
 import _styled from "styled-components";
-import { Container } from "../Container/Container.styles.js";
+import { Container } from "../Container/Container.style.js";
 const LeftContainer = _styled(Container).withConfig({
   displayName: "LeftContainerstyle__LeftContainer",
   componentId: "RedisUI__sc-1lvkwe5-0"

package/dist/AppBar/components/RightContainer/RightContainer.style.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
-const Container_styles = require("../Container/Container.styles.cjs");
+const Container_style = require("../Container/Container.style.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const RightContainer = _styled__default.default(Container_styles.Container).withConfig({
+const RightContainer = _styled__default.default(Container_style.Container).withConfig({
   displayName: "RightContainerstyle__RightContainer",
   componentId: "RedisUI__sc-1k2owh5-0"
 })(["order:1;"]);

package/dist/AppBar/components/RightContainer/RightContainer.style.js

@@ -1,5 +1,5 @@
 import _styled from "styled-components";
-import { Container } from "../Container/Container.styles.js";
+import { Container } from "../Container/Container.style.js";
 const RightContainer = _styled(Container).withConfig({
   displayName: "RightContainerstyle__RightContainer",
   componentId: "RedisUI__sc-1k2owh5-0"

package/dist/AppBar/components/Separator/{Separator.styles.cjs → Separator.style.cjs}

@@ -4,8 +4,8 @@ const _styled = require("styled-components");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const Separator = _styled__default.default.div.withConfig({
-  displayName: "Separatorstyles__Separator",
-  componentId: "RedisUI__sc-fxfth8-0"
+  displayName: "Separatorstyle__Separator",
+  componentId: "RedisUI__sc-1q9m3p4-0"
 })(["border-left:", ";margin:", ";height:100%;"], ({
   theme
 }) => theme.components.appBar.separator, ({

package/dist/AppBar/components/Separator/{Separator.styles.js → Separator.style.js}

@@ -1,7 +1,7 @@
 import _styled from "styled-components";
 const Separator = _styled.div.withConfig({
-  displayName: "Separatorstyles__Separator",
-  componentId: "RedisUI__sc-fxfth8-0"
+  displayName: "Separatorstyle__Separator",
+  componentId: "RedisUI__sc-1q9m3p4-0"
 })(["border-left:", ";margin:", ";height:100%;"], ({
   theme
 }) => theme.components.appBar.separator, ({

package/dist/AppSelectionMenu/AppSelectionMenu.context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AppSelectionMenuContextProps } from './AppSelectionMenu.types';
 export declare const AppSelectionMenuContext: import("react").Context<AppSelectionMenuContextProps | null>;
 export declare const useAppSelectionMenuContext: () => AppSelectionMenuContextProps;

package/dist/AppSelectionMenu/AppSelectionMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AppSelectionMenuProps } from './AppSelectionMenu.types';
 import { AppSelectionMenuItemProps } from './components/Item/Item.types';
 declare const AppSelectionMenu: (({ items, defaultOpen, open, onOpenChange }: AppSelectionMenuProps) => import("react/jsx-runtime").JSX.Element) & {
@@ -10,7 +9,7 @@ declare const AppSelectionMenu: (({ items, defaultOpen, open, onOpenChange }: Ap
     };
     Compose: ({ children, defaultOpen, open: controlledOpen, onOpenChange }: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
     Content: (({ children }: {
-        children: import("react").ReactNode;
+        children: React.ReactNode;
     }) => import("react/jsx-runtime").JSX.Element) & {
         Compose: ({ children }: import("./AppSelectionMenu.types").ChildrenProps) => import("react/jsx-runtime").JSX.Element;
     };

package/dist/AppSelectionMenu/AppSelectionMenu.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AppSelectionMenuItemProps } from './components/Item/Item.types';
 import { ComposeProps } from './components/Compose/Compose.types';
 export interface ChildrenProps {

package/dist/AppSelectionMenu/components/Compose/Compose.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface ComposeProps {
     children: React.ReactNode;
     defaultOpen?: boolean;

package/dist/AppSelectionMenu/components/Content/Compose/Compose.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../../node_modules/react/jsx-runtime.cjs");
-const Compose_styles = require("./Compose.styles.cjs");
+const Compose_style = require("./Compose.style.cjs");
 const Compose = ({
   children
 }) => {
-  return jsxRuntime.jsxRuntimeExports.jsx(Compose_styles.StyledPopover, {
+  return jsxRuntime.jsxRuntimeExports.jsx(Compose_style.StyledPopover, {
     children
   });
 };

package/dist/AppSelectionMenu/components/Content/Compose/Compose.js

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../../../../node_modules/react/jsx-runtime.js";
-import { StyledPopover } from "./Compose.styles.js";
+import { StyledPopover } from "./Compose.style.js";
 const Compose = ({
   children
 }) => {

package/dist/AppSelectionMenu/components/Content/Compose/{Compose.styles.cjs → Compose.style.cjs}

@@ -5,7 +5,7 @@ const Popover = require("../../../../Popover/Popover.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const StyledPopover = _styled__default.default(Popover.default.Content.Compose).withConfig({
-  displayName: "Composestyles__StyledPopover",
-  componentId: "RedisUI__sc-wu9o3n-0"
+  displayName: "Composestyle__StyledPopover",
+  componentId: "RedisUI__sc-1yk7m0n-0"
 })(["max-width:unset;"]);
 exports.StyledPopover = StyledPopover;

package/dist/AppSelectionMenu/components/Content/Compose/{Compose.styles.js → Compose.style.js}

@@ -1,8 +1,8 @@
 import _styled from "styled-components";
 import Popover from "../../../../Popover/Popover.js";
 const StyledPopover = _styled(Popover.Content.Compose).withConfig({
-  displayName: "Composestyles__StyledPopover",
-  componentId: "RedisUI__sc-wu9o3n-0"
+  displayName: "Composestyle__StyledPopover",
+  componentId: "RedisUI__sc-1yk7m0n-0"
 })(["max-width:unset;"]);
 export {
   StyledPopover

package/dist/AppSelectionMenu/components/Content/Content.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
-const Content_styles = require("./Content.styles.cjs");
+const Content_style = require("./Content.style.cjs");
 const AppSelectionMenu_context = require("../../AppSelectionMenu.context.cjs");
 const Compose = require("./Compose/Compose.cjs");
 const Content = Object.assign(({
@@ -9,7 +9,7 @@ const Content = Object.assign(({
 }) => {
   AppSelectionMenu_context.useAppSelectionMenuContext();
   return jsxRuntime.jsxRuntimeExports.jsx(Content.Compose, {
-    children: jsxRuntime.jsxRuntimeExports.jsx(Content_styles.Content, {
+    children: jsxRuntime.jsxRuntimeExports.jsx(Content_style.Content, {
       children
     })
   });

package/dist/AppSelectionMenu/components/Content/Content.js

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { Content as Content$1 } from "./Content.styles.js";
+import { Content as Content$1 } from "./Content.style.js";
 import { useAppSelectionMenuContext } from "../../AppSelectionMenu.context.js";
 import { Compose } from "./Compose/Compose.js";
 const Content = Object.assign(({

package/dist/AppSelectionMenu/components/Content/{Content.styles.cjs → Content.style.cjs}

@@ -5,7 +5,7 @@ const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const Content = _styled__default.default.div.withConfig({
-  displayName: "Contentstyles__Content",
-  componentId: "RedisUI__sc-18xdf9d-0"
+  displayName: "Contentstyle__Content",
+  componentId: "RedisUI__sc-ioqroo-0"
 })(["display:flex;flex-wrap:wrap;justify-content:center;align-items:center;max-width:", ";gap:", ";margin:", ";"], () => redisUiStyles.useTheme().components.appSelectionMenu.content.width, () => redisUiStyles.useTheme().components.appSelectionMenu.content.gap, () => redisUiStyles.useTheme().components.appSelectionMenu.content.margin);
 exports.Content = Content;

package/dist/AppSelectionMenu/components/Content/{Content.styles.js → Content.style.js}

@@ -1,8 +1,8 @@
 import _styled from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
 const Content = _styled.div.withConfig({
-  displayName: "Contentstyles__Content",
-  componentId: "RedisUI__sc-18xdf9d-0"
+  displayName: "Contentstyle__Content",
+  componentId: "RedisUI__sc-ioqroo-0"
 })(["display:flex;flex-wrap:wrap;justify-content:center;align-items:center;max-width:", ";gap:", ";margin:", ";"], () => useTheme().components.appSelectionMenu.content.width, () => useTheme().components.appSelectionMenu.content.gap, () => useTheme().components.appSelectionMenu.content.margin);
 export {
   Content

package/dist/AppSelectionMenu/components/Icon/Icon.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const redisUiIcons = require("@redislabsdev/redis-ui-icons");
 const Icon = () => jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.MenuIcon, {
-  customColor: "currentColor"
+  customColor: "currentColor",
+  "aria-hidden": true
 });
 exports.Icon = Icon;

package/dist/AppSelectionMenu/components/Icon/Icon.js

@@ -1,7 +1,8 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { MenuIcon } from "@redislabsdev/redis-ui-icons";
 const Icon = () => jsxRuntimeExports.jsx(MenuIcon, {
-  customColor: "currentColor"
+  customColor: "currentColor",
+  "aria-hidden": true
 });
 export {
   Icon

package/dist/AppSelectionMenu/components/Item/Item.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
-const Item_styles = require("./Item.styles.cjs");
+const Item_style = require("./Item.style.cjs");
 const Compose = require("./components/Compose/Compose.cjs");
 const Item = Object.assign(({
   label,
@@ -12,14 +12,14 @@ const Item = Object.assign(({
   return jsxRuntime.jsxRuntimeExports.jsx(Item.Compose, {
     onClick,
     disabled,
-    children: jsxRuntime.jsxRuntimeExports.jsxs(Item_styles.AppSelectionMenuItem, {
+    children: jsxRuntime.jsxRuntimeExports.jsxs(Item_style.AppSelectionMenuItem, {
       disabled,
-      children: [jsxRuntime.jsxRuntimeExports.jsx(Item_styles.AppSelectorItem, {
+      children: [jsxRuntime.jsxRuntimeExports.jsx(Item_style.AppSelectorItem, {
         icon,
         variant: "secondary",
         disabled,
         title: label
-      }), jsxRuntime.jsxRuntimeExports.jsx(Item_styles.Label, {
+      }), jsxRuntime.jsxRuntimeExports.jsx(Item_style.Label, {
         size: "S",
         children: label
       })]

package/dist/AppSelectionMenu/components/Item/Item.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AppSelectionMenuItemProps } from './Item.types';
 export declare const Item: (({ label, onClick, icon, disabled }: AppSelectionMenuItemProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ children, onClick, disabled }: import("./components/Compose/Compose.types").ComposeProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/AppSelectionMenu/components/Item/Item.js

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { AppSelectionMenuItem, AppSelectorItem, Label } from "./Item.styles.js";
+import { AppSelectionMenuItem, AppSelectorItem, Label } from "./Item.style.js";
 import { Compose } from "./components/Compose/Compose.js";
 const Item = Object.assign(({
   label,

package/dist/AppSelectionMenu/components/Item/{Item.styles.cjs → Item.style.cjs}

@@ -7,12 +7,12 @@ const Typography = require("../../../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const AppSelectorItem = _styled__default.default(ActionIconButton.default).withConfig({
-  displayName: "Itemstyles__AppSelectorItem",
-  componentId: "RedisUI__sc-ixerf9-0"
+  displayName: "Itemstyle__AppSelectorItem",
+  componentId: "RedisUI__sc-1y7tbyi-0"
 })(["height:", ";width:", ";svg{height:", ";width:", ";}"], () => redisUiStyles.useTheme().components.appSelectionMenu.item.buttonSize, () => redisUiStyles.useTheme().components.appSelectionMenu.item.buttonSize, () => redisUiStyles.useTheme().components.appSelectionMenu.item.iconSize, () => redisUiStyles.useTheme().components.appSelectionMenu.item.iconSize);
 const AppSelectionMenuItem = _styled__default.default.div.withConfig({
-  displayName: "Itemstyles__AppSelectionMenuItem",
-  componentId: "RedisUI__sc-ixerf9-1"
+  displayName: "Itemstyle__AppSelectionMenuItem",
+  componentId: "RedisUI__sc-1y7tbyi-1"
 })(["display:flex;flex-direction:column;justify-content:center;align-items:center;height:", ";width:", ";gap:", ";user-select:none;&:hover{cursor:", ";", "}"], () => redisUiStyles.useTheme().components.appSelectionMenu.item.height, () => redisUiStyles.useTheme().components.appSelectionMenu.item.width, () => redisUiStyles.useTheme().components.appSelectionMenu.item.gap, ({
   disabled
 }) => disabled ? "not-allowed" : "pointer", ({
@@ -24,8 +24,8 @@ const AppSelectionMenuItem = _styled__default.default.div.withConfig({
 }};}
       `);
 const Label = _styled__default.default(Typography.default.Body).withConfig({
-  displayName: "Itemstyles__Label",
-  componentId: "RedisUI__sc-ixerf9-2"
+  displayName: "Itemstyle__Label",
+  componentId: "RedisUI__sc-1y7tbyi-2"
 })(["color:", ";"], () => redisUiStyles.useTheme().components.appSelectionMenu.item.label.color);
 exports.AppSelectionMenuItem = AppSelectionMenuItem;
 exports.AppSelectorItem = AppSelectorItem;

package/dist/AppSelectionMenu/components/Item/{Item.styles.d.ts → Item.style.d.ts}

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export declare const AppSelectorItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Button").ActionIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 export declare const AppSelectionMenuItem: import("styled-components").StyledComponent<"div", any, {
-    disabled?: boolean | undefined;
+    disabled?: boolean;
 }, never>;
 export declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/AppSelectionMenu/components/Item/{Item.styles.js → Item.style.js}

@@ -3,12 +3,12 @@ import { useTheme } from "@redislabsdev/redis-ui-styles";
 import ActionIconButton from "../../../Button/ActionIconButton/ActionIconButton.js";
 import Typography from "../../../Typography/Typography.js";
 const AppSelectorItem = _styled(ActionIconButton).withConfig({
-  displayName: "Itemstyles__AppSelectorItem",
-  componentId: "RedisUI__sc-ixerf9-0"
+  displayName: "Itemstyle__AppSelectorItem",
+  componentId: "RedisUI__sc-1y7tbyi-0"
 })(["height:", ";width:", ";svg{height:", ";width:", ";}"], () => useTheme().components.appSelectionMenu.item.buttonSize, () => useTheme().components.appSelectionMenu.item.buttonSize, () => useTheme().components.appSelectionMenu.item.iconSize, () => useTheme().components.appSelectionMenu.item.iconSize);
 const AppSelectionMenuItem = _styled.div.withConfig({
-  displayName: "Itemstyles__AppSelectionMenuItem",
-  componentId: "RedisUI__sc-ixerf9-1"
+  displayName: "Itemstyle__AppSelectionMenuItem",
+  componentId: "RedisUI__sc-1y7tbyi-1"
 })(["display:flex;flex-direction:column;justify-content:center;align-items:center;height:", ";width:", ";gap:", ";user-select:none;&:hover{cursor:", ";", "}"], () => useTheme().components.appSelectionMenu.item.height, () => useTheme().components.appSelectionMenu.item.width, () => useTheme().components.appSelectionMenu.item.gap, ({
   disabled
 }) => disabled ? "not-allowed" : "pointer", ({
@@ -20,8 +20,8 @@ const AppSelectionMenuItem = _styled.div.withConfig({
 }};}
       `);
 const Label = _styled(Typography.Body).withConfig({
-  displayName: "Itemstyles__Label",
-  componentId: "RedisUI__sc-ixerf9-2"
+  displayName: "Itemstyle__Label",
+  componentId: "RedisUI__sc-1y7tbyi-2"
 })(["color:", ";"], () => useTheme().components.appSelectionMenu.item.label.color);
 export {
   AppSelectionMenuItem,

package/dist/AppSelectionMenu/components/Item/components/Compose/Compose.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ComposeProps } from './Compose.types';
 export declare const Compose: ({ children, onClick, disabled }: ComposeProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/AppSelectionMenu/components/Item/components/Compose/Compose.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface ComposeProps {
     children: React.ReactElement;
     onClick: () => void;