@kushagradhawan/kookie-ui 0.1.48 → 0.1.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.css +858 -30
- package/dist/cjs/components/_internal/shell-bottom.d.ts +31 -0
- package/dist/cjs/components/_internal/shell-bottom.d.ts.map +1 -0
- package/dist/cjs/components/_internal/shell-bottom.js +2 -0
- package/dist/cjs/components/_internal/shell-bottom.js.map +7 -0
- package/dist/cjs/components/_internal/shell-handles.d.ts +7 -0
- package/dist/cjs/components/_internal/shell-handles.d.ts.map +1 -0
- package/dist/cjs/components/_internal/shell-handles.js +2 -0
- package/dist/cjs/components/_internal/shell-handles.js.map +7 -0
- package/dist/cjs/components/_internal/shell-inspector.d.ts +31 -0
- package/dist/cjs/components/_internal/shell-inspector.d.ts.map +1 -0
- package/dist/cjs/components/_internal/shell-inspector.js +2 -0
- package/dist/cjs/components/_internal/shell-inspector.js.map +7 -0
- package/dist/cjs/components/_internal/shell-resize.d.ts +24 -0
- package/dist/cjs/components/_internal/shell-resize.d.ts.map +1 -0
- package/dist/cjs/components/_internal/shell-resize.js +2 -0
- package/dist/cjs/components/_internal/shell-resize.js.map +7 -0
- package/dist/cjs/components/_internal/shell-sidebar.d.ts +37 -0
- package/dist/cjs/components/_internal/shell-sidebar.d.ts.map +1 -0
- package/dist/cjs/components/_internal/shell-sidebar.js +2 -0
- package/dist/cjs/components/_internal/shell-sidebar.js.map +7 -0
- package/dist/cjs/components/schemas/index.d.ts +2 -0
- package/dist/cjs/components/schemas/index.d.ts.map +1 -1
- package/dist/cjs/components/schemas/index.js +1 -1
- package/dist/cjs/components/schemas/index.js.map +3 -3
- package/dist/cjs/components/schemas/shell.schema.d.ts +1025 -0
- package/dist/cjs/components/schemas/shell.schema.d.ts.map +1 -0
- package/dist/cjs/components/schemas/shell.schema.js +2 -0
- package/dist/cjs/components/schemas/shell.schema.js.map +7 -0
- package/dist/cjs/components/shell.context.d.ts +37 -0
- package/dist/cjs/components/shell.context.d.ts.map +1 -0
- package/dist/cjs/components/shell.context.js +2 -0
- package/dist/cjs/components/shell.context.js.map +7 -0
- package/dist/cjs/components/shell.d.ts +6 -68
- package/dist/cjs/components/shell.d.ts.map +1 -1
- package/dist/cjs/components/shell.hooks.d.ts +3 -0
- package/dist/cjs/components/shell.hooks.d.ts.map +1 -0
- package/dist/cjs/components/shell.hooks.js +2 -0
- package/dist/cjs/components/shell.hooks.js.map +7 -0
- package/dist/cjs/components/shell.js +1 -1
- package/dist/cjs/components/shell.js.map +3 -3
- package/dist/cjs/components/shell.types.d.ts +20 -0
- package/dist/cjs/components/shell.types.d.ts.map +1 -0
- package/dist/cjs/components/shell.types.js +2 -0
- package/dist/cjs/components/shell.types.js.map +7 -0
- package/dist/cjs/components/sidebar.d.ts +1 -1
- package/dist/cjs/components/sidebar.d.ts.map +1 -1
- package/dist/cjs/components/sidebar.js +1 -1
- package/dist/cjs/components/sidebar.js.map +3 -3
- package/dist/esm/components/_internal/shell-bottom.d.ts +31 -0
- package/dist/esm/components/_internal/shell-bottom.d.ts.map +1 -0
- package/dist/esm/components/_internal/shell-bottom.js +2 -0
- package/dist/esm/components/_internal/shell-bottom.js.map +7 -0
- package/dist/esm/components/_internal/shell-handles.d.ts +7 -0
- package/dist/esm/components/_internal/shell-handles.d.ts.map +1 -0
- package/dist/esm/components/_internal/shell-handles.js +2 -0
- package/dist/esm/components/_internal/shell-handles.js.map +7 -0
- package/dist/esm/components/_internal/shell-inspector.d.ts +31 -0
- package/dist/esm/components/_internal/shell-inspector.d.ts.map +1 -0
- package/dist/esm/components/_internal/shell-inspector.js +2 -0
- package/dist/esm/components/_internal/shell-inspector.js.map +7 -0
- package/dist/esm/components/_internal/shell-resize.d.ts +24 -0
- package/dist/esm/components/_internal/shell-resize.d.ts.map +1 -0
- package/dist/esm/components/_internal/shell-resize.js +2 -0
- package/dist/esm/components/_internal/shell-resize.js.map +7 -0
- package/dist/esm/components/_internal/shell-sidebar.d.ts +37 -0
- package/dist/esm/components/_internal/shell-sidebar.d.ts.map +1 -0
- package/dist/esm/components/_internal/shell-sidebar.js +2 -0
- package/dist/esm/components/_internal/shell-sidebar.js.map +7 -0
- package/dist/esm/components/schemas/index.d.ts +2 -0
- package/dist/esm/components/schemas/index.d.ts.map +1 -1
- package/dist/esm/components/schemas/index.js +1 -1
- package/dist/esm/components/schemas/index.js.map +3 -3
- package/dist/esm/components/schemas/shell.schema.d.ts +1025 -0
- package/dist/esm/components/schemas/shell.schema.d.ts.map +1 -0
- package/dist/esm/components/schemas/shell.schema.js +2 -0
- package/dist/esm/components/schemas/shell.schema.js.map +7 -0
- package/dist/esm/components/shell.context.d.ts +37 -0
- package/dist/esm/components/shell.context.d.ts.map +1 -0
- package/dist/esm/components/shell.context.js +2 -0
- package/dist/esm/components/shell.context.js.map +7 -0
- package/dist/esm/components/shell.d.ts +6 -68
- package/dist/esm/components/shell.d.ts.map +1 -1
- package/dist/esm/components/shell.hooks.d.ts +3 -0
- package/dist/esm/components/shell.hooks.d.ts.map +1 -0
- package/dist/esm/components/shell.hooks.js +2 -0
- package/dist/esm/components/shell.hooks.js.map +7 -0
- package/dist/esm/components/shell.js +1 -1
- package/dist/esm/components/shell.js.map +3 -3
- package/dist/esm/components/shell.types.d.ts +20 -0
- package/dist/esm/components/shell.types.d.ts.map +1 -0
- package/dist/esm/components/shell.types.js +2 -0
- package/dist/esm/components/shell.types.js.map +7 -0
- package/dist/esm/components/sidebar.d.ts +1 -1
- package/dist/esm/components/sidebar.d.ts.map +1 -1
- package/dist/esm/components/sidebar.js +1 -1
- package/dist/esm/components/sidebar.js.map +2 -2
- package/layout/utilities.css +168 -84
- package/layout.css +168 -84
- package/package.json +2 -1
- package/schemas/base-button.json +1 -1
- package/schemas/button.json +1 -1
- package/schemas/icon-button.json +1 -1
- package/schemas/index.json +6 -6
- package/schemas/shell-bottom.json +168 -0
- package/schemas/shell-content.json +34 -0
- package/schemas/shell-handle.json +34 -0
- package/schemas/shell-header.json +42 -0
- package/schemas/shell-inspector.json +171 -0
- package/schemas/shell-panel.json +167 -0
- package/schemas/shell-rail.json +132 -0
- package/schemas/shell-root.json +54 -0
- package/schemas/shell-sidebar.json +182 -0
- package/schemas/shell-trigger.json +76 -0
- package/schemas/toggle-button.json +1 -1
- package/schemas/toggle-icon-button.json +1 -1
- package/src/components/_internal/shell-bottom.tsx +251 -0
- package/src/components/_internal/shell-handles.tsx +193 -0
- package/src/components/_internal/shell-inspector.tsx +242 -0
- package/src/components/_internal/shell-resize.tsx +30 -0
- package/src/components/_internal/shell-sidebar.tsx +347 -0
- package/src/components/schemas/index.ts +46 -0
- package/src/components/schemas/shell.schema.ts +403 -0
- package/src/components/shell.context.tsx +56 -0
- package/src/components/shell.css +5 -17
- package/src/components/shell.hooks.ts +31 -0
- package/src/components/shell.tsx +368 -1684
- package/src/components/shell.types.ts +27 -0
- package/src/components/sidebar.tsx +1 -1
- package/src/styles/tokens/blur.css +2 -2
- package/src/styles/tokens/color.css +2 -2
- package/styles.css +1031 -116
- package/tokens/base.css +5 -2
- package/tokens.css +5 -2
- package/utilities.css +168 -84
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { BottomHandle } from './shell-handles.js';
|
|
3
|
+
import type { PaneMode, PaneSizePersistence, ResponsivePresentation } from '../shell.types.js';
|
|
4
|
+
interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
5
|
+
presentation?: ResponsivePresentation;
|
|
6
|
+
mode?: PaneMode;
|
|
7
|
+
defaultMode?: any;
|
|
8
|
+
onModeChange?: (mode: PaneMode) => void;
|
|
9
|
+
expandedSize?: number;
|
|
10
|
+
minSize?: number;
|
|
11
|
+
maxSize?: number;
|
|
12
|
+
resizable?: boolean;
|
|
13
|
+
collapsible?: boolean;
|
|
14
|
+
onExpand?: () => void;
|
|
15
|
+
onCollapse?: () => void;
|
|
16
|
+
onResize?: (size: number) => void;
|
|
17
|
+
resizer?: React.ReactNode;
|
|
18
|
+
onResizeStart?: (size: number) => void;
|
|
19
|
+
onResizeEnd?: (size: number) => void;
|
|
20
|
+
snapPoints?: number[];
|
|
21
|
+
snapTolerance?: number;
|
|
22
|
+
collapseThreshold?: number;
|
|
23
|
+
paneId?: string;
|
|
24
|
+
persistence?: PaneSizePersistence;
|
|
25
|
+
}
|
|
26
|
+
type BottomComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & {
|
|
27
|
+
Handle: typeof BottomHandle;
|
|
28
|
+
};
|
|
29
|
+
export declare const Bottom: BottomComponent;
|
|
30
|
+
export {};
|
|
31
|
+
//# sourceMappingURL=shell-bottom.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shell-bottom.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-bottom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,YAAY,EAAc,MAAM,oBAAoB,CAAC;AAE9D,OAAO,KAAK,EAAc,QAAQ,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE3G,UAAU,SAAU,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC/D,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,KAAK,eAAe,GAAG,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,GAAG;IAAE,MAAM,EAAE,OAAO,YAAY,CAAA;CAAE,CAAC;AAE1I,eAAO,MAAM,MAAM,EAoNd,eAAe,CAAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var ae=Object.create;var b=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var le=Object.getPrototypeOf,de=Object.prototype.hasOwnProperty;var ue=(r,a)=>{for(var n in a)b(r,n,{get:a[n],enumerable:!0})},V=(r,a,n,d)=>{if(a&&typeof a=="object"||typeof a=="function")for(let l of ie(a))!de.call(r,l)&&l!==n&&b(r,l,{get:()=>a[l],enumerable:!(d=se(a,l))||d.enumerable});return r};var g=(r,a,n)=>(n=r!=null?ae(le(r)):{},V(a||!r||!r.__esModule?b(n,"default",{value:r,enumerable:!0}):n,r)),ce=r=>V(b({},"__esModule",{value:!0}),r);var me={};ue(me,{Bottom:()=>C});module.exports=ce(me);var o=g(require("react")),K=g(require("classnames")),S=g(require("../sheet.js")),j=require("../visually-hidden.js"),q=require("../shell.context.js"),F=require("../shell.hooks.js"),W=require("./shell-resize.js"),u=require("./shell-handles.js"),G=require("../shell.types.js");const C=o.forwardRef(({className:r,presentation:a="fixed",mode:n,defaultMode:d="collapsed",onModeChange:l,expandedSize:B=200,minSize:z=100,maxSize:T=400,resizable:y=!1,collapsible:J=!0,onExpand:H,onCollapse:w,onResize:P,onResizeStart:Q,onResizeEnd:U,snapPoints:X,snapTolerance:Y,collapseThreshold:Z,paneId:R,persistence:v,children:_,style:ee,...te},c)=>{const t=(0,q.useShell)(),k=(0,F.useResponsivePresentation)(a),m=k==="overlay",oe=k==="stacked",p=o.useRef(null),ne=o.useCallback(e=>{p.current=e,typeof c=="function"?c(e):c&&(c.current=e)},[c]),N=o.Children.toArray(_),A=N.filter(e=>o.isValidElement(e)&&e.type===u.BottomHandle),O=N.filter(e=>!(o.isValidElement(e)&&e.type===u.BottomHandle)),M=o.useCallback(()=>{if(typeof d=="string")return d;const e=d;if(e&&e[t.currentBreakpoint])return e[t.currentBreakpoint];const i=[...Object.keys(G.BREAKPOINTS)].reverse().concat("initial"),E=i.indexOf(t.currentBreakpoint);for(let x=E+1;x<i.length;x++){const L=i[x];if(e&&e[L])return e[L]}return"collapsed"},[d,t.currentBreakpoint]),$=o.useRef(!1);o.useEffect(()=>{if(!$.current&&($.current=!0,n===void 0)){const e=M();t.bottomMode!==e&&t.setBottomMode(e)}},[]);const D=o.useRef(null),I=o.useRef(null);o.useEffect(()=>{if(n!==void 0||!t.currentBreakpointReady||D.current===t.currentBreakpoint)return;D.current=t.currentBreakpoint;const e=M();I.current!==e&&(I.current=e,e!==t.bottomMode&&t.setBottomMode(e))},[n,t.currentBreakpoint,t.currentBreakpointReady,M,t.bottomMode,t.setBottomMode]),o.useEffect(()=>{n!==void 0&&t.bottomMode!==n&&t.setBottomMode(n)},[n,t]),o.useEffect(()=>{n===void 0&&l?.(t.bottomMode)},[t.bottomMode,n,l]),o.useEffect(()=>{t.bottomMode==="expanded"?H?.():w?.()},[t.bottomMode,H,w]);const h=t.bottomMode==="expanded",f=o.useMemo(()=>{if(!R||v)return v;const e=`kookie-ui:shell:bottom:${R}`;return{load:()=>{if(typeof window>"u")return;const i=window.localStorage.getItem(e);return i?Number(i):void 0},save:i=>{typeof window>"u"||window.localStorage.setItem(e,String(i))}}},[R,v]);o.useEffect(()=>{let e=!0;return(async()=>{if(!y||!f?.load||m)return;const s=await f.load();e&&typeof s=="number"&&p.current&&(p.current.style.setProperty("--bottom-size",`${s}px`),P?.(s))})(),()=>{e=!1}},[y,f,P,m]);const re=y&&!m&&h?o.createElement(W.PaneResizeContext.Provider,{value:{containerRef:p,cssVarName:"--bottom-size",minSize:z,maxSize:T,defaultSize:B,orientation:"horizontal",edge:"start",computeNext:(e,s,i)=>{const E=e-s;return i-E},onResize:P,onResizeStart:Q,onResizeEnd:e=>{U?.(e),f?.save?.(e)},target:"bottom",collapsible:J,snapPoints:X,snapTolerance:Y??8,collapseThreshold:Z,requestCollapse:()=>t.setBottomMode("collapsed"),requestToggle:()=>t.togglePane("bottom")}},A.length>0?A.map((e,s)=>o.cloneElement(e,{key:e.key??s})):o.createElement(u.PaneHandle,null)):null;if(m){const e=t.bottomMode==="expanded";return o.createElement(S.Root,{open:e,onOpenChange:s=>t.setBottomMode(s?"expanded":"collapsed")},o.createElement(S.Content,{side:"bottom",style:{padding:0},height:{initial:`${B}px`}},o.createElement(j.VisuallyHidden,null,o.createElement(S.Title,null,"Bottom panel")),O))}return o.createElement("div",{...te,ref:ne,className:(0,K.default)("rt-ShellBottom",r),"data-mode":t.bottomMode,"data-peek":t.peekTarget==="bottom"||void 0,"data-presentation":k,"data-open":oe&&h||void 0,style:{...ee,"--bottom-size":`${B}px`,"--bottom-min-size":`${z}px`,"--bottom-max-size":`${T}px`}},o.createElement("div",{className:"rt-ShellBottomContent","data-visible":h||void 0},O),re)});C.displayName="Shell.Bottom",C.Handle=u.BottomHandle;
|
|
2
|
+
//# sourceMappingURL=shell-bottom.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/_internal/shell-bottom.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport * as Sheet from '../sheet.js';\nimport { VisuallyHidden } from '../visually-hidden.js';\nimport { useShell } from '../shell.context.js';\nimport { useResponsivePresentation } from '../shell.hooks.js';\nimport { PaneResizeContext } from './shell-resize.js';\nimport { BottomHandle, PaneHandle } from './shell-handles.js';\nimport { BREAKPOINTS } from '../shell.types.js';\nimport type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation } from '../shell.types.js';\n\ninterface PaneProps extends React.ComponentPropsWithoutRef<'div'> {\n presentation?: ResponsivePresentation;\n mode?: PaneMode;\n defaultMode?: any;\n onModeChange?: (mode: PaneMode) => void;\n expandedSize?: number;\n minSize?: number;\n maxSize?: 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\ntype BottomComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof BottomHandle };\n\nexport const Bottom = React.forwardRef<HTMLDivElement, PaneProps>(\n (\n {\n className,\n presentation = 'fixed',\n mode,\n defaultMode = 'collapsed',\n onModeChange,\n expandedSize = 200,\n minSize = 100,\n maxSize = 400,\n resizable = false,\n collapsible = true,\n onExpand,\n onCollapse,\n onResize,\n onResizeStart,\n onResizeEnd,\n snapPoints,\n snapTolerance,\n collapseThreshold,\n paneId,\n persistence,\n children,\n style,\n ...props\n },\n ref,\n ) => {\n const shell = useShell();\n const resolvedPresentation = useResponsivePresentation(presentation);\n const isOverlay = resolvedPresentation === 'overlay';\n const isStacked = resolvedPresentation === 'stacked';\n const localRef = React.useRef<HTMLDivElement | null>(null);\n const setRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n localRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n },\n [ref],\n );\n const childArray = React.Children.toArray(children) as React.ReactElement[];\n const handleChildren = childArray.filter((el: React.ReactElement) => React.isValidElement(el) && el.type === BottomHandle);\n const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === BottomHandle));\n\n const resolveResponsiveMode = React.useCallback((): PaneMode => {\n if (typeof defaultMode === 'string') return defaultMode as PaneMode;\n const dm = defaultMode as Partial<Record<Breakpoint, PaneMode>> | undefined;\n if (dm && dm[shell.currentBreakpoint as Breakpoint]) {\n return dm[shell.currentBreakpoint as Breakpoint] as PaneMode;\n }\n const bpKeys = Object.keys(BREAKPOINTS) as Array<keyof typeof BREAKPOINTS>;\n const order: Breakpoint[] = ([...bpKeys].reverse() as Breakpoint[]).concat('initial' as Breakpoint);\n const startIdx = order.indexOf(shell.currentBreakpoint as Breakpoint);\n for (let i = startIdx + 1; i < order.length; i++) {\n const bp = order[i];\n if (dm && dm[bp]) {\n return dm[bp] as PaneMode;\n }\n }\n return 'collapsed';\n }, [defaultMode, shell.currentBreakpoint]);\n\n const didInitRef = React.useRef(false);\n React.useEffect(() => {\n if (didInitRef.current) return;\n didInitRef.current = true;\n if (mode === undefined) {\n const initial = resolveResponsiveMode();\n if (shell.bottomMode !== initial) shell.setBottomMode(initial);\n }\n }, []);\n\n const lastBottomBpRef = React.useRef<Breakpoint | null>(null);\n const lastResolvedBottomRef = React.useRef<PaneMode | null>(null);\n React.useEffect(() => {\n if (mode !== undefined) return;\n if (!shell.currentBreakpointReady) return;\n if (lastBottomBpRef.current === shell.currentBreakpoint) return;\n lastBottomBpRef.current = shell.currentBreakpoint as Breakpoint;\n const next = resolveResponsiveMode();\n if (lastResolvedBottomRef.current === next) return;\n lastResolvedBottomRef.current = next;\n if (next !== shell.bottomMode) shell.setBottomMode(next);\n }, [mode, shell.currentBreakpoint, shell.currentBreakpointReady, resolveResponsiveMode, shell.bottomMode, shell.setBottomMode]);\n\n React.useEffect(() => {\n if (mode !== undefined && shell.bottomMode !== mode) {\n shell.setBottomMode(mode);\n }\n }, [mode, shell]);\n\n React.useEffect(() => {\n if (mode === undefined) {\n onModeChange?.(shell.bottomMode);\n }\n }, [shell.bottomMode, mode, onModeChange]);\n\n React.useEffect(() => {\n if (shell.bottomMode === 'expanded') {\n onExpand?.();\n } else {\n onCollapse?.();\n }\n }, [shell.bottomMode, onExpand, onCollapse]);\n\n const isExpanded = shell.bottomMode === 'expanded';\n\n const persistenceAdapter = React.useMemo(() => {\n if (!paneId || persistence) return persistence;\n const key = `kookie-ui:shell:bottom:${paneId}`;\n const adapter: PaneSizePersistence = {\n load: () => {\n if (typeof window === 'undefined') return undefined;\n const v = window.localStorage.getItem(key);\n return v ? Number(v) : undefined;\n },\n save: (size: number) => {\n if (typeof window === 'undefined') return;\n window.localStorage.setItem(key, String(size));\n },\n };\n return adapter;\n }, [paneId, persistence]);\n\n React.useEffect(() => {\n let mounted = true;\n (async () => {\n if (!resizable || !persistenceAdapter?.load || isOverlay) return;\n const loaded = await persistenceAdapter.load();\n if (mounted && typeof loaded === 'number' && localRef.current) {\n localRef.current.style.setProperty('--bottom-size', `${loaded}px`);\n onResize?.(loaded);\n }\n })();\n return () => {\n mounted = false;\n };\n }, [resizable, persistenceAdapter, onResize, isOverlay]);\n\n const handleEl =\n resizable && !isOverlay && isExpanded ? (\n <PaneResizeContext.Provider\n value={{\n containerRef: localRef,\n cssVarName: '--bottom-size',\n minSize,\n maxSize,\n defaultSize: expandedSize,\n orientation: 'horizontal',\n edge: 'start',\n computeNext: (client, startClient, startSize) => {\n const delta = client - startClient;\n return startSize - delta;\n },\n onResize,\n onResizeStart,\n onResizeEnd: (size) => {\n onResizeEnd?.(size);\n persistenceAdapter?.save?.(size);\n },\n target: 'bottom',\n collapsible,\n snapPoints,\n snapTolerance: snapTolerance ?? 8,\n collapseThreshold,\n requestCollapse: () => shell.setBottomMode('collapsed'),\n requestToggle: () => shell.togglePane('bottom'),\n }}\n >\n {handleChildren.length > 0 ? handleChildren.map((el, i) => React.cloneElement(el, { key: el.key ?? i })) : <PaneHandle />}\n </PaneResizeContext.Provider>\n ) : null;\n\n if (isOverlay) {\n const open = shell.bottomMode === 'expanded';\n return (\n <Sheet.Root open={open} onOpenChange={(o) => shell.setBottomMode(o ? 'expanded' : 'collapsed')}>\n <Sheet.Content side=\"bottom\" style={{ padding: 0 }} height={{ initial: `${expandedSize}px` }}>\n <VisuallyHidden>\n <Sheet.Title>Bottom panel</Sheet.Title>\n </VisuallyHidden>\n {contentChildren}\n </Sheet.Content>\n </Sheet.Root>\n );\n }\n\n return (\n <div\n {...props}\n ref={setRef}\n className={classNames('rt-ShellBottom', className)}\n data-mode={shell.bottomMode}\n data-peek={shell.peekTarget === 'bottom' || undefined}\n data-presentation={resolvedPresentation}\n data-open={(isStacked && isExpanded) || undefined}\n style={{\n ...style,\n ['--bottom-size' as any]: `${expandedSize}px`,\n ['--bottom-min-size' as any]: `${minSize}px`,\n ['--bottom-max-size' as any]: `${maxSize}px`,\n }}\n >\n <div className=\"rt-ShellBottomContent\" data-visible={isExpanded || undefined}>\n {contentChildren}\n </div>\n {handleEl}\n </div>\n );\n },\n) as BottomComponent;\nBottom.displayName = 'Shell.Bottom';\nBottom.Handle = BottomHandle;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["shell_bottom_exports", "__export", "Bottom", "__toCommonJS", "React", "import_classnames", "Sheet", "import_visually_hidden", "import_shell_context", "import_shell_hooks", "import_shell_resize", "import_shell_handles", "import_shell_types", "className", "presentation", "mode", "defaultMode", "onModeChange", "expandedSize", "minSize", "maxSize", "resizable", "collapsible", "onExpand", "onCollapse", "onResize", "onResizeStart", "onResizeEnd", "snapPoints", "snapTolerance", "collapseThreshold", "paneId", "persistence", "children", "style", "props", "ref", "shell", "resolvedPresentation", "isOverlay", "isStacked", "localRef", "setRef", "node", "childArray", "handleChildren", "el", "contentChildren", "resolveResponsiveMode", "dm", "order", "startIdx", "i", "bp", "didInitRef", "initial", "lastBottomBpRef", "lastResolvedBottomRef", "next", "isExpanded", "persistenceAdapter", "key", "v", "size", "mounted", "loaded", "handleEl", "client", "startClient", "startSize", "delta", "open", "o", "classNames"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export declare const PaneHandle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
3
|
+
export declare const PanelHandle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
4
|
+
export declare const SidebarHandle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
export declare const InspectorHandle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
6
|
+
export declare const BottomHandle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
//# sourceMappingURL=shell-handles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shell-handles.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-handles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,UAAU,mKA+KrB,CAAC;AAGH,eAAO,MAAM,WAAW,mKAA+H,CAAC;AAGxJ,eAAO,MAAM,aAAa,mKAA+H,CAAC;AAG1J,eAAO,MAAM,eAAe,mKAA+H,CAAC;AAG5J,eAAO,MAAM,YAAY,mKAA+H,CAAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var _=Object.create;var T=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var ae=(e,t)=>{for(var c in t)T(e,c,{get:t[c],enumerable:!0})},W=(e,t,c,b)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of te(t))!re.call(e,p)&&p!==c&&T(e,p,{get:()=>t[p],enumerable:!(b=ee(t,p))||b.enumerable});return e};var K=(e,t,c)=>(c=e!=null?_(ne(e)):{},W(t||!e||!e.__esModule?T(c,"default",{value:e,enumerable:!0}):c,e)),oe=e=>W(T({},"__esModule",{value:!0}),e);var se={};ae(se,{BottomHandle:()=>X,InspectorHandle:()=>B,PaneHandle:()=>S,PanelHandle:()=>U,SidebarHandle:()=>q});module.exports=oe(se);var l=K(require("react")),V=K(require("classnames")),F=require("./shell-resize.js");const S=l.forwardRef(({className:e,children:t,...c},b)=>{const{containerRef:p,cssVarName:u,minSize:x,maxSize:H,defaultSize:L,orientation:d,edge:z,computeNext:Y,onResize:E,onResizeStart:R,onResizeEnd:g,snapPoints:M,snapTolerance:O,collapseThreshold:D,collapsible:A,target:ie,requestCollapse:j,requestToggle:G}=(0,F.usePaneResize)(),P=l.useRef(null);l.useEffect(()=>()=>{try{P.current?.()}catch{}P.current=null},[]);const J=d;return l.createElement("div",{...c,ref:b,className:(0,V.default)("rt-ShellResizer",e),"data-orientation":d,"data-edge":z,role:"slider","aria-orientation":J,"aria-valuemin":x,"aria-valuemax":H,"aria-valuenow":L,tabIndex:0,onPointerDown:n=>{if(!p.current)return;n.preventDefault();const o=p.current,s=n.currentTarget,m=n.pointerId;try{P.current?.()}catch{}o.setAttribute("data-resizing","");try{s.setPointerCapture(m)}catch{}const v=d==="vertical"?n.clientX:n.clientY,a=parseFloat(getComputedStyle(o).getPropertyValue(u)||`${L}`),r=i=>Math.min(Math.max(i,x),H),f=document.body,Q=f.style.cursor,Z=f.style.userSelect;f.style.cursor=d==="vertical"?"col-resize":"row-resize",f.style.userSelect="none",R?.(a);const k=i=>{const y=d==="vertical"?i.clientX:i.clientY,h=r(Y(y,v,a));o.style.setProperty(u,`${h}px`),s.setAttribute("aria-valuenow",String(h)),E?.(h)},C=()=>{try{s.releasePointerCapture(m)}catch{}window.removeEventListener("pointermove",k),window.removeEventListener("pointerup",w),window.removeEventListener("pointercancel",w),window.removeEventListener("keydown",N),s.removeEventListener("lostpointercapture",w),o.removeAttribute("data-resizing"),f.style.cursor=Q,f.style.userSelect=Z,P.current=null},w=()=>{const i=parseFloat(getComputedStyle(o).getPropertyValue(u)||`${L}`);let y=i;if(M&&M.length){const h=M.reduce(($,I)=>Math.abs(I-i)<Math.abs($-i)?I:$,M[0]);Math.abs(h-i)<=(O??8)&&(y=h,o.style.setProperty(u,`${y}px`),s.setAttribute("aria-valuenow",String(y)),E?.(y))}A&&typeof D=="number"&&i<=D&&j?.(),g?.(y),C()},N=i=>{i.key==="Escape"&&(o.style.setProperty(u,`${a}px`),s.setAttribute("aria-valuenow",String(a)),g?.(a),C())};window.addEventListener("pointermove",k),window.addEventListener("pointerup",w),window.addEventListener("pointercancel",w),window.addEventListener("keydown",N),s.addEventListener("lostpointercapture",w),P.current=C},onDoubleClick:()=>{A&&G?.()},onKeyDown:n=>{if(!p.current)return;const o=p.current,s=parseFloat(getComputedStyle(o).getPropertyValue(u)||`${L}`),m=r=>Math.min(Math.max(r,x),H),v=n.shiftKey?32:8;let a=0;if(d==="vertical"?n.key==="ArrowRight"?a=v:n.key==="ArrowLeft"&&(a=-v):n.key==="ArrowDown"?a=v:n.key==="ArrowUp"&&(a=-v),n.key==="Home"){n.preventDefault(),R?.(s);const r=m(x);o.style.setProperty(u,`${r}px`),n.currentTarget.setAttribute("aria-valuenow",String(r)),E?.(r),g?.(r);return}if(n.key==="End"){n.preventDefault(),R?.(s);const r=m(H);o.style.setProperty(u,`${r}px`),n.currentTarget.setAttribute("aria-valuenow",String(r)),E?.(r),g?.(r);return}if(a!==0){n.preventDefault(),R?.(s);const r=m(s+(z==="start"&&d==="vertical"?-a:a));o.style.setProperty(u,`${r}px`),n.currentTarget.setAttribute("aria-valuenow",String(r)),E?.(r),g?.(r)}}},t)});S.displayName="Shell.Handle";const U=l.forwardRef((e,t)=>l.createElement(S,{...e,ref:t}));U.displayName="Shell.Panel.Handle";const q=l.forwardRef((e,t)=>l.createElement(S,{...e,ref:t}));q.displayName="Shell.Sidebar.Handle";const B=l.forwardRef((e,t)=>l.createElement(S,{...e,ref:t}));B.displayName="Shell.Inspector.Handle";const X=l.forwardRef((e,t)=>l.createElement(S,{...e,ref:t}));X.displayName="Shell.Bottom.Handle";
|
|
2
|
+
//# sourceMappingURL=shell-handles.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/_internal/shell-handles.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { usePaneResize } from './shell-resize.js';\n\nexport const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(({ className, children, ...props }, ref) => {\n const {\n containerRef,\n cssVarName,\n minSize,\n maxSize,\n defaultSize,\n orientation,\n edge,\n computeNext,\n onResize,\n onResizeStart,\n onResizeEnd,\n snapPoints,\n snapTolerance,\n collapseThreshold,\n collapsible,\n target,\n requestCollapse,\n requestToggle,\n } = usePaneResize();\n\n const activeCleanupRef = React.useRef<(() => void) | null>(null);\n React.useEffect(\n () => () => {\n try {\n activeCleanupRef.current?.();\n } catch {}\n activeCleanupRef.current = null;\n },\n [],\n );\n\n const ariaOrientation = orientation;\n\n return (\n <div\n {...props}\n ref={ref}\n className={classNames('rt-ShellResizer', className)}\n data-orientation={orientation}\n data-edge={edge}\n role=\"slider\"\n aria-orientation={ariaOrientation}\n aria-valuemin={minSize}\n aria-valuemax={maxSize}\n aria-valuenow={defaultSize}\n tabIndex={0}\n onPointerDown={(e) => {\n if (!containerRef.current) return;\n e.preventDefault();\n const container = containerRef.current;\n const handleEl = e.currentTarget as HTMLElement;\n const pointerId = e.pointerId;\n try {\n activeCleanupRef.current?.();\n } catch {}\n container.setAttribute('data-resizing', '');\n try {\n handleEl.setPointerCapture(pointerId);\n } catch {}\n const startClient = orientation === 'vertical' ? e.clientX : e.clientY;\n const startSize = parseFloat(getComputedStyle(container).getPropertyValue(cssVarName) || `${defaultSize}`);\n const clamp = (v: number) => Math.min(Math.max(v, minSize), maxSize);\n const body = document.body;\n const prevCursor = body.style.cursor;\n const prevUserSelect = body.style.userSelect;\n body.style.cursor = orientation === 'vertical' ? 'col-resize' : 'row-resize';\n body.style.userSelect = 'none';\n onResizeStart?.(startSize);\n const handleMove = (ev: PointerEvent) => {\n const client = orientation === 'vertical' ? ev.clientX : ev.clientY;\n const next = clamp(computeNext(client, startClient, startSize));\n container.style.setProperty(cssVarName, `${next}px`);\n handleEl.setAttribute('aria-valuenow', String(next));\n onResize?.(next);\n };\n const cleanup = () => {\n try {\n handleEl.releasePointerCapture(pointerId);\n } catch {}\n window.removeEventListener('pointermove', handleMove as any);\n window.removeEventListener('pointerup', handleUp as any);\n window.removeEventListener('pointercancel', handleUp as any);\n window.removeEventListener('keydown', handleKey as any);\n handleEl.removeEventListener('lostpointercapture', handleUp as any);\n container.removeAttribute('data-resizing');\n body.style.cursor = prevCursor;\n body.style.userSelect = prevUserSelect;\n activeCleanupRef.current = null;\n };\n const handleUp = () => {\n const finalSize = parseFloat(getComputedStyle(container).getPropertyValue(cssVarName) || `${defaultSize}`);\n let snapped = finalSize;\n if (snapPoints && snapPoints.length) {\n const nearest = snapPoints.reduce((acc, p) => (Math.abs(p - finalSize) < Math.abs(acc - finalSize) ? p : acc), snapPoints[0]);\n if (Math.abs(nearest - finalSize) <= (snapTolerance ?? 8)) {\n snapped = nearest;\n container.style.setProperty(cssVarName, `${snapped}px`);\n handleEl.setAttribute('aria-valuenow', String(snapped));\n onResize?.(snapped);\n }\n }\n if (collapsible && typeof collapseThreshold === 'number' && finalSize <= collapseThreshold) {\n requestCollapse?.();\n }\n onResizeEnd?.(snapped);\n cleanup();\n };\n const handleKey = (kev: KeyboardEvent) => {\n if (kev.key === 'Escape') {\n container.style.setProperty(cssVarName, `${startSize}px`);\n handleEl.setAttribute('aria-valuenow', String(startSize));\n onResizeEnd?.(startSize);\n cleanup();\n }\n };\n window.addEventListener('pointermove', handleMove as any);\n window.addEventListener('pointerup', handleUp as any);\n window.addEventListener('pointercancel', handleUp as any);\n window.addEventListener('keydown', handleKey as any);\n handleEl.addEventListener('lostpointercapture', handleUp as any);\n activeCleanupRef.current = cleanup;\n }}\n onDoubleClick={() => {\n if (collapsible) requestToggle?.();\n }}\n onKeyDown={(e) => {\n if (!containerRef.current) return;\n const container = containerRef.current;\n const current = parseFloat(getComputedStyle(container).getPropertyValue(cssVarName) || `${defaultSize}`);\n const clamp = (v: number) => Math.min(Math.max(v, minSize), maxSize);\n const step = e.shiftKey ? 32 : 8;\n let delta = 0;\n if (orientation === 'vertical') {\n if (e.key === 'ArrowRight') delta = step;\n else if (e.key === 'ArrowLeft') delta = -step;\n } else {\n if (e.key === 'ArrowDown') delta = step;\n else if (e.key === 'ArrowUp') delta = -step;\n }\n if (e.key === 'Home') {\n e.preventDefault();\n onResizeStart?.(current);\n const next = clamp(minSize);\n container.style.setProperty(cssVarName, `${next}px`);\n (e.currentTarget as HTMLElement).setAttribute('aria-valuenow', String(next));\n onResize?.(next);\n onResizeEnd?.(next);\n return;\n }\n if (e.key === 'End') {\n e.preventDefault();\n onResizeStart?.(current);\n const next = clamp(maxSize);\n container.style.setProperty(cssVarName, `${next}px`);\n (e.currentTarget as HTMLElement).setAttribute('aria-valuenow', String(next));\n onResize?.(next);\n onResizeEnd?.(next);\n return;\n }\n if (delta !== 0) {\n e.preventDefault();\n onResizeStart?.(current);\n const next = clamp(current + (edge === 'start' && orientation === 'vertical' ? -delta : delta));\n container.style.setProperty(cssVarName, `${next}px`);\n (e.currentTarget as HTMLElement).setAttribute('aria-valuenow', String(next));\n onResize?.(next);\n onResizeEnd?.(next);\n }\n }}\n >\n {children}\n </div>\n );\n});\nPaneHandle.displayName = 'Shell.Handle';\n\nexport const PanelHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>((props, ref) => <PaneHandle {...props} ref={ref} />);\nPanelHandle.displayName = 'Shell.Panel.Handle';\n\nexport const SidebarHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>((props, ref) => <PaneHandle {...props} ref={ref} />);\nSidebarHandle.displayName = 'Shell.Sidebar.Handle';\n\nexport const InspectorHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>((props, ref) => <PaneHandle {...props} ref={ref} />);\nInspectorHandle.displayName = 'Shell.Inspector.Handle';\n\nexport const BottomHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>((props, ref) => <PaneHandle {...props} ref={ref} />);\nBottomHandle.displayName = 'Shell.Bottom.Handle';\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["shell_handles_exports", "__export", "BottomHandle", "InspectorHandle", "PaneHandle", "PanelHandle", "SidebarHandle", "__toCommonJS", "React", "import_classnames", "import_shell_resize", "className", "children", "props", "ref", "containerRef", "cssVarName", "minSize", "maxSize", "defaultSize", "orientation", "edge", "computeNext", "onResize", "onResizeStart", "onResizeEnd", "snapPoints", "snapTolerance", "collapseThreshold", "collapsible", "target", "requestCollapse", "requestToggle", "activeCleanupRef", "ariaOrientation", "classNames", "e", "container", "handleEl", "pointerId", "startClient", "startSize", "clamp", "v", "body", "prevCursor", "prevUserSelect", "handleMove", "ev", "client", "next", "cleanup", "handleUp", "handleKey", "finalSize", "snapped", "nearest", "acc", "p", "kev", "current", "step", "delta"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { InspectorHandle } from './shell-handles.js';
|
|
3
|
+
import type { PaneMode, PaneSizePersistence, ResponsivePresentation } from '../shell.types.js';
|
|
4
|
+
interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
5
|
+
presentation?: ResponsivePresentation;
|
|
6
|
+
mode?: PaneMode;
|
|
7
|
+
defaultMode?: any;
|
|
8
|
+
onModeChange?: (mode: PaneMode) => void;
|
|
9
|
+
expandedSize?: number;
|
|
10
|
+
minSize?: number;
|
|
11
|
+
maxSize?: number;
|
|
12
|
+
resizable?: boolean;
|
|
13
|
+
collapsible?: boolean;
|
|
14
|
+
onExpand?: () => void;
|
|
15
|
+
onCollapse?: () => void;
|
|
16
|
+
onResize?: (size: number) => void;
|
|
17
|
+
resizer?: React.ReactNode;
|
|
18
|
+
onResizeStart?: (size: number) => void;
|
|
19
|
+
onResizeEnd?: (size: number) => void;
|
|
20
|
+
snapPoints?: number[];
|
|
21
|
+
snapTolerance?: number;
|
|
22
|
+
collapseThreshold?: number;
|
|
23
|
+
paneId?: string;
|
|
24
|
+
persistence?: PaneSizePersistence;
|
|
25
|
+
}
|
|
26
|
+
type InspectorComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & {
|
|
27
|
+
Handle: typeof InspectorHandle;
|
|
28
|
+
};
|
|
29
|
+
export declare const Inspector: InspectorComponent;
|
|
30
|
+
export {};
|
|
31
|
+
//# sourceMappingURL=shell-inspector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shell-inspector.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-inspector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,eAAe,EAAc,MAAM,oBAAoB,CAAC;AAEjE,OAAO,KAAK,EAAc,QAAQ,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE3G,UAAU,SAAU,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC/D,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,GAAG;IAAE,MAAM,EAAE,OAAO,eAAe,CAAA;CAAE,CAAC;AAEhJ,eAAO,MAAM,SAAS,EA0MjB,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var oe=Object.create;var P=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var se=Object.getOwnPropertyNames;var ie=Object.getPrototypeOf,ae=Object.prototype.hasOwnProperty;var le=(r,s)=>{for(var o in s)P(r,o,{get:s[o],enumerable:!0})},D=(r,s,o,p)=>{if(s&&typeof s=="object"||typeof s=="function")for(let l of se(s))!ae.call(r,l)&&l!==o&&P(r,l,{get:()=>s[l],enumerable:!(p=re(s,l))||p.enumerable});return r};var x=(r,s,o)=>(o=r!=null?oe(ie(r)):{},D(s||!r||!r.__esModule?P(o,"default",{value:r,enumerable:!0}):o,r)),pe=r=>D(P({},"__esModule",{value:!0}),r);var ce={};le(ce,{Inspector:()=>I});module.exports=pe(ce);var t=x(require("react")),L=x(require("classnames")),g=x(require("../sheet.js")),V=require("../visually-hidden.js"),K=require("../shell.context.js"),j=require("../shell.hooks.js"),q=require("./shell-resize.js"),d=require("./shell-handles.js"),F=require("../shell.types.js");const I=t.forwardRef(({className:r,presentation:s={initial:"overlay",lg:"fixed"},mode:o,defaultMode:p="collapsed",onModeChange:l,expandedSize:v=320,minSize:S=200,maxSize:C=500,resizable:k=!1,collapsible:W=!0,onExpand:z,onCollapse:T,onResize:R,onResizeStart:G,onResizeEnd:J,snapPoints:Q,snapTolerance:U,collapseThreshold:X,paneId:M,persistence:b,children:Y,style:Z,..._},u)=>{const n=(0,K.useShell)(),h=(0,j.useResponsivePresentation)(s),m=h==="overlay",ee=h==="stacked",f=t.useRef(null),ne=t.useCallback(e=>{f.current=e,typeof u=="function"?u(e):u&&(u.current=e)},[u]),w=t.Children.toArray(Y),H=w.filter(e=>t.isValidElement(e)&&e.type===d.InspectorHandle),N=w.filter(e=>!(t.isValidElement(e)&&e.type===d.InspectorHandle)),A=t.useCallback(()=>{if(typeof p=="string")return p;const e=p;if(e&&e[n.currentBreakpoint])return e[n.currentBreakpoint];const a=[...Object.keys(F.BREAKPOINTS)].reverse().concat("initial"),B=a.indexOf(n.currentBreakpoint);for(let c=B+1;c<a.length;c++){const $=a[c];if(e&&e[$])return e[$]}return"collapsed"},[p,n.currentBreakpoint]),O=t.useRef(null);t.useEffect(()=>{if(o!==void 0||!n.currentBreakpointReady||O.current===n.currentBreakpoint)return;O.current=n.currentBreakpoint;const e=A();e!==n.inspectorMode&&n.setInspectorMode(e)},[o,n.currentBreakpoint,n.currentBreakpointReady,A,n.inspectorMode,n.setInspectorMode]),t.useEffect(()=>{o!==void 0&&n.inspectorMode!==o&&n.setInspectorMode(o)},[o,n]),t.useEffect(()=>{o===void 0&&l?.(n.inspectorMode)},[n.inspectorMode,o,l]),t.useEffect(()=>{n.inspectorMode==="expanded"?z?.():T?.()},[n.inspectorMode,z,T]);const E=n.inspectorMode==="expanded",y=t.useMemo(()=>{if(!M||b)return b;const e=`kookie-ui:shell:inspector:${M}`;return{load:()=>{if(typeof window>"u")return;const a=window.localStorage.getItem(e);return a?Number(a):void 0},save:a=>{typeof window>"u"||window.localStorage.setItem(e,String(a))}}},[M,b]);t.useEffect(()=>{let e=!0;return(async()=>{if(!k||!y?.load||m)return;const i=await y.load();e&&typeof i=="number"&&f.current&&(f.current.style.setProperty("--inspector-size",`${i}px`),R?.(i))})(),()=>{e=!1}},[k,y,R,m]);const te=k&&!m&&E?t.createElement(q.PaneResizeContext.Provider,{value:{containerRef:f,cssVarName:"--inspector-size",minSize:S,maxSize:C,defaultSize:v,orientation:"vertical",edge:"start",computeNext:(e,i,a)=>{const B=getComputedStyle(f.current).direction==="rtl",c=e-i;return a+(B?c:-c)},onResize:R,onResizeStart:G,onResizeEnd:e=>{J?.(e),y?.save?.(e)},target:"inspector",collapsible:W,snapPoints:Q,snapTolerance:U??8,collapseThreshold:X,requestCollapse:()=>n.setInspectorMode("collapsed"),requestToggle:()=>n.togglePane("inspector")}},H.length>0?H.map((e,i)=>t.cloneElement(e,{key:e.key??i})):t.createElement(d.PaneHandle,null)):null;if(m){const e=n.inspectorMode==="expanded";return t.createElement(g.Root,{open:e,onOpenChange:i=>n.setInspectorMode(i?"expanded":"collapsed")},t.createElement(g.Content,{side:"end",style:{padding:0},width:{initial:`${v}px`}},t.createElement(V.VisuallyHidden,null,t.createElement(g.Title,null,"Inspector")),N))}return t.createElement("div",{..._,ref:ne,className:(0,L.default)("rt-ShellInspector",r),"data-mode":n.inspectorMode,"data-peek":n.peekTarget==="inspector"||void 0,"data-presentation":h,"data-open":ee&&E||void 0,style:{...Z,"--inspector-size":`${v}px`,"--inspector-min-size":`${S}px`,"--inspector-max-size":`${C}px`}},t.createElement("div",{className:"rt-ShellInspectorContent","data-visible":E||void 0},N),te)});I.displayName="Shell.Inspector",I.Handle=d.InspectorHandle;
|
|
2
|
+
//# sourceMappingURL=shell-inspector.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/_internal/shell-inspector.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport * as Sheet from '../sheet.js';\nimport { VisuallyHidden } from '../visually-hidden.js';\nimport { useShell } from '../shell.context.js';\nimport { useResponsivePresentation } from '../shell.hooks.js';\nimport { PaneResizeContext } from './shell-resize.js';\nimport { InspectorHandle, PaneHandle } from './shell-handles.js';\nimport { BREAKPOINTS } from '../shell.types.js';\nimport type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation } from '../shell.types.js';\n\ninterface PaneProps extends React.ComponentPropsWithoutRef<'div'> {\n presentation?: ResponsivePresentation;\n mode?: PaneMode;\n defaultMode?: any;\n onModeChange?: (mode: PaneMode) => void;\n expandedSize?: number;\n minSize?: number;\n maxSize?: 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\ntype InspectorComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof InspectorHandle };\n\nexport const Inspector = React.forwardRef<HTMLDivElement, PaneProps>(\n (\n {\n className,\n presentation = { initial: 'overlay', lg: 'fixed' },\n mode,\n defaultMode = 'collapsed',\n onModeChange,\n expandedSize = 320,\n minSize = 200,\n maxSize = 500,\n resizable = false,\n collapsible = true,\n onExpand,\n onCollapse,\n onResize,\n onResizeStart,\n onResizeEnd,\n snapPoints,\n snapTolerance,\n collapseThreshold,\n paneId,\n persistence,\n children,\n style,\n ...props\n },\n ref,\n ) => {\n const shell = useShell();\n const resolvedPresentation = useResponsivePresentation(presentation);\n const isOverlay = resolvedPresentation === 'overlay';\n const isStacked = resolvedPresentation === 'stacked';\n const localRef = React.useRef<HTMLDivElement | null>(null);\n const setRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n localRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n },\n [ref],\n );\n const childArray = React.Children.toArray(children) as React.ReactElement[];\n const handleChildren = childArray.filter((el: React.ReactElement) => React.isValidElement(el) && el.type === InspectorHandle);\n const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === InspectorHandle));\n\n const resolveResponsiveMode = React.useCallback((): PaneMode => {\n if (typeof defaultMode === 'string') return defaultMode as PaneMode;\n const dm = defaultMode as Partial<Record<Breakpoint, PaneMode>> | undefined;\n if (dm && dm[shell.currentBreakpoint as Breakpoint]) {\n return dm[shell.currentBreakpoint as Breakpoint] as PaneMode;\n }\n const bpKeys = Object.keys(BREAKPOINTS) as Array<keyof typeof BREAKPOINTS>;\n const order: Breakpoint[] = ([...bpKeys].reverse() as Breakpoint[]).concat('initial' as Breakpoint);\n const startIdx = order.indexOf(shell.currentBreakpoint as Breakpoint);\n for (let i = startIdx + 1; i < order.length; i++) {\n const bp = order[i];\n if (dm && dm[bp]) {\n return dm[bp] as PaneMode;\n }\n }\n return 'collapsed';\n }, [defaultMode, shell.currentBreakpoint]);\n\n const lastInspectorBpRef = React.useRef<Breakpoint | null>(null);\n React.useEffect(() => {\n if (mode !== undefined) return;\n if (!shell.currentBreakpointReady) return;\n if (lastInspectorBpRef.current === shell.currentBreakpoint) return;\n lastInspectorBpRef.current = shell.currentBreakpoint as Breakpoint;\n const next = resolveResponsiveMode();\n if (next !== shell.inspectorMode) {\n shell.setInspectorMode(next);\n }\n }, [mode, shell.currentBreakpoint, shell.currentBreakpointReady, resolveResponsiveMode, shell.inspectorMode, shell.setInspectorMode]);\n\n React.useEffect(() => {\n if (mode !== undefined && shell.inspectorMode !== mode) {\n shell.setInspectorMode(mode);\n }\n }, [mode, shell]);\n\n React.useEffect(() => {\n if (mode === undefined) {\n onModeChange?.(shell.inspectorMode);\n }\n }, [shell.inspectorMode, mode, onModeChange]);\n\n React.useEffect(() => {\n if (shell.inspectorMode === 'expanded') {\n onExpand?.();\n } else {\n onCollapse?.();\n }\n }, [shell.inspectorMode, onExpand, onCollapse]);\n\n const isExpanded = shell.inspectorMode === 'expanded';\n\n const persistenceAdapter = React.useMemo(() => {\n if (!paneId || persistence) return persistence;\n const key = `kookie-ui:shell:inspector:${paneId}`;\n const adapter: PaneSizePersistence = {\n load: () => {\n if (typeof window === 'undefined') return undefined;\n const v = window.localStorage.getItem(key);\n return v ? Number(v) : undefined;\n },\n save: (size: number) => {\n if (typeof window === 'undefined') return;\n window.localStorage.setItem(key, String(size));\n },\n };\n return adapter;\n }, [paneId, persistence]);\n\n React.useEffect(() => {\n let mounted = true;\n (async () => {\n if (!resizable || !persistenceAdapter?.load || isOverlay) return;\n const loaded = await persistenceAdapter.load();\n if (mounted && typeof loaded === 'number' && localRef.current) {\n localRef.current.style.setProperty('--inspector-size', `${loaded}px`);\n onResize?.(loaded);\n }\n })();\n return () => {\n mounted = false;\n };\n }, [resizable, persistenceAdapter, onResize, isOverlay]);\n\n const handleEl =\n resizable && !isOverlay && isExpanded ? (\n <PaneResizeContext.Provider\n value={{\n containerRef: localRef,\n cssVarName: '--inspector-size',\n minSize,\n maxSize,\n defaultSize: expandedSize,\n orientation: 'vertical',\n edge: 'start',\n computeNext: (client, startClient, startSize) => {\n const isRtl = getComputedStyle(localRef.current!).direction === 'rtl';\n const delta = client - startClient;\n return startSize + (isRtl ? delta : -delta);\n },\n onResize,\n onResizeStart,\n onResizeEnd: (size) => {\n onResizeEnd?.(size);\n persistenceAdapter?.save?.(size);\n },\n target: 'inspector',\n collapsible,\n snapPoints,\n snapTolerance: snapTolerance ?? 8,\n collapseThreshold,\n requestCollapse: () => shell.setInspectorMode('collapsed'),\n requestToggle: () => shell.togglePane('inspector'),\n }}\n >\n {handleChildren.length > 0 ? handleChildren.map((el, i) => React.cloneElement(el, { key: el.key ?? i })) : <PaneHandle />}\n </PaneResizeContext.Provider>\n ) : null;\n\n if (isOverlay) {\n const open = shell.inspectorMode === 'expanded';\n return (\n <Sheet.Root open={open} onOpenChange={(o) => shell.setInspectorMode(o ? 'expanded' : 'collapsed')}>\n <Sheet.Content side=\"end\" style={{ padding: 0 }} width={{ initial: `${expandedSize}px` }}>\n <VisuallyHidden>\n <Sheet.Title>Inspector</Sheet.Title>\n </VisuallyHidden>\n {contentChildren}\n </Sheet.Content>\n </Sheet.Root>\n );\n }\n\n return (\n <div\n {...props}\n ref={setRef}\n className={classNames('rt-ShellInspector', className)}\n data-mode={shell.inspectorMode}\n data-peek={shell.peekTarget === 'inspector' || undefined}\n data-presentation={resolvedPresentation}\n data-open={(isStacked && isExpanded) || undefined}\n style={{\n ...style,\n ['--inspector-size' as any]: `${expandedSize}px`,\n ['--inspector-min-size' as any]: `${minSize}px`,\n ['--inspector-max-size' as any]: `${maxSize}px`,\n }}\n >\n <div className=\"rt-ShellInspectorContent\" data-visible={isExpanded || undefined}>\n {contentChildren}\n </div>\n {handleEl}\n </div>\n );\n },\n) as InspectorComponent;\n\nInspector.displayName = 'Shell.Inspector';\nInspector.Handle = InspectorHandle;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["shell_inspector_exports", "__export", "Inspector", "__toCommonJS", "React", "import_classnames", "Sheet", "import_visually_hidden", "import_shell_context", "import_shell_hooks", "import_shell_resize", "import_shell_handles", "import_shell_types", "className", "presentation", "mode", "defaultMode", "onModeChange", "expandedSize", "minSize", "maxSize", "resizable", "collapsible", "onExpand", "onCollapse", "onResize", "onResizeStart", "onResizeEnd", "snapPoints", "snapTolerance", "collapseThreshold", "paneId", "persistence", "children", "style", "props", "ref", "shell", "resolvedPresentation", "isOverlay", "isStacked", "localRef", "setRef", "node", "childArray", "handleChildren", "el", "contentChildren", "resolveResponsiveMode", "dm", "order", "startIdx", "i", "bp", "lastInspectorBpRef", "next", "isExpanded", "persistenceAdapter", "key", "v", "size", "mounted", "loaded", "handleEl", "client", "startClient", "startSize", "isRtl", "delta", "open", "o", "classNames"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export interface PaneResizeContextValue {
|
|
3
|
+
containerRef: React.RefObject<HTMLDivElement | null>;
|
|
4
|
+
cssVarName: string;
|
|
5
|
+
minSize: number;
|
|
6
|
+
maxSize: number;
|
|
7
|
+
defaultSize: number;
|
|
8
|
+
orientation: 'vertical' | 'horizontal';
|
|
9
|
+
edge: 'start' | 'end';
|
|
10
|
+
computeNext: (clientPos: number, startClientPos: number, startSize: number) => number;
|
|
11
|
+
onResize?: (size: number) => void;
|
|
12
|
+
onResizeStart?: (size: number) => void;
|
|
13
|
+
onResizeEnd?: (size: number) => void;
|
|
14
|
+
target: 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';
|
|
15
|
+
collapsible: boolean;
|
|
16
|
+
snapPoints?: number[];
|
|
17
|
+
snapTolerance: number;
|
|
18
|
+
collapseThreshold?: number;
|
|
19
|
+
requestCollapse?: () => void;
|
|
20
|
+
requestToggle?: () => void;
|
|
21
|
+
}
|
|
22
|
+
export declare const PaneResizeContext: React.Context<PaneResizeContextValue | null>;
|
|
23
|
+
export declare function usePaneResize(): PaneResizeContextValue;
|
|
24
|
+
//# sourceMappingURL=shell-resize.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shell-resize.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-resize.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;IACvC,IAAI,EAAE,OAAO,GAAG,KAAK,CAAC;IACtB,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IACtF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;IACvE,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,8CAA2D,CAAC;AAE1F,wBAAgB,aAAa,2BAI5B"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var u=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var d=(e,n)=>{for(var t in n)o(e,t,{get:n[t],enumerable:!0})},a=(e,n,t,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of b(n))!z.call(e,r)&&r!==t&&o(e,r,{get:()=>n[r],enumerable:!(i=m(n,r))||i.enumerable});return e};var p=(e,n,t)=>(t=e!=null?u(c(e)):{},a(n||!e||!e.__esModule?o(t,"default",{value:e,enumerable:!0}):t,e)),x=e=>a(o({},"__esModule",{value:!0}),e);var f={};d(f,{PaneResizeContext:()=>l,usePaneResize:()=>R});module.exports=x(f);var s=p(require("react"));const l=s.createContext(null);function R(){const e=s.useContext(l);if(!e)throw new Error("Shell.Handle must be used within a resizable pane");return e}
|
|
2
|
+
//# sourceMappingURL=shell-resize.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/_internal/shell-resize.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\n\nexport interface PaneResizeContextValue {\n containerRef: React.RefObject<HTMLDivElement | null>;\n cssVarName: string;\n minSize: number;\n maxSize: number;\n defaultSize: number;\n orientation: 'vertical' | 'horizontal';\n edge: 'start' | 'end';\n computeNext: (clientPos: number, startClientPos: number, startSize: number) => number;\n onResize?: (size: number) => void;\n onResizeStart?: (size: number) => void;\n onResizeEnd?: (size: number) => void;\n target: 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';\n collapsible: boolean;\n snapPoints?: number[];\n snapTolerance: number;\n collapseThreshold?: number;\n requestCollapse?: () => void;\n requestToggle?: () => void;\n}\n\nexport const PaneResizeContext = React.createContext<PaneResizeContextValue | null>(null);\n\nexport function usePaneResize() {\n const ctx = React.useContext(PaneResizeContext);\n if (!ctx) throw new Error('Shell.Handle must be used within a resizable pane');\n return ctx;\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,EAAA,kBAAAC,IAAA,eAAAC,EAAAJ,GAAA,IAAAK,EAAuB,oBAuBhB,MAAMH,EAAoBG,EAAM,cAA6C,IAAI,EAEjF,SAASF,GAAgB,CAC9B,MAAMG,EAAMD,EAAM,WAAWH,CAAiB,EAC9C,GAAI,CAACI,EAAK,MAAM,IAAI,MAAM,mDAAmD,EAC7E,OAAOA,CACT",
|
|
6
|
+
"names": ["shell_resize_exports", "__export", "PaneResizeContext", "usePaneResize", "__toCommonJS", "React", "ctx"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { SidebarHandle } from './shell-handles.js';
|
|
3
|
+
import type { PaneMode, PaneSizePersistence, ResponsivePresentation, ResponsiveSidebarMode, SidebarMode } from '../shell.types.js';
|
|
4
|
+
interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
5
|
+
presentation?: ResponsivePresentation;
|
|
6
|
+
mode?: PaneMode;
|
|
7
|
+
defaultMode?: any;
|
|
8
|
+
onModeChange?: (mode: PaneMode | SidebarMode) => void;
|
|
9
|
+
expandedSize?: number;
|
|
10
|
+
minSize?: number;
|
|
11
|
+
maxSize?: number;
|
|
12
|
+
resizable?: boolean;
|
|
13
|
+
collapsible?: boolean;
|
|
14
|
+
onExpand?: () => void;
|
|
15
|
+
onCollapse?: () => void;
|
|
16
|
+
onResize?: (size: number) => void;
|
|
17
|
+
resizer?: React.ReactNode;
|
|
18
|
+
onResizeStart?: (size: number) => void;
|
|
19
|
+
onResizeEnd?: (size: number) => void;
|
|
20
|
+
snapPoints?: number[];
|
|
21
|
+
snapTolerance?: number;
|
|
22
|
+
collapseThreshold?: number;
|
|
23
|
+
paneId?: string;
|
|
24
|
+
persistence?: PaneSizePersistence;
|
|
25
|
+
}
|
|
26
|
+
type SidebarComponent = React.ForwardRefExoticComponent<Omit<PaneProps, 'mode' | 'defaultMode' | 'onModeChange'> & {
|
|
27
|
+
mode?: SidebarMode;
|
|
28
|
+
defaultMode?: ResponsiveSidebarMode;
|
|
29
|
+
onModeChange?: (mode: SidebarMode) => void;
|
|
30
|
+
thinSize?: number;
|
|
31
|
+
toggleModes?: 'both' | 'single';
|
|
32
|
+
} & React.RefAttributes<HTMLDivElement>> & {
|
|
33
|
+
Handle: typeof SidebarHandle;
|
|
34
|
+
};
|
|
35
|
+
export declare const Sidebar: SidebarComponent;
|
|
36
|
+
export {};
|
|
37
|
+
//# sourceMappingURL=shell-sidebar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shell-sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,aAAa,EAAc,MAAM,oBAAoB,CAAC;AAC/D,OAAO,KAAK,EAAc,QAAQ,EAAE,mBAAmB,EAAqB,sBAAsB,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGlK,UAAU,SAAU,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC/D,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,WAAW,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,yBAAyB,CACrD,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,CAAC,GAAG;IACzD,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CACjC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CACxC,GAAG;IAAE,MAAM,EAAE,OAAO,aAAa,CAAA;CAAE,CAAC;AAErC,eAAO,MAAM,OAAO,EA2Sf,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var ue=Object.create;var R=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var be=Object.getOwnPropertyNames;var fe=Object.getPrototypeOf,me=Object.prototype.hasOwnProperty;var Me=(i,s)=>{for(var a in s)R(i,a,{get:s[a],enumerable:!0})},W=(i,s,a,d)=>{if(s&&typeof s=="object"||typeof s=="function")for(let c of be(s))!me.call(i,c)&&c!==a&&R(i,c,{get:()=>s[c],enumerable:!(d=pe(s,c))||d.enumerable});return i};var T=(i,s,a)=>(a=i!=null?ue(fe(i)):{},W(s||!i||!i.__esModule?R(a,"default",{value:i,enumerable:!0}):a,i)),Se=i=>W(R({},"__esModule",{value:!0}),i);var he={};Me(he,{Sidebar:()=>O});module.exports=Se(he);var r=T(require("react")),G=T(require("classnames")),w=T(require("../sheet.js")),J=require("../visually-hidden.js"),H=require("../shell.context.js"),Q=require("../shell.hooks.js"),U=require("./shell-resize.js"),b=require("./shell-handles.js"),X=require("../shell.types.js");const O=r.forwardRef(({className:i,presentation:s={initial:"overlay",md:"fixed"},mode:a,defaultMode:d="expanded",onModeChange:c,expandedSize:u=288,minSize:z=200,maxSize:N=400,resizable:g=!1,collapsible:Y=!0,onExpand:$,onCollapse:A,onResize:k,onResizeStart:Z,onResizeEnd:_,snapPoints:ee,snapTolerance:te,collapseThreshold:re,paneId:P,persistence:C,children:ne,style:ae,thinSize:f=64,toggleModes:E,...oe},m)=>{const t=(0,H.useShell)(),x=(0,Q.useResponsivePresentation)(s),M=x==="overlay",ie=x==="stacked",S=r.useRef(null),se=r.useCallback(e=>{S.current=e,typeof m=="function"?m(e):m&&(m.current=e)},[m]),I=r.Children.toArray(ne),V=I.filter(e=>r.isValidElement(e)&&e.type===b.SidebarHandle),D=I.filter(e=>!(r.isValidElement(e)&&e.type===b.SidebarHandle)),de=r.useId();r.useEffect(()=>(t.setHasSidebar(!0),()=>{t.setHasSidebar(!1)}),[t,de]);const L=r.useRef(!1);r.useEffect(()=>{L.current||(L.current=!0,a===void 0&&t.sidebarMode!==d&&t.setSidebarMode(d))},[]),r.useEffect(()=>{a!==void 0&&t.sidebarMode!==a&&t.setSidebarMode(a)},[a,t]),r.useEffect(()=>{a===void 0&&c?.(t.sidebarMode)},[t.sidebarMode,a,c]),r.useEffect(()=>{t.sidebarMode==="expanded"?$?.():A?.()},[t.sidebarMode,$,A]);const K=t.sidebarMode!=="collapsed",h=r.useMemo(()=>{if(!P||C)return C;const e=`kookie-ui:shell:sidebar:${P}`;return{load:()=>{if(typeof window>"u")return;const n=window.localStorage.getItem(e);return n?Number(n):void 0},save:n=>{typeof window>"u"||window.localStorage.setItem(e,String(n))}}},[P,C]);r.useEffect(()=>{let e=!0;return(async()=>{if(!g||!h?.load||M)return;const o=await h.load();e&&typeof o=="number"&&S.current&&(S.current.style.setProperty("--sidebar-size",`${o}px`),k?.(o))})(),()=>{e=!1}},[g,h,k,M]);const y=r.useCallback(()=>{if(typeof d=="string")return d;const e=d;if(e&&e[t.currentBreakpoint])return e[t.currentBreakpoint];const n=[...Object.keys(X.BREAKPOINTS)].reverse().concat("initial"),l=n.indexOf(t.currentBreakpoint);for(let p=l+1;p<n.length;p++){const F=n[p];if(e&&e[F])return e[F]}return"collapsed"},[d,t.currentBreakpoint]),v=(0,H.useShell)(),B=r.useCallback(()=>{const e=y();return e==="thin"||e==="expanded"?e:"expanded"},[y]);r.useEffect(()=>{if(!v.setSidebarToggleComputer)return;const e=E??"both",o=n=>{if(e==="both")return n==="collapsed"?"thin":n==="thin"?"expanded":"collapsed";const l=B();return n==="collapsed"?l:n===l?"collapsed":l};return v.setSidebarToggleComputer(o),()=>{v.setSidebarToggleComputer?.(n=>n==="collapsed"?"thin":n==="thin"?"expanded":"collapsed")}},[v,E,B]);const j=r.useRef(u),le=r.useRef("expanded");r.useEffect(()=>{t.sidebarMode!=="collapsed"&&(le.current=t.sidebarMode,j.current=t.sidebarMode==="thin"?f:u)},[t.sidebarMode,f,u]);const q=r.useRef(null);r.useEffect(()=>{if(a!==void 0||!t.currentBreakpointReady||q.current===t.currentBreakpoint)return;q.current=t.currentBreakpoint;const e=y();e!==t.sidebarMode&&t.setSidebarMode(e)},[a,t.currentBreakpoint,t.currentBreakpointReady,y,t.sidebarMode,t.setSidebarMode]);const ce=g&&!M&&t.sidebarMode==="expanded"?r.createElement(U.PaneResizeContext.Provider,{value:{containerRef:S,cssVarName:"--sidebar-size",minSize:z,maxSize:N,defaultSize:u,orientation:"vertical",edge:"end",computeNext:(e,o,n)=>{const l=getComputedStyle(S.current).direction==="rtl",p=e-o;return n+(l?-p:p)},onResize:k,onResizeStart:Z,onResizeEnd:e=>{_?.(e),h?.save?.(e)},target:"sidebar",collapsible:Y,snapPoints:ee,snapTolerance:te??8,collapseThreshold:re,requestCollapse:()=>t.setSidebarMode("collapsed"),requestToggle:()=>t.togglePane("sidebar")}},V.length>0?V.map((e,o)=>r.cloneElement(e,{key:e.key??o})):r.createElement(b.PaneHandle,null)):null;if(M){const e=t.sidebarMode!=="collapsed";return r.createElement(w.Root,{open:e,onOpenChange:o=>t.setSidebarMode(o?"expanded":"collapsed")},r.createElement(w.Content,{side:"start",style:{padding:0},width:{initial:`${e?t.sidebarMode==="thin"?f:u:j.current}px`}},r.createElement(J.VisuallyHidden,null,r.createElement(w.Title,null,"Sidebar")),D))}return r.createElement("div",{...oe,ref:se,className:(0,G.default)("rt-ShellSidebar",i),"data-mode":t.sidebarMode,"data-peek":t.peekTarget==="sidebar"||void 0,"data-presentation":x,"data-open":ie&&K||void 0,style:{...ae,"--sidebar-size":`${u}px`,"--sidebar-thin-size":`${f}px`,"--sidebar-min-size":`${z}px`,"--sidebar-max-size":`${N}px`,...t.peekTarget==="sidebar"&&t.sidebarMode==="collapsed"&&!M?(()=>{const e=E??"both",o=t.sidebarMode;let n;if(e==="both")n=o==="collapsed"?"thin":o==="thin"?"expanded":"collapsed";else{const l=B();n=o==="collapsed"?l:"collapsed"}return n==="thin"?{"--peek-sidebar-width":`${f}px`}:{"--peek-sidebar-width":`var(--sidebar-size, ${u}px)`}})():{}}},r.createElement("div",{className:"rt-ShellSidebarContent","data-visible":K||void 0},D),ce)});O.displayName="Shell.Sidebar",O.Handle=b.SidebarHandle;
|
|
2
|
+
//# sourceMappingURL=shell-sidebar.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/_internal/shell-sidebar.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport * as Sheet from '../sheet.js';\nimport { VisuallyHidden } from '../visually-hidden.js';\nimport { useShell } from '../shell.context.js';\nimport { useResponsivePresentation } from '../shell.hooks.js';\nimport { PaneResizeContext } from './shell-resize.js';\nimport { SidebarHandle, PaneHandle } from './shell-handles.js';\nimport type { Breakpoint, PaneMode, PaneSizePersistence, PresentationValue, ResponsivePresentation, ResponsiveSidebarMode, SidebarMode } from '../shell.types.js';\nimport { BREAKPOINTS } from '../shell.types.js';\n\ninterface PaneProps extends React.ComponentPropsWithoutRef<'div'> {\n presentation?: ResponsivePresentation;\n mode?: PaneMode;\n defaultMode?: any;\n onModeChange?: (mode: PaneMode | SidebarMode) => void;\n expandedSize?: number;\n minSize?: number;\n maxSize?: 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\ntype SidebarComponent = React.ForwardRefExoticComponent<\n Omit<PaneProps, 'mode' | 'defaultMode' | 'onModeChange'> & {\n mode?: SidebarMode;\n defaultMode?: ResponsiveSidebarMode;\n onModeChange?: (mode: SidebarMode) => void;\n thinSize?: number;\n toggleModes?: 'both' | 'single';\n } & React.RefAttributes<HTMLDivElement>\n> & { Handle: typeof SidebarHandle };\n\nexport const Sidebar = React.forwardRef<\n HTMLDivElement,\n Omit<PaneProps, 'mode' | 'defaultMode' | 'onModeChange'> & {\n mode?: SidebarMode;\n defaultMode?: ResponsiveSidebarMode;\n onModeChange?: (mode: SidebarMode) => void;\n thinSize?: number;\n toggleModes?: 'both' | 'single';\n }\n>(\n (\n {\n className,\n presentation = { initial: 'overlay', md: 'fixed' },\n mode,\n defaultMode = 'expanded',\n onModeChange,\n expandedSize = 288,\n minSize = 200,\n maxSize = 400,\n resizable = false,\n collapsible = true,\n onExpand,\n onCollapse,\n onResize,\n onResizeStart,\n onResizeEnd,\n snapPoints,\n snapTolerance,\n collapseThreshold,\n paneId,\n persistence,\n children,\n style,\n thinSize = 64,\n toggleModes,\n ...props\n },\n ref,\n ) => {\n const shell = useShell();\n const resolvedPresentation = useResponsivePresentation(presentation);\n const isOverlay = resolvedPresentation === 'overlay';\n const isStacked = resolvedPresentation === 'stacked';\n const localRef = React.useRef<HTMLDivElement | null>(null);\n const setRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n localRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n },\n [ref],\n );\n const childArray = React.Children.toArray(children) as React.ReactElement[];\n const handleChildren = childArray.filter((el: React.ReactElement) => React.isValidElement(el) && el.type === SidebarHandle);\n const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === SidebarHandle));\n\n // Register with shell\n const sidebarId = React.useId();\n React.useEffect(() => {\n shell.setHasSidebar(true);\n return () => {\n shell.setHasSidebar(false);\n };\n }, [shell, sidebarId]);\n\n // Honor defaultMode on mount when uncontrolled\n const didInitRef = React.useRef(false);\n React.useEffect(() => {\n if (didInitRef.current) return;\n didInitRef.current = true;\n if (mode === undefined && shell.sidebarMode !== (defaultMode as SidebarMode)) {\n shell.setSidebarMode(defaultMode as SidebarMode);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Sync controlled mode\n React.useEffect(() => {\n if (mode !== undefined && shell.sidebarMode !== mode) {\n shell.setSidebarMode(mode);\n }\n }, [mode, shell]);\n\n // Emit mode changes\n React.useEffect(() => {\n if (mode === undefined) {\n onModeChange?.(shell.sidebarMode);\n }\n }, [shell.sidebarMode, mode, onModeChange]);\n\n // Emit expand/collapse events\n React.useEffect(() => {\n if (shell.sidebarMode === 'expanded') {\n onExpand?.();\n } else {\n onCollapse?.();\n }\n }, [shell.sidebarMode, onExpand, onCollapse]);\n\n // Option A: thin is width-only; content remains visible whenever not collapsed\n const isContentVisible = shell.sidebarMode !== 'collapsed';\n\n // Default persistence if paneId provided and none supplied (fixed only)\n const persistenceAdapter = React.useMemo(() => {\n if (!paneId || persistence) return persistence;\n const key = `kookie-ui:shell:sidebar:${paneId}`;\n const adapter: PaneSizePersistence = {\n load: () => {\n if (typeof window === 'undefined') return undefined;\n const v = window.localStorage.getItem(key);\n return v ? Number(v) : undefined;\n },\n save: (size: number) => {\n if (typeof window === 'undefined') return;\n window.localStorage.setItem(key, String(size));\n },\n };\n return adapter;\n }, [paneId, persistence]);\n\n React.useEffect(() => {\n let mounted = true;\n (async () => {\n if (!resizable || !persistenceAdapter?.load || isOverlay) return;\n const loaded = await persistenceAdapter.load();\n if (mounted && typeof loaded === 'number' && localRef.current) {\n localRef.current.style.setProperty('--sidebar-size', `${loaded}px`);\n onResize?.(loaded);\n }\n })();\n return () => {\n mounted = false;\n };\n }, [resizable, persistenceAdapter, onResize, isOverlay]);\n\n // Always-follow responsive defaultMode for uncontrolled Sidebar (on breakpoint change only)\n const resolveResponsiveMode = React.useCallback((): SidebarMode => {\n if (typeof defaultMode === 'string') return defaultMode as SidebarMode;\n const dm = defaultMode as Partial<Record<Breakpoint, SidebarMode>> | undefined;\n if (dm && dm[shell.currentBreakpoint as Breakpoint]) {\n return dm[shell.currentBreakpoint as Breakpoint] as SidebarMode;\n }\n const bpKeys = Object.keys(BREAKPOINTS) as Array<keyof typeof BREAKPOINTS>;\n const order: Breakpoint[] = ([...bpKeys].reverse() as Breakpoint[]).concat('initial' as Breakpoint);\n const startIdx = order.indexOf(shell.currentBreakpoint as Breakpoint);\n for (let i = startIdx + 1; i < order.length; i++) {\n const bp = order[i];\n if (dm && dm[bp]) return dm[bp] as SidebarMode;\n }\n return 'collapsed';\n }, [defaultMode, shell.currentBreakpoint]);\n\n // Register custom toggle behavior based on toggleModes (both|single)\n const shellForToggle = useShell();\n const resolveDefaultSidebarMode = React.useCallback((): SidebarMode => {\n const resolved = resolveResponsiveMode();\n return resolved === 'thin' || resolved === 'expanded' ? resolved : 'expanded';\n }, [resolveResponsiveMode]);\n\n React.useEffect(() => {\n if (!shellForToggle.setSidebarToggleComputer) return;\n const strategy: 'both' | 'single' = toggleModes ?? 'both';\n const compute = (current: SidebarMode): SidebarMode => {\n if (strategy === 'both') {\n if (current === 'collapsed') return 'thin';\n if (current === 'thin') return 'expanded';\n return 'collapsed';\n }\n const target = resolveDefaultSidebarMode();\n if (current === 'collapsed') return target;\n if (current === target) return 'collapsed';\n return target;\n };\n shellForToggle.setSidebarToggleComputer(compute);\n return () => {\n shellForToggle.setSidebarToggleComputer?.((cur) => (cur === 'collapsed' ? 'thin' : cur === 'thin' ? 'expanded' : 'collapsed'));\n };\n }, [shellForToggle, toggleModes, resolveDefaultSidebarMode]);\n\n const lastOverlayWidthRef = React.useRef<number>(expandedSize);\n const lastOverlayModeRef = React.useRef<SidebarMode>('expanded');\n React.useEffect(() => {\n if (shell.sidebarMode !== 'collapsed') {\n lastOverlayModeRef.current = shell.sidebarMode as SidebarMode;\n lastOverlayWidthRef.current = shell.sidebarMode === 'thin' ? thinSize : expandedSize;\n }\n }, [shell.sidebarMode, thinSize, expandedSize]);\n\n const lastSidebarBpRef = React.useRef<Breakpoint | null>(null);\n React.useEffect(() => {\n if (mode !== undefined) return;\n if (!shell.currentBreakpointReady) return;\n if (lastSidebarBpRef.current === shell.currentBreakpoint) return;\n lastSidebarBpRef.current = shell.currentBreakpoint as Breakpoint;\n const next = resolveResponsiveMode();\n if (next !== shell.sidebarMode) shell.setSidebarMode(next);\n }, [mode, shell.currentBreakpoint, shell.currentBreakpointReady, resolveResponsiveMode, shell.sidebarMode, shell.setSidebarMode]);\n\n const handleEl =\n resizable && !isOverlay && shell.sidebarMode === 'expanded' ? (\n <PaneResizeContext.Provider\n value={{\n containerRef: localRef,\n cssVarName: '--sidebar-size',\n minSize,\n maxSize,\n defaultSize: expandedSize,\n orientation: 'vertical',\n edge: 'end',\n computeNext: (client, startClient, startSize) => {\n const isRtl = getComputedStyle(localRef.current!).direction === 'rtl';\n const delta = client - startClient;\n return startSize + (isRtl ? -delta : delta);\n },\n onResize,\n onResizeStart,\n onResizeEnd: (size) => {\n onResizeEnd?.(size);\n persistenceAdapter?.save?.(size);\n },\n target: 'sidebar',\n collapsible,\n snapPoints,\n snapTolerance: snapTolerance ?? 8,\n collapseThreshold,\n requestCollapse: () => shell.setSidebarMode('collapsed'),\n requestToggle: () => shell.togglePane('sidebar'),\n }}\n >\n {handleChildren.length > 0 ? handleChildren.map((el, i) => React.cloneElement(el, { key: el.key ?? i })) : <PaneHandle />}\n </PaneResizeContext.Provider>\n ) : null;\n\n if (isOverlay) {\n const open = shell.sidebarMode !== 'collapsed';\n return (\n <Sheet.Root open={open} onOpenChange={(o) => shell.setSidebarMode(o ? 'expanded' : 'collapsed')}>\n <Sheet.Content\n side=\"start\"\n style={{ padding: 0 }}\n width={{\n initial: `${open ? (shell.sidebarMode === 'thin' ? thinSize : expandedSize) : lastOverlayWidthRef.current}px`,\n }}\n >\n <VisuallyHidden>\n <Sheet.Title>Sidebar</Sheet.Title>\n </VisuallyHidden>\n {contentChildren}\n </Sheet.Content>\n </Sheet.Root>\n );\n }\n\n return (\n <div\n {...props}\n ref={setRef}\n className={classNames('rt-ShellSidebar', className)}\n data-mode={shell.sidebarMode}\n data-peek={shell.peekTarget === 'sidebar' || undefined}\n data-presentation={resolvedPresentation}\n data-open={(isStacked && isContentVisible) || undefined}\n style={{\n ...style,\n ['--sidebar-size' as any]: `${expandedSize}px`,\n ['--sidebar-thin-size' as any]: `${thinSize}px`,\n ['--sidebar-min-size' as any]: `${minSize}px`,\n ['--sidebar-max-size' as any]: `${maxSize}px`,\n ...(shell.peekTarget === 'sidebar' && shell.sidebarMode === 'collapsed' && !isOverlay\n ? (() => {\n const strategy: 'both' | 'single' = toggleModes ?? 'both';\n const current = shell.sidebarMode as SidebarMode;\n let next: SidebarMode;\n if (strategy === 'both') {\n next = current === 'collapsed' ? 'thin' : current === 'thin' ? 'expanded' : 'collapsed';\n } else {\n const target = resolveDefaultSidebarMode();\n next = current === 'collapsed' ? target : 'collapsed';\n }\n if (next === 'thin') {\n return {\n ['--peek-sidebar-width' as any]: `${thinSize}px`,\n } as React.CSSProperties;\n }\n return {\n ['--peek-sidebar-width' as any]: `var(--sidebar-size, ${expandedSize}px)`,\n } as React.CSSProperties;\n })()\n : {}),\n }}\n >\n <div className=\"rt-ShellSidebarContent\" data-visible={isContentVisible || undefined}>\n {contentChildren}\n </div>\n {handleEl}\n </div>\n );\n },\n) as SidebarComponent;\n\nSidebar.displayName = 'Shell.Sidebar';\nSidebar.Handle = SidebarHandle;\n"],
|
|
5
|
+
"mappings": "skBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,IAAA,eAAAC,GAAAH,IAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBACvBC,EAAuB,0BACvBC,EAA+B,iCAC/BC,EAAyB,+BACzBC,EAA0C,6BAC1CC,EAAkC,6BAClCC,EAA0C,8BAE1CC,EAA4B,6BAmCrB,MAAMV,EAAUE,EAAM,WAU3B,CACE,CACE,UAAAS,EACA,aAAAC,EAAe,CAAE,QAAS,UAAW,GAAI,OAAQ,EACjD,KAAAC,EACA,YAAAC,EAAc,WACd,aAAAC,EACA,aAAAC,EAAe,IACf,QAAAC,EAAU,IACV,QAAAC,EAAU,IACV,UAAAC,EAAY,GACZ,YAAAC,EAAc,GACd,SAAAC,EACA,WAAAC,EACA,SAAAC,EACA,cAAAC,EACA,YAAAC,EACA,WAAAC,GACA,cAAAC,GACA,kBAAAC,GACA,OAAAC,EACA,YAAAC,EACA,SAAAC,GACA,MAAAC,GACA,SAAAC,EAAW,GACX,YAAAC,EACA,GAAGC,EACL,EACAC,IACG,CACH,MAAMC,KAAQ,YAAS,EACjBC,KAAuB,6BAA0B1B,CAAY,EAC7D2B,EAAYD,IAAyB,UACrCE,GAAYF,IAAyB,UACrCG,EAAWvC,EAAM,OAA8B,IAAI,EACnDwC,GAASxC,EAAM,YAClByC,GAAgC,CAC/BF,EAAS,QAAUE,EACf,OAAOP,GAAQ,WAAYA,EAAIO,CAAI,EAC9BP,IAAMA,EAAsD,QAAUO,EACjF,EACA,CAACP,CAAG,CACN,EACMQ,EAAa1C,EAAM,SAAS,QAAQ6B,EAAQ,EAC5Cc,EAAiBD,EAAW,OAAQE,GAA2B5C,EAAM,eAAe4C,CAAE,GAAKA,EAAG,OAAS,eAAa,EACpHC,EAAkBH,EAAW,OAAQE,GAA2B,EAAE5C,EAAM,eAAe4C,CAAE,GAAKA,EAAG,OAAS,gBAAc,EAGxHE,GAAY9C,EAAM,MAAM,EAC9BA,EAAM,UAAU,KACdmC,EAAM,cAAc,EAAI,EACjB,IAAM,CACXA,EAAM,cAAc,EAAK,CAC3B,GACC,CAACA,EAAOW,EAAS,CAAC,EAGrB,MAAMC,EAAa/C,EAAM,OAAO,EAAK,EACrCA,EAAM,UAAU,IAAM,CAChB+C,EAAW,UACfA,EAAW,QAAU,GACjBpC,IAAS,QAAawB,EAAM,cAAiBvB,GAC/CuB,EAAM,eAAevB,CAA0B,EAGnD,EAAG,CAAC,CAAC,EAGLZ,EAAM,UAAU,IAAM,CAChBW,IAAS,QAAawB,EAAM,cAAgBxB,GAC9CwB,EAAM,eAAexB,CAAI,CAE7B,EAAG,CAACA,EAAMwB,CAAK,CAAC,EAGhBnC,EAAM,UAAU,IAAM,CAChBW,IAAS,QACXE,IAAesB,EAAM,WAAW,CAEpC,EAAG,CAACA,EAAM,YAAaxB,EAAME,CAAY,CAAC,EAG1Cb,EAAM,UAAU,IAAM,CAChBmC,EAAM,cAAgB,WACxBhB,IAAW,EAEXC,IAAa,CAEjB,EAAG,CAACe,EAAM,YAAahB,EAAUC,CAAU,CAAC,EAG5C,MAAM4B,EAAmBb,EAAM,cAAgB,YAGzCc,EAAqBjD,EAAM,QAAQ,IAAM,CAC7C,GAAI,CAAC2B,GAAUC,EAAa,OAAOA,EACnC,MAAMsB,EAAM,2BAA2BvB,CAAM,GAY7C,MAXqC,CACnC,KAAM,IAAM,CACV,GAAI,OAAO,OAAW,IAAa,OACnC,MAAMwB,EAAI,OAAO,aAAa,QAAQD,CAAG,EACzC,OAAOC,EAAI,OAAOA,CAAC,EAAI,MACzB,EACA,KAAOC,GAAiB,CAClB,OAAO,OAAW,KACtB,OAAO,aAAa,QAAQF,EAAK,OAAOE,CAAI,CAAC,CAC/C,CACF,CAEF,EAAG,CAACzB,EAAQC,CAAW,CAAC,EAExB5B,EAAM,UAAU,IAAM,CACpB,IAAIqD,EAAU,GACd,OAAC,SAAY,CACX,GAAI,CAACpC,GAAa,CAACgC,GAAoB,MAAQZ,EAAW,OAC1D,MAAMiB,EAAS,MAAML,EAAmB,KAAK,EACzCI,GAAW,OAAOC,GAAW,UAAYf,EAAS,UACpDA,EAAS,QAAQ,MAAM,YAAY,iBAAkB,GAAGe,CAAM,IAAI,EAClEjC,IAAWiC,CAAM,EAErB,GAAG,EACI,IAAM,CACXD,EAAU,EACZ,CACF,EAAG,CAACpC,EAAWgC,EAAoB5B,EAAUgB,CAAS,CAAC,EAGvD,MAAMkB,EAAwBvD,EAAM,YAAY,IAAmB,CACjE,GAAI,OAAOY,GAAgB,SAAU,OAAOA,EAC5C,MAAM4C,EAAK5C,EACX,GAAI4C,GAAMA,EAAGrB,EAAM,iBAA+B,EAChD,OAAOqB,EAAGrB,EAAM,iBAA+B,EAGjD,MAAMsB,EAAuB,CAAC,GADf,OAAO,KAAK,aAAW,CACC,EAAE,QAAQ,EAAmB,OAAO,SAAuB,EAC5FC,EAAWD,EAAM,QAAQtB,EAAM,iBAA+B,EACpE,QAASwB,EAAID,EAAW,EAAGC,EAAIF,EAAM,OAAQE,IAAK,CAChD,MAAMC,EAAKH,EAAME,CAAC,EAClB,GAAIH,GAAMA,EAAGI,CAAE,EAAG,OAAOJ,EAAGI,CAAE,CAChC,CACA,MAAO,WACT,EAAG,CAAChD,EAAauB,EAAM,iBAAiB,CAAC,EAGnC0B,KAAiB,YAAS,EAC1BC,EAA4B9D,EAAM,YAAY,IAAmB,CACrE,MAAM+D,EAAWR,EAAsB,EACvC,OAAOQ,IAAa,QAAUA,IAAa,WAAaA,EAAW,UACrE,EAAG,CAACR,CAAqB,CAAC,EAE1BvD,EAAM,UAAU,IAAM,CACpB,GAAI,CAAC6D,EAAe,yBAA0B,OAC9C,MAAMG,EAA8BhC,GAAe,OAC7CiC,EAAWC,GAAsC,CACrD,GAAIF,IAAa,OACf,OAAIE,IAAY,YAAoB,OAChCA,IAAY,OAAe,WACxB,YAET,MAAMC,EAASL,EAA0B,EACzC,OAAII,IAAY,YAAoBC,EAChCD,IAAYC,EAAe,YACxBA,CACT,EACA,OAAAN,EAAe,yBAAyBI,CAAO,EACxC,IAAM,CACXJ,EAAe,2BAA4BO,GAASA,IAAQ,YAAc,OAASA,IAAQ,OAAS,WAAa,WAAY,CAC/H,CACF,EAAG,CAACP,EAAgB7B,EAAa8B,CAAyB,CAAC,EAE3D,MAAMO,EAAsBrE,EAAM,OAAec,CAAY,EACvDwD,GAAqBtE,EAAM,OAAoB,UAAU,EAC/DA,EAAM,UAAU,IAAM,CAChBmC,EAAM,cAAgB,cACxBmC,GAAmB,QAAUnC,EAAM,YACnCkC,EAAoB,QAAUlC,EAAM,cAAgB,OAASJ,EAAWjB,EAE5E,EAAG,CAACqB,EAAM,YAAaJ,EAAUjB,CAAY,CAAC,EAE9C,MAAMyD,EAAmBvE,EAAM,OAA0B,IAAI,EAC7DA,EAAM,UAAU,IAAM,CAGpB,GAFIW,IAAS,QACT,CAACwB,EAAM,wBACPoC,EAAiB,UAAYpC,EAAM,kBAAmB,OAC1DoC,EAAiB,QAAUpC,EAAM,kBACjC,MAAMqC,EAAOjB,EAAsB,EAC/BiB,IAASrC,EAAM,aAAaA,EAAM,eAAeqC,CAAI,CAC3D,EAAG,CAAC7D,EAAMwB,EAAM,kBAAmBA,EAAM,uBAAwBoB,EAAuBpB,EAAM,YAAaA,EAAM,cAAc,CAAC,EAEhI,MAAMsC,GACJxD,GAAa,CAACoB,GAAaF,EAAM,cAAgB,WAC/CnC,EAAA,cAAC,oBAAkB,SAAlB,CACC,MAAO,CACL,aAAcuC,EACd,WAAY,iBACZ,QAAAxB,EACA,QAAAC,EACA,YAAaF,EACb,YAAa,WACb,KAAM,MACN,YAAa,CAAC4D,EAAQC,EAAaC,IAAc,CAC/C,MAAMC,EAAQ,iBAAiBtC,EAAS,OAAQ,EAAE,YAAc,MAC1DuC,EAAQJ,EAASC,EACvB,OAAOC,GAAaC,EAAQ,CAACC,EAAQA,EACvC,EACA,SAAAzD,EACA,cAAAC,EACA,YAAc8B,GAAS,CACrB7B,IAAc6B,CAAI,EAClBH,GAAoB,OAAOG,CAAI,CACjC,EACA,OAAQ,UACR,YAAAlC,EACA,WAAAM,GACA,cAAeC,IAAiB,EAChC,kBAAAC,GACA,gBAAiB,IAAMS,EAAM,eAAe,WAAW,EACvD,cAAe,IAAMA,EAAM,WAAW,SAAS,CACjD,GAECQ,EAAe,OAAS,EAAIA,EAAe,IAAI,CAACC,EAAIe,IAAM3D,EAAM,aAAa4C,EAAI,CAAE,IAAKA,EAAG,KAAOe,CAAE,CAAC,CAAC,EAAI3D,EAAA,cAAC,iBAAW,CACzH,EACE,KAEN,GAAIqC,EAAW,CACb,MAAM0C,EAAO5C,EAAM,cAAgB,YACnC,OACEnC,EAAA,cAACE,EAAM,KAAN,CAAW,KAAM6E,EAAM,aAAe,GAAM5C,EAAM,eAAe,EAAI,WAAa,WAAW,GAC5FnC,EAAA,cAACE,EAAM,QAAN,CACC,KAAK,QACL,MAAO,CAAE,QAAS,CAAE,EACpB,MAAO,CACL,QAAS,GAAG6E,EAAQ5C,EAAM,cAAgB,OAASJ,EAAWjB,EAAgBuD,EAAoB,OAAO,IAC3G,GAEArE,EAAA,cAAC,sBACCA,EAAA,cAACE,EAAM,MAAN,KAAY,SAAO,CACtB,EACC2C,CACH,CACF,CAEJ,CAEA,OACE7C,EAAA,cAAC,OACE,GAAGiC,GACJ,IAAKO,GACL,aAAW,EAAAwC,SAAW,kBAAmBvE,CAAS,EAClD,YAAW0B,EAAM,YACjB,YAAWA,EAAM,aAAe,WAAa,OAC7C,oBAAmBC,EACnB,YAAYE,IAAaU,GAAqB,OAC9C,MAAO,CACL,GAAGlB,GACF,iBAA0B,GAAGhB,CAAY,KACzC,sBAA+B,GAAGiB,CAAQ,KAC1C,qBAA8B,GAAGhB,CAAO,KACxC,qBAA8B,GAAGC,CAAO,KACzC,GAAImB,EAAM,aAAe,WAAaA,EAAM,cAAgB,aAAe,CAACE,GACvE,IAAM,CACL,MAAM2B,EAA8BhC,GAAe,OAC7CkC,EAAU/B,EAAM,YACtB,IAAIqC,EACJ,GAAIR,IAAa,OACfQ,EAAON,IAAY,YAAc,OAASA,IAAY,OAAS,WAAa,gBACvE,CACL,MAAMC,EAASL,EAA0B,EACzCU,EAAON,IAAY,YAAcC,EAAS,WAC5C,CACA,OAAIK,IAAS,OACJ,CACJ,uBAAgC,GAAGzC,CAAQ,IAC9C,EAEK,CACJ,uBAAgC,uBAAuBjB,CAAY,KACtE,CACF,GAAG,EACH,CAAC,CACP,GAEAd,EAAA,cAAC,OAAI,UAAU,yBAAyB,eAAcgD,GAAoB,QACvEH,CACH,EACC4B,EACH,CAEJ,CACF,EAEA3E,EAAQ,YAAc,gBACtBA,EAAQ,OAAS",
|
|
6
|
+
"names": ["shell_sidebar_exports", "__export", "Sidebar", "__toCommonJS", "React", "import_classnames", "Sheet", "import_visually_hidden", "import_shell_context", "import_shell_hooks", "import_shell_resize", "import_shell_handles", "import_shell_types", "className", "presentation", "mode", "defaultMode", "onModeChange", "expandedSize", "minSize", "maxSize", "resizable", "collapsible", "onExpand", "onCollapse", "onResize", "onResizeStart", "onResizeEnd", "snapPoints", "snapTolerance", "collapseThreshold", "paneId", "persistence", "children", "style", "thinSize", "toggleModes", "props", "ref", "shell", "resolvedPresentation", "isOverlay", "isStacked", "localRef", "setRef", "node", "childArray", "handleChildren", "el", "contentChildren", "sidebarId", "didInitRef", "isContentVisible", "persistenceAdapter", "key", "v", "size", "mounted", "loaded", "resolveResponsiveMode", "dm", "order", "startIdx", "i", "bp", "shellForToggle", "resolveDefaultSidebarMode", "resolved", "strategy", "compute", "current", "target", "cur", "lastOverlayWidthRef", "lastOverlayModeRef", "lastSidebarBpRef", "next", "handleEl", "client", "startClient", "startSize", "isRtl", "delta", "open", "classNames"]
|
|
7
|
+
}
|
|
@@ -28,6 +28,8 @@ export { ToggleButtonSchema, parseToggleButtonProps } from './toggle-button.sche
|
|
|
28
28
|
export type { ToggleButtonProps } from './toggle-button.schema.js';
|
|
29
29
|
export { ToggleIconButtonSchema, parseToggleIconButtonProps } from './toggle-icon-button.schema.js';
|
|
30
30
|
export type { ToggleIconButtonProps } from './toggle-icon-button.schema.js';
|
|
31
|
+
export { ShellRootSchema, ShellHeaderSchema, ShellRailSchema, ShellPanelSchema, ShellSidebarSchema, ShellContentSchema, ShellInspectorSchema, ShellBottomSchema, ShellTriggerSchema, ShellHandleSchema, parseShellRootProps, parseShellHeaderProps, parseShellRailProps, parseShellPanelProps, parseShellSidebarProps, parseShellContentProps, parseShellInspectorProps, parseShellBottomProps, parseShellTriggerProps, parseShellHandleProps, } from './shell.schema.js';
|
|
32
|
+
export type { ShellRootProps, ShellHeaderProps, ShellRailProps, ShellPanelProps, ShellSidebarProps, ShellContentProps, ShellInspectorProps, ShellBottomProps, ShellTriggerProps, ShellHandleProps, PaneMode, SidebarMode, PresentationValue, Breakpoint, PaneTarget, TriggerAction, ResponsiveMode, ResponsiveSidebarMode, ResponsivePresentation, PaneSizePersistence, } from './shell.schema.js';
|
|
31
33
|
/**
|
|
32
34
|
* Generic parseProps helper for development-time validation
|
|
33
35
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/schemas/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAGH,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACjF,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/D,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACpE,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACjF,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/D,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACvF,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAGnE,OAAO,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AACpG,YAAY,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/schemas/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAGH,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACjF,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/D,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACpE,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACjF,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/D,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACvF,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAGnE,OAAO,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AACpG,YAAY,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAG5E,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,sBAAsB,EACtB,wBAAwB,EACxB,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,QAAQ,EACR,WAAW,EACX,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,aAAa,EACb,cAAc,EACd,qBAAqB,EACrB,sBAAsB,EACtB,mBAAmB,GACpB,MAAM,mBAAmB,CAAC;AAE3B;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,GAAG,CAAC,CAKvE;AAED,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var S=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var g=(r,o)=>{for(var s in o)S(r,s,{get:o[s],enumerable:!0})},u=(r,o,s,m)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of c(o))!i.call(r,t)&&t!==s&&S(r,t,{get:()=>o[t],enumerable:!(m=P(o,t))||m.enumerable});return r};var B=r=>u(S({},"__esModule",{value:!0}),r);var f={};g(f,{BaseButtonSchema:()=>l.BaseButtonSchema,ButtonSchema:()=>p.ButtonSchema,IconButtonSchema:()=>a.IconButtonSchema,ShellBottomSchema:()=>e.ShellBottomSchema,ShellContentSchema:()=>e.ShellContentSchema,ShellHandleSchema:()=>e.ShellHandleSchema,ShellHeaderSchema:()=>e.ShellHeaderSchema,ShellInspectorSchema:()=>e.ShellInspectorSchema,ShellPanelSchema:()=>e.ShellPanelSchema,ShellRailSchema:()=>e.ShellRailSchema,ShellRootSchema:()=>e.ShellRootSchema,ShellSidebarSchema:()=>e.ShellSidebarSchema,ShellTriggerSchema:()=>e.ShellTriggerSchema,ToggleButtonSchema:()=>n.ToggleButtonSchema,ToggleIconButtonSchema:()=>h.ToggleIconButtonSchema,parseBaseButtonProps:()=>l.parseBaseButtonProps,parseButtonProps:()=>p.parseButtonProps,parseIconButtonProps:()=>a.parseIconButtonProps,parseProps:()=>d,parseShellBottomProps:()=>e.parseShellBottomProps,parseShellContentProps:()=>e.parseShellContentProps,parseShellHandleProps:()=>e.parseShellHandleProps,parseShellHeaderProps:()=>e.parseShellHeaderProps,parseShellInspectorProps:()=>e.parseShellInspectorProps,parseShellPanelProps:()=>e.parseShellPanelProps,parseShellRailProps:()=>e.parseShellRailProps,parseShellRootProps:()=>e.parseShellRootProps,parseShellSidebarProps:()=>e.parseShellSidebarProps,parseShellTriggerProps:()=>e.parseShellTriggerProps,parseToggleButtonProps:()=>n.parseToggleButtonProps,parseToggleIconButtonProps:()=>h.parseToggleIconButtonProps});module.exports=B(f);var l=require("./base-button.schema.js"),p=require("./button.schema.js"),a=require("./icon-button.schema.js"),n=require("./toggle-button.schema.js"),h=require("./toggle-icon-button.schema.js"),e=require("./shell.schema.js"),x=require("zod");function d(r,o){return o}
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/schemas/index.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Button component schemas - Single source of truth for all button-related components\n *\n * This module exports Zod schemas for all button components, providing:\n * - Type-safe prop validation\n * - Machine-readable JSON schema generation\n * - Development-time prop validation\n * - Consistent API across all button variants\n *\n * @example\n * ```tsx\n * import { ButtonSchema, parseButtonProps } from './schemas';\n *\n * // Type-safe prop validation\n * const props = ButtonSchema.parse({ variant: 'solid', size: '2' });\n *\n * // Development-time validation\n * const validatedProps = parseButtonProps(userProps);\n * ```\n */\n\n// Base schemas\nexport { BaseButtonSchema, parseBaseButtonProps } from './base-button.schema.js';\nexport type { BaseButtonProps } from './base-button.schema.js';\n\n// Button schemas\nexport { ButtonSchema, parseButtonProps } from './button.schema.js';\nexport type { ButtonProps } from './button.schema.js';\n\n// IconButton schemas\nexport { IconButtonSchema, parseIconButtonProps } from './icon-button.schema.js';\nexport type { IconButtonProps } from './icon-button.schema.js';\n\n// ToggleButton schemas\nexport { ToggleButtonSchema, parseToggleButtonProps } from './toggle-button.schema.js';\nexport type { ToggleButtonProps } from './toggle-button.schema.js';\n\n// ToggleIconButton schemas\nexport { ToggleIconButtonSchema, parseToggleIconButtonProps } from './toggle-icon-button.schema.js';\nexport type { ToggleIconButtonProps } from './toggle-icon-button.schema.js';\n\n/**\n * Generic parseProps helper for development-time validation\n *\n * This function provides a type-safe way to validate props in development mode.\n * It should only be used in development as it adds runtime overhead.\n *\n * @param schema - Zod schema to validate against\n * @param props - Props to validate\n * @returns Validated and normalized props\n *\n * @example\n * ```tsx\n * import { parseProps } from './schemas';\n * import { ButtonSchema } from './schemas';\n *\n * // In development, this will validate props and show helpful errors\n * const validatedProps = parseProps(ButtonSchema, userProps);\n * ```\n */\nexport function parseProps<T>(schema: z.ZodSchema<T>, props: unknown): T {\n if (process.env.NODE_ENV === 'development') {\n return schema.parse(props);\n }\n return props as T;\n}\n\nimport { z } from 'zod';\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,
|
|
6
|
-
"names": ["schemas_exports", "__export", "parseProps", "__toCommonJS", "import_base_button_schema", "import_button_schema", "import_icon_button_schema", "import_toggle_button_schema", "import_toggle_icon_button_schema", "import_zod", "schema", "props"]
|
|
4
|
+
"sourcesContent": ["/**\n * Button component schemas - Single source of truth for all button-related components\n *\n * This module exports Zod schemas for all button components, providing:\n * - Type-safe prop validation\n * - Machine-readable JSON schema generation\n * - Development-time prop validation\n * - Consistent API across all button variants\n *\n * @example\n * ```tsx\n * import { ButtonSchema, parseButtonProps } from './schemas';\n *\n * // Type-safe prop validation\n * const props = ButtonSchema.parse({ variant: 'solid', size: '2' });\n *\n * // Development-time validation\n * const validatedProps = parseButtonProps(userProps);\n * ```\n */\n\n// Base schemas\nexport { BaseButtonSchema, parseBaseButtonProps } from './base-button.schema.js';\nexport type { BaseButtonProps } from './base-button.schema.js';\n\n// Button schemas\nexport { ButtonSchema, parseButtonProps } from './button.schema.js';\nexport type { ButtonProps } from './button.schema.js';\n\n// IconButton schemas\nexport { IconButtonSchema, parseIconButtonProps } from './icon-button.schema.js';\nexport type { IconButtonProps } from './icon-button.schema.js';\n\n// ToggleButton schemas\nexport { ToggleButtonSchema, parseToggleButtonProps } from './toggle-button.schema.js';\nexport type { ToggleButtonProps } from './toggle-button.schema.js';\n\n// ToggleIconButton schemas\nexport { ToggleIconButtonSchema, parseToggleIconButtonProps } from './toggle-icon-button.schema.js';\nexport type { ToggleIconButtonProps } from './toggle-icon-button.schema.js';\n\n// Shell schemas\nexport {\n ShellRootSchema,\n ShellHeaderSchema,\n ShellRailSchema,\n ShellPanelSchema,\n ShellSidebarSchema,\n ShellContentSchema,\n ShellInspectorSchema,\n ShellBottomSchema,\n ShellTriggerSchema,\n ShellHandleSchema,\n parseShellRootProps,\n parseShellHeaderProps,\n parseShellRailProps,\n parseShellPanelProps,\n parseShellSidebarProps,\n parseShellContentProps,\n parseShellInspectorProps,\n parseShellBottomProps,\n parseShellTriggerProps,\n parseShellHandleProps,\n} from './shell.schema.js';\nexport type {\n ShellRootProps,\n ShellHeaderProps,\n ShellRailProps,\n ShellPanelProps,\n ShellSidebarProps,\n ShellContentProps,\n ShellInspectorProps,\n ShellBottomProps,\n ShellTriggerProps,\n ShellHandleProps,\n PaneMode,\n SidebarMode,\n PresentationValue,\n Breakpoint,\n PaneTarget,\n TriggerAction,\n ResponsiveMode,\n ResponsiveSidebarMode,\n ResponsivePresentation,\n PaneSizePersistence,\n} from './shell.schema.js';\n\n/**\n * Generic parseProps helper for development-time validation\n *\n * This function provides a type-safe way to validate props in development mode.\n * It should only be used in development as it adds runtime overhead.\n *\n * @param schema - Zod schema to validate against\n * @param props - Props to validate\n * @returns Validated and normalized props\n *\n * @example\n * ```tsx\n * import { parseProps } from './schemas';\n * import { ButtonSchema } from './schemas';\n *\n * // In development, this will validate props and show helpful errors\n * const validatedProps = parseProps(ButtonSchema, userProps);\n * ```\n */\nexport function parseProps<T>(schema: z.ZodSchema<T>, props: unknown): T {\n if (process.env.NODE_ENV === 'development') {\n return schema.parse(props);\n }\n return props as T;\n}\n\nimport { z } from 'zod';\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,8wBAAAE,EAAA,unBAAAC,EAAAH,GAsBA,IAAAI,EAAuD,mCAIvDC,EAA+C,8BAI/CC,EAAuD,mCAIvDC,EAA2D,qCAI3DC,EAAmE,0CAInEC,EAqBO,6BAkDPC,EAAkB,eAPX,SAASR,EAAcS,EAAwBC,EAAmB,CAIvE,OAAOA,CACT",
|
|
6
|
+
"names": ["schemas_exports", "__export", "parseProps", "__toCommonJS", "import_base_button_schema", "import_button_schema", "import_icon_button_schema", "import_toggle_button_schema", "import_toggle_icon_button_schema", "import_shell_schema", "import_zod", "schema", "props"]
|
|
7
7
|
}
|