@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/components/segmented-progress-bar/SegmentedProgressBar.js

@@ -1,91 +1,50 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTrigger';
 import { SeverityBgColor, SeverityTextColor } from '../../constants/severity';
-import { Tooltip } from '../tooltip/Tooltip';
 import styles from './SegmentedProgressBar.module.css';
-
-const SegmentedProgressBar = ({
-  segments,
-  total,
-  showRemainder = true,
-  remainderSeverity = "neutral",
-  centerLabel,
-  height,
-  rounded = true,
-  trackColor = "var(--color-secondary)",
-  tooltipPlacement = "top",
-  className,
-  ...aria
-}) => {
-  var _a;
-  const sum = segments.reduce((acc, s) => acc + (s.value || 0), 0);
-  const effectiveTotal = total != null ? total : sum;
-  const safeTotal = Math.max(effectiveTotal, 1e-4);
-  const remainder = Math.max(effectiveTotal - sum, 0);
-  const pctFilled = Math.min(100, Math.max(0, Math.min(sum, effectiveTotal) / safeTotal * 100));
-  const computedSegments = [
-    ...segments,
-    ...showRemainder && remainder > 0 ? [{ value: remainder, severity: remainderSeverity }] : []
-  ];
-  const autoNumbers = (() => {
-    const base = segments.map((s) => s.value || 0);
-    if (showRemainder) base.push(remainder);
-    return base.join("/");
-  })();
-  const rootClass = [styles.container, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: rootClass,
-      role: "progressbar",
-      "aria-valuemin": 0,
-      "aria-valuemax": effectiveTotal,
-      "aria-valuenow": Math.min(sum, effectiveTotal),
-      ...aria,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: styles.progressBar,
-          style: {
-            height: height ? `${height}px` : `var(--component-size-xs)`,
-            borderRadius: rounded ? `var(--border-radius-rounded)` : `var(--border-radius-none)`,
-            background: trackColor
-          },
-          children: [
-            /* @__PURE__ */ jsx("span", { className: styles.segmentsContainer, children: (_a = computedSegments == null ? void 0 : computedSegments.filter((x) => x.value > 0)) == null ? void 0 : _a.map((seg, i) => {
-              var _a2, _b, _c, _d, _e;
-              const bg = (_b = seg.color) != null ? _b : SeverityBgColor[(_a2 = seg.severity) != null ? _a2 : "neutral"];
-              const fg = SeverityTextColor[(_c = seg.severity) != null ? _c : "neutral"];
-              const tooltipText = typeof seg.label !== "undefined" ? seg.label : String((_d = seg.value) != null ? _d : 0);
-              return /* @__PURE__ */ jsx(
-                Tooltip,
-                {
-                  content: tooltipText,
-                  placement: tooltipPlacement,
-                  className: styles.segmentWrapper,
-                  style: {
-                    flex: `${Math.max(seg.value || 0, 0)} 0 0`,
-                    height: "100%",
-                    minWidth: "2px"
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: styles.progressSegment,
-                      "data-index": i,
-                      "data-severity": (_e = seg.severity) != null ? _e : "neutral",
-                      style: { background: bg, color: fg }
-                    }
-                  )
-                },
-                `${i}`
-              );
-            }) }),
-            /* @__PURE__ */ jsx("div", { className: styles.progressCenter, children: centerLabel ? typeof centerLabel === "function" ? centerLabel(pctFilled) : centerLabel : autoNumbers })
-          ]
-        }
-      )
-    }
-  );
+function SegmentWithTooltip({ seg, index, tooltipPlacement, }) {
+    var _a, _b, _c, _d, _e;
+    const bg = (_a = seg.color) !== null && _a !== void 0 ? _a : SeverityBgColor[(_b = seg.severity) !== null && _b !== void 0 ? _b : 'neutral'];
+    const fg = SeverityTextColor[(_c = seg.severity) !== null && _c !== void 0 ? _c : 'neutral'];
+    const tooltipContent = typeof seg.label !== 'undefined' ? seg.label : String((_d = seg.value) !== null && _d !== void 0 ? _d : 0);
+    const tooltipEnabled = tooltipContent !== null && tooltipContent !== undefined && tooltipContent !== '';
+    const { triggerProps } = useTooltipTrigger({
+        content: tooltipEnabled ? tooltipContent : null,
+        placement: tooltipPlacement,
+        offset: 8,
+    });
+    return (_jsx("span", { className: styles.segmentWrapper, style: {
+            flex: `${Math.max(seg.value || 0, 0)} 0 0`,
+            height: '100%',
+            minWidth: '2px',
+        }, ...(tooltipEnabled ? triggerProps : {}), children: _jsx("div", { className: styles.progressSegment, "data-index": index, "data-severity": (_e = seg.severity) !== null && _e !== void 0 ? _e : 'neutral', style: { background: bg, color: fg } }) }));
+}
+export const SegmentedProgressBar = ({ segments, total, showRemainder = true, remainderSeverity = 'neutral', centerLabel, height, rounded = true, trackColor = 'var(--color-neutral)', tooltipPlacement = 'top', className, ...aria }) => {
+    const sum = segments.reduce((acc, s) => acc + (s.value || 0), 0);
+    const effectiveTotal = total !== null && total !== void 0 ? total : sum;
+    const safeTotal = Math.max(effectiveTotal, 0.0001);
+    const remainder = Math.max(effectiveTotal - sum, 0);
+    const pctFilled = Math.min(100, Math.max(0, (Math.min(sum, effectiveTotal) / safeTotal) * 100));
+    const computedSegments = [
+        ...segments,
+        ...(showRemainder && remainder > 0 ? [{ value: remainder, severity: remainderSeverity }] : []),
+    ];
+    const autoNumbers = (() => {
+        const base = segments.map(s => s.value || 0);
+        if (showRemainder)
+            base.push(remainder);
+        return base.join('/');
+    })();
+    const rootClass = [styles.container, className].filter(Boolean).join(' ');
+    const filteredSegments = computedSegments.filter(x => x.value > 0);
+    return (_jsx("div", { className: rootClass, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": effectiveTotal, "aria-valuenow": Math.min(sum, effectiveTotal), ...aria, children: _jsxs("div", { className: styles.progressBar, style: {
+                height: height ? `${height}px` : `var(--component-size-xs)`,
+                borderRadius: rounded ? `var(--border-radius-rounded)` : `var(--border-radius-none)`,
+                background: trackColor,
+            }, children: [_jsx("span", { className: styles.segmentsContainer, children: filteredSegments.map((seg, i) => (_jsx(SegmentWithTooltip, { seg: seg, index: i, tooltipPlacement: tooltipPlacement }, `${i}`))) }), _jsx("div", { className: `${styles.progressCenter} ${filteredSegments.length === 0 ? styles.emptySegments : ''}`, children: centerLabel
+                        ? typeof centerLabel === 'function'
+                            ? centerLabel(pctFilled)
+                            : centerLabel
+                        : autoNumbers })] }) }));
 };
