@womp/kookie-ui 0.3.25 → 0.4.0

package/dist/cjs/hooks/use-breakpoint.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-breakpoint.ts", "../../../src/components/shell.types.ts"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport { _BREAKPOINTS, type Breakpoint } from '../components/shell.types.js';\n\n/**\n * Hook to get the current breakpoint based on window width.\n * Returns 'initial' on the server and during initial hydration.\n * Uses shared breakpoint values from shell.types.js.\n */\nexport function useBreakpoint(): { breakpoint: Breakpoint; ready: boolean } {\n  const [currentBp, setCurrentBp] = React.useState<Breakpoint>('initial');\n  const [ready, setReady] = React.useState(false);\n\n  React.useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const queries = Object.entries(_BREAKPOINTS) as [keyof typeof _BREAKPOINTS, string][];\n    const mqls = queries.map(([k, q]) => [k, window.matchMedia(q)] as const);\n\n    // Accept optional event param to satisfy MediaQueryList listener signature\n    const compute = (_e?: MediaQueryListEvent) => {\n      // Highest matched wins\n      const matched = mqls.filter(([, m]) => m.matches).map(([k]) => k);\n      const next = (matched[matched.length - 1] as Breakpoint | undefined) ?? 'initial';\n      setCurrentBp(next);\n      setReady(true);\n    };\n\n    compute();\n    const cleanups: Array<() => void> = [];\n    mqls.forEach(([, m]) => {\n      const mm = m as MediaQueryList & {\n        addEventListener?: (type: 'change', listener: (e: MediaQueryListEvent) => void) => void;\n        removeEventListener?: (type: 'change', listener: (e: MediaQueryListEvent) => void) => void;\n        addListener?: (listener: (e: MediaQueryListEvent) => void) => void;\n        removeListener?: (listener: (e: MediaQueryListEvent) => void) => void;\n      };\n      if (typeof mm.addEventListener === 'function' && typeof mm.removeEventListener === 'function') {\n        mm.addEventListener('change', compute);\n        cleanups.push(() => mm.removeEventListener?.('change', compute));\n      } else if (typeof mm.addListener === 'function' && typeof mm.removeListener === 'function') {\n        mm.addListener(compute);\n        cleanups.push(() => mm.removeListener?.(compute));\n      }\n    });\n\n    return () => {\n      cleanups.forEach((fn) => {\n        try {\n          fn();\n        } catch (e) {\n          // MediaQueryList cleanup can fail in edge cases (e.g., already removed)\n          if (process.env.NODE_ENV !== 'production') {\n            console.warn('[useBreakpoint] MediaQueryList cleanup warning:', e);\n          }\n        }\n      });\n    };\n  }, []);\n\n  return { breakpoint: currentBp, ready };\n}\n", "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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GAEA,IAAAI,EAAuB,oBCuChB,IAAMC,EAAe,CAC1B,GAAI,qBACJ,GAAI,qBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,qBACN,EDrCO,SAASC,GAA4D,CAC1E,GAAM,CAACC,EAAWC,CAAY,EAAU,WAAqB,SAAS,EAChE,CAACC,EAAOC,CAAQ,EAAU,WAAS,EAAK,EAE9C,OAAM,YAAU,IAAM,CACpB,GAAI,OAAO,OAAW,IAAa,OAGnC,IAAMC,EADU,OAAO,QAAQC,CAAY,EACtB,IAAI,CAAC,CAACC,EAAGC,CAAC,IAAM,CAACD,EAAG,OAAO,WAAWC,CAAC,CAAC,CAAU,EAGjEC,EAAWC,GAA6B,CAE5C,IAAMC,EAAUN,EAAK,OAAO,CAAC,CAAC,CAAEO,CAAC,IAAMA,EAAE,OAAO,EAAE,IAAI,CAAC,CAACL,CAAC,IAAMA,CAAC,EAC1DM,EAAQF,EAAQA,EAAQ,OAAS,CAAC,GAAgC,UACxET,EAAaW,CAAI,EACjBT,EAAS,EAAI,CACf,EAEAK,EAAQ,EACR,IAAMK,EAA8B,CAAC,EACrC,OAAAT,EAAK,QAAQ,CAAC,CAAC,CAAEO,CAAC,IAAM,CACtB,IAAMG,EAAKH,EAMP,OAAOG,EAAG,kBAAqB,YAAc,OAAOA,EAAG,qBAAwB,YACjFA,EAAG,iBAAiB,SAAUN,CAAO,EACrCK,EAAS,KAAK,IAAMC,EAAG,sBAAsB,SAAUN,CAAO,CAAC,GACtD,OAAOM,EAAG,aAAgB,YAAc,OAAOA,EAAG,gBAAmB,aAC9EA,EAAG,YAAYN,CAAO,EACtBK,EAAS,KAAK,IAAMC,EAAG,iBAAiBN,CAAO,CAAC,EAEpD,CAAC,EAEM,IAAM,CACXK,EAAS,QAASE,GAAO,CACvB,GAAI,CACFA,EAAG,CACL,MAAY,CAKZ,CACF,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAEE,CAAE,WAAYf,EAAW,MAAAE,CAAM,CACxC",
-  "names": ["use_breakpoint_exports", "__export", "useBreakpoint", "__toCommonJS", "React", "_BREAKPOINTS", "useBreakpoint", "currentBp", "setCurrentBp", "ready", "setReady", "mqls", "_BREAKPOINTS", "k", "q", "compute", "_e", "matched", "m", "next", "cleanups", "mm", "fn"]
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport { _BREAKPOINTS, type Breakpoint } from '../components/shell.types.js';\n\nconst QUERIES = Object.entries(_BREAKPOINTS) as Array<[Breakpoint, string]>;\n\ntype Listener = () => void;\n\n/**\n * One set of `MediaQueryList`s and one set of listeners for the whole\n * application. Every component that asks for the breakpoint used to create and\n * subscribe to its own copy of all five queries.\n */\nlet mediaQueryLists: Array<[Breakpoint, MediaQueryList]> | null = null;\nconst listeners = new Set<Listener>();\nlet cachedBreakpoint: Breakpoint | null = null;\n\nfunction getMediaQueryLists() {\n  mediaQueryLists ??= QUERIES.map(([name, query]) => [name, window.matchMedia(query)] as [Breakpoint, MediaQueryList]);\n  return mediaQueryLists;\n}\n\nfunction computeBreakpoint(): Breakpoint {\n  // The largest matching query wins; `_BREAKPOINTS` is ordered smallest first.\n  let matched: Breakpoint = 'initial';\n  for (const [name, mql] of getMediaQueryLists()) {\n    if (mql.matches) matched = name;\n  }\n  return matched;\n}\n\nfunction handleChange() {\n  const next = computeBreakpoint();\n  if (next === cachedBreakpoint) return;\n  cachedBreakpoint = next;\n  listeners.forEach((listener) => listener());\n}\n\nfunction subscribe(listener: Listener) {\n  if (typeof window === 'undefined') return () => {};\n\n  if (listeners.size === 0) {\n    cachedBreakpoint = computeBreakpoint();\n    for (const [, mql] of getMediaQueryLists()) {\n      // Safari below 14 only has the deprecated listener API.\n      if (typeof mql.addEventListener === 'function') mql.addEventListener('change', handleChange);\n      else mql.addListener?.(handleChange);\n    }\n  }\n\n  listeners.add(listener);\n\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size > 0) return;\n\n    for (const [, mql] of getMediaQueryLists()) {\n      try {\n        if (typeof mql.removeEventListener === 'function') mql.removeEventListener('change', handleChange);\n        else mql.removeListener?.(handleChange);\n      } catch (error) {\n        // Removal can throw in edge cases, e.g. the list was already torn down.\n        if (process.env.NODE_ENV !== 'production') {\n          console.warn('[useBreakpoint] MediaQueryList cleanup warning:', error);\n        }\n      }\n    }\n    cachedBreakpoint = null;\n  };\n}\n\n/**\n * `getSnapshot` must return a referentially stable value between changes, so it\n * reads the cache that `handleChange` maintains rather than recomputing.\n */\nfunction getSnapshot(): Breakpoint {\n  if (typeof window === 'undefined') return 'initial';\n  cachedBreakpoint ??= computeBreakpoint();\n  return cachedBreakpoint;\n}\n\nfunction getServerSnapshot(): Breakpoint {\n  return 'initial';\n}\n\nconst getReadySnapshot = () => true;\nconst getReadyServerSnapshot = () => false;\n\n/**\n * The current breakpoint, and whether it has been resolved against a real\n * viewport yet (`false` on the server and during hydration).\n *\n * Reads through `useSyncExternalStore` rather than settling into state from an\n * effect. On a client render the very first pass already has the real\n * breakpoint, instead of rendering the whole shell at `initial` and correcting\n * it after the browser has painted.\n */\nexport function useBreakpoint(): { breakpoint: Breakpoint; ready: boolean } {\n  const breakpoint = React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n  const ready = React.useSyncExternalStore(subscribe, getReadySnapshot, getReadyServerSnapshot);\n\n  return React.useMemo(() => ({ breakpoint, ready }), [breakpoint, ready]);\n}\n", "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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GAEA,IAAAI,EAAuB,oBCuChB,IAAMC,EAAe,CAC1B,GAAI,qBACJ,GAAI,qBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,qBACN,ED1CA,IAAMC,EAAU,OAAO,QAAQC,CAAY,EASvCC,EAA8D,KAC5DC,EAAY,IAAI,IAClBC,EAAsC,KAE1C,SAASC,GAAqB,CAC5B,OAAAH,MAAoBF,EAAQ,IAAI,CAAC,CAACM,EAAMC,CAAK,IAAM,CAACD,EAAM,OAAO,WAAWC,CAAK,CAAC,CAAiC,GAC5GL,CACT,CAEA,SAASM,GAAgC,CAEvC,IAAIC,EAAsB,UAC1B,OAAW,CAACH,EAAMI,CAAG,IAAKL,EAAmB,EACvCK,EAAI,UAASD,EAAUH,GAE7B,OAAOG,CACT,CAEA,SAASE,GAAe,CACtB,IAAMC,EAAOJ,EAAkB,EAC3BI,IAASR,IACbA,EAAmBQ,EACnBT,EAAU,QAASU,GAAaA,EAAS,CAAC,EAC5C,CAEA,SAASC,EAAUD,EAAoB,CACrC,GAAI,OAAO,OAAW,IAAa,MAAO,IAAM,CAAC,EAEjD,GAAIV,EAAU,OAAS,EAAG,CACxBC,EAAmBI,EAAkB,EACrC,OAAW,CAAC,CAAEE,CAAG,IAAKL,EAAmB,EAEnC,OAAOK,EAAI,kBAAqB,WAAYA,EAAI,iBAAiB,SAAUC,CAAY,EACtFD,EAAI,cAAcC,CAAY,CAEvC,CAEA,OAAAR,EAAU,IAAIU,CAAQ,EAEf,IAAM,CAEX,GADAV,EAAU,OAAOU,CAAQ,EACrB,EAAAV,EAAU,KAAO,GAErB,QAAW,CAAC,CAAEO,CAAG,IAAKL,EAAmB,EACvC,GAAI,CACE,OAAOK,EAAI,qBAAwB,WAAYA,EAAI,oBAAoB,SAAUC,CAAY,EAC5FD,EAAI,iBAAiBC,CAAY,CACxC,MAAgB,CAKhB,CAEFP,EAAmB,KACrB,CACF,CAMA,SAASW,GAA0B,CACjC,OAAI,OAAO,OAAW,IAAoB,WAC1CX,MAAqBI,EAAkB,GAChCJ,EACT,CAEA,SAASY,GAAgC,CACvC,MAAO,SACT,CAEA,IAAMC,EAAmB,IAAM,GACzBC,EAAyB,IAAM,GAW9B,SAASC,GAA4D,CAC1E,IAAMC,EAAmB,uBAAqBN,EAAWC,EAAaC,CAAiB,EACjFK,EAAc,uBAAqBP,EAAWG,EAAkBC,CAAsB,EAE5F,OAAa,UAAQ,KAAO,CAAE,WAAAE,EAAY,MAAAC,CAAM,GAAI,CAACD,EAAYC,CAAK,CAAC,CACzE",
+  "names": ["use_breakpoint_exports", "__export", "useBreakpoint", "__toCommonJS", "React", "_BREAKPOINTS", "QUERIES", "_BREAKPOINTS", "mediaQueryLists", "listeners", "cachedBreakpoint", "getMediaQueryLists", "name", "query", "computeBreakpoint", "matched", "mql", "handleChange", "next", "listener", "subscribe", "getSnapshot", "getServerSnapshot", "getReadySnapshot", "getReadyServerSnapshot", "useBreakpoint", "breakpoint", "ready"]
 }

