@kushagradhawan/kookie-ui 0.1.48 → 0.1.50

package/src/components/shell.types.ts

@@ -0,0 +1,27 @@
+export type PresentationValue = 'fixed' | 'overlay' | 'stacked';
+
+export type ResponsivePresentation = PresentationValue | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PresentationValue>>;
+
+export type PaneMode = 'expanded' | 'collapsed';
+export type SidebarMode = 'collapsed' | 'thin' | 'expanded';
+
+export type ResponsiveMode = PaneMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PaneMode>>;
+
+export type ResponsiveSidebarMode = SidebarMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', SidebarMode>>;
+
+export type PaneSizePersistence = {
+  load?: () => number | Promise<number | undefined> | undefined;
+  save?: (size: number) => void | Promise<void>;
+};
+
+export const BREAKPOINTS = {
+  xs: '(min-width: 520px)',
+  sm: '(min-width: 768px)',
+  md: '(min-width: 1024px)',
+  lg: '(min-width: 1280px)',
+  xl: '(min-width: 1640px)',
+} as const;
+
+export type Breakpoint = 'initial' | keyof typeof BREAKPOINTS;
+
+export type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';

package/src/components/sidebar.css

@@ -19,55 +19,252 @@
 */
 
 /* Rail Layout Styling */
-: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) {
-  justify-content: center;
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuViewport) {
+  padding: var(--space-2) !important;
+}
+
+/* Enforce vertical stack and compact typography for all buttons in thin mode */
+: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;
+}
+
+/* Consolidated thin mode size blocks */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1) {
+  /* Horizontal padding tokens to free space for text */
+  --base-menu-item-padding-left: var(--space-1) !important;
+  --base-menu-item-padding-right: var(--space-1) !important;
+  /* Unify vertical padding via tokens (used by BaseMenuItem) */
+  --base-menu-item-padding-y: var(--space-2) !important;
+
+  /* Override BaseMenu left padding resets */
+  &:where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+  }
+  &:where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+  }
+
+  /* Button and subtrigger layout */
+  :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;
+  }
+
+  /* Icon sizing */
+  /* stylelint-disable-next-line selector-max-type */
+  :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(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+  }
+  &:where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+  }
+
+  :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;
+  }
+
+  /* stylelint-disable-next-line selector-max-type */
+  :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) :where(svg) {
+    width: var(--content-icon-size-4);
+    height: var(--content-icon-size-4);
+  }
+}
+
+: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(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+  }
+  &:where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+  }
+
+  :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;
+  }
+
+  /* stylelint-disable-next-line selector-max-type */
+  :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) :where(svg) {
+    width: var(--content-icon-size-5);
+    height: var(--content-icon-size-5);
+  }
+}
+
+/* Ellipsis on root child content when using asChild (e.g., Next.js Link) */
+: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;
+}
+
+/* Ensure submenu trigger asChild containers also stack vertically */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubTrigger > *) {
+  display: flex;
   flex-direction: column;
-  gap: var(--space-1);
-  padding: var(--space-2) var(--space-1);
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
+
+/* stylelint-disable-next-line selector-max-type */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton > * > svg) {
+  flex-shrink: 0;
 }
 
-: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;
+/* Ensure submenu anchors also truncate */
+: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;
+}
+
+/* Ensure icons remain visible at their token sizes in thin mode */
+/* stylelint-disable-next-line selector-max-type */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton) :where(svg) {
+  /* svg size is already controlled by tokens; this ensures layout stability */
+  display: block;
 }
 
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarGroupLabel),
-.rt-ShellSidebarRail :where(.rt-SidebarGroupLabel),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarGroupLabel) {
+/* Truncate labels inside an explicit label span */
+: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);
-  color: var(--gray-a9);
-  font-weight: var(--font-weight-medium);
+}
+
+: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;
 }
 
 /* Hide submenu chevrons and flatten sublists in rail */
-: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-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;
+}
+
+/* Also remove any decorative rule on the submenu list in thin mode */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubList::before),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuSubList::before) {
+  content: none !important;
+  display: none !important;
+}
+
+/* Ensure the Accordion content wrapper doesn't add indentation */
+: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;
+  /* background-color: var(--accent-3); */
 }
 
-: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;
+/* Remove vertical connector in thin mode */
+/* (intentionally no ::before) */
+
+/* Ensure submenu buttons also truncate */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubContent .rt-SidebarMenuButton) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
 
 /* Panel Layout Styling (default) - inherits existing styles */
@@ -347,7 +544,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);
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
@@ -373,7 +570,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);
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
@@ -482,6 +679,7 @@
   & :where(.rt-SidebarMenuButton[data-active]) {
     background-color: var(--accent-9);
     color: var(--accent-contrast);
+    font-weight: var(--font-weight-medium);
 
     /* Force all text elements to inherit active color */
     & :where(.rt-Text) {
@@ -547,6 +745,7 @@
     & :where(.rt-SidebarMenuButton[data-active]) {
       background-color: var(--accent-12);
       color: var(--accent-1);
+      font-weight: var(--font-weight-medium);
 
       & :where(.rt-Text) {
         color: inherit !important;
@@ -667,6 +866,7 @@
     /* Base state: solid accent for solid panels */
     background-color: var(--accent-3);
     color: var(--accent-12);
+    font-weight: var(--font-weight-medium);
 
     /* Theme-level translucent override */
     :where([data-panel-background='translucent']) & {