@janbox/storefront-ui 2.0.16 → 2.0.17

package/dist/lib/badge/badge.d.ts

@@ -1,3 +1,3 @@
 import { BadgeProps } from './types';
-export declare const Badge: ({ children, ref, ..._props }: BadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ color, content, children }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=badge.d.ts.map

package/dist/lib/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/lib/badge/badge.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,eAAO,MAAM,KAAK,iCAAkC,UAAU,qDAmC7D,CAAC"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/lib/badge/badge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAOrC,eAAO,MAAM,KAAK,iCAA0C,UAAU,4CA2DrE,CAAC"}

package/dist/lib/badge/badge.js

@@ -1,39 +1,63 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { isNumber } from "lodash-es";
-import { getBadgeProps } from "./helpers.js";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { isNil } from "lodash-es";
+import { useFloating, autoUpdate, offset, useMergeRefs, FloatingPortal } from "@floating-ui/react";
 import { getColorShadesByVariant } from "../../utils/index.js";
-const Badge = ({ children, ref, ..._props }) => {
-  const { badgeContent, color = "primary", ...rest } = getBadgeProps(_props);
-  const { main } = getColorShadesByVariant(color);
-  return /* @__PURE__ */ jsxs("div", { css: { position: "relative", display: "inline-block" }, ...rest, ref, children: [
-    /* @__PURE__ */ jsx(
-      "span",
+import { cloneElement } from "react";
+import { FLOATING_Z_INDEX } from "../../theme/index.js";
+import { Primitive } from "../primitive/primitive.js";
+import { getTypographyVar } from "../../theme/typography.js";
+const Badge = ({ color = "red", content, children }) => {
+  const { main, contrast } = getColorShadesByVariant(color);
+  const {
+    floatingStyles,
+    refs: { setFloating, setReference },
+    context
+  } = useFloating({
+    placement: "top-end",
+    middleware: [
+      offset(({ rects }) => ({
+        crossAxis: Math.round(rects.floating.width / 2),
+        mainAxis: -Math.round(rects.floating.height / 2)
+      }))
+    ],
+    whileElementsMounted: autoUpdate,
+    open: !isNil(content)
+  });
+  const mergedRefs = useMergeRefs([setReference, children.props.ref]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    cloneElement(children, {
+      ...children.props,
+      ref: mergedRefs
+    }),
+    context.open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+      "div",
       {
-        css: {
-          backgroundColor: main,
-          width: "1.25rem",
-          height: "1.25rem",
-          zIndex: 10,
-          display: "flex",
-          opacity: 1,
-          alignItems: "center",
-          justifyContent: "center",
-          borderRadius: "9999px",
-          borderWidth: "1px",
-          borderStyle: "solid",
-          borderColor: "#FFFFFF",
-          color: "#FFFFFF",
-          fontSize: "0.75rem",
-          lineHeight: "1rem",
-          fontWeight: 400,
-          position: "absolute",
-          top: 0,
-          right: 0
+        style: {
+          zIndex: FLOATING_Z_INDEX,
+          ...floatingStyles
         },
-        children: isNumber(badgeContent) ? badgeContent > 9 ? "9+" : badgeContent : badgeContent
+        ref: setFloating,
+        children: /* @__PURE__ */ jsx(
+          Primitive,
+          {
+            sx: {
+              display: "flex",
+              color: contrast,
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: main,
+              fontSize: getTypographyVar("xs").fontSize,
+              lineHeight: 1,
+              padding: 2,
+              minWidth: 20,
+              minHeight: 20,
+              borderRadius: 9999
+            },
+            children: content
+          }
+        )
       }
-    ),
-    children
+    ) })
   ] });
 };
 export {

package/dist/lib/badge/types.d.ts

@@ -1,7 +1,12 @@
-import { JSX } from 'react';
-import { ColorVariant, ShallowMerge } from '../../types';
-export type BadgeProps = ShallowMerge<JSX.IntrinsicElements['div'], {
-    badgeContent?: number | string;
+import { ReactElement, Ref } from 'react';
+import { ColorVariant } from '../../types';
+export type BadgeProps<T extends {
+    ref?: Ref<Element>;
+} = {
+    ref?: Ref<Element>;
+}> = {
+    content?: number | string;
     color?: ColorVariant;
-}>;
+    children: ReactElement<T>;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/badge/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,MAAM,UAAU,GAAG,YAAY,CACnC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B;IACE,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB,CACF,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CAAE,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CAAE,IAAI;IAClF,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;CAC3B,CAAC"}

package/dist/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swiper-side-arrows-paging.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,2BAA2B,EAAE,qCAAqC,EAAE,MAAM,SAAS,CAAC;AAC7F,OAAO,EAA8B,SAAS,EAAqB,MAAM,SAAS,CAAC;AAQnF,eAAO,MAAM,sBAAsB,oFAWhC,2BAA2B,4CA4L7B,CAAC;AA2IF,eAAO,MAAM,mBAAmB,kBAE7B,IAAI,CAAC,qCAAqC,EAAE,SAAS,CAAC,KAAQ,SAMhE,CAAC"}
+{"version":3,"file":"swiper-side-arrows-paging.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,2BAA2B,EAAE,qCAAqC,EAAE,MAAM,SAAS,CAAC;AAC7F,OAAO,EAA8B,SAAS,EAAqB,MAAM,SAAS,CAAC;AAQnF,eAAO,MAAM,sBAAsB,oFAWhC,2BAA2B,4CA0L7B,CAAC;AA2IF,eAAO,MAAM,mBAAmB,kBAE7B,IAAI,CAAC,qCAAqC,EAAE,SAAS,CAAC,KAAQ,SAMhE,CAAC"}

package/dist/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.js

@@ -19,8 +19,8 @@ const SwiperSideArrowsPaging = ({
   md,
   lg
 }) => {
-  const [canScrollPrev, setCanScrollPrev] = useState(false);
-  const [canScrollNext, setCanScrollNext] = useState(false);
+  const [canScrollPrev, setCanScrollPrev] = useState(api.canScrollPrev());
+  const [canScrollNext, setCanScrollNext] = useState(api.canScrollNext());
   const [isVisible, setIsVisible] = useState(visibility === "always");
   const [referenceStyle, setReferenceStyle] = useState(anchorSelector ? {} : { top: 0, bottom: 0 });
   const hoverStateRef = useRef({ root: false, floating: false });
@@ -57,16 +57,15 @@ const SwiperSideArrowsPaging = ({
       setCanScrollPrev(emblaApi.canScrollPrev());
       setCanScrollNext(emblaApi.canScrollNext());
     };
-    if (api) {
-      updateScrollState(api);
-    }
-    api == null ? void 0 : api.on("select", updateScrollState);
+    api.on("select", updateScrollState);
+    api.on("slidesChanged", updateScrollState);
     return () => {
-      api == null ? void 0 : api.off("select", updateScrollState);
+      api.off("select", updateScrollState);
+      api.off("slidesChanged", updateScrollState);
     };
   }, [api]);
   useEffect(() => {
-    if (visibility === "always" || !api) return;
+    if (visibility === "always") return;
     const rootNode = api == null ? void 0 : api.rootNode();
     const onRootEnter = () => {
       hoverStateRef.current.root = true;
@@ -84,7 +83,7 @@ const SwiperSideArrowsPaging = ({
     };
   }, [api, updateVisibility, visibility]);
   useEffect(() => {
-    if (!anchorSelector || !api) return;
+    if (!anchorSelector) return;
     const rootNode = api.rootNode();
     const update = () => {
       const anchorEl2 = rootNode.querySelector(anchorSelector);
@@ -109,9 +108,9 @@ const SwiperSideArrowsPaging = ({
   const onButtonClick = (e) => {
     const direction = e.currentTarget.dataset.direction;
     if (direction === "next") {
-      api == null ? void 0 : api.scrollNext();
+      api.scrollNext();
     } else {
-      api == null ? void 0 : api.scrollPrev();
+      api.scrollPrev();
     }
   };
   const onFloatingMouseEnter = (_e) => {

package/dist/utils/index.d.ts

@@ -15,6 +15,7 @@ export declare const getColorShadesByVariant: (variant?: ColorVariant) => {
     disabledText: string;
     ariaDisabledSurface: string;
     ariaDisabledText: string;
+    contrast: string;
 } | {
     main?: undefined;
     contrastText?: undefined;
@@ -25,6 +26,7 @@ export declare const getColorShadesByVariant: (variant?: ColorVariant) => {
     disabledText?: undefined;
     ariaDisabledSurface?: undefined;
     ariaDisabledText?: undefined;
+    contrast?: undefined;
 };
 export declare const mergeComponentProps: <T extends object>(...args: Array<T | object | ((current: T) => T | object)>) => T;
 export declare const flattenChildren: (children: React.ReactNode) => ReactElement[];

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyD,YAAY,EAAE,MAAM,OAAO,CAAC;AAI5F,OAAO,EAAe,MAAM,EAAqB,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAcrD,eAAO,MAAM,uBAAuB,aAAc,YAAY;;;;;;;;;;;;;;;;;;;;CAyF7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,CAAC,MAiB9G,CAAC;AAEF,eAAO,MAAM,eAAe,aAAc,KAAK,CAAC,SAAS,KAAG,YAAY,EAYvE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,qBAAqB,CAAC;CACpC,CAAC,CAAC;AAEH,eAAO,MAAM,mBAAmB,UAAW,WAAW,KAAG,gBAiCxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,2BAC/D,iBAAiB,CAAC,CAAC,CAAC,SACrB,CAAC,UACA,MAAM,YACJ;IACR,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;CACpC,KACA,CAgBF,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,GAAG;IAC3D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,uBAAuB,mBAAmB,WASnF,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,GAAG;IACnF,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,MAAM,uBAAuB,kBAAkB,WAWjF,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,GAAG;IAC/D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,IAAI,GAAG,MAAM,GAAG,MAAM,uBAAuB,qBAAqB,WAyBvG,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyD,YAAY,EAAE,MAAM,OAAO,CAAC;AAI5F,OAAO,EAAe,MAAM,EAAqB,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAerD,eAAO,MAAM,uBAAuB,aAAc,YAAY;;;;;;;;;;;;;;;;;;;;;;CAgG7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,CAAC,MAiB9G,CAAC;AAEF,eAAO,MAAM,eAAe,aAAc,KAAK,CAAC,SAAS,KAAG,YAAY,EAYvE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,qBAAqB,CAAC;CACpC,CAAC,CAAC;AAEH,eAAO,MAAM,mBAAmB,UAAW,WAAW,KAAG,gBAiCxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,2BAC/D,iBAAiB,CAAC,CAAC,CAAC,SACrB,CAAC,UACA,MAAM,YACJ;IACR,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;CACpC,KACA,CAgBF,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,GAAG;IAC3D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,uBAAuB,mBAAmB,WASnF,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,GAAG;IACnF,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,MAAM,uBAAuB,kBAAkB,WAWjF,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,GAAG;IAC/D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,IAAI,GAAG,MAAM,GAAG,MAAM,uBAAuB,qBAAqB,WAyBvG,CAAC"}

package/dist/utils/index.js

@@ -17,7 +17,8 @@ const getColorShadesByVariant = (variant) => {
         disabledSurface: getColorVar("primary.300"),
         disabledText: getColorVar("primary.500"),
         ariaDisabledSurface: getColorVar("primary.300"),
-        ariaDisabledText: getColorVar("primary.300")
+        ariaDisabledText: getColorVar("primary.300"),
+        contrast: getColorVar("white")
       };
     case "secondary":
       return {
@@ -29,7 +30,8 @@ const getColorShadesByVariant = (variant) => {
         disabledSurface: getColorVar("secondary.300"),
         disabledText: getColorVar("secondary.500"),
         ariaDisabledSurface: getColorVar("secondary.300"),
-        ariaDisabledText: getColorVar("secondary.300")
+        ariaDisabledText: getColorVar("secondary.300"),
+        contrast: getColorVar("white")
       };
     case "green":
       return {
@@ -41,7 +43,8 @@ const getColorShadesByVariant = (variant) => {
         disabledSurface: getColorVar("green.300"),
         disabledText: getColorVar("green.500"),
         ariaDisabledSurface: getColorVar("green.300"),
-        ariaDisabledText: getColorVar("green.300")
+        ariaDisabledText: getColorVar("green.300"),
+        contrast: getColorVar("white")
       };
     case "orange":
       return {
@@ -53,7 +56,8 @@ const getColorShadesByVariant = (variant) => {
         disabledSurface: getColorVar("orange.300"),
         disabledText: getColorVar("orange.500"),
         ariaDisabledSurface: getColorVar("orange.300"),
-        ariaDisabledText: getColorVar("orange.300")
+        ariaDisabledText: getColorVar("orange.300"),
+        contrast: getColorVar("white")
       };
     case "red":
       return {
@@ -65,7 +69,8 @@ const getColorShadesByVariant = (variant) => {
         disabledSurface: getColorVar("red.300"),
         disabledText: getColorVar("red.500"),
         ariaDisabledSurface: getColorVar("red.300"),
-        ariaDisabledText: getColorVar("red.300")
+        ariaDisabledText: getColorVar("red.300"),
+        contrast: getColorVar("white")
       };
     case "blue":
       return {
@@ -77,7 +82,8 @@ const getColorShadesByVariant = (variant) => {
         disabledSurface: getColorVar("blue.300"),
         disabledText: getColorVar("blue.500"),
         ariaDisabledSurface: getColorVar("blue.300"),
-        ariaDisabledText: getColorVar("blue.300")
+        ariaDisabledText: getColorVar("blue.300"),
+        contrast: getColorVar("white")
       };
     case "neutral":
       return {
@@ -89,7 +95,8 @@ const getColorShadesByVariant = (variant) => {
         disabledSurface: getColorVar("neutral.300"),
         disabledText: getColorVar("neutral.500"),
         ariaDisabledSurface: getColorVar("neutral.300"),
-        ariaDisabledText: getColorVar("neutral.300")
+        ariaDisabledText: getColorVar("neutral.300"),
+        contrast: getColorVar("white")
       };
     default:
       return {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "2.0.16",
+  "version": "2.0.17",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [