@wix/editor-react-components 1.2636.0 → 1.2638.0

package/dist/site/components/ImageReveal/constants.d.ts

@@ -0,0 +1,49 @@
+export declare const manifestClasses: {
+    readonly root: "image-reveal";
+    readonly divider: "image-reveal-divider";
+    readonly btn: "image-reveal-btn";
+    readonly arrowIcon: "image-reveal-arrow-icon";
+    readonly labelBefore: "image-reveal-label-before";
+    readonly labelAfter: "image-reveal-label-after";
+};
+export declare const defaultValues: {
+    readonly beforeLabel: "Before";
+    readonly afterLabel: "After";
+    readonly labelPosition: "horizontal";
+};
+export declare const DisplayNames: {
+    readonly root: {
+        readonly elementDisplayName: "Image Reveal";
+        readonly data: {
+            readonly beforeImage: "Before Image";
+            readonly afterImage: "After Image";
+            readonly beforeLabel: "Before Label";
+            readonly afterLabel: "After Label";
+            readonly labelPosition: {
+                readonly displayName: "Label Position";
+                readonly options: {
+                    readonly horizontal: "Horizontal";
+                    readonly vertical: "Vertical";
+                };
+            };
+        };
+        readonly elements: {
+            readonly divider: "Divider";
+            readonly btn: "Buttons";
+            readonly arrowIcon: "Arrow";
+            readonly labelBefore: "Before Label";
+            readonly labelAfter: "After Label";
+        };
+        readonly displayGroups: {
+            readonly iconGroup: "Icon";
+        };
+    };
+};
+export declare const CHEVRON_PATH = "M15.5 4.5 8 12l7.5 7.5";
+export declare const DEFAULT_SLIDER_POSITION = 50;
+export declare const SLIDER_STEP = 10;
+export declare const ARIA_LABELS: {
+    readonly prevButton: "Move slider left";
+    readonly nextButton: "Move slider right";
+    readonly handle: "Drag to compare before and after";
+};

package/dist/site/components/ImageReveal/css.css

