@kushagradhawan/kookie-ui 0.1.49 → 0.1.50

package/components.css

@@ -7548,7 +7548,7 @@
     --base-menu-content-padding: var(--space-2);
     --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
     --base-menu-item-padding-right: var(--space-2);
-    --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
+    --base-menu-item-padding-y: var(--space-2);
     --base-menu-item-height: var(--space-5);
     border-radius: var(--radius-3);
 }
@@ -7584,7 +7584,7 @@
     --base-menu-content-padding: var(--space-3);
     --base-menu-item-padding-left: var(--space-3);
     --base-menu-item-padding-right: var(--space-3);
-    --base-menu-item-padding-y: var(--space-1);
+    --base-menu-item-padding-y: var(--space-2);
     --base-menu-item-height: var(--space-6);
     border-radius: var(--radius-5);
 }
@@ -7620,7 +7620,7 @@
     --base-menu-content-padding: var(--space-3);
     --base-menu-item-padding-left: var(--space-3);
     --base-menu-item-padding-right: var(--space-3);
-    --base-menu-item-padding-y: var(--space-1);
+    --base-menu-item-padding-y: var(--space-2);
     --base-menu-item-height: var(--space-6);
     border-radius: var(--radius-6);
 }
@@ -7657,7 +7657,7 @@
         --base-menu-content-padding: var(--space-2);
         --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
         --base-menu-item-padding-right: var(--space-2);
-        --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
+        --base-menu-item-padding-y: var(--space-2);
         --base-menu-item-height: var(--space-5);
         border-radius: var(--radius-3);
     }
@@ -7693,7 +7693,7 @@
         --base-menu-content-padding: var(--space-3);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
-        --base-menu-item-padding-y: var(--space-1);
+        --base-menu-item-padding-y: var(--space-2);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-5);
     }
@@ -7729,7 +7729,7 @@
         --base-menu-content-padding: var(--space-3);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
-        --base-menu-item-padding-y: var(--space-1);
+        --base-menu-item-padding-y: var(--space-2);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-6);
     }
@@ -7767,7 +7767,7 @@
         --base-menu-content-padding: var(--space-2);
         --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
         --base-menu-item-padding-right: var(--space-2);
-        --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
+        --base-menu-item-padding-y: var(--space-2);
         --base-menu-item-height: var(--space-5);
         border-radius: var(--radius-3);
     }
@@ -7803,7 +7803,7 @@
         --base-menu-content-padding: var(--space-3);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
-        --base-menu-item-padding-y: var(--space-1);
+        --base-menu-item-padding-y: var(--space-2);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-5);
     }
@@ -7839,7 +7839,7 @@
         --base-menu-content-padding: var(--space-3);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
-        --base-menu-item-padding-y: var(--space-1);
+        --base-menu-item-padding-y: var(--space-2);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-6);
     }
@@ -7877,7 +7877,7 @@
         --base-menu-content-padding: var(--space-2);
         --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
         --base-menu-item-padding-right: var(--space-2);
-        --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
+        --base-menu-item-padding-y: var(--space-2);
         --base-menu-item-height: var(--space-5);
         border-radius: var(--radius-3);
     }
@@ -7913,7 +7913,7 @@
         --base-menu-content-padding: var(--space-3);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
-        --base-menu-item-padding-y: var(--space-1);
+        --base-menu-item-padding-y: var(--space-2);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-5);
     }
@@ -7949,7 +7949,7 @@
         --base-menu-content-padding: var(--space-3);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
-        --base-menu-item-padding-y: var(--space-1);
+        --base-menu-item-padding-y: var(--space-2);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-6);
     }
@@ -7987,7 +7987,7 @@
         --base-menu-content-padding: var(--space-2);
         --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
         --base-menu-item-padding-right: var(--space-2);
-        --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
+        --base-menu-item-padding-y: var(--space-2);
         --base-menu-item-height: var(--space-5);
         border-radius: var(--radius-3);
     }
@@ -8023,7 +8023,7 @@
         --base-menu-content-padding: var(--space-3);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
