@kopexa/split-page-layout 17.0.90 → 17.1.0

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.
Files changed (10) hide show
  1. package/dist/{chunk-DVM5IUMK.mjs → chunk-BVXLTQNV.mjs} +31 -44
  2. package/dist/index.d.mts +1 -2
  3. package/dist/index.d.ts +1 -2
  4. package/dist/index.js +33 -43
  5. package/dist/index.mjs +5 -3
  6. package/dist/split-page-layout.d.mts +38 -8
  7. package/dist/split-page-layout.d.ts +38 -8
  8. package/dist/split-page-layout.js +34 -43
  9. package/dist/split-page-layout.mjs +6 -3
  10. package/package.json +9 -9
package/dist/{chunk-DVM5IUMK.mjs → chunk-BVXLTQNV.mjs} RENAMED
@@ -5,22 +5,19 @@ import { IconButton } from "@kopexa/button";
5
5
  import { Drawer } from "@kopexa/drawer";
6
6
  import { PanelLeftIcon } from "@kopexa/icons";
7
7
  import { createContext } from "@kopexa/react-utils";
8
- import {
9
- Resizable
10
- } from "@kopexa/resizable";
11
8
  import {
12
9
  splitPageLayout
13
10
  } from "@kopexa/theme";
14
11
  import { useIsMobile } from "@kopexa/use-is-mobile";
15
12
  import { useCallback, useMemo, useState } from "react";
16
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
13
+ import { jsx, jsxs } from "react/jsx-runtime";
17
14
  var [Provider, useProvider] = createContext();
18
15
  var SplitPageLayoutRoot = (props) => {
19
16
  const {
20
17
  className,
21
18
  children,
22
19
  inset,
23
- defaultOpen = false,
20
+ defaultOpen = true,
24
21
  open: openProp,
25
22
  onOpenChange: setOpenProp,
26
23
  ...rest
@@ -56,41 +53,45 @@ var SplitPageLayoutRoot = (props) => {
56
53
  }),
57
54
  [styles, open, setOpen, isMobile, openMobile, toggleSidebar]
58
55
  );
59
- return /* @__PURE__ */ jsx(Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
60
- Resizable,
61
- {
62
- className: styles.root({
63
- className
64
- }),
65
- ...rest,
66
- direction: "horizontal",
67
- children
68
- }
69
- ) });
56
+ return /* @__PURE__ */ jsx(Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: styles.root({ className }), ...rest, children }) });
70
57
  };
71
58
  var SplitPageLayoutContent = ({
72
59
  className,
73
60
  children,
61
+ // legacy resize props — ignored
62
+ defaultSize: _defaultSize,
63
+ minSize: _minSize,
64
+ maxSize: _maxSize,
65
+ order: _order,
66
+ collapsible: _collapsible,
67
+ collapsedSize: _collapsedSize,
74
68
  ...props
75
69
  }) => {
76
- const { styles } = useProvider();
77
- return /* @__PURE__ */ jsx(Resizable.Panel, { className: styles.content({ className }), ...props, children: /* @__PURE__ */ jsx("div", { className: styles.contentBody(), children }) });
70
+ const { styles, open, isMobile } = useProvider();
71
+ const elevated = open && !isMobile;
72
+ return /* @__PURE__ */ jsx("div", { className: styles.content({ elevated, className }), ...props, children: /* @__PURE__ */ jsx("div", { className: styles.contentBody(), children }) });
78
73
  };
