@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 @@
|
|
|
1
|
+
{"version":3,"file":"shell.schema.d.ts","sourceRoot":"","sources":["../../../../src/components/schemas/shell.schema.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{z as e}from"zod";const o=e.enum(["expanded","collapsed"]).describe("Pane state mode"),t=e.enum(["collapsed","thin","expanded"]).describe("Sidebar state mode"),r=e.enum(["fixed","overlay","stacked"]).describe("Presentation mode"),u=e.enum(["initial","xs","sm","md","lg","xl"]).describe("Responsive breakpoint"),s=e.enum(["left","rail","panel","sidebar","inspector","bottom"]).describe("Pane target"),p=e.enum(["toggle","expand","collapse"]).describe("Trigger action"),a=e.union([o,e.object({initial:o.optional(),xs:o.optional(),sm:o.optional(),md:o.optional(),lg:o.optional(),xl:o.optional()})]).describe("Responsive pane mode configuration"),c=e.union([t,e.object({initial:t.optional(),xs:t.optional(),sm:t.optional(),md:t.optional(),lg:t.optional(),xl:t.optional()})]).describe("Responsive sidebar mode configuration"),i=e.union([r,e.object({initial:r.optional(),xs:r.optional(),sm:r.optional(),md:r.optional(),lg:r.optional(),xl:r.optional()})]).describe("Responsive presentation configuration"),d=e.object({load:e.function().returns(e.union([e.number(),e.promise(e.number()),e.undefined()])).optional(),save:e.function().args(e.number()).returns(e.union([e.void(),e.promise(e.void())])).optional()}).describe("Size persistence adapter"),l=e.object({presentation:i.optional(),mode:o.optional(),defaultMode:a.optional(),onModeChange:e.function().args(o).returns(e.void()).optional(),expandedSize:e.number().optional(),minSize:e.number().optional(),maxSize:e.number().optional(),resizable:e.boolean().optional(),collapsible:e.boolean().optional(),onExpand:e.function().returns(e.void()).optional(),onCollapse:e.function().returns(e.void()).optional(),onResize:e.function().args(e.number()).returns(e.void()).optional(),resizer:e.any().optional(),onResizeStart:e.function().args(e.number()).returns(e.void()).optional(),onResizeEnd:e.function().args(e.number()).returns(e.void()).optional(),snapPoints:e.array(e.number()).optional(),snapTolerance:e.number().optional(),collapseThreshold:e.number().optional(),paneId:e.string().optional(),persistence:d.optional(),className:e.string().optional(),style:e.record(e.string(),e.union([e.string(),e.number()])).optional(),children:e.any().optional()}).strict(),m=e.object({height:e.union([e.literal("full"),e.literal("auto"),e.string(),e.number()]).default("full").describe("Height of the shell container"),className:e.string().optional().describe("Additional CSS class name"),style:e.record(e.string(),e.union([e.string(),e.number()])).optional().describe("Inline styles"),children:e.any().optional().describe("Shell components")}).strict(),b=e.object({height:e.union([e.string(),e.number()]).default(64).describe("Height of the header"),className:e.string().optional().describe("Additional CSS class name"),style:e.record(e.string(),e.union([e.string(),e.number()])).optional().describe("Inline styles"),children:e.any().optional().describe("Header content")}).strict(),S=e.object({presentation:i.optional(),mode:o.optional(),defaultMode:a.optional(),onModeChange:e.function().args(o).returns(e.void()).optional(),expandedSize:e.number().default(64).describe("Default width in pixels"),collapsible:e.boolean().optional(),onExpand:e.function().returns(e.void()).optional(),onCollapse:e.function().returns(e.void()).optional(),className:e.string().optional().describe("Additional CSS class name"),style:e.record(e.string(),e.union([e.string(),e.number()])).optional().describe("Inline styles"),children:e.any().optional().describe("Rail content")}).strict(),f=l.extend({expandedSize:e.number().default(288).describe("Default width in pixels"),minSize:e.number().default(200).describe("Minimum width when resizing"),maxSize:e.number().default(800).describe("Maximum width when resizing"),resizable:e.boolean().default(!1).describe("Whether the panel can be resized"),collapsible:e.boolean().default(!0).describe("Whether the panel can be collapsed via resize handle")}).strict(),g=l.extend({mode:t.optional(),defaultMode:c.default("expanded").describe("Initial sidebar mode"),expandedSize:e.number().default(288).describe("Default width in pixels"),minSize:e.number().default(200).describe("Minimum width when resizing"),maxSize:e.number().default(400).describe("Maximum width when resizing"),thinSize:e.number().default(64).describe("Width in thin mode"),toggleModes:e.enum(["both","single"]).optional().describe("Available modes in toggle sequence"),resizable:e.boolean().default(!1).describe("Whether the sidebar can be resized"),collapsible:e.boolean().default(!0).describe("Whether the sidebar can be collapsed via resize handle")}).strict(),x=e.object({className:e.string().optional().describe("Additional CSS class name"),style:e.record(e.string(),e.union([e.string(),e.number()])).optional().describe("Inline styles"),children:e.any().optional().describe("Main content")}).strict(),P=l.extend({presentation:i.default({initial:"overlay",lg:"fixed"}).describe("Presentation mode"),expandedSize:e.number().default(320).describe("Default width in pixels"),minSize:e.number().default(200).describe("Minimum width when resizing"),maxSize:e.number().default(500).describe("Maximum width when resizing"),resizable:e.boolean().default(!1).describe("Whether the inspector can be resized"),collapsible:e.boolean().default(!0).describe("Whether the inspector can be collapsed via resize handle")}).strict(),y=l.extend({presentation:i.default("fixed").describe("Presentation mode"),expandedSize:e.number().default(200).describe("Default height in pixels"),minSize:e.number().default(100).describe("Minimum height when resizing"),maxSize:e.number().default(400).describe("Maximum height when resizing"),resizable:e.boolean().default(!1).describe("Whether the bottom panel can be resized"),collapsible:e.boolean().default(!0).describe("Whether the bottom panel can be collapsed via resize handle")}).strict(),z=e.object({target:s.describe("Which pane to control"),action:p.default("toggle").describe("Action to perform"),peekOnHover:e.boolean().default(!1).describe("Whether to show peek preview on hover when collapsed"),className:e.string().optional().describe("Additional CSS class name"),style:e.record(e.string(),e.union([e.string(),e.number()])).optional().describe("Inline styles"),children:e.any().optional().describe("Trigger content"),onClick:e.function().optional().describe("Click handler"),onMouseEnter:e.function().optional().describe("Mouse enter handler"),onMouseLeave:e.function().optional().describe("Mouse leave handler"),"aria-label":e.string().optional().describe("ARIA label for accessibility"),"aria-labelledby":e.string().optional().describe("ARIA labelled by reference"),"aria-describedby":e.string().optional().describe("ARIA described by reference")}).strict(),v=e.object({className:e.string().optional().describe("Additional CSS class name"),style:e.record(e.string(),e.union([e.string(),e.number()])).optional().describe("Inline styles"),children:e.any().optional().describe("Handle content")}).strict();function R(n){return n}function w(n){return n}function M(n){return n}function N(n){return n}function E(n){return n}function k(n){return n}function C(n){return n}function H(n){return n}function I(n){return n}function A(n){return n}export{y as ShellBottomSchema,x as ShellContentSchema,v as ShellHandleSchema,b as ShellHeaderSchema,P as ShellInspectorSchema,f as ShellPanelSchema,S as ShellRailSchema,m as ShellRootSchema,g as ShellSidebarSchema,z as ShellTriggerSchema,H as parseShellBottomProps,k as parseShellContentProps,A as parseShellHandleProps,w as parseShellHeaderProps,C as parseShellInspectorProps,N as parseShellPanelProps,M as parseShellRailProps,R as parseShellRootProps,E as parseShellSidebarProps,I as parseShellTriggerProps};
|
|
2
|
+
//# sourceMappingURL=shell.schema.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/schemas/shell.schema.ts"],
|
|
4
|
+
"sourcesContent": ["import { z } from 'zod';\n\n/**\n * Shell Zod schema - Single source of truth for Shell component props\n *\n * The Shell component is a layout engine that provides structural patterns for building\n * application interfaces. It manages layout state, composition rules, and responsive\n * behavior across seven core slots.\n *\n * @example\n * ```tsx\n * // Basic shell validation\n * const props = ShellRootSchema.parse({ height: 'full' });\n *\n * // Shell with responsive sidebar\n * const sidebarProps = ShellSidebarSchema.parse({\n * defaultMode: { initial: 'collapsed', md: 'expanded' },\n * presentation: { initial: 'overlay', lg: 'fixed' }\n * });\n * ```\n */\n\n// Common types\nconst PaneModeSchema = z.enum(['expanded', 'collapsed']).describe('Pane state mode');\nconst SidebarModeSchema = z.enum(['collapsed', 'thin', 'expanded']).describe('Sidebar state mode');\nconst PresentationValueSchema = z\n .enum(['fixed', 'overlay', 'stacked'])\n .describe('Presentation mode');\nconst BreakpointSchema = z\n .enum(['initial', 'xs', 'sm', 'md', 'lg', 'xl'])\n .describe('Responsive breakpoint');\nconst PaneTargetSchema = z\n .enum(['left', 'rail', 'panel', 'sidebar', 'inspector', 'bottom'])\n .describe('Pane target');\nconst TriggerActionSchema = z.enum(['toggle', 'expand', 'collapse']).describe('Trigger action');\n\n// Responsive schemas\nconst ResponsiveModeSchema = z\n .union([\n PaneModeSchema,\n z.object({\n initial: PaneModeSchema.optional(),\n xs: PaneModeSchema.optional(),\n sm: PaneModeSchema.optional(),\n md: PaneModeSchema.optional(),\n lg: PaneModeSchema.optional(),\n xl: PaneModeSchema.optional(),\n }),\n ])\n .describe('Responsive pane mode configuration');\n\nconst ResponsiveSidebarModeSchema = z\n .union([\n SidebarModeSchema,\n z.object({\n initial: SidebarModeSchema.optional(),\n xs: SidebarModeSchema.optional(),\n sm: SidebarModeSchema.optional(),\n md: SidebarModeSchema.optional(),\n lg: SidebarModeSchema.optional(),\n xl: SidebarModeSchema.optional(),\n }),\n ])\n .describe('Responsive sidebar mode configuration');\n\nconst ResponsivePresentationSchema = z\n .union([\n PresentationValueSchema,\n z.object({\n initial: PresentationValueSchema.optional(),\n xs: PresentationValueSchema.optional(),\n sm: PresentationValueSchema.optional(),\n md: PresentationValueSchema.optional(),\n lg: PresentationValueSchema.optional(),\n xl: PresentationValueSchema.optional(),\n }),\n ])\n .describe('Responsive presentation configuration');\n\n// Size persistence adapter\nconst PaneSizePersistenceSchema = z\n .object({\n load: z\n .function()\n .returns(z.union([z.number(), z.promise(z.number()), z.undefined()]))\n .optional(),\n save: z\n .function()\n .args(z.number())\n .returns(z.union([z.void(), z.promise(z.void())]))\n .optional(),\n })\n .describe('Size persistence adapter');\n\n// Common pane props\nconst PanePropsSchema = z\n .object({\n presentation: ResponsivePresentationSchema.optional(),\n mode: PaneModeSchema.optional(),\n defaultMode: ResponsiveModeSchema.optional(),\n onModeChange: z.function().args(PaneModeSchema).returns(z.void()).optional(),\n expandedSize: z.number().optional(),\n minSize: z.number().optional(),\n maxSize: z.number().optional(),\n resizable: z.boolean().optional(),\n collapsible: z.boolean().optional(),\n onExpand: z.function().returns(z.void()).optional(),\n onCollapse: z.function().returns(z.void()).optional(),\n onResize: z.function().args(z.number()).returns(z.void()).optional(),\n resizer: z.any().optional(),\n onResizeStart: z.function().args(z.number()).returns(z.void()).optional(),\n onResizeEnd: z.function().args(z.number()).returns(z.void()).optional(),\n snapPoints: z.array(z.number()).optional(),\n snapTolerance: z.number().optional(),\n collapseThreshold: z.number().optional(),\n paneId: z.string().optional(),\n persistence: PaneSizePersistenceSchema.optional(),\n className: z.string().optional(),\n style: z.record(z.string(), z.union([z.string(), z.number()])).optional(),\n children: z.any().optional(),\n })\n .strict();\n\n/**\n * Shell.Root component schema\n */\nexport const ShellRootSchema = z\n .object({\n height: z\n .union([z.literal('full'), z.literal('auto'), z.string(), z.number()])\n .default('full')\n .describe('Height of the shell container'),\n className: z.string().optional().describe('Additional CSS class name'),\n style: z\n .record(z.string(), z.union([z.string(), z.number()]))\n .optional()\n .describe('Inline styles'),\n children: z.any().optional().describe('Shell components'),\n })\n .strict();\n\n/**\n * Shell.Header component schema\n */\nexport const ShellHeaderSchema = z\n .object({\n height: z.union([z.string(), z.number()]).default(64).describe('Height of the header'),\n className: z.string().optional().describe('Additional CSS class name'),\n style: z\n .record(z.string(), z.union([z.string(), z.number()]))\n .optional()\n .describe('Inline styles'),\n children: z.any().optional().describe('Header content'),\n })\n .strict();\n\n/**\n * Shell.Rail component schema\n */\nexport const ShellRailSchema = z\n .object({\n presentation: ResponsivePresentationSchema.optional(),\n mode: PaneModeSchema.optional(),\n defaultMode: ResponsiveModeSchema.optional(),\n onModeChange: z.function().args(PaneModeSchema).returns(z.void()).optional(),\n expandedSize: z.number().default(64).describe('Default width in pixels'),\n collapsible: z.boolean().optional(),\n onExpand: z.function().returns(z.void()).optional(),\n onCollapse: z.function().returns(z.void()).optional(),\n className: z.string().optional().describe('Additional CSS class name'),\n style: z\n .record(z.string(), z.union([z.string(), z.number()]))\n .optional()\n .describe('Inline styles'),\n children: z.any().optional().describe('Rail content'),\n })\n .strict();\n\n/**\n * Shell.Panel component schema\n */\nexport const ShellPanelSchema = PanePropsSchema.extend({\n expandedSize: z.number().default(288).describe('Default width in pixels'),\n minSize: z.number().default(200).describe('Minimum width when resizing'),\n maxSize: z.number().default(800).describe('Maximum width when resizing'),\n resizable: z.boolean().default(false).describe('Whether the panel can be resized'),\n collapsible: z\n .boolean()\n .default(true)\n .describe('Whether the panel can be collapsed via resize handle'),\n}).strict();\n\n/**\n * Shell.Sidebar component schema\n */\nexport const ShellSidebarSchema = PanePropsSchema.extend({\n mode: SidebarModeSchema.optional(),\n defaultMode: ResponsiveSidebarModeSchema.default('expanded').describe('Initial sidebar mode'),\n expandedSize: z.number().default(288).describe('Default width in pixels'),\n minSize: z.number().default(200).describe('Minimum width when resizing'),\n maxSize: z.number().default(400).describe('Maximum width when resizing'),\n thinSize: z.number().default(64).describe('Width in thin mode'),\n toggleModes: z.enum(['both', 'single']).optional().describe('Available modes in toggle sequence'),\n resizable: z.boolean().default(false).describe('Whether the sidebar can be resized'),\n collapsible: z\n .boolean()\n .default(true)\n .describe('Whether the sidebar can be collapsed via resize handle'),\n}).strict();\n\n/**\n * Shell.Content component schema\n */\nexport const ShellContentSchema = z\n .object({\n className: z.string().optional().describe('Additional CSS class name'),\n style: z\n .record(z.string(), z.union([z.string(), z.number()]))\n .optional()\n .describe('Inline styles'),\n children: z.any().optional().describe('Main content'),\n })\n .strict();\n\n/**\n * Shell.Inspector component schema\n */\nexport const ShellInspectorSchema = PanePropsSchema.extend({\n presentation: ResponsivePresentationSchema.default({ initial: 'overlay', lg: 'fixed' }).describe(\n 'Presentation mode',\n ),\n expandedSize: z.number().default(320).describe('Default width in pixels'),\n minSize: z.number().default(200).describe('Minimum width when resizing'),\n maxSize: z.number().default(500).describe('Maximum width when resizing'),\n resizable: z.boolean().default(false).describe('Whether the inspector can be resized'),\n collapsible: z\n .boolean()\n .default(true)\n .describe('Whether the inspector can be collapsed via resize handle'),\n}).strict();\n\n/**\n * Shell.Bottom component schema\n */\nexport const ShellBottomSchema = PanePropsSchema.extend({\n presentation: ResponsivePresentationSchema.default('fixed').describe('Presentation mode'),\n expandedSize: z.number().default(200).describe('Default height in pixels'),\n minSize: z.number().default(100).describe('Minimum height when resizing'),\n maxSize: z.number().default(400).describe('Maximum height when resizing'),\n resizable: z.boolean().default(false).describe('Whether the bottom panel can be resized'),\n collapsible: z\n .boolean()\n .default(true)\n .describe('Whether the bottom panel can be collapsed via resize handle'),\n}).strict();\n\n/**\n * Shell.Trigger component schema\n */\nexport const ShellTriggerSchema = z\n .object({\n target: PaneTargetSchema.describe('Which pane to control'),\n action: TriggerActionSchema.default('toggle').describe('Action to perform'),\n peekOnHover: z\n .boolean()\n .default(false)\n .describe('Whether to show peek preview on hover when collapsed'),\n className: z.string().optional().describe('Additional CSS class name'),\n style: z\n .record(z.string(), z.union([z.string(), z.number()]))\n .optional()\n .describe('Inline styles'),\n children: z.any().optional().describe('Trigger content'),\n onClick: z.function().optional().describe('Click handler'),\n onMouseEnter: z.function().optional().describe('Mouse enter handler'),\n onMouseLeave: z.function().optional().describe('Mouse leave handler'),\n 'aria-label': z.string().optional().describe('ARIA label for accessibility'),\n 'aria-labelledby': z.string().optional().describe('ARIA labelled by reference'),\n 'aria-describedby': z.string().optional().describe('ARIA described by reference'),\n })\n .strict();\n\n/**\n * Shell.Handle component schema (for resize handles)\n */\nexport const ShellHandleSchema = z\n .object({\n className: z.string().optional().describe('Additional CSS class name'),\n style: z\n .record(z.string(), z.union([z.string(), z.number()]))\n .optional()\n .describe('Inline styles'),\n children: z.any().optional().describe('Handle content'),\n })\n .strict();\n\n// Type exports\nexport type ShellRootProps = z.infer<typeof ShellRootSchema>;\nexport type ShellHeaderProps = z.infer<typeof ShellHeaderSchema>;\nexport type ShellRailProps = z.infer<typeof ShellRailSchema>;\nexport type ShellPanelProps = z.infer<typeof ShellPanelSchema>;\nexport type ShellSidebarProps = z.infer<typeof ShellSidebarSchema>;\nexport type ShellContentProps = z.infer<typeof ShellContentSchema>;\nexport type ShellInspectorProps = z.infer<typeof ShellInspectorSchema>;\nexport type ShellBottomProps = z.infer<typeof ShellBottomSchema>;\nexport type ShellTriggerProps = z.infer<typeof ShellTriggerSchema>;\nexport type ShellHandleProps = z.infer<typeof ShellHandleSchema>;\n\n// Common type exports\nexport type PaneMode = z.infer<typeof PaneModeSchema>;\nexport type SidebarMode = z.infer<typeof SidebarModeSchema>;\nexport type PresentationValue = z.infer<typeof PresentationValueSchema>;\nexport type Breakpoint = z.infer<typeof BreakpointSchema>;\nexport type PaneTarget = z.infer<typeof PaneTargetSchema>;\nexport type TriggerAction = z.infer<typeof TriggerActionSchema>;\nexport type ResponsiveMode = z.infer<typeof ResponsiveModeSchema>;\nexport type ResponsiveSidebarMode = z.infer<typeof ResponsiveSidebarModeSchema>;\nexport type ResponsivePresentation = z.infer<typeof ResponsivePresentationSchema>;\nexport type PaneSizePersistence = z.infer<typeof PaneSizePersistenceSchema>;\n\n/**\n * Development-only helper to validate and normalize Shell props\n * This function should only be used in development mode\n *\n * @param props - Props to validate and normalize\n * @returns Validated and normalized props\n *\n * @example\n * ```tsx\n * // In development, this will validate props and show helpful errors\n * const validatedProps = parseShellRootProps({ height: 'invalid' });\n * // Throws validation errors for invalid values\n * ```\n */\nexport function parseShellRootProps(props: unknown): ShellRootProps {\n if (process.env.NODE_ENV === 'development') {\n return ShellRootSchema.parse(props);\n }\n return props as ShellRootProps;\n}\n\nexport function parseShellHeaderProps(props: unknown): ShellHeaderProps {\n if (process.env.NODE_ENV === 'development') {\n return ShellHeaderSchema.parse(props);\n }\n return props as ShellHeaderProps;\n}\n\nexport function parseShellRailProps(props: unknown): ShellRailProps {\n if (process.env.NODE_ENV === 'development') {\n return ShellRailSchema.parse(props);\n }\n return props as ShellRailProps;\n}\n\nexport function parseShellPanelProps(props: unknown): ShellPanelProps {\n if (process.env.NODE_ENV === 'development') {\n return ShellPanelSchema.parse(props);\n }\n return props as ShellPanelProps;\n}\n\nexport function parseShellSidebarProps(props: unknown): ShellSidebarProps {\n if (process.env.NODE_ENV === 'development') {\n return ShellSidebarSchema.parse(props);\n }\n return props as ShellSidebarProps;\n}\n\nexport function parseShellContentProps(props: unknown): ShellContentProps {\n if (process.env.NODE_ENV === 'development') {\n return ShellContentSchema.parse(props);\n }\n return props as ShellContentProps;\n}\n\nexport function parseShellInspectorProps(props: unknown): ShellInspectorProps {\n if (process.env.NODE_ENV === 'development') {\n return ShellInspectorSchema.parse(props);\n }\n return props as ShellInspectorProps;\n}\n\nexport function parseShellBottomProps(props: unknown): ShellBottomProps {\n if (process.env.NODE_ENV === 'development') {\n return ShellBottomSchema.parse(props);\n }\n return props as ShellBottomProps;\n}\n\nexport function parseShellTriggerProps(props: unknown): ShellTriggerProps {\n if (process.env.NODE_ENV === 'development') {\n return ShellTriggerSchema.parse(props);\n }\n return props as ShellTriggerProps;\n}\n\nexport function parseShellHandleProps(props: unknown): ShellHandleProps {\n if (process.env.NODE_ENV === 'development') {\n return ShellHandleSchema.parse(props);\n }\n return props as ShellHandleProps;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["z", "PaneModeSchema", "SidebarModeSchema", "PresentationValueSchema", "BreakpointSchema", "PaneTargetSchema", "TriggerActionSchema", "ResponsiveModeSchema", "ResponsiveSidebarModeSchema", "ResponsivePresentationSchema", "PaneSizePersistenceSchema", "PanePropsSchema", "ShellRootSchema", "ShellHeaderSchema", "ShellRailSchema", "ShellPanelSchema", "ShellSidebarSchema", "ShellContentSchema", "ShellInspectorSchema", "ShellBottomSchema", "ShellTriggerSchema", "ShellHandleSchema", "parseShellRootProps", "props", "parseShellHeaderProps", "parseShellRailProps", "parseShellPanelProps", "parseShellSidebarProps", "parseShellContentProps", "parseShellInspectorProps", "parseShellBottomProps", "parseShellTriggerProps", "parseShellHandleProps"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { Breakpoint, PresentationValue, SidebarMode, PaneMode, PaneTarget } from './shell.types.js';
|
|
3
|
+
export interface ShellContextValue {
|
|
4
|
+
leftMode: PaneMode;
|
|
5
|
+
setLeftMode: (mode: PaneMode) => void;
|
|
6
|
+
panelMode: PaneMode;
|
|
7
|
+
setPanelMode: (mode: PaneMode) => void;
|
|
8
|
+
sidebarMode: SidebarMode;
|
|
9
|
+
setSidebarMode: (mode: SidebarMode) => void;
|
|
10
|
+
inspectorMode: PaneMode;
|
|
11
|
+
setInspectorMode: (mode: PaneMode) => void;
|
|
12
|
+
bottomMode: PaneMode;
|
|
13
|
+
setBottomMode: (mode: PaneMode) => void;
|
|
14
|
+
peekTarget: PaneTarget | null;
|
|
15
|
+
setPeekTarget: (target: PaneTarget | null) => void;
|
|
16
|
+
peekPane: (target: PaneTarget) => void;
|
|
17
|
+
clearPeek: () => void;
|
|
18
|
+
hasLeft: boolean;
|
|
19
|
+
setHasLeft: (has: boolean) => void;
|
|
20
|
+
hasSidebar: boolean;
|
|
21
|
+
setHasSidebar: (has: boolean) => void;
|
|
22
|
+
currentBreakpoint: Breakpoint;
|
|
23
|
+
currentBreakpointReady: boolean;
|
|
24
|
+
leftResolvedPresentation?: PresentationValue;
|
|
25
|
+
togglePane: (target: PaneTarget) => void;
|
|
26
|
+
expandPane: (target: PaneTarget) => void;
|
|
27
|
+
collapsePane: (target: PaneTarget) => void;
|
|
28
|
+
setSidebarToggleComputer?: (fn: (current: SidebarMode) => SidebarMode) => void;
|
|
29
|
+
onLeftPres?: (p: PresentationValue) => void;
|
|
30
|
+
onLeftDefaults?: (size: number) => void;
|
|
31
|
+
}
|
|
32
|
+
export declare function useShell(): ShellContextValue;
|
|
33
|
+
export declare function ShellProvider({ value, children }: {
|
|
34
|
+
value: ShellContextValue;
|
|
35
|
+
children: React.ReactNode;
|
|
36
|
+
}): React.JSX.Element;
|
|
37
|
+
//# sourceMappingURL=shell.context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shell.context.d.ts","sourceRoot":"","sources":["../../../src/components/shell.context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzG,MAAM,WAAW,iBAAiB;IAEhC,QAAQ,EAAE,QAAQ,CAAC;IACnB,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,QAAQ,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,aAAa,EAAE,QAAQ,CAAC;IACxB,gBAAgB,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,QAAQ,CAAC;IACrB,aAAa,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAGxC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,MAAM,IAAI,CAAC;IAGtB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAGtC,iBAAiB,EAAE,UAAU,CAAC;IAC9B,sBAAsB,EAAE,OAAO,CAAC;IAChC,wBAAwB,CAAC,EAAE,iBAAiB,CAAC;IAG7C,UAAU,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,UAAU,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAE3C,wBAAwB,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,WAAW,KAAK,IAAI,CAAC;IAE/E,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAE5C,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAID,wBAAgB,QAAQ,sBAIvB;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,iBAAiB,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAEzG"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as o from"react";const t=o.createContext(null);function n(){const e=o.useContext(t);if(!e)throw new Error("Shell components must be used within <Shell.Root>");return e}function r({value:e,children:a}){return o.createElement(t.Provider,{value:e},a)}export{r as ShellProvider,n as useShell};
|
|
2
|
+
//# sourceMappingURL=shell.context.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/shell.context.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport type { Breakpoint, PresentationValue, SidebarMode, PaneMode, PaneTarget } from './shell.types.js';\n\nexport interface ShellContextValue {\n // Pane states\n leftMode: PaneMode;\n setLeftMode: (mode: PaneMode) => void;\n panelMode: PaneMode; // Panel state within left container\n setPanelMode: (mode: PaneMode) => void;\n sidebarMode: SidebarMode;\n setSidebarMode: (mode: SidebarMode) => void;\n inspectorMode: PaneMode;\n setInspectorMode: (mode: PaneMode) => void;\n bottomMode: PaneMode;\n setBottomMode: (mode: PaneMode) => void;\n\n // Peek state (layout-only, ephemeral)\n peekTarget: PaneTarget | null;\n setPeekTarget: (target: PaneTarget | null) => void;\n peekPane: (target: PaneTarget) => void;\n clearPeek: () => void;\n\n // Composition detection\n hasLeft: boolean;\n setHasLeft: (has: boolean) => void;\n hasSidebar: boolean;\n setHasSidebar: (has: boolean) => void;\n\n // Presentation resolution\n currentBreakpoint: Breakpoint;\n currentBreakpointReady: boolean;\n leftResolvedPresentation?: PresentationValue;\n\n // Actions\n togglePane: (target: PaneTarget) => void;\n expandPane: (target: PaneTarget) => void;\n collapsePane: (target: PaneTarget) => void;\n // Toggle customization\n setSidebarToggleComputer?: (fn: (current: SidebarMode) => SidebarMode) => void;\n // Dev-only hooks for presentation warnings\n onLeftPres?: (p: PresentationValue) => void;\n // Sizing info for overlay grouping\n onLeftDefaults?: (size: number) => void;\n}\n\nconst ShellContext = React.createContext<ShellContextValue | null>(null);\n\nexport function useShell() {\n const ctx = React.useContext(ShellContext);\n if (!ctx) throw new Error('Shell components must be used within <Shell.Root>');\n return ctx;\n}\n\nexport function ShellProvider({ value, children }: { value: ShellContextValue; children: React.ReactNode }) {\n return <ShellContext.Provider value={value}>{children}</ShellContext.Provider>;\n}\n"],
|
|
5
|
+
"mappings": "AAAA,UAAYA,MAAW,QA6CvB,MAAMC,EAAeD,EAAM,cAAwC,IAAI,EAEhE,SAASE,GAAW,CACzB,MAAMC,EAAMH,EAAM,WAAWC,CAAY,EACzC,GAAI,CAACE,EAAK,MAAM,IAAI,MAAM,mDAAmD,EAC7E,OAAOA,CACT,CAEO,SAASC,EAAc,CAAE,MAAAC,EAAO,SAAAC,CAAS,EAA4D,CAC1G,OAAON,EAAA,cAACC,EAAa,SAAb,CAAsB,MAAOI,GAAQC,CAAS,CACxD",
|
|
6
|
+
"names": ["React", "ShellContext", "useShell", "ctx", "ShellProvider", "value", "children"]
|
|
7
|
+
}
|
|
@@ -1,53 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
type
|
|
7
|
-
|
|
8
|
-
type PaneSizePersistence = {
|
|
9
|
-
load?: () => number | Promise<number | undefined> | undefined;
|
|
10
|
-
save?: (size: number) => void | Promise<void>;
|
|
11
|
-
};
|
|
12
|
-
declare const BREAKPOINTS: {
|
|
13
|
-
readonly xs: "(min-width: 520px)";
|
|
14
|
-
readonly sm: "(min-width: 768px)";
|
|
15
|
-
readonly md: "(min-width: 1024px)";
|
|
16
|
-
readonly lg: "(min-width: 1280px)";
|
|
17
|
-
readonly xl: "(min-width: 1640px)";
|
|
18
|
-
};
|
|
19
|
-
type Breakpoint = 'initial' | keyof typeof BREAKPOINTS;
|
|
20
|
-
interface ShellContextValue {
|
|
21
|
-
leftMode: PaneMode;
|
|
22
|
-
setLeftMode: (mode: PaneMode) => void;
|
|
23
|
-
panelMode: PaneMode;
|
|
24
|
-
setPanelMode: (mode: PaneMode) => void;
|
|
25
|
-
sidebarMode: SidebarMode;
|
|
26
|
-
setSidebarMode: (mode: SidebarMode) => void;
|
|
27
|
-
inspectorMode: PaneMode;
|
|
28
|
-
setInspectorMode: (mode: PaneMode) => void;
|
|
29
|
-
bottomMode: PaneMode;
|
|
30
|
-
setBottomMode: (mode: PaneMode) => void;
|
|
31
|
-
peekTarget: PaneTarget | null;
|
|
32
|
-
setPeekTarget: (target: PaneTarget | null) => void;
|
|
33
|
-
peekPane: (target: PaneTarget) => void;
|
|
34
|
-
clearPeek: () => void;
|
|
35
|
-
hasLeft: boolean;
|
|
36
|
-
setHasLeft: (has: boolean) => void;
|
|
37
|
-
hasSidebar: boolean;
|
|
38
|
-
setHasSidebar: (has: boolean) => void;
|
|
39
|
-
currentBreakpoint: Breakpoint;
|
|
40
|
-
currentBreakpointReady: boolean;
|
|
41
|
-
leftResolvedPresentation?: PresentationValue;
|
|
42
|
-
togglePane: (target: PaneTarget) => void;
|
|
43
|
-
expandPane: (target: PaneTarget) => void;
|
|
44
|
-
collapsePane: (target: PaneTarget) => void;
|
|
45
|
-
setSidebarToggleComputer?: (fn: (current: SidebarMode) => SidebarMode) => void;
|
|
46
|
-
onLeftPres?: (p: PresentationValue) => void;
|
|
47
|
-
onLeftDefaults?: (size: number) => void;
|
|
48
|
-
}
|
|
49
|
-
declare function useShell(): ShellContextValue;
|
|
50
|
-
declare function useResponsivePresentation(presentation: ResponsivePresentation): PresentationValue;
|
|
2
|
+
import { useResponsivePresentation } from './shell.hooks.js';
|
|
3
|
+
import { Sidebar } from './_internal/shell-sidebar.js';
|
|
4
|
+
import { Bottom } from './_internal/shell-bottom.js';
|
|
5
|
+
import { Inspector } from './_internal/shell-inspector.js';
|
|
6
|
+
import type { ResponsivePresentation, PaneMode, SidebarMode, ResponsiveMode, PaneSizePersistence, PaneTarget } from './shell.types.js';
|
|
7
|
+
import { useShell } from './shell.context.js';
|
|
51
8
|
interface ShellRootProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
52
9
|
children: React.ReactNode;
|
|
53
10
|
height?: 'full' | 'auto' | string | number;
|
|
@@ -105,29 +62,10 @@ type HandleComponent = React.ForwardRefExoticComponent<React.ComponentPropsWitho
|
|
|
105
62
|
type PanelComponent = React.ForwardRefExoticComponent<Omit<PaneProps, 'defaultMode'> & React.RefAttributes<HTMLDivElement>> & {
|
|
106
63
|
Handle: HandleComponent;
|
|
107
64
|
};
|
|
108
|
-
type SidebarComponent = React.ForwardRefExoticComponent<(Omit<PaneProps, 'mode' | 'defaultMode' | 'onModeChange'> & {
|
|
109
|
-
mode?: SidebarMode;
|
|
110
|
-
defaultMode?: ResponsiveSidebarMode;
|
|
111
|
-
onModeChange?: (mode: SidebarMode) => void;
|
|
112
|
-
thinSize?: number;
|
|
113
|
-
toggleModes?: 'both' | 'single';
|
|
114
|
-
}) & React.RefAttributes<HTMLDivElement>> & {
|
|
115
|
-
Handle: HandleComponent;
|
|
116
|
-
};
|
|
117
|
-
type InspectorComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & {
|
|
118
|
-
Handle: HandleComponent;
|
|
119
|
-
};
|
|
120
|
-
type BottomComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & {
|
|
121
|
-
Handle: HandleComponent;
|
|
122
|
-
};
|
|
123
65
|
declare const Panel: PanelComponent;
|
|
124
|
-
declare const Sidebar: SidebarComponent;
|
|
125
66
|
interface ShellContentProps extends React.ComponentPropsWithoutRef<'main'> {
|
|
126
67
|
}
|
|
127
68
|
declare const Content: React.ForwardRefExoticComponent<ShellContentProps & React.RefAttributes<HTMLElement>>;
|
|
128
|
-
declare const Inspector: InspectorComponent;
|
|
129
|
-
declare const Bottom: BottomComponent;
|
|
130
|
-
type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';
|
|
131
69
|
type TriggerAction = 'toggle' | 'expand' | 'collapse';
|
|
132
70
|
interface TriggerProps extends React.ComponentPropsWithoutRef<'button'> {
|
|
133
71
|
target: PaneTarget;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shell.d.ts","sourceRoot":"","sources":["../../../src/components/shell.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"shell.d.ts","sourceRoot":"","sources":["../../../src/components/shell.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shell.hooks.d.ts","sourceRoot":"","sources":["../../../src/components/shell.hooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAI9F,wBAAgB,yBAAyB,CAAC,YAAY,EAAE,sBAAsB,GAAG,iBAAiB,CAyBjG"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as i from"react";import{BREAKPOINTS as a}from"./shell.types.js";import{useShell as p}from"./shell.context.js";function l(e){const{currentBreakpoint:r}=p();return i.useMemo(()=>{if(typeof e=="string")return e;if(e[r])return e[r];const t=[...Object.keys(a)].reverse().concat("initial"),n=t.indexOf(r);for(let o=n+1;o<t.length;o++){const s=t[o];if(e[s])return e[s]}return"fixed"},[e,r])}export{l as useResponsivePresentation};
|
|
2
|
+
//# sourceMappingURL=shell.hooks.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/shell.hooks.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport type { Breakpoint, PresentationValue, ResponsivePresentation } from './shell.types.js';\nimport { BREAKPOINTS } from './shell.types.js';\nimport { useShell } from './shell.context.js';\n\nexport function useResponsivePresentation(presentation: ResponsivePresentation): PresentationValue {\n const { currentBreakpoint } = useShell();\n\n return React.useMemo(() => {\n if (typeof presentation === 'string') {\n return presentation;\n }\n\n if (presentation[currentBreakpoint]) {\n return presentation[currentBreakpoint]!;\n }\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(currentBreakpoint as Breakpoint);\n\n for (let i = startIdx + 1; i < order.length; i++) {\n const bp = order[i];\n if (presentation[bp]) {\n return presentation[bp]!;\n }\n }\n\n return 'fixed';\n }, [presentation, currentBreakpoint]);\n}\n"],
|
|
5
|
+
"mappings": "AAAA,UAAYA,MAAW,QAEvB,OAAS,eAAAC,MAAmB,mBAC5B,OAAS,YAAAC,MAAgB,qBAElB,SAASC,EAA0BC,EAAyD,CACjG,KAAM,CAAE,kBAAAC,CAAkB,EAAIH,EAAS,EAEvC,OAAOF,EAAM,QAAQ,IAAM,CACzB,GAAI,OAAOI,GAAiB,SAC1B,OAAOA,EAGT,GAAIA,EAAaC,CAAiB,EAChC,OAAOD,EAAaC,CAAiB,EAIvC,MAAMC,EAAuB,CAAC,GADf,OAAO,KAAKL,CAAW,CACC,EAAE,QAAQ,EAAmB,OAAO,SAAuB,EAC5FM,EAAWD,EAAM,QAAQD,CAA+B,EAE9D,QAASG,EAAID,EAAW,EAAGC,EAAIF,EAAM,OAAQE,IAAK,CAChD,MAAMC,EAAKH,EAAME,CAAC,EAClB,GAAIJ,EAAaK,CAAE,EACjB,OAAOL,EAAaK,CAAE,CAE1B,CAEA,MAAO,OACT,EAAG,CAACL,EAAcC,CAAiB,CAAC,CACtC",
|
|
6
|
+
"names": ["React", "BREAKPOINTS", "useShell", "useResponsivePresentation", "presentation", "currentBreakpoint", "order", "startIdx", "i", "bp"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import*as e from"react";import Z from"classnames";import*as J from"./sheet.js";import"./inset.js";import{VisuallyHidden as pe}from"./visually-hidden.js";const re={xs:"(min-width: 520px)",sm:"(min-width: 768px)",md:"(min-width: 1024px)",lg:"(min-width: 1280px)",xl:"(min-width: 1640px)"},Re=e.createContext(null);function ee(){const i=e.useContext(Re);if(!i)throw new Error("Shell components must be used within <Shell.Root>");return i}const le=e.createContext(null);function ge(){const i=e.useContext(le);if(!i)throw new Error("Shell.Handle must be used within a resizable pane");return i}const te=e.forwardRef(({className:i,children:M,...r},u)=>{const{containerRef:E,cssVarName:p,minSize:S,maxSize:P,defaultSize:h,orientation:m,edge:C,computeNext:L,onResize:a,onResizeStart:g,onResizeEnd:B,snapPoints:U,snapTolerance:F,collapseThreshold:W,collapsible:K,target:O,requestCollapse:Y,requestToggle:k}=ge(),f=e.useRef(null);e.useEffect(()=>()=>{try{f.current?.()}catch{}f.current=null},[]);const b=m;return e.createElement("div",{...r,ref:u,className:Z("rt-ShellResizer",i),"data-orientation":m,"data-edge":C,role:"slider","aria-orientation":b,"aria-valuemin":S,"aria-valuemax":P,"aria-valuenow":h,tabIndex:0,onPointerDown:t=>{if(!E.current)return;t.preventDefault();const y=E.current,n=t.currentTarget,I=t.pointerId;try{f.current?.()}catch{}y.setAttribute("data-resizing","");try{n.setPointerCapture(I)}catch{}const R=m==="vertical"?t.clientX:t.clientY,x=parseFloat(getComputedStyle(y).getPropertyValue(p)||`${h}`),v=s=>Math.min(Math.max(s,S),P),w=document.body,d=w.style.cursor,N=w.style.userSelect;w.style.cursor=m==="vertical"?"col-resize":"row-resize",w.style.userSelect="none",g?.(x);const V=s=>{const T=m==="vertical"?s.clientX:s.clientY,o=v(L(T,R,x));y.style.setProperty(p,`${o}px`),n.setAttribute("aria-valuenow",String(o)),a?.(o)},X=()=>{try{n.releasePointerCapture(I)}catch{}window.removeEventListener("pointermove",V),window.removeEventListener("pointerup",H),window.removeEventListener("pointercancel",H),window.removeEventListener("keydown",j),n.removeEventListener("lostpointercapture",H),y.removeAttribute("data-resizing"),w.style.cursor=d,w.style.userSelect=N,f.current=null},H=()=>{const s=parseFloat(getComputedStyle(y).getPropertyValue(p)||`${h}`);let T=s;if(U&&U.length){const o=U.reduce((z,A)=>Math.abs(A-s)<Math.abs(z-s)?A:z,U[0]);Math.abs(o-s)<=(F??8)&&(T=o,y.style.setProperty(p,`${T}px`),n.setAttribute("aria-valuenow",String(T)),a?.(T))}K&&typeof W=="number"&&s<=W&&Y?.(),B?.(T),X()},j=s=>{s.key==="Escape"&&(y.style.setProperty(p,`${x}px`),n.setAttribute("aria-valuenow",String(x)),B?.(x),X())};window.addEventListener("pointermove",V),window.addEventListener("pointerup",H),window.addEventListener("pointercancel",H),window.addEventListener("keydown",j),n.addEventListener("lostpointercapture",H),f.current=X},onDoubleClick:()=>{K&&k?.()},onKeyDown:t=>{if(!E.current)return;const y=E.current,n=parseFloat(getComputedStyle(y).getPropertyValue(p)||`${h}`),I=v=>Math.min(Math.max(v,S),P),R=t.shiftKey?32:8;let x=0;if(m==="vertical"?t.key==="ArrowRight"?x=R:t.key==="ArrowLeft"&&(x=-R):t.key==="ArrowDown"?x=R:t.key==="ArrowUp"&&(x=-R),t.key==="Home"){t.preventDefault(),g?.(n);const v=I(S);y.style.setProperty(p,`${v}px`),t.currentTarget.setAttribute("aria-valuenow",String(v)),a?.(v),B?.(v);return}if(t.key==="End"){t.preventDefault(),g?.(n);const v=I(P);y.style.setProperty(p,`${v}px`),t.currentTarget.setAttribute("aria-valuenow",String(v)),a?.(v),B?.(v);return}if(x!==0){t.preventDefault(),g?.(n);const v=I(n+(C==="start"&&m==="vertical"?-x:x));y.style.setProperty(p,`${v}px`),t.currentTarget.setAttribute("aria-valuenow",String(v)),a?.(v),B?.(v)}}},M)});te.displayName="Shell.Handle";const ue=e.forwardRef((i,M)=>e.createElement(te,{...i,ref:M}));ue.displayName="Shell.Panel.Handle";const fe=e.forwardRef((i,M)=>e.createElement(te,{...i,ref:M}));fe.displayName="Shell.Sidebar.Handle";const me=e.forwardRef((i,M)=>e.createElement(te,{...i,ref:M}));me.displayName="Shell.Inspector.Handle";const ye=e.forwardRef((i,M)=>e.createElement(te,{...i,ref:M}));ye.displayName="Shell.Bottom.Handle";function de(i){const{currentBreakpoint:M}=ee();return e.useMemo(()=>{if(typeof i=="string")return i;if(i[M])return i[M];const u=[...Object.keys(re)].reverse().concat("initial"),E=u.indexOf(M);for(let p=E+1;p<u.length;p++){const S=u[p];if(i[S])return i[S]}return"fixed"},[i,M])}function Ee(){const[i,M]=e.useState("initial"),[r,u]=e.useState(!1);return e.useEffect(()=>{if(typeof window>"u")return;const p=Object.entries(re).map(([P,h])=>[P,window.matchMedia(h)]),S=()=>{const P=p.filter(([,m])=>m.matches).map(([m])=>m),h=P[P.length-1]??"initial";M(h),u(!0)};return S(),p.forEach(([,P])=>P.addEventListener("change",S)),()=>{p.forEach(([,P])=>P.removeEventListener("change",S))}},[]),{bp:i,ready:r}}const ke=e.forwardRef(({className:i,children:M,height:r="full",...u},E)=>{const{bp:p,ready:S}=Ee(),[P,h]=e.useState("collapsed"),[m,C]=e.useState("collapsed"),[L,a]=e.useState("expanded"),[g,B]=e.useState("collapsed"),[U,F]=e.useState("collapsed"),[W,K]=e.useState(!1),[O,Y]=e.useState(!1),k=e.useRef(l=>l==="collapsed"?"thin":l==="thin"?"expanded":"collapsed"),f=e.useCallback(l=>{k.current=l},[]);e.useEffect(()=>{P==="collapsed"&&C("collapsed")},[P]),e.useEffect(()=>{O&&W&&console.warn("Shell: Sidebar cannot coexist with Rail or Panel. Use either Rail+Panel OR Sidebar.")},[O,W]);const[b,t]=e.useState(void 0),y=e.useCallback(l=>t(l),[]),n=e.useRef(64),I=e.useRef(288),R=e.useCallback(l=>{n.current=l},[]),x=e.useCallback(l=>{I.current=l},[]),v=e.useMemo(()=>{const l=e.Children.toArray(M),$=(G,ie)=>e.isValidElement(G)&&(G.type===ie||G.type?.displayName===ie.displayName);return l.some(G=>$(G,se)||$(G,ae))},[M]),w=e.useMemo(()=>{const l=e.Children.toArray(M),$=(G,ie)=>e.isValidElement(G)&&(G.type===ie||G.type?.displayName===ie.displayName);return l.some(G=>$(G,ce))},[M]),d=e.useCallback(l=>{switch(l){case"left":case"rail":h($=>$==="expanded"?"collapsed":"expanded");break;case"panel":P==="collapsed"?(h("expanded"),C("expanded")):C($=>$==="expanded"?"collapsed":"expanded");break;case"sidebar":a($=>k.current($));break;case"inspector":B($=>$==="expanded"?"collapsed":"expanded");break;case"bottom":F($=>$==="expanded"?"collapsed":"expanded");break}},[P]),N=e.useCallback(l=>{switch(l){case"left":case"rail":h("expanded");break;case"panel":h("expanded"),C("expanded");break;case"sidebar":a("expanded");break;case"inspector":B("expanded");break;case"bottom":F("expanded");break}},[]),V=e.useCallback(l=>{switch(l){case"left":case"rail":h("collapsed");break;case"panel":C("collapsed");break;case"sidebar":a("collapsed");break;case"inspector":B("collapsed");break;case"bottom":F("collapsed");break}},[]),X=e.useMemo(()=>({leftMode:P,setLeftMode:h,panelMode:m,setPanelMode:C,sidebarMode:L,setSidebarMode:a,inspectorMode:g,setInspectorMode:B,bottomMode:U,setBottomMode:F,hasLeft:W,setHasLeft:K,hasSidebar:O,setHasSidebar:Y,currentBreakpoint:p,currentBreakpointReady:S,leftResolvedPresentation:b,togglePane:d,expandPane:N,collapsePane:V,setSidebarToggleComputer:f,onLeftPres:y,onRailDefaults:R,onPanelDefaults:x}),[P,m,L,g,U,W,O,p,S,b,d,N,V,f,y,R,x]),H=e.Children.toArray(M),j=(l,$)=>e.isValidElement(l)&&(l.type===$||l.type?.displayName===$.displayName),s=H.filter(l=>j(l,ve)),T=H.filter(l=>j(l,se)),o=H.filter(l=>j(l,ae)),z=H.filter(l=>j(l,ce)),A=H.filter(l=>j(l,he)),_=H.filter(l=>j(l,be)),ne=H.filter(l=>j(l,Me)),oe=e.useMemo(()=>r==="full"?{height:"100vh"}:r==="auto"?{height:"auto"}:typeof r=="string"?{height:r}:typeof r=="number"?{height:`${r}px`}:{},[r]),[c,q]=e.useState(null),D=e.useCallback(l=>q(l),[]),Q=e.useCallback(()=>q(null),[]);return e.createElement("div",{...u,ref:E,className:Z("rt-ShellRoot",i),style:{...oe,...u.style}},e.createElement(Re.Provider,{value:{...X,peekTarget:c,setPeekTarget:q,peekPane:D,clearPeek:Q}},s,e.createElement("div",{className:"rt-ShellBody","data-peek-target":c??void 0,style:c==="rail"||c==="panel"?{"--peek-rail-width":`${n.current}px`}:void 0},v&&!w?(()=>{const l=T[0],$=l?{mode:l.props?.mode,defaultMode:l.props?.defaultMode,onModeChange:l.props?.onModeChange,presentation:l.props?.presentation,collapsible:l.props?.collapsible,onExpand:l.props?.onExpand,onCollapse:l.props?.onCollapse}:{};return e.createElement(Pe,{...$},T,o)})():z,A,_),ne))});ke.displayName="Shell.Root";const ve=e.forwardRef(({className:i,height:M=64,style:r,...u},E)=>e.createElement("header",{...u,ref:E,className:Z("rt-ShellHeader",i),style:{...r,"--shell-header-height":`${M}px`}}));ve.displayName="Shell.Header";const Pe=e.forwardRef(({className:i,presentation:M={initial:"overlay",sm:"fixed"},mode:r,defaultMode:u="collapsed",onModeChange:E,collapsible:p=!0,onExpand:S,onCollapse:P,children:h,style:m,...C},L)=>{const a=ee(),g=de(M),B=g==="overlay",U=g==="stacked",F=e.useRef(null);e.useEffect(()=>{a.onLeftPres?.(g)},[a,g]);const W=e.useCallback(k=>{F.current=k,typeof L=="function"?L(k):L&&(L.current=k)},[L]);e.useEffect(()=>(a.setHasLeft(!0),()=>a.setHasLeft(!1)),[a]);const K=e.useCallback(()=>{if(typeof u=="string")return u;const k=u;if(k&&k[a.currentBreakpoint])return k[a.currentBreakpoint];const b=[...Object.keys(re)].reverse().concat("initial"),t=b.indexOf(a.currentBreakpoint);for(let y=t+1;y<b.length;y++){const n=b[y];if(k&&k[n])return k[n]}return"collapsed"},[u,a.currentBreakpoint]),O=e.useRef(null);e.useEffect(()=>{if(r!==void 0||!a.currentBreakpointReady||O.current===a.currentBreakpoint)return;O.current=a.currentBreakpoint;const k=K();k!==a.leftMode&&a.setLeftMode(k)},[r,a.currentBreakpoint,a.currentBreakpointReady,K,a.leftMode,a.setLeftMode]),e.useEffect(()=>{r!==void 0&&a.leftMode!==r&&a.setLeftMode(r)},[r,a]),e.useEffect(()=>{r===void 0&&E?.(a.leftMode)},[a.leftMode,r,E]),e.useEffect(()=>{a.leftMode==="expanded"?S?.():P?.()},[a.leftMode,S,P]);const Y=a.leftMode==="expanded";if(B){const k=a.leftMode==="expanded",f=e.Children.toArray(h),b=(w,d)=>e.isValidElement(w)&&w.type===d,t=f.find(w=>b(w,se)),y=f.find(w=>b(w,ae)),n=typeof t?.props?.expandedSize=="number"?t.props.expandedSize:64,I=typeof y?.props?.expandedSize=="number"?y.props.expandedSize:288,R=!!t,x=!!y,v=(R?n:0)+(a.panelMode==="expanded"&&x?I:0);return e.createElement(J.Root,{open:k,onOpenChange:w=>a.setLeftMode(w?"expanded":"collapsed")},e.createElement(J.Content,{side:"start",style:{padding:0},width:{initial:`${v}px`}},e.createElement(pe,null,e.createElement(J.Title,null,"Navigation")),e.createElement("div",{className:"rt-ShellLeft"},h)))}if(U){const k=a.leftMode==="expanded",f=e.Children.toArray(h),b=(d,N)=>e.isValidElement(d)&&d.type===N,t=f.find(d=>b(d,se)),y=f.find(d=>b(d,ae)),n=typeof t?.props?.expandedSize=="number"?t.props.expandedSize:64,I=typeof y?.props?.expandedSize=="number"?y.props.expandedSize:288,R=!!t,v=!!y&&(a.panelMode==="expanded"||a.peekTarget==="panel"),w=(R?n:0)+(v?I:0);return e.createElement("div",{...C,ref:W,className:Z("rt-ShellLeft",i),"data-mode":a.leftMode,"data-peek":a.peekTarget==="left"||a.peekTarget==="rail"||a.peekTarget==="panel"||void 0,"data-presentation":g,style:{...m},"data-open":k||void 0},h)}return e.createElement("div",{...C,ref:W,className:Z("rt-ShellLeft",i),"data-mode":a.leftMode,"data-peek":a.peekTarget==="left"||a.peekTarget==="rail"||a.peekTarget==="panel"||void 0,"data-presentation":g,style:{...m}},h)});Pe.displayName="Shell.Left";const se=e.forwardRef(({className:i,presentation:M,mode:r,defaultMode:u,onModeChange:E,expandedSize:p=64,collapsible:S,onExpand:P,onCollapse:h,children:m,style:C,...L},a)=>{const g=ee();e.useEffect(()=>{g.onRailDefaults?.(p)},[g,p]);const B=g.leftMode==="expanded";return e.createElement("div",{...L,ref:a,className:Z("rt-ShellRail",i),"data-mode":g.leftMode,"data-peek":g.leftResolvedPresentation!=="overlay"&&g.peekTarget==="rail"||void 0,style:{...C,"--rail-size":`${p}px`}},e.createElement("div",{className:"rt-ShellRailContent","data-visible":B||g.leftResolvedPresentation!=="overlay"&&g.peekTarget==="rail"||void 0},m))});se.displayName="Shell.Rail";const ae=e.forwardRef(({className:i,mode:M,onModeChange:r,expandedSize:u=288,minSize:E,maxSize:p,resizable:S,collapsible:P=!0,onExpand:h,onCollapse:m,onResize:C,onResizeStart:L,onResizeEnd:a,snapPoints:g,snapTolerance:B,collapseThreshold:U,paneId:F,persistence:W,children:K,style:O,...Y},k)=>{const f=ee();e.useEffect(()=>{f.onPanelDefaults?.(u)},[f,u]);const b=e.useRef(null),t=e.useCallback(d=>{b.current=d,typeof k=="function"?k(d):k&&(k.current=d)},[k]),y=e.Children.toArray(K),n=y.filter(d=>e.isValidElement(d)&&d.type===ue),I=y.filter(d=>!(e.isValidElement(d)&&d.type===ue)),R=f.leftResolvedPresentation==="overlay",x=e.useMemo(()=>{if(!F||W)return W;const d=`kookie-ui:shell:panel:${F}`;return{load:()=>{if(typeof window>"u")return;const V=window.localStorage.getItem(d);return V?Number(V):void 0},save:V=>{typeof window>"u"||window.localStorage.setItem(d,String(V))}}},[F,W]);e.useEffect(()=>{let d=!0;return(async()=>{if(!S||!x?.load||R)return;const N=await x.load();d&&typeof N=="number"&&b.current&&(b.current.style.setProperty("--panel-size",`${N}px`),C?.(N))})(),()=>{d=!1}},[S,x,C,R]),e.useEffect(()=>{b.current&&R&&b.current.style.setProperty("--panel-size",`${u}px`)},[R,u]),e.useEffect(()=>{if(b.current&&f.leftResolvedPresentation!=="overlay"&&f.leftMode==="expanded"&&f.panelMode==="expanded"){const d=b.current.parentElement||null;try{d?.style.removeProperty("width")}catch{}}},[f.leftResolvedPresentation,f.leftMode,f.panelMode]);const v=f.leftMode==="expanded"&&f.panelMode==="expanded",w=S&&f.leftResolvedPresentation!=="overlay"&&v?e.createElement(le.Provider,{value:{containerRef:b,cssVarName:"--panel-size",minSize:typeof E=="number"?E:100,maxSize:typeof p=="number"?p:800,defaultSize:u,orientation:"vertical",edge:"end",computeNext:(d,N,V)=>{const X=getComputedStyle(b.current).direction==="rtl",H=d-N;return V+(X?-H:H)},onResize:C,onResizeStart:d=>{const V=b.current?.parentElement;try{V?.style.removeProperty("width")}catch{}L?.(d)},onResizeEnd:d=>{a?.(d),x?.save?.(d)},target:"panel",collapsible:!!P,snapPoints:g,snapTolerance:B??8,collapseThreshold:U,requestCollapse:()=>f.setPanelMode("collapsed"),requestToggle:()=>f.togglePane("panel")}},n.length>0?n.map((d,N)=>e.cloneElement(d,{key:d.key??N})):e.createElement(te,null)):null;return e.createElement("div",{...Y,ref:t,className:Z("rt-ShellPanel",i),"data-mode":f.panelMode,"data-visible":v||f.leftResolvedPresentation!=="overlay"&&f.peekTarget==="panel"||void 0,"data-peek":f.leftResolvedPresentation!=="overlay"&&f.peekTarget==="panel"||void 0,style:{...O,"--panel-size":`${u}px`}},e.createElement("div",{className:"rt-ShellPanelContent","data-visible":v||void 0},I),w)});ae.displayName="Shell.Panel",ae.Handle=ue;const ce=e.forwardRef(({className:i,presentation:M={initial:"overlay",md:"fixed"},mode:r,defaultMode:u="expanded",onModeChange:E,expandedSize:p=288,minSize:S=200,maxSize:P=400,resizable:h=!1,collapsible:m=!0,onExpand:C,onCollapse:L,onResize:a,onResizeStart:g,onResizeEnd:B,snapPoints:U,snapTolerance:F,collapseThreshold:W,paneId:K,persistence:O,children:Y,style:k,thinSize:f=64,toggleModes:b,...t},y)=>{const n=ee(),I=de(M),R=I==="overlay",x=I==="stacked",v=e.useRef(null),w=e.useCallback(c=>{v.current=c,typeof y=="function"?y(c):y&&(y.current=c)},[y]),d=e.Children.toArray(Y),N=d.filter(c=>e.isValidElement(c)&&c.type===fe),V=d.filter(c=>!(e.isValidElement(c)&&c.type===fe)),X=e.useId();e.useEffect(()=>(n.setHasSidebar(!0),()=>{n.setHasSidebar(!1)}),[n,X]);const H=e.useRef(!1);e.useEffect(()=>{H.current||(H.current=!0,r===void 0&&n.sidebarMode!==u&&n.setSidebarMode(u))},[]),e.useEffect(()=>{r!==void 0&&n.sidebarMode!==r&&n.setSidebarMode(r)},[r,n]),e.useEffect(()=>{r===void 0&&E?.(n.sidebarMode)},[n.sidebarMode,r,E]),e.useEffect(()=>{n.sidebarMode==="expanded"?C?.():L?.()},[n.sidebarMode,C,L]);const j=n.sidebarMode!=="collapsed",s=e.useMemo(()=>{if(!K||O)return O;const c=`kookie-ui:shell:sidebar:${K}`;return{load:()=>{if(typeof window>"u")return;const D=window.localStorage.getItem(c);return D?Number(D):void 0},save:D=>{typeof window>"u"||window.localStorage.setItem(c,String(D))}}},[K,O]);e.useEffect(()=>{let c=!0;return(async()=>{if(!h||!s?.load||R)return;const q=await s.load();c&&typeof q=="number"&&v.current&&(v.current.style.setProperty("--sidebar-size",`${q}px`),a?.(q))})(),()=>{c=!1}},[h,s,a,R]);const T=e.useCallback(()=>{if(typeof u=="string")return u;const c=u;if(c&&c[n.currentBreakpoint])return c[n.currentBreakpoint];const D=[...Object.keys(re)].reverse().concat("initial"),Q=D.indexOf(n.currentBreakpoint);for(let l=Q+1;l<D.length;l++){const $=D[l];if(c&&c[$])return c[$]}return"collapsed"},[u,n.currentBreakpoint]),o=ee(),z=e.useCallback(()=>{const c=T();return c==="thin"||c==="expanded"?c:"expanded"},[T]);e.useEffect(()=>{if(!o.setSidebarToggleComputer)return;const c=b??"both",q=D=>{if(c==="both")return D==="collapsed"?"thin":D==="thin"?"expanded":"collapsed";const Q=z();return D==="collapsed"?Q:D===Q?"collapsed":Q};return o.setSidebarToggleComputer(q),()=>{o.setSidebarToggleComputer?.(D=>D==="collapsed"?"thin":D==="thin"?"expanded":"collapsed")}},[o,b,z]);const A=e.useRef(p),_=e.useRef("expanded");e.useEffect(()=>{n.sidebarMode!=="collapsed"&&(_.current=n.sidebarMode,A.current=n.sidebarMode==="thin"?f:p)},[n.sidebarMode,f,p]);const ne=e.useRef(null);e.useEffect(()=>{if(r!==void 0||!n.currentBreakpointReady||ne.current===n.currentBreakpoint)return;ne.current=n.currentBreakpoint;const c=T();c!==n.sidebarMode&&n.setSidebarMode(c)},[r,n.currentBreakpoint,n.currentBreakpointReady,T,n.sidebarMode,n.setSidebarMode]);const oe=h&&!R&&n.sidebarMode==="expanded"?e.createElement(le.Provider,{value:{containerRef:v,cssVarName:"--sidebar-size",minSize:S,maxSize:P,defaultSize:p,orientation:"vertical",edge:"end",computeNext:(c,q,D)=>{const Q=getComputedStyle(v.current).direction==="rtl",l=c-q;return D+(Q?-l:l)},onResize:a,onResizeStart:g,onResizeEnd:c=>{B?.(c),s?.save?.(c)},target:"sidebar",collapsible:m,snapPoints:U,snapTolerance:F??8,collapseThreshold:W,requestCollapse:()=>n.setSidebarMode("collapsed"),requestToggle:()=>n.togglePane("sidebar")}},N.length>0?N.map((c,q)=>e.cloneElement(c,{key:c.key??q})):e.createElement(te,null)):null;if(R){const c=n.sidebarMode!=="collapsed";return e.createElement(J.Root,{open:c,onOpenChange:q=>n.setSidebarMode(q?"expanded":"collapsed")},e.createElement(J.Content,{side:"start",style:{padding:0},width:{initial:`${c?n.sidebarMode==="thin"?f:p:A.current}px`}},e.createElement(pe,null,e.createElement(J.Title,null,"Sidebar")),V))}return e.createElement("div",{...t,ref:w,className:Z("rt-ShellSidebar",i),"data-mode":n.sidebarMode,"data-peek":n.peekTarget==="sidebar"||void 0,"data-presentation":I,"data-open":x&&j||void 0,style:{...k,"--sidebar-size":`${p}px`,"--sidebar-thin-size":`${f}px`,"--sidebar-min-size":`${S}px`,"--sidebar-max-size":`${P}px`,...n.peekTarget==="sidebar"&&n.sidebarMode==="collapsed"&&!R?(()=>{const c=b??"both",q=n.sidebarMode;let D;if(c==="both")D=q==="collapsed"?"thin":q==="thin"?"expanded":"collapsed";else{const Q=z();D=q==="collapsed"?Q:"collapsed"}return D==="thin"?{"--peek-sidebar-width":`${f}px`}:{"--peek-sidebar-width":`var(--sidebar-size, ${p}px)`}})():{}}},e.createElement("div",{className:"rt-ShellSidebarContent","data-visible":j||void 0},V),oe)});ce.displayName="Shell.Sidebar",ce.Handle=fe;const he=e.forwardRef(({className:i,...M},r)=>e.createElement("main",{...M,ref:r,className:Z("rt-ShellContent",i)}));he.displayName="Shell.Content";const be=e.forwardRef(({className:i,presentation:M={initial:"overlay",lg:"fixed"},mode:r,defaultMode:u="collapsed",onModeChange:E,expandedSize:p=320,minSize:S=200,maxSize:P=500,resizable:h=!1,collapsible:m=!0,onExpand:C,onCollapse:L,onResize:a,onResizeStart:g,onResizeEnd:B,snapPoints:U,snapTolerance:F,collapseThreshold:W,paneId:K,persistence:O,children:Y,style:k,...f},b)=>{const t=ee(),y=de(M),n=y==="overlay",I=y==="stacked",R=e.useRef(null),x=e.useCallback(s=>{R.current=s,typeof b=="function"?b(s):b&&(b.current=s)},[b]),v=e.Children.toArray(Y),w=v.filter(s=>e.isValidElement(s)&&s.type===me),d=v.filter(s=>!(e.isValidElement(s)&&s.type===me)),N=e.useCallback(()=>{if(typeof u=="string")return u;const s=u;if(s&&s[t.currentBreakpoint])return s[t.currentBreakpoint];const o=[...Object.keys(re)].reverse().concat("initial"),z=o.indexOf(t.currentBreakpoint);for(let A=z+1;A<o.length;A++){const _=o[A];if(s&&s[_])return s[_]}return"collapsed"},[u,t.currentBreakpoint]),V=e.useRef(null);e.useEffect(()=>{if(r!==void 0||!t.currentBreakpointReady||V.current===t.currentBreakpoint)return;V.current=t.currentBreakpoint;const s=N();s!==t.inspectorMode&&t.setInspectorMode(s)},[r,t.currentBreakpoint,t.currentBreakpointReady,N,t.inspectorMode,t.setInspectorMode]),e.useEffect(()=>{r!==void 0&&t.inspectorMode!==r&&t.setInspectorMode(r)},[r,t]),e.useEffect(()=>{r===void 0&&E?.(t.inspectorMode)},[t.inspectorMode,r,E]),e.useEffect(()=>{t.inspectorMode==="expanded"?C?.():L?.()},[t.inspectorMode,C,L]);const X=t.inspectorMode==="expanded",H=e.useMemo(()=>{if(!K||O)return O;const s=`kookie-ui:shell:inspector:${K}`;return{load:()=>{if(typeof window>"u")return;const o=window.localStorage.getItem(s);return o?Number(o):void 0},save:o=>{typeof window>"u"||window.localStorage.setItem(s,String(o))}}},[K,O]);e.useEffect(()=>{let s=!0;return(async()=>{if(!h||!H?.load||n)return;const T=await H.load();s&&typeof T=="number"&&R.current&&(R.current.style.setProperty("--inspector-size",`${T}px`),a?.(T))})(),()=>{s=!1}},[h,H,a,n]);const j=h&&!n&&X?e.createElement(le.Provider,{value:{containerRef:R,cssVarName:"--inspector-size",minSize:S,maxSize:P,defaultSize:p,orientation:"vertical",edge:"start",computeNext:(s,T,o)=>{const z=getComputedStyle(R.current).direction==="rtl",A=s-T;return o+(z?A:-A)},onResize:a,onResizeStart:g,onResizeEnd:s=>{B?.(s),H?.save?.(s)},target:"inspector",collapsible:m,snapPoints:U,snapTolerance:F??8,collapseThreshold:W,requestCollapse:()=>t.setInspectorMode("collapsed"),requestToggle:()=>t.togglePane("inspector")}},w.length>0?w.map((s,T)=>e.cloneElement(s,{key:s.key??T})):e.createElement(te,null)):null;if(n){const s=t.inspectorMode==="expanded";return e.createElement(J.Root,{open:s,onOpenChange:T=>t.setInspectorMode(T?"expanded":"collapsed")},e.createElement(J.Content,{side:"end",style:{padding:0},width:{initial:`${p}px`}},e.createElement(pe,null,e.createElement(J.Title,null,"Inspector")),d))}return e.createElement("div",{...f,ref:x,className:Z("rt-ShellInspector",i),"data-mode":t.inspectorMode,"data-peek":t.peekTarget==="inspector"||void 0,"data-presentation":y,"data-open":I&&X||void 0,style:{...k,"--inspector-size":`${p}px`,"--inspector-min-size":`${S}px`,"--inspector-max-size":`${P}px`}},e.createElement("div",{className:"rt-ShellInspectorContent","data-visible":X||void 0},d),j)});be.displayName="Shell.Inspector",be.Handle=me;const Me=e.forwardRef(({className:i,presentation:M="fixed",mode:r,defaultMode:u="collapsed",onModeChange:E,expandedSize:p=200,minSize:S=100,maxSize:P=400,resizable:h=!1,collapsible:m=!0,onExpand:C,onCollapse:L,onResize:a,onResizeStart:g,onResizeEnd:B,snapPoints:U,snapTolerance:F,collapseThreshold:W,paneId:K,persistence:O,children:Y,style:k,...f},b)=>{const t=ee(),y=de(M),n=y==="overlay",I=y==="stacked",R=e.useRef(null),x=e.useCallback(o=>{R.current=o,typeof b=="function"?b(o):b&&(b.current=o)},[b]),v=e.Children.toArray(Y),w=v.filter(o=>e.isValidElement(o)&&o.type===ye),d=v.filter(o=>!(e.isValidElement(o)&&o.type===ye)),N=e.useCallback(()=>{if(typeof u=="string")return u;const o=u;if(o&&o[t.currentBreakpoint])return o[t.currentBreakpoint];const A=[...Object.keys(re)].reverse().concat("initial"),_=A.indexOf(t.currentBreakpoint);for(let ne=_+1;ne<A.length;ne++){const oe=A[ne];if(o&&o[oe])return o[oe]}return"collapsed"},[u,t.currentBreakpoint]),V=e.useRef(!1);e.useEffect(()=>{if(!V.current&&(V.current=!0,r===void 0)){const o=N();t.bottomMode!==o&&t.setBottomMode(o)}},[]);const X=e.useRef(null),H=e.useRef(null);e.useEffect(()=>{if(r!==void 0||!t.currentBreakpointReady||X.current===t.currentBreakpoint)return;X.current=t.currentBreakpoint;const o=N();H.current!==o&&(H.current=o,o!==t.bottomMode&&t.setBottomMode(o))},[r,t.currentBreakpoint,t.currentBreakpointReady,N,t.bottomMode,t.setBottomMode]),e.useEffect(()=>{r!==void 0&&t.bottomMode!==r&&t.setBottomMode(r)},[r,t]),e.useEffect(()=>{r===void 0&&E?.(t.bottomMode)},[t.bottomMode,r,E]),e.useEffect(()=>{t.bottomMode==="expanded"?C?.():L?.()},[t.bottomMode,C,L]);const j=t.bottomMode==="expanded",s=e.useMemo(()=>{if(!K||O)return O;const o=`kookie-ui:shell:bottom:${K}`;return{load:()=>{if(typeof window>"u")return;const A=window.localStorage.getItem(o);return A?Number(A):void 0},save:A=>{typeof window>"u"||window.localStorage.setItem(o,String(A))}}},[K,O]);e.useEffect(()=>{let o=!0;return(async()=>{if(!h||!s?.load||n)return;const z=await s.load();o&&typeof z=="number"&&R.current&&(R.current.style.setProperty("--bottom-size",`${z}px`),a?.(z))})(),()=>{o=!1}},[h,s,a,n]);const T=h&&!n&&j?e.createElement(le.Provider,{value:{containerRef:R,cssVarName:"--bottom-size",minSize:S,maxSize:P,defaultSize:p,orientation:"horizontal",edge:"start",computeNext:(o,z,A)=>{const _=o-z;return A-_},onResize:a,onResizeStart:g,onResizeEnd:o=>{B?.(o),s?.save?.(o)},target:"bottom",collapsible:m,snapPoints:U,snapTolerance:F??8,collapseThreshold:W,requestCollapse:()=>t.setBottomMode("collapsed"),requestToggle:()=>t.togglePane("bottom")}},w.length>0?w.map((o,z)=>e.cloneElement(o,{key:o.key??z})):e.createElement(te,null)):null;if(n){const o=t.bottomMode==="expanded";return e.createElement(J.Root,{open:o,onOpenChange:z=>t.setBottomMode(z?"expanded":"collapsed")},e.createElement(J.Content,{side:"bottom",style:{padding:0},height:{initial:`${p}px`}},e.createElement(pe,null,e.createElement(J.Title,null,"Bottom panel")),d))}return e.createElement("div",{...f,ref:x,className:Z("rt-ShellBottom",i),"data-mode":t.bottomMode,"data-peek":t.peekTarget==="bottom"||void 0,"data-presentation":y,"data-open":I&&j||void 0,style:{...k,"--bottom-size":`${p}px`,"--bottom-min-size":`${S}px`,"--bottom-max-size":`${P}px`}},e.createElement("div",{className:"rt-ShellBottomContent","data-visible":j||void 0},d),T)});Me.displayName="Shell.Bottom",Me.Handle=ye;const Se=e.forwardRef(({target:i,action:M="toggle",peekOnHover:r,onClick:u,onMouseEnter:E,onMouseLeave:p,children:S,...P},h)=>{const m=ee(),C=e.useCallback(B=>{switch(u?.(B),m.peekTarget===i&&m.clearPeek(),M){case"toggle":m.togglePane(i);break;case"expand":m.expandPane(i);break;case"collapse":m.collapsePane(i);break}},[m,i,M,u]),L=(()=>{switch(i){case"left":case"rail":return m.leftMode==="collapsed";case"panel":return m.leftMode==="collapsed"||m.panelMode==="collapsed";case"sidebar":return m.sidebarMode==="collapsed";case"inspector":return m.inspectorMode==="collapsed";case"bottom":return m.bottomMode==="collapsed"}})(),a=e.useCallback(B=>{E?.(B),!(!r||!L)&&m.peekPane(i)},[E,r,L,m,i]),g=e.useCallback(B=>{p?.(B),r&&m.peekTarget===i&&m.clearPeek()},[p,r,m,i]);return e.createElement("button",{...P,ref:h,onClick:C,onMouseEnter:a,onMouseLeave:g,"data-shell-trigger":i,"data-shell-action":M},S)});Se.displayName="Shell.Trigger";export{Me as Bottom,he as Content,ve as Header,be as Inspector,Pe as Left,ae as Panel,se as Rail,ke as Root,ce as Sidebar,Se as Trigger,de as useResponsivePresentation,ee as useShell};
|
|
1
|
+
"use client";import*as e from"react";import O from"classnames";import*as Q from"./sheet.js";import"./inset.js";import{VisuallyHidden as be}from"./visually-hidden.js";import{useResponsivePresentation as ne}from"./shell.hooks.js";import{PaneResizeContext as Re}from"./_internal/shell-resize.js";import{PaneHandle as Me,PanelHandle as X}from"./_internal/shell-handles.js";import{Sidebar as Y}from"./_internal/shell-sidebar.js";import{Bottom as ae}from"./_internal/shell-bottom.js";import{Inspector as oe}from"./_internal/shell-inspector.js";import{BREAKPOINTS as se}from"./shell.types.js";import{ShellProvider as he,useShell as F}from"./shell.context.js";function ve(){const[r,m]=e.useState("initial"),[s,c]=e.useState(!1);return e.useEffect(()=>{if(typeof window>"u")return;const P=Object.entries(se).map(([i,u])=>[i,window.matchMedia(u)]),M=()=>{const i=P.filter(([,o])=>o.matches).map(([o])=>o),u=i[i.length-1]??"initial";m(u),c(!0)};return M(),P.forEach(([,i])=>i.addEventListener("change",M)),()=>{P.forEach(([,i])=>i.removeEventListener("change",M))}},[]),{bp:r,ready:s}}const le=e.forwardRef(({className:r,children:m,height:s="full",...c},E)=>{const{bp:P,ready:M}=ve(),[i,u]=e.useState("collapsed"),[o,b]=e.useState("collapsed"),[v,t]=e.useState("expanded"),[f,h]=e.useState("collapsed"),[W,B]=e.useState("collapsed"),[T,$]=e.useState(!1),[z,K]=e.useState(!1),d=e.useRef(n=>n==="collapsed"?"thin":n==="thin"?"expanded":"collapsed"),l=e.useCallback(n=>{d.current=n},[]);e.useEffect(()=>{i==="collapsed"&&b("collapsed")},[i]),e.useEffect(()=>{z&&T&&console.warn("Shell: Sidebar cannot coexist with Rail or Panel. Use either Rail+Panel OR Sidebar.")},[z,T]);const[p,S]=e.useState(void 0),R=e.useCallback(n=>S(n),[]),C=e.useRef(64),D=e.useRef(288),L=e.useCallback(n=>{C.current=n},[]),w=e.useCallback(n=>{D.current=n},[]),A=e.useMemo(()=>{const n=e.Children.toArray(m),y=(x,j)=>e.isValidElement(x)&&(x.type===j||x.type?.displayName===j.displayName);return n.some(x=>y(x,q)||y(x,I))},[m]),g=e.useMemo(()=>{const n=e.Children.toArray(m),y=(x,j)=>e.isValidElement(x)&&(x.type===j||x.type?.displayName===j.displayName);return n.some(x=>y(x,Y))},[m]),a=e.useCallback(n=>{switch(n){case"left":case"rail":u(y=>y==="expanded"?"collapsed":"expanded");break;case"panel":i==="collapsed"?(u("expanded"),b("expanded")):b(y=>y==="expanded"?"collapsed":"expanded");break;case"sidebar":t(y=>d.current(y));break;case"inspector":h(y=>y==="expanded"?"collapsed":"expanded");break;case"bottom":B(y=>y==="expanded"?"collapsed":"expanded");break}},[i]),k=e.useCallback(n=>{switch(n){case"left":case"rail":u("expanded");break;case"panel":u("expanded"),b("expanded");break;case"sidebar":t("expanded");break;case"inspector":h("expanded");break;case"bottom":B("expanded");break}},[]),H=e.useCallback(n=>{switch(n){case"left":case"rail":u("collapsed");break;case"panel":b("collapsed");break;case"sidebar":t("collapsed");break;case"inspector":h("collapsed");break;case"bottom":B("collapsed");break}},[]),G=e.useMemo(()=>({leftMode:i,setLeftMode:u,panelMode:o,setPanelMode:b,sidebarMode:v,setSidebarMode:t,inspectorMode:f,setInspectorMode:h,bottomMode:W,setBottomMode:B,hasLeft:T,setHasLeft:$,hasSidebar:z,setHasSidebar:K,currentBreakpoint:P,currentBreakpointReady:M,leftResolvedPresentation:p,togglePane:a,expandPane:k,collapsePane:H,setSidebarToggleComputer:l,onLeftPres:R,onRailDefaults:L,onPanelDefaults:w}),[i,o,v,f,W,T,z,P,M,p,a,k,H,l,R,L,w]),N=e.Children.toArray(m),V=(n,y)=>e.isValidElement(n)&&(n.type===y||n.type?.displayName===y.displayName),de=N.filter(n=>V(n,Z)),te=N.filter(n=>V(n,q)),ie=N.filter(n=>V(n,I)),pe=N.filter(n=>V(n,Y)),ce=N.filter(n=>V(n,ee)),fe=N.filter(n=>V(n,oe)),ue=N.filter(n=>V(n,ae)),me=e.useMemo(()=>s==="full"?{height:"100vh"}:s==="auto"?{height:"auto"}:typeof s=="string"?{height:s}:typeof s=="number"?{height:`${s}px`}:{},[s]),[U,J]=e.useState(null),ye=e.useCallback(n=>J(n),[]),Pe=e.useCallback(()=>J(null),[]);return e.createElement("div",{...c,ref:E,className:O("rt-ShellRoot",r),style:{...me,...c.style}},e.createElement(he,{value:{...G,peekTarget:U,setPeekTarget:J,peekPane:ye,clearPeek:Pe}},de,e.createElement("div",{className:"rt-ShellBody","data-peek-target":U??void 0,style:U==="rail"||U==="panel"?{"--peek-rail-width":`${C.current}px`}:void 0},A&&!g?(()=>{const n=te[0],y=n?{mode:n.props?.mode,defaultMode:n.props?.defaultMode,onModeChange:n.props?.onModeChange,presentation:n.props?.presentation,collapsible:n.props?.collapsible,onExpand:n.props?.onExpand,onCollapse:n.props?.onCollapse}:{};return e.createElement(_,{...y},te,ie)})():pe,ce,fe),ue))});le.displayName="Shell.Root";const Z=e.forwardRef(({className:r,height:m=64,style:s,...c},E)=>e.createElement("header",{...c,ref:E,className:O("rt-ShellHeader",r),style:{...s,"--shell-header-height":`${m}px`}}));Z.displayName="Shell.Header";const _=e.forwardRef(({className:r,presentation:m={initial:"overlay",sm:"fixed"},mode:s,defaultMode:c="collapsed",onModeChange:E,collapsible:P=!0,onExpand:M,onCollapse:i,children:u,style:o,...b},v)=>{const t=F(),f=ne(m),h=f==="overlay",W=f==="stacked",B=e.useRef(null);e.useEffect(()=>{t.onLeftPres?.(f)},[t,f]);const T=e.useCallback(d=>{B.current=d,typeof v=="function"?v(d):v&&(v.current=d)},[v]);e.useEffect(()=>(t.setHasLeft(!0),()=>t.setHasLeft(!1)),[t]);const $=e.useCallback(()=>{if(typeof c=="string")return c;const d=c;if(d&&d[t.currentBreakpoint])return d[t.currentBreakpoint];const p=[...Object.keys(se)].reverse().concat("initial"),S=p.indexOf(t.currentBreakpoint);for(let R=S+1;R<p.length;R++){const C=p[R];if(d&&d[C])return d[C]}return"collapsed"},[c,t.currentBreakpoint]),z=e.useRef(null);e.useEffect(()=>{if(s!==void 0||!t.currentBreakpointReady||z.current===t.currentBreakpoint)return;z.current=t.currentBreakpoint;const d=$();d!==t.leftMode&&t.setLeftMode(d)},[s,t.currentBreakpoint,t.currentBreakpointReady,$,t.leftMode,t.setLeftMode]),e.useEffect(()=>{s!==void 0&&t.leftMode!==s&&t.setLeftMode(s)},[s,t]),e.useEffect(()=>{s===void 0&&E?.(t.leftMode)},[t.leftMode,s,E]),e.useEffect(()=>{t.leftMode==="expanded"?M?.():i?.()},[t.leftMode,M,i]);const K=t.leftMode==="expanded";if(h){const d=t.leftMode==="expanded",l=e.Children.toArray(u),p=(g,a)=>e.isValidElement(g)&&g.type===a,S=l.find(g=>p(g,q)),R=l.find(g=>p(g,I)),C=typeof S?.props?.expandedSize=="number"?S.props.expandedSize:64,D=typeof R?.props?.expandedSize=="number"?R.props.expandedSize:288,L=!!S,w=!!R,A=(L?C:0)+(t.panelMode==="expanded"&&w?D:0);return e.createElement(Q.Root,{open:d,onOpenChange:g=>t.setLeftMode(g?"expanded":"collapsed")},e.createElement(Q.Content,{side:"start",style:{padding:0},width:{initial:`${A}px`}},e.createElement(be,null,e.createElement(Q.Title,null,"Navigation")),e.createElement("div",{className:"rt-ShellLeft"},u)))}if(W){const d=t.leftMode==="expanded",l=e.Children.toArray(u),p=(a,k)=>e.isValidElement(a)&&a.type===k,S=l.find(a=>p(a,q)),R=l.find(a=>p(a,I)),C=typeof S?.props?.expandedSize=="number"?S.props.expandedSize:64,D=typeof R?.props?.expandedSize=="number"?R.props.expandedSize:288,L=!!S,A=!!R&&(t.panelMode==="expanded"||t.peekTarget==="panel"),g=(L?C:0)+(A?D:0);return e.createElement("div",{...b,ref:T,className:O("rt-ShellLeft",r),"data-mode":t.leftMode,"data-peek":t.peekTarget==="left"||t.peekTarget==="rail"||t.peekTarget==="panel"||void 0,"data-presentation":f,style:{...o},"data-open":d||void 0},u)}return e.createElement("div",{...b,ref:T,className:O("rt-ShellLeft",r),"data-mode":t.leftMode,"data-peek":t.peekTarget==="left"||t.peekTarget==="rail"||t.peekTarget==="panel"||void 0,"data-presentation":f,style:{...o}},u)});_.displayName="Shell.Left";const q=e.forwardRef(({className:r,presentation:m,mode:s,defaultMode:c,onModeChange:E,expandedSize:P=64,collapsible:M,onExpand:i,onCollapse:u,children:o,style:b,...v},t)=>{const f=F();e.useEffect(()=>{f.onRailDefaults?.(P)},[f,P]);const h=f.leftMode==="expanded";return e.createElement("div",{...v,ref:t,className:O("rt-ShellRail",r),"data-mode":f.leftMode,"data-peek":f.leftResolvedPresentation!=="overlay"&&f.peekTarget==="rail"||void 0,style:{...b,"--rail-size":`${P}px`}},e.createElement("div",{className:"rt-ShellRailContent","data-visible":h||f.leftResolvedPresentation!=="overlay"&&f.peekTarget==="rail"||void 0},o))});q.displayName="Shell.Rail";const I=e.forwardRef(({className:r,mode:m,onModeChange:s,expandedSize:c=288,minSize:E,maxSize:P,resizable:M,collapsible:i=!0,onExpand:u,onCollapse:o,onResize:b,onResizeStart:v,onResizeEnd:t,snapPoints:f,snapTolerance:h,collapseThreshold:W,paneId:B,persistence:T,children:$,style:z,...K},d)=>{const l=F();e.useEffect(()=>{l.onPanelDefaults?.(c)},[l,c]);const p=e.useRef(null),S=e.useCallback(a=>{p.current=a,typeof d=="function"?d(a):d&&(d.current=a)},[d]),R=e.Children.toArray($),C=R.filter(a=>e.isValidElement(a)&&a.type===X),D=R.filter(a=>!(e.isValidElement(a)&&a.type===X)),L=l.leftResolvedPresentation==="overlay",w=e.useMemo(()=>{if(!B||T)return T;const a=`kookie-ui:shell:panel:${B}`;return{load:()=>{if(typeof window>"u")return;const H=window.localStorage.getItem(a);return H?Number(H):void 0},save:H=>{typeof window>"u"||window.localStorage.setItem(a,String(H))}}},[B,T]);e.useEffect(()=>{let a=!0;return(async()=>{if(!M||!w?.load||L)return;const k=await w.load();a&&typeof k=="number"&&p.current&&(p.current.style.setProperty("--panel-size",`${k}px`),b?.(k))})(),()=>{a=!1}},[M,w,b,L]),e.useEffect(()=>{p.current&&L&&p.current.style.setProperty("--panel-size",`${c}px`)},[L,c]),e.useEffect(()=>{if(p.current&&l.leftResolvedPresentation!=="overlay"&&l.leftMode==="expanded"&&l.panelMode==="expanded"){const a=p.current.parentElement||null;try{a?.style.removeProperty("width")}catch{}}},[l.leftResolvedPresentation,l.leftMode,l.panelMode]);const A=l.leftMode==="expanded"&&l.panelMode==="expanded",g=M&&l.leftResolvedPresentation!=="overlay"&&A?e.createElement(Re.Provider,{value:{containerRef:p,cssVarName:"--panel-size",minSize:typeof E=="number"?E:100,maxSize:typeof P=="number"?P:800,defaultSize:c,orientation:"vertical",edge:"end",computeNext:(a,k,H)=>{const G=getComputedStyle(p.current).direction==="rtl",N=a-k;return H+(G?-N:N)},onResize:b,onResizeStart:a=>{const H=p.current?.parentElement;try{H?.style.removeProperty("width")}catch{}v?.(a)},onResizeEnd:a=>{t?.(a),w?.save?.(a)},target:"panel",collapsible:!!i,snapPoints:f,snapTolerance:h??8,collapseThreshold:W,requestCollapse:()=>l.setPanelMode("collapsed"),requestToggle:()=>l.togglePane("panel")}},C.length>0?C.map((a,k)=>e.cloneElement(a,{key:a.key??k})):e.createElement(Me,null)):null;return e.createElement("div",{...K,ref:S,className:O("rt-ShellPanel",r),"data-mode":l.panelMode,"data-visible":A||l.leftResolvedPresentation!=="overlay"&&l.peekTarget==="panel"||void 0,"data-peek":l.leftResolvedPresentation!=="overlay"&&l.peekTarget==="panel"||void 0,style:{...z,"--panel-size":`${c}px`}},e.createElement("div",{className:"rt-ShellPanelContent","data-visible":A||void 0},D),g)});I.displayName="Shell.Panel",I.Handle=X;const ee=e.forwardRef(({className:r,...m},s)=>e.createElement("main",{...m,ref:s,className:O("rt-ShellContent",r)}));ee.displayName="Shell.Content";const re=e.forwardRef(({target:r,action:m="toggle",peekOnHover:s,onClick:c,onMouseEnter:E,onMouseLeave:P,children:M,...i},u)=>{const o=F(),b=e.useCallback(h=>{switch(c?.(h),o.peekTarget===r&&o.clearPeek(),m){case"toggle":o.togglePane(r);break;case"expand":o.expandPane(r);break;case"collapse":o.collapsePane(r);break}},[o,r,m,c]),v=(()=>{switch(r){case"left":case"rail":return o.leftMode==="collapsed";case"panel":return o.leftMode==="collapsed"||o.panelMode==="collapsed";case"sidebar":return o.sidebarMode==="collapsed";case"inspector":return o.inspectorMode==="collapsed";case"bottom":return o.bottomMode==="collapsed"}})(),t=e.useCallback(h=>{E?.(h),!(!s||!v)&&o.peekPane(r)},[E,s,v,o,r]),f=e.useCallback(h=>{P?.(h),s&&o.peekTarget===r&&o.clearPeek()},[P,s,o,r]);return e.createElement("button",{...i,ref:u,onClick:b,onMouseEnter:t,onMouseLeave:f,"data-shell-trigger":r,"data-shell-action":m},M)});re.displayName="Shell.Trigger";export{ae as Bottom,ee as Content,Z as Header,oe as Inspector,_ as Left,I as Panel,q as Rail,le as Root,Y as Sidebar,re as Trigger,ne as useResponsivePresentation,F as useShell};
|
|
2
2
|
//# sourceMappingURL=shell.js.map
|