@kopexa/section-row 17.0.2 → 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 (8) hide show
  1. package/dist/{chunk-SCQGARJA.mjs → chunk-ZF4DCOO6.mjs} +27 -21
  2. package/dist/index.js +27 -21
  3. package/dist/index.mjs +1 -1
  4. package/dist/section-row.d.mts +18 -1
  5. package/dist/section-row.d.ts +18 -1
  6. package/dist/section-row.js +27 -21
  7. package/dist/section-row.mjs +1 -1
  8. package/package.json +4 -4
package/dist/{chunk-SCQGARJA.mjs → chunk-ZF4DCOO6.mjs} RENAMED
@@ -11,19 +11,26 @@ var SectionRow = (props) => {
11
11
  className,
12
12
  classNames,
13
13
  title,
14
+ icon,
14
15
  value,
15
16
  actions,
16
17
  orientation,
18
+ align,
17
19
  info,
18
20
  spacing,
21
+ justify,
19
22
  ...rest
20
23
  } = props;
21
24
  const isValueString = typeof value === "string" || !value;
22
25
  const hasActions = !!actions;
26
+ const resolvedOrientation = orientation === "horizontalCentered" ? "horizontal" : orientation;
27
+ const resolvedAlign = orientation === "horizontalCentered" ? "center" : align;
23
28
  const styles = sectionRow({
24
29
  hasActions,
25
- orientation,
26
- spacing
30
+ orientation: resolvedOrientation,
31
+ align: resolvedAlign,
32
+ spacing,
33
+ justify
27
34
  });
28
35
  return /* @__PURE__ */ jsxs(
29
36
  "div",
@@ -34,33 +41,32 @@ var SectionRow = (props) => {
34
41
  ...rest,
35
42
  children: [
36
43
  /* @__PURE__ */ jsxs("div", { className: styles.title({ className: classNames == null ? void 0 : classNames.title }), children: [
44
+ icon && /* @__PURE__ */ jsx("span", { className: styles.icon({ className: classNames == null ? void 0 : classNames.icon }), children: icon }),
37
45
  title,
38
46
  info && /* @__PURE__ */ jsx("div", { className: styles.infoTip({ className: classNames == null ? void 0 : classNames.infoTip }), children: info })
39
47
  ] }),
40
- /* @__PURE__ */ jsxs(
48
+ /* @__PURE__ */ jsx(
41
49
  "div",
42
50
  {
43
51
  className: styles.valueContainer({
44
52
  className: classNames == null ? void 0 : classNames.valueContainer
45
53
  }),
46
- children: [
47
- isValueString ? /* @__PURE__ */ jsx(
48
- "span",
49
- {
50
- className: styles.valueText({ className: classNames == null ? void 0 : classNames.valueText }),
51
- children: value != null ? value : "-"
52
- }
53
- ) : value,
54
- actions && /* @__PURE__ */ jsx(
55
- "div",
56
- {
57
- className: styles.action({
58
- className: classNames == null ? void 0 : classNames.action
59
- }),
60
- children: actions
61
- }
62
- )
63
- ]
54
+ children: isValueString ? /* @__PURE__ */ jsx(
55
+ "span",
56
+ {
57
+ className: styles.valueText({ className: classNames == null ? void 0 : classNames.valueText }),
58
+ children: value != null ? value : "-"
59
+ }
60
+ ) : value
61
+ }
62
+ ),
63
+ /* @__PURE__ */ jsx(
64
+ "div",
65
+ {
66
+ className: styles.action({
67
+ className: classNames == null ? void 0 : classNames.action
68
+ }),
69
+ children: actions
64
70
  }
65
71
  )
66
72
  ]
package/dist/index.js CHANGED
@@ -34,19 +34,26 @@ var SectionRow = (props) => {
34
34
  className,
35
35
  classNames,
36
36
  title,
37
+ icon,
37
38
  value,
38
39
  actions,
39
40
  orientation,
41
+ align,
40
42
  info,
41
43
  spacing,
44
+ justify,
42
45
  ...rest
43
46
  } = props;
44
47
  const isValueString = typeof value === "string" || !value;
45
48
  const hasActions = !!actions;
49
+ const resolvedOrientation = orientation === "horizontalCentered" ? "horizontal" : orientation;
50
+ const resolvedAlign = orientation === "horizontalCentered" ? "center" : align;
46
51
  const styles = (0, import_theme.sectionRow)({
47
52
  hasActions,
48
- orientation,
49
- spacing
53
+ orientation: resolvedOrientation,
54
+ align: resolvedAlign,
55
+ spacing,
56
+ justify
50
57
  });
51
58
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
52
59
  "div",
@@ -57,33 +64,32 @@ var SectionRow = (props) => {
57
64
  ...rest,
58
65
  children: [
59
66
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.title({ className: classNames == null ? void 0 : classNames.title }), children: [
67
+ icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.icon({ className: classNames == null ? void 0 : classNames.icon }), children: icon }),
60
68
  title,
61
69
  info && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.infoTip({ className: classNames == null ? void 0 : classNames.infoTip }), children: info })
62
70
  ] }),
63
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
71
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
64
72
  "div",
65
73
  {
66
74
  className: styles.valueContainer({
67
75
  className: classNames == null ? void 0 : classNames.valueContainer
68
76
  }),
69
- children: [
70
- isValueString ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
71
- "span",
72
- {
73
- className: styles.valueText({ className: classNames == null ? void 0 : classNames.valueText }),
74
- children: value != null ? value : "-"
75
- }
76
- ) : value,
77
- actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
78
- "div",
79
- {
80
- className: styles.action({
81
- className: classNames == null ? void 0 : classNames.action
82
- }),
83
- children: actions
84
- }
85
- )
86
- ]
77
+ children: isValueString ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
78
+ "span",
79
+ {
80
+ className: styles.valueText({ className: classNames == null ? void 0 : classNames.valueText }),
81
+ children: value != null ? value : "-"
82
+ }
83
+ ) : value
84
+ }
85
+ ),
86
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
87
+ "div",
88
+ {
89
+ className: styles.action({
90
+ className: classNames == null ? void 0 : classNames.action
91
+ }),
92
+ children: actions
87
93
  }
88
94
  )
89
95
  ]
package/dist/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  SectionRow
4
- } from "./chunk-SCQGARJA.mjs";
4
+ } from "./chunk-ZF4DCOO6.mjs";
5
5
  export {
6
6
  SectionRow
7
7
  };
package/dist/section-row.d.mts CHANGED
@@ -2,13 +2,17 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { SectionRowVariantProps, SlotsToClasses, SectionRowSlots } from '@kopexa/theme';
3
3
  import { ComponentProps, ReactNode } from 'react';
4
4
 
5
- type SectionRowProps = Omit<ComponentProps<"div">, "children"> & SectionRowVariantProps & {
5
+ type SectionRowProps = Omit<ComponentProps<"div">, "children"> & Omit<SectionRowVariantProps, "orientation" | "align" | "hasActions"> & {
6
6
  classNames?: SlotsToClasses<SectionRowSlots>;
7
7
  /**
8
8
  * The title of the section row.
9
9
  * This is typically used to display the name or title of the section.
10
10
  */
11
11
  title: string;
12
+ /**
13
+ * Optional icon to display before the title.
14
+ */
15
+ icon?: ReactNode;
12
16
  /**
13
17
  * Optional info to render inside the section row.
14
18
  * This can be used to provide additional context or information about the section.
@@ -21,6 +25,19 @@ type SectionRowProps = Omit<ComponentProps<"div">, "children"> & SectionRowVaria
21
25
  * This can be any React node, such as text, icons, or other components.
22
26
  */
23
27
  value?: ReactNode | string | null;
28
+ /**
29
+ * Layout orientation of the section row.
30
+ * - "horizontal": title on the left, value on the right (default)
31
+ * - "vertical": title above, value below
32
+ * @deprecated "horizontalCentered" is deprecated, use "horizontal" with align="center" instead
33
+ */
34
+ orientation?: "horizontal" | "vertical" | "horizontalCentered";
35
+ /**
36
+ * Vertical alignment of items in horizontal orientation.
37
+ * - "start": align items to the top (default, best for multi-line values)
38
+ * - "center": align items to the center (best for single-line values)
39
+ */
40
+ align?: "start" | "center";
24
41
  /**
25
42
  * optional actions to render inside the section row
26
43
  * this can be used to render buttons or other interactive elements
package/dist/section-row.d.ts CHANGED
@@ -2,13 +2,17 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { SectionRowVariantProps, SlotsToClasses, SectionRowSlots } from '@kopexa/theme';
3
3
  import { ComponentProps, ReactNode } from 'react';
4
4
 
5
- type SectionRowProps = Omit<ComponentProps<"div">, "children"> & SectionRowVariantProps & {
5
+ type SectionRowProps = Omit<ComponentProps<"div">, "children"> & Omit<SectionRowVariantProps, "orientation" | "align" | "hasActions"> & {
6
6
  classNames?: SlotsToClasses<SectionRowSlots>;
7
7
  /**
8
8
  * The title of the section row.
9
9
  * This is typically used to display the name or title of the section.
10
10
  */
11
11
  title: string;
12
+ /**
13
+ * Optional icon to display before the title.
14
+ */
15
+ icon?: ReactNode;
12
16
  /**
13
17
  * Optional info to render inside the section row.
14
18
  * This can be used to provide additional context or information about the section.
@@ -21,6 +25,19 @@ type SectionRowProps = Omit<ComponentProps<"div">, "children"> & SectionRowVaria
21
25
  * This can be any React node, such as text, icons, or other components.
22
26
  */
23
27
  value?: ReactNode | string | null;
28
+ /**
29
+ * Layout orientation of the section row.
30
+ * - "horizontal": title on the left, value on the right (default)
31
+ * - "vertical": title above, value below
32
+ * @deprecated "horizontalCentered" is deprecated, use "horizontal" with align="center" instead
33
+ */
34
+ orientation?: "horizontal" | "vertical" | "horizontalCentered";
35
+ /**
36
+ * Vertical alignment of items in horizontal orientation.
37
+ * - "start": align items to the top (default, best for multi-line values)
38
+ * - "center": align items to the center (best for single-line values)
39
+ */
40
+ align?: "start" | "center";
24
41
  /**
25
42
  * optional actions to render inside the section row
26
43
  * this can be used to render buttons or other interactive elements
package/dist/section-row.js CHANGED
@@ -32,19 +32,26 @@ var SectionRow = (props) => {
32
32
  className,
33
33
  classNames,
34
34
  title,
35
+ icon,
35
36
  value,
36
37
  actions,
37
38
  orientation,
39
+ align,
38
40
  info,
39
41
  spacing,
42
+ justify,
40
43
  ...rest
41
44
  } = props;
42
45
  const isValueString = typeof value === "string" || !value;
43
46
  const hasActions = !!actions;
47
+ const resolvedOrientation = orientation === "horizontalCentered" ? "horizontal" : orientation;
48
+ const resolvedAlign = orientation === "horizontalCentered" ? "center" : align;
44
49
  const styles = (0, import_theme.sectionRow)({
45
50
  hasActions,
46
- orientation,
47
- spacing
51
+ orientation: resolvedOrientation,
52
+ align: resolvedAlign,
53
+ spacing,
54
+ justify
48
55
  });
49
56
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
50
57
  "div",
@@ -55,33 +62,32 @@ var SectionRow = (props) => {
55
62
  ...rest,
56
63
  children: [
57
64
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.title({ className: classNames == null ? void 0 : classNames.title }), children: [
65
+ icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.icon({ className: classNames == null ? void 0 : classNames.icon }), children: icon }),
58
66
  title,
59
67
  info && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.infoTip({ className: classNames == null ? void 0 : classNames.infoTip }), children: info })
60
68
  ] }),
61
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
69
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
62
70
  "div",
63
71
  {
64
72
  className: styles.valueContainer({
65
73
  className: classNames == null ? void 0 : classNames.valueContainer
66
74
  }),
67
- children: [
68
- isValueString ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
69
- "span",
70
- {
71
- className: styles.valueText({ className: classNames == null ? void 0 : classNames.valueText }),
72
- children: value != null ? value : "-"
73
- }
74
- ) : value,
75
- actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
76
- "div",
77
- {
78
- className: styles.action({
79
- className: classNames == null ? void 0 : classNames.action
80
- }),
81
- children: actions
82
- }
83
- )
84
- ]
75
+ children: isValueString ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
76
+ "span",
77
+ {
78
+ className: styles.valueText({ className: classNames == null ? void 0 : classNames.valueText }),
79
+ children: value != null ? value : "-"
80
+ }
81
+ ) : value
82
+ }
83
+ ),
84
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
85
+ "div",
86
+ {
87
+ className: styles.action({
88
+ className: classNames == null ? void 0 : classNames.action
89
+ }),
90
+ children: actions
85
91
  }
86
92
  )
87
93
  ]
package/dist/section-row.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  SectionRow
4
- } from "./chunk-SCQGARJA.mjs";
4
+ } from "./chunk-ZF4DCOO6.mjs";
5
5
  export {
6
6
  SectionRow
7
7
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kopexa/section-row",
3
- "version": "17.0.2",
3
+ "version": "17.1.0",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "section-row"
@@ -28,11 +28,11 @@
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.0.2"
31
+ "@kopexa/theme": "17.2.0"
32
32
  },
33
33
  "dependencies": {
34
- "@kopexa/shared-utils": "17.0.2",
35
- "@kopexa/react-utils": "17.0.2"
34
+ "@kopexa/shared-utils": "17.0.6",
35
+ "@kopexa/react-utils": "17.0.6"
36
36
  },
37
37
  "clean-package": "../../../clean-package.config.json",
38
38
  "module": "dist/index.mjs",