@janbox/storefront-ui 2.0.19 → 2.0.20

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,yCAAsD,UAAU,4CAgEjF,CAAC"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/lib/badge/badge.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAOrC,eAAO,MAAM,KAAK,yCAAsD,UAAU,4CAkEjF,CAAC"}

package/dist/lib/badge/badge.js

@@ -1,12 +1,13 @@
 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 { useFloating, autoUpdate, offset, hide, 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, offset: offset$1 = 0, children }) => {
+  var _a;
   const { main, contrast } = getColorShadesByVariant(color);
   const {
     floatingStyles,
@@ -22,7 +23,8 @@ const Badge = ({ color = "red", content, offset: offset$1 = 0, children }) => {
           crossAxis: Math.round(rects.floating.width / 2) + offsetX,
           mainAxis: -Math.round(rects.floating.height / 2) + offsetY
         };
-      })
+      }),
+      hide({ strategy: "referenceHidden" })
     ],
     whileElementsMounted: autoUpdate,
     open: !isNil(content)
@@ -38,7 +40,8 @@ const Badge = ({ color = "red", content, offset: offset$1 = 0, children }) => {
       {
         style: {
           zIndex: FLOATING_Z_INDEX,
-          ...floatingStyles
+          ...floatingStyles,
+          visibility: ((_a = context.middlewareData.hide) == null ? void 0 : _a.referenceHidden) ? "hidden" : "visible"
         },
         ref: setFloating,
         children: /* @__PURE__ */ jsx(

package/dist/lib/box/box.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../src/lib/box/box.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAMnC,eAAO,MAAM,GAAG,iCAAkC,QAAQ,qDA0BzD,CAAC"}
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../src/lib/box/box.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAMnC,eAAO,MAAM,GAAG,iCAAkC,QAAQ,4CAyBzD,CAAC"}

package/dist/lib/box/box.js

@@ -1,39 +1,40 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { getBoxProps } from "./helpers.js";
 import { containerStyle } from "../../constants/emotion.js";
-import { mediaQuery } from "../../theme/screens.js";
-import "../../theme/palette.js";
+import { Primitive } from "../primitive/primitive.js";
 const Box = ({ children, ref, ..._props }) => {
   const { sx = {}, container, ...rest } = getBoxProps(_props);
-  const { sm: sxSm, md: sxMd, lg: sxLg, ...sxXs } = sx;
-  const css = [
-    container && containerStyle,
-    createStyle(sxXs),
+  return /* @__PURE__ */ jsx(
+    Primitive,
     {
-      [mediaQuery("sm")]: createStyle(sxSm),
-      [mediaQuery("md")]: createStyle(sxMd),
-      [mediaQuery("lg")]: createStyle(sxLg)
-    }
-  ];
-  return /* @__PURE__ */ jsx("div", { css, ...rest, ref, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      css: {
-        width: "100%",
-        height: "100%"
+      ...rest,
+      sx: {
+        ...container ? containerStyle : {},
+        ...createStyle(sx),
+        sm: createStyle(sx.sm),
+        md: createStyle(sx.md),
+        lg: createStyle(sx.lg)
       },
-      children
+      ref,
+      children: /* @__PURE__ */ jsx(
+        Primitive,
+        {
+          sx: {
+            width: "100%",
+            height: "100%"
+          },
+          children
+        }
+      )
     }
-  ) });
+  );
 };
 const createStyle = ({ width, height, ...css } = {}) => {
-  return [
-    {
-      width,
-      height,
-      "& > *": css
-    }
-  ];
+  return {
+    width,
+    height,
+    "& > *": css
+  };
 };
 export {
   Box

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

@@ -1,8 +1,8 @@
 import { JSX } from 'react';
-import { PropsWithSx } from '../../types';
+import { PrimitiveProps } from '../primitive';
 type BoxExtendedProps = {
     container?: boolean;
 };
-export type BoxProps = PropsWithSx<JSX.IntrinsicElements['div'] & BoxExtendedProps>;
+export type BoxProps = PrimitiveProps<JSX.IntrinsicElements['div']> & BoxExtendedProps;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/box/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/box/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,GAAG,gBAAgB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/lib/notifications/notifications.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,aAAa,wDAgCzB,CAAC"}
+{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/lib/notifications/notifications.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,aAAa,wDAgCzB,CAAC"}

package/dist/lib/notifications/notifications.js

@@ -6,8 +6,11 @@ import { AnimatePresence, useAnimation, motion } from "motion/react";
 import { notificationStore } from "./helpers.js";
 import { getColorShadesByVariant } from "../../utils/index.js";
 import { FLOATING_Z_INDEX } from "../../theme/index.js";
-import { mediaQuery } from "../../theme/screens.js";
+import CloseIcon from "../../assets/svg/times-close-delete.svg.js";
+import { Primitive } from "../primitive/primitive.js";
 import { getTypographyVar } from "../../theme/typography.js";
+import { IconButton } from "../icon-button/icon-button.js";
+import { mediaQuery } from "../../theme/screens.js";
 const Notifications = () => {
   const { entries } = useSyncExternalStore(
     notificationStore.subscribe,
@@ -15,9 +18,9 @@ const Notifications = () => {
     notificationStore.getServerSnapshot
   );
   return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
-    "div",
+    Primitive,
     {
-      css: {
+      sx: {
         zIndex: FLOATING_Z_INDEX + 1,
         position: "fixed",
         top: 0,
@@ -105,7 +108,7 @@ const Notification = ({ notification }) => {
       css: {
         backgroundColor: light,
         outlineColor: main,
-        width: 440,
+        width: 400,
         borderRadius: 12,
         outlineWidth: 1,
         outlineOffset: -1,
@@ -116,9 +119,13 @@ const Notification = ({ notification }) => {
         maxWidth: "100%",
         pointerEvents: "auto",
         cursor: "grab",
-        padding: 16,
+        padding: 12,
         overflow: "hidden",
-        position: "relative"
+        position: "relative",
+        [mediaQuery("md")]: {
+          padding: 16,
+          width: 440
+        }
       },
       drag: "x",
       dragConstraints: { left: 0, right: 0 },
@@ -132,28 +139,54 @@ const Notification = ({ notification }) => {
         }
       },
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
+        /* @__PURE__ */ jsxs(
+          Primitive,
           {
-            css: {
-              fontSize: getTypographyVar("sm").fontSize,
-              lineHeight: getTypographyVar("sm").lineHeight,
-              fontWeight: 500,
-              [mediaQuery("md")]: {
-                fontSize: getTypographyVar("base").fontSize,
-                lineHeight: getTypographyVar("base").lineHeight
-              }
+            sx: {
+              display: "flex",
+              alignItems: "flex-start",
+              gap: 8
             },
-            children: notification.title ?? /* @__PURE__ */ jsx(Fragment, { children: " " })
+            children: [
+              /* @__PURE__ */ jsx(
+                Primitive,
+                {
+                  sx: {
+                    flex: 1,
+                    minWidth: 0,
+                    fontSize: getTypographyVar("sm").fontSize,
+                    lineHeight: getTypographyVar("sm").lineHeight,
+                    fontWeight: 500,
+                    md: {
+                      fontSize: getTypographyVar("base").fontSize,
+                      lineHeight: getTypographyVar("base").lineHeight
+                    }
+                  },
+                  children: notification.title ?? /* @__PURE__ */ jsx(Fragment, { children: " " })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "xs",
+                  color: "neutral",
+                  icon: { source: CloseIcon },
+                  onClick: removeNotification,
+                  sx: {
+                    flexShrink: 0
+                  }
+                }
+              )
+            ]
           }
         ),
         /* @__PURE__ */ jsx(
-          "div",
+          Primitive,
           {
-            css: {
+            sx: {
               fontSize: getTypographyVar("xs").fontSize,
               lineHeight: getTypographyVar("xs").lineHeight,
-              [mediaQuery("md")]: {
+              md: {
                 fontSize: getTypographyVar("sm").fontSize,
                 lineHeight: getTypographyVar("sm").lineHeight
               }
@@ -162,9 +195,9 @@ const Notification = ({ notification }) => {
           }
         ),
         /* @__PURE__ */ jsx(
-          "div",
+          Primitive,
           {
-            css: {
+            sx: {
               position: "absolute",
               left: 0,
               right: 0,
@@ -177,15 +210,13 @@ const Notification = ({ notification }) => {
             children: /* @__PURE__ */ jsx(
               motion.div,
               {
-                css: {
+                style: {
+                  backgroundImage: `linear-gradient(to right, ${light}, ${main})`,
+                  transformOrigin: "left",
                   height: 4,
                   width: "100%",
                   borderRadius: 9999
                 },
-                style: {
-                  backgroundImage: `linear-gradient(to right, ${light}, ${main})`,
-                  transformOrigin: "left"
-                },
                 initial: { scaleX: 0 },
                 animate: progressControls
               }

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

@@ -1,6 +1,3 @@
-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("react/jsx-runtime").JSX.Element;
+import { TooltipProps } from './types';
+export declare function Tooltip({ children, defaultOpen, placement, open, onOpenChange, content, contentWidth, enable, handleClose, arrowProps, }: TooltipProps): 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,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"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/tooltip/tooltip.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAMvC,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,YAAY,2CA4Gd"}

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

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode, Ref } from 'react';
 import { Placement, UseFloatingOptions, UseHoverProps, FloatingArrowProps } from '@floating-ui/react';
-export type TooltipOptions<T extends {
+export type TooltipProps<T extends {
     ref?: Ref<Element>;
 } = {
     ref?: Ref<Element>;

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,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"}
+{"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,YAAY,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;IACpF,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.19",
+  "version": "2.0.20",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [