@opensite/ui 3.4.2 → 3.4.4

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.
@@ -61,25 +61,6 @@ var slideVariants = {
61
61
  }
62
62
  }
63
63
  };
64
- var fadeVariants = {
65
- initial: {
66
- opacity: 0
67
- },
68
- visible: {
69
- opacity: 1,
70
- transition: {
71
- duration: 0.8,
72
- ease: [0.4, 0, 0.2, 1]
73
- }
74
- },
75
- fadeExit: {
76
- opacity: 0,
77
- transition: {
78
- duration: 0.8,
79
- ease: [0.4, 0, 0.2, 1]
80
- }
81
- }
82
- };
83
64
  var normalizeIndex = (index, length) => {
84
65
  if (!length) return 0;
85
66
  const safeIndex = index % length;
@@ -167,38 +148,55 @@ var ImageSlider = ({
167
148
  perspective: "1000px"
168
149
  },
169
150
  children: [
170
- /* @__PURE__ */ jsxRuntime.jsx(
171
- react.AnimatePresence,
151
+ transition === "fade" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
152
+ "div",
172
153
  {
173
- mode: transition === "fade" ? "sync" : "wait",
174
- initial: false,
175
- children: activeImage ? /* @__PURE__ */ jsxRuntime.jsx(
176
- react.motion.div,
154
+ "aria-hidden": index !== currentIndex,
155
+ className: cn(
156
+ "absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out motion-reduce:transition-none",
157
+ index === currentIndex && "opacity-100"
158
+ ),
159
+ children: /* @__PURE__ */ jsxRuntime.jsx(
160
+ img.Img,
177
161
  {
178
- initial: "initial",
179
- animate: "visible",
180
- exit: transition === "fade" ? "fadeExit" : direction === "up" ? "upExit" : "downExit",
181
- variants: transition === "fade" ? fadeVariants : slideVariants,
182
- className: "absolute inset-0",
183
- children: /* @__PURE__ */ jsxRuntime.jsx(
184
- img.Img,
185
- {
186
- src: activeImage.src,
187
- alt: activeImage.alt,
188
- className: cn(
189
- "h-full w-full object-cover object-center",
190
- imageClassName,
191
- activeImage.className
192
- ),
193
- optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
194
- loading: "eager"
195
- }
196
- )
197
- },
198
- `${currentIndex}-${activeImage.src ?? "image"}`
199
- ) : null
200
- }
201
- ),
162
+ src: image.src,
163
+ alt: image.alt,
164
+ className: cn(
165
+ "h-full w-full object-cover object-center",
166
+ imageClassName,
167
+ image.className
168
+ ),
169
+ optixFlowConfig: image.optixFlowConfig ?? optixFlowConfig,
170
+ loading: "eager"
171
+ }
172
+ )
173
+ },
174
+ `${image.src ?? "image"}-${index}`
175
+ )) }) : /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: activeImage ? /* @__PURE__ */ jsxRuntime.jsx(
176
+ react.motion.div,
177
+ {
178
+ initial: "initial",
179
+ animate: "visible",
180
+ exit: direction === "up" ? "upExit" : "downExit",
181
+ variants: slideVariants,
182
+ className: "absolute inset-0",
183
+ children: /* @__PURE__ */ jsxRuntime.jsx(
184
+ img.Img,
185
+ {
186
+ src: activeImage.src,
187
+ alt: activeImage.alt,
188
+ className: cn(
189
+ "h-full w-full object-cover object-center",
190
+ imageClassName,
191
+ activeImage.className
192
+ ),
193
+ optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
194
+ loading: "eager"
195
+ }
196
+ )
197
+ },
198
+ `${currentIndex}-${activeImage.src ?? "image"}`
199
+ ) : null }),
202
200
  overlayContent,
203
201
  children ? /* @__PURE__ */ jsxRuntime.jsx(
204
202
  "div",
@@ -39,25 +39,6 @@ var slideVariants = {
39
39
  }
40
40
  }
41
41
  };
42
- var fadeVariants = {
43
- initial: {
44
- opacity: 0
45
- },
46
- visible: {
47
- opacity: 1,
48
- transition: {
49
- duration: 0.8,
50
- ease: [0.4, 0, 0.2, 1]
51
- }
52
- },
53
- fadeExit: {
54
- opacity: 0,
55
- transition: {
56
- duration: 0.8,
57
- ease: [0.4, 0, 0.2, 1]
58
- }
59
- }
60
- };
61
42
  var normalizeIndex = (index, length) => {
62
43
  if (!length) return 0;
63
44
  const safeIndex = index % length;
@@ -145,38 +126,55 @@ var ImageSlider = ({
145
126
  perspective: "1000px"
146
127
  },
147
128
  children: [
148
- /* @__PURE__ */ jsx(
149
- AnimatePresence,
129
+ transition === "fade" ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: images.map((image, index) => /* @__PURE__ */ jsx(
130
+ "div",
150
131
  {
151
- mode: transition === "fade" ? "sync" : "wait",
152
- initial: false,
153
- children: activeImage ? /* @__PURE__ */ jsx(
154
- motion.div,
132
+ "aria-hidden": index !== currentIndex,
133
+ className: cn(
134
+ "absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out motion-reduce:transition-none",
135
+ index === currentIndex && "opacity-100"
136
+ ),
137
+ children: /* @__PURE__ */ jsx(
138
+ Img,
155
139
  {
156
- initial: "initial",
157
- animate: "visible",
158
- exit: transition === "fade" ? "fadeExit" : direction === "up" ? "upExit" : "downExit",
159
- variants: transition === "fade" ? fadeVariants : slideVariants,
160
- className: "absolute inset-0",
161
- children: /* @__PURE__ */ jsx(
162
- Img,
163
- {
164
- src: activeImage.src,
165
- alt: activeImage.alt,
166
- className: cn(
167
- "h-full w-full object-cover object-center",
168
- imageClassName,
169
- activeImage.className
170
- ),
171
- optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
172
- loading: "eager"
173
- }
174
- )
175
- },
176
- `${currentIndex}-${activeImage.src ?? "image"}`
177
- ) : null
178
- }
179
- ),
140
+ src: image.src,
141
+ alt: image.alt,
142
+ className: cn(
143
+ "h-full w-full object-cover object-center",
144
+ imageClassName,
145
+ image.className
146
+ ),
147
+ optixFlowConfig: image.optixFlowConfig ?? optixFlowConfig,
148
+ loading: "eager"
149
+ }
150
+ )
151
+ },
152
+ `${image.src ?? "image"}-${index}`
153
+ )) }) : /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: activeImage ? /* @__PURE__ */ jsx(
154
+ motion.div,
155
+ {
156
+ initial: "initial",
157
+ animate: "visible",
158
+ exit: direction === "up" ? "upExit" : "downExit",
159
+ variants: slideVariants,
160
+ className: "absolute inset-0",
161
+ children: /* @__PURE__ */ jsx(
162
+ Img,
163
+ {
164
+ src: activeImage.src,
165
+ alt: activeImage.alt,
166
+ className: cn(
167
+ "h-full w-full object-cover object-center",
168
+ imageClassName,
169
+ activeImage.className
170
+ ),
171
+ optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
172
+ loading: "eager"
173
+ }
174
+ )
175
+ },
176
+ `${currentIndex}-${activeImage.src ?? "image"}`
177
+ ) : null }),
180
178
  overlayContent,
181
179
  children ? /* @__PURE__ */ jsx(
182
180
  "div",
package/dist/index.cjs CHANGED
@@ -827,25 +827,6 @@ var slideVariants = {
827
827
  }
828
828
  }
829
829
  };
830
- var fadeVariants = {
831
- initial: {
832
- opacity: 0
833
- },
834
- visible: {
835
- opacity: 1,
836
- transition: {
837
- duration: 0.8,
838
- ease: [0.4, 0, 0.2, 1]
839
- }
840
- },
841
- fadeExit: {
842
- opacity: 0,
843
- transition: {
844
- duration: 0.8,
845
- ease: [0.4, 0, 0.2, 1]
846
- }
847
- }
848
- };
849
830
  var normalizeIndex = (index, length) => {
850
831
  if (!length) return 0;
851
832
  const safeIndex = index % length;
@@ -933,38 +914,55 @@ var ImageSlider = ({
933
914
  perspective: "1000px"
934
915
  },
935
916
  children: [
936
- /* @__PURE__ */ jsxRuntime.jsx(
937
- react.AnimatePresence,
917
+ transition === "fade" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
918
+ "div",
938
919
  {
939
- mode: transition === "fade" ? "sync" : "wait",
940
- initial: false,
941
- children: activeImage ? /* @__PURE__ */ jsxRuntime.jsx(
942
- react.motion.div,
920
+ "aria-hidden": index !== currentIndex,
921
+ className: cn(
922
+ "absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out motion-reduce:transition-none",
923
+ index === currentIndex && "opacity-100"
924
+ ),
925
+ children: /* @__PURE__ */ jsxRuntime.jsx(
926
+ img.Img,
943
927
  {
944
- initial: "initial",
945
- animate: "visible",
946
- exit: transition === "fade" ? "fadeExit" : direction === "up" ? "upExit" : "downExit",
947
- variants: transition === "fade" ? fadeVariants : slideVariants,
948
- className: "absolute inset-0",
949
- children: /* @__PURE__ */ jsxRuntime.jsx(
950
- img.Img,
951
- {
952
- src: activeImage.src,
953
- alt: activeImage.alt,
954
- className: cn(
955
- "h-full w-full object-cover object-center",
956
- imageClassName,
957
- activeImage.className
958
- ),
959
- optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
960
- loading: "eager"
961
- }
962
- )
963
- },
964
- `${currentIndex}-${activeImage.src ?? "image"}`
965
- ) : null
966
- }
967
- ),
928
+ src: image.src,
929
+ alt: image.alt,
930
+ className: cn(
931
+ "h-full w-full object-cover object-center",
932
+ imageClassName,
933
+ image.className
934
+ ),
935
+ optixFlowConfig: image.optixFlowConfig ?? optixFlowConfig,
936
+ loading: "eager"
937
+ }
938
+ )
939
+ },
940
+ `${image.src ?? "image"}-${index}`
941
+ )) }) : /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: activeImage ? /* @__PURE__ */ jsxRuntime.jsx(
942
+ react.motion.div,
943
+ {
944
+ initial: "initial",
945
+ animate: "visible",
946
+ exit: direction === "up" ? "upExit" : "downExit",
947
+ variants: slideVariants,
948
+ className: "absolute inset-0",
949
+ children: /* @__PURE__ */ jsxRuntime.jsx(
950
+ img.Img,
951
+ {
952
+ src: activeImage.src,
953
+ alt: activeImage.alt,
954
+ className: cn(
955
+ "h-full w-full object-cover object-center",
956
+ imageClassName,
957
+ activeImage.className
958
+ ),
959
+ optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
960
+ loading: "eager"
961
+ }
962
+ )
963
+ },
964
+ `${currentIndex}-${activeImage.src ?? "image"}`
965
+ ) : null }),
968
966
  overlayContent,