79
74
  var SplitPageLayoutPanel = ({
80
75
  className,
81
76
  children,
77
+ defaultSize: _defaultSize,
78
+ minSize: _minSize,
79
+ maxSize: _maxSize,
80
+ order: _order,
81
+ collapsible: _collapsible,
82
+ collapsedSize: _collapsedSize,
82
83
  ...props
83
84
  }) => {
84
- const { styles, isMobile, openMobile, setOpenMobile } = useProvider();
85
+ const { styles, isMobile, open, openMobile, setOpenMobile } = useProvider();
85
86
  if (isMobile) {
86
87
  return /* @__PURE__ */ jsxs("div", { className: styles.mobileWrapper(), children: [
87
88
  /* @__PURE__ */ jsx("div", { className: styles.mobileContainer(), children: /* @__PURE__ */ jsx(
88
89
  IconButton,
89
90
  {
90
- variant: "outline",
91
- color: "secondary",
92
- "aria-label": "Toggle panel",
91
+ variant: "solid",
92
+ "aria-label": "Details anzeigen",
93
93
  onClick: () => setOpenMobile(true),
94
+ className: "size-12 rounded-full shadow-lg",
94
95
  children: /* @__PURE__ */ jsx(PanelLeftIcon, {})
95
96
  }
96
97
  ) }),
@@ -101,44 +102,30 @@ var SplitPageLayoutPanel = ({
101
102
  onOpenChange: setOpenMobile,
102
103
  placement: "right",
103
104
  size: "full",
104
- ...props,
105
105
  children: /* @__PURE__ */ jsxs(Drawer.Content, { showCloseButton: true, children: [
106
106
  /* @__PURE__ */ jsxs(Drawer.Header, { className: "sr-only", children: [
107
107
  /* @__PURE__ */ jsx(Drawer.Title, { children: "Panel" }),
108
108
  /* @__PURE__ */ jsx(Drawer.Description, { children: "Displays the mobile panel." })
109
109
  ] }),
110
- /* @__PURE__ */ jsx("div", { className: styles.panelContainer(), children: /* @__PURE__ */ jsx("div", { className: styles.panel(), children: /* @__PURE__ */ jsx("div", { className: styles.panelBody(), children }) }) })
110
+ /* @__PURE__ */ jsx("div", { className: styles.panel(), children: /* @__PURE__ */ jsx("div", { className: styles.panelBody(), children }) })
111
111
  ] })
112
112
  }
113
113
  )
114
114
  ] });
115
115
  }
116
- return /* @__PURE__ */ jsxs(Fragment, { children: [
117
- /* @__PURE__ */ jsx(Resizable.Handle, {}),
118
- /* @__PURE__ */ jsx(
119
- Resizable.Panel,
120
- {
121
- className: styles.panelContainer({ className }),
122
- defaultSize: 33,
123
- minSize: 30,
124
- maxSize: 50,
125
- order: 2,
126
- ...props,
127
- children: /* @__PURE__ */ jsx("div", { className: styles.panel(), children: /* @__PURE__ */ jsx("div", { className: styles.panelBody(), children }) })
128
- }
129
- )
130
- ] });
116
+ if (!open) return null;
117
+ return /* @__PURE__ */ jsx("aside", { className: styles.panelContainer({ className }), ...props, children: /* @__PURE__ */ jsx("div", { className: styles.panel(), children: /* @__PURE__ */ jsx("div", { className: styles.panelBody(), children }) }) });
131
118
  };
132
119
  var PageLayoutBleed = ({ className, ...props }) => {
133
120
  const { styles } = useProvider();
134
121
  return /* @__PURE__ */ jsx("div", { className: styles.bleed({ className }), ...props });
135
122
  };
136
- var SplitPageLayout = Object.assign(SplitPageLayoutRoot, {
137
- Content: SplitPageLayoutContent,
138
- Panel: SplitPageLayoutPanel,
139
- Bleed: PageLayoutBleed
140
- });
123
+ var SplitPageLayout = SplitPageLayoutRoot;
124
+ SplitPageLayout.Content = SplitPageLayoutContent;
125
+ SplitPageLayout.Panel = SplitPageLayoutPanel;
126
+ SplitPageLayout.Bleed = PageLayoutBleed;
141
127
 
142
128
  export {
129
+ useProvider,
143
130
  SplitPageLayout
144
131
  };
package/dist/index.d.mts CHANGED
@@ -1,5 +1,4 @@
1
- export { SplitPageLayout, SplitPageLayoutProps } from './split-page-layout.mjs';
1
+ export { SplitPageLayout, SplitPageLayoutProps, useSplitPageLayout } from './split-page-layout.mjs';
2
2
  import 'react/jsx-runtime';
3
- import '@kopexa/resizable';
4
3
  import '@kopexa/theme';
5
4
  import 'react';
package/dist/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
- export { SplitPageLayout, SplitPageLayoutProps } from './split-page-layout.js';
1
+ export { SplitPageLayout, SplitPageLayoutProps, useSplitPageLayout } from './split-page-layout.js';
2
2
  import 'react/jsx-runtime';
3
- import '@kopexa/resizable';
4
3
  import '@kopexa/theme';
5
4
  import 'react';
package/dist/index.js CHANGED
@@ -21,7 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
21
21
  // src/index.ts
22
22
  var index_exports = {};