@@ -0,0 +1,364 @@
+.root__hnYp0 {
+  position: relative;
+  overflow: visible;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  pointer-events: auto;
+  border-radius: var(--border-radius, 12px);
+  border: var(--border, none);
+}
+
+.imageContainer__sTfbZ {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+  border-end-start-radius: inherit;
+  border-end-end-radius: inherit;
+  box-sizing: border-box;
+  background: #f0f0f0;
+}
+
+.before__x99i- {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  box-sizing: border-box;
+  pointer-events: none;
+  display: block;
+}
+
+.after__EMOb9 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  box-sizing: border-box;
+  pointer-events: none;
+  display: block;
+  clip-path: inset(0 0 0 var(--slider-position, 50%));
+}
+
+.handle__I7Ck5 {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--slider-position, 50%);
+  transform: translateX(-50%);
+  width: 80px;
+  box-sizing: border-box;
+  cursor: col-resize;
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.dragControl__gopA- {
+  position: absolute;
+  inset: 0;
+  touch-action: none;
+}
+
+.dragControl__gopA-:focus-visible {
+  outline: 2px solid #6366f1;
+  outline-offset: -2px;
+}
+
+.divider__6oJYS {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: var(--width, 2px);
+  transform: translateX(-50%);
+  background: var(--background, rgba(255, 255, 255, 0.85));
+  box-sizing: border-box;
+  pointer-events: none;
+  display: var(--display, block);
+}
+
+.buttonGroup__0RZrR {
+  direction: ltr;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  gap: 0;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.btn__uzPRE {
+  width: auto;
+  height: auto;
+  flex: 0 0 auto;
+  margin-inline-start: var(--arrow-spacing, 3px);
+  margin-inline-end: var(--arrow-spacing, 3px);
+  border-radius: var(--border-radius, 50%);
+  border: var(--border, none);
+  background: var(--background, rgb(255, 255, 255));
+  box-shadow: var(--box-shadow, 0 4px 12px rgba(0, 0, 0, 0.22));
+  color: #1e293b;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  display: var(--display, flex);
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  pointer-events: auto;
+  padding: var(--padding, 9px);
+}
+
+.btn__uzPRE.image-reveal-btn--hover,
+.btn__uzPRE:hover {
+  background: rgb(255, 255, 255);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
+}
+
+.btn__uzPRE.image-reveal-btn--focus,
+.btn__uzPRE:focus-visible {
+  outline: 2px solid #6366f1;
+  outline-offset: 2px;
+}
+
+.btn__uzPRE:disabled,
+.btn__uzPRE.image-reveal-btn--disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.icon__eetK8 {
+  width: var(--icon-size, 18px);
+  height: var(--icon-size, 18px);
+  color: #1e293b;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.iconFlipped__dXYVO {
+  scale: -1 1;
+  box-sizing: border-box;
+}
+
+.labelBefore__oqyAj {
+  margin: 0;
+  position: absolute;
+  bottom: 0;
+  right: 100%;
+  width: var(--width, 36px);
+  height: var(--height, 90px);
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  background: var(--background, #ffb6c1);
+  border-start-start-radius: var(--border-start-start-radius, 0);
+  border-start-end-radius: var(--border-start-end-radius, 20px);
+  border-end-start-radius: var(--border-end-start-radius, 0);
+  border-end-end-radius: var(--border-end-end-radius, 20px);
+  padding: 10px 8px;
+  box-sizing: border-box;
+  pointer-events: none;
+  font: var(--font, var(--wst-paragraph-2-font));
+  line-height: var(--line-height, normal);
+  letter-spacing: var(--letter-spacing, 0.04em);
+  text-decoration-line: var(--text-decoration-line, none);
+  text-transform: var(--text-transform, none);
+  text-align: var(--text-align, center);
+  text-shadow: var(--text-shadow, none);
+  color: var(--color, #1e293b);
+  white-space: nowrap;
+  overflow: hidden;
+  display: var(--display, flex);
+  align-items: center;
+  justify-content: center;
+  box-shadow: inherit;
+}
+
+.labelAfter__bwrPv {
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: var(--width, 36px);
+  height: var(--height, 90px);
+  writing-mode: vertical-rl;
+  background: var(--background, #ffb6c1);
+  border-start-start-radius: var(--border-start-start-radius, 0);
+  border-start-end-radius: var(--border-start-end-radius, 20px);
+  border-end-start-radius: var(--border-end-start-radius, 0);
+  border-end-end-radius: var(--border-end-end-radius, 20px);
+  padding: 10px 8px;
+  box-sizing: border-box;
+  pointer-events: none;
+  font: var(--font, var(--wst-paragraph-2-font));
+  line-height: var(--line-height, normal);
+  letter-spacing: var(--letter-spacing, 0.04em);
+  text-decoration-line: var(--text-decoration-line, none);
+  text-transform: var(--text-transform, none);
+  text-align: var(--text-align, center);
+  text-shadow: var(--text-shadow, none);
+  color: var(--color, #1e293b);
+  white-space: nowrap;
+  overflow: hidden;
+  display: var(--display, flex);
+  align-items: center;
+  justify-content: center;
+  box-shadow: inherit;
+}
+
+.labelBeforeVertical__y6xqy {
+  bottom: auto;
+  right: auto;
+  top: 100%;
+  left: 0;
+  width: auto;
+  height: auto;
+  writing-mode: horizontal-tb;
+  transform: none;
+  border-radius: 0 0 20px 20px;
+}
+
+.labelAfterVertical__KD2TH {
+  top: auto;
+  left: auto;
+  bottom: 100%;
+  right: 0;
+  width: auto;
+  height: auto;
+  writing-mode: horizontal-tb;
+  transform: none;
+  border-radius: 20px 20px 0 0;
+}
+.image__iWj48 {
+  container-type: size;
+  display: block;
+  width: 100%;
+  height: 100%;
+  contain: paint;
+}
+.image__iWj48 img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--object-fit, cover);
+  --position-left: calc(50cqw - 1cqh * var(--focal-x, 50) * var(--aspect-ratio, 1));
+  --position-top: calc(50cqh - 1cqw * var(--focal-y, 50) / var(--aspect-ratio, 1));
+  object-position: clamp(100%, var(--position-left), 0%) clamp(100%, var(--position-top), 0%);
+}
+
+@container style(--object-fit) and (not style(--object-fit: cover)) {
+  .image__iWj48 img {
+    object-position: center;
+  }
+}.root__FuiJG {
+  mix-blend-mode: var(--blend-mode, normal);
+}
+
+.image3__6ufCe {
+  position: relative;
+  block-size: 100%;
+  overflow: clip;
+  border-color: var(--border-color);
+  border-width: var(--border-width, 0);
+  border-style: var(--border-style, solid);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  box-sizing: border-box;
+}
+.image3__6ufCe.fitWidth__0L5O4 {
+  block-size: auto;
+  aspect-ratio: var(--original-aspect-ratio, 1);
+}
+.image3__6ufCe .imageLayer__w0TXF {
+  position: relative;
+  block-size: 100%;
+}
+.image3__6ufCe .imageLayer__w0TXF picture {
+  position: relative;
+}
+.image3__6ufCe .imageLayer__w0TXF img {
+  opacity: var(--opacity, 1);
+}
+.image3__6ufCe .wowImage__1yncg {
+  position: absolute;
+  inline-size: 100%;
+  block-size: 100%;
+  mask-position: 0px 0px;
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+  mask-image: var(--maskImage, none);
+}
+.image3__6ufCe .wowImage__1yncg img {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.linkLayer__hoVt- {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+.h1-go2_mI {
+  font: var(--wst-heading-1-font);
+  color: var(--wst-heading-1-color);
+}
+
+.h2-dAyvwd {
+  font: var(--wst-heading-2-font);
+  color: var(--wst-heading-2-color);
+}
+
+.h3-LClqyK {
+  font: var(--wst-heading-3-font);
+  color: var(--wst-heading-3-color);
+}
+
+.h4-pzBHGr {
+  font: var(--wst-heading-4-font);
+  color: var(--wst-heading-4-color);
+}
+
+.h5-HOx5Wp {
+  font: var(--wst-heading-5-font);
+  color: var(--wst-heading-5-color);
+}
+
+.h6-zCNm1M {
+  font: var(--wst-heading-6-font);
+  color: var(--wst-heading-6-color);
+}
+
+.p1-pY02jM {
+  font: var(--wst-paragraph-1-font);
+  color: var(--wst-paragraph-1-color);
+}
+
+.p2-TsZIq5 {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color);
+}
+
+.p3-N6QdAQ {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-3-color);
+}
+.fallbackDirection__HeRgn:not([dir]) {
+  direction: var(--wix-opt-in-direction);
+}
+.presetWrapper__J1yzj {
+  display: contents;
+}

package/dist/site/components/ImageReveal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component';
+export { default, default as ImageReveal } from './component';

package/dist/site/components/ImageReveal/index.js

@@ -0,0 +1,6 @@
+'use client';
+
+import ImageReveal from './component.js';
+
+export { ImageReveal };
+export default ImageReveal;

package/dist/site/components/ImageReveal/manifest.d.ts

@@ -0,0 +1,5 @@
+import { EditorReactComponent } from '@wix/component-protocol/schema';
+declare const manifest: EditorReactComponent & {
+    id: string;
+};
+export default manifest;