@weaverse/react 1.0.3 → 1.0.4

package/dist/index.d.ts

@@ -17,6 +17,8 @@ declare let CircleNotch: (props: HTMLAttributes<SVGElement>) => JSX.Element;
 declare let X: (props: HTMLAttributes<SVGElement>) => JSX.Element;
 declare let Minus: (props: HTMLAttributes<SVGElement>) => JSX.Element;
 declare let Plus: (props: HTMLAttributes<SVGElement>) => JSX.Element;
+declare let CaretLeft: (props: HTMLAttributes<SVGElement>) => JSX.Element;
+declare let CaretRight: (props: HTMLAttributes<SVGElement>) => JSX.Element;
 declare let ArrowLeft: (props: HTMLAttributes<SVGElement>) => JSX.Element;
 declare let ArrowRight: (props: HTMLAttributes<SVGElement>) => JSX.Element;
 declare let Image: (props: HTMLAttributes<SVGElement>) => JSX.Element;
@@ -31,6 +33,8 @@ declare const PhosphorIcons_CircleNotch: typeof CircleNotch;
 declare const PhosphorIcons_X: typeof X;
 declare const PhosphorIcons_Minus: typeof Minus;
 declare const PhosphorIcons_Plus: typeof Plus;
+declare const PhosphorIcons_CaretLeft: typeof CaretLeft;
+declare const PhosphorIcons_CaretRight: typeof CaretRight;
 declare const PhosphorIcons_ArrowLeft: typeof ArrowLeft;
 declare const PhosphorIcons_ArrowRight: typeof ArrowRight;
 declare const PhosphorIcons_Image: typeof Image;
