@kushagradhawan/kookie-ui 0.1.41 → 0.1.42

package/components.css

@@ -11543,10 +11543,10 @@
 }
 :where(.rt-SheetContent) {
     position: fixed !important;
-    width: var(--width, 90vw) !important;
-    max-width: var(--max-width, 100vw) !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
+    width: var(--width, 90vw);
+    max-width: var(--max-width, 100vw);
+    height: 100vh;
+    max-height: 100vh;
     margin: 0 !important;
     border-radius: 0 !important;
     will-change: transform;
@@ -11574,9 +11574,9 @@
     left: 0 !important;
     right: 0 !important;
     bottom: auto !important;
-    width: auto !important;
-    max-width: none !important;
-    height: var(--height, 75vh) !important;
+    width: auto;
+    max-width: none;
+    height: var(--height, 75vh);
     margin: 0 !important;
     border-start-start-radius: 0;
     border-start-end-radius: 0;
@@ -11586,15 +11586,14 @@
     left: 0 !important;
     right: 0 !important;
     top: auto !important;
-    width: auto !important;
-    max-width: none !important;
-    height: var(--height, 75vh) !important;
+    width: auto;
+    max-width: none;
+    height: var(--height, 75vh);
     margin: 0 !important;
     border-end-start-radius: 0;
     border-end-end-radius: 0;
 }
 .rt-SheetOverlay::before {
-    opacity: 1 !important;
     -webkit-backdrop-filter: var(--backdrop-filter-components) !important;
             backdrop-filter: var(--backdrop-filter-components) !important;
 }
@@ -11617,34 +11616,49 @@
         animation-fill-mode: both;
     }
     .rt-SheetContent:where([data-state='open'][data-side='start']) {
-        animation-name: rt-sheet-open-from-start, rt-fade-in !important;
+        animation-name: rt-sheet-open-from-start !important;
     }
     .rt-SheetContent:where([data-state='closed'][data-side='start']) {
-        animation-name: rt-sheet-close-to-start, rt-fade-out !important;
+        animation-name: rt-sheet-close-to-start !important;
+        animation-delay: var(--motion-duration-small);
     }
     .rt-SheetContent:where([data-state='open'][data-side='end']) {
-        animation-name: rt-sheet-open-from-end, rt-fade-in !important;
+        animation-name: rt-sheet-open-from-end !important;
     }
     .rt-SheetContent:where([data-state='closed'][data-side='end']) {
-        animation-name: rt-sheet-close-to-end, rt-fade-out !important;
+        animation-name: rt-sheet-close-to-end !important;
+        animation-delay: var(--motion-duration-small);
     }
     .rt-SheetContent:where([data-state='open'][data-side='top']) {
-        animation-name: rt-sheet-open-from-top, rt-fade-in !important;
+        animation-name: rt-sheet-open-from-top !important;
     }
     .rt-SheetContent:where([data-state='closed'][data-side='top']) {
-        animation-name: rt-sheet-close-to-top, rt-fade-out !important;
+        animation-name: rt-sheet-close-to-top !important;
+        animation-delay: var(--motion-duration-small);
     }
     .rt-SheetContent:where([data-state='open'][data-side='bottom']) {
-        animation-name: rt-sheet-open-from-bottom, rt-fade-in !important;
+        animation-name: rt-sheet-open-from-bottom !important;
     }
     .rt-SheetContent:where([data-state='closed'][data-side='bottom']) {
-        animation-name: rt-sheet-close-to-bottom, rt-fade-out !important;
+        animation-name: rt-sheet-close-to-bottom !important;
+        animation-delay: var(--motion-duration-small);
+    }
+    .rt-SheetContent:where([data-state='open']) > * {
+        opacity: 0;
+        animation: rt-fade-in var(--motion-duration-small) var(--motion-spring-snappy) both;
+        animation-delay: var(--motion-duration-medium);
+    }
+    .rt-SheetContent:where([data-state='closed']) > * {
+        animation: rt-fade-out var(--motion-duration-small) var(--motion-spring-snappy) both;
     }
 }
 @media (prefers-reduced-motion: reduce) {
     .rt-SheetContent {
         animation: none !important;
     }
+    .rt-SheetContent > * {
+        animation: none !important;
+    }
 }
 .rt-ScrollAreaRoot {
     display: flex;
@@ -13880,9 +13894,8 @@
     order: 999;
 }
 .rt-SidebarRoot {
-    --sidebar-width: 16rem;
     --sidebar-base-border-radius: 0;
-    width: var(--sidebar-width);
+    width: 100%;
     height: 100%;
     flex-shrink: 0;
     display: flex;
@@ -14958,112 +14971,406 @@
     color: var(--gray-11) !important;
 }
 .rt-ShellRoot {
-    inline-size: 100%;
     display: flex;
     flex-direction: column;
-    block-size: 100vh;
-    --shell-sidebar-rail-width: var(--space-9, 64px);
-    --shell-sidebar-panel-width: 288px;
-    --shell-sidebar-combined-width: calc(var(--shell-sidebar-rail-width) + var(--shell-sidebar-panel-width));
-    --shell-overlay-width: auto;
+    width: 100%;
+    overflow: hidden;
+}
+.rt-ShellRoot:not([style*='height']) {
+    height: 100vh;
 }
 @supports (height: 100dvh) {
-    .rt-ShellRoot {
-        block-size: 100dvh;
+    .rt-ShellRoot:not([style*='height']) {
+        height: 100dvh;
     }
 }
 .rt-ShellHeader {
     position: sticky;
     top: 0;
-    inset-inline: 0;
-    z-index: var(--shell-z-header, 10);
+    z-index: 50;
     height: var(--shell-header-height, 64px);
     min-height: var(--shell-header-height, 64px);
+    background-color: var(--color-panel);
     display: flex;
     align-items: center;
-    background-color: var(--color-panel);
+    flex-shrink: 0;
 }
 .rt-ShellBody {
     display: flex;
     flex-direction: row;
-    align-items: stretch;
-    inline-size: 100%;
-    flex: 1 1 auto;
-    block-size: auto;
-    min-block-size: 0;
-    min-inline-size: 0;
+    flex: 1;
+    min-height: 0;
     overflow: hidden;
+    position: relative;
 }
-.rt-ShellSidebar {
+.rt-ShellLeft {
     display: flex;
     flex-direction: row;
     align-items: stretch;
-    block-size: 100%;
-    min-block-size: 0;
+    flex-shrink: 0;
+    height: 100%;
 }
-.rt-ShellSidebarRail {
+.rt-ShellRail {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    height: 100%;
+    background-color: var(--color-surface);
+    overflow: hidden;
+    transition: width var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellRail[data-mode='expanded'] {
+    width: var(--rail-size, 64px);
+}
+.rt-ShellRail[data-mode='collapsed'] {
+    width: 0px;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+}
+.rt-ShellRailContent {
+    display: flex;
+    flex-direction: column;
+    width: var(--rail-size, 64px);
+    height: 100%;
+    padding: var(--space-2);
     gap: var(--space-2);
-    padding-block: var(--space-2);
-    block-size: 100%;
-    min-block-size: 0;
+    opacity: 0;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+}
+.rt-ShellRailContent[data-visible] {
+    opacity: 1;
+}
+.rt-ShellRail[data-mode='collapsed'] .rt-ShellRailContent {
+    opacity: 0;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellPanel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: var(--color-panel);
+    overflow: visible;
+    position: relative;
+    z-index: 1;
+    transition: width var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellPanel[data-visible] {
+    width: var(--panel-size, 288px);
+}
+.rt-ShellPanel:not([data-visible]) {
+    width: 0px;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: var(--peek-rail-width, var(--rail-size, 64px));
+}
+.rt-ShellPanelContent {
+    display: flex;
+    flex-direction: column;
+    width: var(--panel-size, 288px);
+    height: 100%;
     overflow: hidden;
     opacity: 0;
-    transition: inline-size var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
 }
-.rt-ShellSidebarPanel {
-    display: block;
+.rt-ShellPanelContent[data-visible] {
+    opacity: 1;
+}
+.rt-ShellPanel:not([data-visible]) .rt-ShellPanelContent {
     opacity: 0;
-    transition: inline-size var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
-    block-size: 100%;
-    min-block-size: 0;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellSidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: var(--color-panel);
+    overflow: visible;
+    position: relative;
+    z-index: 1;
+    transition: width var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellSidebar[data-mode='expanded'] {
+    width: var(--sidebar-size, 288px);
+}
+.rt-ShellSidebar[data-mode='thin'] {
+    width: var(--sidebar-thin-size, 64px);
+}
+.rt-ShellSidebar[data-mode='thin'] .rt-ShellSidebarContent {
+    width: var(--sidebar-thin-size, 64px);
+}
+.rt-ShellSidebar[data-mode='collapsed'] {
+    width: 0px;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+}
+.rt-ShellSidebarContent {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
+    opacity: 0;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+}
+.rt-ShellSidebar[data-mode='thin'] .rt-ShellResizer {
+    display: none;
 }
-.rt-ShellSidebarSingle {
+.rt-ShellSidebarContent[data-visible] {
+    opacity: 1;
+}
+.rt-ShellSidebar[data-mode='collapsed'] .rt-ShellSidebarContent {
     opacity: 0;
-    transition: inline-size var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
-    block-size: 100%;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellContent {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    overflow: auto;
+    background-color: var(--color-surface);
+}
+.rt-ShellInspector {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: var(--color-panel);
+    overflow: visible;
+    position: relative;
+    z-index: 1;
+    transition: width var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellInspector[data-mode='expanded'] {
+    width: var(--inspector-size, 320px);
+}
+.rt-ShellInspector[data-mode='collapsed'] {
+    width: 0px;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+}
+.rt-ShellInspectorContent {
+    display: flex;
+    flex-direction: column;
+    width: var(--inspector-size, 320px);
+    height: 100%;
     overflow: hidden;
+    opacity: 0;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
 }
-:where(.rt-ShellSidebarRail):not([data-visible]),
-:where(.rt-ShellSidebarPanel):not([data-visible]),
-:where(.rt-ShellSidebarSingle):not([data-visible]) {
+.rt-ShellInspectorContent[data-visible] {
+    opacity: 1;
+}
+.rt-ShellInspector[data-mode='collapsed'] .rt-ShellInspectorContent {
     opacity: 0;
-    transition: opacity var(--motion-duration-small) var(--motion-ease-standard), inline-size var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
-[data-visible] {
+.rt-ShellBottom {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-color: var(--color-panel);
+    overflow: visible;
+    flex-shrink: 0;
+    position: relative;
+    transition: height var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellBottom[data-mode='expanded'] {
+    height: var(--bottom-size, 200px);
+}
+.rt-ShellBottom[data-mode='collapsed'] {
+    height: 0px;
+}
+.rt-ShellBottomContent {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: var(--bottom-size, 200px);
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+}
+.rt-ShellBottomContent[data-visible] {
     opacity: 1;
 }
+.rt-ShellPanel[data-resizing],
+.rt-ShellSidebar[data-resizing],
+.rt-ShellInspector[data-resizing],
+.rt-ShellBottom[data-resizing] {
+    transition: none !important;
+}
+.rt-ShellPanel:not([data-visible]) .rt-ShellResizer,
+.rt-ShellPanel[data-peek] .rt-ShellResizer {
+    display: none;
+}
+.rt-ShellInspector[data-mode='collapsed'] .rt-ShellResizer,
+.rt-ShellInspector[data-peek] .rt-ShellResizer,
+.rt-ShellBottom[data-mode='collapsed'] .rt-ShellResizer,
+.rt-ShellBottom[data-peek] .rt-ShellResizer,
+.rt-ShellSidebar[data-mode='collapsed'] .rt-ShellResizer,
+.rt-ShellSidebar[data-peek] .rt-ShellResizer {
+    display: none;
+}
+.rt-ShellBottom[data-mode='collapsed'] .rt-ShellBottomContent {
+    opacity: 0;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+[data-presentation='overlay'] {
+    contain: style;
+}
+.rt-ShellLeft[data-presentation='stacked'] {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    z-index: 30;
+    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-ShellLeft[data-presentation='stacked'][data-open] {
+    transform: translateX(0);
+}
+.rt-ShellLeft[data-presentation='stacked'][data-peek] {
+    transform: translateX(0);
+}
+.rt-ShellInspector[data-presentation='stacked'] {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    z-index: 32;
+    width: var(--inspector-size, 320px);
+    transform: translateX(100%);
+    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-ShellInspector[data-presentation='stacked'][data-open] {
+    transform: translateX(0);
+}
+.rt-ShellInspector[data-presentation='stacked'][data-peek] {
+    transform: translateX(0);
+}
+.rt-ShellBottom[data-presentation='stacked'] {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    z-index: 31;
+    height: var(--bottom-size, 200px);
+    transform: translateY(100%);
+    transition: transform var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
+    box-shadow: 0 -4px 12px -6px rgba(0, 0, 0, 0.2);
+}
+.rt-ShellBottom[data-presentation='stacked'][data-open] {
+    transform: translateY(0);
+}
+.rt-ShellBottom[data-presentation='stacked'][data-peek] {
+    transform: translateY(0);
+}
 @media (prefers-reduced-motion: reduce) {
-    .rt-ShellSidebarRail,
-  .rt-ShellSidebarPanel,
-  .rt-ShellSidebarSingle {
+    .rt-ShellRail,
+  .rt-ShellPanel,
+  .rt-ShellSidebar,
+  .rt-ShellInspector,
+  .rt-ShellBottom,
+  .rt-ShellRailContent,
+  .rt-ShellPanelContent,
+  .rt-ShellSidebarContent,
+  .rt-ShellInspectorContent,
+  .rt-ShellBottomContent {
         transition: none;
     }
 }
-.rt-ShellContent {
-    flex: 1 1 auto;
+.rt-ShellResizer {
+    position: absolute;
+    z-index: 1;
+    background: transparent;
+    --resizer-hit: var(--space-3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: visible;
+}
+.rt-ShellResizer[data-orientation='vertical'][data-edge='end'] {
+    inset-block: 0;
+    inset-inline-end: 0;
+    inline-size: var(--resizer-hit);
     block-size: 100%;
-    min-block-size: 0;
-    min-inline-size: 0;
-    overflow: auto;
+    cursor: col-resize;
+    transform: translateX(50%);
 }
-:where(.rt-SheetContent) :where(.rt-ShellSidebarPanel) {
-    transition: none !important;
+.rt-ShellResizer[data-orientation='vertical'][data-edge='start'] {
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: var(--resizer-hit);
+    block-size: 100%;
+    cursor: col-resize;
+    transform: translateX(-50%);
 }
-:where(.rt-SheetContent) :where(.rt-SidebarRoot) {
-    height: 100%;
-    width: 100%;
+.rt-ShellResizer[data-orientation='horizontal'][data-edge='start'] {
+    inset-inline: 0;
+    inset-block-start: 0;
+    inline-size: 100%;
+    block-size: var(--resizer-hit);
+    cursor: row-resize;
+    transform: translateY(-50%);
 }
-:where(.rt-SheetContent) :where(.rt-SidebarContainer) {
-    height: 100%;
-    width: 100%;
+@media (pointer: coarse) {
+    .rt-ShellResizer {
+        --resizer-hit: var(--space-6);
+    }
 }
-:where(.rt-SheetContent) :where(.rt-SidebarContent) {
-    height: 100%;
-    width: 100%;
+.rt-ShellRail[data-peek],
+.rt-ShellPanel[data-peek],
+.rt-ShellSidebar[data-peek],
+.rt-ShellInspector[data-peek],
+.rt-ShellBottom[data-peek] {
+    position: absolute;
+    z-index: 40;
+}
+.rt-ShellRail[data-peek],
+.rt-ShellPanel[data-peek],
+.rt-ShellSidebar[data-peek] {
+    box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.15);
+}
+.rt-ShellInspector[data-peek] {
+    box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.15);
+    inset-block: 0;
+    inset-inline-end: 0;
+    width: var(--inspector-size, 320px);
+}
+.rt-ShellBottom[data-peek] {
+    box-shadow: 0 -4px 8px -4px rgba(0, 0, 0, 0.15);
+    inset-inline: 0;
+    inset-block-end: 0;
+    height: var(--bottom-size, 200px);
+}
+.rt-ShellRail[data-peek] .rt-ShellRailContent,
+.rt-ShellPanel[data-peek] .rt-ShellPanelContent,
+.rt-ShellSidebar[data-peek] .rt-ShellSidebarContent,
+.rt-ShellInspector[data-peek] .rt-ShellInspectorContent,
+.rt-ShellBottom[data-peek] .rt-ShellBottomContent {
+    opacity: 1;
+}
+.rt-ShellRail[data-peek] {
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: var(--rail-size, 64px);
+}
+.rt-ShellPanel[data-peek] {
+    inset-block: 0;
+    inset-inline-start: var(--peek-rail-width, var(--rail-size, 64px));
+    width: var(--panel-size, 288px);
+}
+.rt-ShellSidebar[data-peek] {
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: var(--peek-sidebar-width, var(--sidebar-size, 288px));
+}
+.rt-ShellInspector[data-peek][data-mode='collapsed'] {
+    width: var(--inspector-size, 320px);
+}
+.rt-ShellBottom[data-peek][data-mode='collapsed'] {
+    height: var(--bottom-size, 200px);
 }
 .rt-SliderRoot {
     --slider-thumb-width: var(--space-3);