@kopexa/split-page-layout 0.0.1 → 0.0.3

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-CMSSWXUB.mjs → chunk-JDU2RK75.mjs} +22 -4
  2. package/dist/index.d.mts +1 -0
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.js +19 -3
  5. package/dist/index.mjs +1 -1
  6. package/dist/split-page-layout.d.mts +4 -3
  7. package/dist/split-page-layout.d.ts +4 -3
  8. package/dist/split-page-layout.js +19 -3
  9. package/dist/split-page-layout.mjs +1 -1
  10. package/package.json +6 -5
package/dist/{chunk-CMSSWXUB.mjs → chunk-JDU2RK75.mjs} RENAMED
@@ -5,12 +5,15 @@ 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";
8
11
  import {
9
12
  splitPageLayout
10
13
  } from "@kopexa/theme";
11
14
  import { useIsMobile } from "@kopexa/use-is-mobile";
12
15
  import { useCallback, useMemo, useState } from "react";
13
- import { jsx, jsxs } from "react/jsx-runtime";
16
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
14
17
  var [Provider, useProvider] = createContext();
15
18
  var SplitPageLayoutRoot = (props) => {
16
19
  const {
@@ -54,12 +57,13 @@ var SplitPageLayoutRoot = (props) => {
54
57
  [styles, open, setOpen, isMobile, openMobile, toggleSidebar]
55
58
  );
56
59
  return /* @__PURE__ */ jsx(Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
57
- "div",
60
+ Resizable,
58
61
  {
59
62
  className: styles.root({
60
63
  className
61
64
  }),
62
65
  ...rest,
66
+ direction: "horizontal",
63
67
  children
64
68
  }
65
69
  ) });
@@ -69,7 +73,7 @@ var SplitPageLayoutContent = ({
69
73
  ...props
70
74
  }) => {
71
75
  const { styles } = useProvider();
72
- return /* @__PURE__ */ jsx("div", { className: styles.content({ className }), ...props });
76
+ return /* @__PURE__ */ jsx(Resizable.Panel, { className: styles.content({ className }), ...props });
73
77
  };
74
78
  var SplitPageLayoutPanel = ({
75
79
  className,
@@ -108,7 +112,21 @@ var SplitPageLayoutPanel = ({
108
112
  )
109
113
  ] });
110
114
  }
111
- return /* @__PURE__ */ jsx("div", { className: styles.panelContainer(), children: /* @__PURE__ */ jsx("div", { className: styles.panel({ className }), ...props, children }) });
115
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
116
+ /* @__PURE__ */ jsx(Resizable.Handle, {}),
117
+ /* @__PURE__ */ jsx(
118
+ Resizable.Panel,
119
+ {
120
+ className: styles.panelContainer({ className }),
121
+ defaultSize: 33,
122
+ minSize: 30,
123
+ maxSize: 50,
124
+ order: 2,
125
+ ...props,
126
+ children: /* @__PURE__ */ jsx("div", { className: styles.panel(), children })
127
+ }
128
+ )
129
+ ] });
112
130
  };
113
131
  var PageLayoutBleed = ({ className, ...props }) => {
114
132
  const { styles } = useProvider();
package/dist/index.d.mts CHANGED
@@ -1,4 +1,5 @@
1
1
  export { SplitPageLayout, SplitPageLayoutProps } from './split-page-layout.mjs';
2
2
  import 'react/jsx-runtime';
3
+ import '@kopexa/resizable';
3
4
  import '@kopexa/theme';
4
5
  import 'react';
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export { SplitPageLayout, SplitPageLayoutProps } from './split-page-layout.js';
2
2
  import 'react/jsx-runtime';
3
+ import '@kopexa/resizable';
3
4
  import '@kopexa/theme';
4
5
  import 'react';
package/dist/index.js CHANGED
@@ -30,6 +30,7 @@ var import_button = require("@kopexa/button");
30
30
  var import_drawer = require("@kopexa/drawer");
31
31
  var import_icons = require("@kopexa/icons");
32
32
  var import_react_utils = require("@kopexa/react-utils");
33
+ var import_resizable = require("@kopexa/resizable");
33
34
  var import_theme = require("@kopexa/theme");
34
35
  var import_use_is_mobile = require("@kopexa/use-is-mobile");
35
36
  var import_react = require("react");
@@ -77,12 +78,13 @@ var SplitPageLayoutRoot = (props) => {
77
78
  [styles, open, setOpen, isMobile, openMobile, toggleSidebar]
78
79
  );
79
80
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
80
- "div",
81
+ import_resizable.Resizable,
81
82
  {
82
83
  className: styles.root({
83
84
  className
84
85
  }),
85
86
  ...rest,
87
+ direction: "horizontal",
86
88
  children
87
89
  }
88
90
  ) });
