@redis-ui/components 43.0.2 → 43.2.1

package/dist/index.js

@@ -1132,66 +1132,68 @@ import { SelfContained } from "./Helpers/SelfContained.js";
 import { RestylableElement } from "./Helpers/RestylableElement.js";
 import { PopperProvider, usePopperContext } from "./Helpers/contexts/Popper/Popper.context.js";
 import { useScrollable } from "./Helpers/hooks/useScrollable.js";
-import { default as default26 } from "./Inputs/Input/Input.js";
-import { default as default27 } from "./Inputs/NumericInput/NumericInput.js";
-import { default as default28 } from "./Inputs/PasswordInput/PasswordInput.js";
-import { default as default29 } from "./Inputs/SearchInput/SearchInput.js";
-import { default as default30 } from "./Inputs/TextArea/TextArea.js";
-import { default as default31 } from "./Inputs/QuantityCounter/QuantityCounter.js";
+import { default as default26 } from "./HighlightedIcon/HighlightedIcon.js";
+import * as HighlightedIcon_style from "./HighlightedIcon/HighlightedIcon.style.js";
+import { default as default27 } from "./Inputs/Input/Input.js";
+import { default as default28 } from "./Inputs/NumericInput/NumericInput.js";
+import { default as default29 } from "./Inputs/PasswordInput/PasswordInput.js";
+import { default as default30 } from "./Inputs/SearchInput/SearchInput.js";
+import { default as default31 } from "./Inputs/TextArea/TextArea.js";
+import { default as default32 } from "./Inputs/QuantityCounter/QuantityCounter.js";
 import { getClosestDivisibleNumber } from "./Inputs/hooks/numericInput/numericInput.utils.js";
 import { ContextProvider, useInputValueApi, useInputValueProps } from "./Inputs/components/Context/InputValue.context.js";
 import { ErrorContentProvider, FieldDisabledProvider, FieldDisabledTransProvider, useErrorContent, useFieldDisabled } from "./Inputs/components/Context/Field.context.js";
-import { default as default32 } from "./FormField/FormField.js";
+import { default as default33 } from "./FormField/FormField.js";
 import { FieldAdditionTextIdProvider, FieldAdditionTextIdTransProvider, FieldReadonlyProvider, FieldReadonlyTransProvider, FieldRequiredProvider, FieldRequiredTransProvider, FieldStatusProvider, FieldStatusTransProvider, useFieldAdditionTextId, useFieldReadonly, useFieldRequired, useFieldStatus } from "./FormField/FormField.context.js";
 import { KeyValueList } from "./KeyValueList/KeyValueList.js";
 import { useKeyValueList } from "./KeyValueList/hooks/useKeyValueList.js";
-import { default as default33 } from "./Label/Label.js";
+import { default as default34 } from "./Label/Label.js";
 import { FlexItem } from "./Layouts/FlexItem/FlexItem.js";
 import { FlexGroup } from "./Layouts/FlexGroup/FlexGroup.js";
 import { FlexSplit } from "./Layouts/FlexSplit/FlexSplit.js";
 import { FlexDivider } from "./Layouts/FlexDivider/FlexDivider.js";
-import { default as default34 } from "./Link/Link.js";
+import { default as default35 } from "./Link/Link.js";
 import { LinkStyler } from "./Link/LinkStyler/LinkStyler.js";
-import { default as default35 } from "./Loader/Loader.js";
-import { default as default36 } from "./Menu/Menu.js";
-import { default as default37 } from "./MidBar/MidBar.js";
-import { default as default38 } from "./Modal/Modal.js";
-import { default as default39 } from "./MoreInfoIcon/MoreInfoIcon.js";
-import { default as default40 } from "./MultiSelect/MultiSelect.js";
+import { default as default36 } from "./Loader/Loader.js";
+import { default as default37 } from "./Menu/Menu.js";
+import { default as default38 } from "./MidBar/MidBar.js";
+import { default as default39 } from "./Modal/Modal.js";
+import { default as default40 } from "./MoreInfoIcon/MoreInfoIcon.js";
+import { default as default41 } from "./MultiSelect/MultiSelect.js";
 import { useMultiSelectContext } from "./MultiSelect/components/Context/Context.js";
 import { Overflow } from "./Overflow/Overflow.js";
 import { usePaginationContext } from "./Pagination/Pagination.context.js";
 import { Pagination } from "./Pagination/Pagination.js";
-import { default as default41 } from "./Popover/Popover.js";
-import { default as default42 } from "./RadioGroup/RadioGroup.js";
+import { default as default42 } from "./Popover/Popover.js";
+import { default as default43 } from "./RadioGroup/RadioGroup.js";
 import { ScreenReaderAnnounce } from "./ScreenReaderAnnounce/ScreenReaderAnnounce.js";
-import { default as default43 } from "./SearchBar/SearchBar.js";
-import { default as default44 } from "./Section/Section.js";
-import { default as default45 } from "./Section/components/Header/components/CategoryValueList/CategoryValueList.js";
-import { default as default46 } from "./Select/Select.js";
+import { default as default44 } from "./SearchBar/SearchBar.js";
+import { default as default45 } from "./Section/Section.js";
+import { default as default46 } from "./Section/components/Header/components/CategoryValueList/CategoryValueList.js";
+import { default as default47 } from "./Select/Select.js";
 import { useSelectContext } from "./Select/components/Context/Context.js";
-import { default as default47 } from "./SideBar/SideBar.js";
-import { default as default48 } from "./Skeleton/Skeleton.js";
-import { default as default49 } from "./Stepper/Stepper.js";
+import { default as default48 } from "./SideBar/SideBar.js";
+import { default as default49 } from "./Skeleton/Skeleton.js";
+import { default as default50 } from "./Stepper/Stepper.js";
 import { StepperStepState } from "./Stepper/components/Step/Step.types.js";
-import { default as default50 } from "./Switch/Switch.js";
-import { default as default51 } from "./TableHeading/TableHeading.js";
-import { default as default52 } from "./Tabs/Tabs.js";
+import { default as default51 } from "./Switch/Switch.js";
+import { default as default52 } from "./TableHeading/TableHeading.js";
+import { default as default53 } from "./Tabs/Tabs.js";
 import { ThemeModeSwitch } from "./ThemeModeSwitch/ThemeModeSwitch.js";
 import { useThemeModeSwitch } from "./ThemeModeSwitch/useThemeModeSwitch.js";
 import { useToastParams } from "./Toast/core/context.js";
-import { default as default53 } from "./Toast/Toast.js";
-import { default as default54 } from "./Toast/Toaster.js";
+import { default as default54 } from "./Toast/Toast.js";
+import { default as default55 } from "./Toast/Toaster.js";
 import { toast } from "./Toast/core/core.js";
-import { default as default55 } from "./Tooltip/Tooltip.js";
-import { default as default56 } from "./Tooltip/Provider/Provider.js";
-import { default as default57 } from "./Tooltip/components/TooltipCard/TooltipCard.js";
-import { default as default58 } from "./TreeView/TreeView.js";
-import { default as default59 } from "./Typography/Typography.js";
+import { default as default56 } from "./Tooltip/Tooltip.js";
+import { default as default57 } from "./Tooltip/Provider/Provider.js";
+import { default as default58 } from "./Tooltip/components/TooltipCard/TooltipCard.js";
+import { default as default59 } from "./TreeView/TreeView.js";
+import { default as default60 } from "./Typography/Typography.js";
 import { useEllipsisTooltip } from "./Typography/hooks/useEllipsisTooltip.js";
 import { typographyColors } from "./Typography/Typography.types.js";
 import { ProgressBar } from "./ProgressBar/ProgressBar.js";