23
23
  __export(index_exports, {
24
- SplitPageLayout: () => SplitPageLayout
24
+ SplitPageLayout: () => SplitPageLayout,
25
+ useSplitPageLayout: () => useProvider
25
26
  });
26
27
  module.exports = __toCommonJS(index_exports);
27
28
 
@@ -30,7 +31,6 @@ var import_button = require("@kopexa/button");
30
31
  var import_drawer = require("@kopexa/drawer");
31
32
  var import_icons = require("@kopexa/icons");
32
33
  var import_react_utils = require("@kopexa/react-utils");
33
- var import_resizable = require("@kopexa/resizable");
34
34
  var import_theme = require("@kopexa/theme");
35
35
  var import_use_is_mobile = require("@kopexa/use-is-mobile");
36
36
  var import_react = require("react");
@@ -41,7 +41,7 @@ var SplitPageLayoutRoot = (props) => {
41
41
  className,
42
42
  children,
43
43
  inset,
44
- defaultOpen = false,
44
+ defaultOpen = true,
45
45
  open: openProp,
46
46
  onOpenChange: setOpenProp,
47
47
  ...rest
@@ -77,41 +77,45 @@ var SplitPageLayoutRoot = (props) => {
77
77
  }),
78
78
  [styles, open, setOpen, isMobile, openMobile, toggleSidebar]
79
79
  );
80
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
81
- import_resizable.Resizable,
82
- {
83
- className: styles.root({
84
- className
85
- }),
86
- ...rest,
87
- direction: "horizontal",
88
- children
89
- }
90
- ) });
80
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.root({ className }), ...rest, children }) });
91
81
  };
92
82
  var SplitPageLayoutContent = ({
93
83
  className,
94
84
  children,
85
+ // legacy resize props — ignored
86
+ defaultSize: _defaultSize,
87
+ minSize: _minSize,
88
+ maxSize: _maxSize,
89
+ order: _order,
90
+ collapsible: _collapsible,
91
+ collapsedSize: _collapsedSize,
95
92
  ...props
96
93
  }) => {
97
- const { styles } = useProvider();
98
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_resizable.Resizable.Panel, { className: styles.content({ className }), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.contentBody(), children }) });
94
+ const { styles, open, isMobile } = useProvider();
95
+ const elevated = open && !isMobile;
96
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.content({ elevated, className }), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.contentBody(), children }) });
99
97
  };
100
98
  var SplitPageLayoutPanel = ({
101
99
  className,
102
100
  children,
101
+ defaultSize: _defaultSize,
102
+ minSize: _minSize,
103
+ maxSize: _maxSize,
104
+ order: _order,
105
+ collapsible: _collapsible,
106
+ collapsedSize: _collapsedSize,
103
107
  ...props
104
108
  }) => {
105
- const { styles, isMobile, openMobile, setOpenMobile } = useProvider();
109
+ const { styles, isMobile, open, openMobile, setOpenMobile } = useProvider();
106
110
  if (isMobile) {
107
111
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.mobileWrapper(), children: [
108
112
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.mobileContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
109
113
  import_button.IconButton,
110
114
  {
111
- variant: "outline",
112
- color: "secondary",
113
- "aria-label": "Toggle panel",
115
+ variant: "solid",
116
+ "aria-label": "Details anzeigen",
114
117
  onClick: () => setOpenMobile(true),
118
+ className: "size-12 rounded-full shadow-lg",
115
119
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PanelLeftIcon, {})
116
120
  }
117
121
  ) }),
@@ -122,44 +126,30 @@ var SplitPageLayoutPanel = ({
122
126
  onOpenChange: setOpenMobile,
123
127
  placement: "right",
124
128
  size: "full",
125
- ...props,
126
129
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_drawer.Drawer.Content, { showCloseButton: true, children: [
127
130
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_drawer.Drawer.Header, { className: "sr-only", children: [
128
131
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.Drawer.Title, { children: "Panel" }),
129
132
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.Drawer.Description, { children: "Displays the mobile panel." })
130
133
  ] }),
131
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelBody(), children }) }) })
134
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelBody(), children }) })
132
135
  ] })
133
136
  }
134
137
  )
135
138
  ] });
136
139
  }
137
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
138
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_resizable.Resizable.Handle, {}),
139
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
140
- import_resizable.Resizable.Panel,
141
- {
142
- className: styles.panelContainer({ className }),
143
- defaultSize: 33,
144
- minSize: 30,
145
- maxSize: 50,
146
- order: 2,
147
- ...props,
148
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelBody(), children }) })
149
- }
150
- )
151
- ] });
140
+ if (!open) return null;
141
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", { className: styles.panelContainer({ className }), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelBody(), children }) }) });
152
142
  };
