@janbox/storefront-ui 2.0.27 → 2.0.29

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/lib/table/table-row/table-row.d.ts

@@ -1,2 +1,2 @@
 import { TableRowProps } from './types';
-export declare const TableRow: ({ sx, children, ...props }: TableRowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableRow: (props: TableRowProps) => import("react/jsx-runtime").JSX.Element;