@weaverse/react 0.7.31 → 0.7.33

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 (4) hide show
  1. package/dist/index.d.ts +6 -1
  2. package/dist/index.js +36 -24
  3. package/dist/index.mjs +36 -24
  4. package/package.json +2 -2
package/dist/index.d.ts CHANGED
@@ -90,8 +90,13 @@ interface BackgroundDataProps {
90
90
  backgroundImage?: string;
91
91
  objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
92
92
  }
93
- interface LayoutElementProps extends BackgroundDataProps, GridContentElementProps {
93
+ interface LayoutElementProps extends BackgroundDataProps, WeaverseElementProps {
94
+ contentSize: number;
94
95
  gridSize: number;
96
+ rows: number;
97
+ columns: number;
98
+ gap: number;
99
+ rowSize: number;
95
100
  }
96
101
  interface LayoutBackgroundProps {
97
102
  imgUrl?: string;
package/dist/index.js CHANGED
@@ -64,20 +64,26 @@ var Button = React.forwardRef((props, ref) => {
64
64
  });
65
65
  Button.defaultProps = {
66
66
  type: "button",
67
- text: "Shop now",
67
+ text: "Button",
68
68
  clickAction: "none",
69
69
  linkTo: "",
70
70
  openInNewTab: false
71
71
  };
72
72
  var css = {
73
73
  "@desktop": {
74
- borderRadius: "72px",
74
+ borderRadius: "8px",
75
75
  border: "none",
76
76
  backgroundColor: "#393e46",
77
77
  color: "#fff",
78
- fontSize: "13px",
78
+ fontSize: "14px",
79
+ fontWeight: "medium",
79
80
  padding: "10px 20px",
80
- textDecoration: "none"
81
+ height: "42px",
82
+ minWidth: "120px",
83
+ textDecoration: "none",
84
+ ":hover": {
85
+ backgroundColor: "#222831"
86
+ }
81
87
  }
82
88
  };
83
89
  var Button_default = Button;
@@ -96,7 +102,6 @@ var Container = (0, import_react2.forwardRef)(
96
102
  var css2 = {
97
103
  "@desktop": {
98
104
  alignItems: "flex-start",
99
- backgroundColor: "rgba(248,203,203,0.38)",
100
105
  display: "flex",
101
106
  flexDirection: "column",
102
107
  gridArea: "1 / 1 / 3 / 6",
@@ -340,6 +345,7 @@ var Image = import_react5.default.forwardRef(
340
345
  );
341
346
  var css4 = {
342
347
  "@desktop": {
348
+ display: "flex",
343
349
  overflow: "hidden",
344
350
  img: {
345
351
  width: "100%",
@@ -372,6 +378,7 @@ var Layout = (0, import_react6.forwardRef)((props, ref) => {
372
378
  gap,
373
379
  rowSize,
374
380
  columns,
381
+ contentSize,
375
382
  gridSize,
376
383
  backgroundColor,
377
384
  backgroundImage,
@@ -379,6 +386,8 @@ var Layout = (0, import_react6.forwardRef)((props, ref) => {
379
386
  ...rest
380
387
  } = props;
381
388
  let style = {
389
+ "--layout-content-width": "100vw",
390
+ "--content-size": contentSize + "px",
382
391
  "--grid-size": gridSize + "px",
383
392
  "--rows": rows,
384
393
  "--columns": columns,
@@ -404,42 +413,44 @@ var LayoutBackground = (props) => {
404
413
  ["--bg-color"]: bgColor,
405
414
  ["--object-fit"]: objectFit
406
415
  };
407
- return imgUrl || bgColor ? /* @__PURE__ */ import_react6.default.createElement("div", {
408
- "data-wv-bg": true,
409
- style
410
- }, imgUrl && /* @__PURE__ */ import_react6.default.createElement("img", {
411
- width: "100%",
412
- height: "100%",
413
- "data-blink-src": imgUrl,
414
- alt: "wv-layout-background"
415
- })) : null;
416
+ if (imgUrl || bgColor) {
417
+ return /* @__PURE__ */ import_react6.default.createElement("div", {
418
+ style,
419
+ className: "wv-layout-background"
420
+ }, imgUrl && /* @__PURE__ */ import_react6.default.createElement("img", {
421
+ width: "100%",
422
+ height: "100%",
423
+ "data-blink-src": imgUrl,
424
+ alt: "Section background"
425
+ }));
426
+ }
427
+ return null;
416
428
  };
417
429
  var css5 = {
418
430
  "@desktop": {
419
- paddingTop: "16px",
420
- paddingBottom: "16px",
421
- paddingLeft: "var(--gap)",
422
- paddingRight: "var(--gap)",
423
431
  "> [data-layout-content]": {
432
+ paddingTop: "var(--gap)",
433
+ paddingBottom: "var(--gap)",
424
434
  margin: "0 auto",
425
- display: "grid !important",
435
+ display: "grid",
426
436
  gridTemplateRows: "repeat(var(--rows), var(--row-size))",
427
- gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
437
+ gridTemplateColumns: "calc((var(--layout-content-width) - var(--content-size)) / 2) 1fr repeat(var(--columns), minmax(0, var(--col-size))) 1fr calc((var(--layout-content-width) - var(--content-size)) / 2)",
438
+ gridAutoRows: "var(--row-size)",
428
439
  gap: "var(--gap)",
429
- maxWidth: "var(--grid-size)"
440
+ maxWidth: "var(--layout-content-width)"
430
441
  }
431
442
  },
432
443
  "@mobile": {
433
444
  padding: "0 16px",
434
445
  "> [data-layout-content]": {
435
- display: "flex !important",
446
+ display: "flex",
436
447
  flexDirection: "column"
437
448
  }
438
449
  }
439
450
  };
440
451
  var permanentCss = {
441
452
  "@desktop": {
442
- "[data-wv-bg]": {
453
+ ".wv-layout-background": {
443
454
  position: "absolute",
444
455
  inset: 0,
445
456
  backgroundColor: "var(--bg-color)"
@@ -450,8 +461,9 @@ var permanentCss = {
450
461
  }
451
462
  };
452
463
  Layout.defaultProps = {
464
+ contentSize: 1600,
453
465
  gridSize: 1224,
454
- rows: 12,
466
+ rows: 16,
455
467
  columns: 12,
456
468
  gap: 16,
457
469
  rowSize: 48
package/dist/index.mjs CHANGED
@@ -33,20 +33,26 @@ var Button = React.forwardRef((props, ref) => {
33
33
  });
34
34
  Button.defaultProps = {
35
35
  type: "button",
36
- text: "Shop now",
36
+ text: "Button",
37
37
  clickAction: "none",
38
38
  linkTo: "",
39
39
  openInNewTab: false
40
40
  };
41
41
  var css = {
42
42
  "@desktop": {
43
- borderRadius: "72px",
43
+ borderRadius: "8px",
44
44
  border: "none",
45
45
  backgroundColor: "#393e46",
46
46
  color: "#fff",
47
- fontSize: "13px",
47
+ fontSize: "14px",
48
+ fontWeight: "medium",
48
49
  padding: "10px 20px",
49
- textDecoration: "none"
50
+ height: "42px",
51
+ minWidth: "120px",
52
+ textDecoration: "none",
53
+ ":hover": {
54
+ backgroundColor: "#222831"
55
+ }
50
56
  }
51
57
  };
52
58
  var Button_default = Button;
@@ -65,7 +71,6 @@ var Container = forwardRef2(
65
71
  var css2 = {
66
72
  "@desktop": {
67
73
  alignItems: "flex-start",
68
- backgroundColor: "rgba(248,203,203,0.38)",
69
74
  display: "flex",
70
75
  flexDirection: "column",
71
76
  gridArea: "1 / 1 / 3 / 6",
@@ -309,6 +314,7 @@ var Image = React5.forwardRef(
309
314
  );
310
315
  var css4 = {
311
316
  "@desktop": {
317
+ display: "flex",
312
318
  overflow: "hidden",
313
319
  img: {
314
320
  width: "100%",
@@ -341,6 +347,7 @@ var Layout = forwardRef4((props, ref) => {
341
347
  gap,
342
348
  rowSize,
343
349
  columns,
350
+ contentSize,
344
351
  gridSize,
345
352
  backgroundColor,
346
353
  backgroundImage,
@@ -348,6 +355,8 @@ var Layout = forwardRef4((props, ref) => {
348
355
  ...rest
349
356
  } = props;
350
357
  let style = {
358
+ "--layout-content-width": "100vw",
359
+ "--content-size": contentSize + "px",
351
360
  "--grid-size": gridSize + "px",
352
361
  "--rows": rows,
353
362
  "--columns": columns,
@@ -373,42 +382,44 @@ var LayoutBackground = (props) => {
373
382
  ["--bg-color"]: bgColor,
374
383
  ["--object-fit"]: objectFit
375
384
  };
376
- return imgUrl || bgColor ? /* @__PURE__ */ React6.createElement("div", {
377
- "data-wv-bg": true,
378
- style
379
- }, imgUrl && /* @__PURE__ */ React6.createElement("img", {
380
- width: "100%",
381
- height: "100%",
382
- "data-blink-src": imgUrl,
383
- alt: "wv-layout-background"
384
- })) : null;
385
+ if (imgUrl || bgColor) {
386
+ return /* @__PURE__ */ React6.createElement("div", {
387
+ style,
388
+ className: "wv-layout-background"
389
+ }, imgUrl && /* @__PURE__ */ React6.createElement("img", {
390
+ width: "100%",
391
+ height: "100%",
392
+ "data-blink-src": imgUrl,
393
+ alt: "Section background"
394
+ }));
395
+ }
396
+ return null;
385
397
  };
386
398
  var css5 = {
387
399
  "@desktop": {
388
- paddingTop: "16px",
389
- paddingBottom: "16px",
390
- paddingLeft: "var(--gap)",
391
- paddingRight: "var(--gap)",
392
400
  "> [data-layout-content]": {
401
+ paddingTop: "var(--gap)",
402
+ paddingBottom: "var(--gap)",
393
403
  margin: "0 auto",
394
- display: "grid !important",
404
+ display: "grid",
395
405
  gridTemplateRows: "repeat(var(--rows), var(--row-size))",
396
- gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
406
+ gridTemplateColumns: "calc((var(--layout-content-width) - var(--content-size)) / 2) 1fr repeat(var(--columns), minmax(0, var(--col-size))) 1fr calc((var(--layout-content-width) - var(--content-size)) / 2)",
407
+ gridAutoRows: "var(--row-size)",
397
408
  gap: "var(--gap)",
398
- maxWidth: "var(--grid-size)"
409
+ maxWidth: "var(--layout-content-width)"
399
410
  }
400
411
  },
401
412
  "@mobile": {
402
413
  padding: "0 16px",
403
414
  "> [data-layout-content]": {
404
- display: "flex !important",
415
+ display: "flex",
405
416
  flexDirection: "column"
406
417
  }
407
418
  }
408
419
  };
409
420
  var permanentCss = {
410
421
  "@desktop": {
411
- "[data-wv-bg]": {
422
+ ".wv-layout-background": {
412
423
  position: "absolute",
413
424
  inset: 0,
414
425
  backgroundColor: "var(--bg-color)"
@@ -419,8 +430,9 @@ var permanentCss = {
419
430
  }
420
431
  };
421
432
  Layout.defaultProps = {
433
+ contentSize: 1600,
422
434
  gridSize: 1224,
423
- rows: 12,
435
+ rows: 16,
424
436
  columns: 12,
425
437
  gap: 16,
426
438
  rowSize: 48
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.7.31",
2
+ "version": "0.7.33",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
@@ -33,7 +33,7 @@
33
33
  "dependencies": {
34
34
  "@radix-ui/react-dialog": "^1.0.2",
35
35
  "@stitches/react": "^1.2.8",
36
- "@weaverse/core": "0.7.31",
36
+ "@weaverse/core": "0.7.33",
37
37
  "nuka-carousel": "^5.4.1"
38
38
  }
39
39
  }