153
143
  var PageLayoutBleed = ({ className, ...props }) => {
154
144
  const { styles } = useProvider();
155
145
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.bleed({ className }), ...props });
156
146
  };
157
- var SplitPageLayout = Object.assign(SplitPageLayoutRoot, {
158
- Content: SplitPageLayoutContent,
159
- Panel: SplitPageLayoutPanel,
160
- Bleed: PageLayoutBleed
161
- });
147
+ var SplitPageLayout = SplitPageLayoutRoot;
148
+ SplitPageLayout.Content = SplitPageLayoutContent;
149
+ SplitPageLayout.Panel = SplitPageLayoutPanel;
150
+ SplitPageLayout.Bleed = PageLayoutBleed;
162
151
  // Annotate the CommonJS export names for ESM import in node:
163
152
  0 && (module.exports = {
164
- SplitPageLayout
153
+ SplitPageLayout,
154
+ useSplitPageLayout
165
155
  });
package/dist/index.mjs CHANGED
@@ -1,7 +1,9 @@
1
1
  "use client";
2
2
  import {
3
- SplitPageLayout
4
- } from "./chunk-DVM5IUMK.mjs";
3
+ SplitPageLayout,
4
+ useProvider
5
+ } from "./chunk-BVXLTQNV.mjs";
5
6
  export {
6
- SplitPageLayout
7
+ SplitPageLayout,
8
+ useProvider as useSplitPageLayout
7
9
  };
package/dist/split-page-layout.d.mts CHANGED
@@ -1,18 +1,48 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { ResizableProps, ResizablePanelProps } from '@kopexa/resizable';
3
- import { SplitPageLayoutVariantProps } from '@kopexa/theme';
2
+ import { SplitPageLayoutVariantProps, splitPageLayout } from '@kopexa/theme';
4
3
  import { ComponentProps } from 'react';
5
4
 