-        --base-menu-item-padding-y: var(--space-1);
+        --base-menu-item-padding-y: var(--space-2);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-5);
     }
@@ -8059,7 +8059,7 @@
         --base-menu-content-padding: var(--space-3);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
-        --base-menu-item-padding-y: var(--space-1);
+        --base-menu-item-padding-y: var(--space-2);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-6);
     }
@@ -8097,7 +8097,7 @@
         --base-menu-content-padding: var(--space-2);
         --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
         --base-menu-item-padding-right: var(--space-2);
-        --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
+        --base-menu-item-padding-y: var(--space-2);
         --base-menu-item-height: var(--space-5);
         border-radius: var(--radius-3);
     }
@@ -8133,7 +8133,7 @@
         --base-menu-content-padding: var(--space-3);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
-        --base-menu-item-padding-y: var(--space-1);
+        --base-menu-item-padding-y: var(--space-2);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-5);
     }
@@ -8169,7 +8169,7 @@
         --base-menu-content-padding: var(--space-3);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
-        --base-menu-item-padding-y: var(--space-1);
+        --base-menu-item-padding-y: var(--space-2);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-6);
     }
@@ -8209,8 +8209,7 @@
     color: var(--gray-a8);
     cursor: default;
 }
-.rt-BaseMenuItem
-  :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
+.rt-BaseMenuItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
     color: var(--gray-a10);
 }
 .rt-BaseMenuItem:where([data-disabled], [data-highlighted]) :where(.rt-BaseMenuShortcut), .rt-BaseMenuSubTrigger:where([data-state='open']) :where(.rt-BaseMenuShortcut) {
@@ -14557,6 +14556,9 @@
     box-shadow: none !important;
     border-radius: 0 !important;
 }