@@ -92,7 +94,7 @@ var SplitPageLayoutContent = ({
92
94
  ...props
93
95
  }) => {
94
96
  const { styles } = useProvider();
95
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.content({ className }), ...props });
97
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_resizable.Resizable.Panel, { className: styles.content({ className }), ...props });
96
98
  };
97
99
  var SplitPageLayoutPanel = ({
98
100
  className,
@@ -131,7 +133,21 @@ var SplitPageLayoutPanel = ({
131
133
  )
132
134
  ] });
133
135
  }
134
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel({ className }), ...props, children }) });
136
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
137
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_resizable.Resizable.Handle, {}),
138
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
139
+ import_resizable.Resizable.Panel,
140
+ {
141
+ className: styles.panelContainer({ className }),
142
+ defaultSize: 33,
143
+ minSize: 30,
144
+ maxSize: 50,
145
+ order: 2,
146
+ ...props,
147
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel(), children })
148
+ }
149
+ )
150
+ ] });
135
151
  };
136
152
  var PageLayoutBleed = ({ className, ...props }) => {
137
153
  const { styles } = useProvider();
package/dist/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  SplitPageLayout
4
- } from "./chunk-CMSSWXUB.mjs";
4
+ } from "./chunk-JDU2RK75.mjs";
5
5
  export {
6
6
  SplitPageLayout
7
7
  };
package/dist/split-page-layout.d.mts CHANGED
@@ -1,16 +1,17 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { ResizableProps, ResizablePanelProps } from '@kopexa/resizable';
2
3
  import { SplitPageLayoutVariantProps } from '@kopexa/theme';
3
4
  import { ComponentProps } from 'react';
4
5
 
5
- type SplitPageLayoutProps = ComponentProps<"div"> & SplitPageLayoutVariantProps & {
6
+ type SplitPageLayoutProps = Omit<ResizableProps, "direction"> & SplitPageLayoutVariantProps & {
6
7
  defaultOpen?: boolean;
7
8
  open?: boolean;
8
9
  onOpenChange?: (open: boolean) => void;
9
10
  };
10
11
  type PageLayoutBleedProps = ComponentProps<"div">;
11
12
  declare const SplitPageLayout: ((props: SplitPageLayoutProps) => react_jsx_runtime.JSX.Element) & {
12
- Content: ({ className, ...props }: ComponentProps<"div">) => react_jsx_runtime.JSX.Element;
13
- Panel: ({ className, children, ...props }: ComponentProps<"div">) => react_jsx_runtime.JSX.Element;
13
+ Content: ({ className, ...props }: ResizablePanelProps) => react_jsx_runtime.JSX.Element;
14
+ Panel: ({ className, children, ...props }: ResizablePanelProps) => react_jsx_runtime.JSX.Element;
14
15
  Bleed: ({ className, ...props }: PageLayoutBleedProps) => react_jsx_runtime.JSX.Element;
15
16
  };
16
17
 
package/dist/split-page-layout.d.ts CHANGED
@@ -1,16 +1,17 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { ResizableProps, ResizablePanelProps } from '@kopexa/resizable';
2
3
  import { SplitPageLayoutVariantProps } from '@kopexa/theme';
3
4
  import { ComponentProps } from 'react';
4
5
 
5
- type SplitPageLayoutProps = ComponentProps<"div"> & SplitPageLayoutVariantProps & {
6
+ type SplitPageLayoutProps = Omit<ResizableProps, "direction"> & SplitPageLayoutVariantProps & {
6
7
  defaultOpen?: boolean;
7
8
  open?: boolean;
8
9
  onOpenChange?: (open: boolean) => void;
9
10
  };
10
11
  type PageLayoutBleedProps = ComponentProps<"div">;
11
12
  declare const SplitPageLayout: ((props: SplitPageLayoutProps) => react_jsx_runtime.JSX.Element) & {
12
- Content: ({ className, ...props }: ComponentProps<"div">) => react_jsx_runtime.JSX.Element;
13
- Panel: ({ className, children, ...props }: ComponentProps<"div">) => react_jsx_runtime.JSX.Element;
13
+ Content: ({ className, ...props }: ResizablePanelProps) => react_jsx_runtime.JSX.Element;
14
+ Panel: ({ className, children, ...props }: ResizablePanelProps) => react_jsx_runtime.JSX.Element;
14
15
  Bleed: ({ className, ...props }: PageLayoutBleedProps) => react_jsx_runtime.JSX.Element;
15
16
  };
16
17
 
package/dist/split-page-layout.js CHANGED
@@ -28,6 +28,7 @@ var import_button = require("@kopexa/button");
28
28
  var import_drawer = require("@kopexa/drawer");
29
29
  var import_icons = require("@kopexa/icons");
30
30
  var import_react_utils = require("@kopexa/react-utils");
31
+ var import_resizable = require("@kopexa/resizable");
31
32
  var import_theme = require("@kopexa/theme");
32
33
  var import_use_is_mobile = require("@kopexa/use-is-mobile");
33
34
  var import_react = require("react");
@@ -75,12 +76,13 @@ var SplitPageLayoutRoot = (props) => {
75
76
  [styles, open, setOpen, isMobile, openMobile, toggleSidebar]
76
77
  );
77
78
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
78
- "div",
79
+ import_resizable.Resizable,
79
80
  {
80
81
  className: styles.root({
81
82
  className
82
83
  }),
83
84
  ...rest,
85
+ direction: "horizontal",
84
86
  children
85
87
  }
86
88
  ) });
@@ -90,7 +92,7 @@ var SplitPageLayoutContent = ({
90
92
  ...props
91
93
  }) => {
92
94
  const { styles } = useProvider();
93
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.content({ className }), ...props });
95
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_resizable.Resizable.Panel, { className: styles.content({ className }), ...props });
94
96
  };
95
97
  var SplitPageLayoutPanel = ({
96
98
  className,
@@ -129,7 +131,21 @@ var SplitPageLayoutPanel = ({
129
131
  )
130
132
  ] });
131
133
  }
132
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel({ className }), ...props, children }) });
134
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
135
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_resizable.Resizable.Handle, {}),
136
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
137
+ import_resizable.Resizable.Panel,
138
+ {
139
+ className: styles.panelContainer({ className }),
140
+ defaultSize: 33,
141
+ minSize: 30,
142
+ maxSize: 50,
143
+ order: 2,
144
+ ...props,
145
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel(), children })
146
+ }
147
+ )
148
+ ] });
133
149
  };
134
150
  var PageLayoutBleed = ({ className, ...props }) => {
135
151
  const { styles } = useProvider();
package/dist/split-page-layout.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  SplitPageLayout
4
- } from "./chunk-CMSSWXUB.mjs";
4
+ } from "./chunk-JDU2RK75.mjs";
5
5
  export {
6
6
  SplitPageLayout
7
7
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kopexa/split-page-layout",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "split-page-layout"
@@ -28,15 +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": "1.6.1"
31
+ "@kopexa/theme": "1.6.3"
32
32
  },
33
33
  "dependencies": {
34
34
  "@kopexa/shared-utils": "1.1.5",
35
35
  "@kopexa/react-utils": "2.0.6",
36
36
  "@kopexa/use-is-mobile": "0.0.1",
37
- "@kopexa/drawer": "9.0.1",
38
- "@kopexa/button": "7.0.1",
39
- "@kopexa/icons": "9.0.1"
37
+ "@kopexa/drawer": "9.0.3",
38
+ "@kopexa/button": "7.0.3",
39
+ "@kopexa/icons": "9.0.3",
40
+ "@kopexa/resizable": "0.0.2"
40
41
  },
41
42
  "clean-package": "../../../clean-package.config.json",
42
43
  "module": "dist/index.mjs",