6
- type SplitPageLayoutProps = Omit<ResizableProps, "direction"> & SplitPageLayoutVariantProps & {
5
+ /**
6
+ * Split page layout: a main content area + a fixed-width side panel.
7
+ * - Desktop/tablet: content (flex-1) + panel (fixed width). When the panel is
8
+ * visible the content sits "elevated" (rounded top-right + shadow) above the
9
+ * recessed surround.
10
+ * - Mobile: the panel collapses into a right-side drawer toggled by a button.
11
+ */
12
+ type SplitPageLayoutContext = {
13
+ styles: ReturnType<typeof splitPageLayout>;
14
+ open: boolean;
15
+ setOpen: (open: boolean) => void;
16
+ isMobile: boolean;
17
+ openMobile: boolean;
18
+ setOpenMobile: (open: boolean) => void;
19
+ toggleSidebar: () => void;
20
+ };
21
+ declare const useProvider: () => SplitPageLayoutContext;
22
+ type SplitPageLayoutProps = ComponentProps<"div"> & SplitPageLayoutVariantProps & {
23
+ /** Whether the side panel is visible by default (desktop). */
7
24
  defaultOpen?: boolean;
8
25
  open?: boolean;
9
26
  onOpenChange?: (open: boolean) => void;
10
27
  };
28
+ declare const SplitPageLayoutRoot: (props: SplitPageLayoutProps) => react_jsx_runtime.JSX.Element;
29
+ /** Props accepted on Content/Panel. Legacy resize props are tolerated + ignored. */
30
+ type SplitPanelProps = ComponentProps<"div"> & {
31
+ defaultSize?: number;
32
+ minSize?: number;
33
+ maxSize?: number;
34
+ order?: number;
35
+ collapsible?: boolean;
36
+ collapsedSize?: number;
37
+ };
38
+ declare const SplitPageLayoutContent: ({ className, children, defaultSize: _defaultSize, minSize: _minSize, maxSize: _maxSize, order: _order, collapsible: _collapsible, collapsedSize: _collapsedSize, ...props }: SplitPanelProps) => react_jsx_runtime.JSX.Element;
39
+ declare const SplitPageLayoutPanel: ({ className, children, defaultSize: _defaultSize, minSize: _minSize, maxSize: _maxSize, order: _order, collapsible: _collapsible, collapsedSize: _collapsedSize, ...props }: SplitPanelProps) => react_jsx_runtime.JSX.Element | null;
11
40
  type PageLayoutBleedProps = ComponentProps<"div">;
12
- declare const SplitPageLayout: ((props: SplitPageLayoutProps) => react_jsx_runtime.JSX.Element) & {
13
- Content: ({ className, children, ...props }: ResizablePanelProps) => react_jsx_runtime.JSX.Element;
14
- Panel: ({ className, children, ...props }: ResizablePanelProps) => react_jsx_runtime.JSX.Element;
15
- Bleed: ({ className, ...props }: PageLayoutBleedProps) => react_jsx_runtime.JSX.Element;
41
+ declare const PageLayoutBleed: ({ className, ...props }: PageLayoutBleedProps) => react_jsx_runtime.JSX.Element;
42
+ declare const SplitPageLayout: typeof SplitPageLayoutRoot & {
43
+ Content: typeof SplitPageLayoutContent;
44
+ Panel: typeof SplitPageLayoutPanel;
45
+ Bleed: typeof PageLayoutBleed;
16
46
  };
17
47
 
18
- export { SplitPageLayout, type SplitPageLayoutProps };
48
+ export { SplitPageLayout, type SplitPageLayoutProps, useProvider as useSplitPageLayout };
package/dist/split-page-layout.d.ts CHANGED
@@ -1,18 +1,48 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { ResizableProps, ResizablePanelProps } from '@kopexa/resizable';
3
- import { SplitPageLayoutVariantProps } from '@kopexa/theme';
2
+ import { SplitPageLayoutVariantProps, splitPageLayout } from '@kopexa/theme';
4
3
  import { ComponentProps } from 'react';
5
4
 
6
- type SplitPageLayoutProps = Omit<ResizableProps, "direction"> & SplitPageLayoutVariantProps & {
5
+ /**
6
+ * Split page layout: a main content area + a fixed-width side panel.
7
+ * - Desktop/tablet: content (flex-1) + panel (fixed width). When the panel is
8
+ * visible the content sits "elevated" (rounded top-right + shadow) above the
9
+ * recessed surround.
10
+ * - Mobile: the panel collapses into a right-side drawer toggled by a button.
11
+ */
12
+ type SplitPageLayoutContext = {
13
+ styles: ReturnType<typeof splitPageLayout>;
14
+ open: boolean;
15
+ setOpen: (open: boolean) => void;
16
+ isMobile: boolean;
17
+ openMobile: boolean;
18
+ setOpenMobile: (open: boolean) => void;
19
+ toggleSidebar: () => void;
20
+ };
21
+ declare const useProvider: () => SplitPageLayoutContext;
22
+ type SplitPageLayoutProps = ComponentProps<"div"> & SplitPageLayoutVariantProps & {
23
+ /** Whether the side panel is visible by default (desktop). */
7
24
  defaultOpen?: boolean;
8
25
  open?: boolean;
9
26
  onOpenChange?: (open: boolean) => void;
10
27
  };
28
+ declare const SplitPageLayoutRoot: (props: SplitPageLayoutProps) => react_jsx_runtime.JSX.Element;
29
+ /** Props accepted on Content/Panel. Legacy resize props are tolerated + ignored. */
30
+ type SplitPanelProps = ComponentProps<"div"> & {
31
+ defaultSize?: number;
32
+ minSize?: number;
33
+ maxSize?: number;
34
+ order?: number;
35
+ collapsible?: boolean;
36
+ collapsedSize?: number;
37
+ };
38
+ declare const SplitPageLayoutContent: ({ className, children, defaultSize: _defaultSize, minSize: _minSize, maxSize: _maxSize, order: _order, collapsible: _collapsible, collapsedSize: _collapsedSize, ...props }: SplitPanelProps) => react_jsx_runtime.JSX.Element;
39
+ declare const SplitPageLayoutPanel: ({ className, children, defaultSize: _defaultSize, minSize: _minSize, maxSize: _maxSize, order: _order, collapsible: _collapsible, collapsedSize: _collapsedSize, ...props }: SplitPanelProps) => react_jsx_runtime.JSX.Element | null;
11
40
  type PageLayoutBleedProps = ComponentProps<"div">;
12
- declare const SplitPageLayout: ((props: SplitPageLayoutProps) => react_jsx_runtime.JSX.Element) & {
13
- Content: ({ className, children, ...props }: ResizablePanelProps) => react_jsx_runtime.JSX.Element;
14
- Panel: ({ className, children, ...props }: ResizablePanelProps) => react_jsx_runtime.JSX.Element;
15
- Bleed: ({ className, ...props }: PageLayoutBleedProps) => react_jsx_runtime.JSX.Element;
41
+ declare const PageLayoutBleed: ({ className, ...props }: PageLayoutBleedProps) => react_jsx_runtime.JSX.Element;
42
+ declare const SplitPageLayout: typeof SplitPageLayoutRoot & {
43
+ Content: typeof SplitPageLayoutContent;
44
+ Panel: typeof SplitPageLayoutPanel;
45
+ Bleed: typeof PageLayoutBleed;
16
46
  };
17
47
 
18
- export { SplitPageLayout, type SplitPageLayoutProps };
48
+ export { SplitPageLayout, type SplitPageLayoutProps, useProvider as useSplitPageLayout };
package/dist/split-page-layout.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  "use strict";
3
+ "use client";
3
4
  var __defProp = Object.defineProperty;
4
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
6
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -21,14 +22,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
21
22
  // src/split-page-layout.tsx
22
23
  var split_page_layout_exports = {};
23
24
  __export(split_page_layout_exports, {
24
- SplitPageLayout: () => SplitPageLayout
25
+ SplitPageLayout: () => SplitPageLayout,
26
+ useSplitPageLayout: () => useProvider
25
27
  });
26
28
  module.exports = __toCommonJS(split_page_layout_exports);
27
29
  var import_button = require("@kopexa/button");
28
30
  var import_drawer = require("@kopexa/drawer");
29
31
  var import_icons = require("@kopexa/icons");
30
32
  var import_react_utils = require("@kopexa/react-utils");
31
- var import_resizable = require("@kopexa/resizable");
32
33
  var import_theme = require("@kopexa/theme");
33
34
  var import_use_is_mobile = require("@kopexa/use-is-mobile");
34
35
  var import_react = require("react");
@@ -39,7 +40,7 @@ var SplitPageLayoutRoot = (props) => {
39
40
  className,
40
41
  children,
41
42
  inset,
42
- defaultOpen = false,
43
+ defaultOpen = true,
43
44
  open: openProp,
44
45
  onOpenChange: setOpenProp,
45
46
  ...rest
@@ -75,41 +76,45 @@ var SplitPageLayoutRoot = (props) => {
75
76
  }),
76
77
  [styles, open, setOpen, isMobile, openMobile, toggleSidebar]
77
78
  );
78
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
79
- import_resizable.Resizable,
80
- {
81
- className: styles.root({
82
- className
83
- }),
84
- ...rest,
85
- direction: "horizontal",
86
- children
87
- }
88
- ) });
79
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.root({ className }), ...rest, children }) });
89
80
  };