-
-export { SegmentedProgressBar };

package/dist/components/segmented-progress-bar/SegmentedProgressBar.module.css

@@ -24,11 +24,15 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-text-inverse);
+  color: var(--color-fg-on-strong);
   font-size: inherit;
   pointer-events: none;
 }
 
+.emptySegments.progressCenter {
+  color: unset;
+}
+
 .segmentWrapper,
 .segmentsContainer {
   display: flex;

package/dist/components/sidebar/Sidebar.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
+import type { JSX } from 'react';
 import { NavBarItem } from '../nav-bar/NavBar';
 interface SidebarProps {
     collapsed?: boolean;
+    onCollapseChange?: (collapsed: boolean) => void;
     items: NavBarItem[];
     logo?: React.ReactNode;
     productName?: string;
     productLogo?: React.ReactNode;
     activeLink?: string;
 }
-export declare function Sidebar({ collapsed, items, logo, productName, productLogo, activeLink, }: SidebarProps): JSX.Element;
+export declare function Sidebar({ items, productLogo, activeLink }: SidebarProps): JSX.Element;
 export {};

package/dist/components/sidebar/Sidebar.js

@@ -1,31 +1,7 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styles from './Sidebar.module.css';
-import { Headline } from '../headline/Headline';
-import SidenavFiltering from './components/sidenav-filteirng/SidenavFiltering';
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SidebarContainer } from './components/sidebar-container/SidebarContainer';
 import { SidebarProvider } from './providers/SidebarProvider';
