@janbox/storefront-ui 2.0.17 → 2.0.18

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

@@ -1,3 +1,3 @@
 import { BadgeProps } from './types';
-export declare const Badge: ({ color, content, children }: BadgeProps) => import("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":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAOrC,eAAO,MAAM,KAAK,iCAA0C,UAAU,4CA2DrE,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,12 +1,12 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { isNil } from "lodash-es";
+import { isNil, isNumber } from "lodash-es";
 import { useFloating, autoUpdate, offset, useMergeRefs, FloatingPortal } from "@floating-ui/react";
 import { getColorShadesByVariant } from "../../utils/index.js";
 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 Badge = ({ color = "red", content, offset: offset$1 = 0, children }) => {
   const { main, contrast } = getColorShadesByVariant(color);
   const {
     floatingStyles,
@@ -15,10 +15,14 @@ const Badge = ({ color = "red", content, children }) => {
   } = useFloating({
     placement: "top-end",
     middleware: [
-      offset(({ rects }) => ({
-        crossAxis: Math.round(rects.floating.width / 2),
-        mainAxis: -Math.round(rects.floating.height / 2)
-      }))
+      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)

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

@@ -7,6 +7,11 @@ export type BadgeProps<T extends {
 }> = {
     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,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"}
+{"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/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/package.json

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