@janbox/storefront-ui 2.0.8 → 2.0.10

package/dist/hooks/index.d.ts

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

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC"}

package/dist/hooks/index.js

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

package/dist/lib/input-number/input-number.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-number.d.ts","sourceRoot":"","sources":["../../../src/lib/input-number/input-number.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAY3C,eAAO,MAAM,WAAW,sGAYrB,gBAAgB,4CAmHlB,CAAC"}
+{"version":3,"file":"input-number.d.ts","sourceRoot":"","sources":["../../../src/lib/input-number/input-number.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAW3C,eAAO,MAAM,WAAW,sGAYrB,gBAAgB,4CA0HlB,CAAC"}

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

@@ -2,10 +2,8 @@ import { jsx, Fragment } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { isNil } from "lodash-es";
-import classes from "./input-number.module.scss.js";
 import { Input } from "../input/input.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
-import { cn } from "../../utils/stylesheet.js";
 import MinusIcon from "../../assets/svg/minus.svg.js";
 import PlusIcon from "../../assets/svg/plus.svg.js";
 import { IconButton } from "../icon-button/icon-button.js";
@@ -94,7 +92,14 @@ const InputNumber = ({
       value: valueAsString,
       onChange,
       transform: transformFn,
-      className: cn(classes.input_number__input, className),
+      className,
+      sx: {
+        "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
+          WebkitAppearance: "none",
+          margin: 0,
+          ...props.sx
+        }
+      },
       onKeyDown,
       suffix: suffix ?? /* @__PURE__ */ jsx(Fragment, { children: step > 0 && /* @__PURE__ */ jsx(
         IconButton,

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

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/lib/link/link.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAQzD,eAAO,MAAM,IAAI,iCAAkC,SAAS,qDAmD3D,CAAC"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/lib/link/link.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAOzD,eAAO,MAAM,IAAI,iCAAkC,SAAS,qDAoD3D,CAAC"}

package/dist/lib/link/link.js

@@ -1,27 +1,16 @@
 import { jsx } from "@emotion/react/jsx-runtime";
+import { ClassNames } from "@emotion/react";
 import { isNil } from "lodash-es";
 import { Link as Link$1 } from "react-router";
 import { getLinkProps } from "./helpers.js";
-import { useHoverLineEffect } from "../../hooks/use-hover-line-effect/index.js";
 import { Booleanish } from "../../constants/index.js";
+import "react";
 import { mediaQuery } from "../../theme/screens.js";
 import "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
-import { cn, createSxInterpolation } from "../../utils/stylesheet.js";
+import { createUnderlineEffect } from "../../utils/stylesheet.js";
 const Link = ({ children, ref, ..._props }) => {
-  const {
-    sx,
-    textVariant,
-    sm,
-    md,
-    lg,
-    dangerouslySetInnerHTML,
-    to,
-    underline = false,
-    className,
-    ...rest
-  } = getLinkProps(_props);
-  const hoverLineEffectProps = useHoverLineEffect({ enabled: underline });
+  const { sx, textVariant, sm, md, lg, to, underline = false, className, ...rest } = getLinkProps(_props);
   const onClick = (e) => {
     var _a;
     if (e.currentTarget.getAttribute("aria-disabled") === Booleanish.True) {
@@ -32,37 +21,42 @@ const Link = ({ children, ref, ..._props }) => {
     }
     (_a = rest.onClick) == null ? void 0 : _a.call(rest, e);
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ClassNames, { children: ({ cx, css }) => /* @__PURE__ */ jsx(
     Link$1,
     {
       to: to ?? "#",
-      css: [
-        createStyle({ textVariant }),
-        {
-          [mediaQuery("sm")]: createStyle(sm),
-          [mediaQuery("md")]: createStyle(md),
-          [mediaQuery("lg")]: createStyle(lg)
-        },
-        createSxInterpolation(sx),
-        rest["aria-disabled"] && { pointerEvents: "none" }
-      ],
-      dangerouslySetInnerHTML: isNil(children) ? dangerouslySetInnerHTML : void 0,
-      ...hoverLineEffectProps,
-      className: cn(className, hoverLineEffectProps.className),
+      className: cx(
+        className,
+        css({
+          '&[aria-disabled="true"]': {
+            pointerEvents: "none"
+          },
+          ...underline ? createUnderlineEffect() : {},
+          ...createStyle({ textVariant }),
+          ...sx,
+          [mediaQuery("sm")]: {
+            ...createStyle(sm),
+            ...sx == null ? void 0 : sx.sm
+          },
+          [mediaQuery("md")]: {
+            ...createStyle(md),
+            ...sx == null ? void 0 : sx.md
+          },
+          [mediaQuery("lg")]: {
+            ...createStyle(lg),
+            ...sx == null ? void 0 : sx.lg
+          }
+        })
+      ),
       ...rest,
       onClick,
       ref,
-      children: isNil(dangerouslySetInnerHTML) ? children : null
+      children
     }
-  );
+  ) });
 };
 const createStyle = ({ textVariant } = {}) => {
-  return [
-    textVariant && {
-      fontSize: getTypographyVar(textVariant).fontSize,
-      lineHeight: getTypographyVar(textVariant).lineHeight
-    }
-  ];
+  return textVariant ? { fontSize: getTypographyVar(textVariant).fontSize, lineHeight: getTypographyVar(textVariant).lineHeight } : {};
 };
 export {
   Link

package/dist/lib/price-label/price-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"price-label.d.ts","sourceRoot":"","sources":["../../../src/lib/price-label/price-label.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA8C,eAAe,EAAE,MAAM,SAAS,CAAC;AAQtF,eAAO,MAAM,UAAU,WAAY,eAAe,4CAwEjD,CAAC"}
+{"version":3,"file":"price-label.d.ts","sourceRoot":"","sources":["../../../src/lib/price-label/price-label.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA8C,eAAe,EAAE,MAAM,SAAS,CAAC;AAQtF,eAAO,MAAM,UAAU,WAAY,eAAe,4CAoFjD,CAAC"}

package/dist/lib/price-label/price-label.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { getPriceLabelProps } from "./helpers.js";
-import { isNil, isNumber } from "lodash-es";
+import { isNumber, isNil } from "lodash-es";
 import { useTranslation } from "react-i18next";
 import { LocaleNamespaces } from "../../constants/index.js";
 import { useFormatter } from "../../hooks/use-formatter/index.js";
@@ -18,8 +18,14 @@ const PriceLabel = (_props) => {
     sm,
     md,
     lg,
+    showEqual = false,
     ...rest
   } = getPriceLabelProps(_props);
+  const isPriceEqual = price.currency && price.currency === (exchangePrice == null ? void 0 : exchangePrice.currency) && isNumber(price.value) && price.value === (exchangePrice == null ? void 0 : exchangePrice.value);
+  const isShowExchangePrice = (() => {
+    if (!exchangePrice) return false;
+    return showEqual ? true : !isPriceEqual;
+  })();
   return /* @__PURE__ */ jsxs(
     Primitive,
     {
@@ -53,7 +59,7 @@ const PriceLabel = (_props) => {
             )
           }
         ),
-        exchangePrice && /* @__PURE__ */ jsxs(Fragment, { children: [
+        isShowExchangePrice && /* @__PURE__ */ jsxs(Fragment, { children: [
           orientation === "vertical" ? /* @__PURE__ */ jsx("br", {}) : /* @__PURE__ */ jsx(Fragment, { children: " " }),
           /* @__PURE__ */ jsx(
             Primitive,
@@ -78,7 +84,7 @@ const PriceLabel = (_props) => {
                   price: {
                     prefix: "(",
                     suffix: ")",
-                    placeholder: isNil(exchangePrice.value),
+                    placeholder: isNil(exchangePrice == null ? void 0 : exchangePrice.value),
                     ...exchangePrice
                   }
                 }

package/dist/lib/price-label/types.d.ts

@@ -18,6 +18,7 @@ type PriceLabelExtendedProps = ToResponsiveProps<PriceLabelResponsiveProps> & {
     exchangePrice?: PriceLabelEntry;
     color?: ColorVariant;
     orientation?: 'horizontal' | 'vertical';
+    showEqual?: boolean;
 };
 export type PriceLabelProps = ShallowMerge<PrimitiveProps<JSX.IntrinsicElements['span']>, PriceLabelExtendedProps>;
 export {};

package/dist/lib/price-label/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/price-label/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACxC,IAAI,CAAC,EAAE,qBAAqB,CAAC;CAC9B;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAAC,yBAAyB,CAAC,GAAG;IAC5E,KAAK,EAAE,eAAe,CAAC;IACvB,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,EAAE,uBAAuB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/price-label/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACxC,IAAI,CAAC,EAAE,qBAAqB,CAAC;CAC9B;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAAC,yBAAyB,CAAC,GAAG;IAC5E,KAAK,EAAE,eAAe,CAAC;IACvB,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,EAAE,uBAAuB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/textarea.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAA2B,MAAM,SAAS,CAAC;AAUjE,eAAO,MAAM,QAAQ,uBAAwB,aAAa,4CAuHzD,CAAC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/textarea.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAA2B,MAAM,SAAS,CAAC;AAQjE,eAAO,MAAM,QAAQ,uBAAwB,aAAa,4CA8JzD,CAAC"}

package/dist/lib/textarea/textarea.js

@@ -3,11 +3,9 @@ import { useRef, useState } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { isString } from "lodash-es";
 import { getTextareaProps } from "./helpers.js";
-import classes from "./textarea.module.scss.js";
-import { getSizeVariantState } from "../../utils/index.js";
-import { cn } from "../../utils/stylesheet.js";
-import "../../theme/palette.js";
+import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
+import { getSizeVariantState } from "../../utils/index.js";
 import { Primitive } from "../primitive/primitive.js";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
 const Textarea = ({ ref, ..._props }) => {
@@ -75,52 +73,96 @@ const Textarea = ({ ref, ..._props }) => {
       setTypingValue(void 0);
     }, debounce);
   };
-  return /* @__PURE__ */ jsxs(Primitive, { ...containerProps, className: cn(classes.textarea__container, containerProps == null ? void 0 : containerProps.className), children: [
-    /* @__PURE__ */ jsx(
-      Primitive,
-      {
-        ...mainProps,
-        sx: {
-          display: "flex",
-          paddingTop: 4,
-          paddingBottom: 4,
-          ...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
-          }
-        },
-        className: cn(classes.textarea__main, mainProps == null ? void 0 : mainProps.className),
-        children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
+    Primitive,
+    {
+      ...containerProps,
+      sx: {
+        position: "relative",
+        width: "100%",
+        ...containerProps == null ? void 0 : containerProps.sx
+      },
+      className: containerProps == null ? void 0 : containerProps.className,
+      children: [
+        /* @__PURE__ */ jsx(
           Primitive,
           {
-            "aria-invalid": error,
-            className: cn(
-              classes.textarea__control,
-              className
-            ),
-            ...rest,
-            value: typingValue ?? value,
-            ref: mergedRefs,
-            onChange,
-            onBlur,
-            onFocus,
-            as: "textarea"
+            ...mainProps,
+            sx: {
+              width: "100%",
+              borderWidth: 1,
+              borderStyle: "solid",
+              borderRadius: "0.5rem",
+              display: "flex",
+              paddingTop: 4,
+              paddingBottom: 4,
+              "&:has(textarea[aria-invalid])": {
+                borderColor: getColorVar("red.600")
+              },
+              "&:hover": {
+                borderColor: getColorVar("primary.300")
+              },
+              "&:has(textarea:focus)": {
+                outline: "none",
+                borderColor: getColorVar("primary.600"),
+                boxShadow: `0 1px 3px 0 ${getColorVar("primary.300")}, 0 1px 2px -1px ${getColorVar("primary.300")}`
+              },
+              "&:has(textarea:read-only)": {
+                cursor: "default",
+                pointerEvents: "none"
+              },
+              "&:has(textarea:disabled)": {
+                backgroundColor: getColorVar("neutral.300"),
+                color: getColorVar("neutral.500"),
+                borderColor: getColorVar("neutral.300"),
+                pointerEvents: "none"
+              },
+              ...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
+              }
+            },
+            className: mainProps == null ? void 0 : mainProps.className,
+            children: /* @__PURE__ */ jsx(
+              Primitive,
+              {
+                "aria-invalid": error,
+                sx: {
+                  width: "100%",
+                  backgroundColor: "transparent",
+                  "&:focus": {
+                    outline: "none"
+                  },
+                  "&::placeholder": {
+                    color: getColorVar("neutral.400")
+                  }
+                },
+                className,
+                ...rest,
+                value: typingValue ?? value,
+                ref: mergedRefs,
+                onChange,
+                onBlur,
+                onFocus,
+                as: "textarea"
+              }
+            )
           }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
-  ] });
+        ),
+        /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+      ]
+    }
+  );
 };
 const createStyle = ({ size } = {}) => {
   const { inputPaddingX, textVariant } = getSizeVariantState(size);

package/dist/style.css

@@ -1,22 +1,4 @@
-._hover_line_effect_dv0bz_1 {
-  position: relative;
-}
-._hover_line_effect_dv0bz_1::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  transform: scaleX(0);
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  background-color: var(--hover-line-color);
-  height: var(--hover-line-height);
-  transition-duration: var(--hover-line-duration);
-}
-._hover_line_effect_dv0bz_1:hover::after {
-  transform: scaleX(1);
-}@keyframes _ripple_1jvqm_7 {
+@keyframes _ripple_1jvqm_7 {
   to {
     transform: scale(1);
     opacity: 0;
@@ -847,9 +829,6 @@
 }
 ._input_range_1yrkm_1:hover {
   border-color: var(--color-primary-300);
-}._input_number__input_2xvhv_1::-webkit-outer-spin-button, ._input_number__input_2xvhv_1::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
 }._switch__container_19zrg_1 {
   display: flex;
   align-items: center;
@@ -936,46 +915,4 @@
 ._switch__main_19zrg_24:has(._switch__input_19zrg_12:disabled)::after {
   background-color: var(--color-neutral-400);
   border-color: var(--color-neutral-400);
-}._textarea__container_bs49u_1 {
-  position: relative;
-  width: 100%;
-}
-
-._textarea__main_bs49u_6 {
-  width: 100%;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 0.5rem;
-}
-._textarea__main_bs49u_6:has(textarea[aria-invalid]) {
-  border-color: var(--color-red-600);
-}
-._textarea__main_bs49u_6:hover {
-  border-color: var(--color-primary-300);
-}
-._textarea__main_bs49u_6:has(textarea:focus) {
-  outline: none;
-  border-color: var(--color-primary-600);
-  box-shadow: 0 1px 3px 0 var(--color-primary-300), 0 1px 2px -1px var(--color-primary-300);
-}
-._textarea__main_bs49u_6:has(textarea:read-only) {
-  cursor: default;
-  pointer-events: none;
-}
-._textarea__main_bs49u_6:has(textarea:disabled) {
-  background-color: var(--color-neutral-300);
-  color: var(--color-neutral-500);
-  border-color: var(--color-neutral-300);
-  pointer-events: none;
-}
-
-._textarea__control_bs49u_34 {
-  width: 100%;
-  background-color: transparent;
-}
-._textarea__control_bs49u_34:focus {
-  outline: none;
-}
-._textarea__control_bs49u_34::placeholder {
-  color: var(--color-neutral-400);
 }

package/dist/utils/index.d.ts

@@ -4,6 +4,7 @@ import { SizeVariant, ColorVariant, ToResponsiveProps } from '../types';
 import { Get, Paths, SetRequired } from 'type-fest';
 export * from './common';
 export * from './query-params';
+export { createUnderlineEffect } from './stylesheet';
 export declare const getColorShadesByVariant: (variant?: ColorVariant) => {
     main: string;
     contrastText: string;

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyD,YAAY,EAAE,MAAM,OAAO,CAAC;AAI5F,OAAO,EAAe,MAAM,EAAqB,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAc/B,eAAO,MAAM,uBAAuB,aAAc,YAAY;;;;;;;;;;;;;;;;;;;;CAyF7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,CAAC,MAiB9G,CAAC;AAEF,eAAO,MAAM,eAAe,aAAc,KAAK,CAAC,SAAS,KAAG,YAAY,EAYvE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,qBAAqB,CAAC;CACpC,CAAC,CAAC;AAEH,eAAO,MAAM,mBAAmB,UAAW,WAAW,KAAG,gBAiCxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,2BAC/D,iBAAiB,CAAC,CAAC,CAAC,SACrB,CAAC,UACA,MAAM,YACJ;IACR,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;CACpC,KACA,CAgBF,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,GAAG;IAC3D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,uBAAuB,mBAAmB,WASnF,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,GAAG;IACnF,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,MAAM,uBAAuB,kBAAkB,WAWjF,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,GAAG;IAC/D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,IAAI,GAAG,MAAM,GAAG,MAAM,uBAAuB,qBAAqB,WAyBvG,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyD,YAAY,EAAE,MAAM,OAAO,CAAC;AAI5F,OAAO,EAAe,MAAM,EAAqB,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAcrD,eAAO,MAAM,uBAAuB,aAAc,YAAY;;;;;;;;;;;;;;;;;;;;CAyF7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,CAAC,MAiB9G,CAAC;AAEF,eAAO,MAAM,eAAe,aAAc,KAAK,CAAC,SAAS,KAAG,YAAY,EAYvE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,qBAAqB,CAAC;CACpC,CAAC,CAAC;AAEH,eAAO,MAAM,mBAAmB,UAAW,WAAW,KAAG,gBAiCxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,2BAC/D,iBAAiB,CAAC,CAAC,CAAC,SACrB,CAAC,UACA,MAAM,YACJ;IACR,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;CACpC,KACA,CAgBF,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,GAAG;IAC3D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,uBAAuB,mBAAmB,WASnF,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,GAAG;IACnF,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,MAAM,uBAAuB,kBAAkB,WAWjF,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,GAAG;IAC/D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,IAAI,GAAG,MAAM,GAAG,MAAM,uBAAuB,qBAAqB,WAyBvG,CAAC"}

package/dist/utils/index.js

@@ -4,6 +4,7 @@ import { getSmallerScreens } from "../theme/screens.js";
 import { getColorVar } from "../theme/palette.js";
 import { ensureArray, ensureBoolean, getDecimalDigits, getEnumValues, matchSearch, normalizeSearchText, omitEmpty, parseNumber, parseSvgString } from "./common.js";
 import { ArrayParamParser, BooleanParamParser, DateParamParser, EnumParamParser, NumberParamParser, StringParamParser, simplifyQueryParams } from "./query-params.js";
+import { createUnderlineEffect } from "./stylesheet.js";
 const getColorShadesByVariant = (variant) => {
   switch (variant) {
     case "primary":
@@ -220,6 +221,7 @@ export {
   EnumParamParser,
   NumberParamParser,
   StringParamParser,
+  createUnderlineEffect,
   ensureArray,
   ensureBoolean,
   flattenChildren,

package/dist/utils/stylesheet.d.ts

@@ -2,4 +2,11 @@ import { PropsWithSx, StyledCSS } from '../types';
 import { ClassValue } from 'clsx';
 export declare const cn: (...classes: ClassValue[]) => string;
 export declare const createSxInterpolation: (sx?: PropsWithSx["sx"]) => StyledCSS[];
+type CreateUnderlineEffectOptions = {
+    color?: string;
+    duration?: number;
+    height?: string | number;
+};
+export declare const createUnderlineEffect: (options?: CreateUnderlineEffectOptions) => StyledCSS;
+export {};
 //# sourceMappingURL=stylesheet.d.ts.map

package/dist/utils/stylesheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../../src/utils/stylesheet.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,UAAU,EAAQ,MAAM,MAAM,CAAC;AAExC,eAAO,MAAM,EAAE,eAAgB,UAAU,EAAE,WAAqB,CAAC;AAEjE,eAAO,MAAM,qBAAqB,QAAQ,WAAW,CAAC,IAAI,CAAC,KAAQ,SAAS,EAW3E,CAAC"}
+{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../../src/utils/stylesheet.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,UAAU,EAAQ,MAAM,MAAM,CAAC;AAExC,eAAO,MAAM,EAAE,eAAgB,UAAU,EAAE,WAAqB,CAAC;AAEjE,eAAO,MAAM,qBAAqB,QAAQ,WAAW,CAAC,IAAI,CAAC,KAAQ,SAAS,EAW3E,CAAC;AAEF,KAAK,4BAA4B,GAAG;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,aAAa,4BAA4B,KAAQ,SAsBlF,CAAC"}

package/dist/utils/stylesheet.js

@@ -1,3 +1,4 @@
+import { isNumber } from "lodash-es";
 import { mediaQuery } from "../theme/screens.js";
 import "../theme/palette.js";
 import { clsx } from "clsx";
@@ -13,7 +14,30 @@ const createSxInterpolation = (sx = {}) => {
     }
   ];
 };
+const createUnderlineEffect = (options = {}) => {
+  const { color = "currentColor", duration = 300, height = 1 } = options;
+  return {
+    position: "relative",
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      transform: "scaleX(0)",
+      transitionProperty: "transform",
+      transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+      backgroundColor: color,
+      height: isNumber(height) ? `${height}px` : height,
+      transitionDuration: `${duration}ms`
+    },
+    "&:hover::after": {
+      transform: "scaleX(1)"
+    }
+  };
+};
 export {
   cn,
-  createSxInterpolation
+  createSxInterpolation,
+  createUnderlineEffect
 };

package/package.json

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

package/dist/hooks/use-hover-line-effect/index.d.ts

@@ -1,12 +0,0 @@
-type UseHoverLineEffectOptions = {
-    color?: string;
-    duration?: number;
-    height?: string | number;
-    enabled?: boolean;
-};
-export declare const useHoverLineEffect: (options?: UseHoverLineEffectOptions) => {
-    className: string;
-    style: React.CSSProperties;
-};
-export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-hover-line-effect/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-hover-line-effect/index.ts"],"names":[],"mappings":"AAMA,KAAK,yBAAyB,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,kBAAkB,aAAa,yBAAyB;;WAYpD,KAAK,CAAC,aAAa;CAGnC,CAAC"}

package/dist/hooks/use-hover-line-effect/index.js

@@ -1,19 +0,0 @@
-import { useMemo } from "react";
-import { isNumber } from "lodash-es";
-import classes from "./use-hover-line-effect.module.scss.js";
-const useHoverLineEffect = (options = {}) => {
-  const { color = "currentColor", duration = 300, height = 1, enabled = true } = options;
-  return useMemo(() => {
-    return {
-      className: enabled ? classes.hover_line_effect : "",
-      style: enabled ? {
-        "--hover-line-color": color,
-        "--hover-line-duration": `${duration}ms`,
-        "--hover-line-height": isNumber(height) ? `${height}px` : height
-      } : {}
-    };
-  }, [color, duration, enabled, height]);
-};
-export {
-  useHoverLineEffect
-};

package/dist/hooks/use-hover-line-effect/use-hover-line-effect.module.scss.js

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

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

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

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

@@ -1,14 +0,0 @@
-const textarea__container = "_textarea__container_bs49u_1";
-const textarea__main = "_textarea__main_bs49u_6";
-const textarea__control = "_textarea__control_bs49u_34";
-const classes = {
-  textarea__container,
-  textarea__main,
-  textarea__control
-};
-export {
-  classes as default,
-  textarea__container,
-  textarea__control,
-  textarea__main
-};