@kushagradhawan/kookie-ui 0.1.44 → 0.1.45

package/styles.css

@@ -18899,23 +18899,6 @@
   flex: 1;
   height: 100%;
 }
-.rt-SidebarRoot:where([data-type='floating']){
-  border-radius: var(--sidebar-base-border-radius);
-  margin: var(--space-2);
-  height: calc(100% - var(--space-4));
-  overflow: visible;
-  position: relative;
-  --sidebar-base-border-radius: var(--radius-5);
-}
-.rt-SidebarRoot:where([data-type='floating']) :where(.radix-themes){
-  border-radius: inherit;
-}
-.rt-SidebarRoot:where([data-type='floating']):where(.rt-r-size-1){
-  --sidebar-base-border-radius: var(--radius-5);
-}
-.rt-SidebarRoot:where([data-type='floating']):where(.rt-r-size-2){
-  --sidebar-base-border-radius: var(--radius-6);
-}
 .rt-SidebarContainer{
   --sidebar-base-border-radius: 0;
   display: flex;
@@ -18927,6 +18910,13 @@
           backdrop-filter: var(--backdrop-filter-panel);
   border-radius: inherit;
   flex: 1;
+  box-shadow: inset var(--sidebar-side-border-width) 0 0 0 var(--sidebar-border-color), inset calc(var(--sidebar-side-border-width) * -1) 0 0 0 var(--sidebar-border-color);
+  --sidebar-border-width: 0px;
+  --sidebar-side-border-width: 0px;
+  --sidebar-background-color: transparent;
+  --sidebar-border-color: var(--gray-6);
+  transition: var(--transition-background-blur);
+  background-color: var(--sidebar-background-color);
 }
 .rt-SidebarHeader{
   display: flex;
@@ -19182,108 +19172,49 @@
   border-left: none;
   margin-left: 0;
 }