-import { SidebarItems } from './components/sidebar-items/SidebarItems';
-import { Logo } from '../../assets/logo';
-
-function Sidebar({
-  collapsed,
-  items,
-  logo,
-  productName,
-  productLogo,
-  activeLink
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
-      /* @__PURE__ */ jsx("div", { className: styles.logo, children: logo != null ? logo : /* @__PURE__ */ jsx(Logo, {}) }),
-      productName && /* @__PURE__ */ jsx(Headline, { disableMargin: true, children: productName }),
-      productLogo && /* @__PURE__ */ jsx("div", { className: styles.productLogo, children: productLogo })
-    ] }),
-    /* @__PURE__ */ jsx(SidebarProvider, { items, children: /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
-      /* @__PURE__ */ jsx(SidenavFiltering, {}),
-      /* @__PURE__ */ jsx("div", { className: styles.links, children: /* @__PURE__ */ jsx(SidebarItems, { activeLink }) })
-    ] }) }),
-    /* @__PURE__ */ jsx("div", { className: styles.footer })
-  ] });
+export function Sidebar({ items, productLogo, activeLink }) {
+    return (_jsx(SidebarProvider, { items: items, children: _jsx(SidebarContainer, { productLogo: productLogo, activeLink: activeLink }) }));
 }
-
-export { Sidebar };

package/dist/components/sidebar/components/SidebarItem.js

@@ -1,14 +1,8 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { SidebarItemContent } from './sidebar-item-content/SidebarItemContent';
-
-function SidebarItem({
-  component: Component,
-  label,
-  icon,
-  href
-}) {
-  if (!Component) return null;
-  return /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(SidebarItemContent, { icon, label, href }) });
+export function SidebarItem({ component: Component, label, icon, href, }) {
+    if (!Component) {
+        return null;
+    }
+    return (_jsx(Component, { children: _jsx(SidebarItemContent, { icon: icon, label: label, href: href }) }));
 }
-
-export { SidebarItem };

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.d.ts

@@ -1,9 +1,11 @@
-import { NavBarItem } from '@/components/nav-bar/NavBar';
+import React from 'react';
+import { NavBarItem } from '../../../../components/nav-bar/NavBar';
 interface ExpandableSidebarItemProps {
     items: NavBarItem[];
     label: string;
+    component?: React.ElementType;
     icon: React.ReactNode;
     href?: string;
 }
-export declare function ExpandableSidebarItem({ items, label, icon, href, }: ExpandableSidebarItemProps): React.ReactNode;
+export declare function ExpandableSidebarItem({ items, label, icon, component: Component, href, }: ExpandableSidebarItemProps): React.ReactNode;
 export {};

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js

@@ -1,68 +1,54 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, useCallback } from 'react';
-import { SidebarItemContent } from '../sidebar-item-content/SidebarItemContent';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
 import styles from './ExpandableSidebarItem.module.css';
+import { Button } from '../../../button/Button';
 import { useSidebar } from '../../providers/SidebarProvider';
+import { SidebarItemContent } from '../sidebar-item-content/SidebarItemContent';
 import { SidebarItem } from '../SidebarItem';