90
81
  var SplitPageLayoutContent = ({
91
82
  className,
92
83
  children,
84
+ // legacy resize props — ignored
85
+ defaultSize: _defaultSize,
86
+ minSize: _minSize,
87
+ maxSize: _maxSize,
88
+ order: _order,
89
+ collapsible: _collapsible,
90
+ collapsedSize: _collapsedSize,
93
91
  ...props
94
92
  }) => {
95
- const { styles } = useProvider();
96
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_resizable.Resizable.Panel, { className: styles.content({ className }), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.contentBody(), children }) });
93
+ const { styles, open, isMobile } = useProvider();
94
+ const elevated = open && !isMobile;
95
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.content({ elevated, className }), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.contentBody(), children }) });
97
96
  };
98
97
  var SplitPageLayoutPanel = ({
99
98
  className,
100
99
  children,
100
+ defaultSize: _defaultSize,
101
+ minSize: _minSize,
102
+ maxSize: _maxSize,
103
+ order: _order,
104
+ collapsible: _collapsible,
105
+ collapsedSize: _collapsedSize,
101
106
  ...props
102
107
  }) => {
103
- const { styles, isMobile, openMobile, setOpenMobile } = useProvider();
108
+ const { styles, isMobile, open, openMobile, setOpenMobile } = useProvider();
104
109
  if (isMobile) {
105
110
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.mobileWrapper(), children: [
106
111
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.mobileContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
107
112
  import_button.IconButton,
108
113
  {
109
- variant: "outline",
110
- color: "secondary",
111
- "aria-label": "Toggle panel",
114
+ variant: "solid",
115
+ "aria-label": "Details anzeigen",
112
116
  onClick: () => setOpenMobile(true),
117
+ className: "size-12 rounded-full shadow-lg",
113
118
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PanelLeftIcon, {})
114
119
  }
115
120
  ) }),