-.rt-SidebarContainer:where(.rt-variant-outline){
-  background-color: var(--color-panel);
+:where([data-panel-background='translucent']) .rt-SidebarContainer{
+  --sidebar-border-color: var(--gray-a6);
   -webkit-backdrop-filter: var(--backdrop-filter-panel);
           backdrop-filter: var(--backdrop-filter-panel);
 }
-.rt-SidebarContainer:where(.rt-variant-outline):where([data-panel-background='solid']){
-  --color-panel: var(--color-panel-solid);
+.rt-SidebarContainer:where([data-panel-background='solid']){
   -webkit-backdrop-filter: none;
           backdrop-filter: none;
   --backdrop-filter-panel: none;
-  --backdrop-filter-components: none;
-}
-.rt-SidebarContainer:where(.rt-variant-outline):where([data-panel-background='translucent']){
-  --color-panel: var(--color-panel-translucent);
-  -webkit-backdrop-filter: var(--backdrop-filter-panel);
-          backdrop-filter: var(--backdrop-filter-panel);
-  --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
-  --backdrop-filter-components: blur(var(--backdrop-blur-components));
-}
-:where(.rt-SidebarRoot[data-type='floating']) .rt-SidebarContainer:where(.rt-variant-outline){
-  box-shadow: inset 0 0 0 1px var(--gray-a6);
 }
-:where(.rt-SidebarRoot[data-type='sidebar'][data-side='left']) .rt-SidebarContainer:where(.rt-variant-outline){
-  box-shadow: inset -1px 0 0 0 var(--gray-a6);
-}
-:where(.rt-SidebarRoot[data-type='sidebar'][data-side='right']) .rt-SidebarContainer:where(.rt-variant-outline){
-  box-shadow: inset 1px 0 0 0 var(--gray-a6);
+.rt-SidebarContainer:where(.rt-variant-outline){
+  --sidebar-border-width: 1px;
+  --sidebar-side-border-width: 1px;
+  --sidebar-background-color: transparent;
 }
 .rt-SidebarContainer:where(.rt-variant-ghost){
-  background-color: transparent;
-  -webkit-backdrop-filter: none;
-          backdrop-filter: none;
-  border: none;
+  --sidebar-border-width: 0px;
+  --sidebar-side-border-width: 0px;
+  --sidebar-background-color: transparent;
 }
 .rt-SidebarContainer:where(.rt-variant-soft){
-  background-color: var(--gray-2);
+  --sidebar-border-width: 0px;
+  --sidebar-side-border-width: 0px;
+  --sidebar-background-color: var(--gray-2);
 }
 :where([data-panel-background='translucent']) .rt-SidebarContainer:where(.rt-variant-soft){
-  background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
-  -webkit-backdrop-filter: var(--backdrop-filter-panel);
-          backdrop-filter: var(--backdrop-filter-panel);
-}
-.rt-SidebarContainer:where(.rt-variant-soft):where([data-panel-background='solid']){
-  background-color: var(--gray-2);
-  -webkit-backdrop-filter: none;
-          backdrop-filter: none;
-  --backdrop-filter-components: none;
-}
-.rt-SidebarContainer:where(.rt-variant-soft):where([data-panel-background='translucent']){
-  background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
-  -webkit-backdrop-filter: var(--backdrop-filter-panel);
-          backdrop-filter: var(--backdrop-filter-panel);
-  --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
-  --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  --sidebar-background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
 }
 .rt-SidebarContainer:where(.rt-variant-surface){
-  background-color: var(--gray-1);
+  --sidebar-border-width: 1px;
+  --sidebar-side-border-width: 1px;
+  --sidebar-background-color: var(--gray-1);
 }
 :where([data-panel-background='translucent']) .rt-SidebarContainer:where(.rt-variant-surface){
-  background-color: color-mix(in srgb, var(--gray-a1), var(--gray-1) 60%);
-  -webkit-backdrop-filter: var(--backdrop-filter-panel);
-          backdrop-filter: var(--backdrop-filter-panel);
-}
-.rt-SidebarContainer:where(.rt-variant-surface):where([data-panel-background='solid']){
-  background-color: var(--gray-1);
-  -webkit-backdrop-filter: none;
-          backdrop-filter: none;
-  --backdrop-filter-panel: none;
-  --backdrop-filter-components: none;
-}
-.rt-SidebarContainer:where(.rt-variant-surface):where([data-panel-background='translucent']){
-  background-color: color-mix(in srgb, var(--gray-a1), var(--gray-1) 60%);
-  -webkit-backdrop-filter: var(--backdrop-filter-panel);
-          backdrop-filter: var(--backdrop-filter-panel);
-  --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
-  --backdrop-filter-components: blur(var(--backdrop-blur-components));
-}
-:where(.rt-SidebarRoot[data-type='floating']) .rt-SidebarContainer:where(.rt-variant-surface){
-  box-shadow: inset 0 0 0 1px var(--gray-6);
-}
-:where([data-panel-background='translucent']) :is(:where(.rt-SidebarRoot[data-type='floating']) .rt-SidebarContainer:where(.rt-variant-surface)){
-  box-shadow: inset 0 0 0 1px var(--gray-a6);
-}
-:where(.rt-SidebarRoot[data-type='sidebar'][data-side='left']) .rt-SidebarContainer:where(.rt-variant-surface){
-  box-shadow: inset -1px 0 0 0 var(--gray-6);
-}
-:where([data-panel-background='translucent']) :is(:where(.rt-SidebarRoot[data-type='sidebar'][data-side='left']) .rt-SidebarContainer:where(.rt-variant-surface)){
-  box-shadow: inset -1px 0 0 0 var(--gray-a6);
-}
-:where(.rt-SidebarRoot[data-type='sidebar'][data-side='right']) .rt-SidebarContainer:where(.rt-variant-surface){
-  box-shadow: inset 1px 0 0 0 var(--gray-6);
-}
-:where([data-panel-background='translucent']) :is(:where(.rt-SidebarRoot[data-type='sidebar'][data-side='right']) .rt-SidebarContainer:where(.rt-variant-surface)){
-  box-shadow: inset 1px 0 0 0 var(--gray-a6);
+  --sidebar-background-color: color-mix(in srgb, var(--gray-a1), var(--gray-1) 60%);
 }
 .rt-SidebarHeader:where(.rt-SidebarHeader--container){
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--space-2);
-  padding: var(--base-menu-content-padding);
-  min-height: var(--base-menu-item-height);
+  padding: var(--sidebar-base-padding);
+  min-height: var(--sidebar-item-height);
 }
 .rt-SidebarHeader:where(.rt-SidebarHeader--container) :where(.rt-SidebarMenuButton){
   flex: 1;
@@ -19293,8 +19224,8 @@
   flex-direction: row;
   align-items: center;
   gap: var(--space-2);
-  padding: var(--base-menu-content-padding);
-  min-height: var(--base-menu-item-height);
+  padding: var(--sidebar-base-padding);
+  min-height: var(--sidebar-item-height);
 }
 .rt-SidebarFooter:where(.rt-SidebarFooter--container) :where(.rt-SidebarMenuButton){
   flex: 1;
@@ -19418,9 +19349,11 @@
 }
 .rt-SidebarContainer:where(.rt-r-size-1){
   --sidebar-base-padding: var(--space-3);
+  --sidebar-item-height: var(--space-5);
 }
 .rt-SidebarContainer:where(.rt-r-size-2){
   --sidebar-base-padding: var(--space-4);
+  --sidebar-item-height: var(--space-6);
 }
 .rt-SidebarContent:where(.rt-r-size-1){
   --sidebar-content-padding: var(--base-menu-content-padding);
@@ -19477,9 +19410,11 @@
 @media (min-width: 520px){
   .rt-SidebarContainer:where(.xs\:rt-r-size-1){
     --sidebar-base-padding: var(--space-3);
+    --sidebar-item-height: var(--space-5);
   }
   .rt-SidebarContainer:where(.xs\:rt-r-size-2){
     --sidebar-base-padding: var(--space-4);
+    --sidebar-item-height: var(--space-6);
   }
   .rt-SidebarContent:where(.xs\:rt-r-size-1){
     --sidebar-content-padding: var(--base-menu-content-padding);
@@ -19537,9 +19472,11 @@
 @media (min-width: 768px){
   .rt-SidebarContainer:where(.sm\:rt-r-size-1){
     --sidebar-base-padding: var(--space-3);
+    --sidebar-item-height: var(--space-5);
   }
   .rt-SidebarContainer:where(.sm\:rt-r-size-2){
     --sidebar-base-padding: var(--space-4);
+    --sidebar-item-height: var(--space-6);
   }
   .rt-SidebarContent:where(.sm\:rt-r-size-1){
     --sidebar-content-padding: var(--base-menu-content-padding);
@@ -19597,9 +19534,11 @@
 @media (min-width: 1024px){
   .rt-SidebarContainer:where(.md\:rt-r-size-1){
     --sidebar-base-padding: var(--space-3);
+    --sidebar-item-height: var(--space-5);
   }
   .rt-SidebarContainer:where(.md\:rt-r-size-2){
     --sidebar-base-padding: var(--space-4);
+    --sidebar-item-height: var(--space-6);
   }
   .rt-SidebarContent:where(.md\:rt-r-size-1){
     --sidebar-content-padding: var(--base-menu-content-padding);
@@ -19657,9 +19596,11 @@
 @media (min-width: 1280px){
   .rt-SidebarContainer:where(.lg\:rt-r-size-1){
     --sidebar-base-padding: var(--space-3);
+    --sidebar-item-height: var(--space-5);
   }
   .rt-SidebarContainer:where(.lg\:rt-r-size-2){
     --sidebar-base-padding: var(--space-4);
+    --sidebar-item-height: var(--space-6);
   }
   .rt-SidebarContent:where(.lg\:rt-r-size-1){
     --sidebar-content-padding: var(--base-menu-content-padding);
@@ -19717,9 +19658,11 @@
 @media (min-width: 1640px){
   .rt-SidebarContainer:where(.xl\:rt-r-size-1){
     --sidebar-base-padding: var(--space-3);
+    --sidebar-item-height: var(--space-5);
   }
   .rt-SidebarContainer:where(.xl\:rt-r-size-2){
     --sidebar-base-padding: var(--space-4);
+    --sidebar-item-height: var(--space-6);
   }
   .rt-SidebarContent:where(.xl\:rt-r-size-1){
     --sidebar-content-padding: var(--base-menu-content-padding);
@@ -20115,6 +20058,22 @@
   opacity: 0;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
+.rt-ShellSidebar[data-presentation='stacked']{
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  z-index: 31;
+  transform: translateX(-100%);
+  will-change: transform;
+  transition: transform var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
+  box-shadow: 4px 0 12px -6px rgba(0, 0, 0, 0.2);
+}
+.rt-ShellSidebar[data-presentation='stacked'][data-open]{
+  transform: translateX(0);
+}
+.rt-ShellSidebar[data-presentation='stacked'][data-peek]{
+  transform: translateX(0);
+}
 .rt-ShellContent{
   flex: 1;
   min-width: 0;