+.rt-SidebarContent .rt-BaseMenuViewport {
+    gap: var(--space-5);
+}
 .rt-SidebarContent :where(.rt-ScrollAreaRoot) {
     flex: 1;
     display: flex;
@@ -14589,7 +14591,6 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    padding-bottom: var(--base-menu-content-padding);
     box-sizing: border-box;
     list-style: none;
     margin: 0;
@@ -14747,49 +14748,199 @@
     margin-top: calc(var(--space-1) / 4);
     margin-bottom: calc(var(--space-1) / 4);
 }
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarContent),
-.rt-ShellSidebarRail :where(.rt-SidebarContent),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarContent) {
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent) {
     padding: var(--space-2);
 }
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuButton),
-.rt-ShellSidebarRail :where(.rt-SidebarMenuButton),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuButton) {
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuViewport) {
+    padding: var(--space-2) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
+    justify-content: center !important;
+    align-items: center !important;
+    flex-direction: column !important;
+    gap: var(--space-1) !important;
+    text-align: center !important;
+    font-size: var(--font-size-0) !important;
+    line-height: var(--line-height-0) !important;
+    padding-top: var(--space-2) !important;
+    padding-bottom: var(--space-2) !important;
+    padding-left: var(--space-1) !important;
+    padding-right: var(--space-1) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+    --base-menu-item-padding-right: var(--space-1) !important;
+    --base-menu-item-padding-y: var(--space-2) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
     justify-content: center;
     align-items: center;
     flex-direction: column;
     gap: var(--space-1);
-    padding: var(--space-2) var(--space-1);
-}
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuBadge),
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuShortcut),
-.rt-ShellSidebarRail :where(.rt-SidebarMenuBadge),
-.rt-ShellSidebarRail :where(.rt-SidebarMenuShortcut),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuBadge),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuShortcut) {
-    display: none;
+    text-align: center;
+    font-size: var(--font-size-0);
+    line-height: var(--line-height-0);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    min-width: 0;
 }
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarGroupLabel),
-.rt-ShellSidebarRail :where(.rt-SidebarGroupLabel),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarGroupLabel) {
-    display: block;
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) :where(svg) {
+    width: var(--content-icon-size-3);
+    height: var(--content-icon-size-3);
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+    --base-menu-item-padding-right: var(--space-1) !important;
+    --base-menu-item-padding-y: var(--space-2) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: var(--space-1);
     text-align: center;
     font-size: var(--font-size-0);
     line-height: var(--line-height-0);
-    color: var(--gray-a9);
-    font-weight: var(--font-weight-medium);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    min-width: 0;
 }
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuSubTriggerIcon),
-.rt-ShellSidebarRail :where(.rt-SidebarMenuSubTriggerIcon),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuSubTriggerIcon) {
-    display: none;
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) :where(svg) {
+    width: var(--content-icon-size-4);
+    height: var(--content-icon-size-4);
 }
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuSubList),
-.rt-ShellSidebarRail :where(.rt-SidebarMenuSubList),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuSubList) {
-    padding-left: 0;
-    border-left: none;
-    margin-left: 0;
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+    --base-menu-item-padding-right: var(--space-1) !important;
+    --base-menu-item-padding-y: var(--space-2) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: var(--space-1);
+    text-align: center;
+    font-size: var(--font-size-0);
+    line-height: var(--line-height-0);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    min-width: 0;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) :where(svg) {
+    width: var(--content-icon-size-5);
+    height: var(--content-icon-size-5);
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton > *) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    min-width: 0;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubTrigger > *) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton > * > svg) {
+    flex-shrink: 0;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubContent .rt-SidebarMenuButton > *) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    min-width: 0;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton) :where(svg) {
+    display: block;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton .rt-SidebarMenuLabel) {
+    display: block;
+    max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    color: var(--accent-11);
+    font-size: var(--font-size-0);
+    line-height: var(--line-height-0);
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuBadge),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuShortcut),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-Badge),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-Kbd) {
+    display: none !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarGroupLabel) {
+    display: none !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubTriggerIcon),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuSubTriggerIcon) {
+    display: none !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubList),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuSubList) {
+    padding-left: 0 !important;
+    margin-left: 0 !important;
+    border-left: 0 !important;
+    border-top: 0 !important;
+    border-bottom: 0 !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubList::before),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuSubList::before) {
+    content: none !important;
+    display: none !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubContent) {
+    padding-left: 0 !important;
+    margin-left: 0 !important;
+    border-left: 0 !important;
+    border-top: 1px solid var(--gray-a6) !important;
+    border-bottom: 1px solid var(--gray-a6) !important;
+    margin-top: var(--space-2) !important;
+    margin-bottom: var(--space-2) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubContent .rt-SidebarMenuButton) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
 }
 :where([data-panel-background='translucent']) .rt-SidebarContainer {
     --sidebar-border-color: var(--gray-a6);
@@ -14995,7 +15146,7 @@
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
     border-radius: var(--radius-1);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-regular);
 }
 .rt-SidebarContent:where(.rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
     width: var(--content-icon-size-1);
@@ -15014,7 +15165,7 @@
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
     border-radius: var(--radius-2);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-regular);
 }
 .rt-SidebarContent:where(.rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
     width: var(--content-icon-size-2);
@@ -15056,7 +15207,7 @@
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.xs\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-1);
@@ -15075,7 +15226,7 @@
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.xs\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-2);
@@ -15118,7 +15269,7 @@
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.sm\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-1);
@@ -15137,7 +15288,7 @@
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.sm\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-2);
@@ -15180,7 +15331,7 @@
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.md\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-1);
@@ -15199,7 +15350,7 @@
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.md\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-2);
@@ -15242,7 +15393,7 @@
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.lg\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-1);
@@ -15261,7 +15412,7 @@
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.lg\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-2);
@@ -15304,7 +15455,7 @@
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.xl\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-1);
@@ -15323,7 +15474,7 @@
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.xl\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-2);
@@ -15386,6 +15537,7 @@
 .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) {
     background-color: var(--accent-9);
     color: var(--accent-contrast);
+    font-weight: var(--font-weight-medium);
 }
 .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text) {
     color: inherit !important;
@@ -15431,6 +15583,7 @@
 .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) {
     background-color: var(--accent-12);
     color: var(--accent-1);
+    font-weight: var(--font-weight-medium);
 }
 .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text) {
     color: inherit !important;
@@ -15506,6 +15659,7 @@
 .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]) {
     background-color: var(--accent-3);
     color: var(--accent-12);
+    font-weight: var(--font-weight-medium);
 }
 :where([data-panel-background='translucent']) :is(.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])), :where([data-panel-background='translucent']) :is(.rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])), :where([data-panel-background='translucent']) :is(.rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])) {
     background-color: var(--accent-a3);
@@ -15576,6 +15730,7 @@
 }
 .rt-ShellRail[data-mode='collapsed'] {
     width: 0px;
+    transition-delay: var(--motion-duration-small);
     position: absolute;
     inset-block: 0;
     inset-inline-start: 0;
@@ -15611,6 +15766,7 @@
 }
 .rt-ShellPanel:not([data-visible]) {
     width: 0px;
+    transition-delay: var(--motion-duration-small);
     position: absolute;
     inset-block: 0;
     inset-inline-start: var(--peek-rail-width, var(--rail-size, 64px));
@@ -15651,6 +15807,7 @@
 }
 .rt-ShellSidebar[data-mode='collapsed'] {
     width: 0px;
+    transition-delay: var(--motion-duration-small);
     position: absolute;
     inset-block: 0;
     inset-inline-start: 0;
@@ -15670,6 +15827,17 @@
 .rt-ShellSidebarContent[data-visible] {
     opacity: 1;
 }
+.rt-ShellSidebarContent[data-phase='hiding'] {
+    opacity: 0;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellSidebarContent[data-phase='resizing'] {
+    opacity: 0;
+}
+.rt-ShellSidebarContent[data-phase='showing'] {
+    opacity: 1;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
 .rt-ShellSidebar[data-mode='collapsed'] .rt-ShellSidebarContent {
     opacity: 0;
     transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
@@ -15710,6 +15878,7 @@
 }
 .rt-ShellInspector[data-mode='collapsed'] {
     width: 0px;
+    transition-delay: var(--motion-duration-small);
     position: absolute;
     inset-block: 0;
     inset-inline-end: 0;
@@ -15747,6 +15916,7 @@
     position: absolute;
     inset-inline: 0;
     inset-block-end: 0;
+    transition-delay: var(--motion-duration-small);
 }
 .rt-ShellBottomContent {
     display: flex;
@@ -15917,6 +16087,7 @@
 .rt-ShellInspector[data-peek] .rt-ShellInspectorContent,
 .rt-ShellBottom[data-peek] .rt-ShellBottomContent {
     opacity: 1;
+    transition-delay: var(--motion-duration-small);
 }
 .rt-ShellRail[data-peek] {
     inset-block: 0;

package/dist/cjs/components/_internal/shell-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shell-sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,aAAa,EAAc,MAAM,oBAAoB,CAAC;AAC/D,OAAO,KAAK,EAAc,QAAQ,EAAE,mBAAmB,EAAqB,sBAAsB,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGlK,UAAU,SAAU,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC/D,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,WAAW,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,yBAAyB,CACrD,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,CAAC,GAAG;IACzD,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CACjC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CACxC,GAAG;IAAE,MAAM,EAAE,OAAO,aAAa,CAAA;CAAE,CAAC;AAErC,eAAO,MAAM,OAAO,EA2Sf,gBAAgB,CAAC"}
+{"version":3,"file":"shell-sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,aAAa,EAAc,MAAM,oBAAoB,CAAC;AAC/D,OAAO,KAAK,EAAc,QAAQ,EAAE,mBAAmB,EAAqB,sBAAsB,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGlK,UAAU,SAAU,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC/D,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,WAAW,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,yBAAyB,CACrD,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,CAAC,GAAG;IACzD,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CACjC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CACxC,GAAG;IAAE,MAAM,EAAE,OAAO,aAAa,CAAA;CAAE,CAAC;AAErC,eAAO,MAAM,OAAO,EAkUf,gBAAgB,CAAC"}

package/dist/cjs/components/_internal/shell-sidebar.js

@@ -1,2 +1,2 @@
-"use strict";var ue=Object.create;var R=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var be=Object.getOwnPropertyNames;var fe=Object.getPrototypeOf,me=Object.prototype.hasOwnProperty;var Me=(i,s)=>{for(var a in s)R(i,a,{get:s[a],enumerable:!0})},W=(i,s,a,d)=>{if(s&&typeof s=="object"||typeof s=="function")for(let c of be(s))!me.call(i,c)&&c!==a&&R(i,c,{get:()=>s[c],enumerable:!(d=pe(s,c))||d.enumerable});return i};var T=(i,s,a)=>(a=i!=null?ue(fe(i)):{},W(s||!i||!i.__esModule?R(a,"default",{value:i,enumerable:!0}):a,i)),Se=i=>W(R({},"__esModule",{value:!0}),i);var he={};Me(he,{Sidebar:()=>O});module.exports=Se(he);var r=T(require("react")),G=T(require("classnames")),w=T(require("../sheet.js")),J=require("../visually-hidden.js"),H=require("../shell.context.js"),Q=require("../shell.hooks.js"),U=require("./shell-resize.js"),b=require("./shell-handles.js"),X=require("../shell.types.js");const O=r.forwardRef(({className:i,presentation:s={initial:"overlay",md:"fixed"},mode:a,defaultMode:d="expanded",onModeChange:c,expandedSize:u=288,minSize:z=200,maxSize:N=400,resizable:g=!1,collapsible:Y=!0,onExpand:$,onCollapse:A,onResize:k,onResizeStart:Z,onResizeEnd:_,snapPoints:ee,snapTolerance:te,collapseThreshold:re,paneId:P,persistence:C,children:ne,style:ae,thinSize:f=64,toggleModes:E,...oe},m)=>{const t=(0,H.useShell)(),x=(0,Q.useResponsivePresentation)(s),M=x==="overlay",ie=x==="stacked",S=r.useRef(null),se=r.useCallback(e=>{S.current=e,typeof m=="function"?m(e):m&&(m.current=e)},[m]),I=r.Children.toArray(ne),V=I.filter(e=>r.isValidElement(e)&&e.type===b.SidebarHandle),D=I.filter(e=>!(r.isValidElement(e)&&e.type===b.SidebarHandle)),de=r.useId();r.useEffect(()=>(t.setHasSidebar(!0),()=>{t.setHasSidebar(!1)}),[t,de]);const L=r.useRef(!1);r.useEffect(()=>{L.current||(L.current=!0,a===void 0&&t.sidebarMode!==d&&t.setSidebarMode(d))},[]),r.useEffect(()=>{a!==void 0&&t.sidebarMode!==a&&t.setSidebarMode(a)},[a,t]),r.useEffect(()=>{a===void 0&&c?.(t.sidebarMode)},[t.sidebarMode,a,c]),r.useEffect(()=>{t.sidebarMode==="expanded"?$?.():A?.()},[t.sidebarMode,$,A]);const K=t.sidebarMode!=="collapsed",h=r.useMemo(()=>{if(!P||C)return C;const e=`kookie-ui:shell:sidebar:${P}`;return{load:()=>{if(typeof window>"u")return;const n=window.localStorage.getItem(e);return n?Number(n):void 0},save:n=>{typeof window>"u"||window.localStorage.setItem(e,String(n))}}},[P,C]);r.useEffect(()=>{let e=!0;return(async()=>{if(!g||!h?.load||M)return;const o=await h.load();e&&typeof o=="number"&&S.current&&(S.current.style.setProperty("--sidebar-size",`${o}px`),k?.(o))})(),()=>{e=!1}},[g,h,k,M]);const y=r.useCallback(()=>{if(typeof d=="string")return d;const e=d;if(e&&e[t.currentBreakpoint])return e[t.currentBreakpoint];const n=[...Object.keys(X.BREAKPOINTS)].reverse().concat("initial"),l=n.indexOf(t.currentBreakpoint);for(let p=l+1;p<n.length;p++){const F=n[p];if(e&&e[F])return e[F]}return"collapsed"},[d,t.currentBreakpoint]),v=(0,H.useShell)(),B=r.useCallback(()=>{const e=y();return e==="thin"||e==="expanded"?e:"expanded"},[y]);r.useEffect(()=>{if(!v.setSidebarToggleComputer)return;const e=E??"both",o=n=>{if(e==="both")return n==="collapsed"?"thin":n==="thin"?"expanded":"collapsed";const l=B();return n==="collapsed"?l:n===l?"collapsed":l};return v.setSidebarToggleComputer(o),()=>{v.setSidebarToggleComputer?.(n=>n==="collapsed"?"thin":n==="thin"?"expanded":"collapsed")}},[v,E,B]);const j=r.useRef(u),le=r.useRef("expanded");r.useEffect(()=>{t.sidebarMode!=="collapsed"&&(le.current=t.sidebarMode,j.current=t.sidebarMode==="thin"?f:u)},[t.sidebarMode,f,u]);const q=r.useRef(null);r.useEffect(()=>{if(a!==void 0||!t.currentBreakpointReady||q.current===t.currentBreakpoint)return;q.current=t.currentBreakpoint;const e=y();e!==t.sidebarMode&&t.setSidebarMode(e)},[a,t.currentBreakpoint,t.currentBreakpointReady,y,t.sidebarMode,t.setSidebarMode]);const ce=g&&!M&&t.sidebarMode==="expanded"?r.createElement(U.PaneResizeContext.Provider,{value:{containerRef:S,cssVarName:"--sidebar-size",minSize:z,maxSize:N,defaultSize:u,orientation:"vertical",edge:"end",computeNext:(e,o,n)=>{const l=getComputedStyle(S.current).direction==="rtl",p=e-o;return n+(l?-p:p)},onResize:k,onResizeStart:Z,onResizeEnd:e=>{_?.(e),h?.save?.(e)},target:"sidebar",collapsible:Y,snapPoints:ee,snapTolerance:te??8,collapseThreshold:re,requestCollapse:()=>t.setSidebarMode("collapsed"),requestToggle:()=>t.togglePane("sidebar")}},V.length>0?V.map((e,o)=>r.cloneElement(e,{key:e.key??o})):r.createElement(b.PaneHandle,null)):null;if(M){const e=t.sidebarMode!=="collapsed";return r.createElement(w.Root,{open:e,onOpenChange:o=>t.setSidebarMode(o?"expanded":"collapsed")},r.createElement(w.Content,{side:"start",style:{padding:0},width:{initial:`${e?t.sidebarMode==="thin"?f:u:j.current}px`}},r.createElement(J.VisuallyHidden,null,r.createElement(w.Title,null,"Sidebar")),D))}return r.createElement("div",{...oe,ref:se,className:(0,G.default)("rt-ShellSidebar",i),"data-mode":t.sidebarMode,"data-peek":t.peekTarget==="sidebar"||void 0,"data-presentation":x,"data-open":ie&&K||void 0,style:{...ae,"--sidebar-size":`${u}px`,"--sidebar-thin-size":`${f}px`,"--sidebar-min-size":`${z}px`,"--sidebar-max-size":`${N}px`,...t.peekTarget==="sidebar"&&t.sidebarMode==="collapsed"&&!M?(()=>{const e=E??"both",o=t.sidebarMode;let n;if(e==="both")n=o==="collapsed"?"thin":o==="thin"?"expanded":"collapsed";else{const l=B();n=o==="collapsed"?l:"collapsed"}return n==="thin"?{"--peek-sidebar-width":`${f}px`}:{"--peek-sidebar-width":`var(--sidebar-size, ${u}px)`}})():{}}},r.createElement("div",{className:"rt-ShellSidebarContent","data-visible":K||void 0},D),ce)});O.displayName="Shell.Sidebar",O.Handle=b.SidebarHandle;
+"use strict";var pe=Object.create;var R=Object.defineProperty;var be=Object.getOwnPropertyDescriptor;var fe=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,Me=Object.prototype.hasOwnProperty;var he=(o,s)=>{for(var i in s)R(o,i,{get:s[i],enumerable:!0})},G=(o,s,i,d)=>{if(s&&typeof s=="object"||typeof s=="function")for(let c of fe(s))!Me.call(o,c)&&c!==i&&R(o,c,{get:()=>s[c],enumerable:!(d=be(s,c))||d.enumerable});return o};var T=(o,s,i)=>(i=o!=null?pe(me(o)):{},G(s||!o||!o.__esModule?R(i,"default",{value:o,enumerable:!0}):i,o)),Se=o=>G(R({},"__esModule",{value:!0}),o);var ye={};he(ye,{Sidebar:()=>O});module.exports=Se(ye);var r=T(require("react")),J=T(require("classnames")),H=T(require("../sheet.js")),Q=require("../visually-hidden.js"),z=require("../shell.context.js"),U=require("../shell.hooks.js"),X=require("./shell-resize.js"),M=require("./shell-handles.js"),Y=require("../shell.types.js");const O=r.forwardRef(({className:o,presentation:s={initial:"overlay",md:"fixed"},mode:i,defaultMode:d="expanded",onModeChange:c,expandedSize:u=288,minSize:N=200,maxSize:$=400,resizable:P=!1,collapsible:Z=!0,onExpand:A,onCollapse:I,onResize:k,onResizeStart:_,onResizeEnd:ee,snapPoints:te,snapTolerance:re,collapseThreshold:ne,paneId:C,persistence:E,children:ae,style:ie,thinSize:h=64,toggleModes:x,...oe},S)=>{const t=(0,z.useShell)(),B=(0,U.useResponsivePresentation)(s),p=B==="overlay",se=B==="stacked",b=t.sidebarPhase;r.useLayoutEffect(()=>{if(p)return;const e=f.current;if(e){if(b==="hiding")try{const a=e.getBoundingClientRect();e.style.width=`${Math.round(a.width)}px`}catch{}else if(b==="resizing")try{e.style.removeProperty("width")}catch{}else if(b==="idle")try{e.style.removeProperty("width")}catch{}}},[b,p]);const f=r.useRef(null),de=r.useCallback(e=>{f.current=e,typeof S=="function"?S(e):S&&(S.current=e)},[S]),V=r.Children.toArray(ae),D=V.filter(e=>r.isValidElement(e)&&e.type===M.SidebarHandle),L=V.filter(e=>!(r.isValidElement(e)&&e.type===M.SidebarHandle)),le=r.useId();r.useEffect(()=>(t.setHasSidebar(!0),()=>{t.setHasSidebar(!1)}),[t,le]);const K=r.useRef(!1);r.useEffect(()=>{K.current||(K.current=!0,i===void 0&&t.sidebarMode!==d&&t.setSidebarMode(d))},[]),r.useEffect(()=>{i!==void 0&&t.sidebarMode!==i&&t.setSidebarMode(i)},[i,t]),r.useEffect(()=>{i===void 0&&c?.(t.sidebarMode)},[t.sidebarMode,i,c]),r.useEffect(()=>{t.sidebarMode==="expanded"?A?.():I?.()},[t.sidebarMode,A,I]);const j=t.sidebarMode!=="collapsed",y=r.useMemo(()=>{if(!C||E)return E;const e=`kookie-ui:shell:sidebar:${C}`;return{load:()=>{if(typeof window>"u")return;const n=window.localStorage.getItem(e);return n?Number(n):void 0},save:n=>{typeof window>"u"||window.localStorage.setItem(e,String(n))}}},[C,E]);r.useEffect(()=>{let e=!0;return(async()=>{if(!P||!y?.load||p)return;const a=await y.load();e&&typeof a=="number"&&f.current&&(f.current.style.setProperty("--sidebar-size",`${a}px`),k?.(a))})(),()=>{e=!1}},[P,y,k,p]);const g=r.useCallback(()=>{if(typeof d=="string")return d;const e=d;if(e&&e[t.currentBreakpoint])return e[t.currentBreakpoint];const n=[...Object.keys(Y.BREAKPOINTS)].reverse().concat("initial"),l=n.indexOf(t.currentBreakpoint);for(let m=l+1;m<n.length;m++){const W=n[m];if(e&&e[W])return e[W]}return"collapsed"},[d,t.currentBreakpoint]),v=(0,z.useShell)(),w=r.useCallback(()=>{const e=g();return e==="thin"||e==="expanded"?e:"expanded"},[g]);r.useEffect(()=>{if(!v.setSidebarToggleComputer)return;const e=x??"both",a=n=>{if(e==="both")return n==="collapsed"?"thin":n==="thin"?"expanded":"collapsed";const l=w();return n==="collapsed"?l:n===l?"collapsed":l};return v.setSidebarToggleComputer(a),()=>{v.setSidebarToggleComputer?.(n=>n==="collapsed"?"thin":n==="thin"?"expanded":"collapsed")}},[v,x,w]);const q=r.useRef(u),ce=r.useRef("expanded");r.useEffect(()=>{t.sidebarMode!=="collapsed"&&(ce.current=t.sidebarMode,q.current=t.sidebarMode==="thin"?h:u)},[t.sidebarMode,h,u]);const F=r.useRef(null);r.useEffect(()=>{if(i!==void 0||!t.currentBreakpointReady||F.current===t.currentBreakpoint)return;F.current=t.currentBreakpoint;const e=g();e!==t.sidebarMode&&t.setSidebarMode(e)},[i,t.currentBreakpoint,t.currentBreakpointReady,g,t.sidebarMode,t.setSidebarMode]);const ue=P&&!p&&t.sidebarMode==="expanded"?r.createElement(X.PaneResizeContext.Provider,{value:{containerRef:f,cssVarName:"--sidebar-size",minSize:N,maxSize:$,defaultSize:u,orientation:"vertical",edge:"end",computeNext:(e,a,n)=>{const l=getComputedStyle(f.current).direction==="rtl",m=e-a;return n+(l?-m:m)},onResize:k,onResizeStart:_,onResizeEnd:e=>{ee?.(e),y?.save?.(e)},target:"sidebar",collapsible:Z,snapPoints:te,snapTolerance:re??8,collapseThreshold:ne,requestCollapse:()=>t.setSidebarMode("collapsed"),requestToggle:()=>t.togglePane("sidebar")}},D.length>0?D.map((e,a)=>r.cloneElement(e,{key:e.key??a})):r.createElement(M.PaneHandle,null)):null;if(p){const e=t.sidebarMode!=="collapsed";return r.createElement(H.Root,{open:e,onOpenChange:a=>t.setSidebarMode(a?"expanded":"collapsed")},r.createElement(H.Content,{side:"start",style:{padding:0},width:{initial:`${e?t.sidebarMode==="thin"?h:u:q.current}px`}},r.createElement(Q.VisuallyHidden,null,r.createElement(H.Title,null,"Sidebar")),L))}return r.createElement("div",{...oe,ref:de,className:(0,J.default)("rt-ShellSidebar",o),"data-mode":t.sidebarMode,"data-peek":t.peekTarget==="sidebar"||void 0,"data-presentation":B,"data-open":se&&j||void 0,style:{...ie,"--sidebar-size":`${u}px`,"--sidebar-thin-size":`${h}px`,"--sidebar-min-size":`${N}px`,"--sidebar-max-size":`${$}px`,...t.peekTarget==="sidebar"&&t.sidebarMode==="collapsed"&&!p?(()=>{const e=x??"both",a=t.sidebarMode;let n;if(e==="both")n=a==="collapsed"?"thin":a==="thin"?"expanded":"collapsed";else{const l=w();n=a==="collapsed"?l:"collapsed"}return n==="thin"?{"--peek-sidebar-width":`${h}px`}:{"--peek-sidebar-width":`var(--sidebar-size, ${u}px)`}})():{}}},r.createElement("div",{className:"rt-ShellSidebarContent","data-visible":j||void 0,"data-phase":b&&b!=="idle"?b:void 0},L),ue)});O.displayName="Shell.Sidebar",O.Handle=M.SidebarHandle;
 //# sourceMappingURL=shell-sidebar.js.map