@janbox/storefront-ui 2.0.27 → 2.0.28

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/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/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';

package/dist/lib/input/input.js

@@ -3,13 +3,11 @@ import { useRef, useState } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { isString } from "lodash-es";
 import { getInputProps } from "./helpers.js";
-import classes from "./input.module.scss.js";
 import EyeHidden from "../../assets/svg/eye-hidden.svg.js";
 import EyeVisible from "../../assets/svg/eye-show-visible.svg.js";
 import { getSizeVariantState } from "../../utils/index.js";
-import "../../theme/palette.js";
+import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
-import { clsx } from "clsx";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
 import { Primitive } from "../primitive/primitive.js";
 import { Icon } from "../icon/icon.js";
@@ -25,7 +23,6 @@ const Input = ({ ref, ..._props }) => {
     suffix,
     containerProps,
     mainProps,
-    className,
     helperText,
     error,
     startIcon,
@@ -91,113 +88,170 @@ const Input = ({ ref, ..._props }) => {
     e.stopPropagation();
     setShowPassword((prev) => !prev);
   };
-  return /* @__PURE__ */ jsxs(Primitive, { className: clsx(classes.input__container, containerProps == null ? void 0 : containerProps.className), children: [
-    /* @__PURE__ */ jsxs(
-      Primitive,
-      {
-        ...mainProps,
-        className: clsx(
-          classes.input__main,
+  return /* @__PURE__ */ jsxs(
+    Primitive,
+    {
+      ...containerProps,
+      sx: {
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        ...containerProps == null ? void 0 : containerProps.sx
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Primitive,
           {
-            [classes.input__main_error]: error
-          },
-          mainProps == null ? void 0 : mainProps.className
-        ),
-        sx: {
-          ...createStyle({ size }),
-          ...mainProps == null ? void 0 : mainProps.sx,
-          sm: {
-            ...createStyle(sm),
-            ...(_a = mainProps == null ? void 0 : mainProps.sx) == null ? void 0 : _a.sm
-          },
-          md: {
-            ...createStyle(md),
-            ...(_b = mainProps == null ? void 0 : mainProps.sx) == null ? void 0 : _b.md
-          },
-          lg: {
-            ...createStyle(lg),
-            ...(_c = mainProps == null ? void 0 : mainProps.sx) == null ? void 0 : _c.lg
-          }
-        },
-        children: [
-          prefix,
-          !!startIcon && /* @__PURE__ */ jsx(
-            Icon,
-            {
-              size: getSizeVariantState(size).iconSize,
-              ...startIcon,
-              sm: {
-                size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
-                ...startIcon.sm
+            ...mainProps,
+            sx: {
+              width: "100%",
+              display: "flex",
+              overflow: "hidden",
+              alignItems: "center",
+              gap: 8,
+              borderRadius: 8,
+              borderWidth: 1,
+              borderStyle: "solid",
+              backgroundColor: getColorVar("surface.default"),
+              "&:hover": {
+                borderColor: getColorVar("primary.300")
               },
-              md: {
-                size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
-                ...startIcon.md
+              "&:has(input:focus:not(:read-only))": {
+                borderColor: getColorVar("primary.600"),
+                boxShadow: `0 1px 3px 0 ${getColorVar("primary.300")}, 0 1px 2px -1px ${getColorVar("primary.300")}`
               },
-              lg: {
-                size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
-                ...startIcon.lg
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Primitive,
-            {
-              "data-error": error,
-              type: type === "password" && showPassword ? "text" : type,
-              className: clsx(classes.input__control, className),
-              ...rest,
-              value: typingValue ?? value,
-              ref: mergedRefs,
-              onChange,
-              onBlur,
-              onFocus,
-              as: "input"
-            }
-          ),
-          !!endIcon && /* @__PURE__ */ jsx(
-            Icon,
-            {
-              size: getSizeVariantState(size).iconSize,
-              ...endIcon,
-              sm: {
-                size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
-                ...endIcon.sm
+              "&:has(input:read-only)": {
+                pointerEvents: "none"
               },
-              md: {
-                size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
-                ...endIcon.md
+              "&:has(input:disabled)": {
+                backgroundColor: getColorVar("neutral.300"),
+                color: getColorVar("neutral.500"),
+                borderColor: getColorVar("neutral.300"),
+                pointerEvents: "none"
               },
-              lg: {
-                size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
-                ...endIcon.lg
-              }
-            }
-          ),
-          suffix,
-          type === "password" && /* @__PURE__ */ jsx(
-            Icon,
-            {
-              onClick: toggleShowPassword,
-              sx: { cursor: "pointer" },
-              size: getSizeVariantState(size).iconSize,
+              ...error && { borderColor: getColorVar("red.600") },
+              ...createStyle({ size }),
+              ...mainProps == null ? void 0 : mainProps.sx,
               sm: {
-                size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize
+                ...createStyle(sm),
+                ...(_a = mainProps == null ? void 0 : mainProps.sx) == null ? void 0 : _a.sm
               },
               md: {
-                size: getSizeVariantState(md == null ? void 0 : md.size).iconSize
+                ...createStyle(md),
+                ...(_b = mainProps == null ? void 0 : mainProps.sx) == null ? void 0 : _b.md
               },
               lg: {
-                size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize
-              },
-              source: showPassword ? EyeVisible : EyeHidden
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
-  ] });
+                ...createStyle(lg),
+                ...(_c = mainProps == null ? void 0 : mainProps.sx) == null ? void 0 : _c.lg
+              }
+            },
+            children: [
+              prefix,
+              !!startIcon && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  size: getSizeVariantState(size).iconSize,
+                  ...startIcon,
+                  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
+                  },
+                  sx: {
+                    flexShrink: 0,
+                    ...startIcon == null ? void 0 : startIcon.sx
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Primitive,
+                {
+                  "data-error": error,
+                  type: type === "password" && showPassword ? "text" : type,
+                  ...rest,
+                  value: typingValue ?? value,
+                  ref: mergedRefs,
+                  onChange,
+                  onBlur,
+                  onFocus,
+                  as: "input",
+                  sx: {
+                    flex: "1 1 0%",
+                    width: "100%",
+                    height: "100%",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    backgroundColor: "transparent",
+                    ":focus": {
+                      outline: "none"
+                    },
+                    "::placeholder": {
+                      color: getColorVar("neutral.400")
+                    }
+                  }
+                }
+              ),
+              !!endIcon && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  size: getSizeVariantState(size).iconSize,
+                  ...endIcon,
+                  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
+                  },
+                  sx: {
+                    flexShrink: 0,
+                    ...endIcon == null ? void 0 : endIcon.sx
+                  }
+                }
+              ),
+              suffix,
+              type === "password" && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  onClick: toggleShowPassword,
+                  size: getSizeVariantState(size).iconSize,
+                  sm: {
+                    size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize
+                  },
+                  md: {
+                    size: getSizeVariantState(md == null ? void 0 : md.size).iconSize
+                  },
+                  lg: {
+                    size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize
+                  },
+                  source: showPassword ? EyeVisible : EyeHidden,
+                  sx: {
+                    cursor: "pointer",
+                    flexShrink: 0
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+      ]
+    }
+  );
 };
 const createStyle = ({ size } = {}) => {
   const { inputPaddingX, inputSize, textVariant } = getSizeVariantState(size);

package/dist/lib/input-range/input-range.d.ts

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

package/dist/lib/input-range/input-range.js

@@ -1,16 +1,15 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, Fragment } from "react";
 import { getInputRangeProps } from "./helpers.js";
-import classes from "./input-range.module.scss.js";
 import { getSizeVariantState } from "../../utils/index.js";
 import LongArrowRightIcon from "../../assets/svg/long-arrow-right.svg.js";
-import { mediaQuery } from "../../theme/screens.js";
-import "../../theme/palette.js";
-import { clsx } from "clsx";
+import "lodash-es";
+import { getColorVar } from "../../theme/palette.js";
 import { InputNumber } from "../input-number/input-number.js";
+import { Primitive } from "../primitive/primitive.js";
 import { Icon } from "../icon/icon.js";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
-const InputRange = (_props) => {
+const InputRange = ({ ref: _ref, ..._props }) => {
   const {
     error,
     helperText,
@@ -52,114 +51,139 @@ const InputRange = (_props) => {
     onChange == null ? void 0 : onChange(e, edge);
     (_b = (_a = inputs == null ? void 0 : inputs.at(Number(e.currentTarget.dataset.index))) == null ? void 0 : _a.onChange) == null ? void 0 : _b.call(_a, e);
   };
-  const css = [
-    createStyle({ size }),
-    {
-      [mediaQuery("sm")]: createStyle(sm),
-      [mediaQuery("md")]: createStyle(md),
-      [mediaQuery("lg")]: createStyle(lg)
-    }
-  ];
-  return /* @__PURE__ */ jsxs("div", { css: { width: "100%" }, children: [
-    /* @__PURE__ */ jsxs("div", { css, className: clsx(classes.input_range, className), ...props, ref: containerRef, children: [
-      prefix,
-      !!startIcon && /* @__PURE__ */ jsx(
-        Icon,
-        {
-          css: { flexShrink: 0 },
-          size: getSizeVariantState(size).iconSize,
-          ...startIcon,
+  return /* @__PURE__ */ jsxs(Primitive, { ...props, sx: { width: "100%", ...props.sx }, children: [
+    /* @__PURE__ */ jsxs(
+      Primitive,
+      {
+        ref: containerRef,
+        className,
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          borderWidth: 1,
+          borderStyle: "solid",
+          borderRadius: "0.5rem",
+          gap: "0.5rem",
+          paddingLeft: getSizeVariantState(size).inputPaddingX,
+          paddingRight: getSizeVariantState(size).inputPaddingX,
+          "&:has(input:focus)": {
+            borderColor: getColorVar("primary.600"),
+            boxShadow: `0 1px 3px 0 ${getColorVar("primary.300")}, 0 1px 2px -1px ${getColorVar("primary.300")}`
+          },
+          ":hover": {
+            borderColor: getColorVar("primary.300")
+          },
           sm: {
-            size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
-            ...startIcon.sm
+            paddingLeft: getSizeVariantState(sm == null ? void 0 : sm.size).inputPaddingX,
+            paddingRight: getSizeVariantState(sm == null ? void 0 : sm.size).inputPaddingX
           },
           md: {
-            size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
-            ...startIcon.md
+            paddingLeft: getSizeVariantState(md == null ? void 0 : md.size).inputPaddingX,
+            paddingRight: getSizeVariantState(md == null ? void 0 : md.size).inputPaddingX
           },
           lg: {
-            size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
-            ...startIcon.lg
+            paddingLeft: getSizeVariantState(lg == null ? void 0 : lg.size).inputPaddingX,
+            paddingRight: getSizeVariantState(lg == null ? void 0 : lg.size).inputPaddingX
           }
-        }
-      ),
-      ["from", "to"].map((edge, index, array) => {
-        const inputProps = (inputs == null ? void 0 : inputs.at(index)) ?? {};
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            InputNumber,
+        },
+        children: [
+          prefix,
+          !!startIcon && /* @__PURE__ */ jsx(
+            Icon,
             {
-              ref: (el) => {
-                inputRefs.current[index] = el;
+              size: getSizeVariantState(size).iconSize,
+              ...startIcon,
+              sm: {
+                size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+                ...startIcon.sm
+              },
+              md: {
+                size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+                ...startIcon.md
               },
-              "data-edge": edge,
-              "data-index": index,
-              css: { textAlign: "center" },
-              mainProps: {
-                style: {
-                  borderWidth: 0,
-                  boxShadow: "none",
-                  paddingLeft: 0,
-                  paddingRight: 0
-                }
+              lg: {
+                size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+                ...startIcon.lg
               },
-              mode: "onBlur",
-              ...inputProps,
-              onChange: onInputChange,
-              onFocus: onInputFocus,
-              size,
+              sx: {
+                flexShrink: 0,
+                ...startIcon.sx
+              }
+            }
+          ),
+          ["from", "to"].map((edge, index, array) => {
+            const inputProps = (inputs == null ? void 0 : inputs.at(index)) ?? {};
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                InputNumber,
+                {
+                  ref: (el) => {
+                    inputRefs.current[index] = el;
+                  },
+                  "data-edge": edge,
+                  "data-index": index,
+                  mainProps: {
+                    style: {
+                      borderWidth: 0,
+                      boxShadow: "none",
+                      paddingLeft: 0,
+                      paddingRight: 0
+                    }
+                  },
+                  mode: "onBlur",
+                  ...inputProps,
+                  onChange: onInputChange,
+                  onFocus: onInputFocus,
+                  size,
+                  sm: {
+                    size: sm == null ? void 0 : sm.size,
+                    ...inputProps.sm
+                  },
+                  md: {
+                    size: md == null ? void 0 : md.size,
+                    ...inputProps.md
+                  },
+                  lg: {
+                    size: lg == null ? void 0 : lg.size,
+                    ...inputProps.lg
+                  },
+                  sx: { textAlign: "center", ...inputProps.sx }
+                },
+                index
+              ),
+              index < array.length - 1 && /* @__PURE__ */ jsx(Icon, { ...iconProps, sx: { flexShrink: 0 }, source: LongArrowRightIcon })
+            ] }, index);
+          }),
+          !!endIcon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              size: getSizeVariantState(size).iconSize,
+              ...endIcon,
               sm: {
-                size: sm == null ? void 0 : sm.size,
-                ...inputProps.sm
+                size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+                ...endIcon.sm
               },
               md: {
-                size: md == null ? void 0 : md.size,
-                ...inputProps.md
+                size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+                ...endIcon.md
               },
               lg: {
-                size: lg == null ? void 0 : lg.size,
-                ...inputProps.lg
+                size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+                ...endIcon.lg
+              },
+              sx: {
+                flexShrink: 0,
+                ...endIcon.sx
               }
-            },
-            index
+            }
           ),
-          index < array.length - 1 && /* @__PURE__ */ jsx(Icon, { ...iconProps, css: { flexShrink: 0 }, source: LongArrowRightIcon })
-        ] }, index);
-      }),
-      !!endIcon && /* @__PURE__ */ jsx(
-        Icon,
-        {
-          size: getSizeVariantState(size).iconSize,
-          ...endIcon,
-          css: { flexShrink: 0 },
-          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
-    ] }),
+          suffix
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
   ] });
 };
-const createStyle = ({ size } = {}) => {
-  const { inputPaddingX } = getSizeVariantState(size);
-  return [
-    {
-      paddingLeft: inputPaddingX,
-      paddingRight: inputPaddingX
-    }
-  ];
-};
 export {
   InputRange
 };

package/dist/lib/input-range/types.d.ts

@@ -1,7 +1,8 @@
 import { JSX } from 'react';
 import { IconProps } from '../icon';
 import { InputNumberProps } from '../input-number/types';
-import { SizeVariant, ShallowMerge, ToResponsiveProps } from '../../types';
+import { PrimitiveProps } from '../primitive';
+import { ShallowMerge, SizeVariant, ToResponsiveProps } from '../../types';
 export interface InputRangeResponsiveProps {
     size?: SizeVariant;
 }
@@ -16,5 +17,5 @@ interface InputRangeExtendedProps extends ToResponsiveProps<InputRangeResponsive
     startIcon?: IconProps;
     endIcon?: IconProps;
 }
-export type InputRangeProps = ShallowMerge<JSX.IntrinsicElements['div'], InputRangeExtendedProps>;
+export type InputRangeProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], InputRangeExtendedProps>>;
 export {};

package/dist/lib/ripple-effect/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './ripple-effect';

package/dist/lib/ripple-effect/ripple-effect.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { RippleEffectProps } from './types';
+export declare const RippleEffect: FC<RippleEffectProps>;

package/dist/lib/ripple-effect/ripple-effect.js

@@ -0,0 +1,75 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { Primitive } from "../primitive/primitive.js";
+const RippleEffect = ({
+  enabled = true,
+  color = "currentColor",
+  duration = 400,
+  opacity = 0.2,
+  sizeMultiplier = 1
+}) => {
+  const containerRef = useRef(null);
+  const activeRipplesRef = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    if (!enabled) return;
+    const container = containerRef.current;
+    const parent = container == null ? void 0 : container.parentElement;
+    if (!container || !parent) return;
+    const activeRipples = activeRipplesRef.current;
+    const handlePointerDown = (e) => {
+      if (e.pointerType === "mouse" && e.button !== 0) return;
+      const { clientX, clientY } = e;
+      const { clientHeight, clientWidth } = parent;
+      const { left: offsetLeft, top: offsetTop } = parent.getBoundingClientRect();
+      const circleLeft = clientX - offsetLeft;
+      const circleTop = clientY - offsetTop;
+      const circleRight = offsetLeft + clientWidth - clientX;
+      const circleBottom = offsetTop + clientHeight - clientY;
+      const radius = Math.max(circleLeft, circleTop, circleRight, circleBottom) * sizeMultiplier;
+      const circle = document.createElement("div");
+      circle.style.position = "absolute";
+      circle.style.borderRadius = "9999px";
+      circle.style.backgroundColor = color;
+      circle.style.width = circle.style.height = `${radius * 2}px`;
+      circle.style.left = `${circleLeft - radius}px`;
+      circle.style.top = `${circleTop - radius}px`;
+      const animation = circle.animate(
+        [
+          { transform: "scale(0)", opacity },
+          { transform: "scale(1)", opacity: 0 }
+        ],
+        { duration, easing: "ease-in-out" }
+      );
+      animation.onfinish = () => {
+        circle.remove();
+        activeRipples.delete(circle);
+      };
+      activeRipples.add(circle);
+      container.appendChild(circle);
+    };
+    parent.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      parent.removeEventListener("pointerdown", handlePointerDown);
+      activeRipples.forEach((circle) => circle.remove());
+      activeRipples.clear();
+    };
+  }, [enabled, color, duration, opacity, sizeMultiplier]);
+  if (!enabled) return null;
+  return /* @__PURE__ */ jsx(
+    Primitive,
+    {
+      as: "span",
+      ref: containerRef,
+      sx: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        borderRadius: "inherit",
+        overflow: "hidden"
+      }
+    }
+  );
+};
+export {
+  RippleEffect
+};

package/dist/{hooks/use-ripple-effect/index.d.ts → lib/ripple-effect/types.d.ts}

@@ -1,5 +1,4 @@
-import { RefObject } from 'react';
-type UseRippleEffectOptions = {
+export type RippleEffectProps = {
     /**
      * Whether to enable the ripple effect
      * @default true
@@ -26,7 +25,3 @@ type UseRippleEffectOptions = {
      */
     sizeMultiplier?: number;
 };
-export declare const useRippleEffect: (ref: RefObject<HTMLElement | null>, { enabled, color, duration, opacity, sizeMultiplier, }?: UseRippleEffectOptions) => {
-    className: string;
-};
-export {};

package/dist/style.css

@@ -1,85 +1,4 @@
-@keyframes _ripple_1jvqm_7 {
-  to {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-._ripple_effect_1jvqm_7 {
-  position: relative;
-  overflow: hidden;
-}
-
-._ripple_effect__circle_1jvqm_12 {
-  position: absolute;
-  border-radius: 9999px;
-  background-color: var(--ripple-color);
-  opacity: var(--ripple-opacity);
-  transform: scale(0);
-  transform-origin: center;
-  will-change: transform, opacity;
-  backface-visibility: hidden;
-  touch-action: none;
-  animation: _ripple_1jvqm_7 var(--ripple-duration) ease-in-out;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  ._ripple_effect__circle_1jvqm_12 {
-    animation-duration: calc(var(--ripple-duration) * 0.5);
-  }
-}._input__container_1129f_1 {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-._input__main_1129f_8 {
-  width: 100%;
-  display: flex;
-  overflow: hidden;
-  align-items: center;
-  gap: 0.5rem;
-  border-radius: 0.5rem;
-  border-width: 1px;
-  border-style: solid;
-  background-color: var(--color-surface-default);
-}
-._input__main_1129f_8:hover {
-  border-color: var(--color-primary-300);
-}
-._input__main_1129f_8:has(input:focus:not(:read-only)) {
-  border-color: var(--color-primary-600);
-  box-shadow: 0 1px 3px 0 var(--color-primary-300), 0 1px 2px -1px var(--color-primary-300);
-}
-._input__main_1129f_8:has(input:read-only) {
-  pointer-events: none;
-}
-._input__main_1129f_8:has(input:disabled) {
-  background-color: var(--color-neutral-300);
-  color: var(--color-neutral-500);
-  border-color: var(--color-neutral-300);
-  pointer-events: none;
-}
-
-._input__main_error_1129f_36 {
-  border-color: var(--color-red-600);
-}
-
-._input__control_1129f_40 {
-  flex: 1 1 0%;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background-color: transparent;
-}
-._input__control_1129f_40:focus {
-  outline: none;
-}
-._input__control_1129f_40::placeholder {
-  color: var(--color-neutral-400);
-}._checkbox__container_1rrv2_1 {
+._checkbox__container_1rrv2_1 {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -815,20 +734,6 @@
 
 ._radio_button__input_10dls_10:disabled + ._radio_button__checkmark_10dls_21 {
   color: var(--color-neutral-300);
-}._input_range_1yrkm_1 {
-  display: flex;
-  align-items: center;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 0.5rem;
-  gap: 0.5rem;
-}
-._input_range_1yrkm_1:has(input:focus) {
-  border-color: var(--color-primary-600);
-  box-shadow: 0 1px 3px 0 var(--color-primary-300), 0 1px 2px -1px var(--color-primary-300);
-}
-._input_range_1yrkm_1:hover {
-  border-color: var(--color-primary-300);
 }._switch__container_19zrg_1 {
   display: flex;
   align-items: center;

package/package.json

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

package/dist/hooks/use-ripple-effect/index.js

@@ -1,69 +0,0 @@
-import { useCallback, useEffect, useMemo } from "react";
-import classes from "./use-ripple-effect.module.scss.js";
-const useRippleEffect = (ref, {
-  enabled = true,
-  color = "currentColor",
-  duration = 400,
-  opacity = 0.2,
-  sizeMultiplier = 1
-} = {}) => {
-  const createRippleCircle = useCallback(
-    (event) => {
-      const { currentTarget, clientX, clientY } = event;
-      const { clientHeight, clientWidth } = currentTarget;
-      const { left: offsetLeft, top: offsetTop } = currentTarget.getBoundingClientRect();
-      const circleLeft = clientX - offsetLeft;
-      const circleTop = clientY - offsetTop;
-      const circleRight = offsetLeft + clientWidth - clientX;
-      const circleBottom = offsetTop + clientHeight - clientY;
-      const radius = Math.max(circleLeft, circleTop, circleRight, circleBottom) * sizeMultiplier;
-      const circle = document.createElement("div");
-      circle.style.width = circle.style.height = `${radius * 2}px`;
-      circle.style.left = `${circleLeft - radius}px`;
-      circle.style.top = `${circleTop - radius}px`;
-      circle.classList.add(classes.ripple_effect__circle);
-      circle.style.setProperty("--ripple-color", color);
-      circle.style.setProperty("--ripple-duration", `${duration}ms`);
-      circle.style.setProperty("--ripple-opacity", opacity.toString());
-      return circle;
-    },
-    [color, duration, opacity, sizeMultiplier]
-  );
-  const start = useCallback(
-    (event) => {
-      var _a;
-      if (!enabled) return;
-      const circle = createRippleCircle(event);
-      const handleAnimationEnd = (ev) => {
-        if (!ev.target) return;
-        ev.target.remove();
-      };
-      circle.addEventListener("animationend", handleAnimationEnd);
-      (_a = ref.current) == null ? void 0 : _a.appendChild(circle);
-    },
-    [createRippleCircle, enabled, ref]
-  );
-  useEffect(() => {
-    if (!enabled) return;
-    const targetElement = ref.current;
-    const handleClick = (e) => {
-      start(e);
-    };
-    targetElement == null ? void 0 : targetElement.addEventListener("click", handleClick);
-    return () => {
-      targetElement == null ? void 0 : targetElement.removeEventListener("click", handleClick);
-      Array.from((targetElement == null ? void 0 : targetElement.getElementsByClassName(classes.ripple_effect__circle)) ?? []).forEach(
-        (circle) => circle.remove()
-      );
-    };
-  }, [start, enabled, ref]);
-  return useMemo(
-    () => ({
-      className: classes.ripple_effect
-    }),
-    []
-  );
-};
-export {
-  useRippleEffect
-};

package/dist/hooks/use-ripple-effect/use-ripple-effect.module.scss.js

@@ -1,11 +0,0 @@
-const ripple_effect = "_ripple_effect_1jvqm_7";
-const ripple_effect__circle = "_ripple_effect__circle_1jvqm_12";
-const classes = {
-  ripple_effect,
-  ripple_effect__circle
-};
-export {
-  classes as default,
-  ripple_effect,
-  ripple_effect__circle
-};

package/dist/lib/input/input.module.scss.js

@@ -1,17 +0,0 @@
-const input__container = "_input__container_1129f_1";
-const input__main = "_input__main_1129f_8";
-const input__main_error = "_input__main_error_1129f_36";
-const input__control = "_input__control_1129f_40";
-const classes = {
-  input__container,
-  input__main,
-  input__main_error,
-  input__control
-};
-export {
-  classes as default,
-  input__container,
-  input__control,
-  input__main,
-  input__main_error
-};

package/dist/lib/input-range/input-range.module.scss.js

@@ -1,8 +0,0 @@
-const input_range = "_input_range_1yrkm_1";
-const classes = {
-  input_range
-};
-export {
-  classes as default,
-  input_range
-};