@kushagradhawan/kookie-ui 0.1.48 → 0.1.49

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.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Slot } from './slot.js';
-import { Accordion } from 'radix-ui';
+import * as Accordion from '@radix-ui/react-accordion';
 
 import { sidebarPropDefs } from './sidebar.props.js';
 import { useThemeContext } from './theme.js';

package/src/styles/tokens/blur.css

@@ -31,5 +31,5 @@
 }
 
 [data-blur='extra'] {
-  --blur-factor: 2.0;
-} 
+  --blur-factor: 2;
+}

package/src/styles/tokens/color.css

@@ -23,7 +23,7 @@
   --color-overlay: var(--black-a8);
   --color-panel-solid: var(--gray-2);
   --color-panel-translucent: color-mix(in srgb, var(--gray-2) var(--panel-opacity-percentage), transparent);
-  --color-surface-solid: var(--gray-2)  ;
+  --color-surface-solid: var(--gray-2);
   --color-surface-translucent: color-mix(in srgb, var(--gray-2) var(--surface-opacity-percentage), transparent);
   --color-dialog-solid: var(--gray-2);
   --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-opacity-percentage), transparent);
@@ -1183,4 +1183,4 @@
     --gray-indicator: var(--slate-indicator);
     --gray-track: var(--slate-track);
   }
-}
+}