@weaverse/react 0.7.32 → 0.7.34

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 +37 -34
  2. package/dist/index.js +216 -111
  3. package/dist/index.mjs +211 -114
  4. package/package.json +2 -2
package/dist/index.d.ts CHANGED
@@ -1,48 +1,20 @@
1
- import { WeaverseType, Weaverse, WeaverseElement, ElementCSS, WeaverseItemStore } from '@weaverse/core';
1
+ import { WeaverseType, Weaverse, ElementCSS, WeaverseItemStore, WeaverseElement } from '@weaverse/core';
2
2
  export * from '@weaverse/core';
3
3
  import * as React from 'react';
4
4
  import React__default, { ReactElement, ReactNode, CSSProperties } from 'react';
5
- import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
6
- import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
7
5
  import * as _radix_ui_react_dialog from '@radix-ui/react-dialog';
8
- import { DialogContentProps } from '@radix-ui/react-dialog';
6
+ import { DialogContentProps, DialogTitleProps, DialogCloseProps } from '@radix-ui/react-dialog';
9
7
 
10
8
  declare let createRootContext: (configs: WeaverseType) => Weaverse;
11
9
  declare let WeaverseContext: React.Context<Weaverse>;
12
10
  declare let WeaverseContextProvider: React.Provider<Weaverse>;
13
11
  declare let WeaverseContextConsumer: React.Consumer<Weaverse>;
14
12
 
