@janbox/storefront-ui 2.0.16 → 2.0.18

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, offset, 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,yCAAsD,UAAU,4CAgEjF,CAAC"}

package/dist/lib/badge/badge.js

@@ -1,39 +1,67 @@
-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, isNumber } 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, offset: offset$1 = 0, children }) => {
+  const { main, contrast } = getColorShadesByVariant(color);
+  const {
+    floatingStyles,
+    refs: { setFloating, setReference },
+    context
+  } = useFloating({
+    placement: "top-end",
+    middleware: [
+      offset(({ rects }) => {
+        const offsetX = isNumber(offset$1) ? offset$1 : offset$1.x ?? 0;
+        const offsetY = isNumber(offset$1) ? offset$1 : offset$1.y ?? 0;
+        return {
+          crossAxis: Math.round(rects.floating.width / 2) + offsetX,
+          mainAxis: -Math.round(rects.floating.height / 2) + offsetY
+        };
+      })
+    ],
+    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,17 @@
-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;
-}>;
+    offset?: number | {
+        x?: number;
+        y?: number;
+    };
+    offsetY?: number;
+    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,MAAM,CAAC,EACH,MAAM,GACN;QACE,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,CAAC,CAAC,EAAE,MAAM,CAAC;KACZ,CAAC;IACN,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,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/lib/tooltip/tooltip.d.ts

@@ -2,5 +2,5 @@ import { ReactNode } from 'react';
 import { TooltipOptions } from './types';
 export declare function Tooltip({ children, defaultOpen, placement, open, onOpenChange, content, contentWidth, enable, handleClose, arrowProps, }: {
     children: ReactNode;
-} & TooltipOptions): import("@emotion/react/jsx-runtime").JSX.Element;
+} & TooltipOptions): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=tooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAiB,SAAS,EAAwB,MAAM,OAAO,CAAC;AAuBvE,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAKzC,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,WAAmB,EACnB,SAAiB,EACjB,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,YAAY,EACZ,MAAa,EACb,WAAW,EACX,UAAU,GACX,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,cAAc,oDA2G1C"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAwB,MAAM,OAAO,CAAC;AAuBvE,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAMzC,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,WAAmB,EACnB,SAAiB,EACjB,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,YAAY,EACZ,MAAa,EACb,WAAW,EACX,UAAU,GACX,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,cAAc,2CA4G1C"}

package/dist/lib/tooltip/tooltip.js

@@ -1,10 +1,11 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useRef, cloneElement } from "react";
 import { useFloating, autoUpdate, offset, flip, shift, arrow, size, useHover, safePolygon, useFocus, useDismiss, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingArrow } from "@floating-ui/react";
 import { isUndefined, get } from "lodash-es";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
-import "../../theme/palette.js";
+import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
+import { Primitive } from "../primitive/primitive.js";
 function Tooltip({
   children,
   defaultOpen = false,
@@ -36,7 +37,6 @@ function Tooltip({
   };
   const { refs, floatingStyles, context } = useFloating({
     placement,
-    open: visible,
     onOpenChange: handleOpenChange,
     whileElementsMounted: autoUpdate,
     middleware: [
@@ -58,7 +58,8 @@ function Tooltip({
           Object.assign(elements.floating.style, styles);
         }
       })
-    ]
+    ],
+    open: visible
   });
   const hover = useHover(context, {
     move: false,
@@ -68,33 +69,31 @@ function Tooltip({
   const dismiss = useDismiss(context);
   const role = useRole(context, { role: "tooltip" });
   const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
-  const ref = useMergeRefs([refs.setReference, get(children, "ref"), triggerRef]);
-  return /* @__PURE__ */ jsxs("div", { children: [
+  const mergedRefs = useMergeRefs([refs.setReference, get(children, "ref"), triggerRef]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     cloneElement(
       children,
       getReferenceProps({
-        ref,
-        ...children == null ? void 0 : children.props,
-        "data-state": visible ? "open" : "closed"
+        ...children.props,
+        ref: mergedRefs
       })
     ),
-    /* @__PURE__ */ jsx(FloatingPortal, { children: visible && /* @__PURE__ */ jsxs(
-      "div",
+    context.open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs(
+      Primitive,
       {
         style: {
           ...floatingStyles
         },
         ref: refs.setFloating,
-        css: {
-          borderRadius: "0.5rem",
-          backgroundColor: "var(--color-neutral-600)",
-          paddingLeft: "0.75rem",
-          paddingRight: "0.75rem",
-          paddingTop: "0.5rem",
-          paddingBottom: "0.5rem",
+        sx: {
+          borderRadius: 8,
+          backgroundColor: getColorVar("neutral.600"),
+          paddingLeft: 12,
+          paddingRight: 12,
+          paddingTop: 8,
+          paddingBottom: 8,
           fontSize: getTypographyVar("sm").fontSize,
           lineHeight: getTypographyVar("sm").lineHeight,
-          fontWeight: 400,
           color: "white"
         },
         ...getFloatingProps(),
@@ -104,7 +103,10 @@ function Tooltip({
             FloatingArrow,
             {
               ...arrowProps,
-              css: { fill: "var(--color-neutral-600)" },
+              style: {
+                ...arrowProps == null ? void 0 : arrowProps.style,
+                fill: getColorVar("neutral.600")
+              },
               ref: arrowRef,
               context
             }

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

@@ -1,6 +1,10 @@
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode, Ref } from 'react';
 import { Placement, UseFloatingOptions, UseHoverProps, FloatingArrowProps } from '@floating-ui/react';
-export type TooltipOptions = {
+export type TooltipOptions<T extends {
+    ref?: Ref<Element>;
+} = {
+    ref?: Ref<Element>;
+}> = {
     defaultOpen?: boolean;
     placement?: Placement;
     open?: boolean;
@@ -11,5 +15,6 @@ export type TooltipOptions = {
     enable?: true | 'truncated';
     handleClose?: UseHoverProps['handleClose'] | 'safe-polygon';
     arrowProps?: Partial<FloatingArrowProps>;
+    children: ReactElement<T>;
 };
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEtG,MAAM,MAAM,cAAc,GAAG;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IACrC,MAAM,CAAC,EAAE,IAAI,GAAG,WAAW,CAAC;IAC5B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,GAAG,cAAc,CAAC;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CAC1C,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEtG,MAAM,MAAM,cAAc,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;IACtF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IACrC,MAAM,CAAC,EAAE,IAAI,GAAG,WAAW,CAAC;IAC5B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,GAAG,cAAc,CAAC;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACzC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;CAC3B,CAAC"}

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.18",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [