@redis-ui/components 39.18.0 → 41.3.2

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

@@ -1,2 +1,2 @@
 import { SectionComposeProps } from './Compose.types';
-export declare const Compose: ({ open, defaultOpen, disabled, onOpenChange, collapsible, children, ...props }: SectionComposeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Compose: ({ open: controlledOpen, defaultOpen, disabled, onOpenChange, collapsible, children, ...props }: SectionComposeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Section/components/Compose/Compose.js

@@ -1,9 +1,11 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { useState, useMemo } from "react";
-import { CollapsibleRoot } from "./Compose.style.js";
+import { useId } from "../../../node_modules/@radix-ui/react-id/dist/index.js";
+import { useControllableState } from "../../../node_modules/@radix-ui/react-use-controllable-state/dist/index.js";
 import { SectionContext } from "../../Section.context.js";
+import { CollapsibleRoot } from "./Compose.style.js";
 const Compose = ({
-  open,
+  open: controlledOpen,
   defaultOpen,
   disabled,
   onOpenChange,
@@ -12,15 +14,24 @@ const Compose = ({
   ...props
 }) => {
   const [hasContent, setHasContent] = useState(false);
+  const [open = false, setOpen] = useControllableState({
+    prop: hasContent && (!collapsible || controlledOpen),
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  const triggerId = useId();
+  const labelId = useId();
   const contextValue = useMemo(() => ({
+    open,
     collapsible,
-    setHasContent
-  }), [collapsible]);
+    setHasContent,
+    triggerId: collapsible && hasContent ? triggerId : void 0,
+    labelId
+  }), [collapsible, hasContent, labelId, open, triggerId]);
   return jsxRuntimeExports.jsx(CollapsibleRoot, {
-    open: hasContent && (!collapsible || open),
-    defaultOpen,
+    open,
+    onOpenChange: hasContent && collapsible ? setOpen : void 0,
     disabled,
-    onOpenChange,
     ...props,
     children: jsxRuntimeExports.jsx(SectionContext.Provider, {
       value: contextValue,

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

@@ -1,5 +1,5 @@
-import { ComposeElementProps } from '../../../Helpers/common.types';
-export interface SectionComposeProps extends Omit<ComposeElementProps, 'content'> {
+import { ComposeElementProps } from '../../../Helpers';
+export interface SectionComposeProps extends ComposeElementProps {
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;

package/dist/Section/components/Header/Header.cjs

@@ -2,32 +2,24 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const Label = require("./components/Label/Label.cjs");
-const ActionButton = require("./components/ActionButton/ActionButton.cjs");
-const CollapseIndicator = require("./components/CollapseIndicator/CollapseIndicator.cjs");
 const Compose = require("./components/Compose/Compose.cjs");
 const Group = require("./components/Group/Group.cjs");
+const CollapseButton = require("./components/CollapseButton/CollapseButton.cjs");
+const TextButton = require("../../../Button/TextButton/TextButton.cjs");
 const Header = Object.assign(({
   label,
-  onAction,
-  actionButtonText,
-  collapsedInfo
-}) => {
-  return jsxRuntime.jsxRuntimeExports.jsxs(Header.Compose, {
-    collapsedInfo,
-    children: [jsxRuntime.jsxRuntimeExports.jsx(Header.Label, {
-      label
-    }), jsxRuntime.jsxRuntimeExports.jsxs(Header.Group, {
-      children: [jsxRuntime.jsxRuntimeExports.jsx(Header.ActionButton, {
-        onClick: onAction,
-        children: actionButtonText
-      }), jsxRuntime.jsxRuntimeExports.jsx(Header.CollapseIndicator, {})]
-    })]
-  });
-}, {
+  actions
+}) => jsxRuntime.jsxRuntimeExports.jsxs(Header.Compose, {
+  children: [jsxRuntime.jsxRuntimeExports.jsx(Header.Label, {
+    label
+  }), jsxRuntime.jsxRuntimeExports.jsxs(Header.Group, {
+    children: [actions, jsxRuntime.jsxRuntimeExports.jsx(Header.CollapseButton, {})]
+  })]
+}), {
   Compose: Compose.Compose,
   Label: Label.Label,
-  ActionButton: ActionButton.ActionButton,
-  CollapseIndicator: CollapseIndicator.CollapseIndicator,
+  ActionButton: TextButton.default,
+  CollapseButton: CollapseButton.CollapseButton,
   Group: Group.Group
 });
 exports.Header = Header;

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

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 import { SectionHeaderProps } from './Header.types';
-export declare const Header: (({ label, onAction, actionButtonText, collapsedInfo }: SectionHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: ({ children, collapsedInfo, ...props }: import("./components/Compose/Compose.types").SectionHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Header: (({ label, actions }: SectionHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: (props: import("./components/Compose/Compose.types").SectionHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
     Label: ({ label, ...restProps }: import("./components/Label/Label.types").SectionHeaderLabelProps) => import("react/jsx-runtime").JSX.Element;
-    ActionButton: ({ onClick, children, ...restProps }: import("./components/ActionButton/ActionButton.types").SectionHeaderActionButtonsProps) => import("react/jsx-runtime").JSX.Element | null;
-    CollapseIndicator: (props: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps) => import("react/jsx-runtime").JSX.Element | null;
+    ActionButton: import("react").ForwardRefExoticComponent<import("../../../Button").TextButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    CollapseButton: ({ hidden, icon, ...props }: import("./components/CollapseButton/CollapseButton.types").SectionCollapseButtonProps) => import("react/jsx-runtime").JSX.Element | null;
     Group: (props: import("./components/Group/Group.types").SectionHeaderGroupProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/Section/components/Header/Header.js

@@ -1,31 +1,23 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { Label } from "./components/Label/Label.js";
-import { ActionButton } from "./components/ActionButton/ActionButton.js";
-import { CollapseIndicator } from "./components/CollapseIndicator/CollapseIndicator.js";
 import { Compose } from "./components/Compose/Compose.js";
 import { Group } from "./components/Group/Group.js";
+import { CollapseButton } from "./components/CollapseButton/CollapseButton.js";
+import TextButton from "../../../Button/TextButton/TextButton.js";
 const Header = Object.assign(({
   label,
-  onAction,
-  actionButtonText,
-  collapsedInfo
-}) => {
-  return jsxRuntimeExports.jsxs(Header.Compose, {
-    collapsedInfo,
-    children: [jsxRuntimeExports.jsx(Header.Label, {
-      label
-    }), jsxRuntimeExports.jsxs(Header.Group, {
-      children: [jsxRuntimeExports.jsx(Header.ActionButton, {
-        onClick: onAction,
-        children: actionButtonText
-      }), jsxRuntimeExports.jsx(Header.CollapseIndicator, {})]
-    })]
-  });
-}, {
+  actions
+}) => jsxRuntimeExports.jsxs(Header.Compose, {
+  children: [jsxRuntimeExports.jsx(Header.Label, {
+    label
+  }), jsxRuntimeExports.jsxs(Header.Group, {
+    children: [actions, jsxRuntimeExports.jsx(Header.CollapseButton, {})]
+  })]
+}), {
   Compose,
   Label,
-  ActionButton,
-  CollapseIndicator,
+  ActionButton: TextButton,
+  CollapseButton,
   Group
 });
 export {

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

@@ -1,6 +1,10 @@
+import { ReactNode } from 'react';
+import { ChildFree } from '../../../Helpers';
 import { SectionHeaderComposeProps } from './components/Compose/Compose.types';
-export interface SectionHeaderProps extends Omit<SectionHeaderComposeProps, 'children' | 'content'> {
+export interface OwnSectionHeaderProps {
     label: string;
-    actionButtonText?: string;
-    onAction?: () => void;
+    actions?: ReactNode;
+}
+export type RestSectionHeaderProps = ChildFree<SectionHeaderComposeProps>;
+export interface SectionHeaderProps extends RestSectionHeaderProps, OwnSectionHeaderProps {
 }

package/dist/Section/components/Header/components/CollapseButton/CollapseButton.cjs

@@ -0,0 +1,34 @@
+"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-collapsible/dist/index.cjs");
+const index$1 = require("../../../../../node_modules/@radix-ui/react-visually-hidden/dist/index.cjs");
+const Section_context = require("../../../../Section.context.cjs");
+const CollapseButton_style = require("./CollapseButton.style.cjs");
+const CollapseButton = ({
+  hidden,
+  icon = CollapseButton_style.SectionCollapseIcon,
+  ...props
+}) => {
+  const {
+    triggerId,
+    labelId,
+    open
+  } = Section_context.useSectionContext();
+  if (!triggerId) return null;
+  const trigger = jsxRuntime.jsxRuntimeExports.jsx(index.Trigger, {
+    asChild: true,
+    children: jsxRuntime.jsxRuntimeExports.jsx(CollapseButton_style.SectionCollapseButton, {
+      size: "M",
+      "aria-describedby": labelId,
+      "aria-label": open ? "Collapse Section" : "Expand Section",
+      icon,
+      ...props,
+      id: triggerId
+    })
+  });
+  return hidden ? jsxRuntime.jsxRuntimeExports.jsx(index$1.VisuallyHidden, {
+    children: trigger
+  }) : trigger;
+};
+exports.CollapseButton = CollapseButton;

package/dist/Section/components/Header/components/CollapseButton/CollapseButton.d.ts

@@ -0,0 +1,2 @@
+import { SectionCollapseButtonProps } from './CollapseButton.types';
+export declare const CollapseButton: ({ hidden, icon, ...props }: SectionCollapseButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Section/components/Header/components/CollapseButton/CollapseButton.js

@@ -0,0 +1,34 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Trigger } from "../../../../../node_modules/@radix-ui/react-collapsible/dist/index.js";
+import { VisuallyHidden } from "../../../../../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
+import { useSectionContext } from "../../../../Section.context.js";
+import { SectionCollapseButton, SectionCollapseIcon } from "./CollapseButton.style.js";
+const CollapseButton = ({
+  hidden,
+  icon = SectionCollapseIcon,
+  ...props
+}) => {
+  const {
+    triggerId,
+    labelId,
+    open
+  } = useSectionContext();
+  if (!triggerId) return null;
+  const trigger = jsxRuntimeExports.jsx(Trigger, {
+    asChild: true,
+    children: jsxRuntimeExports.jsx(SectionCollapseButton, {
+      size: "M",
+      "aria-describedby": labelId,
+      "aria-label": open ? "Collapse Section" : "Expand Section",
+      icon,
+      ...props,
+      id: triggerId
+    })
+  });
+  return hidden ? jsxRuntimeExports.jsx(VisuallyHidden, {
+    children: trigger
+  }) : trigger;
+};
+export {
+  CollapseButton
+};

package/dist/Section/components/Header/components/CollapseButton/CollapseButton.style.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiIcons = require("@redislabsdev/redis-ui-icons");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const IconButton = require("../../../../../Button/IconButton/IconButton.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const SectionCollapseButton = _styled__default.default(IconButton.default).withConfig({
+  displayName: "CollapseButtonstyle__SectionCollapseButton",
+  componentId: "RedisUI__sc-e7t43f-0"
+})(["&&{background-color:transparent;", ";}"], ({
+  size
+}) => {
+  const theme = redisUiStyles.useTheme().components.iconButton;
+  const current = theme.sizes[size || "M"];
+  const big = theme.sizes.XL;
+  return _styled.css`
+        width: ${big.width};
+        height: ${big.height};
+        padding-inline: calc((${big.width} - ${current.width}) / 2);
+        margin-inline: calc((${current.width} - ${big.width}) / 2);
+      `;
+});
+const SectionCollapseIcon = _styled__default.default(redisUiIcons.ChevronDownIcon).withConfig({
+  displayName: "CollapseButtonstyle__SectionCollapseIcon",
+  componentId: "RedisUI__sc-e7t43f-1"
+})(["transition:transform 0.1s;button[data-state='open'] &{transform:rotate(180deg);}"]);
+exports.SectionCollapseButton = SectionCollapseButton;
+exports.SectionCollapseIcon = SectionCollapseIcon;

package/dist/Section/components/Header/components/CollapseButton/CollapseButton.style.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SectionCollapseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../Button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const SectionCollapseIcon: import("styled-components").StyledComponent<({ size, customSize, color, customColor, title: titleProp, ...rest }: import("@redislabsdev/redis-ui-icons").MonochromeIconProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Section/components/Header/components/CollapseButton/CollapseButton.style.js

@@ -0,0 +1,28 @@
+import _styled, { css } from "styled-components";
+import { ChevronDownIcon } from "@redislabsdev/redis-ui-icons";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import IconButton from "../../../../../Button/IconButton/IconButton.js";
+const SectionCollapseButton = _styled(IconButton).withConfig({
+  displayName: "CollapseButtonstyle__SectionCollapseButton",
+  componentId: "RedisUI__sc-e7t43f-0"
+})(["&&{background-color:transparent;", ";}"], ({
+  size
+}) => {
+  const theme = useTheme().components.iconButton;
+  const current = theme.sizes[size || "M"];
+  const big = theme.sizes.XL;
+  return css`
+        width: ${big.width};
+        height: ${big.height};
+        padding-inline: calc((${big.width} - ${current.width}) / 2);
+        margin-inline: calc((${current.width} - ${big.width}) / 2);
+      `;
+});
+const SectionCollapseIcon = _styled(ChevronDownIcon).withConfig({
+  displayName: "CollapseButtonstyle__SectionCollapseIcon",
+  componentId: "RedisUI__sc-e7t43f-1"
+})(["transition:transform 0.1s;button[data-state='open'] &{transform:rotate(180deg);}"]);
+export {
+  SectionCollapseButton,
+  SectionCollapseIcon
+};

package/dist/Section/components/Header/components/CollapseButton/CollapseButton.types.d.ts

@@ -0,0 +1,6 @@
+import { IconType } from '@redislabsdev/redis-ui-icons/monochrome';
+import { IconButtonProps } from '../../../../../Button';
+export type SectionCollapseButtonProps = Omit<IconButtonProps, 'id' | 'icon'> & {
+    hidden?: boolean;
+    icon?: IconType;
+};

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

@@ -2,35 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
 const Compose_style = require("./Compose.style.cjs");
-const Section_context = require("../../../../Section.context.cjs");
-const Compose = ({
-  children,
-  collapsedInfo,
+const Compose = (props) => jsxRuntime.jsxRuntimeExports.jsx(Compose_style.SectionHeaderCompose, {
   ...props
-}) => {
-  const {
-    collapsible
-  } = Section_context.useSectionContext();
-  const sectionHeader = jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, {
-    children: [jsxRuntime.jsxRuntimeExports.jsx(Compose_style.SectionHeaderContent, {
-      children
-    }), collapsedInfo && jsxRuntime.jsxRuntimeExports.jsx(Compose_style.CollapsedInfoBar, {
-      "$collapsible": collapsible,
-      children: collapsedInfo
-    })]
-  });
-  return collapsible ? jsxRuntime.jsxRuntimeExports.jsx(Compose_style.SectionHeader, {
-    ...props,
-    "$collapsible": true,
-    children: sectionHeader
-  }) : jsxRuntime.jsxRuntimeExports.jsx(Compose_style.SectionHeader, {
-    ...props,
-    asChild: true,
-    "aria-expanded": void 0,
-    type: void 0,
-    children: jsxRuntime.jsxRuntimeExports.jsx("div", {
-      children: sectionHeader
-    })
-  });
-};
+});
 exports.Compose = Compose;

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

@@ -1,2 +1,2 @@
 import { SectionHeaderComposeProps } from './Compose.types';
-export declare const Compose: ({ children, collapsedInfo, ...props }: SectionHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Compose: (props: SectionHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,36 +1,8 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
-import { SectionHeaderContent, CollapsedInfoBar, SectionHeader } from "./Compose.style.js";
-import { useSectionContext } from "../../../../Section.context.js";
-const Compose = ({
-  children,
-  collapsedInfo,
+import { SectionHeaderCompose } from "./Compose.style.js";
+const Compose = (props) => jsxRuntimeExports.jsx(SectionHeaderCompose, {
   ...props
-}) => {
-  const {
-    collapsible
-  } = useSectionContext();
-  const sectionHeader = jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-    children: [jsxRuntimeExports.jsx(SectionHeaderContent, {
-      children
-    }), collapsedInfo && jsxRuntimeExports.jsx(CollapsedInfoBar, {
-      "$collapsible": collapsible,
-      children: collapsedInfo
-    })]
-  });
-  return collapsible ? jsxRuntimeExports.jsx(SectionHeader, {
-    ...props,
-    "$collapsible": true,
-    children: sectionHeader
-  }) : jsxRuntimeExports.jsx(SectionHeader, {
-    ...props,
-    asChild: true,
-    "aria-expanded": void 0,
-    type: void 0,
-    children: jsxRuntimeExports.jsx("div", {
-      children: sectionHeader
-    })
-  });
-};
+});
 export {
   Compose
 };

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

@@ -1,44 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
-const index = require("../../../../../node_modules/@radix-ui/react-collapsible/dist/index.cjs");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
-const CollapseIndicator_style = require("../CollapseIndicator/CollapseIndicator.style.cjs");
-const UnstyledButtonTrigger = require("../../../../../Helpers/UnstyledButtonTrigger.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const SectionHeader = _styled__default.default(index.Trigger).withConfig({
-  displayName: "Composestyle__SectionHeader",
+const SectionHeaderCompose = _styled__default.default.div.withConfig({
+  displayName: "Composestyle__SectionHeaderCompose",
   componentId: "RedisUI__sc-kgg5ny-0"
-})(["", ";display:block;outline:unset;&[type='button']{cursor:", ";}position:relative;", ";&[data-state='open']{box-shadow:0 ", " 0 0 ", ";", "{transform:rotate(180deg);}}"], UnstyledButtonTrigger.UnstyledButtonTrigger, ({
-  $collapsible
-}) => $collapsible ? "pointer" : "default", ({
-  $collapsible
-}) => (
-  // cannot do it on button itself because of border-radius conflicts with bottom shadow border
-  $collapsible ? _styled.css`
-          &:focus-visible {
-            &:before {
-              content: '';
-              pointer-events: none;
-              position: absolute;
-              inset: 0;
-              border-radius: ${() => redisUiStyles.useTheme().components.section.borderRadius};
-              ${redisUiStyles.getFocusStyleProperties(`-${redisUiStyles.useTheme().core.focus.size}`)};
-            }
-          }
-        ` : void 0
-), () => redisUiStyles.useTheme().components.section.separator.width, () => redisUiStyles.useTheme().components.section.separator.color, CollapseIndicator_style.CollapseIcon);
-const SectionHeaderContent = _styled__default.default.div.withConfig({
-  displayName: "Composestyle__SectionHeaderContent",
-  componentId: "RedisUI__sc-kgg5ny-1"
 })(["min-height:", ";padding:", ";background-color:", ";display:flex;align-items:center;justify-content:space-between;"], () => redisUiStyles.useTheme().components.section.header.minHeight, () => redisUiStyles.useTheme().components.section.header.padding, () => redisUiStyles.useTheme().components.section.header.backgroundColor);
-const CollapsedInfoBar = _styled__default.default.div.withConfig({
-  displayName: "Composestyle__CollapsedInfoBar",
-  componentId: "RedisUI__sc-kgg5ny-2"
-})(["background-color:", ";min-height:", ";padding:", ";box-shadow:inset 0 ", " 0 0 ", ";", "[data-state='open'] &{display:none;}"], ({
-  $collapsible
-}) => $collapsible ? redisUiStyles.useTheme().components.section.header.collapsedInfo.collapsableBackgroundColor : redisUiStyles.useTheme().components.section.header.collapsedInfo.backgroundColor, () => redisUiStyles.useTheme().components.section.header.collapsedInfo.minHeight, () => redisUiStyles.useTheme().components.section.header.collapsedInfo.padding, () => redisUiStyles.useTheme().components.section.separator.width, () => redisUiStyles.useTheme().components.section.separator.color, SectionHeader);
-exports.CollapsedInfoBar = CollapsedInfoBar;
-exports.SectionHeader = SectionHeader;
-exports.SectionHeaderContent = SectionHeaderContent;
+exports.SectionHeaderCompose = SectionHeaderCompose;

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

@@ -1,9 +1 @@
-/// <reference types="react" />
-import * as Collapsible from '@radix-ui/react-collapsible';
-export declare const SectionHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Collapsible.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, any, {
-    $collapsible?: boolean | undefined;
-}, never>;
-export declare const SectionHeaderContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CollapsedInfoBar: import("styled-components").StyledComponent<"div", any, {
-    $collapsible?: boolean | undefined;
-}, never>;
+export declare const SectionHeaderCompose: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,42 +1,9 @@
-import _styled, { css } from "styled-components";
-import { Trigger } from "../../../../../node_modules/@radix-ui/react-collapsible/dist/index.js";
-import { useTheme, getFocusStyleProperties } from "@redislabsdev/redis-ui-styles";
-import { CollapseIcon } from "../CollapseIndicator/CollapseIndicator.style.js";
-import { UnstyledButtonTrigger } from "../../../../../Helpers/UnstyledButtonTrigger.js";
-const SectionHeader = _styled(Trigger).withConfig({
-  displayName: "Composestyle__SectionHeader",
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const SectionHeaderCompose = _styled.div.withConfig({
+  displayName: "Composestyle__SectionHeaderCompose",
   componentId: "RedisUI__sc-kgg5ny-0"
-})(["", ";display:block;outline:unset;&[type='button']{cursor:", ";}position:relative;", ";&[data-state='open']{box-shadow:0 ", " 0 0 ", ";", "{transform:rotate(180deg);}}"], UnstyledButtonTrigger, ({
-  $collapsible
-}) => $collapsible ? "pointer" : "default", ({
-  $collapsible
-}) => (
-  // cannot do it on button itself because of border-radius conflicts with bottom shadow border
-  $collapsible ? css`
-          &:focus-visible {
-            &:before {
-              content: '';
-              pointer-events: none;
-              position: absolute;
-              inset: 0;
-              border-radius: ${() => useTheme().components.section.borderRadius};
-              ${getFocusStyleProperties(`-${useTheme().core.focus.size}`)};
-            }
-          }
-        ` : void 0
-), () => useTheme().components.section.separator.width, () => useTheme().components.section.separator.color, CollapseIcon);
-const SectionHeaderContent = _styled.div.withConfig({
-  displayName: "Composestyle__SectionHeaderContent",
-  componentId: "RedisUI__sc-kgg5ny-1"
 })(["min-height:", ";padding:", ";background-color:", ";display:flex;align-items:center;justify-content:space-between;"], () => useTheme().components.section.header.minHeight, () => useTheme().components.section.header.padding, () => useTheme().components.section.header.backgroundColor);
-const CollapsedInfoBar = _styled.div.withConfig({
-  displayName: "Composestyle__CollapsedInfoBar",
-  componentId: "RedisUI__sc-kgg5ny-2"
-})(["background-color:", ";min-height:", ";padding:", ";box-shadow:inset 0 ", " 0 0 ", ";", "[data-state='open'] &{display:none;}"], ({
-  $collapsible
-}) => $collapsible ? useTheme().components.section.header.collapsedInfo.collapsableBackgroundColor : useTheme().components.section.header.collapsedInfo.backgroundColor, () => useTheme().components.section.header.collapsedInfo.minHeight, () => useTheme().components.section.header.collapsedInfo.padding, () => useTheme().components.section.separator.width, () => useTheme().components.section.separator.color, SectionHeader);
 export {
-  CollapsedInfoBar,
-  SectionHeader,
-  SectionHeaderContent
+  SectionHeaderCompose
 };

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

@@ -1,5 +1,2 @@
-import { ReactNode } from 'react';
-import { ComposeElementProps } from '../../../../../Helpers/common.types';
-export interface SectionHeaderComposeProps extends ComposeElementProps<HTMLButtonElement> {
-    collapsedInfo?: ReactNode;
-}
+import { ComposeElementProps } from '../../../../../Helpers';
+export type SectionHeaderComposeProps = ComposeElementProps;

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

@@ -1,2 +1,2 @@
-import { ComposeElementProps } from '../../../../../Helpers/common.types';
+import { ComposeElementProps } from '../../../../../Helpers';
 export type SectionHeaderGroupProps = ComposeElementProps;

package/dist/Section/components/Header/components/Label/Label.cjs

@@ -1,15 +1,26 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const Section_context = require("../../../../Section.context.cjs");
 const Label_style = require("./Label.style.cjs");
 const Label = ({
   label,
   ...restProps
-}) => jsxRuntime.jsxRuntimeExports.jsx(Label_style.LabelText, {
-  size: "S",
-  ellipsis: true,
-  tooltipOnEllipsis: true,
-  ...restProps,
-  children: label
-});
+}) => {
+  const {
+    triggerId,
+    labelId
+  } = Section_context.useSectionContext();
+  return jsxRuntime.jsxRuntimeExports.jsx(Label_style.SectionHeaderLabelText, {
+    size: "S",
+    ellipsis: true,
+    tooltipOnEllipsis: true,
+    ...restProps,
+    id: labelId,
+    children: triggerId ? jsxRuntime.jsxRuntimeExports.jsx(Label_style.SectionHeaderLabel, {
+      htmlFor: triggerId,
+      children: label
+    }) : label
+  });
+};
 exports.Label = Label;

package/dist/Section/components/Header/components/Label/Label.js

@@ -1,15 +1,26 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
-import { LabelText } from "./Label.style.js";
+import { useSectionContext } from "../../../../Section.context.js";
+import { SectionHeaderLabelText, SectionHeaderLabel } from "./Label.style.js";
 const Label = ({
   label,
   ...restProps
-}) => jsxRuntimeExports.jsx(LabelText, {
-  size: "S",
-  ellipsis: true,
-  tooltipOnEllipsis: true,
-  ...restProps,
-  children: label
-});
+}) => {
+  const {
+    triggerId,
+    labelId
+  } = useSectionContext();
+  return jsxRuntimeExports.jsx(SectionHeaderLabelText, {
+    size: "S",
+    ellipsis: true,
+    tooltipOnEllipsis: true,
+    ...restProps,
+    id: labelId,
+    children: triggerId ? jsxRuntimeExports.jsx(SectionHeaderLabel, {
+      htmlFor: triggerId,
+      children: label
+    }) : label
+  });
+};
 export {
   Label
 };

package/dist/Section/components/Header/components/Label/Label.style.cjs

@@ -2,11 +2,24 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Section_context = require("../../../../Section.context.cjs");
 const Typography = require("../../../../../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const LabelText = _styled__default.default(Typography.default.Heading).withConfig({
-  displayName: "Labelstyle__LabelText",
+const SectionHeaderLabelText = _styled__default.default(Typography.default.Heading).withConfig({
+  displayName: "Labelstyle__SectionHeaderLabelText",
   componentId: "RedisUI__sc-14ws5ga-0"
-})(["color:", ";"], () => redisUiStyles.useTheme().components.section.header.label.textColor);
-exports.LabelText = LabelText;
+})(["color:", ";cursor:", ";"], ({
+  color
+}) => {
+  const {
+    textColor
+  } = redisUiStyles.useTheme().components.section.header.label;
+  return color ? void 0 : textColor;
+}, () => Section_context.useSectionContext().triggerId ? "pointer" : void 0);
+const SectionHeaderLabel = _styled__default.default.label.withConfig({
+  displayName: "Labelstyle__SectionHeaderLabel",
+  componentId: "RedisUI__sc-14ws5ga-1"
+})(["all:unset;"]);
+exports.SectionHeaderLabel = SectionHeaderLabel;
+exports.SectionHeaderLabelText = SectionHeaderLabelText;