@@ -46,6 +50,8 @@ declare namespace PhosphorIcons {
     PhosphorIcons_X as X,
     PhosphorIcons_Minus as Minus,
     PhosphorIcons_Plus as Plus,
+    PhosphorIcons_CaretLeft as CaretLeft,
+    PhosphorIcons_CaretRight as CaretRight,
     PhosphorIcons_ArrowLeft as ArrowLeft,
     PhosphorIcons_ArrowRight as ArrowRight,
     PhosphorIcons_Image as Image,
@@ -80,6 +86,7 @@ interface SliderArrowsProps {
     currentSlide: number;
     instanceRef: React.MutableRefObject<KeenSliderInstance | null>;
     offset: number;
+    icon: 'caret' | 'arrow';
     className?: string;
 }
 interface SliderDotsProps {
@@ -286,6 +293,9 @@ interface SlideshowProps extends WeaverseElementProps {
     slidesPerView: number;
     spacing: number;
     showArrows: boolean;
+    showArrowsOnHover: boolean;
+    arrowIcon: 'caret' | 'arrow';
+    arrowsColor: 'light' | 'dark';
     showDots: boolean;
     dotsPosition: 'top' | 'bottom' | 'left' | 'right';
     dotsColor: 'light' | 'dark';

package/dist/index.js

@@ -82,6 +82,8 @@ var css = {
     backgroundColor: "#393e46",
     color: "#fff",
     fontSize: "14px",
+    lineHeight: "1.5",
+    letterSpacing: "0",
     fontWeight: "medium",
     padding: "10px 20px",
     height: "42px",
@@ -513,7 +515,9 @@ var css7 = {
         all: "inherit",
         margin: "0",
         wordBreak: "break-word",
-        overflowWrap: "break-word"
+        overflowWrap: "break-word",
+        width: "auto",
+        height: "auto"
       }
     }
   }
@@ -642,6 +646,8 @@ __export(phosphor_exports, {
   ArrowLeft: () => ArrowLeft,
   ArrowRight: () => ArrowRight,
   Backpack: () => Backpack,
+  CaretLeft: () => CaretLeft,
+  CaretRight: () => CaretRight,
   CircleNotch: () => CircleNotch,
   Eye: () => Eye,
   Image: () => Image2,
@@ -756,6 +762,56 @@ var Plus = (props) => {
     /* @__PURE__ */ import_react14.default.createElement("path", { d: "M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z" })
   );
 };
+var CaretLeft = (props) => {
+  return /* @__PURE__ */ import_react14.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "192",
+      height: "192",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props
+    },
+    /* @__PURE__ */ import_react14.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react14.default.createElement(
+      "polyline",
+      {
+        points: "160 208 80 128 160 48",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "16"
+      }
+    )
+  );
+};
+var CaretRight = (props) => {
+  return /* @__PURE__ */ import_react14.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "192",
+      height: "192",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props
+    },
+    /* @__PURE__ */ import_react14.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react14.default.createElement(
+      "polyline",
+      {
+        points: "96 48 176 128 96 208",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "16"
+      }
+    )
+  );
+};
 var ArrowLeft = (props) => {
   return /* @__PURE__ */ import_react14.default.createElement(
     "svg",
@@ -1241,7 +1297,7 @@ function Icon({ name, className, ...props }) {
 
 // src/components/slider/arrows.tsx
 function Arrows(props) {
-  let { currentSlide, instanceRef, className, offset } = props;
+  let { currentSlide, instanceRef, className, icon, offset } = props;
   let isFirst = currentSlide === 0;
   let isLast = false;
   if (instanceRef.current) {
@@ -1260,7 +1316,7 @@ function Arrows(props) {
         instanceRef?.current?.prev();
       }
     },
-    /* @__PURE__ */ import_react17.default.createElement(Icon, { name: "ArrowLeft" })
+    /* @__PURE__ */ import_react17.default.createElement(Icon, { name: icon === "caret" ? "CaretLeft" : "ArrowLeft" })
   ), /* @__PURE__ */ import_react17.default.createElement(
     "button",
     {
@@ -1271,7 +1327,7 @@ function Arrows(props) {
         instanceRef?.current?.next();
       }
     },
-    /* @__PURE__ */ import_react17.default.createElement(Icon, { name: "ArrowRight" })
+    /* @__PURE__ */ import_react17.default.createElement(Icon, { name: icon === "caret" ? "CaretRight" : "ArrowRight" })
   ));
 }
 var StyledArrows = (0, import_react16.styled)("div", {
@@ -1505,7 +1561,7 @@ function useSlideshowConfigs(props) {
   }
   let [sliderRef, instanceRef] = (0, import_react20.useKeenSlider)(
     {
-      slides: animation === "fade" ? import_react21.default.Children.count(children) : { perView: slidesPerView },
+      slides: animation === "fade" ? import_react21.default.Children.count(children) : { perView: slidesPerView, number: import_react21.default.Children.count(children) },
       drag: isPreviewMode || !isDesignMode,
       loop,
       selector: animation === "fade" ? null : ".keen-slider__slide",
@@ -1561,6 +1617,9 @@ var Slideshow = (0, import_react23.forwardRef)((props, ref) => {
   let {
     animation,
     showArrows,
+    showArrowsOnHover,
+    arrowIcon,
+    arrowsColor,
     showDots,
     dotsPosition,
     dotsColor,
@@ -1586,12 +1645,18 @@ var Slideshow = (0, import_react23.forwardRef)((props, ref) => {
     faderClass,
     animation === "slide" ? "keen-slider" : "keen-fader"
   );
+  let arrowsClass = (0, import_clsx5.default)(
+    "wv-slideshow--arrows",
+    showArrowsOnHover && "show-on-hover",
+    `arrows--${arrowsColor}`
+  );
   return /* @__PURE__ */ import_react23.default.createElement("div", { ref, style, ...rest }, /* @__PURE__ */ import_react23.default.createElement("div", { ref: sliderRef, className: _className }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ import_react23.default.createElement(
     Arrows,
     {
       instanceRef,
       currentSlide,
-      className: "wv-slideshow--arrows",
+      className: arrowsClass,
+      icon: arrowIcon,
       offset: 20
     }
   ), showDots && created && instanceRef?.current && /* @__PURE__ */ import_react23.default.createElement(
@@ -1621,6 +1686,39 @@ var css9 = {
         position: "absolute",
         inset: 0
       }
+    },
+    ".wv-slideshow--arrows": {
+      ".arrow": {
+        borderRadius: "100%",
+        backgroundColor: "transparent",
+        padding: "6px",
+        "&:hover": {
+          backgroundColor: "#fff"
+        },
+        svg: {
+          width: "28px",
+          height: "28px"
+        }
+      },
+      "&.show-on-hover": {
+        opacity: 0,
+        transition: "opacity 0.3s ease"
+      },
+      "&.arrows--dark": {
+        ".arrow": {
+          color: "#000"
+        }
+      },
+      "&.arrows--light": {
+        ".arrow": {
+          color: "#fff"
+        }
+      }
+    },
+    "&:hover": {
+      ".wv-slideshow--arrows": {
+        opacity: 1
+      }
     }
   }
 };
@@ -1629,9 +1727,12 @@ Slideshow.defaultProps = {
   slidesPerView: 1,
   spacing: 0,
   showArrows: true,
+  showArrowsOnHover: false,
+  arrowIcon: "caret",
+  arrowsColor: "dark",
   showDots: true,
   dotsPosition: "bottom",
-  dotsColor: "light",
+  dotsColor: "dark",
   loop: true,
   autoRotate: false,
   changeSlidesEvery: 5
@@ -2171,7 +2272,8 @@ function Slider(props) {
       currentSlide,
       instanceRef,
       className: arrowsClass,
-      offset: arrowOffset
+      offset: arrowOffset,
+      icon: "arrow"
     }
   ));
 }

package/dist/index.mjs

@@ -46,6 +46,8 @@ var css = {
     backgroundColor: "#393e46",
     color: "#fff",
     fontSize: "14px",
+    lineHeight: "1.5",
+    letterSpacing: "0",
     fontWeight: "medium",
     padding: "10px 20px",
     height: "42px",
@@ -477,7 +479,9 @@ var css7 = {
         all: "inherit",
         margin: "0",
         wordBreak: "break-word",
-        overflowWrap: "break-word"
+        overflowWrap: "break-word",
+        width: "auto",
+        height: "auto"
       }
     }
   }
@@ -606,6 +610,8 @@ __export(phosphor_exports, {
   ArrowLeft: () => ArrowLeft,
   ArrowRight: () => ArrowRight,
   Backpack: () => Backpack,
+  CaretLeft: () => CaretLeft,
+  CaretRight: () => CaretRight,
   CircleNotch: () => CircleNotch,
   Eye: () => Eye,
   Image: () => Image2,
@@ -720,6 +726,56 @@ var Plus = (props) => {
     /* @__PURE__ */ React15.createElement("path", { d: "M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z" })
   );
 };
+var CaretLeft = (props) => {
+  return /* @__PURE__ */ React15.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "192",
+      height: "192",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props
+    },
+    /* @__PURE__ */ React15.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React15.createElement(
+      "polyline",
+      {
+        points: "160 208 80 128 160 48",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "16"
+      }
+    )
+  );
+};
+var CaretRight = (props) => {
+  return /* @__PURE__ */ React15.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "192",
+      height: "192",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props
+    },
+    /* @__PURE__ */ React15.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React15.createElement(
+      "polyline",
+      {
+        points: "96 48 176 128 96 208",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "16"
+      }
+    )
+  );
+};
 var ArrowLeft = (props) => {
   return /* @__PURE__ */ React15.createElement(
     "svg",
@@ -1205,7 +1261,7 @@ function Icon({ name, className, ...props }) {
 
 // src/components/slider/arrows.tsx
 function Arrows(props) {
-  let { currentSlide, instanceRef, className, offset } = props;
+  let { currentSlide, instanceRef, className, icon, offset } = props;
   let isFirst = currentSlide === 0;
   let isLast = false;
   if (instanceRef.current) {
@@ -1224,7 +1280,7 @@ function Arrows(props) {
         instanceRef?.current?.prev();
       }
     },
-    /* @__PURE__ */ React17.createElement(Icon, { name: "ArrowLeft" })
+    /* @__PURE__ */ React17.createElement(Icon, { name: icon === "caret" ? "CaretLeft" : "ArrowLeft" })
   ), /* @__PURE__ */ React17.createElement(
     "button",
     {
@@ -1235,7 +1291,7 @@ function Arrows(props) {
         instanceRef?.current?.next();
       }
     },
-    /* @__PURE__ */ React17.createElement(Icon, { name: "ArrowRight" })
+    /* @__PURE__ */ React17.createElement(Icon, { name: icon === "caret" ? "CaretRight" : "ArrowRight" })
   ));
 }
 var StyledArrows = styled("div", {
@@ -1469,7 +1525,7 @@ function useSlideshowConfigs(props) {
   }
   let [sliderRef, instanceRef] = useKeenSlider(
     {
-      slides: animation === "fade" ? React19.Children.count(children) : { perView: slidesPerView },
+      slides: animation === "fade" ? React19.Children.count(children) : { perView: slidesPerView, number: React19.Children.count(children) },
       drag: isPreviewMode || !isDesignMode,
       loop,
       selector: animation === "fade" ? null : ".keen-slider__slide",
@@ -1525,6 +1581,9 @@ var Slideshow = forwardRef8((props, ref) => {
   let {
     animation,
     showArrows,
+    showArrowsOnHover,
+    arrowIcon,
+    arrowsColor,
     showDots,
     dotsPosition,
     dotsColor,
@@ -1550,12 +1609,18 @@ var Slideshow = forwardRef8((props, ref) => {
     faderClass,
     animation === "slide" ? "keen-slider" : "keen-fader"
   );
+  let arrowsClass = clsx5(
+    "wv-slideshow--arrows",
+    showArrowsOnHover && "show-on-hover",
+    `arrows--${arrowsColor}`
+  );
   return /* @__PURE__ */ React20.createElement("div", { ref, style, ...rest }, /* @__PURE__ */ React20.createElement("div", { ref: sliderRef, className: _className }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ React20.createElement(
     Arrows,
     {
       instanceRef,
       currentSlide,
-      className: "wv-slideshow--arrows",
+      className: arrowsClass,
+      icon: arrowIcon,
       offset: 20
     }
   ), showDots && created && instanceRef?.current && /* @__PURE__ */ React20.createElement(
@@ -1585,6 +1650,39 @@ var css9 = {
         position: "absolute",
         inset: 0
       }
+    },
+    ".wv-slideshow--arrows": {
+      ".arrow": {
+        borderRadius: "100%",
+        backgroundColor: "transparent",
+        padding: "6px",
+        "&:hover": {
+          backgroundColor: "#fff"
+        },
+        svg: {
+          width: "28px",
+          height: "28px"
+        }
+      },
+      "&.show-on-hover": {
+        opacity: 0,
+        transition: "opacity 0.3s ease"
+      },
+      "&.arrows--dark": {
+        ".arrow": {
+          color: "#000"
+        }
+      },
+      "&.arrows--light": {
+        ".arrow": {
+          color: "#fff"
+        }
+      }
+    },
+    "&:hover": {
+      ".wv-slideshow--arrows": {
+        opacity: 1
+      }
     }
   }
 };
@@ -1593,9 +1691,12 @@ Slideshow.defaultProps = {
   slidesPerView: 1,
   spacing: 0,
   showArrows: true,
+  showArrowsOnHover: false,
+  arrowIcon: "caret",
+  arrowsColor: "dark",
   showDots: true,
   dotsPosition: "bottom",
-  dotsColor: "light",
+  dotsColor: "dark",
   loop: true,
   autoRotate: false,
   changeSlidesEvery: 5
@@ -2135,7 +2236,8 @@ function Slider(props) {
       currentSlide,
       instanceRef,
       className: arrowsClass,
-      offset: arrowOffset
+      offset: arrowOffset,
+      icon: "arrow"
     }
   ));
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.2",
     "@stitches/react": "^1.2.8",
-    "@weaverse/core": "1.0.3",
+    "@weaverse/core": "1.0.4",
     "clsx": "^1.2.1",
     "keen-slider": "^6.8.5"
   }