@womp/kookie-ui 0.7.0 → 0.8.0

package/dist/cjs/components/shell.types.d.ts

@@ -10,24 +10,37 @@ export type PaneSizePersistence = {
     load?: () => number | Promise<number | undefined> | undefined;
     save?: (size: number) => void | Promise<void>;
 };
+/**
+ * Why a pane's open state changed. Since 0.8.0 only a user action is reported:
+ * `toggle` for a Trigger, a handle double-click or a drag past
+ * `collapseThreshold`, and `dismiss` for Escape or a press on the scrim.
+ * `init`, `responsive`, `panel` and `left` are kept in the types for
+ * compatibility and are never sent.
+ */
+export type PaneOpenChangeReason = 'toggle' | 'dismiss' | 'init' | 'responsive';
 export interface PaneBaseProps extends React.ComponentPropsWithoutRef<'div'> {
     presentation?: ResponsivePresentation;
     expandedSize?: number;
     minSize?: number;
     maxSize?: number;
-    height?: string | number;
     resizable?: boolean;
     collapsible?: boolean;
+    /** @deprecated Use `onOpenChange`. Still called when a user's toggle or a controlled prop changes whether the pane is shown; never on mount or when the window crosses a breakpoint. */
     onExpand?: () => void;
+    /** @deprecated Use `onOpenChange`. Still called when a user's toggle or a controlled prop changes whether the pane is shown; never on mount or when the window crosses a breakpoint. */
     onCollapse?: () => void;
     onResize?: (size: number) => void;
-    resizer?: React.ReactNode;
     onResizeStart?: (size: number) => void;
     onResizeEnd?: (size: number) => void;
+    /** @deprecated Removed in 1.0. Snap in your own `onSizeChange` and pass `size`. */
     snapPoints?: number[];
+    /** @deprecated Removed in 1.0, with `snapPoints`. */
     snapTolerance?: number;
+    /** @deprecated Removed in 1.0. Close the pane from your own `onResizeEnd`. */
     collapseThreshold?: number;
+    /** @deprecated Removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`. */
     paneId?: string;
+    /** @deprecated Removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`. */
     persistence?: PaneSizePersistence;
 }
 export declare const _BREAKPOINTS: {
@@ -38,7 +51,11 @@ export declare const _BREAKPOINTS: {
     readonly xl: "(min-width: 1640px)";
 };
 export type Breakpoint = 'initial' | keyof typeof _BREAKPOINTS;
+/** Every breakpoint, smallest first. The stylesheet's @media blocks follow this order. */
+export declare const SHELL_BREAKPOINTS: readonly Breakpoint[];
 export type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';
+/** The panes a Trigger can drive. `left` is the deprecated name for `rail`. */
+export type PaneName = Exclude<PaneTarget, 'left'>;
 /**
  * CSS custom property key type for type-safe style objects.
  * Allows any string prefixed with '--'.

package/dist/cjs/components/shell.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shell.types.d.ts","sourceRoot":"","sources":["../../../src/components/shell.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"shell.types.d.ts","sourceRoot":"","sources":["../../../src/components/shell.types.ts"],"names":[],"mappings":"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"}

package/dist/cjs/components/shell.types.js

@@ -1,2 +1,2 @@
-"use strict";var o=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var d=(i,e)=>{for(var n in e)o(i,n,{get:e[n],enumerable:!0})},l=(i,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of a(e))!p.call(i,t)&&t!==n&&o(i,t,{get:()=>e[t],enumerable:!(r=s(e,t))||r.enumerable});return i};var m=i=>l(o({},"__esModule",{value:!0}),i);var P={};d(P,{_BREAKPOINTS:()=>x});module.exports=m(P);var x={xs:"(min-width: 520px)",sm:"(min-width: 768px)",md:"(min-width: 1024px)",lg:"(min-width: 1280px)",xl:"(min-width: 1640px)"};
+"use strict";var o=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var d=(t,e)=>{for(var n in e)o(t,n,{get:e[n],enumerable:!0})},l=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of a(e))!p.call(t,i)&&i!==n&&o(t,i,{get:()=>e[i],enumerable:!(r=s(e,i))||r.enumerable});return t};var m=t=>l(o({},"__esModule",{value:!0}),t);var b={};d(b,{SHELL_BREAKPOINTS:()=>P,_BREAKPOINTS:()=>x});module.exports=m(b);var x={xs:"(min-width: 520px)",sm:"(min-width: 768px)",md:"(min-width: 1024px)",lg:"(min-width: 1280px)",xl:"(min-width: 1640px)"},P=["initial","xs","sm","md","lg","xl"];
 //# sourceMappingURL=shell.types.js.map

package/dist/cjs/components/shell.types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/shell.types.ts"],
-  "sourcesContent": ["import type * as React from 'react';\n\nexport type PresentationValue = 'fixed' | 'overlay' | 'stacked';\n\nexport type ResponsivePresentation = PresentationValue | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PresentationValue>>;\n\nexport type PaneMode = 'expanded' | 'collapsed';\nexport type SidebarMode = 'collapsed' | 'thin' | 'expanded';\n\nexport type ResponsiveMode = PaneMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PaneMode>>;\n\nexport type ResponsiveSidebarMode = SidebarMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', SidebarMode>>;\n\nexport type Responsive<T> = T | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', T>>;\n\nexport type PaneSizePersistence = {\n  load?: () => number | Promise<number | undefined> | undefined;\n  save?: (size: number) => void | Promise<void>;\n};\n\nexport interface PaneBaseProps extends React.ComponentPropsWithoutRef<'div'> {\n  presentation?: ResponsivePresentation;\n  expandedSize?: number;\n  minSize?: number;\n  maxSize?: number;\n  height?: string | number;\n  resizable?: boolean;\n  collapsible?: boolean;\n  onExpand?: () => void;\n  onCollapse?: () => void;\n  onResize?: (size: number) => void;\n  resizer?: React.ReactNode;\n  onResizeStart?: (size: number) => void;\n  onResizeEnd?: (size: number) => void;\n  snapPoints?: number[];\n  snapTolerance?: number;\n  collapseThreshold?: number;\n  paneId?: string;\n  persistence?: PaneSizePersistence;\n}\n\nexport const _BREAKPOINTS = {\n  xs: '(min-width: 520px)',\n  sm: '(min-width: 768px)',\n  md: '(min-width: 1024px)',\n  lg: '(min-width: 1280px)',\n  xl: '(min-width: 1640px)',\n} as const;\n\nexport type Breakpoint = 'initial' | keyof typeof _BREAKPOINTS;\n\nexport type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';\n\n/**\n * CSS custom property key type for type-safe style objects.\n * Allows any string prefixed with '--'.\n */\nexport type CSSCustomProperty = `--${string}`;\n\n/**\n * Style object that supports CSS custom properties.\n */\nexport type CSSPropertiesWithVars = React.CSSProperties & {\n  [key: CSSCustomProperty]: string | number | undefined;\n};\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAyCO,IAAME,EAAe,CAC1B,GAAI,qBACJ,GAAI,qBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,qBACN",
-  "names": ["shell_types_exports", "__export", "_BREAKPOINTS", "__toCommonJS"]
+  "sourcesContent": ["import type * as React from 'react';\n\nexport type PresentationValue = 'fixed' | 'overlay' | 'stacked';\n\nexport type ResponsivePresentation = PresentationValue | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PresentationValue>>;\n\nexport type PaneMode = 'expanded' | 'collapsed';\nexport type SidebarMode = 'collapsed' | 'thin' | 'expanded';\n\nexport type ResponsiveMode = PaneMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PaneMode>>;\n\nexport type ResponsiveSidebarMode = SidebarMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', SidebarMode>>;\n\nexport type Responsive<T> = T | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', T>>;\n\nexport type PaneSizePersistence = {\n  load?: () => number | Promise<number | undefined> | undefined;\n  save?: (size: number) => void | Promise<void>;\n};\n\n/**\n * Why a pane's open state changed. Since 0.8.0 only a user action is reported:\n * `toggle` for a Trigger, a handle double-click or a drag past\n * `collapseThreshold`, and `dismiss` for Escape or a press on the scrim.\n * `init`, `responsive`, `panel` and `left` are kept in the types for\n * compatibility and are never sent.\n */\nexport type PaneOpenChangeReason = 'toggle' | 'dismiss' | 'init' | 'responsive';\n\nexport interface PaneBaseProps extends React.ComponentPropsWithoutRef<'div'> {\n  presentation?: ResponsivePresentation;\n  expandedSize?: number;\n  minSize?: number;\n  maxSize?: number;\n  resizable?: boolean;\n  collapsible?: boolean;\n  /** @deprecated Use `onOpenChange`. Still called when a user's toggle or a controlled prop changes whether the pane is shown; never on mount or when the window crosses a breakpoint. */\n  onExpand?: () => void;\n  /** @deprecated Use `onOpenChange`. Still called when a user's toggle or a controlled prop changes whether the pane is shown; never on mount or when the window crosses a breakpoint. */\n  onCollapse?: () => void;\n  onResize?: (size: number) => void;\n  onResizeStart?: (size: number) => void;\n  onResizeEnd?: (size: number) => void;\n  /** @deprecated Removed in 1.0. Snap in your own `onSizeChange` and pass `size`. */\n  snapPoints?: number[];\n  /** @deprecated Removed in 1.0, with `snapPoints`. */\n  snapTolerance?: number;\n  /** @deprecated Removed in 1.0. Close the pane from your own `onResizeEnd`. */\n  collapseThreshold?: number;\n  /** @deprecated Removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`. */\n  paneId?: string;\n  /** @deprecated Removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`. */\n  persistence?: PaneSizePersistence;\n}\n\nexport const _BREAKPOINTS = {\n  xs: '(min-width: 520px)',\n  sm: '(min-width: 768px)',\n  md: '(min-width: 1024px)',\n  lg: '(min-width: 1280px)',\n  xl: '(min-width: 1640px)',\n} as const;\n\nexport type Breakpoint = 'initial' | keyof typeof _BREAKPOINTS;\n\n/** Every breakpoint, smallest first. The stylesheet's @media blocks follow this order. */\nexport const SHELL_BREAKPOINTS: readonly Breakpoint[] = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'];\n\nexport type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';\n\n/** The panes a Trigger can drive. `left` is the deprecated name for `rail`. */\nexport type PaneName = Exclude<PaneTarget, 'left'>;\n\n/**\n * CSS custom property key type for type-safe style objects.\n * Allows any string prefixed with '--'.\n */\nexport type CSSCustomProperty = `--${string}`;\n\n/**\n * Style object that supports CSS custom properties.\n */\nexport type CSSPropertiesWithVars = React.CSSProperties & {\n  [key: CSSCustomProperty]: string | number | undefined;\n};\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,EAAA,iBAAAC,IAAA,eAAAC,EAAAJ,GAuDO,IAAMG,EAAe,CAC1B,GAAI,qBACJ,GAAI,qBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,qBACN,EAKaD,EAA2C,CAAC,UAAW,KAAM,KAAM,KAAM,KAAM,IAAI",
+  "names": ["shell_types_exports", "__export", "SHELL_BREAKPOINTS", "_BREAKPOINTS", "__toCommonJS"]
 }