969
967
  children ? /* @__PURE__ */ jsxRuntime.jsx(
970
968
  "div",
package/dist/index.js CHANGED
@@ -805,25 +805,6 @@ var slideVariants = {
805
805
  }
806
806
  }
807
807
  };
808
- var fadeVariants = {
809
- initial: {
810
- opacity: 0
811
- },
812
- visible: {
813
- opacity: 1,
814
- transition: {
815
- duration: 0.8,
816
- ease: [0.4, 0, 0.2, 1]
817
- }
818
- },
819
- fadeExit: {
820
- opacity: 0,
821
- transition: {
822
- duration: 0.8,
823
- ease: [0.4, 0, 0.2, 1]
824
- }
825
- }
826
- };
827
808
  var normalizeIndex = (index, length) => {
828
809
  if (!length) return 0;
829
810
  const safeIndex = index % length;
@@ -911,38 +892,55 @@ var ImageSlider = ({
911
892
  perspective: "1000px"
912
893
  },
913
894
  children: [
914
- /* @__PURE__ */ jsx(
915
- AnimatePresence$1,
895
+ transition === "fade" ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: images.map((image, index) => /* @__PURE__ */ jsx(
896
+ "div",
916
897
  {
917
- mode: transition === "fade" ? "sync" : "wait",
918
- initial: false,
919
- children: activeImage ? /* @__PURE__ */ jsx(
920
- motion$1.div,
898
+ "aria-hidden": index !== currentIndex,
899
+ className: cn(
900
+ "absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out motion-reduce:transition-none",
901
+ index === currentIndex && "opacity-100"
902
+ ),
903
+ children: /* @__PURE__ */ jsx(
904
+ Img,
921
905
  {
922
- initial: "initial",
923
- animate: "visible",
924
- exit: transition === "fade" ? "fadeExit" : direction === "up" ? "upExit" : "downExit",
925
- variants: transition === "fade" ? fadeVariants : slideVariants,
926
- className: "absolute inset-0",
927
- children: /* @__PURE__ */ jsx(
928
- Img,
929
- {
930
- src: activeImage.src,
931
- alt: activeImage.alt,
932
- className: cn(
933
- "h-full w-full object-cover object-center",
934
- imageClassName,
935
- activeImage.className
936
- ),
937
- optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
938
- loading: "eager"
939
- }
940
- )
941
- },
942
- `${currentIndex}-${activeImage.src ?? "image"}`
943
- ) : null
944
- }
945
- ),
906
+ src: image.src,
907
+ alt: image.alt,
908
+ className: cn(
909
+ "h-full w-full object-cover object-center",
910
+ imageClassName,
911
+ image.className
912
+ ),
913
+ optixFlowConfig: image.optixFlowConfig ?? optixFlowConfig,
914
+ loading: "eager"
915
+ }
916
+ )
917
+ },
918
+ `${image.src ?? "image"}-${index}`
919
+ )) }) : /* @__PURE__ */ jsx(AnimatePresence$1, { mode: "wait", initial: false, children: activeImage ? /* @__PURE__ */ jsx(
920
+ motion$1.div,
921
+ {
922
+ initial: "initial",
923
+ animate: "visible",
924
+ exit: direction === "up" ? "upExit" : "downExit",
925
+ variants: slideVariants,
926
+ className: "absolute inset-0",
927
+ children: /* @__PURE__ */ jsx(
928
+ Img,
929
+ {
930
+ src: activeImage.src,
931
+ alt: activeImage.alt,
932
+ className: cn(
933
+ "h-full w-full object-cover object-center",
934
+ imageClassName,
935
+ activeImage.className
936
+ ),
937
+ optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
938
+ loading: "eager"
939
+ }
940
+ )
941
+ },
942
+ `${currentIndex}-${activeImage.src ?? "image"}`
943
+ ) : null }),
946
944
  overlayContent,
947
945
  children ? /* @__PURE__ */ jsx(
948
946
  "div",