15
- declare let Modal: React__default.FC<_radix_ui_react_dialog.DialogProps>;
16
- declare let ModalTrigger: React__default.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
17
- declare let ModalHeader: _stitches_react_types_styled_component.StyledComponent<React__default.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogTitleProps & React__default.RefAttributes<HTMLHeadingElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {}, {}, {}>>;
18
- declare let ModalContent: React__default.ForwardRefExoticComponent<DialogContentProps & React__default.RefAttributes<HTMLDivElement>>;
19
- declare let ModalClose: React__default.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogCloseProps & React__default.RefAttributes<HTMLButtonElement>>;
20
-
21
- declare const ModalComponents_Modal: typeof Modal;
22
- declare const ModalComponents_ModalTrigger: typeof ModalTrigger;
23
- declare const ModalComponents_ModalHeader: typeof ModalHeader;
24
- declare const ModalComponents_ModalContent: typeof ModalContent;
25
- declare const ModalComponents_ModalClose: typeof ModalClose;
26
- declare namespace ModalComponents {
27
- export {
28
- ModalComponents_Modal as Modal,
29
- ModalComponents_ModalTrigger as ModalTrigger,
30
- ModalComponents_ModalHeader as ModalHeader,
31
- ModalComponents_ModalContent as ModalContent,
32
- ModalComponents_ModalClose as ModalClose,
33
- };
13
+ interface ModalContentProps extends DialogContentProps {
14
+ size?: 'auto' | 'fullscreen';
15
+ portal?: boolean;
34
16
  }
35
17
 
36
- declare function Spinner(): JSX.Element;
37
-
38
- declare let Components: {
39
- Placeholder: React.ForwardRefExoticComponent<PlaceholderProps & React.RefAttributes<HTMLDivElement>>;
40
- Spinner: typeof Spinner;
41
- ModalComponents: typeof ModalComponents;
42
- };
43
-
44
- declare const Elements: Record<string, WeaverseElement>;
45
-
46
18
  interface WeaverseElementProps extends ReactElement {
47
19
  css?: ElementCSS;
48
20
  ['data-wv-type']: string;
@@ -157,6 +129,37 @@ type InstagramMedia = {
157
129
  caption: string;
158
130
  };
159
131
 
132
+ declare let Modal: React__default.FC<_radix_ui_react_dialog.DialogProps>;
133
+ declare let ModalTrigger: React__default.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
134
+ declare let ModalHeader: React__default.ForwardRefExoticComponent<DialogTitleProps & React__default.RefAttributes<HTMLHeadingElement>>;
135
+ declare let ModalContent: React__default.ForwardRefExoticComponent<ModalContentProps & React__default.RefAttributes<HTMLDivElement>>;
136
+ declare let ModalClose: React__default.ForwardRefExoticComponent<DialogCloseProps & React__default.RefAttributes<HTMLButtonElement>>;
137
+
138
+ declare const ModalComponents_Modal: typeof Modal;
139
+ declare const ModalComponents_ModalTrigger: typeof ModalTrigger;
140
+ declare const ModalComponents_ModalHeader: typeof ModalHeader;
141
+ declare const ModalComponents_ModalContent: typeof ModalContent;
142
+ declare const ModalComponents_ModalClose: typeof ModalClose;
143
+ declare namespace ModalComponents {
144
+ export {
145
+ ModalComponents_Modal as Modal,
146
+ ModalComponents_ModalTrigger as ModalTrigger,
147
+ ModalComponents_ModalHeader as ModalHeader,
148
+ ModalComponents_ModalContent as ModalContent,
149
+ ModalComponents_ModalClose as ModalClose,
150
+ };
151
+ }
152
+
153
+ declare function Spinner(): JSX.Element;
154
+
155
+ declare let Components: {
156
+ Placeholder: React.ForwardRefExoticComponent<PlaceholderProps & React.RefAttributes<HTMLDivElement>>;
157
+ Spinner: typeof Spinner;
158
+ ModalComponents: typeof ModalComponents;
159
+ };
160
+
161
+ declare const Elements: Record<string, WeaverseElement>;
162
+
160
163
  declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element | null;
161
164
 
162
- export { ButtonElementProps, Components, ContainerElementProps, CountdownElementProps, CountdownTimeKey, CountdownTimerType, Elements, GridContentElementProps, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutBackgroundProps, LayoutElementProps, MapElementProps, PlaceholderProps, TextElementProps, TimerBlockProps, VideoCommonProps, VideoElementProps, VimeoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, YoutubeElementProps, createRootContext };
165
+ export { ButtonElementProps, Components, ContainerElementProps, CountdownElementProps, CountdownTimeKey, CountdownTimerType, Elements, GridContentElementProps, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutBackgroundProps, LayoutElementProps, MapElementProps, ModalContentProps, PlaceholderProps, TextElementProps, TimerBlockProps, VideoCommonProps, VideoElementProps, VimeoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, YoutubeElementProps, createRootContext };
package/dist/index.js CHANGED
@@ -40,7 +40,7 @@ __reExport(src_exports, require("@weaverse/core"), module.exports);
40
40
 
41
41
  // src/context.ts
42
42
  var import_core = require("@weaverse/core");
43
- var import_react14 = require("react");
43
+ var import_react17 = require("react");
44
44
 
45
45
  // src/elements/Button.tsx
46
46
  var React = __toESM(require("react"));
@@ -102,7 +102,6 @@ var Container = (0, import_react2.forwardRef)(
102
102
  var css2 = {
103
103
  "@desktop": {
104
104
  alignItems: "flex-start",
105
- backgroundColor: "rgba(248,203,203,0.38)",
106
105
  display: "flex",
107
106
  flexDirection: "column",
108
107
  gridArea: "1 / 1 / 3 / 6",
@@ -653,7 +652,7 @@ Video.defaultProps = {
653
652
  var Video_default = Video;
654
653
 
655
654
  // src/elements/Instagram.tsx
656
- var import_react13 = __toESM(require("react"));
655
+ var import_react16 = __toESM(require("react"));
657
656
 
658
657
  // src/components/Placeholder.tsx
659
658
  var import_react12 = __toESM(require("react"));
@@ -671,13 +670,216 @@ var Placeholder = (0, import_react12.forwardRef)(
671
670
  );
672
671
  var Placeholder_default = Placeholder;
673
672
 
673
+ // src/components/Modal/index.tsx
674
+ var Modal_exports = {};
675
+ __export(Modal_exports, {
676
+ Modal: () => Modal,
677
+ ModalClose: () => ModalClose,
678
+ ModalContent: () => ModalContent,
679
+ ModalHeader: () => ModalHeader,
680
+ ModalTrigger: () => ModalTrigger
681
+ });
682
+ var import_react_dialog2 = require("@radix-ui/react-dialog");
683
+ var import_react14 = __toESM(require("react"));
684
+
685
+ // src/components/Modal/styled.ts
686
+ var import_react_dialog = require("@radix-ui/react-dialog");
687
+ var import_react13 = require("@stitches/react");
688
+ var overlayShow = (0, import_react13.keyframes)({
689
+ "0%": { opacity: 0 },
690
+ "100%": { opacity: 1 }
691
+ });
692
+ var contentShow = (0, import_react13.keyframes)({
693
+ "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
694
+ "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
695
+ });
696
+ var StyledOverlay = (0, import_react13.styled)(import_react_dialog.Overlay, {
697
+ display: "block !important",
698
+ backgroundColor: "rgba(0, 0, 0, .3)",
699
+ position: "fixed",
700
+ zIndex: 9999,
701
+ inset: 0,
702
+ animation: `${overlayShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
703
+ });
704
+ var StyledTitle = (0, import_react13.styled)(import_react_dialog.Title, {
705
+ margin: "0 0 24px",
706
+ fontWeight: 500,
707
+ fontSize: 24,
708
+ "@media (max-width: 768px)": {
709
+ margin: "0 0 16px",
710
+ fontSize: 20
711
+ }
712
+ });
713
+ var StyledContent = (0, import_react13.styled)(import_react_dialog.Content, {
714
+ backgroundColor: "white",
715
+ borderRadius: 6,
716
+ boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
717
+ position: "fixed",
718
+ top: "50%",
719
+ left: "50%",
720
+ transform: "translate(-50%, -50%)",
721
+ padding: 24,
722
+ animation: `${contentShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`,
723
+ zIndex: 9999,
724
+ maxWidth: "90vw",
725
+ width: "auto",
726
+ "*": {
727
+ maxWidth: "100%"
728
+ },
729
+ "&:focus": { outline: "none" },
730
+ '&[data-size="fullscreen"]': {
731
+ width: "100vw",
732
+ height: "100vh",
733
+ maxWidth: "100vw",
734
+ borderRadius: 0
735
+ },
736
+ "@media (max-width: 768px)": {
737
+ width: "90vw",
738
+ padding: 12,
739
+ '&[data-size="fullscreen"]': {
740
+ width: "100vw"
741
+ }
742
+ }
743
+ });
744
+ var StyledCloseIcon = (0, import_react13.styled)("button", {
745
+ all: "unset",
746
+ cursor: "pointer",
747
+ fontFamily: "inherit",
748
+ borderRadius: "100%",
749
+ height: 25,
750
+ width: 25,
751
+ padding: 4,
752
+ display: "inline-flex",
753
+ alignItems: "center",
754
+ justifyContent: "center",
755
+ color: "rgb(55, 65, 81)",
756
+ position: "absolute",
757
+ top: 8,
758
+ right: 8,
759
+ "&:hover": {
760
+ backgroundColor: "rgba(112, 112, 112, .1)"
761
+ },
762
+ svg: {
763
+ width: 20,
764
+ height: 20
765
+ }
766
+ });
767
+
768
+ // src/components/Modal/index.tsx
769
+ var Modal = import_react_dialog2.Root;
770
+ var ModalTrigger = import_react_dialog2.Trigger;
771
+ var ModalHeader = (0, import_react14.forwardRef)(
772
+ (props, ref) => {
773
+ let { children, ...rest } = props;
774
+ return /* @__PURE__ */ import_react14.default.createElement(StyledTitle, {
775
+ ref,
776
+ ...rest,
777
+ "data-wv-modal-header": true
778
+ }, children);
779
+ }
780
+ );
781
+ var ModalContent = (0, import_react14.forwardRef)(
782
+ (props, ref) => {
783
+ let { children, size, portal, ...rest } = props;
784
+ let modalContent = /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react14.default.createElement(StyledContent, {
785
+ ...rest,
786
+ onCloseAutoFocus: (e) => e.preventDefault(),
787
+ "data-wv-modal": true,
788
+ "data-size": size,
789
+ ref
790
+ }, /* @__PURE__ */ import_react14.default.createElement(ModalClose, null), /* @__PURE__ */ import_react14.default.createElement("div", {
791
+ className: "wv-modal-content"
792
+ }, children)));
793
+ if (portal) {
794
+ return /* @__PURE__ */ import_react14.default.createElement(import_react_dialog2.Portal, null, modalContent);
795
+ }
796
+ return modalContent;
797
+ }
798
+ );
799
+ ModalContent.defaultProps = {
800
+ size: "auto",
801
+ portal: false
802
+ };
803
+ var ModalClose = (0, import_react14.forwardRef)(
804
+ (props, ref) => {
805
+ let { asChild, children, ...rest } = props;
806
+ let closeIcon = /* @__PURE__ */ import_react14.default.createElement(StyledCloseIcon, null, /* @__PURE__ */ import_react14.default.createElement("svg", {
807
+ xmlns: "http://www.w3.org/2000/svg",
808
+ width: "20",
809
+ height: "20",
810
+ fill: "#000000",
811
+ viewBox: "0 0 256 256"
812
+ }, /* @__PURE__ */ import_react14.default.createElement("rect", {
813
+ width: "256",
814
+ height: "256",
815
+ fill: "none"
816
+ }), /* @__PURE__ */ import_react14.default.createElement("line", {
817
+ x1: "200",
818
+ y1: "56",
819
+ x2: "56",
820
+ y2: "200",
821
+ fill: "none",
822
+ stroke: "#000000",
823
+ strokeLinecap: "round",
824
+ strokeLinejoin: "round",
825
+ strokeWidth: "12"
826
+ }), /* @__PURE__ */ import_react14.default.createElement("line", {
827
+ x1: "200",
828
+ y1: "200",
829
+ x2: "56",
830
+ y2: "56",
831
+ fill: "none",
832
+ stroke: "#000000",
833
+ strokeLinecap: "round",
834
+ strokeLinejoin: "round",
835
+ strokeWidth: "12"
836
+ })));
837
+ return /* @__PURE__ */ import_react14.default.createElement(import_react_dialog2.Close, {
838
+ asChild: true,
839
+ ...rest,
840
+ ref
841
+ }, asChild ? children : closeIcon);
842
+ }
843
+ );
844
+
845
+ // src/components/Spinner.tsx
846
+ var import_react15 = __toESM(require("react"));
847
+ function Spinner() {
848
+ return /* @__PURE__ */ import_react15.default.createElement("span", {
849
+ className: "wv-spinner-wrapper"
850
+ }, /* @__PURE__ */ import_react15.default.createElement("svg", {
851
+ className: "wv-spinner",
852
+ xmlns: "http://www.w3.org/2000/svg",
853
+ fill: "none",
854
+ viewBox: "0 0 24 24"
855
+ }, /* @__PURE__ */ import_react15.default.createElement("circle", {
856
+ style: { opacity: ".25" },
857
+ cx: "12",
858
+ cy: "12",
859
+ r: "10",
860
+ stroke: "currentColor",
861
+ strokeWidth: "4"
862
+ }), /* @__PURE__ */ import_react15.default.createElement("path", {
863
+ style: { opacity: ".75" },
864
+ fill: "currentColor",
865
+ d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
866
+ })));
867
+ }
868
+
869
+ // src/components/index.ts
870
+ var Components = {
871
+ Placeholder: Placeholder_default,
872
+ Spinner,
873
+ ModalComponents: Modal_exports
874
+ };
875
+
674
876
  // src/elements/Instagram.tsx
675
- var Instagram = (0, import_react13.forwardRef)(
877
+ var Instagram = (0, import_react16.forwardRef)(
676
878
  (props, ref) => {
677
879
  let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
678
- let [media, setMedia] = (0, import_react13.useState)([]);
679
- let [error, setError] = (0, import_react13.useState)(null);
680
- (0, import_react13.useEffect)(() => {
880
+ let [media, setMedia] = (0, import_react16.useState)([]);
881
+ let [error, setError] = (0, import_react16.useState)(null);
882
+ (0, import_react16.useEffect)(() => {
681
883
  if (token) {
682
884
  let params = new URLSearchParams({
683
885
  access_token: token,
@@ -694,10 +896,10 @@ var Instagram = (0, import_react13.forwardRef)(
694
896
  }
695
897
  }, [token]);
696
898
  if (!token || error) {
697
- return /* @__PURE__ */ import_react13.default.createElement("div", {
899
+ return /* @__PURE__ */ import_react16.default.createElement("div", {
698
900
  ref,
699
901
  ...rest
700
- }, /* @__PURE__ */ import_react13.default.createElement(Placeholder_default, {
902
+ }, /* @__PURE__ */ import_react16.default.createElement(Components.Placeholder, {
701
903
  element: "Instagram"
702
904
  }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
703
905
  }
@@ -705,20 +907,20 @@ var Instagram = (0, import_react13.forwardRef)(
705
907
  "--wv-ig-images-per-row": imagesPerRow,
706
908
  "--wv-ig-images-gap": gap + "px"
707
909
  };
708
- return /* @__PURE__ */ import_react13.default.createElement("div", {
910
+ return /* @__PURE__ */ import_react16.default.createElement("div", {
709
911
  ref,
710
912
  ...rest,
711
913
  style
712
- }, /* @__PURE__ */ import_react13.default.createElement("div", {
914
+ }, /* @__PURE__ */ import_react16.default.createElement("div", {
713
915
  className: "wv-ig-media-container"
714
916
  }, media.slice(0, numberOfImages).map((item) => {
715
917
  let { id, permalink, caption, media_url } = item;
716
- return /* @__PURE__ */ import_react13.default.createElement("a", {
918
+ return /* @__PURE__ */ import_react16.default.createElement("a", {
717
919
  key: id,
718
920
  href: permalink,
719
921
  target: "_blank",
720
922
  rel: "noreferrer"
721
- }, /* @__PURE__ */ import_react13.default.createElement("img", {
923
+ }, /* @__PURE__ */ import_react16.default.createElement("img", {
722
924
  alt: caption,
723
925
  src: media_url
724
926
  }));
@@ -824,107 +1026,10 @@ var createRootContext = (configs) => {
824
1026
  });
825
1027
  return rootContext;
826
1028
  };
827
- var WeaverseContext = (0, import_react14.createContext)({});
1029
+ var WeaverseContext = (0, import_react17.createContext)({});
828
1030
  var WeaverseContextProvider = WeaverseContext.Provider;
829
1031
  var WeaverseContextConsumer = WeaverseContext.Consumer;
830
1032
 
831
- // src/components/Modal.tsx
832
- var Modal_exports = {};
833
- __export(Modal_exports, {
834
- Modal: () => Modal,
835
- ModalClose: () => ModalClose,
836
- ModalContent: () => ModalContent,
837
- ModalHeader: () => ModalHeader,
838
- ModalTrigger: () => ModalTrigger
839
- });
840
- var import_react15 = __toESM(require("react"));
841
- var import_react_dialog = require("@radix-ui/react-dialog");
842
- var import_react16 = require("@stitches/react");
843
- var Modal = import_react_dialog.Root;
844
- var ModalTrigger = import_react_dialog.Trigger;
845
- var ModalHeader = (0, import_react16.styled)(import_react_dialog.Title, {
846
- margin: 0,
847
- fontWeight: 500,
848
- color: "#ededef",
849
- fontSize: 17
850
- });
851
- var ModalContent = (0, import_react15.forwardRef)(
852
- (props, ref) => {
853
- let { children, ...rest } = props;
854
- return /* @__PURE__ */ import_react15.default.createElement(import_react_dialog.Portal, null, /* @__PURE__ */ import_react15.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react15.default.createElement(StyledContent, {
855
- ...rest,
856
- onCloseAutoFocus: (e) => e.preventDefault(),
857
- ref
858
- }, /* @__PURE__ */ import_react15.default.createElement("div", null, /* @__PURE__ */ import_react15.default.createElement(ModalClose, null), /* @__PURE__ */ import_react15.default.createElement("div", null, children))));
859
- }
860
- );
861
- var ModalClose = import_react_dialog.Close;
862
- ModalClose.defaultProps = {
863
- asChild: true
864
- };
865
- var overlayShow = (0, import_react16.keyframes)({
866
- "0%": { opacity: 0 },
867
- "100%": { opacity: 1 }
868
- });
869
- var contentShow = (0, import_react16.keyframes)({
870
- "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
871
- "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
872
- });
873
- var StyledOverlay = (0, import_react16.styled)(import_react_dialog.Overlay, {
874
- backgroundColor: "#707070",
875
- position: "fixed",
876
- zIndex: 9999,
877
- inset: 0,
878
- animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
879
- });
880
- var StyledContent = (0, import_react16.styled)(import_react_dialog.Content, {
881
- backgroundColor: "white",
882
- borderRadius: 6,
883
- boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
884
- position: "fixed",
885
- top: "50%",
886
- left: "50%",
887
- transform: "translate(-50%, -50%)",
888
- width: "90vw",
889
- maxWidth: "450px",
890
- maxHeight: "85vh",
891
- padding: 25,
892
- animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
893
- "&:focus": { outline: "none" },
894
- zIndex: 9999
895
- });
896
-
897
- // src/components/Spinner.tsx
898
- var import_react17 = __toESM(require("react"));
899
- function Spinner() {
900
- return /* @__PURE__ */ import_react17.default.createElement("span", {
901
- className: "wv-spinner-wrapper"
902
- }, /* @__PURE__ */ import_react17.default.createElement("svg", {
903
- className: "wv-spinner",
904
- xmlns: "http://www.w3.org/2000/svg",
905
- fill: "none",
906
- viewBox: "0 0 24 24"
907
- }, /* @__PURE__ */ import_react17.default.createElement("circle", {
908
- style: { opacity: ".25" },
909
- cx: "12",
910
- cy: "12",
911
- r: "10",
912
- stroke: "currentColor",
913
- strokeWidth: "4"
914
- }), /* @__PURE__ */ import_react17.default.createElement("path", {
915
- style: { opacity: ".75" },
916
- fill: "currentColor",
917
- d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
918
- })));
919
- }
920
-
921
- // src/components/index.ts
922
- var Components = {
923
- Placeholder: Placeholder_default,
924
- Spinner,
925
- ModalComponents: Modal_exports
926
- };
927
-
928
1033
  // src/renderer.tsx
929
1034
  var import_core2 = require("@weaverse/core");
930
1035
  var import_react18 = __toESM(require("react"));
package/dist/index.mjs CHANGED
@@ -71,7 +71,6 @@ var Container = forwardRef2(
71
71
  var css2 = {
72
72
  "@desktop": {
73
73
  alignItems: "flex-start",
74
- backgroundColor: "rgba(248,203,203,0.38)",
75
74
  display: "flex",
76
75
  flexDirection: "column",
77
76
  gridArea: "1 / 1 / 3 / 6",
@@ -622,7 +621,7 @@ Video.defaultProps = {
622
621
  var Video_default = Video;
623
622
 
624
623
  // src/elements/Instagram.tsx
625
- import React14, { forwardRef as forwardRef9, useEffect as useEffect2, useState } from "react";
624
+ import React16, { forwardRef as forwardRef10, useEffect as useEffect2, useState } from "react";
626
625
 
627
626
  // src/components/Placeholder.tsx
628
627
  import React13, { forwardRef as forwardRef8 } from "react";
@@ -640,8 +639,211 @@ var Placeholder = forwardRef8(
640
639
  );
641
640
  var Placeholder_default = Placeholder;
642
641
 
642
+ // src/components/Modal/index.tsx
643
+ var Modal_exports = {};
644
+ __export(Modal_exports, {
645
+ Modal: () => Modal,
646
+ ModalClose: () => ModalClose,
647
+ ModalContent: () => ModalContent,
648
+ ModalHeader: () => ModalHeader,
649
+ ModalTrigger: () => ModalTrigger
650
+ });
651
+ import { Close, Portal, Root, Trigger } from "@radix-ui/react-dialog";
652
+ import React14, { forwardRef as forwardRef9 } from "react";
653
+
654
+ // src/components/Modal/styled.ts
655
+ import { Content, Overlay, Title } from "@radix-ui/react-dialog";
656
+ import { keyframes, styled } from "@stitches/react";
657
+ var overlayShow = keyframes({
658
+ "0%": { opacity: 0 },
659
+ "100%": { opacity: 1 }
660
+ });
661
+ var contentShow = keyframes({
662
+ "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
663
+ "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
664
+ });
665
+ var StyledOverlay = styled(Overlay, {
666
+ display: "block !important",
667
+ backgroundColor: "rgba(0, 0, 0, .3)",
668
+ position: "fixed",
669
+ zIndex: 9999,
670
+ inset: 0,
671
+ animation: `${overlayShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
672
+ });
673
+ var StyledTitle = styled(Title, {
674
+ margin: "0 0 24px",
675
+ fontWeight: 500,
676
+ fontSize: 24,
677
+ "@media (max-width: 768px)": {
678
+ margin: "0 0 16px",
679
+ fontSize: 20
680
+ }
681
+ });
682
+ var StyledContent = styled(Content, {
683
+ backgroundColor: "white",
684
+ borderRadius: 6,
685
+ boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
686
+ position: "fixed",
687
+ top: "50%",
688
+ left: "50%",
689
+ transform: "translate(-50%, -50%)",
690
+ padding: 24,
691
+ animation: `${contentShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`,
692
+ zIndex: 9999,
693
+ maxWidth: "90vw",
694
+ width: "auto",
695
+ "*": {
696
+ maxWidth: "100%"
697
+ },
698
+ "&:focus": { outline: "none" },
699
+ '&[data-size="fullscreen"]': {
700
+ width: "100vw",
701
+ height: "100vh",
702
+ maxWidth: "100vw",
703
+ borderRadius: 0
704
+ },
705
+ "@media (max-width: 768px)": {
706
+ width: "90vw",
707
+ padding: 12,
708
+ '&[data-size="fullscreen"]': {
709
+ width: "100vw"
710
+ }
711
+ }
712
+ });
713
+ var StyledCloseIcon = styled("button", {
714
+ all: "unset",
715
+ cursor: "pointer",
716
+ fontFamily: "inherit",
717
+ borderRadius: "100%",
718
+ height: 25,
719
+ width: 25,
720
+ padding: 4,
721
+ display: "inline-flex",
722
+ alignItems: "center",
723
+ justifyContent: "center",
724
+ color: "rgb(55, 65, 81)",
725
+ position: "absolute",
726
+ top: 8,
727
+ right: 8,
728
+ "&:hover": {
729
+ backgroundColor: "rgba(112, 112, 112, .1)"
730
+ },
731
+ svg: {
732
+ width: 20,
733
+ height: 20
734
+ }
735
+ });
736
+
737
+ // src/components/Modal/index.tsx
738
+ var Modal = Root;
739
+ var ModalTrigger = Trigger;
740
+ var ModalHeader = forwardRef9(
741
+ (props, ref) => {
742
+ let { children, ...rest } = props;
743
+ return /* @__PURE__ */ React14.createElement(StyledTitle, {
744
+ ref,
745
+ ...rest,
746
+ "data-wv-modal-header": true
747
+ }, children);
748
+ }
749
+ );
750
+ var ModalContent = forwardRef9(
751
+ (props, ref) => {
752
+ let { children, size, portal, ...rest } = props;
753
+ let modalContent = /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(StyledOverlay, null), /* @__PURE__ */ React14.createElement(StyledContent, {
754
+ ...rest,
755
+ onCloseAutoFocus: (e) => e.preventDefault(),
756
+ "data-wv-modal": true,
757
+ "data-size": size,
758
+ ref
759
+ }, /* @__PURE__ */ React14.createElement(ModalClose, null), /* @__PURE__ */ React14.createElement("div", {
760
+ className: "wv-modal-content"
761
+ }, children)));
762
+ if (portal) {
763
+ return /* @__PURE__ */ React14.createElement(Portal, null, modalContent);
764
+ }
765
+ return modalContent;
766
+ }
767
+ );
768
+ ModalContent.defaultProps = {
769
+ size: "auto",
770
+ portal: false
771
+ };
772
+ var ModalClose = forwardRef9(
773
+ (props, ref) => {
774
+ let { asChild, children, ...rest } = props;
775
+ let closeIcon = /* @__PURE__ */ React14.createElement(StyledCloseIcon, null, /* @__PURE__ */ React14.createElement("svg", {
776
+ xmlns: "http://www.w3.org/2000/svg",
777
+ width: "20",
778
+ height: "20",
779
+ fill: "#000000",
780
+ viewBox: "0 0 256 256"
781
+ }, /* @__PURE__ */ React14.createElement("rect", {
782
+ width: "256",
783
+ height: "256",
784
+ fill: "none"
785
+ }), /* @__PURE__ */ React14.createElement("line", {
786
+ x1: "200",
787
+ y1: "56",
788
+ x2: "56",
789
+ y2: "200",
790
+ fill: "none",
791
+ stroke: "#000000",
792
+ strokeLinecap: "round",
793
+ strokeLinejoin: "round",
794
+ strokeWidth: "12"
795
+ }), /* @__PURE__ */ React14.createElement("line", {
796
+ x1: "200",
797
+ y1: "200",
798
+ x2: "56",
799
+ y2: "56",
800
+ fill: "none",
801
+ stroke: "#000000",
802
+ strokeLinecap: "round",
803
+ strokeLinejoin: "round",
804
+ strokeWidth: "12"
805
+ })));
806
+ return /* @__PURE__ */ React14.createElement(Close, {
807
+ asChild: true,
808
+ ...rest,
809
+ ref
810
+ }, asChild ? children : closeIcon);
811
+ }
812
+ );
813
+
814
+ // src/components/Spinner.tsx
815
+ import React15 from "react";
816
+ function Spinner() {
817
+ return /* @__PURE__ */ React15.createElement("span", {
818
+ className: "wv-spinner-wrapper"
819
+ }, /* @__PURE__ */ React15.createElement("svg", {
820
+ className: "wv-spinner",
821
+ xmlns: "http://www.w3.org/2000/svg",
822
+ fill: "none",
823
+ viewBox: "0 0 24 24"
824
+ }, /* @__PURE__ */ React15.createElement("circle", {
825
+ style: { opacity: ".25" },
826
+ cx: "12",
827
+ cy: "12",
828
+ r: "10",
829
+ stroke: "currentColor",
830
+ strokeWidth: "4"
831
+ }), /* @__PURE__ */ React15.createElement("path", {
832
+ style: { opacity: ".75" },
833
+ fill: "currentColor",
834
+ d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
835
+ })));
836
+ }
837
+
838
+ // src/components/index.ts
839
+ var Components = {
840
+ Placeholder: Placeholder_default,
841
+ Spinner,
842
+ ModalComponents: Modal_exports
843
+ };
844
+
643
845
  // src/elements/Instagram.tsx
644
- var Instagram = forwardRef9(
846
+ var Instagram = forwardRef10(
645
847
  (props, ref) => {
646
848
  let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
647
849
  let [media, setMedia] = useState([]);
@@ -663,10 +865,10 @@ var Instagram = forwardRef9(
663
865
  }
664
866
  }, [token]);
665
867
  if (!token || error) {
666
- return /* @__PURE__ */ React14.createElement("div", {
868
+ return /* @__PURE__ */ React16.createElement("div", {
667
869
  ref,
668
870
  ...rest
669
- }, /* @__PURE__ */ React14.createElement(Placeholder_default, {
871
+ }, /* @__PURE__ */ React16.createElement(Components.Placeholder, {
670
872
  element: "Instagram"
671
873
  }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
672
874
  }
@@ -674,20 +876,20 @@ var Instagram = forwardRef9(
674
876
  "--wv-ig-images-per-row": imagesPerRow,
675
877
  "--wv-ig-images-gap": gap + "px"
676
878
  };
677
- return /* @__PURE__ */ React14.createElement("div", {
879
+ return /* @__PURE__ */ React16.createElement("div", {
678
880
  ref,
679
881
  ...rest,
680
882
  style
681
- }, /* @__PURE__ */ React14.createElement("div", {
883
+ }, /* @__PURE__ */ React16.createElement("div", {
682
884
  className: "wv-ig-media-container"
683
885
  }, media.slice(0, numberOfImages).map((item) => {
684
886
  let { id, permalink, caption, media_url } = item;
685
- return /* @__PURE__ */ React14.createElement("a", {
887
+ return /* @__PURE__ */ React16.createElement("a", {
686
888
  key: id,
687
889
  href: permalink,
688
890
  target: "_blank",
689
891
  rel: "noreferrer"
690
- }, /* @__PURE__ */ React14.createElement("img", {
892
+ }, /* @__PURE__ */ React16.createElement("img", {
691
893
  alt: caption,
692
894
  src: media_url
693
895
  }));
@@ -797,111 +999,6 @@ var WeaverseContext = createContext({});
797
999
  var WeaverseContextProvider = WeaverseContext.Provider;
798
1000
  var WeaverseContextConsumer = WeaverseContext.Consumer;
799
1001
 
800
- // src/components/Modal.tsx
801
- var Modal_exports = {};
802
- __export(Modal_exports, {
803
- Modal: () => Modal,
804
- ModalClose: () => ModalClose,
805
- ModalContent: () => ModalContent,
806
- ModalHeader: () => ModalHeader,
807
- ModalTrigger: () => ModalTrigger
808
- });
809
- import React15, { forwardRef as forwardRef10 } from "react";
810
- import {
811
- Close,
812
- Content,
813
- Overlay,
814
- Portal,
815
- Root,
816
- Title,
817
- Trigger
818
- } from "@radix-ui/react-dialog";
819
- import { styled, keyframes } from "@stitches/react";
820
- var Modal = Root;
821
- var ModalTrigger = Trigger;
822
- var ModalHeader = styled(Title, {
823
- margin: 0,
824
- fontWeight: 500,
825
- color: "#ededef",
826
- fontSize: 17
827
- });
828
- var ModalContent = forwardRef10(
829
- (props, ref) => {
830
- let { children, ...rest } = props;
831
- return /* @__PURE__ */ React15.createElement(Portal, null, /* @__PURE__ */ React15.createElement(StyledOverlay, null), /* @__PURE__ */ React15.createElement(StyledContent, {
832
- ...rest,
833
- onCloseAutoFocus: (e) => e.preventDefault(),
834
- ref
835
- }, /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement(ModalClose, null), /* @__PURE__ */ React15.createElement("div", null, children))));
836
- }
837
- );
838
- var ModalClose = Close;
839
- ModalClose.defaultProps = {
840
- asChild: true
841
- };
842
- var overlayShow = keyframes({
843
- "0%": { opacity: 0 },
844
- "100%": { opacity: 1 }
845
- });
846
- var contentShow = keyframes({
847
- "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
848
- "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
849
- });
850
- var StyledOverlay = styled(Overlay, {
851
- backgroundColor: "#707070",
852
- position: "fixed",
853
- zIndex: 9999,
854
- inset: 0,
855
- animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
856
- });
857
- var StyledContent = styled(Content, {
858
- backgroundColor: "white",
859
- borderRadius: 6,
860
- boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
861
- position: "fixed",
862
- top: "50%",
863
- left: "50%",
864
- transform: "translate(-50%, -50%)",
865
- width: "90vw",
866
- maxWidth: "450px",
867
- maxHeight: "85vh",
868
- padding: 25,
869
- animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
870
- "&:focus": { outline: "none" },
871
- zIndex: 9999
872
- });
873
-
874
- // src/components/Spinner.tsx
875
- import React16 from "react";
876
- function Spinner() {
877
- return /* @__PURE__ */ React16.createElement("span", {
878
- className: "wv-spinner-wrapper"
879
- }, /* @__PURE__ */ React16.createElement("svg", {
880
- className: "wv-spinner",
881
- xmlns: "http://www.w3.org/2000/svg",
882
- fill: "none",
883
- viewBox: "0 0 24 24"
884
- }, /* @__PURE__ */ React16.createElement("circle", {
885
- style: { opacity: ".25" },
886
- cx: "12",
887
- cy: "12",
888
- r: "10",
889
- stroke: "currentColor",
890
- strokeWidth: "4"
891
- }), /* @__PURE__ */ React16.createElement("path", {
892
- style: { opacity: ".75" },
893
- fill: "currentColor",
894
- d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
895
- })));
896
- }
897
-
898
- // src/components/index.ts
899
- var Components = {
900
- Placeholder: Placeholder_default,
901
- Spinner,
902
- ModalComponents: Modal_exports
903
- };
904
-
905
1002
  // src/renderer.tsx
906
1003
  import { isBrowser } from "@weaverse/core";
907
1004
  import React17, { useContext as useContext4, useEffect as useEffect3, useRef, useState as useState2 } from "react";
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.7.32",
2
+ "version": "0.7.34",
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.32",
36
+ "@weaverse/core": "0.7.34",
37
37
  "nuka-carousel": "^5.4.1"
38
38
  }
39
39
  }