@@ -120,44 +125,30 @@ var SplitPageLayoutPanel = ({
120
125
  onOpenChange: setOpenMobile,
121
126
  placement: "right",
122
127
  size: "full",
123
- ...props,
124
128
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_drawer.Drawer.Content, { showCloseButton: true, children: [
125
129
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_drawer.Drawer.Header, { className: "sr-only", children: [
126
130
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.Drawer.Title, { children: "Panel" }),
127
131
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.Drawer.Description, { children: "Displays the mobile panel." })
128
132
  ] }),
129
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelBody(), children }) }) })
133
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelBody(), children }) })
130
134
  ] })
131
135
  }
132
136
  )
133
137
  ] });
134
138
  }
135
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
136
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_resizable.Resizable.Handle, {}),
137
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
138
- import_resizable.Resizable.Panel,
139
- {
140
- className: styles.panelContainer({ className }),
141
- defaultSize: 33,
142
- minSize: 30,
143
- maxSize: 50,
144
- order: 2,
145
- ...props,
146
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelBody(), children }) })
147
- }
148
- )
149
- ] });
139
+ if (!open) return null;
140
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", { className: styles.panelContainer({ className }), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelBody(), children }) }) });
150
141
  };
151
142
  var PageLayoutBleed = ({ className, ...props }) => {
152
143
  const { styles } = useProvider();
153
144
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.bleed({ className }), ...props });
154
145
  };
155
- var SplitPageLayout = Object.assign(SplitPageLayoutRoot, {
156
- Content: SplitPageLayoutContent,
157
- Panel: SplitPageLayoutPanel,
158
- Bleed: PageLayoutBleed
159
- });
146
+ var SplitPageLayout = SplitPageLayoutRoot;
147
+ SplitPageLayout.Content = SplitPageLayoutContent;
148
+ SplitPageLayout.Panel = SplitPageLayoutPanel;
149
+ SplitPageLayout.Bleed = PageLayoutBleed;
160
150
  // Annotate the CommonJS export names for ESM import in node:
161
151
  0 && (module.exports = {
162
- SplitPageLayout
152
+ SplitPageLayout,
153
+ useSplitPageLayout
163
154
  });
package/dist/split-page-layout.mjs CHANGED
@@ -1,7 +1,10 @@
1
1
  "use client";
2
+ "use client";
2
3
  import {
3
- SplitPageLayout
4
- } from "./chunk-DVM5IUMK.mjs";
4
+ SplitPageLayout,
5
+ useProvider
6
+ } from "./chunk-BVXLTQNV.mjs";
5
7
  export {
6
- SplitPageLayout
8
+ SplitPageLayout,
9
+ useProvider as useSplitPageLayout
7
10
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kopexa/split-page-layout",
3
- "version": "17.0.90",
3
+ "version": "17.1.0",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "split-page-layout"
@@ -28,16 +28,16 @@
28
28
  "react": ">=19.0.0-rc.0",
29
29
  "react-dom": ">=19.0.0-rc.0",
30
30
  "motion": ">=12.23.6",
31
- "@kopexa/theme": "17.32.4"
31
+ "@kopexa/theme": "17.33.0"
32
32
  },
33
33
  "dependencies": {
34
- "@kopexa/react-utils": "17.1.32",
35
- "@kopexa/use-is-mobile": "17.0.90",
36
- "@kopexa/drawer": "17.2.55",
37
- "@kopexa/button": "17.0.90",
38
- "@kopexa/shared-utils": "17.0.90",
39
- "@kopexa/icons": "17.10.19",
40
- "@kopexa/resizable": "17.0.90"
34
+ "@kopexa/shared-utils": "17.0.91",
35
+ "@kopexa/react-utils": "17.1.33",
36
+ "@kopexa/use-is-mobile": "17.0.91",
37
+ "@kopexa/drawer": "17.2.56",
38
+ "@kopexa/icons": "17.10.20",
39
+ "@kopexa/resizable": "17.0.91",
40
+ "@kopexa/button": "17.0.91"
41
41
  },
42
42
  "clean-package": "../../../clean-package.config.json",
43
43
  "module": "dist/index.mjs",