@weaverse/react 0.7.33 → 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 -110
  3. package/dist/index.mjs +211 -113
  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"));
@@ -652,7 +652,7 @@ Video.defaultProps = {
652
652
  var Video_default = Video;
653
653
 
654
654
  // src/elements/Instagram.tsx
655
- var import_react13 = __toESM(require("react"));
655
+ var import_react16 = __toESM(require("react"));
656
656
 
657
657
  // src/components/Placeholder.tsx
658
658
  var import_react12 = __toESM(require("react"));
@@ -670,13 +670,216 @@ var Placeholder = (0, import_react12.forwardRef)(
670
670
  );
671
671
  var Placeholder_default = Placeholder;
672
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
+
673
876
  // src/elements/Instagram.tsx
674
- var Instagram = (0, import_react13.forwardRef)(
877
+ var Instagram = (0, import_react16.forwardRef)(
675
878
  (props, ref) => {
676
879
  let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
677
- let [media, setMedia] = (0, import_react13.useState)([]);
678
- let [error, setError] = (0, import_react13.useState)(null);
679
- (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)(() => {
680
883
  if (token) {
681
884
  let params = new URLSearchParams({
682
885
  access_token: token,
@@ -693,10 +896,10 @@ var Instagram = (0, import_react13.forwardRef)(
693
896
  }
694
897
  }, [token]);
695
898
  if (!token || error) {
696
- return /* @__PURE__ */ import_react13.default.createElement("div", {
899
+ return /* @__PURE__ */ import_react16.default.createElement("div", {
697
900
  ref,
698
901
  ...rest
699
- }, /* @__PURE__ */ import_react13.default.createElement(Placeholder_default, {
902
+ }, /* @__PURE__ */ import_react16.default.createElement(Components.Placeholder, {
700
903
  element: "Instagram"
701
904
  }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
702
905
  }
@@ -704,20 +907,20 @@ var Instagram = (0, import_react13.forwardRef)(
704
907
  "--wv-ig-images-per-row": imagesPerRow,
705
908
  "--wv-ig-images-gap": gap + "px"
706
909
  };
707
- return /* @__PURE__ */ import_react13.default.createElement("div", {
910
+ return /* @__PURE__ */ import_react16.default.createElement("div", {
708
911
  ref,
709
912
  ...rest,
710
913
  style
711
- }, /* @__PURE__ */ import_react13.default.createElement("div", {
914
+ }, /* @__PURE__ */ import_react16.default.createElement("div", {
712
915
  className: "wv-ig-media-container"
713
916
  }, media.slice(0, numberOfImages).map((item) => {
714
917
  let { id, permalink, caption, media_url } = item;
715
- return /* @__PURE__ */ import_react13.default.createElement("a", {
918
+ return /* @__PURE__ */ import_react16.default.createElement("a", {
716
919
  key: id,
717
920
  href: permalink,
718
921
  target: "_blank",
719
922
  rel: "noreferrer"
720
- }, /* @__PURE__ */ import_react13.default.createElement("img", {
923
+ }, /* @__PURE__ */ import_react16.default.createElement("img", {
721
924
  alt: caption,
722
925
  src: media_url
723
926
  }));
@@ -823,107 +1026,10 @@ var createRootContext = (configs) => {
823
1026
  });
824
1027
  return rootContext;
825
1028
  };
826
- var WeaverseContext = (0, import_react14.createContext)({});
1029
+ var WeaverseContext = (0, import_react17.createContext)({});
827
1030
  var WeaverseContextProvider = WeaverseContext.Provider;
828
1031
  var WeaverseContextConsumer = WeaverseContext.Consumer;
829
1032
 
830
- // src/components/Modal.tsx
831
- var Modal_exports = {};
832
- __export(Modal_exports, {
833
- Modal: () => Modal,
834
- ModalClose: () => ModalClose,
835
- ModalContent: () => ModalContent,
836
- ModalHeader: () => ModalHeader,
837
- ModalTrigger: () => ModalTrigger
838
- });
839
- var import_react15 = __toESM(require("react"));
840
- var import_react_dialog = require("@radix-ui/react-dialog");
841
- var import_react16 = require("@stitches/react");
842
- var Modal = import_react_dialog.Root;
843
- var ModalTrigger = import_react_dialog.Trigger;
844
- var ModalHeader = (0, import_react16.styled)(import_react_dialog.Title, {
845
- margin: 0,
846
- fontWeight: 500,
847
- color: "#ededef",
848
- fontSize: 17
849
- });
850
- var ModalContent = (0, import_react15.forwardRef)(
851
- (props, ref) => {
852
- let { children, ...rest } = props;
853
- return /* @__PURE__ */ import_react15.default.createElement(import_react_dialog.Portal, null, /* @__PURE__ */ import_react15.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react15.default.createElement(StyledContent, {
854
- ...rest,
855
- onCloseAutoFocus: (e) => e.preventDefault(),
856
- ref
857
- }, /* @__PURE__ */ import_react15.default.createElement("div", null, /* @__PURE__ */ import_react15.default.createElement(ModalClose, null), /* @__PURE__ */ import_react15.default.createElement("div", null, children))));
858
- }
859
- );
860
- var ModalClose = import_react_dialog.Close;
861
- ModalClose.defaultProps = {
862
- asChild: true
863
- };
864
- var overlayShow = (0, import_react16.keyframes)({
865
- "0%": { opacity: 0 },
866
- "100%": { opacity: 1 }
867
- });
868
- var contentShow = (0, import_react16.keyframes)({
869
- "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
870
- "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
871
- });
872
- var StyledOverlay = (0, import_react16.styled)(import_react_dialog.Overlay, {
873
- backgroundColor: "#707070",
874
- position: "fixed",
875
- zIndex: 9999,
876
- inset: 0,
877
- animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
878
- });
879
- var StyledContent = (0, import_react16.styled)(import_react_dialog.Content, {
880
- backgroundColor: "white",
881
- borderRadius: 6,
882
- boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
883
- position: "fixed",
884
- top: "50%",
885
- left: "50%",
886
- transform: "translate(-50%, -50%)",
887
- width: "90vw",
888
- maxWidth: "450px",
889
- maxHeight: "85vh",
890
- padding: 25,
891
- animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
892
- "&:focus": { outline: "none" },
893
- zIndex: 9999
894
- });
895
-
896
- // src/components/Spinner.tsx
897
- var import_react17 = __toESM(require("react"));
898
- function Spinner() {
899
- return /* @__PURE__ */ import_react17.default.createElement("span", {
900
- className: "wv-spinner-wrapper"
901
- }, /* @__PURE__ */ import_react17.default.createElement("svg", {
902
- className: "wv-spinner",
903
- xmlns: "http://www.w3.org/2000/svg",
904
- fill: "none",
905
- viewBox: "0 0 24 24"
906
- }, /* @__PURE__ */ import_react17.default.createElement("circle", {
907
- style: { opacity: ".25" },
908
- cx: "12",
909
- cy: "12",
910
- r: "10",
911
- stroke: "currentColor",
912
- strokeWidth: "4"
913
- }), /* @__PURE__ */ import_react17.default.createElement("path", {
914
- style: { opacity: ".75" },
915
- fill: "currentColor",
916
- 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"
917
- })));
918
- }
919
-
920
- // src/components/index.ts
921
- var Components = {
922
- Placeholder: Placeholder_default,
923
- Spinner,
924
- ModalComponents: Modal_exports
925
- };
926
-
927
1033
  // src/renderer.tsx
928
1034
  var import_core2 = require("@weaverse/core");
929
1035
  var import_react18 = __toESM(require("react"));
package/dist/index.mjs CHANGED
@@ -621,7 +621,7 @@ Video.defaultProps = {
621
621
  var Video_default = Video;
622
622
 
623
623
  // src/elements/Instagram.tsx
624
- import React14, { forwardRef as forwardRef9, useEffect as useEffect2, useState } from "react";
624
+ import React16, { forwardRef as forwardRef10, useEffect as useEffect2, useState } from "react";
625
625
 
626
626
  // src/components/Placeholder.tsx
627
627
  import React13, { forwardRef as forwardRef8 } from "react";
@@ -639,8 +639,211 @@ var Placeholder = forwardRef8(
639
639
  );
640
640
  var Placeholder_default = Placeholder;
641
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
+
642
845
  // src/elements/Instagram.tsx
643
- var Instagram = forwardRef9(
846
+ var Instagram = forwardRef10(
644
847
  (props, ref) => {
645
848
  let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
646
849
  let [media, setMedia] = useState([]);
@@ -662,10 +865,10 @@ var Instagram = forwardRef9(
662
865
  }
663
866
  }, [token]);
664
867
  if (!token || error) {
665
- return /* @__PURE__ */ React14.createElement("div", {
868
+ return /* @__PURE__ */ React16.createElement("div", {
666
869
  ref,
667
870
  ...rest
668
- }, /* @__PURE__ */ React14.createElement(Placeholder_default, {
871
+ }, /* @__PURE__ */ React16.createElement(Components.Placeholder, {
669
872
  element: "Instagram"
670
873
  }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
671
874
  }
@@ -673,20 +876,20 @@ var Instagram = forwardRef9(
673
876
  "--wv-ig-images-per-row": imagesPerRow,
674
877
  "--wv-ig-images-gap": gap + "px"
675
878
  };
676
- return /* @__PURE__ */ React14.createElement("div", {
879
+ return /* @__PURE__ */ React16.createElement("div", {
677
880
  ref,
678
881
  ...rest,
679
882
  style
680
- }, /* @__PURE__ */ React14.createElement("div", {
883
+ }, /* @__PURE__ */ React16.createElement("div", {
681
884
  className: "wv-ig-media-container"
682
885
  }, media.slice(0, numberOfImages).map((item) => {
683
886
  let { id, permalink, caption, media_url } = item;
684
- return /* @__PURE__ */ React14.createElement("a", {
887
+ return /* @__PURE__ */ React16.createElement("a", {
685
888
  key: id,
686
889
  href: permalink,
687
890
  target: "_blank",
688
891
  rel: "noreferrer"
689
- }, /* @__PURE__ */ React14.createElement("img", {
892
+ }, /* @__PURE__ */ React16.createElement("img", {
690
893
  alt: caption,
691
894
  src: media_url
692
895
  }));
@@ -796,111 +999,6 @@ var WeaverseContext = createContext({});
796
999
  var WeaverseContextProvider = WeaverseContext.Provider;
797
1000
  var WeaverseContextConsumer = WeaverseContext.Consumer;
798
1001
 
799
- // src/components/Modal.tsx
800
- var Modal_exports = {};
801
- __export(Modal_exports, {
802
- Modal: () => Modal,
803
- ModalClose: () => ModalClose,
804
- ModalContent: () => ModalContent,
805
- ModalHeader: () => ModalHeader,
806
- ModalTrigger: () => ModalTrigger
807
- });
808
- import React15, { forwardRef as forwardRef10 } from "react";
809
- import {
810
- Close,
811
- Content,
812
- Overlay,
813
- Portal,
814
- Root,
815
- Title,
816
- Trigger
817
- } from "@radix-ui/react-dialog";
818
- import { styled, keyframes } from "@stitches/react";
819
- var Modal = Root;
820
- var ModalTrigger = Trigger;
821
- var ModalHeader = styled(Title, {
822
- margin: 0,
823
- fontWeight: 500,
824
- color: "#ededef",
825
- fontSize: 17
826
- });
827
- var ModalContent = forwardRef10(
828
- (props, ref) => {
829
- let { children, ...rest } = props;
830
- return /* @__PURE__ */ React15.createElement(Portal, null, /* @__PURE__ */ React15.createElement(StyledOverlay, null), /* @__PURE__ */ React15.createElement(StyledContent, {
831
- ...rest,
832
- onCloseAutoFocus: (e) => e.preventDefault(),
833
- ref
834
- }, /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement(ModalClose, null), /* @__PURE__ */ React15.createElement("div", null, children))));
835
- }
836
- );
837
- var ModalClose = Close;
838
- ModalClose.defaultProps = {
839
- asChild: true
840
- };
841
- var overlayShow = keyframes({
842
- "0%": { opacity: 0 },
843
- "100%": { opacity: 1 }
844
- });
845
- var contentShow = keyframes({
846
- "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
847
- "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
848
- });
849
- var StyledOverlay = styled(Overlay, {
850
- backgroundColor: "#707070",
851
- position: "fixed",
852
- zIndex: 9999,
853
- inset: 0,
854
- animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
855
- });
856
- var StyledContent = styled(Content, {
857
- backgroundColor: "white",
858
- borderRadius: 6,
859
- boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
860
- position: "fixed",
861
- top: "50%",
862
- left: "50%",
863
- transform: "translate(-50%, -50%)",
864
- width: "90vw",
865
- maxWidth: "450px",
866
- maxHeight: "85vh",
867
- padding: 25,
868
- animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
869
- "&:focus": { outline: "none" },
870
- zIndex: 9999
871
- });
872
-
873
- // src/components/Spinner.tsx
874
- import React16 from "react";
875
- function Spinner() {
876
- return /* @__PURE__ */ React16.createElement("span", {
877
- className: "wv-spinner-wrapper"
878
- }, /* @__PURE__ */ React16.createElement("svg", {
879
- className: "wv-spinner",
880
- xmlns: "http://www.w3.org/2000/svg",
881
- fill: "none",
882
- viewBox: "0 0 24 24"
883
- }, /* @__PURE__ */ React16.createElement("circle", {
884
- style: { opacity: ".25" },
885
- cx: "12",
886
- cy: "12",
887
- r: "10",
888
- stroke: "currentColor",
889
- strokeWidth: "4"
890
- }), /* @__PURE__ */ React16.createElement("path", {
891
- style: { opacity: ".75" },
892
- fill: "currentColor",
893
- 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"
894
- })));
895
- }
896
-
897
- // src/components/index.ts
898
- var Components = {
899
- Placeholder: Placeholder_default,
900
- Spinner,
901
- ModalComponents: Modal_exports
902
- };
903
-
904
1002
  // src/renderer.tsx
905
1003
  import { isBrowser } from "@weaverse/core";
906
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.33",
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.33",
36
+ "@weaverse/core": "0.7.34",
37
37
  "nuka-carousel": "^5.4.1"
38
38
  }
39
39
  }