@janbox/storefront-ui 2.0.27 → 2.0.29

package/dist/hooks/index.d.ts

@@ -1,5 +1,4 @@
 export * from './use-window-screen';
-export * from './use-ripple-effect';
 export * from './use-controllable-state';
 export * from './use-countdown-timer';
 export * from './use-query-params';

package/dist/hooks/index.js

@@ -1,5 +1,4 @@
 import { useWindowScreen } from "./use-window-screen/index.js";
-import { useRippleEffect } from "./use-ripple-effect/index.js";
 import { useControllableState } from "./use-controllable-state.js";
 import { useCountdownTimer } from "./use-countdown-timer.js";
 import { useQueryParams } from "./use-query-params.js";
@@ -14,7 +13,6 @@ export {
   useFirstMountState,
   useFormatter,
   useQueryParams,
-  useRippleEffect,
   useUpdateEffect,
   useWindowScreen
 };

package/dist/index.js

@@ -77,6 +77,7 @@ import { PriceLabel } from "./lib/price-label/price-label.js";
 import { Primitive } from "./lib/primitive/primitive.js";
 import { Progress } from "./lib/progress/progress.js";
 import { RadioButton } from "./lib/radio-button/radio-button.js";
+import { RippleEffect } from "./lib/ripple-effect/ripple-effect.js";
 import { Select } from "./lib/select/select.js";
 import { StarRating } from "./lib/star-rating/star-rating.js";
 import { Step } from "./lib/stepper/step.js";
@@ -223,6 +224,7 @@ export {
   Primitive,
   Progress,
   RadioButton,
+  RippleEffect,
   Select,
   StarRating,
   Step,

package/dist/lib/box/box.js

@@ -10,32 +10,16 @@ const Box = ({ children, ref, ..._props }) => {
       ...rest,
       sx: {
         ...container ? containerStyle : {},
-        ...createStyle(sx),
-        sm: createStyle(sx.sm),
-        md: createStyle(sx.md),
-        lg: createStyle(sx.lg)
+        ...sx,
+        sm: { ...sx.sm },
+        md: { ...sx.md },
+        lg: { ...sx.lg }
       },
       ref,
-      children: /* @__PURE__ */ jsx(
-        Primitive,
-        {
-          sx: {
-            width: "100%",
-            height: "100%"
-          },
-          children
-        }
-      )
+      children
     }
   );
 };
-const createStyle = ({ width, height, ...css } = {}) => {
-  return {
-    width,
-    height,
-    "& > *": css
-  };
-};
 export {
   Box
 };

package/dist/lib/button/button.js

@@ -4,19 +4,17 @@ import { useMergeRefs } from "@floating-ui/react";
 import { isNil, isString } from "lodash-es";
 import { useNavigate, createPath } from "react-router";
 import { getButtonProps, getButtonCssBySize } from "./helpers.js";
-import { useRippleEffect } from "../../hooks/use-ripple-effect/index.js";
 import { truncateStyle, animateSpinStyle } from "../../constants/emotion.js";
 import LoadingIcon from "../../assets/svg/loading-waiting.svg.js";
 import { mediaQuery } from "../../theme/screens.js";
 import { getColorVar } from "../../theme/palette.js";
 import { getColorShadesByVariant, getSizeVariantState } from "../../utils/index.js";
 import { createSxInterpolation } from "../../utils/stylesheet.js";
-import { clsx } from "clsx";
+import { RippleEffect } from "../ripple-effect/ripple-effect.js";
 import { Icon } from "../icon/icon.js";
 import { Primitive } from "../primitive/primitive.js";
 const Button = ({ children, ref, ..._props }) => {
   const buttonRef = useRef(null);
-  const { className } = useRippleEffect(buttonRef);
   const mergedRef = useMergeRefs([ref, buttonRef]);
   const {
     color,
@@ -52,6 +50,7 @@ const Button = ({ children, ref, ..._props }) => {
       maxWidth: "100%",
       width: "fit-content",
       position: "relative",
+      overflow: "hidden",
       justifyContent: "center",
       alignItems: "center",
       whiteSpace: "nowrap",
@@ -142,83 +141,73 @@ const Button = ({ children, ref, ..._props }) => {
       }
     }
   };
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      css,
-      disabled,
-      ...rest,
-      onClick,
-      className: clsx(rest.className, className),
-      ref: mergedRef,
-      children: [
-        prefix,
-        !!startIcon && /* @__PURE__ */ jsx(
-          Icon,
-          {
-            size: getSizeVariantState(size).iconSize,
-            ...startIcon,
-            sx: {
-              flexShrink: 0,
-              ...startIcon.sx
-            },
-            sm: {
-              size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
-              ...startIcon.sm
-            },
-            md: {
-              size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
-              ...startIcon.md
-            },
-            lg: {
-              size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
-              ...startIcon.lg
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(Fragment, { children: isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML, css: truncateStyle, children }) }),
-        !!endIcon && /* @__PURE__ */ jsx(
-          Icon,
-          {
-            size: getSizeVariantState(size).iconSize,
-            ...endIcon,
-            sx: {
-              flexShrink: 0,
-              ...endIcon.sx
-            },
-            sm: {
-              size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
-              ...endIcon.sm
-            },
-            md: {
-              size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
-              ...endIcon.md
-            },
-            lg: {
-              size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
-              ...endIcon.lg
-            }
-          }
-        ),
-        suffix,
-        isLoading && /* @__PURE__ */ jsx(
-          Primitive,
-          {
-            "data-loading": true,
-            sx: {
-              position: "absolute",
-              inset: 0,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            as: "span",
-            children: /* @__PURE__ */ jsx(Icon, { css: animateSpinStyle, source: LoadingIcon })
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("button", { css, disabled, ...rest, onClick, ref: mergedRef, children: [
+    prefix,
+    !!startIcon && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        size: getSizeVariantState(size).iconSize,
+        ...startIcon,
+        sx: {
+          flexShrink: 0,
+          ...startIcon.sx
+        },
+        sm: {
+          size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+          ...startIcon.sm
+        },
+        md: {
+          size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+          ...startIcon.md
+        },
+        lg: {
+          size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+          ...startIcon.lg
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Fragment, { children: isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML, css: truncateStyle, children }) }),
+    !!endIcon && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        size: getSizeVariantState(size).iconSize,
+        ...endIcon,
+        sx: {
+          flexShrink: 0,
+          ...endIcon.sx
+        },
+        sm: {
+          size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+          ...endIcon.sm
+        },
+        md: {
+          size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+          ...endIcon.md
+        },
+        lg: {
+          size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+          ...endIcon.lg
+        }
+      }
+    ),
+    suffix,
+    isLoading && /* @__PURE__ */ jsx(
+      Primitive,
+      {
+        "data-loading": true,
+        sx: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        as: "span",
+        children: /* @__PURE__ */ jsx(Icon, { css: animateSpinStyle, source: LoadingIcon })
+      }
+    ),
+    /* @__PURE__ */ jsx(RippleEffect, {})
+  ] });
 };
 const createStyle = ({ size } = {}) => {
   return [getButtonCssBySize(size)];

package/dist/lib/flexbox/flexbox/flexbox.d.ts

@@ -1,2 +1,2 @@
 import { FlexboxProps } from './types';
-export declare const Flexbox: ({ children, container, ref, ..._props }: FlexboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Flexbox: ({ children, container, ref, ..._props }: FlexboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/flexbox/flexbox/flexbox.js

@@ -1,29 +1,25 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { getFlexboxProps } from "./helpers.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
 import { containerStyle } from "../../../constants/emotion.js";
+import { Primitive } from "../../primitive/primitive.js";
 const Flexbox = ({ children, container, ref, ..._props }) => {
   const { sx = {}, ...rest } = getFlexboxProps(_props);
-  const { sm, md, lg, ...restSx } = sx;
-  const css = [
-    container && containerStyle,
-    createStyle(restSx),
+  return /* @__PURE__ */ jsx(
+    Primitive,
     {
-      [mediaQuery("sm")]: createStyle(sm),
-      [mediaQuery("md")]: createStyle(md),
-      [mediaQuery("lg")]: createStyle(lg)
+      ...rest,
+      sx: {
+        display: "flex",
+        ...container ? containerStyle : {},
+        ...sx,
+        sm: { ...sx.sm },
+        md: { ...sx.md },
+        lg: { ...sx.lg }
+      },
+      ref,
+      children
     }
-  ];
-  return /* @__PURE__ */ jsx("div", { css, ...rest, ref, children: /* @__PURE__ */ jsx("div", { css: { display: "flex", width: "100%", height: "100%" }, children }) });
-};
-const createStyle = (sx = {}) => {
-  const { width, height, ...css } = sx;
-  return {
-    width,
-    height,
-    "& > *": css
-  };
+  );
 };
 export {
   Flexbox

package/dist/lib/grid/grid/grid.d.ts

@@ -1,4 +1,4 @@
 import { GridProps } from './types';
 export declare const GRID_MINIMUM_COLS = 1;
 export declare const GRID_MAXIMUM_COLS = 24;
-export declare const Grid: ({ children, ref, ..._props }: GridProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Grid: ({ children, ref, ..._props }: GridProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/grid/grid/grid.js

@@ -1,38 +1,33 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { isNil } from "lodash-es";
 import { getGridProps } from "./helpers.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
 import { containerStyle } from "../../../constants/emotion.js";
+import { Primitive } from "../../primitive/primitive.js";
 const GRID_MINIMUM_COLS = 1;
 const GRID_MAXIMUM_COLS = 24;
 const Grid = ({ children, ref, ..._props }) => {
   const { cols, sm, md, lg, container, sx = {}, ...rest } = getGridProps(_props);
-  const { sm: sxSm, md: sxMd, lg: sxLg, ...sxXs } = sx;
-  const css = [
-    container && containerStyle,
-    createStyle({ cols }, sxXs),
+  return /* @__PURE__ */ jsx(
+    Primitive,
     {
-      [mediaQuery("sm")]: createStyle(sm, sxSm),
-      [mediaQuery("md")]: createStyle(md, sxMd),
-      [mediaQuery("lg")]: createStyle(lg, sxLg)
+      sx: {
+        display: "grid",
+        ...container ? containerStyle : {},
+        ...createStyle({ cols }),
+        ...sx,
+        sm: { ...createStyle(sm), ...sx.sm },
+        md: { ...createStyle(md), ...sx.md },
+        lg: { ...createStyle(lg), ...sx.lg }
+      },
+      ...rest,
+      ref,
+      children
     }
-  ];
-  return /* @__PURE__ */ jsx("div", { css, ...rest, ref, children: /* @__PURE__ */ jsx("div", { css: { display: "grid", width: "100%", height: "100%" }, children }) });
-};
-const createStyle = ({ cols } = {}, sx = {}) => {
-  const { width, height, ...css } = sx;
-  return [
-    {
-      width,
-      height,
-      "& > *": {
-        gridTemplateColumns: isNil(cols) ? void 0 : `repeat(${cols}, minmax(0, 1fr))`,
-        ...css
-      }
-    }
-  ];
+  );
 };
+const createStyle = ({ cols } = {}) => ({
+  gridTemplateColumns: isNil(cols) ? void 0 : `repeat(${cols}, minmax(0, 1fr))`
+});
 export {
   GRID_MAXIMUM_COLS,
   GRID_MINIMUM_COLS,

package/dist/lib/icon-button/icon-button.js

@@ -1,17 +1,14 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { useRef } from "react";
-import { useMergeRefs } from "@floating-ui/react";
 import { getIconButtonProps } from "./helpers.js";
-import { useRippleEffect } from "../../hooks/use-ripple-effect/index.js";
 import { createSxInterpolation } from "../../utils/stylesheet.js";
 import LoadingIcon from "../../assets/svg/loading-waiting.svg.js";
 import { mediaQuery } from "../../theme/screens.js";
 import { getColorVar } from "../../theme/palette.js";
 import { getColorShadesByVariant, getSizeVariantState } from "../../utils/index.js";
 import { animateSpinStyle } from "../../constants/emotion.js";
-import clsx from "clsx";
 import { ensureBoolean } from "../../utils/common.js";
 import { Icon } from "../icon/icon.js";
+import { RippleEffect } from "../ripple-effect/ripple-effect.js";
 const IconButton = ({ children, ref, ..._props }) => {
   const { size, color, variant, icon, isLoading, sx, sm, md, lg, ...rest } = getIconButtonProps(_props);
   const {
@@ -23,15 +20,13 @@ const IconButton = ({ children, ref, ..._props }) => {
     ariaDisabledSurface,
     ariaDisabledText
   } = getColorShadesByVariant(color);
-  const buttonRef = useRef(null);
-  const { className } = useRippleEffect(buttonRef);
-  const mergedRef = useMergeRefs([ref, buttonRef]);
   const css = [
     {
       display: "flex",
       width: "fit-content",
       height: "fit-content",
       position: "relative",
+      overflow: "hidden",
       justifyContent: "center",
       alignItems: "center",
       pointerEvents: ensureBoolean(rest["aria-disabled"]) ? "none" : void 0,
@@ -102,7 +97,7 @@ const IconButton = ({ children, ref, ..._props }) => {
     var _a;
     (_a = rest.onClick) == null ? void 0 : _a.call(rest, e);
   };
-  return /* @__PURE__ */ jsxs("button", { css, ...rest, className: clsx(rest.className, className), onClick, ref: mergedRef, children: [
+  return /* @__PURE__ */ jsxs("button", { css, ...rest, onClick, ref, children: [
     !!icon && /* @__PURE__ */ jsx(
       Icon,
       {
@@ -130,7 +125,8 @@ const IconButton = ({ children, ref, ..._props }) => {
         css: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" },
         children: /* @__PURE__ */ jsx(Icon, { css: animateSpinStyle, source: LoadingIcon })
       }
-    )
+    ),
+    /* @__PURE__ */ jsx(RippleEffect, {})
   ] });
 };
 const createStyle = ({ size } = {}) => {

package/dist/lib/index.d.ts

@@ -60,3 +60,4 @@ export * from './primitive';
 export * from './price-label';
 export * from './avatar';
 export * from './suspense-query';
+export * from './ripple-effect';