package/dist/cjs/hooks/use-prop-synced-state.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+/**
+ * State that tracks a prop but can also be set imperatively — the shape `Theme`
+ * needs, where a prop sets the value and `ThemePanel` can change it at runtime.
+ *
+ * Adjusts state during render rather than syncing in a `useEffect`. An effect
+ * would commit one render carrying the *old* value and schedule a second one,
+ * which for a provider means every consumer renders twice and the browser can
+ * paint the stale value in between.
+ *
+ * @see https://react.dev/reference/react/useState#storing-information-from-previous-renders
+ */
+export declare function usePropSyncedState<T>(propValue: T): readonly [T, React.Dispatch<React.SetStateAction<T>>];
+//# sourceMappingURL=use-prop-synced-state.d.ts.map

package/dist/cjs/hooks/use-prop-synced-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-prop-synced-state.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-prop-synced-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,yDAUjD"}

package/dist/cjs/hooks/use-prop-synced-state.js

@@ -0,0 +1,2 @@
+"use strict";var i=Object.create;var o=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(t,e)=>{for(var s in e)o(t,s,{get:e[s],enumerable:!0})},u=(t,e,s,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of P(e))!f.call(t,c)&&c!==s&&o(t,c,{get:()=>e[c],enumerable:!(a=r(e,c))||a.enumerable});return t};var R=(t,e,s)=>(s=t!=null?i(S(t)):{},u(e||!t||!t.__esModule?o(s,"default",{value:t,enumerable:!0}):s,t)),m=t=>u(o({},"__esModule",{value:!0}),t);var b={};v(b,{usePropSyncedState:()=>T});module.exports=m(b);var n=R(require("react"));function T(t){let[e,s]=n.useState(t),[a,c]=n.useState(t);return Object.is(t,a)||(c(t),s(t)),[e,s]}
+//# sourceMappingURL=use-prop-synced-state.js.map

package/dist/cjs/hooks/use-prop-synced-state.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/use-prop-synced-state.ts"],
+  "sourcesContent": ["import * as React from 'react';\n\n/**\n * State that tracks a prop but can also be set imperatively \u2014 the shape `Theme`\n * needs, where a prop sets the value and `ThemePanel` can change it at runtime.\n *\n * Adjusts state during render rather than syncing in a `useEffect`. An effect\n * would commit one render carrying the *old* value and schedule a second one,\n * which for a provider means every consumer renders twice and the browser can\n * paint the stale value in between.\n *\n * @see https://react.dev/reference/react/useState#storing-information-from-previous-renders\n */\nexport function usePropSyncedState<T>(propValue: T) {\n  const [value, setValue] = React.useState(propValue);\n  const [previousPropValue, setPreviousPropValue] = React.useState(propValue);\n\n  if (!Object.is(propValue, previousPropValue)) {\n    setPreviousPropValue(propValue);\n    setValue(propValue);\n  }\n\n  return [value, setValue] as const;\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBAahB,SAASF,EAAsBG,EAAc,CAClD,GAAM,CAACC,EAAOC,CAAQ,EAAU,WAASF,CAAS,EAC5C,CAACG,EAAmBC,CAAoB,EAAU,WAASJ,CAAS,EAE1E,OAAK,OAAO,GAAGA,EAAWG,CAAiB,IACzCC,EAAqBJ,CAAS,EAC9BE,EAASF,CAAS,GAGb,CAACC,EAAOC,CAAQ,CACzB",
+  "names": ["use_prop_synced_state_exports", "__export", "usePropSyncedState", "__toCommonJS", "React", "propValue", "value", "setValue", "previousPropValue", "setPreviousPropValue"]
+}