@kushagradhawan/kookie-ui 0.1.11 → 0.1.13

package/styles.css

@@ -7979,6 +7979,35 @@
 .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])):where(:focus-visible) {
   background-color: var(--focus-a2);
 }
+.rt-Card:where(.rt-variant-soft) {
+  --card-border-width: 0px;
+  --card-background-color: var(--gray-a3);
+}
+.rt-Card:where(.rt-variant-soft)::before {
+  background-color: var(--card-background-color);
+}
+.rt-Card:where(.rt-variant-soft)::after {
+  box-shadow: none;
+  border: none;
+  outline: none;
+}
+.rt-Card:where(.rt-variant-soft):where(:focus-visible) {
+  outline: none;
+}
+.rt-Card:where(.rt-variant-soft):where(:focus-visible)::after {
+  outline: none;
+}
+@media (hover: hover) {
+  .rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before {
+    background-color: var(--gray-a4);
+  }
+}
+.rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before {
+  background-color: var(--gray-a4);
+}
+.rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where(:active:not([data-state='open']))::before {
+  background-color: var(--gray-a5);
+}
 @media (pointer: coarse) {
   .rt-Card:where(:any-link, button, label):where(:active:not(:focus-visible, [data-state='open']))::before {
     background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
@@ -14094,6 +14123,141 @@
     --separator-size: 100%;
   }
 }
+.rt-SidebarRoot {
+  --sidebar-width: 16rem;
+  --sidebar-width-icon: 3rem;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 30;
+  width: var(--sidebar-width);
+  transition: transform 0.2s ease, width 0.2s ease;
+}
+.rt-SidebarContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background-color: var(--color-panel-solid);
+  border-right: 1px solid var(--gray-a5);
+}
+.rt-SidebarHeader {
+  display: flex;
+  align-items: center;
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--gray-a5);
+}
+.rt-SidebarContent {
+  flex: 1;
+  padding: var(--space-2);
+  min-height: 0;
+}
+.rt-SidebarFooter {
+  padding: var(--space-3);
+  border-top: 1px solid var(--gray-a5);
+}
+.rt-SidebarInset {
+  flex: 1;
+  margin-left: var(--sidebar-width);
+  transition: margin-left 0.2s ease;
+}
+.rt-SidebarRoot:where(.rt-r-size-1) {
+  --sidebar-width: 14rem;
+  --sidebar-width-icon: 2.5rem;
+}
+.rt-SidebarRoot:where(.rt-r-size-3) {
+  --sidebar-width: 18rem;
+  --sidebar-width-icon: 3.5rem;
+}
+@media (min-width: 520px) {
+  .rt-SidebarRoot:where(.xs\:rt-r-size-1) {
+    --sidebar-width: 14rem;
+    --sidebar-width-icon: 2.5rem;
+  }
+  .rt-SidebarRoot:where(.xs\:rt-r-size-3) {
+    --sidebar-width: 18rem;
+    --sidebar-width-icon: 3.5rem;
+  }
+}
+@media (min-width: 768px) {
+  .rt-SidebarRoot:where(.sm\:rt-r-size-1) {
+    --sidebar-width: 14rem;
+    --sidebar-width-icon: 2.5rem;
+  }
+  .rt-SidebarRoot:where(.sm\:rt-r-size-3) {
+    --sidebar-width: 18rem;
+    --sidebar-width-icon: 3.5rem;
+  }
+}
+@media (min-width: 1024px) {
+  .rt-SidebarRoot:where(.md\:rt-r-size-1) {
+    --sidebar-width: 14rem;
+    --sidebar-width-icon: 2.5rem;
+  }
+  .rt-SidebarRoot:where(.md\:rt-r-size-3) {
+    --sidebar-width: 18rem;
+    --sidebar-width-icon: 3.5rem;
+  }
+}
+@media (min-width: 1280px) {
+  .rt-SidebarRoot:where(.lg\:rt-r-size-1) {
+    --sidebar-width: 14rem;
+    --sidebar-width-icon: 2.5rem;
+  }
+  .rt-SidebarRoot:where(.lg\:rt-r-size-3) {
+    --sidebar-width: 18rem;
+    --sidebar-width-icon: 3.5rem;
+  }
+}
+@media (min-width: 1640px) {
+  .rt-SidebarRoot:where(.xl\:rt-r-size-1) {
+    --sidebar-width: 14rem;
+    --sidebar-width-icon: 2.5rem;
+  }
+  .rt-SidebarRoot:where(.xl\:rt-r-size-3) {
+    --sidebar-width: 18rem;
+    --sidebar-width-icon: 3.5rem;
+  }
+}
+.rt-SidebarHeader:where(.rt-r-size-1) {
+  padding: var(--space-2);
+}
+.rt-SidebarHeader:where(.rt-r-size-3) {
+  padding: var(--space-4);
+}
+.rt-SidebarFooter:where(.rt-r-size-1) {
+  padding: var(--space-2);
+}
+.rt-SidebarFooter:where(.rt-r-size-3) {
+  padding: var(--space-4);
+}
+.rt-SidebarContent:where(.rt-r-size-1) {
+  padding: var(--space-1);
+}
+.rt-SidebarContent:where(.rt-r-size-3) {
+  padding: var(--space-3);
+}
+.rt-SidebarContainer:where(.rt-variant-classic) {
+  background-color: var(--color-surface);
+  border: 1px solid var(--gray-a5);
+}
+.rt-SidebarContainer:where(.rt-variant-ghost) {
+  background-color: transparent;
+  border: none;
+}
+.rt-SidebarContent :where(.rt-BaseMenuItem) {
+  border-radius: var(--radius-2);
+  margin-bottom: var(--space-1);
+}
+@media (max-width: 768px) {
+  .rt-SidebarRoot {
+    display: none;
+  }
+  .rt-SidebarInset {
+    margin-left: 0;
+  }
+}
 .rt-SliderRoot {
   --slider-thumb-size: calc(var(--slider-track-size) + var(--space-1));
   position: relative;