-
-function ExpandableSidebarItem({
-  items,
-  label,
-  icon,
-  href
-}) {
-  const { defaultExpanded, resetExpandAll, activeLink } = useSidebar();
-  const [expanded, setExpanded] = useState(false);
-  const [closing, setClosing] = useState(false);
-  const [ready, setReady] = useState(false);
-  useEffect(() => {
-    setReady(true);
-  }, []);
-  useEffect(() => {
-    if (defaultExpanded === null) {
-      return;
-    }
-    setExpanded(defaultExpanded);
-  }, [defaultExpanded]);
-  const handleAnimationEnd = useCallback(() => {
-    if (ready) {
-      setExpanded(!closing);
-      setClosing(false);
-    }
-  }, [closing, ready]);
-  const toggleAccordion = useCallback(() => {
-    resetExpandAll();
-    if (!expanded) {
-      setExpanded(true);
-      return;
+export function ExpandableSidebarItem({ items, label, icon, component: Component, href, }) {
+    const { defaultExpanded, resetExpandAll, isSidebarCollapsed, handleSidebarCollapseChange, expandedItems, } = useSidebar();
+    const [expanded, setExpanded] = useState(false);
+    const [closing, setClosing] = useState(false);
+    const [ready, setReady] = useState(false);
+    useEffect(() => {
+        setReady(true);
+    }, []);
+    useEffect(() => {
+        if (expandedItems.has(href)) {
+            setExpanded(true);
+        }
+    }, [expandedItems, href]);
+    useEffect(() => {
+        if (defaultExpanded === null) {
+            return;
+        }
+        setExpanded(defaultExpanded);
+    }, [defaultExpanded]);
+    const handleAnimationEnd = useCallback(() => {
+        if (ready) {
+            setExpanded(!closing);
+            setClosing(false);
+        }
+    }, [closing, ready]);
+    const toggleAccordion = useCallback((e, onlyExpand = false) => {
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        resetExpandAll();
+        handleSidebarCollapseChange === null || handleSidebarCollapseChange === void 0 ? void 0 : handleSidebarCollapseChange(false);
+        if (!expanded) {
+            setExpanded(true);
+            return;
+        }
+        if (!isSidebarCollapsed && !onlyExpand) {
+            setClosing(true);
+        }
+    }, [expanded, handleSidebarCollapseChange, isSidebarCollapsed, resetExpandAll]);
+    if (!items)
+        return null;
+    if (!Component) {
+        return null;
     }
-    setClosing(true);
-  }, [expanded]);
-  if (!items) return null;
-  return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${expanded ? styles.expanded : ""}`, children: [
-    /* @__PURE__ */ jsx("button", { onClick: toggleAccordion, className: styles.button, children: /* @__PURE__ */ jsx(
-      SidebarItemContent,
-      {
-        icon,
-        label,
-        suffixIcon: /* @__PURE__ */ jsx(
-          ChevronDown,
-          {
-            className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`
-          }
-        )
-      }
-    ) }),
-    expanded && /* @__PURE__ */ jsx(
-      "div",
-      {
-        onAnimationEnd: handleAnimationEnd,
-        className: `${styles.childrenContainer} ${closing ? "animate--collapse" : ""} ${expanded ? "animate--expand" : "visually-hidden"}`,
-        children: items.map(({ component: Component, label: label2, icon: icon2, href: href2 }, id) => /* @__PURE__ */ jsx(SidebarItem, { component: Component, label: label2, icon: icon2, href: href2 }, id))
-      }
-    )
-  ] });
+    return (_jsxs("div", { className: `${styles.container} ${expanded ? styles.expanded : ''}`, children: [_jsx(Component, { onClick: () => toggleAccordion(undefined, true), children: _jsx(SidebarItemContent, { icon: icon, label: label, href: href, disableActiveStyles: expanded, suffixIcon: isSidebarCollapsed ? null : (_jsx(Button, { variant: "outlined", onClick: toggleAccordion, children: _jsx(ChevronDown, { className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ''}` }) })) }) }), expanded && !isSidebarCollapsed && (_jsx("div", { onAnimationEnd: handleAnimationEnd, className: `${styles.childrenContainer} ${closing ? 'animate--collapse' : ''} ${expanded ? 'animate--expand' : 'visually-hidden'}`, children: items.map(({ component: Component, label, icon, href }, id) => (_jsx(SidebarItem, { component: Component, label: label, icon: icon, href: href }, id))) }))] }));
 }
-
-export { ExpandableSidebarItem };

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.module.css

@@ -1,5 +1,4 @@
 .button {
-  color: var(--color-text);
 }
 
 .container {
@@ -9,49 +8,21 @@
   border-radius: var(--border-radius-default);
 }
 
-.container.expanded {
+.container button {
+  color: var(--color-text);
+  min-block-size: 20px !important;
+  min-inline-size: 20px !important;
+  max-block-size: 20px !important;
+  max-inline-size: 20px !important;
+  &:hover {
+    background-color: var(--color-bg-contextual-subtle) !important;
+  }
 }
 
 .childrenContainer {
   overflow: hidden;
-
-  /* --width: 2px;
-  --color: var(--opac-bg-default); */
-}
-
-/* .childrenContainer::after {
 }
 
-.childrenContainer > * {
-  position: relative;
-  &::before {
-    content: '';
-    position: absolute;
-    bottom: top;
-    background-color: var(--color);
-    left: 0;
-    height: 100%;
-    width: var(--width);
-    left: var(--icon-size);
-    transform: translateX(-50%);
-  }
-  &:last-of-type {
-    &::before {
-      height: calc(50% + var(--width));
-    }
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 50%;
-    background-color: var(--color);
-    height: var(--width);
-    width: calc(var(--icon-size) / 2 + 5px);
-    left: calc(var(--icon-size) + var(--width) / 2);
-    transform: translateY(100%);
-  }
-} */
-
 .chevron {
   transition: transform 0.3s ease;
 }

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode, JSX } from 'react';
+interface SidebarContainerProps {
+    logo?: ReactNode;
+    productName?: string;
+    productLogo?: ReactNode;
+    activeLink?: string;
+}
+export declare function SidebarContainer({ logo, productName, productLogo, activeLink, }: SidebarContainerProps): JSX.Element;
+export {};

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft } from 'lucide-react';
+import { Logo } from '../../../../assets/logo';
+import { Button } from '../../../../components/button/Button';
+import { Headline } from '../../../../components/headline/Headline';
+import { SidebarItems } from '../../../../components/sidebar/components/sidebar-items/SidebarItems';
+import SidenavFiltering from '../../../../components/sidebar/components/sidenav-filteirng/SidenavFiltering';
+import { useSidebar } from '../../../../components/sidebar/providers/SidebarProvider';
+import styles from './SidebarContainer.module.css';
+export function SidebarContainer({ logo, productName, productLogo, activeLink, }) {
+    const { isSidebarCollapsed, handleSidebarCollapseChange } = useSidebar();
+    return (_jsxs("div", { className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''}`, children: [_jsxs("div", { className: styles.header, children: [_jsxs("span", { className: styles.logoContainer, children: [_jsx("div", { style: { textAlign: isSidebarCollapsed ? 'center' : 'right' }, children: _jsx(Button, { size: "sm", variant: "inline", icon: _jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : '' }), onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed) }) }), _jsx("div", { className: styles.logo, children: logo !== null && logo !== void 0 ? logo : _jsx(Logo, {}) })] }), productName && _jsx(Headline, { disableMargin: true, children: productName }), productLogo && _jsx("div", { className: styles.productLogo, children: productLogo })] }), _jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.filter, children: _jsx(SidenavFiltering, {}) }), _jsx("div", { className: `${styles.links} hideScrollBar`, children: _jsx(SidebarItems, { activeLink: activeLink }) })] }), _jsx("div", { className: styles.footer })] }));
+}

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css