-import { default as default60 } from "./ProfileIcon/ProfileIcon.js";
+import { default as default61 } from "./ProfileIcon/ProfileIcon.js";
 import * as ProfileIcon_style from "./ProfileIcon/ProfileIcon.style.js";
 import { Slider } from "./Slider/Slider.js";
 export {
@@ -1211,7 +1213,7 @@ export {
   Button_style as ButtonStyles,
   IconButton_style as ButtonWithIconStyles,
   default17 as Card,
-  default45 as CategoryValueList,
+  default46 as CategoryValueList,
   default18 as Checkbox,
   default19 as Chip,
   ChipContainer,
@@ -1237,62 +1239,64 @@ export {
   FlexGroup,
   FlexItem,
   FlexSplit,
-  default32 as FormField,
+  default33 as FormField,
+  default26 as HighlightedIcon,
+  HighlightedIcon_style as HighlightedIconStyles,
   default12 as IconButton,
-  default26 as Input,
+  default27 as Input,
   KeyValueList,
-  default33 as Label,
-  default34 as Link,
+  default34 as Label,
+  default35 as Link,
   LinkStyler,
-  default35 as Loader,
-  default36 as Menu,
-  default37 as MidBar,
-  default38 as Modal,
-  default39 as MoreInfoIcon,
+  default36 as Loader,
+  default37 as Menu,
+  default38 as MidBar,
+  default39 as Modal,
+  default40 as MoreInfoIcon,
   default9 as MultiBoxSelectionGroup,
-  default40 as MultiSelect,
-  default27 as NumericInput,
+  default41 as MultiSelect,
+  default28 as NumericInput,
   Overflow,
   Pagination,
-  default28 as PasswordInput,
-  default41 as Popover,
+  default29 as PasswordInput,
+  default42 as Popover,
   PopperProvider,
-  default60 as ProfileIcon,
+  default61 as ProfileIcon,
   ProfileIcon_style as ProfileIconStyles,
   ProgressBar,
-  default31 as QuantityCounter,
-  default42 as RadioGroup,
+  default32 as QuantityCounter,
+  default43 as RadioGroup,
   default23 as RangeDatePicker,
   RestylableElement,
   ScreenReaderAnnounce,
-  default43 as SearchBar,
-  default29 as SearchInput,
-  default44 as Section,
-  default46 as Select,
+  default44 as SearchBar,
+  default30 as SearchInput,
+  default45 as Section,
+  default47 as Select,
   SelfContained,
   SharedIdProvider,
   SharedIdTransProvider,
-  default47 as SideBar,
-  default48 as Skeleton,
+  default48 as SideBar,
+  default49 as Skeleton,
   Slider,
-  default49 as Stepper,
+  default50 as Stepper,
   StepperStepState,
-  default50 as Switch,
-  default51 as TableHeading,
-  default52 as Tabs,
-  default30 as TextArea,
+  default51 as Switch,
+  default52 as TableHeading,
+  default53 as Tabs,
+  default31 as TextArea,
   default11 as TextButton,
   TextButton_style as TextButtonStyles,
   ThemeModeSwitch,
-  default53 as Toast,
-  default54 as Toaster,
+  default54 as Toast,
+  default55 as Toaster,
   default14 as ToggleButton,
   ToggleButton_style as ToggleButtonStyles,
-  default55 as Tooltip,
-  default57 as TooltipCard,
-  default56 as TooltipProvider,
-  default58 as TreeView,
-  default59 as Typography,
+  default56 as Tooltip,
+  default58 as TooltipCard,
+  default57 as TooltipProvider,
+  default59 as TreeView,
+  default60 as Typography,
   actionIconButtonSizes,
   badgeVariants,
   bannerVariants,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/components",
   "license": "UNLICENSED",
-  "version": "43.0.2",
+  "version": "43.2.1",
   "type": "module",
   "sideEffects": false,
   "repository": "git@github.com:redislabsdev/redis-ui.git",
@@ -29,7 +29,7 @@
   },
   "peerDependencies": {
     "@redis-ui/icons": "^6.8.5",
-    "@redis-ui/styles": "^14.13.0",
+    "@redis-ui/styles": "^14.15.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "styled-components": "^5.0.0"

package/skills/redis-ui-components/SKILL.md

@@ -66,7 +66,6 @@ Always check the relevant component reference before using a component. The refe
 - [RadioGroup](./references/RadioGroup.md)
 - [Switch](./references/Switch.md)
 - [FormField](./references/FormField.md)
-- [DatePicker](./references/DatePicker.md)
 
 ### Layout
 
@@ -105,7 +104,6 @@ Always check the relevant component reference before using a component. The refe
 - [Link](./references/Link.md)
 - [Loader](./references/Loader.md)
 - [ProgressBar](./references/ProgressBar.md)
-- [Skeleton](./references/Skeleton.md)
 - [Typography](./references/Typography.md)
 - [MoreInfoIcon](./references/MoreInfoIcon.md)
 

package/skills/redis-ui-components/references/ActionIconButton.md

@@ -0,0 +1,96 @@
+# ActionIconButton
+
+Button with only an icon and a circular background. Use it for compact icon-only actions.
+
+## Import
+
+```tsx
+import { ActionIconButton } from '@redislabsdev/redis-ui-components';
+```
+
+> If you use the examples below, also import the icon from:
+>
+> ```tsx
+> import { ActiveActiveIcon } from '@redislabsdev/redis-ui-icons';
+> ```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| icon | `IconType` | required | Icon to render inside the button. |
+| variant | `'primary' \| 'secondary'` | `'primary'` | Visual style for the button background and foreground. |
+| size | `'L' \| 'M' \| 'S' \| 'XS'` | `'M'` | Button size. |
+| native button attributes | `ButtonHTMLAttributes<HTMLButtonElement>` | `type="button"` | All standard button props such as `disabled`, `onClick`, `aria-*`, and `title`. |
+
+## Examples
+
+### Basic Usage
+
+```tsx
+import { ActionIconButton } from '@redislabsdev/redis-ui-components';
+import { ActiveActiveIcon } from '@redislabsdev/redis-ui-icons';
+
+<ActionIconButton size="L" disabled={false} icon={ActiveActiveIcon} />;
+```
+
+### Sizes
+
+> 4 sizes are supported with `M` being the default.
+
+```tsx
+import { ActionIconButton } from '@redislabsdev/redis-ui-components';
+import { ActiveActiveIcon } from '@redislabsdev/redis-ui-icons';
+
+<>
+  <ActionIconButton size="XS" icon={ActiveActiveIcon} />
+  <ActionIconButton size="S" icon={ActiveActiveIcon} />
+  <ActionIconButton size="M" icon={ActiveActiveIcon} />
+  <ActionIconButton size="L" icon={ActiveActiveIcon} />
+</>
+```
+
+### Variants
+
+> 2 variants are supported, `primary` and `secondary`. The default is `primary`.
+
+```tsx
+import { ActionIconButton, FormField } from '@redislabsdev/redis-ui-components';
+import { ActiveActiveIcon } from '@redislabsdev/redis-ui-icons';
+
+<>
+  <FormField label="primary">
+    <ActionIconButton variant="primary" size="L" icon={ActiveActiveIcon} />
+  </FormField>
+  <FormField label="secondary">
+    <ActionIconButton variant="secondary" size="L" icon={ActiveActiveIcon} />
+  </FormField>
+</>
+```
+
+### Disabled
+
+> ActionIconButton can be disabled by setting the `disabled` prop to `true`.
+>
+> This will disable any hover styles and prevent click events from firing.
+
+```tsx
+import { ActionIconButton, FormField } from '@redislabsdev/redis-ui-components';
+import { ActiveActiveIcon } from '@redislabsdev/redis-ui-icons';
+
+<>
+  <FormField label="primary">
+    <ActionIconButton variant="primary" size="L" icon={ActiveActiveIcon} disabled />
+  </FormField>
+  <FormField label="secondary">
+    <ActionIconButton variant="secondary" size="L" icon={ActiveActiveIcon} disabled />
+  </FormField>
+</>
+```
+
+## Notes
+
+- `ActionIconButton` is icon-only and should be used for compact actions with no text label.
+- 4 sizes are supported with `M` being the default.
+- 2 variants are supported, `primary` and `secondary`, with `primary` as the default.
+- Setting `disabled` to `true` disables hover styles and prevents click events from firing.

package/skills/redis-ui-components/references/AppBar.md

@@ -0,0 +1,161 @@
+# AppBar
+
+A top-level application bar for header content, actions, and account controls. It supports a default and alert variant and exposes left/right containers plus a separator for compound layouts.
+
+## Import
+```tsx
+import { AppBar } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactNode` | required | Content rendered inside the bar |
+| variant | `'default' \| 'alert'` | `'default'` | Visual variant for the bar background and text color |
+
+The component also extends all native `HTMLAttributes<HTMLDivElement>` props.
+
+## Sub-components
+
+- `AppBar.LeftContainer` - Flexible left-aligned container for primary content.
+- `AppBar.RightContainer` - Flexible right-aligned container for actions and account controls.
+- `AppBar.Separator` - Visual divider used between items inside the bar.
+
+### AppBar.LeftContainer Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactNode` | required | Content rendered inside the left container |
+
+`AppBar.LeftContainer` also extends all native `HTMLAttributes<HTMLDivElement>` props.
+
+### AppBar.RightContainer Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactNode` | required | Content rendered inside the right container |
+
+`AppBar.RightContainer` also extends all native `HTMLAttributes<HTMLDivElement>` props.
+
+### AppBar.Separator Props
+
+`AppBar.Separator` is a styled `div` with no custom props. It accepts standard `HTMLDivElement` attributes from the underlying styled element.
+
+## Examples
+
+### Basic Usage
+```tsx
+import { AppBar } from '@redislabsdev/redis-ui-components';
+
+<AppBar variant="default">
+  <AppBar.LeftContainer>Left container</AppBar.LeftContainer>
+  <AppBar.RightContainer>
+    <AppBar.Separator />
+    Right container
+  </AppBar.RightContainer>
+</AppBar>
+```
+
+### Variant
+> `AppBar` has additional variant. Set `"alert"` value to the `variant` prop to see it.
+```tsx
+import { AppBar, AppSelectionMenu, ProfileIcon, Typography } from '@redislabsdev/redis-ui-components';
+import { items } from '../AppSelectionMenu/AppSelectionMenu.data';
+
+<AppBar variant="alert">
+  <AppBar.LeftContainer>
+    <Typography.Body component="span">Super user</Typography.Body>
+  </AppBar.LeftContainer>
+  <AppBar.RightContainer>
+    <AppSelectionMenu items={items} />
+    <AppBar.Separator />
+    <ProfileIcon size="L" email="john.smith@redis.com" fullName="John Smith" />
+  </AppBar.RightContainer>
+</AppBar>
+```
+
+### ComplexBar
+> Complex example of application AppBar with most of the features.
+> For details on the use of parts, please refer to the relevant documents.
+```tsx
+import React from 'react';
+import { AppBar, AppSelectionMenu, Menu, ProfileIcon, Typography } from '@redislabsdev/redis-ui-components';
+import { EditIcon, SignoutIcon } from '@redislabsdev/redis-ui-icons';
+import { items } from '../AppSelectionMenu/AppSelectionMenu.data';
+import * as S from './AppBarStory.style';
+
+const USER_NAME = 'John Smith';
+const EMAIL = 'john.smith@redis.com';
+const ACCOUNT_NAME = 'RedisLabsTeam-PM Account';
+
+const UserMenu = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <Menu open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
+      <Menu.Trigger>
+        <span>
+          <S.TriggerToggleButton pressed={isOpen}>
+            <S.AccountName size="S">{USER_NAME}</S.AccountName>
+            <S.ActiveAccount>
+              <Typography.Body>{ACCOUNT_NAME}</Typography.Body>
+              <Menu.Trigger.Arrow customColor="currentColor" />
+            </S.ActiveAccount>
+          </S.TriggerToggleButton>
+        </span>
+      </Menu.Trigger>
+      <S.MenuContent>
+        <Menu.Content.Label text="Account" />
+        <Menu.Content.Item selected text={`${ACCOUNT_NAME} #93194`} />
+        <Menu.Content.Item text="Another Account #7619234" />
+        <Menu.Content.Item text="Other Account #761329" />
+        <Menu.Content.Item text="Red_redis Account #681900" />
+        <Menu.Content.Separator />
+        <Menu.Content.Item
+          onClick={() => {}}
+          text={USER_NAME}
+          subHead="User profile"
+          icon={EditIcon}
+        />
+        <Menu.Content.Separator />
+        <Menu.Content.Item subHead="Logout" icon={SignoutIcon} />
+        <Menu.Content.DropdownArrow />
+      </S.MenuContent>
+    </Menu>
+  );
+};
+
+<AppBar>
+  <AppBar.LeftContainer>
+    <Typography.Body component="span">Super user</Typography.Body>
+  </AppBar.LeftContainer>
+  <AppBar.RightContainer>
+    <AppSelectionMenu items={items} />
+    <AppBar.Separator />
+    <UserMenu />
+    <ProfileIcon size="L" email={EMAIL} fullName={USER_NAME} />
+  </AppBar.RightContainer>
+</AppBar>
+```
+
+### Compose
+> Building blocks for composing custom `AppBar`.
+```tsx
+import { AppBar, AppSelectionMenu, ProfileIcon, Typography } from '@redislabsdev/redis-ui-components';
+
+<AppBar>
+  <AppBar.LeftContainer>
+    {isSuperUser && <Typography.Body component="span">Super user</Typography.Body>}
+  </AppBar.LeftContainer>
+  <AppBar.RightContainer>
+    <AppSelectionMenu items={items} />
+    <AppBar.Separator />
+    <CustomMenu />
+    <ProfileIcon size="L" email={email} fullName={fullName} />
+  </AppBar.RightContainer>
+</AppBar>
+```
+
+## Notes
+- `AppBar` renders with `variant="default"` unless `variant="alert"` is provided.
+- `AppBar.LeftContainer` is the flexible, growing side of the bar; `AppBar.RightContainer` is intended for trailing actions and account controls.
+- `AppBar.Separator` is a presentational divider with no custom props.
+- The package also exports `AppBarStyles` for low-level styling, but the public usage pattern is the compound `AppBar` API.