@heymantle/litho 0.0.6 → 0.0.7

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 (7) hide show
  1. package/dist/cjs/components/Grid.js +19 -5
  2. package/dist/cjs/stories/Grid.stories.js +14 -14
  3. package/dist/esm/components/Grid.js +19 -5
  4. package/dist/esm/stories/Grid.stories.js +14 -14
  5. package/dist/types/components/Grid.d.ts +2 -2
  6. package/dist/types/components/Grid.d.ts.map +1 -1
  7. package/package.json +1 -1
package/dist/cjs/components/Grid.js CHANGED
@@ -60,6 +60,14 @@ function _unsupported_iterable_to_array(o, minLen) {
60
60
  if (n === "Map" || n === "Set") return Array.from(n);
61
61
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
62
62
  }
63
+ // Map semantic gap values to numeric Tailwind values
64
+ var gapMap = {
65
+ none: "0",
66
+ xs: "1",
67
+ sm: "2",
68
+ md: "4",
69
+ lg: "8"
70
+ };
63
71
  var styles = (0, _tailwindvariants.tv)({
64
72
  base: "Litho-Grid grid",
65
73
  variants: {
@@ -83,11 +91,11 @@ var styles = (0, _tailwindvariants.tv)({
83
91
  });
84
92
  /**
85
93
  * Tailwind-based Grid component with customizable columns, gaps, alignment, and justification.
86
- *
94
+ *
87
95
  * @param {object} [props={}] - Props for the Grid component.
88
96
  * @param {React.ReactNode} [props.children] - Content to render inside the Grid.
89
97
  * @param {number|object} [props.columns] - Defines the number of columns in the grid. Can be a single number or an object with breakpoints as keys.
90
- * @param {number|object} [props.gap] - Defines the gap between grid items. Can be a single number or an object with breakpoints as keys.
98
+ * @param {(number|'none'|'xs'|'sm'|'md'|'lg'|object)} [props.gap] - Defines the gap between grid items. Can be a number, semantic value ('none', 'xs', 'sm', 'md', 'lg'), or an object with breakpoints as keys. Semantic values: 'none' (0), 'xs' (1), 'sm' (2), 'md' (4), 'lg' (8).
91
99
  * @param {"stretch"|"start"|"end"|"center"} [props.justify="stretch"] - Horizontal alignment of the grid items.
92
100
  * @param {"stretch"|"start"|"end"|"center"} [props.align="stretch"] - Vertical alignment of the grid items.
93
101
  * @param {string} [props.className] - Additional class names to apply to the grid.
@@ -107,11 +115,17 @@ var styles = (0, _tailwindvariants.tv)({
107
115
  }
108
116
  if ((typeof gap === "undefined" ? "undefined" : _type_of(gap)) === "object") {
109
117
  gapClasses = Object.entries(gap).map(function(param) {
110
- var _param = _sliced_to_array(param, 2), breakpoint = _param[0], count = _param[1];
111
- return breakpoint === "default" || breakpoint === "xs" ? "gap-".concat(count) : "@".concat(breakpoint, ":gap-").concat(count);
118
+ var _param = _sliced_to_array(param, 2), breakpoint = _param[0], value = _param[1];
119
+ // Convert semantic values to numeric values
120
+ var numericValue = gapMap[value] || value;
121
+ return breakpoint === "default" || breakpoint === "xs" ? "gap-".concat(numericValue) : "@".concat(breakpoint, ":gap-").concat(numericValue);
112
122
  }).join(" ");
123
+ } else if (gap !== undefined) {
124
+ // Convert semantic values to numeric values
125
+ var numericGap = gapMap[gap] || gap;
126
+ gapClasses = "gap-".concat(numericGap);
113
127
  } else {
114
- gapClasses = "gap-".concat(gap);
128
+ gapClasses = "";
115
129
  }
116
130
  var classes = styles({
117
131
  align: align,
package/dist/cjs/stories/Grid.stories.js CHANGED
@@ -251,7 +251,7 @@ var DifferentColumns = {
251
251
  }),
252
252
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
253
253
  columns: 2,
254
- gap: 4,
254
+ gap: "md",
255
255
  children: [
256
256
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
257
257
  padded: true,
@@ -289,7 +289,7 @@ var DifferentColumns = {
289
289
  }),
290
290
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
291
291
  columns: 4,
292
- gap: 4,
292
+ gap: "md",
293
293
  children: [
294
294
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
295
295
  padded: true,
@@ -327,7 +327,7 @@ var DifferentColumns = {
327
327
  }),
328
328
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
329
329
  columns: 6,
330
- gap: 2,
330
+ gap: "sm",
331
331
  children: [
332
332
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
333
333
  padded: true,
@@ -387,7 +387,7 @@ var WithColumnSpan = {
387
387
  render: function() {
388
388
  return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
389
389
  columns: 4,
390
- gap: 4,
390
+ gap: "md",
391
391
  children: [
392
392
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default.Cell, {
393
393
  columnSpan: 2,
@@ -470,7 +470,7 @@ var GapSizes = {
470
470
  }),
471
471
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
472
472
  columns: 3,
473
- gap: 0,
473
+ gap: "none",
474
474
  children: [
475
475
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
476
476
  padded: true,
@@ -502,7 +502,7 @@ var GapSizes = {
502
502
  }),
503
503
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
504
504
  columns: 3,
505
- gap: 2,
505
+ gap: "sm",
506
506
  children: [
507
507
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
508
508
  padded: true,
@@ -534,7 +534,7 @@ var GapSizes = {
534
534
  }),
535
535
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
536
536
  columns: 3,
537
- gap: 8,
537
+ gap: "lg",
538
538
  children: [
539
539
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
540
540
  padded: true,
@@ -590,7 +590,7 @@ var Alignment = {
590
590
  borderColor: "border-subdued",
591
591
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
592
592
  columns: 3,
593
- gap: 4,
593
+ gap: "md",
594
594
  justify: "center",
595
595
  align: "center",
596
596
  children: [
@@ -630,7 +630,7 @@ var Alignment = {
630
630
  borderColor: "border-subdued",
631
631
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
632
632
  columns: 3,
633
- gap: 4,
633
+ gap: "md",
634
634
  justify: "start",
635
635
  align: "end",
636
636
  children: [
@@ -716,7 +716,7 @@ var ProductCatalog = {
716
716
  padded: true,
717
717
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default, {
718
718
  columns: 3,
719
- gap: 4,
719
+ gap: "md",
720
720
  children: products.map(function(product, index) {
721
721
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
722
722
  padded: true,
@@ -777,7 +777,7 @@ var DashboardLayout = {
777
777
  children: [
778
778
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
779
779
  columns: 4,
780
- gap: 4,
780
+ gap: "md",
781
781
  children: [
782
782
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
783
783
  padded: true,
@@ -855,7 +855,7 @@ var DashboardLayout = {
855
855
  }),
856
856
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
857
857
  columns: 3,
858
- gap: 4,
858
+ gap: "md",
859
859
  children: [
860
860
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default.Cell, {
861
861
  columnSpan: 2,
@@ -957,7 +957,7 @@ var TeamDirectory = {
957
957
  padded: true,
958
958
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default, {
959
959
  columns: 4,
960
- gap: 4,
960
+ gap: "md",
961
961
  children: team.map(function(member, index) {
962
962
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
963
963
  padded: true,
@@ -1026,7 +1026,7 @@ var ImageGallery = {
1026
1026
  padded: true,
1027
1027
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
1028
1028
  columns: 4,
1029
- gap: 3,
1029
+ gap: "sm",
1030
1030
  children: [
1031
1031
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default.Cell, {
1032
1032
  columnSpan: 2,
package/dist/esm/components/Grid.js CHANGED
@@ -50,6 +50,14 @@ function _unsupported_iterable_to_array(o, minLen) {
50
50
  }
51
51
  import { jsx as _jsx } from "react/jsx-runtime";
52
52
  import { tv } from "tailwind-variants";
53
+ // Map semantic gap values to numeric Tailwind values
54
+ var gapMap = {
55
+ none: "0",
56
+ xs: "1",
57
+ sm: "2",
58
+ md: "4",
59
+ lg: "8"
60
+ };
53
61
  var styles = tv({
54
62
  base: "Litho-Grid grid",
55
63
  variants: {
@@ -73,11 +81,11 @@ var styles = tv({
73
81
  });
74
82
  /**
75
83
  * Tailwind-based Grid component with customizable columns, gaps, alignment, and justification.
76
- *
84
+ *
77
85
  * @param {object} [props={}] - Props for the Grid component.
78
86
  * @param {React.ReactNode} [props.children] - Content to render inside the Grid.
79
87
  * @param {number|object} [props.columns] - Defines the number of columns in the grid. Can be a single number or an object with breakpoints as keys.
80
- * @param {number|object} [props.gap] - Defines the gap between grid items. Can be a single number or an object with breakpoints as keys.
88
+ * @param {(number|'none'|'xs'|'sm'|'md'|'lg'|object)} [props.gap] - Defines the gap between grid items. Can be a number, semantic value ('none', 'xs', 'sm', 'md', 'lg'), or an object with breakpoints as keys. Semantic values: 'none' (0), 'xs' (1), 'sm' (2), 'md' (4), 'lg' (8).
81
89
  * @param {"stretch"|"start"|"end"|"center"} [props.justify="stretch"] - Horizontal alignment of the grid items.
82
90
  * @param {"stretch"|"start"|"end"|"center"} [props.align="stretch"] - Vertical alignment of the grid items.
83
91
  * @param {string} [props.className] - Additional class names to apply to the grid.
@@ -97,11 +105,17 @@ var styles = tv({
97
105
  }
98
106
  if ((typeof gap === "undefined" ? "undefined" : _type_of(gap)) === "object") {
99
107
  gapClasses = Object.entries(gap).map(function(param) {
100
- var _param = _sliced_to_array(param, 2), breakpoint = _param[0], count = _param[1];
101
- return breakpoint === "default" || breakpoint === "xs" ? "gap-".concat(count) : "@".concat(breakpoint, ":gap-").concat(count);
108
+ var _param = _sliced_to_array(param, 2), breakpoint = _param[0], value = _param[1];
109
+ // Convert semantic values to numeric values
110
+ var numericValue = gapMap[value] || value;
111
+ return breakpoint === "default" || breakpoint === "xs" ? "gap-".concat(numericValue) : "@".concat(breakpoint, ":gap-").concat(numericValue);
102
112
  }).join(" ");
113
+ } else if (gap !== undefined) {
114
+ // Convert semantic values to numeric values
115
+ var numericGap = gapMap[gap] || gap;
116
+ gapClasses = "gap-".concat(numericGap);
103
117
  } else {
104
- gapClasses = "gap-".concat(gap);
118
+ gapClasses = "";
105
119
  }
106
120
  var classes = styles({
107
121
  align: align,
package/dist/esm/stories/Grid.stories.js CHANGED
@@ -204,7 +204,7 @@ export var DifferentColumns = {
204
204
  }),
205
205
  /*#__PURE__*/ _jsxs(Grid, {
206
206
  columns: 2,
207
- gap: 4,
207
+ gap: "md",
208
208
  children: [
209
209
  /*#__PURE__*/ _jsx(Card, {
210
210
  padded: true,
@@ -242,7 +242,7 @@ export var DifferentColumns = {
242
242
  }),
243
243
  /*#__PURE__*/ _jsxs(Grid, {
244
244
  columns: 4,
245
- gap: 4,
245
+ gap: "md",
246
246
  children: [
247
247
  /*#__PURE__*/ _jsx(Card, {
248
248
  padded: true,
@@ -280,7 +280,7 @@ export var DifferentColumns = {
280
280
  }),
281
281
  /*#__PURE__*/ _jsxs(Grid, {
282
282
  columns: 6,
283
- gap: 2,
283
+ gap: "sm",
284
284
  children: [
285
285
  /*#__PURE__*/ _jsx(Card, {
286
286
  padded: true,
@@ -340,7 +340,7 @@ export var WithColumnSpan = {
340
340
  render: function() {
341
341
  return /*#__PURE__*/ _jsxs(Grid, {
342
342
  columns: 4,
343
- gap: 4,
343
+ gap: "md",
344
344
  children: [
345
345
  /*#__PURE__*/ _jsx(Grid.Cell, {
346
346
  columnSpan: 2,
@@ -423,7 +423,7 @@ export var GapSizes = {
423
423
  }),
424
424
  /*#__PURE__*/ _jsxs(Grid, {
425
425
  columns: 3,
426
- gap: 0,
426
+ gap: "none",
427
427
  children: [
428
428
  /*#__PURE__*/ _jsx(Card, {
429
429
  padded: true,
@@ -455,7 +455,7 @@ export var GapSizes = {
455
455
  }),
456
456
  /*#__PURE__*/ _jsxs(Grid, {
457
457
  columns: 3,
458
- gap: 2,
458
+ gap: "sm",
459
459
  children: [
460
460
  /*#__PURE__*/ _jsx(Card, {
461
461
  padded: true,
@@ -487,7 +487,7 @@ export var GapSizes = {
487
487
  }),
488
488
  /*#__PURE__*/ _jsxs(Grid, {
489
489
  columns: 3,
490
- gap: 8,
490
+ gap: "lg",
491
491
  children: [
492
492
  /*#__PURE__*/ _jsx(Card, {
493
493
  padded: true,
@@ -543,7 +543,7 @@ export var Alignment = {
543
543
  borderColor: "border-subdued",
544
544
  children: /*#__PURE__*/ _jsxs(Grid, {
545
545
  columns: 3,
546
- gap: 4,
546
+ gap: "md",
547
547
  justify: "center",
548
548
  align: "center",
549
549
  children: [
@@ -583,7 +583,7 @@ export var Alignment = {
583
583
  borderColor: "border-subdued",
584
584
  children: /*#__PURE__*/ _jsxs(Grid, {
585
585
  columns: 3,
586
- gap: 4,
586
+ gap: "md",
587
587
  justify: "start",
588
588
  align: "end",
589
589
  children: [
@@ -669,7 +669,7 @@ export var ProductCatalog = {
669
669
  padded: true,
670
670
  children: /*#__PURE__*/ _jsx(Grid, {
671
671
  columns: 3,
672
- gap: 4,
672
+ gap: "md",
673
673
  children: products.map(function(product, index) {
674
674
  return /*#__PURE__*/ _jsx(Card, {
675
675
  padded: true,
@@ -730,7 +730,7 @@ export var DashboardLayout = {
730
730
  children: [
731
731
  /*#__PURE__*/ _jsxs(Grid, {
732
732
  columns: 4,
733
- gap: 4,
733
+ gap: "md",
734
734
  children: [
735
735
  /*#__PURE__*/ _jsxs(Card, {
736
736
  padded: true,
@@ -808,7 +808,7 @@ export var DashboardLayout = {
808
808
  }),
809
809
  /*#__PURE__*/ _jsxs(Grid, {
810
810
  columns: 3,
811
- gap: 4,
811
+ gap: "md",
812
812
  children: [
813
813
  /*#__PURE__*/ _jsx(Grid.Cell, {
814
814
  columnSpan: 2,
@@ -910,7 +910,7 @@ export var TeamDirectory = {
910
910
  padded: true,
911
911
  children: /*#__PURE__*/ _jsx(Grid, {
912
912
  columns: 4,
913
- gap: 4,
913
+ gap: "md",
914
914
  children: team.map(function(member, index) {
915
915
  return /*#__PURE__*/ _jsx(Card, {
916
916
  padded: true,
@@ -979,7 +979,7 @@ export var ImageGallery = {
979
979
  padded: true,
980
980
  children: /*#__PURE__*/ _jsxs(Grid, {
981
981
  columns: 4,
982
- gap: 3,
982
+ gap: "sm",
983
983
  children: [
984
984
  /*#__PURE__*/ _jsx(Grid.Cell, {
985
985
  columnSpan: 2,
package/dist/types/components/Grid.d.ts CHANGED
@@ -5,7 +5,7 @@ export default Grid;
5
5
  * @param {object} [props={}] - Props for the Grid component.
6
6
  * @param {React.ReactNode} [props.children] - Content to render inside the Grid.
7
7
  * @param {number|object} [props.columns] - Defines the number of columns in the grid. Can be a single number or an object with breakpoints as keys.
8
- * @param {number|object} [props.gap] - Defines the gap between grid items. Can be a single number or an object with breakpoints as keys.
8
+ * @param {(number|'none'|'xs'|'sm'|'md'|'lg'|object)} [props.gap] - Defines the gap between grid items. Can be a number, semantic value ('none', 'xs', 'sm', 'md', 'lg'), or an object with breakpoints as keys. Semantic values: 'none' (0), 'xs' (1), 'sm' (2), 'md' (4), 'lg' (8).
9
9
  * @param {"stretch"|"start"|"end"|"center"} [props.justify="stretch"] - Horizontal alignment of the grid items.
10
10
  * @param {"stretch"|"start"|"end"|"center"} [props.align="stretch"] - Vertical alignment of the grid items.
11
11
  * @param {string} [props.className] - Additional class names to apply to the grid.
@@ -14,7 +14,7 @@ export default Grid;
14
14
  declare function Grid(props?: {
15
15
  children?: React.ReactNode;
16
16
  columns?: number | object;
17
- gap?: number | object;
17
+ gap?: (number | "none" | "xs" | "sm" | "md" | "lg" | object);
18
18
  justify?: "stretch" | "start" | "end" | "center";
19
19
  align?: "stretch" | "start" | "end" | "center";
20
20
  className?: string;
package/dist/types/components/Grid.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../components/Grid.js"],"names":[],"mappings":";AAwBA;;;;;;;;;;;GAWG;AACH,8BARG;IAAgC,QAAQ,GAAhC,KAAK,CAAC,SAAS;IACO,OAAO,GAA7B,MAAM,GAAC,MAAM;IACS,GAAG,GAAzB,MAAM,GAAC,MAAM;IAC4B,OAAO,GAAhD,SAAS,GAAC,OAAO,GAAC,KAAK,GAAC,QAAQ;IACS,KAAK,GAA9C,SAAS,GAAC,OAAO,GAAC,KAAK,GAAC,QAAQ;IACjB,SAAS,GAAxB,MAAM;CACd,GAAU,GAAG,CAAC,OAAO,CAyCvB;;;;AAED;;;;;;;;GAQG;AACH,8BALG;IAA8B,UAAU,GAAhC,MAAM,GAAC,MAAM;IACW,QAAQ,GAAhC,KAAK,CAAC,SAAS;IACA,SAAS,GAAxB,MAAM;CACd,GAAU,GAAG,CAAC,OAAO,CAwBvB"}
1
+ {"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../components/Grid.js"],"names":[],"mappings":";AAiCA;;;;;;;;;;;GAWG;AACH,8BARG;IAAgC,QAAQ,GAAhC,KAAK,CAAC,SAAS;IACO,OAAO,GAA7B,MAAM,GAAC,MAAM;IACsC,GAAG,GAAtD,CAAC,MAAM,GAAC,MAAM,GAAC,IAAI,GAAC,IAAI,GAAC,IAAI,GAAC,IAAI,GAAC,MAAM,CAAC;IACD,OAAO,GAAhD,SAAS,GAAC,OAAO,GAAC,KAAK,GAAC,QAAQ;IACS,KAAK,GAA9C,SAAS,GAAC,OAAO,GAAC,KAAK,GAAC,QAAQ;IACjB,SAAS,GAAxB,MAAM;CACd,GAAU,GAAG,CAAC,OAAO,CAiDvB;;;;AAED;;;;;;;;GAQG;AACH,8BALG;IAA8B,UAAU,GAAhC,MAAM,GAAC,MAAM;IACW,QAAQ,GAAhC,KAAK,CAAC,SAAS;IACA,SAAS,GAAxB,MAAM;CACd,GAAU,GAAG,CAAC,OAAO,CAwBvB"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@heymantle/litho",
3
3
  "description": "Litho is a library of components for building Mantle extensions",
4
- "version": "0.0.6",
4
+ "version": "0.0.7",
5
5
  "type": "module",
6
6
  "main": "./dist/esm/index.js",
7
7
  "module": "./dist/esm/index.js",