@tcn/ui 0.9.0 → 0.10.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.
- package/dist/bar.css +1 -0
- package/dist/body.css +1 -1
- package/dist/body.module-BbFZ7KNP.js +5 -0
- package/dist/body.module-BbFZ7KNP.js.map +1 -0
- package/dist/divider.css +1 -1
- package/dist/footer.css +1 -1
- package/dist/layouts/bar/bar.d.ts +5 -0
- package/dist/layouts/bar/bar.d.ts.map +1 -0
- package/dist/layouts/bar/bar.js +20 -0
- package/dist/layouts/bar/bar.js.map +1 -0
- package/dist/layouts/body/body.d.ts +2 -2
- package/dist/layouts/body/body.d.ts.map +1 -1
- package/dist/layouts/body/body.js +12 -12
- package/dist/layouts/body/body.js.map +1 -1
- package/dist/layouts/body/h_body.d.ts.map +1 -1
- package/dist/layouts/body/h_body.js +18 -12
- package/dist/layouts/body/h_body.js.map +1 -1
- package/dist/layouts/body/v_body.d.ts.map +1 -1
- package/dist/layouts/body/v_body.js +16 -10
- package/dist/layouts/body/v_body.js.map +1 -1
- package/dist/layouts/footer/footer.d.ts +2 -3
- package/dist/layouts/footer/footer.d.ts.map +1 -1
- package/dist/layouts/footer/footer.js +7 -7
- package/dist/layouts/footer/footer.js.map +1 -1
- package/dist/layouts/header/header.d.ts +2 -2
- package/dist/layouts/header/header.d.ts.map +1 -1
- package/dist/layouts/header/header.js +13 -21
- package/dist/layouts/header/header.js.map +1 -1
- package/dist/layouts/index.d.ts +0 -1
- package/dist/layouts/index.d.ts.map +1 -1
- package/dist/layouts/index.js +17 -19
- package/dist/layouts/index.js.map +1 -1
- package/dist/layouts/rail/rail.js +41 -41
- package/dist/layouts/rail/rail.js.map +1 -1
- package/dist/layouts/rail/side/side.d.ts.map +1 -1
- package/dist/layouts/rail/side/side.js +1 -1
- package/dist/layouts/rail/side/side.js.map +1 -1
- package/dist/layouts/rail/utility_strip/utility_strip.d.ts.map +1 -1
- package/dist/layouts/rail/utility_strip/utility_strip.js +21 -17
- package/dist/layouts/rail/utility_strip/utility_strip.js.map +1 -1
- package/dist/layouts/scaffold/scaffold.js +32 -32
- package/dist/layouts/scaffold/scaffold.js.map +1 -1
- package/dist/layouts/utility_bar/utility_bar.d.ts +2 -2
- package/dist/layouts/utility_bar/utility_bar.d.ts.map +1 -1
- package/dist/layouts/utility_bar/utility_bar.js +17 -19
- package/dist/layouts/utility_bar/utility_bar.js.map +1 -1
- package/dist/overlay/frame/frame.js +3 -3
- package/dist/overlay/frame/frame.js.map +1 -1
- package/dist/panel.css +1 -0
- package/dist/rail.css +1 -1
- package/dist/scaffold.css +1 -1
- package/dist/side.css +1 -1
- package/dist/stacks/box/bottom_resize_handle.d.ts +2 -2
- package/dist/stacks/box/bottom_resize_handle.d.ts.map +1 -1
- package/dist/stacks/box/bottom_resize_handle.js +12 -10
- package/dist/stacks/box/bottom_resize_handle.js.map +1 -1
- package/dist/stacks/box/box.d.ts +4 -4
- package/dist/stacks/box/box.d.ts.map +1 -1
- package/dist/stacks/box/box.js +26 -26
- package/dist/stacks/box/box.js.map +1 -1
- package/dist/stacks/box/end_resize_handle.d.ts +2 -2
- package/dist/stacks/box/end_resize_handle.d.ts.map +1 -1
- package/dist/stacks/box/end_resize_handle.js +6 -5
- package/dist/stacks/box/end_resize_handle.js.map +1 -1
- package/dist/stacks/box/left_resize_handle.d.ts +2 -2
- package/dist/stacks/box/left_resize_handle.d.ts.map +1 -1
- package/dist/stacks/box/left_resize_handle.js +10 -9
- package/dist/stacks/box/left_resize_handle.js.map +1 -1
- package/dist/stacks/box/resize_handlers.d.ts +2 -2
- package/dist/stacks/box/resize_handlers.d.ts.map +1 -1
- package/dist/stacks/box/resize_handlers.js +24 -24
- package/dist/stacks/box/resize_handlers.js.map +1 -1
- package/dist/stacks/box/right_resize_handle.d.ts +2 -2
- package/dist/stacks/box/right_resize_handle.d.ts.map +1 -1
- package/dist/stacks/box/right_resize_handle.js +6 -5
- package/dist/stacks/box/right_resize_handle.js.map +1 -1
- package/dist/stacks/box/start_resize_handle.d.ts +2 -2
- package/dist/stacks/box/start_resize_handle.d.ts.map +1 -1
- package/dist/stacks/box/start_resize_handle.js +4 -4
- package/dist/stacks/box/start_resize_handle.js.map +1 -1
- package/dist/stacks/box/top_resize_handle.d.ts +2 -2
- package/dist/stacks/box/top_resize_handle.d.ts.map +1 -1
- package/dist/stacks/box/top_resize_handle.js +2 -1
- package/dist/stacks/box/top_resize_handle.js.map +1 -1
- package/dist/stacks/h_collapsible_box.d.ts.map +1 -1
- package/dist/stacks/h_collapsible_box.js +24 -24
- package/dist/stacks/h_collapsible_box.js.map +1 -1
- package/dist/stacks/v_collapsible_box.js +25 -25
- package/dist/stacks/v_collapsible_box.js.map +1 -1
- package/dist/surfaces/index.d.ts +1 -2
- package/dist/surfaces/index.d.ts.map +1 -1
- package/dist/surfaces/index.js +18 -20
- package/dist/surfaces/index.js.map +1 -1
- package/dist/surfaces/panel/panel.d.ts +5 -0
- package/dist/surfaces/panel/panel.d.ts.map +1 -0
- package/dist/surfaces/panel/panel.js +19 -0
- package/dist/surfaces/panel/panel.js.map +1 -0
- package/dist/surfaces/pop_confirm/pop_confirm.js +2 -3
- package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -1
- package/dist/themes/theme.d.ts +2 -1
- package/dist/themes/theme.d.ts.map +1 -1
- package/dist/themes/theme.js +16 -9
- package/dist/themes/theme.js.map +1 -1
- package/dist/themes/themes/ergo/ergo_theme.css +1 -1
- package/dist/themes/themes/ergo/ergo_theme.js +27 -0
- package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
- package/package.json +1 -1
- package/src/layouts/__stories__/composed.stories.tsx +0 -55
- package/src/layouts/__stories__/rail.stories.tsx +78 -0
- package/src/layouts/__stories__/scaffold.stories.tsx +90 -0
- package/src/layouts/__stories__/utils/content.tsx +27 -0
- package/src/layouts/__stories__/utils/layout_theme.css +88 -0
- package/src/layouts/__stories__/utils/layout_theme_provider.tsx +11 -0
- package/src/layouts/__stories__/utils.tsx +6 -6
- package/src/layouts/{utility_bar/utility_bar.module.css → bar/bar.module.css} +2 -1
- package/src/layouts/bar/bar.tsx +23 -0
- package/src/layouts/body/body.module.css +9 -4
- package/src/layouts/body/body.tsx +7 -6
- package/src/layouts/body/h_body.module.css +1 -2
- package/src/layouts/body/h_body.tsx +9 -4
- package/src/layouts/body/v_body.tsx +9 -4
- package/src/layouts/divider/divider.module.css +1 -1
- package/src/layouts/footer/footer.module.css +0 -3
- package/src/layouts/footer/footer.tsx +5 -6
- package/src/layouts/header/header.tsx +6 -15
- package/src/layouts/index.ts +0 -1
- package/src/layouts/rail/rail.module.css +9 -5
- package/src/layouts/rail/rail.tsx +1 -1
- package/src/layouts/rail/side/side.module.css +0 -1
- package/src/layouts/rail/side/side.tsx +1 -2
- package/src/layouts/rail/utility_strip/utility_strip.module.css +5 -0
- package/src/layouts/rail/utility_strip/utility_strip.tsx +4 -1
- package/src/layouts/scaffold/scaffold.module.css +10 -7
- package/src/layouts/scaffold/scaffold.tsx +1 -1
- package/src/layouts/utility_bar/utility_bar.tsx +6 -9
- package/src/overlay/frame/frame.tsx +2 -2
- package/src/stacks/box/bottom_resize_handle.tsx +7 -5
- package/src/stacks/box/box.tsx +12 -18
- package/src/stacks/box/end_resize_handle.tsx +6 -6
- package/src/stacks/box/left_resize_handle.tsx +4 -3
- package/src/stacks/box/resize_handlers.ts +11 -9
- package/src/stacks/box/right_resize_handle.tsx +4 -3
- package/src/stacks/box/start_resize_handle.tsx +3 -3
- package/src/stacks/box/top_resize_handle.tsx +4 -3
- package/src/stacks/collapsible_box.stories.tsx +11 -11
- package/src/stacks/h_collapsible_box.tsx +5 -5
- package/src/stacks/v_collapsible_box.tsx +4 -4
- package/src/surfaces/index.ts +1 -2
- package/src/surfaces/panel/__stories__/panel.stories.tsx +12 -12
- package/src/surfaces/panel/__stories__/panel_stories.module.css +3 -3
- package/src/surfaces/panel/panel.module.css +1 -6
- package/src/surfaces/panel/panel.tsx +22 -0
- package/src/themes/theme.tsx +6 -2
- package/src/themes/themes/ergo/__stories__/material.stories.tsx +15 -16
- package/src/themes/themes/ergo/ergo_theme.css +27 -0
- package/dist/h_body.css +0 -1
- package/dist/h_panel.css +0 -1
- package/dist/header.css +0 -1
- package/dist/layouts/rail/main/main.d.ts +0 -6
- package/dist/layouts/rail/main/main.d.ts.map +0 -1
- package/dist/layouts/rail/main/main.js +0 -21
- package/dist/layouts/rail/main/main.js.map +0 -1
- package/dist/main.css +0 -1
- package/dist/surfaces/panel/h_panel.d.ts +0 -9
- package/dist/surfaces/panel/h_panel.d.ts.map +0 -1
- package/dist/surfaces/panel/h_panel.js +0 -60
- package/dist/surfaces/panel/h_panel.js.map +0 -1
- package/dist/surfaces/panel/v_panel.d.ts +0 -5
- package/dist/surfaces/panel/v_panel.d.ts.map +0 -1
- package/dist/surfaces/panel/v_panel.js +0 -19
- package/dist/surfaces/panel/v_panel.js.map +0 -1
- package/dist/utility_bar.css +0 -1
- package/dist/v_body.css +0 -1
- package/src/layouts/header/header.module.css +0 -8
- package/src/layouts/rail/__stories__/rail.stories.tsx +0 -64
- package/src/layouts/rail/__stories__/rail_stories.module.css +0 -25
- package/src/layouts/rail/main/main.module.css +0 -7
- package/src/layouts/rail/main/main.tsx +0 -26
- package/src/layouts/scaffold/__stories__/scaffold.stories.tsx +0 -53
- package/src/layouts/scaffold/__stories__/scaffold_stories.module.css +0 -31
- package/src/surfaces/panel/h_panel.tsx +0 -65
- package/src/surfaces/panel/v_panel.tsx +0 -20
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side.js","sources":["../../../../src/layouts/rail/side/side.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { VStack, type VStackProps } from '../../../stacks/v_stack.js';\n\nimport styles from './side.module.css';\n\
|
|
1
|
+
{"version":3,"file":"side.js","sources":["../../../../src/layouts/rail/side/side.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { VStack, type VStackProps } from '../../../stacks/v_stack.js';\n\nimport styles from './side.module.css';\n\nexport interface SideProps extends Omit<VStackProps, 'as'> {}\n\nexport const Side = React.forwardRef<HTMLElement, SideProps>(function UtilityStrip(\n { children, className, width = 'auto', ...props }: SideProps,\n ref\n) {\n return (\n <VStack\n ref={ref}\n width={width}\n className={clsx(styles['side'], 'tcn-side', className)}\n as=\"section\"\n {...props}\n >\n {children}\n </VStack>\n );\n});\n"],"names":["Side","React","children","className","width","props","ref","jsx","VStack","clsx","styles"],"mappings":";;;;4CAQaA,IAAOC,EAAM,WAAmC,SAC3D,EAAE,UAAAC,GAAU,WAAAC,GAAW,OAAAC,IAAQ,QAAQ,GAAGC,EAAA,GAC1CC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,OAAAF;AAAA,MACA,WAAWK,EAAKC,EAAO,MAAS,YAAYP,CAAS;AAAA,MACrD,IAAG;AAAA,MACF,GAAGE;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utility_strip.d.ts","sourceRoot":"","sources":["../../../../src/layouts/rail/utility_strip/utility_strip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"utility_strip.d.ts","sourceRoot":"","sources":["../../../../src/layouts/rail/utility_strip/utility_strip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAItE,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;IAChE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED,eAAO,MAAM,YAAY,uFA8BxB,CAAC"}
|
|
@@ -1,32 +1,36 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import { clsx as
|
|
4
|
-
import { VStack as
|
|
5
|
-
import '../../../utility_strip.css';const
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import m from "react";
|
|
3
|
+
import { clsx as y } from "clsx";
|
|
4
|
+
import { VStack as f } from "../../../stacks/v_stack.js";
|
|
5
|
+
import '../../../utility_strip.css';const n = "_utility-strip_23b31df", u = { "utility-strip": n }, R = m.forwardRef(
|
|
6
6
|
function({
|
|
7
7
|
children: t,
|
|
8
8
|
className: i,
|
|
9
9
|
width: r = "auto",
|
|
10
|
-
hierarchy:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
hierarchy: s = "secondary",
|
|
11
|
+
vAlign: a = "start",
|
|
12
|
+
hAlign: o = "center",
|
|
13
|
+
size: e = "md",
|
|
14
|
+
...c
|
|
15
|
+
}, p) {
|
|
16
|
+
return /* @__PURE__ */ l(
|
|
17
|
+
f,
|
|
16
18
|
{
|
|
17
|
-
ref:
|
|
19
|
+
ref: p,
|
|
18
20
|
as: "header",
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"
|
|
21
|
+
vAlign: a,
|
|
22
|
+
hAlign: o,
|
|
23
|
+
className: y(u["utility-strip"], "tcn-utility-strip", i),
|
|
24
|
+
"data-hierarchy": s,
|
|
25
|
+
"data-size": e,
|
|
22
26
|
width: r,
|
|
23
|
-
...
|
|
27
|
+
...c,
|
|
24
28
|
children: t
|
|
25
29
|
}
|
|
26
30
|
);
|
|
27
31
|
}
|
|
28
32
|
);
|
|
29
33
|
export {
|
|
30
|
-
|
|
34
|
+
R as UtilityStrip
|
|
31
35
|
};
|
|
32
36
|
//# sourceMappingURL=utility_strip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utility_strip.js","sources":["../../../../src/layouts/rail/utility_strip/utility_strip.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport type { Hierarchy, Size } from '../../../utils/index.js';\nimport { VStack, type VStackProps } from '../../../stacks/v_stack.js';\n\nimport styles from './utility_strip.module.css';\n\
|
|
1
|
+
{"version":3,"file":"utility_strip.js","sources":["../../../../src/layouts/rail/utility_strip/utility_strip.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport type { Hierarchy, Size } from '../../../utils/index.js';\nimport { VStack, type VStackProps } from '../../../stacks/v_stack.js';\n\nimport styles from './utility_strip.module.css';\n\nexport interface UtilityStripProps extends Omit<VStackProps, 'as'> {\n hierarchy?: Hierarchy;\n size?: Size;\n}\n\nexport const UtilityStrip = React.forwardRef<HTMLElement, UtilityStripProps>(\n function UtilityStrip(\n {\n children,\n className,\n width = 'auto',\n hierarchy = 'secondary',\n vAlign = 'start',\n hAlign = 'center',\n size = 'md',\n ...props\n }: UtilityStripProps,\n ref\n ) {\n return (\n <VStack\n ref={ref}\n as=\"header\"\n vAlign={vAlign}\n hAlign={hAlign}\n className={clsx(styles['utility-strip'], 'tcn-utility-strip', className)}\n data-hierarchy={hierarchy}\n data-size={size}\n width={width}\n {...props}\n >\n {children}\n </VStack>\n );\n }\n);\n"],"names":["UtilityStrip","React","children","className","width","hierarchy","vAlign","hAlign","size","props","ref","jsx","VStack","clsx","styles"],"mappings":";;;;gEAYaA,IAAeC,EAAM;AAAA,EAChC,SACE;AAAA,IACE,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,IACZ,QAAAC,IAAS;AAAA,IACT,QAAAC,IAAS;AAAA,IACT,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,IAAG;AAAA,QACH,QAAAJ;AAAA,QACA,QAAAC;AAAA,QACA,WAAWM,EAAKC,EAAO,eAAe,GAAG,qBAAqBX,CAAS;AAAA,QACvE,kBAAgBE;AAAA,QAChB,aAAWG;AAAA,QACX,OAAAJ;AAAA,QACC,GAAGK;AAAA,QAEH,UAAAP;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
|
|
@@ -1,55 +1,55 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { clsx as
|
|
4
|
-
import { Box as
|
|
5
|
-
import { VStack as
|
|
6
|
-
import '../../scaffold.css';const
|
|
7
|
-
children:
|
|
2
|
+
import S from "react";
|
|
3
|
+
import { clsx as d } from "clsx";
|
|
4
|
+
import { Box as u } from "../../stacks/box/box.js";
|
|
5
|
+
import { VStack as x } from "../../stacks/v_stack.js";
|
|
6
|
+
import '../../scaffold.css';const b = "_scaffold_b13e64b", i = "_scaffold-stack_8f97a6a", n = { scaffold: b, "scaffold-stack": i }, B = S.forwardRef(function({
|
|
7
|
+
children: e,
|
|
8
8
|
width: m,
|
|
9
|
-
height:
|
|
9
|
+
height: k = "100%",
|
|
10
10
|
minWidth: a,
|
|
11
|
-
maxWidth:
|
|
12
|
-
minHeight:
|
|
11
|
+
maxWidth: f,
|
|
12
|
+
minHeight: c,
|
|
13
13
|
maxHeight: o,
|
|
14
|
-
hAlign:
|
|
15
|
-
vAlign:
|
|
16
|
-
className:
|
|
17
|
-
...
|
|
18
|
-
},
|
|
14
|
+
hAlign: s,
|
|
15
|
+
vAlign: t = "start",
|
|
16
|
+
className: p,
|
|
17
|
+
..._
|
|
18
|
+
}, l) {
|
|
19
19
|
return /* @__PURE__ */ r(
|
|
20
|
-
|
|
20
|
+
u,
|
|
21
21
|
{
|
|
22
|
-
ref:
|
|
22
|
+
ref: l,
|
|
23
23
|
width: m,
|
|
24
|
-
height:
|
|
24
|
+
height: k,
|
|
25
25
|
minWidth: a,
|
|
26
|
-
maxWidth:
|
|
27
|
-
minHeight:
|
|
26
|
+
maxWidth: f,
|
|
27
|
+
minHeight: c,
|
|
28
28
|
maxHeight: o,
|
|
29
|
-
"data-h-alignment":
|
|
30
|
-
"data-v-alignment":
|
|
31
|
-
className:
|
|
32
|
-
...
|
|
29
|
+
"data-h-alignment": s,
|
|
30
|
+
"data-v-alignment": t,
|
|
31
|
+
className: d(p, n.scaffold, "tcn-scaffold"),
|
|
32
|
+
..._,
|
|
33
33
|
children: /* @__PURE__ */ r(
|
|
34
|
-
|
|
34
|
+
x,
|
|
35
35
|
{
|
|
36
36
|
as: "section",
|
|
37
37
|
minWidth: a,
|
|
38
|
-
maxWidth:
|
|
39
|
-
minHeight:
|
|
38
|
+
maxWidth: f,
|
|
39
|
+
minHeight: c,
|
|
40
40
|
maxHeight: o,
|
|
41
|
-
hAlign:
|
|
42
|
-
vAlign:
|
|
43
|
-
ref:
|
|
44
|
-
className:
|
|
41
|
+
hAlign: s,
|
|
42
|
+
vAlign: t,
|
|
43
|
+
ref: l,
|
|
44
|
+
className: d(n["scaffold-stack"], "tcn-scaffold-stack"),
|
|
45
45
|
zIndex: 0,
|
|
46
|
-
children:
|
|
46
|
+
children: e
|
|
47
47
|
}
|
|
48
48
|
)
|
|
49
49
|
}
|
|
50
50
|
);
|
|
51
51
|
});
|
|
52
52
|
export {
|
|
53
|
-
|
|
53
|
+
B as Scaffold
|
|
54
54
|
};
|
|
55
55
|
//# sourceMappingURL=scaffold.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scaffold.js","sources":["../../../src/layouts/scaffold/scaffold.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Box, type BoxProps } from '../../stacks/box/box.js';\nimport type { Alignment } from '../../stacks/types/alignment.js';\nimport { VStack } from '../../stacks/v_stack.js';\n// Styles\nimport styles from './scaffold.module.css';\n\nexport interface ScaffoldProps extends Omit<BoxProps, 'as'> {\n vAlign?: Alignment;\n hAlign?: Alignment;\n}\n\nexport const Scaffold = React.forwardRef<HTMLElement, ScaffoldProps>(function Scaffold(\n {\n children,\n width,\n height = '100%',\n minWidth,\n maxWidth,\n minHeight,\n maxHeight,\n hAlign,\n vAlign = 'start',\n className,\n ...props\n }: ScaffoldProps,\n ref\n) {\n return (\n <Box\n ref={ref}\n width={width}\n height={height}\n minWidth={minWidth}\n maxWidth={maxWidth}\n minHeight={minHeight}\n maxHeight={maxHeight}\n data-h-alignment={hAlign}\n data-v-alignment={vAlign}\n className={clsx(className, 'tcn-scaffold')}\n {...props}\n >\n <VStack\n as=\"section\"\n minWidth={minWidth}\n maxWidth={maxWidth}\n minHeight={minHeight}\n maxHeight={maxHeight}\n hAlign={hAlign}\n vAlign={vAlign}\n ref={ref}\n className={clsx(styles['scaffold-stack'], 'tcn-scaffold-stack')}\n zIndex={0}\n >\n {children}\n </VStack>\n </Box>\n );\n});\n"],"names":["Scaffold","React","children","width","height","minWidth","maxWidth","minHeight","maxHeight","hAlign","vAlign","className","props","ref","jsx","Box","clsx","
|
|
1
|
+
{"version":3,"file":"scaffold.js","sources":["../../../src/layouts/scaffold/scaffold.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Box, type BoxProps } from '../../stacks/box/box.js';\nimport type { Alignment } from '../../stacks/types/alignment.js';\nimport { VStack } from '../../stacks/v_stack.js';\n// Styles\nimport styles from './scaffold.module.css';\n\nexport interface ScaffoldProps extends Omit<BoxProps, 'as'> {\n vAlign?: Alignment;\n hAlign?: Alignment;\n}\n\nexport const Scaffold = React.forwardRef<HTMLElement, ScaffoldProps>(function Scaffold(\n {\n children,\n width,\n height = '100%',\n minWidth,\n maxWidth,\n minHeight,\n maxHeight,\n hAlign,\n vAlign = 'start',\n className,\n ...props\n }: ScaffoldProps,\n ref\n) {\n return (\n <Box\n ref={ref}\n width={width}\n height={height}\n minWidth={minWidth}\n maxWidth={maxWidth}\n minHeight={minHeight}\n maxHeight={maxHeight}\n data-h-alignment={hAlign}\n data-v-alignment={vAlign}\n className={clsx(className, styles['scaffold'], 'tcn-scaffold')}\n {...props}\n >\n <VStack\n as=\"section\"\n minWidth={minWidth}\n maxWidth={maxWidth}\n minHeight={minHeight}\n maxHeight={maxHeight}\n hAlign={hAlign}\n vAlign={vAlign}\n ref={ref}\n className={clsx(styles['scaffold-stack'], 'tcn-scaffold-stack')}\n zIndex={0}\n >\n {children}\n </VStack>\n </Box>\n );\n});\n"],"names":["Scaffold","React","children","width","height","minWidth","maxWidth","minHeight","maxHeight","hAlign","vAlign","className","props","ref","jsx","Box","clsx","styles","VStack"],"mappings":";;;;;wGAaaA,IAAWC,EAAM,WAAuC,SACnE;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,OAAAV;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,WAAAC;AAAA,MACA,oBAAkBC;AAAA,MAClB,oBAAkBC;AAAA,MAClB,WAAWM,EAAKL,GAAWM,EAAO,UAAa,cAAc;AAAA,MAC5D,GAAGL;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,UAAAb;AAAA,UACA,UAAAC;AAAA,UACA,WAAAC;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,QAAAC;AAAA,UACA,KAAAG;AAAA,UACA,WAAWG,EAAKC,EAAO,gBAAgB,GAAG,oBAAoB;AAAA,UAC9D,QAAQ;AAAA,UAEP,UAAAf;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import { HStackProps } from '../../stacks/h_stack.js';
|
|
3
2
|
import { Hierarchy, Size } from '../../utils/index.js';
|
|
4
|
-
|
|
3
|
+
import { BarProps } from '../bar/bar.js';
|
|
4
|
+
export interface UtilityBarProps extends Omit<BarProps, 'as'> {
|
|
5
5
|
hierarchy?: Hierarchy;
|
|
6
6
|
size?: Size;
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utility_bar.d.ts","sourceRoot":"","sources":["../../../src/layouts/utility_bar/utility_bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,
|
|
1
|
+
{"version":3,"file":"utility_bar.d.ts","sourceRoot":"","sources":["../../../src/layouts/utility_bar/utility_bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGnD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED,eAAO,MAAM,UAAU,qFAwBtB,CAAC"}
|
|
@@ -1,32 +1,30 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import { clsx as
|
|
4
|
-
import {
|
|
5
|
-
|
|
1
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import c from "react";
|
|
3
|
+
import { clsx as f } from "clsx";
|
|
4
|
+
import { Bar as s } from "../bar/bar.js";
|
|
5
|
+
const u = c.forwardRef(
|
|
6
6
|
function({
|
|
7
|
-
hierarchy:
|
|
8
|
-
|
|
7
|
+
hierarchy: r = "secondary",
|
|
8
|
+
size: t = "md",
|
|
9
9
|
children: a,
|
|
10
10
|
className: i,
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
y,
|
|
11
|
+
...o
|
|
12
|
+
}, e) {
|
|
13
|
+
return /* @__PURE__ */ m(
|
|
14
|
+
s,
|
|
16
15
|
{
|
|
17
|
-
ref:
|
|
16
|
+
ref: e,
|
|
18
17
|
as: "header",
|
|
19
|
-
className:
|
|
20
|
-
"data-hierarchy":
|
|
21
|
-
"data-size":
|
|
22
|
-
|
|
23
|
-
...e,
|
|
18
|
+
className: f(i, "tcn-utility-bar"),
|
|
19
|
+
"data-hierarchy": r,
|
|
20
|
+
"data-size": t,
|
|
21
|
+
...o,
|
|
24
22
|
children: a
|
|
25
23
|
}
|
|
26
24
|
);
|
|
27
25
|
}
|
|
28
26
|
);
|
|
29
27
|
export {
|
|
30
|
-
|
|
28
|
+
u as UtilityBar
|
|
31
29
|
};
|
|
32
30
|
//# sourceMappingURL=utility_bar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utility_bar.js","sources":["../../../src/layouts/utility_bar/utility_bar.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport {
|
|
1
|
+
{"version":3,"file":"utility_bar.js","sources":["../../../src/layouts/utility_bar/utility_bar.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport type { Hierarchy, Size } from '../../utils/index.js';\nimport { Bar, type BarProps } from '../bar/bar.js';\n\n// UtilityBar\nexport interface UtilityBarProps extends Omit<BarProps, 'as'> {\n hierarchy?: Hierarchy;\n size?: Size;\n}\n\nexport const UtilityBar = React.forwardRef<HTMLElement, UtilityBarProps>(\n function UtilityBar(\n {\n hierarchy = 'secondary',\n size = 'md',\n children,\n className,\n ...props\n }: UtilityBarProps,\n ref\n ) {\n return (\n <Bar\n ref={ref}\n as=\"header\"\n className={clsx(className, 'tcn-utility-bar')}\n data-hierarchy={hierarchy}\n data-size={size}\n {...props}\n >\n {children}\n </Bar>\n );\n }\n);\n"],"names":["UtilityBar","React","hierarchy","size","children","className","props","ref","jsx","Bar","clsx"],"mappings":";;;;AAWO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,SACE;AAAA,IACE,WAAAC,IAAY;AAAA,IACZ,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,IAAG;AAAA,QACH,WAAWG,EAAKL,GAAW,iBAAiB;AAAA,QAC5C,kBAAgBH;AAAA,QAChB,aAAWC;AAAA,QACV,GAAGG;AAAA,QAEH,UAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
|
|
@@ -7,8 +7,8 @@ import "../../stacks/spacer.js";
|
|
|
7
7
|
import "../../stacks/v_collapsible_box.js";
|
|
8
8
|
import "../../stacks/v_stack.js";
|
|
9
9
|
import { ZStack as t } from "../../stacks/z_stack.js";
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
10
|
+
import { Draggable as s } from "../../utils/dnd/draggable/draggable.js";
|
|
11
|
+
import { Portal as n } from "../portal/portal.js";
|
|
12
12
|
import { clsx as p } from "clsx";
|
|
13
13
|
import '../../frame.css';const d = "_frame_ce82001", h = { frame: d }, D = c.forwardRef(function({
|
|
14
14
|
children: e,
|
|
@@ -18,7 +18,7 @@ import '../../frame.css';const d = "_frame_ce82001", h = { frame: d }, D = c.for
|
|
|
18
18
|
className: i,
|
|
19
19
|
...f
|
|
20
20
|
}, l) {
|
|
21
|
-
return m ? /* @__PURE__ */ r(
|
|
21
|
+
return m ? /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(t, { width: "100%", height: "100%", "data-is-veil": a, className: "tcn-frame-veil", children: /* @__PURE__ */ r(s, { draggable: o, children: /* @__PURE__ */ r(
|
|
22
22
|
t,
|
|
23
23
|
{
|
|
24
24
|
as: "dialog",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"frame.js","sources":["../../../src/overlay/frame/frame.tsx"],"sourcesContent":["import React from 'react';\nimport { ZStack, type ZStackProps } from '../../stacks/index.js';\nimport {
|
|
1
|
+
{"version":3,"file":"frame.js","sources":["../../../src/overlay/frame/frame.tsx"],"sourcesContent":["import React from 'react';\nimport { ZStack, type ZStackProps } from '../../stacks/index.js';\nimport { Draggable } from '../../utils/dnd/draggable/draggable.js';\nimport { Portal } from '../portal/portal.js';\n\n// Styles\nimport { clsx } from 'clsx';\nimport styles from './frame.module.css';\n\nexport interface FrameOwnProps {\n isOpen?: boolean;\n children?: React.ReactNode;\n draggable?: boolean;\n veil?: boolean;\n}\n\nexport type FrameProps = ZStackProps & FrameOwnProps;\n\nexport const Frame = React.forwardRef<HTMLDialogElement, FrameProps>(function Frame(\n {\n children,\n isOpen = false,\n draggable = true,\n veil = false,\n className,\n ...rest\n }: FrameProps,\n ref\n) {\n if (!isOpen) {\n return null;\n }\n\n return (\n <Portal>\n <ZStack width=\"100%\" height=\"100%\" data-is-veil={veil} className=\"tcn-frame-veil\">\n <Draggable draggable={draggable}>\n <ZStack\n as=\"dialog\"\n ref={ref}\n className={clsx(styles['frame'], 'tcn-frame', className)}\n {...rest}\n >\n {children}\n </ZStack>\n </Draggable>\n </ZStack>\n </Portal>\n );\n});\n"],"names":["Frame","React","children","isOpen","draggable","veil","className","rest","ref","jsx","Portal","ZStack","Draggable","clsx","styles"],"mappings":";;;;;;;;;;;;8CAkBaA,IAAQC,EAAM,WAA0C,SACnE;AAAA,EACE,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SAAKL,IAKH,gBAAAM,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAA,EAAO,OAAM,QAAO,QAAO,QAAO,gBAAcN,GAAM,WAAU,kBAC/D,UAAA,gBAAAI,EAACG,KAAU,WAAAR,GACT,UAAA,gBAAAK;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,KAAAH;AAAA,MACA,WAAWK,EAAKC,EAAO,OAAU,aAAaR,CAAS;AAAA,MACtD,GAAGC;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA,EACH,CACF,GACF,GACF,IAjBO;AAmBX,CAAC;"}
|
package/dist/panel.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer tcn-system{._panel_c1dbe05{height:100%}}
|
package/dist/rail.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer tcn-system{:where(._rail-stack_76bc40f){width:100%;height:100%;overflow:auto}:where(._rail-stack_76bc40f)
|
|
1
|
+
@layer tcn-system{._rail_adfa91f :where(._rail-stack_76bc40f){width:100%;height:100%;overflow:auto}._rail_adfa91f :where(._rail-stack_76bc40f)>.tcn-body{height:100%;width:auto;overflow-x:auto}}
|
package/dist/scaffold.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer tcn-system{:where(._scaffold-stack_8f97a6a){width:100%;height:100%;overflow:auto}:where(._scaffold-stack_8f97a6a)
|
|
1
|
+
@layer tcn-system{._scaffold_b13e64b :where(._scaffold-stack_8f97a6a){width:100%;height:100%;overflow:auto}._scaffold_b13e64b :where(._scaffold-stack_8f97a6a)>.tcn-body{width:100%;height:auto;overflow-y:auto}}
|
package/dist/side.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer tcn-system{:where(._side_499f5c3){min-width:0;height:100%;
|
|
1
|
+
@layer tcn-system{:where(._side_499f5c3){min-width:0;height:100%;width:auto}}
|
|
@@ -3,8 +3,8 @@ import { HandleProps } from './handle_props.js';
|
|
|
3
3
|
export interface BottomResizeHandleProps {
|
|
4
4
|
targetRef: React.MutableRefObject<HTMLElement | null>;
|
|
5
5
|
handleProps?: HandleProps;
|
|
6
|
-
onHeightResize?: (
|
|
7
|
-
onHeightResizeEnd?: (
|
|
6
|
+
onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void;
|
|
7
|
+
onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
|
|
8
8
|
}
|
|
9
9
|
export declare function BottomResizeHandle({ targetRef, handleProps, onHeightResize, onHeightResizeEnd, }: BottomResizeHandleProps): import("react/jsx-runtime").JSX.Element;
|
|
10
10
|
//# sourceMappingURL=bottom_resize_handle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bottom_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/bottom_resize_handle.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"bottom_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/bottom_resize_handle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,GAAG,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnF,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,GAAG,QAAQ,KAAK,IAAI,CAAC;CACxE;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,WAAW,EACX,cAAc,EACd,iBAAiB,GAClB,EAAE,uBAAuB,2CAyBzB"}
|
|
@@ -1,28 +1,30 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import '../../bottom_resize_handle.css';const f = "_bottom-resize-handle_e3e2ef2",
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { clsx as l } from "clsx";
|
|
3
|
+
import { createVerticalResizeHandler as c } from "./resize_handlers.js";
|
|
4
|
+
import '../../bottom_resize_handle.css';const f = "_bottom-resize-handle_e3e2ef2", a = { "bottom-resize-handle": f };
|
|
5
5
|
function x({
|
|
6
6
|
targetRef: t,
|
|
7
7
|
handleProps: e,
|
|
8
8
|
onHeightResize: o,
|
|
9
9
|
onHeightResizeEnd: s
|
|
10
10
|
}) {
|
|
11
|
-
const i =
|
|
11
|
+
const i = c(
|
|
12
12
|
t,
|
|
13
13
|
o,
|
|
14
|
-
s
|
|
15
|
-
|
|
14
|
+
s,
|
|
15
|
+
!1,
|
|
16
|
+
"bottom"
|
|
17
|
+
), n = e?.offset ? e.offset : -8, m = {
|
|
16
18
|
...e?.style,
|
|
17
19
|
bottom: `${n}px`,
|
|
18
20
|
height: e?.size || "16px"
|
|
19
21
|
};
|
|
20
|
-
return /* @__PURE__ */
|
|
22
|
+
return /* @__PURE__ */ r(
|
|
21
23
|
"div",
|
|
22
24
|
{
|
|
23
|
-
className:
|
|
25
|
+
className: l(a["bottom-resize-handle"], "tcn-bottom-resize-handle"),
|
|
24
26
|
onMouseDown: i,
|
|
25
|
-
style:
|
|
27
|
+
style: m,
|
|
26
28
|
children: e?.children
|
|
27
29
|
}
|
|
28
30
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bottom_resize_handle.js","sources":["../../../src/stacks/box/bottom_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './bottom_resize_handle.module.css';\nimport {
|
|
1
|
+
{"version":3,"file":"bottom_resize_handle.js","sources":["../../../src/stacks/box/bottom_resize_handle.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './bottom_resize_handle.module.css';\nimport type { HandleProps } from './handle_props.js';\nimport { createVerticalResizeHandler } from './resize_handlers.js';\n\nexport interface BottomResizeHandleProps {\n targetRef: React.MutableRefObject<HTMLElement | null>;\n handleProps?: HandleProps;\n onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void;\n onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;\n}\n\nexport function BottomResizeHandle({\n targetRef,\n handleProps,\n onHeightResize,\n onHeightResizeEnd,\n}: BottomResizeHandleProps) {\n const resizeHandler = createVerticalResizeHandler(\n targetRef,\n onHeightResize,\n onHeightResizeEnd,\n false,\n 'bottom'\n );\n const offset = handleProps?.offset ? handleProps.offset : -8;\n\n const bottomResizeHandleStyle: React.CSSProperties = {\n ...handleProps?.style,\n bottom: `${offset}px`,\n height: handleProps?.size || '16px',\n };\n\n return (\n <div\n className={clsx(styles['bottom-resize-handle'], 'tcn-bottom-resize-handle')}\n onMouseDown={resizeHandler}\n style={bottomResizeHandleStyle}\n >\n {handleProps?.children}\n </div>\n );\n}\n"],"names":["BottomResizeHandle","targetRef","handleProps","onHeightResize","onHeightResizeEnd","resizeHandler","createVerticalResizeHandler","offset","bottomResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAaO,SAASA,EAAmB;AAAA,EACjC,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AACF,GAA4B;AAC1B,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA+C;AAAA,IACnD,GAAGN,GAAa;AAAA,IAChB,QAAQ,GAAGK,CAAM;AAAA,IACjB,QAAQL,GAAa,QAAQ;AAAA,EAAA;AAG/B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,sBAAsB,GAAG,0BAA0B;AAAA,MAC1E,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
|
package/dist/stacks/box/box.d.ts
CHANGED
|
@@ -33,10 +33,10 @@ export interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttri
|
|
|
33
33
|
enableResizeOnRight?: boolean;
|
|
34
34
|
horizontalHandleProps?: HandleProps;
|
|
35
35
|
verticalHandleProps?: HandleProps;
|
|
36
|
-
onWidthResize?: (width: number) => void;
|
|
37
|
-
onHeightResize?: (height: number) => void;
|
|
38
|
-
onWidthResizeEnd?: (width: number) => void;
|
|
39
|
-
onHeightResizeEnd?: (
|
|
36
|
+
onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
|
|
37
|
+
onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void;
|
|
38
|
+
onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
|
|
39
|
+
onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
|
|
40
40
|
}
|
|
41
41
|
export declare const Box: React.ForwardRefExoticComponent<BoxProps<HTMLElement> & React.RefAttributes<HTMLElement>>;
|
|
42
42
|
//# sourceMappingURL=box.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,cAAc,EAAU,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/box.tsx"],"names":[],"mappings":"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"}
|
package/dist/stacks/box/box.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import { jsxs as h, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { clsx as O } from "clsx";
|
|
3
|
+
import oo, { useRef as ro } from "react";
|
|
2
4
|
import "../../utils/click_away_listener.js";
|
|
3
5
|
import "../../utils/focus_redirect.js";
|
|
4
6
|
import "../../utils/scroll_away_listener.js";
|
|
5
|
-
import
|
|
6
|
-
import { useForkRef as ro } from "../../utils/hooks/use_fork_ref.js";
|
|
7
|
+
import { useForkRef as to } from "../../utils/hooks/use_fork_ref.js";
|
|
7
8
|
import "../../utils/hooks/use_resize_observer.js";
|
|
8
9
|
import "../../utils/dnd/context.js";
|
|
9
|
-
import { clsx as to } from "clsx";
|
|
10
10
|
import "../../draggable.module-BgelQsuJ.js";
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
const Bo =
|
|
11
|
+
import { s as y } from "../../stack.module-CBV1f12Z.js";
|
|
12
|
+
import { isCustomSizeProp as k } from "../utils/isCustomSizeProp.js";
|
|
13
|
+
import { removeUndefinedProperties as ao } from "../utils/remove_undefined_properties.js";
|
|
14
|
+
import { BottomResizeHandle as eo } from "./bottom_resize_handle.js";
|
|
15
|
+
import { EndResizeHandle as fo } from "./end_resize_handle.js";
|
|
16
|
+
import { LeftResizeHandle as so } from "./left_resize_handle.js";
|
|
17
|
+
import { RightResizeHandle as lo } from "./right_resize_handle.js";
|
|
18
|
+
import { StartResizeHandle as mo } from "./start_resize_handle.js";
|
|
19
|
+
import { TopResizeHandle as no } from "./top_resize_handle.js";
|
|
20
|
+
const Bo = oo.forwardRef(function({
|
|
21
21
|
style: v,
|
|
22
22
|
className: P,
|
|
23
23
|
as: _ = "div",
|
|
@@ -56,13 +56,13 @@ const Bo = O.forwardRef(function({
|
|
|
56
56
|
verticalHandleProps: x,
|
|
57
57
|
...X
|
|
58
58
|
}, Z) {
|
|
59
|
-
const $ = _, o =
|
|
59
|
+
const $ = _, o = ro(null), L = to(Z, o), R = l || n || c || p, T = m || s, z = R, E = T, g = z && r === "flex", S = E && t === "flex", F = !g && !S && (r === "flex" || t === "flex");
|
|
60
60
|
g && (r = "100%", console.warn("You cannot have a resizable box and flex simultaneously")), S && (t = "auto", console.warn("You cannot have a resizable box and flex simultaneously"));
|
|
61
61
|
const W = {
|
|
62
|
-
width:
|
|
62
|
+
width: k(r) ? void 0 : r,
|
|
63
63
|
minWidth: V,
|
|
64
64
|
maxWidth: b,
|
|
65
|
-
height:
|
|
65
|
+
height: k(t) ? void 0 : t,
|
|
66
66
|
minHeight: j,
|
|
67
67
|
maxHeight: w,
|
|
68
68
|
padding: A,
|
|
@@ -93,21 +93,21 @@ const Bo = O.forwardRef(function({
|
|
|
93
93
|
"data-width": r,
|
|
94
94
|
ref: L,
|
|
95
95
|
style: {
|
|
96
|
-
...
|
|
96
|
+
...ao(W),
|
|
97
97
|
...v
|
|
98
98
|
},
|
|
99
|
-
className:
|
|
100
|
-
|
|
99
|
+
className: O(
|
|
100
|
+
y.box,
|
|
101
101
|
P,
|
|
102
102
|
F && "stack-flex",
|
|
103
|
-
F &&
|
|
103
|
+
F && y["stack-flex"],
|
|
104
104
|
"tcn-box"
|
|
105
105
|
),
|
|
106
106
|
...X,
|
|
107
107
|
children: [
|
|
108
108
|
H,
|
|
109
109
|
s && /* @__PURE__ */ a(
|
|
110
|
-
|
|
110
|
+
no,
|
|
111
111
|
{
|
|
112
112
|
onHeightResize: d,
|
|
113
113
|
onHeightResizeEnd: u,
|
|
@@ -116,7 +116,7 @@ const Bo = O.forwardRef(function({
|
|
|
116
116
|
}
|
|
117
117
|
),
|
|
118
118
|
m && /* @__PURE__ */ a(
|
|
119
|
-
|
|
119
|
+
eo,
|
|
120
120
|
{
|
|
121
121
|
onHeightResize: d,
|
|
122
122
|
onHeightResizeEnd: u,
|
|
@@ -125,7 +125,7 @@ const Bo = O.forwardRef(function({
|
|
|
125
125
|
}
|
|
126
126
|
),
|
|
127
127
|
n && /* @__PURE__ */ a(
|
|
128
|
-
|
|
128
|
+
mo,
|
|
129
129
|
{
|
|
130
130
|
onWidthResize: e,
|
|
131
131
|
onWidthResizeEnd: f,
|
|
@@ -134,7 +134,7 @@ const Bo = O.forwardRef(function({
|
|
|
134
134
|
}
|
|
135
135
|
),
|
|
136
136
|
l && /* @__PURE__ */ a(
|
|
137
|
-
|
|
137
|
+
fo,
|
|
138
138
|
{
|
|
139
139
|
onWidthResize: e,
|
|
140
140
|
onWidthResizeEnd: f,
|
|
@@ -143,7 +143,7 @@ const Bo = O.forwardRef(function({
|
|
|
143
143
|
}
|
|
144
144
|
),
|
|
145
145
|
c && /* @__PURE__ */ a(
|
|
146
|
-
|
|
146
|
+
so,
|
|
147
147
|
{
|
|
148
148
|
onWidthResize: e,
|
|
149
149
|
onWidthResizeEnd: f,
|
|
@@ -152,7 +152,7 @@ const Bo = O.forwardRef(function({
|
|
|
152
152
|
}
|
|
153
153
|
),
|
|
154
154
|
p && /* @__PURE__ */ a(
|
|
155
|
-
|
|
155
|
+
lo,
|
|
156
156
|
{
|
|
157
157
|
onWidthResize: e,
|
|
158
158
|
onWidthResizeEnd: f,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"box.js","sources":["../../../src/stacks/box/box.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport React, { CSSProperties, HTMLAttributes, useRef } from 'react';\nimport { LeftResizeHandle } from './left_resize_handle.js';\nimport { RightResizeHandle } from './right_resize_handle.js';\nimport { BottomResizeHandle } from './bottom_resize_handle.js';\nimport { EndResizeHandle } from './end_resize_handle.js';\nimport { StartResizeHandle } from './start_resize_handle.js';\nimport { TopResizeHandle } from './top_resize_handle.js';\nimport { clsx } from 'clsx';\nimport { isCustomSizeProp } from '../utils/isCustomSizeProp.js';\nimport { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';\nimport styles from '../stack.module.css';\nimport { HandleProps } from './handle_props.js';\n\nexport interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<T> {\n as?: string;\n style?: React.CSSProperties;\n className?: string;\n children?: React.ReactNode;\n width?: 'default' | 'flex' | 'auto' | string | number;\n minWidth?: CSSProperties['minWidth'];\n maxWidth?: CSSProperties['maxWidth'];\n height?: 'default' | 'flex' | 'auto' | string | number;\n minHeight?: CSSProperties['minHeight'];\n maxHeight?: CSSProperties['maxHeight'];\n zIndex?: number;\n padding?: CSSProperties['padding'];\n paddingInline?: CSSProperties['paddingInline'];\n paddingBlock?: CSSProperties['paddingBlock'];\n margin?: CSSProperties['margin'];\n marginBlock?: CSSProperties['marginBlock'];\n marginInline?: CSSProperties['marginInline'];\n marginInlineStart?: CSSProperties['marginInlineStart'];\n marginInlineEnd?: CSSProperties['marginInlineEnd'];\n marginTop?: CSSProperties['marginTop'];\n marginBottom?: CSSProperties['marginBottom'];\n overflow?: React.CSSProperties['overflow'];\n overflowX?: React.CSSProperties['overflowX'];\n overflowY?: React.CSSProperties['overflowY'];\n enableResizeOnTop?: boolean;\n enableResizeOnEnd?: boolean;\n enableResizeOnBottom?: boolean;\n enableResizeOnStart?: boolean;\n enableResizeOnLeft?: boolean;\n enableResizeOnRight?: boolean;\n horizontalHandleProps?: HandleProps;\n verticalHandleProps?: HandleProps;\n onWidthResize?: (\n width: number\n // origin: 'left' | 'right'\n ) => void;\n onHeightResize?: (\n height: number\n // origin: 'top' | 'bottom'\n ) => void;\n onWidthResizeEnd?: (width: number) => void;\n onHeightResizeEnd?: (width: number) => void;\n}\n\nexport const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(\n {\n style,\n className,\n as = 'div',\n children,\n width = 'default',\n minWidth,\n maxWidth,\n height = 'default',\n minHeight,\n maxHeight,\n zIndex,\n padding,\n paddingInline,\n paddingBlock,\n margin,\n marginBlock,\n marginInline,\n marginInlineStart,\n marginInlineEnd,\n marginTop,\n marginBottom,\n overflow,\n overflowX,\n overflowY,\n enableResizeOnTop = false,\n enableResizeOnEnd = false,\n enableResizeOnBottom = false,\n enableResizeOnStart = false,\n enableResizeOnLeft = false,\n enableResizeOnRight = false,\n onWidthResize,\n onHeightResize,\n onWidthResizeEnd,\n onHeightResizeEnd,\n horizontalHandleProps,\n verticalHandleProps,\n ...otherProps\n }: BoxProps,\n ref\n) {\n const As = as as React.ElementType;\n const boxRef = useRef<HTMLElement | null>(null);\n const forkedRef = useForkRef(ref, boxRef);\n const hasHorizontalResize =\n enableResizeOnEnd || enableResizeOnStart || enableResizeOnLeft || enableResizeOnRight;\n const hasVerticalResize = enableResizeOnBottom || enableResizeOnTop;\n\n const cannotHorizontalFlex = hasHorizontalResize;\n const cannotVerticalFlex = hasVerticalResize;\n const warnHorizontalFlex = cannotHorizontalFlex && width === 'flex';\n const warnVerticalFlex = cannotVerticalFlex && height === 'flex';\n const isFlexing =\n !warnHorizontalFlex && !warnVerticalFlex && (width === 'flex' || height === 'flex');\n\n if (warnHorizontalFlex) {\n width = '100%';\n // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n console.warn('You cannot have a resizable box and flex simultaneously');\n }\n\n if (warnVerticalFlex) {\n height = 'auto';\n // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n console.warn('You cannot have a resizable box and flex simultaneously');\n }\n\n const propStyles = {\n width: !isCustomSizeProp(width) ? width : undefined,\n minWidth,\n maxWidth,\n height: !isCustomSizeProp(height) ? height : undefined,\n minHeight,\n maxHeight,\n padding,\n paddingInline,\n paddingBlock,\n margin,\n marginBlock,\n marginInline,\n marginInlineStart,\n marginInlineEnd,\n marginTop,\n marginBottom,\n overflow,\n overflowX,\n overflowY,\n zIndex,\n };\n\n return (\n <As\n data-enabled-resize-on-start={String(enableResizeOnStart)}\n data-enabled-resize-on-end={String(enableResizeOnEnd)}\n data-enabled-resize-on-top={String(enableResizeOnTop)}\n data-enabled-resize-on-bottom={String(enableResizeOnBottom)}\n data_enabled-resize-on-left={String(enableResizeOnLeft)}\n data_enabled-resize-on-right={String(enableResizeOnRight)}\n data-height={height}\n data-width={width}\n ref={forkedRef}\n style={{\n ...removeUndefinedProperties(propStyles),\n ...style,\n }}\n className={clsx(\n styles['box'],\n className,\n isFlexing && 'stack-flex',\n isFlexing && styles['stack-flex'],\n 'tcn-box'\n )}\n {...otherProps}\n >\n {children}\n {enableResizeOnTop && (\n <TopResizeHandle\n onHeightResize={onHeightResize}\n onHeightResizeEnd={onHeightResizeEnd}\n targetRef={boxRef}\n handleProps={horizontalHandleProps}\n />\n )}\n {enableResizeOnBottom && (\n <BottomResizeHandle\n onHeightResize={onHeightResize}\n onHeightResizeEnd={onHeightResizeEnd}\n targetRef={boxRef}\n handleProps={verticalHandleProps}\n />\n )}\n {enableResizeOnStart && (\n <StartResizeHandle\n onWidthResize={onWidthResize}\n onWidthResizeEnd={onWidthResizeEnd}\n targetRef={boxRef}\n handleProps={horizontalHandleProps}\n />\n )}\n {enableResizeOnEnd && (\n <EndResizeHandle\n onWidthResize={onWidthResize}\n onWidthResizeEnd={onWidthResizeEnd}\n targetRef={boxRef}\n handleProps={horizontalHandleProps}\n />\n )}\n {enableResizeOnLeft && (\n <LeftResizeHandle\n onWidthResize={onWidthResize}\n onWidthResizeEnd={onWidthResizeEnd}\n targetRef={boxRef}\n handleProps={verticalHandleProps}\n />\n )}\n {enableResizeOnRight && (\n <RightResizeHandle\n onWidthResize={onWidthResize}\n onWidthResizeEnd={onWidthResizeEnd}\n targetRef={boxRef}\n handleProps={verticalHandleProps}\n />\n )}\n </As>\n );\n});\n"],"names":["Box","React","style","className","as","children","width","minWidth","maxWidth","height","minHeight","maxHeight","zIndex","padding","paddingInline","paddingBlock","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","overflow","overflowX","overflowY","enableResizeOnTop","enableResizeOnEnd","enableResizeOnBottom","enableResizeOnStart","enableResizeOnLeft","enableResizeOnRight","onWidthResize","onHeightResize","onWidthResizeEnd","onHeightResizeEnd","horizontalHandleProps","verticalHandleProps","otherProps","ref","As","boxRef","useRef","forkedRef","useForkRef","hasHorizontalResize","hasVerticalResize","cannotHorizontalFlex","cannotVerticalFlex","warnHorizontalFlex","warnVerticalFlex","isFlexing","propStyles","isCustomSizeProp","jsxs","removeUndefinedProperties","clsx","styles","jsx","TopResizeHandle","BottomResizeHandle","StartResizeHandle","EndResizeHandle","LeftResizeHandle","RightResizeHandle"],"mappings":";;;;;;;;;;;;;;;;;;;AA2DO,MAAMA,KAAMC,EAAM,WAAkC,SACzD;AAAA,EACE,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC,IAAK;AAAA,EACL,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,mBAAAC,IAAoB;AAAA,EACpB,sBAAAC,IAAuB;AAAA,EACvB,qBAAAC,IAAsB;AAAA,EACtB,oBAAAC,IAAqB;AAAA,EACrB,qBAAAC,IAAsB;AAAA,EACtB,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAKpC,GACLqC,IAASC,GAA2B,IAAI,GACxCC,IAAYC,GAAWL,GAAKE,CAAM,GAClCI,IACJlB,KAAqBE,KAAuBC,KAAsBC,GAC9De,IAAoBlB,KAAwBF,GAE5CqB,IAAuBF,GACvBG,IAAqBF,GACrBG,IAAqBF,KAAwBzC,MAAU,QACvD4C,IAAmBF,KAAsBvC,MAAW,QACpD0C,IACJ,CAACF,KAAsB,CAACC,MAAqB5C,MAAU,UAAUG,MAAW;AAE9E,EAAIwC,MACF3C,IAAQ,QAER,QAAQ,KAAK,yDAAyD,IAGpE4C,MACFzC,IAAS,QAET,QAAQ,KAAK,yDAAyD;AAGxE,QAAM2C,IAAa;AAAA,IACjB,OAAQC,EAAiB/C,CAAK,IAAY,SAARA;AAAA,IAClC,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAS6C,EAAiB5C,CAAM,IAAa,SAATA;AAAA,IACpC,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAE;AAAA,IACA,eAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAb;AAAA,EAAA;AAGF,SACE,gBAAA0C;AAAA,IAACd;AAAA,IAAA;AAAA,MACC,gCAA8B,OAAOX,CAAmB;AAAA,MACxD,8BAA4B,OAAOF,CAAiB;AAAA,MACpD,8BAA4B,OAAOD,CAAiB;AAAA,MACpD,iCAA+B,OAAOE,CAAoB;AAAA,MAC1D,+BAA6B,OAAOE,CAAkB;AAAA,MACtD,gCAA8B,OAAOC,CAAmB;AAAA,MACxD,eAAatB;AAAA,MACb,cAAYH;AAAA,MACZ,KAAKqC;AAAA,MACL,OAAO;AAAA,QACL,GAAGY,GAA0BH,CAAU;AAAA,QACvC,GAAGlD;AAAA,MAAA;AAAA,MAEL,WAAWsD;AAAA,QACTC,EAAO;AAAA,QACPtD;AAAA,QACAgD,KAAa;AAAA,QACbA,KAAaM,EAAO,YAAY;AAAA,QAChC;AAAA,MAAA;AAAA,MAED,GAAGnB;AAAA,MAEH,UAAA;AAAA,QAAAjC;AAAA,QACAqB,KACC,gBAAAgC;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,gBAAA1B;AAAA,YACA,mBAAAE;AAAA,YACA,WAAWM;AAAA,YACX,aAAaL;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhBR,KACC,gBAAA8B;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,gBAAA3B;AAAA,YACA,mBAAAE;AAAA,YACA,WAAWM;AAAA,YACX,aAAaJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhBR,KACC,gBAAA6B;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,eAAA7B;AAAA,YACA,kBAAAE;AAAA,YACA,WAAWO;AAAA,YACX,aAAaL;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhBT,KACC,gBAAA+B;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,eAAA9B;AAAA,YACA,kBAAAE;AAAA,YACA,WAAWO;AAAA,YACX,aAAaL;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhBN,KACC,gBAAA4B;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,eAAA/B;AAAA,YACA,kBAAAE;AAAA,YACA,WAAWO;AAAA,YACX,aAAaJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhBN,KACC,gBAAA2B;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,eAAAhC;AAAA,YACA,kBAAAE;AAAA,YACA,WAAWO;AAAA,YACX,aAAaJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
|
|
1
|
+
{"version":3,"file":"box.js","sources":["../../../src/stacks/box/box.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { CSSProperties, HTMLAttributes, useRef } from 'react';\nimport { useForkRef } from '../../utils/index.js';\nimport styles from '../stack.module.css';\nimport { isCustomSizeProp } from '../utils/isCustomSizeProp.js';\nimport { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';\nimport { BottomResizeHandle } from './bottom_resize_handle.js';\nimport { EndResizeHandle } from './end_resize_handle.js';\nimport { HandleProps } from './handle_props.js';\nimport { LeftResizeHandle } from './left_resize_handle.js';\nimport { RightResizeHandle } from './right_resize_handle.js';\nimport { StartResizeHandle } from './start_resize_handle.js';\nimport { TopResizeHandle } from './top_resize_handle.js';\n\nexport interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<T> {\n as?: string;\n style?: React.CSSProperties;\n className?: string;\n children?: React.ReactNode;\n width?: 'default' | 'flex' | 'auto' | string | number;\n minWidth?: CSSProperties['minWidth'];\n maxWidth?: CSSProperties['maxWidth'];\n height?: 'default' | 'flex' | 'auto' | string | number;\n minHeight?: CSSProperties['minHeight'];\n maxHeight?: CSSProperties['maxHeight'];\n zIndex?: number;\n padding?: CSSProperties['padding'];\n paddingInline?: CSSProperties['paddingInline'];\n paddingBlock?: CSSProperties['paddingBlock'];\n margin?: CSSProperties['margin'];\n marginBlock?: CSSProperties['marginBlock'];\n marginInline?: CSSProperties['marginInline'];\n marginInlineStart?: CSSProperties['marginInlineStart'];\n marginInlineEnd?: CSSProperties['marginInlineEnd'];\n marginTop?: CSSProperties['marginTop'];\n marginBottom?: CSSProperties['marginBottom'];\n overflow?: React.CSSProperties['overflow'];\n overflowX?: React.CSSProperties['overflowX'];\n overflowY?: React.CSSProperties['overflowY'];\n enableResizeOnTop?: boolean;\n enableResizeOnEnd?: boolean;\n enableResizeOnBottom?: boolean;\n enableResizeOnStart?: boolean;\n enableResizeOnLeft?: boolean;\n enableResizeOnRight?: boolean;\n horizontalHandleProps?: HandleProps;\n verticalHandleProps?: HandleProps;\n onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;\n onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void;\n onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;\n onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;\n}\n\nexport const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(\n {\n style,\n className,\n as = 'div',\n children,\n width = 'default',\n minWidth,\n maxWidth,\n height = 'default',\n minHeight,\n maxHeight,\n zIndex,\n padding,\n paddingInline,\n paddingBlock,\n margin,\n marginBlock,\n marginInline,\n marginInlineStart,\n marginInlineEnd,\n marginTop,\n marginBottom,\n overflow,\n overflowX,\n overflowY,\n enableResizeOnTop = false,\n enableResizeOnEnd = false,\n enableResizeOnBottom = false,\n enableResizeOnStart = false,\n enableResizeOnLeft = false,\n enableResizeOnRight = false,\n onWidthResize,\n onHeightResize,\n onWidthResizeEnd,\n onHeightResizeEnd,\n horizontalHandleProps,\n verticalHandleProps,\n ...otherProps\n }: BoxProps,\n ref\n) {\n const As = as as React.ElementType;\n const boxRef = useRef<HTMLElement | null>(null);\n const forkedRef = useForkRef(ref, boxRef);\n const hasHorizontalResize =\n enableResizeOnEnd || enableResizeOnStart || enableResizeOnLeft || enableResizeOnRight;\n const hasVerticalResize = enableResizeOnBottom || enableResizeOnTop;\n\n const cannotHorizontalFlex = hasHorizontalResize;\n const cannotVerticalFlex = hasVerticalResize;\n const warnHorizontalFlex = cannotHorizontalFlex && width === 'flex';\n const warnVerticalFlex = cannotVerticalFlex && height === 'flex';\n const isFlexing =\n !warnHorizontalFlex && !warnVerticalFlex && (width === 'flex' || height === 'flex');\n\n if (warnHorizontalFlex) {\n width = '100%';\n // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n console.warn('You cannot have a resizable box and flex simultaneously');\n }\n\n if (warnVerticalFlex) {\n height = 'auto';\n // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n console.warn('You cannot have a resizable box and flex simultaneously');\n }\n\n const propStyles = {\n width: !isCustomSizeProp(width) ? width : undefined,\n minWidth,\n maxWidth,\n height: !isCustomSizeProp(height) ? height : undefined,\n minHeight,\n maxHeight,\n padding,\n paddingInline,\n paddingBlock,\n margin,\n marginBlock,\n marginInline,\n marginInlineStart,\n marginInlineEnd,\n marginTop,\n marginBottom,\n overflow,\n overflowX,\n overflowY,\n zIndex,\n };\n\n return (\n <As\n data-enabled-resize-on-start={String(enableResizeOnStart)}\n data-enabled-resize-on-end={String(enableResizeOnEnd)}\n data-enabled-resize-on-top={String(enableResizeOnTop)}\n data-enabled-resize-on-bottom={String(enableResizeOnBottom)}\n data_enabled-resize-on-left={String(enableResizeOnLeft)}\n data_enabled-resize-on-right={String(enableResizeOnRight)}\n data-height={height}\n data-width={width}\n ref={forkedRef}\n style={{\n ...removeUndefinedProperties(propStyles),\n ...style,\n }}\n className={clsx(\n styles['box'],\n className,\n isFlexing && 'stack-flex',\n isFlexing && styles['stack-flex'],\n 'tcn-box'\n )}\n {...otherProps}\n >\n {children}\n {enableResizeOnTop && (\n <TopResizeHandle\n onHeightResize={onHeightResize}\n onHeightResizeEnd={onHeightResizeEnd}\n targetRef={boxRef}\n handleProps={horizontalHandleProps}\n />\n )}\n {enableResizeOnBottom && (\n <BottomResizeHandle\n onHeightResize={onHeightResize}\n onHeightResizeEnd={onHeightResizeEnd}\n targetRef={boxRef}\n handleProps={verticalHandleProps}\n />\n )}\n {enableResizeOnStart && (\n <StartResizeHandle\n onWidthResize={onWidthResize}\n onWidthResizeEnd={onWidthResizeEnd}\n targetRef={boxRef}\n handleProps={horizontalHandleProps}\n />\n )}\n {enableResizeOnEnd && (\n <EndResizeHandle\n onWidthResize={onWidthResize}\n onWidthResizeEnd={onWidthResizeEnd}\n targetRef={boxRef}\n handleProps={horizontalHandleProps}\n />\n )}\n {enableResizeOnLeft && (\n <LeftResizeHandle\n onWidthResize={onWidthResize}\n onWidthResizeEnd={onWidthResizeEnd}\n targetRef={boxRef}\n handleProps={verticalHandleProps}\n />\n )}\n {enableResizeOnRight && (\n <RightResizeHandle\n onWidthResize={onWidthResize}\n onWidthResizeEnd={onWidthResizeEnd}\n targetRef={boxRef}\n handleProps={verticalHandleProps}\n />\n )}\n </As>\n );\n});\n"],"names":["Box","React","style","className","as","children","width","minWidth","maxWidth","height","minHeight","maxHeight","zIndex","padding","paddingInline","paddingBlock","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","overflow","overflowX","overflowY","enableResizeOnTop","enableResizeOnEnd","enableResizeOnBottom","enableResizeOnStart","enableResizeOnLeft","enableResizeOnRight","onWidthResize","onHeightResize","onWidthResizeEnd","onHeightResizeEnd","horizontalHandleProps","verticalHandleProps","otherProps","ref","As","boxRef","useRef","forkedRef","useForkRef","hasHorizontalResize","hasVerticalResize","cannotHorizontalFlex","cannotVerticalFlex","warnHorizontalFlex","warnVerticalFlex","isFlexing","propStyles","isCustomSizeProp","jsxs","removeUndefinedProperties","clsx","styles","jsx","TopResizeHandle","BottomResizeHandle","StartResizeHandle","EndResizeHandle","LeftResizeHandle","RightResizeHandle"],"mappings":"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"}
|