@@ -0,0 +1,155 @@
+.container {
+  flex-shrink: 1;
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  width: var(--sidebar-width);
+  inline-size: var(--sidebar-width);
+  box-sizing: border-box;
+  border-inline-end: var(--border-width-thin) solid var(--color-border-default);
+  padding-bottom: var(--spacing-lg);
+  transition:
+    width var(--transition-fast) var(--ease-standard),
+    inline-size var(--transition-fast) var(--ease-standard);
+}
+
+.container.collapsed {
+  width: var(--component-size-lg);
+  inline-size: var(--component-size-lg);
+  box-sizing: content-box;
+  gap: var(--spacing-sm);
+  .content {
+    gap: var(--spacing-2xs);
+  }
+}
+
+.container .logoContainer button,
+.container .filter button {
+  border-radius: 0;
+  min-height: var(--component-size-md);
+  width: 100%;
+  padding: var(--spacing-xs);
+  color: var(--color-fg-muted);
+}
+
+.container:not(.collapsed) .links,
+.container:not(.collapsed) .filter {
+  padding-inline: var(--spacing-sm);
+}
+
+.container .logoContainer {
+  padding-top: var(--spacing-xs);
+  min-block-size: 60px;
+  border-bottom: 1px solid var(--color-border-default);
+  padding-bottom: var(--spacing-xxs);
+}
+
+.container.collapsed .logoContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.container:not(.collapsed) .logoContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  padding-right: var(--spacing-xxs);
+}
+
+.container a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.container .links button {
+  background: none;
+  border: 0;
+  font-size: inherit;
+  color: inherit;
+  display: inline-flex;
+  padding: 0;
+}
+
+.container a:focus-visible,
+.container button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.links {
+  overflow: auto;
+  display: flex;
+  flex-grow: 1;
+  overflow: auto;
+  flex-direction: column;
+  gap: 2px;
+  font-size: var(--font-size-sm);
+}
+
+.container:not(.collapsed) .links {
+  padding-inline: var(--spacing-sm);
+}
+
+.header {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.container:not(.collapsed) .header {
+  gap: var(--spacing-sm);
+}
+
+.container:not(.collapsed) .logo {
+  padding: 0 var(--spacing-sm);
+}
+.container.collapsed .logo {
+  display: none;
+}
+
+.logo img,
+.logo svg {
+  inline-size: 50px;
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+.container.collapsed .productLogo {
+  display: none;
+}
+.productLogo {
+  max-inline-size: 100%;
+  padding: 0 var(--spacing-sm);
+}
+
+.productLogo svg {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+.collapsedIcon {
+  transform: rotate(180deg);
+  transition: transform 0.3s ease;
+}
+.content {
+  overflow: auto;
+  flex: 1 1 auto;
+  overflow-y: visible;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  gap: 5px;
+  &:not(.collapsed) {
+    gap: var(--spacing-md);
+  }
+}
+
+.footer {
+  flex: 0 0 auto;
+}

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
+import type { JSX } from 'react';
 export interface SidebarItemContentProps {
     icon?: React.ReactNode;
     label: React.ReactNode;
     suffixIcon?: React.ReactNode;
     href?: string;
+    disableActiveStyles?: boolean;
 }
-export declare function SidebarItemContent({ icon, label, suffixIcon, href, }: SidebarItemContentProps): JSX.Element;
+export declare function SidebarItemContent({ icon, label, suffixIcon, href, disableActiveStyles, }: SidebarItemContentProps): JSX.Element;

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.js

@@ -1,21 +1,7 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './SidebarItemContent.module.css';
 import { useSidebar } from '../../providers/SidebarProvider';
-
-function SidebarItemContent({
-  icon,
-  label,
-  suffixIcon,
-  href
-}) {
-  const { activeLink } = useSidebar();
-  return /* @__PURE__ */ jsxs("span", { className: `${styles.container} ${activeLink === href ? styles.active : ""}`, children: [
-    /* @__PURE__ */ jsxs("span", { children: [
-      /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon }),
-      /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
-    ] }),
-    suffixIcon && /* @__PURE__ */ jsx("span", { className: styles.suffixIcon, children: suffixIcon })
-  ] });
+export function SidebarItemContent({ icon, label, suffixIcon, href, disableActiveStyles = false, }) {
+    const { activeLink, isSidebarCollapsed } = useSidebar();
+    return (_jsxs("span", { className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ''} ${isSidebarCollapsed ? styles.collapsed : ''}`, children: [_jsxs("span", { children: [_jsx("span", { className: styles.icon, children: icon }), !isSidebarCollapsed && _jsx("span", { className: styles.label, children: label })] }), suffixIcon && !isSidebarCollapsed && _jsx("span", { className: styles.suffixIcon, children: suffixIcon })] }));
 }
-
-export { SidebarItemContent };