@janbox/storefront-ui 1.0.13 → 1.0.14

package/dist/constants/emotion.js

@@ -1,52 +1,49 @@
-import { keyframes } from "@emotion/react";
-import { breakpoint, mediaQuery } from "../theme/screens.js";
-const scrollbarNoneStyle = {
-  scrollbarWidth: "none",
-  "&::-webkit-scrollbar": { display: "none" }
+import { keyframes } from '@emotion/react';
+import { breakpoint, mediaQuery } from '../theme/screens';
+export const scrollbarNoneStyle = {
+    scrollbarWidth: 'none',
+    '&::-webkit-scrollbar': { display: 'none' },
 };
-const pulseKeyframes = keyframes`
+const pulseKeyframes = keyframes `
   50% { opacity: 0.5; }
 `;
-const spinKeyframes = keyframes`
+const spinKeyframes = keyframes `
   to { transform: rotate(360deg); }
 `;
-const animatePulseStyle = {
-  animation: `${pulseKeyframes} 2s cubic-bezier(0.4, 0, 0.6, 1) infinite`
+export const animatePulseStyle = {
+    animation: `${pulseKeyframes} 2s cubic-bezier(0.4, 0, 0.6, 1) infinite`,
 };
-const animateSpinStyle = {
-  animation: `${spinKeyframes} 1s linear infinite`
+export const animateSpinStyle = {
+    animation: `${spinKeyframes} 1s linear infinite`,
 };
-const truncateStyle = {
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
+// ─── Common Utility Styles ────────────────────────────────────────────────────
+export const truncateStyle = {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
 };
-const containerStyle = {
-  width: "100%",
-  marginLeft: "auto",
-  marginRight: "auto",
-  paddingLeft: `${breakpoint.xs.padding}px`,
-  paddingRight: `${breakpoint.xs.padding}px`,
-  [mediaQuery("sm")]: {
-    maxWidth: `${breakpoint.sm.minWidth}px`,
-    paddingLeft: `${breakpoint.sm.padding}px`,
-    paddingRight: `${breakpoint.sm.padding}px`
-  },
-  [mediaQuery("md")]: {
-    maxWidth: `${breakpoint.md.minWidth}px`,
-    paddingLeft: `${breakpoint.md.padding}px`,
-    paddingRight: `${breakpoint.md.padding}px`
-  },
-  [mediaQuery("lg")]: {
-    maxWidth: `${breakpoint.lg.minWidth}px`,
-    paddingLeft: `${breakpoint.lg.padding}px`,
-    paddingRight: `${breakpoint.lg.padding}px`
-  }
+export const pointerEventsNone = {
+    pointerEvents: 'none',
 };
-export {
-  animatePulseStyle,
-  animateSpinStyle,
-  containerStyle,
-  scrollbarNoneStyle,
-  truncateStyle
+export const containerStyle = {
+    width: '100%',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    paddingLeft: `${breakpoint.xs.padding}px`,
+    paddingRight: `${breakpoint.xs.padding}px`,
+    [mediaQuery('sm')]: {
+        maxWidth: `${breakpoint.sm.minWidth}px`,
+        paddingLeft: `${breakpoint.sm.padding}px`,
+        paddingRight: `${breakpoint.sm.padding}px`,
+    },
+    [mediaQuery('md')]: {
+        maxWidth: `${breakpoint.md.minWidth}px`,
+        paddingLeft: `${breakpoint.md.padding}px`,
+        paddingRight: `${breakpoint.md.padding}px`,
+    },
+    [mediaQuery('lg')]: {
+        maxWidth: `${breakpoint.lg.minWidth}px`,
+        paddingLeft: `${breakpoint.lg.padding}px`,
+        paddingRight: `${breakpoint.lg.padding}px`,
+    },
 };

package/dist/constants/index.d.ts

@@ -1,4 +1,4 @@
-import { default as IMAGE_PLACEHOLDER } from '../assets/svg/image-placeholder.svg?url';
+import IMAGE_PLACEHOLDER from '../assets/svg/image-placeholder.svg?url';
 export declare const USER_COMPONENT_LOCALE_NAMESPACE = "user-component";
 export declare enum HTMLDatasetAttributes {
     DATA_TEST_ID = "data-testid",
@@ -18,4 +18,3 @@ export declare enum Booleanish {
     True = "true",
     False = "false"
 }
-//# sourceMappingURL=index.d.ts.map

package/dist/constants/index.js

@@ -1,32 +1,24 @@
-import { default as default2 } from "../assets/svg/image-placeholder.svg.js";
-const USER_COMPONENT_LOCALE_NAMESPACE = "user-component";
-var HTMLDatasetAttributes = /* @__PURE__ */ ((HTMLDatasetAttributes2) => {
-  HTMLDatasetAttributes2["DATA_TEST_ID"] = "data-testid";
-  HTMLDatasetAttributes2["ARIA_DISABLED"] = "aria-disabled";
-  HTMLDatasetAttributes2["ARIA_READONLY"] = "aria-readonly";
-  HTMLDatasetAttributes2["DATA_MENU_ITEM"] = "data-menu-item";
-  HTMLDatasetAttributes2["DATA_MENU_LIST"] = "data-menu-list";
-  return HTMLDatasetAttributes2;
-})(HTMLDatasetAttributes || {});
-var HTMLClasses = /* @__PURE__ */ ((HTMLClasses2) => {
-  HTMLClasses2["MARQUEE_SLIDE"] = "marquee-slide";
-  return HTMLClasses2;
-})(HTMLClasses || {});
-const FALLBACK_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24"></svg>`;
-const TYPING_DEBOUNCE = 400;
-const isSSR = typeof window === "undefined";
-var Booleanish = /* @__PURE__ */ ((Booleanish2) => {
-  Booleanish2["True"] = "true";
-  Booleanish2["False"] = "false";
-  return Booleanish2;
-})(Booleanish || {});
-export {
-  Booleanish,
-  FALLBACK_SVG,
-  HTMLClasses,
-  HTMLDatasetAttributes,
-  default2 as IMAGE_PLACEHOLDER,
-  TYPING_DEBOUNCE,
-  USER_COMPONENT_LOCALE_NAMESPACE,
-  isSSR
-};
+import IMAGE_PLACEHOLDER from '../assets/svg/image-placeholder.svg?url';
+export const USER_COMPONENT_LOCALE_NAMESPACE = 'user-component';
+export var HTMLDatasetAttributes;
+(function (HTMLDatasetAttributes) {
+    HTMLDatasetAttributes["DATA_TEST_ID"] = "data-testid";
+    HTMLDatasetAttributes["ARIA_DISABLED"] = "aria-disabled";
+    HTMLDatasetAttributes["ARIA_READONLY"] = "aria-readonly";
+    HTMLDatasetAttributes["DATA_MENU_ITEM"] = "data-menu-item";
+    HTMLDatasetAttributes["DATA_MENU_LIST"] = "data-menu-list";
+})(HTMLDatasetAttributes || (HTMLDatasetAttributes = {}));
+export var HTMLClasses;
+(function (HTMLClasses) {
+    HTMLClasses["MARQUEE_SLIDE"] = "marquee-slide";
+})(HTMLClasses || (HTMLClasses = {}));
+export const FALLBACK_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24"></svg>`;
+// --- Merged from packages/core/constants ---
+export const TYPING_DEBOUNCE = 400;
+export const isSSR = typeof window === 'undefined';
+export { IMAGE_PLACEHOLDER };
+export var Booleanish;
+(function (Booleanish) {
+    Booleanish["True"] = "true";
+    Booleanish["False"] = "false";
+})(Booleanish || (Booleanish = {}));

package/dist/hooks/index.d.ts

@@ -1,10 +1,9 @@
-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';
-export * from './use-query-params';
-export * from './use-first-mount-state';
-export * from './use-update-effect';
-export * from './use-deep-compare-effect';
-//# sourceMappingURL=index.d.ts.map
+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";
+export * from "./use-query-params";
+export * from "./use-first-mount-state";
+export * from "./use-update-effect";
+export * from "./use-deep-compare-effect";

package/dist/hooks/index.js

@@ -1,20 +1,9 @@
-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";
-import { useQueryParams } from "./use-query-params.js";
-import { useFirstMountState } from "./use-first-mount-state/index.js";
-import { useUpdateEffect } from "./use-update-effect/index.js";
-import { useDeepCompareEffect } from "./use-deep-compare-effect/index.js";
-export {
-  useControllableState,
-  useCountdownTimer,
-  useDeepCompareEffect,
-  useFirstMountState,
-  useHoverLineEffect,
-  useQueryParams,
-  useRippleEffect,
-  useUpdateEffect,
-  useWindowScreen
-};
+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";
+export * from "./use-query-params";
+export * from "./use-first-mount-state";
+export * from "./use-update-effect";
+export * from "./use-deep-compare-effect";

package/dist/hooks/use-controllable-state.d.ts

@@ -4,4 +4,3 @@ export declare const useControllableState: <T>({ defaultValue, value, deepCompar
     value?: T;
     deepCompare?: boolean;
 }) => readonly [T, Dispatch<SetStateAction<T>>];
-//# sourceMappingURL=use-controllable-state.d.ts.map

package/dist/hooks/use-controllable-state.js

@@ -1,39 +1,29 @@
-import { useRef, useState, useMemo, useCallback } from "react";
-import { isUndefined, isEqual } from "lodash-es";
-import { useUpdateEffect } from "./use-update-effect/index.js";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { isEqual, isUndefined } from 'lodash-es';
+import { useUpdateEffect } from './use-update-effect';
 const getIsControlled = (value) => !isUndefined(value);
-const useControllableState = ({
-  defaultValue,
-  value,
-  deepCompare = false
-}) => {
-  const lastControlledValue = useRef(value);
-  const isControlled = getIsControlled(value);
-  const [internalValue, setInternalValue] = useState(isControlled ? value : defaultValue);
-  const currentValue = useMemo(() => {
-    return getIsControlled(value) ? value : lastControlledValue.current ?? internalValue;
-  }, [internalValue, value]);
-  const setValue = useCallback(
-    (nextValue) => {
-      if (isControlled) {
-        return;
-      }
-      setInternalValue(nextValue);
-    },
-    [isControlled]
-  );
-  useUpdateEffect(() => {
-    if (deepCompare && isEqual(value, lastControlledValue.current)) {
-      return;
-    }
-    const nowControlled = getIsControlled(value);
-    if (!nowControlled && !isUndefined(lastControlledValue.current)) {
-      setInternalValue(lastControlledValue.current);
-    }
-    lastControlledValue.current = value;
-  }, [deepCompare, value]);
-  return [currentValue, setValue];
-};
-export {
-  useControllableState
+export const useControllableState = ({ defaultValue, value, deepCompare = false, }) => {
+    const lastControlledValue = useRef(value);
+    const isControlled = getIsControlled(value);
+    const [internalValue, setInternalValue] = useState(isControlled ? value : defaultValue);
+    const currentValue = useMemo(() => {
+        return getIsControlled(value) ? value : (lastControlledValue.current ?? internalValue);
+    }, [internalValue, value]);
+    const setValue = useCallback((nextValue) => {
+        if (isControlled) {
+            return;
+        }
+        setInternalValue(nextValue);
+    }, [isControlled]);
+    useUpdateEffect(() => {
+        if (deepCompare && isEqual(value, lastControlledValue.current)) {
+            return;
+        }
+        const nowControlled = getIsControlled(value);
+        if (!nowControlled && !isUndefined(lastControlledValue.current)) {
+            setInternalValue(lastControlledValue.current);
+        }
+        lastControlledValue.current = value;
+    }, [deepCompare, value]);
+    return [currentValue, setValue];
 };

package/dist/hooks/use-countdown-timer.d.ts

@@ -11,4 +11,3 @@ type UseCountdownTimerProps = {
 };
 export declare const useCountdownTimer: ({ date, onFinish, omit }: UseCountdownTimerProps) => TimeDiff;
 export {};
-//# sourceMappingURL=use-countdown-timer.d.ts.map

package/dist/hooks/use-countdown-timer.js

@@ -1,85 +1,80 @@
-import { useRef, useState } from "react";
-import dayjs from "dayjs";
-import { useDeepCompareEffect } from "./use-deep-compare-effect/index.js";
+import { useRef, useState } from 'react';
+import dayjs from 'dayjs';
+import { useDeepCompareEffect } from './use-deep-compare-effect';
 const getTimeDiff = (end, omit) => {
-  const now = dayjs();
-  const target = dayjs(end);
-  const totalSeconds = target.diff(now, "second");
-  const totalMinutes = target.diff(now, "minute");
-  const totalHours = target.diff(now, "hour");
-  const totalDays = target.diff(now, "day");
-  const totalWeeks = target.diff(now, "week");
-  const totalMonths = target.diff(now, "month");
-  const totalYears = target.diff(now, "year");
-  let temp = now;
-  const years = Math.max(target.diff(temp, "year"), 0);
-  if (!omit.years) {
-    temp = temp.add(years, "year");
-  }
-  const months = Math.max(target.diff(temp, "month"), 0);
-  if (!omit.months) {
-    temp = temp.add(months, "month");
-  }
-  const weeks = Math.max(target.diff(temp, "week"), 0);
-  if (!omit.weeks) {
-    temp = temp.add(weeks, "week");
-  }
-  const days = Math.max(target.diff(temp, "day"), 0);
-  if (!omit.days) {
-    temp = temp.add(days, "day");
-  }
-  const hours = Math.max(target.diff(temp, "hour"), 0);
-  if (!omit.hours) {
-    temp = temp.add(hours, "hour");
-  }
-  const minutes = Math.max(target.diff(temp, "minute"), 0);
-  if (!omit.minutes) {
-    temp = temp.add(minutes, "minute");
-  }
-  const seconds = Math.max(target.diff(temp, "second"), 0);
-  return {
-    years,
-    months,
-    weeks,
-    days,
-    hours,
-    minutes,
-    seconds,
-    isFinished: totalSeconds <= 0,
-    totalSeconds,
-    totalMinutes,
-    totalHours,
-    totalDays,
-    totalWeeks,
-    totalMonths,
-    totalYears
-  };
-};
-const useCountdownTimer = ({ date = /* @__PURE__ */ new Date(), onFinish, omit = {} }) => {
-  const finishFn = useRef(onFinish);
-  const [timeDiff, setTimeDiff] = useState(getTimeDiff(dayjs(date).toDate(), omit));
-  finishFn.current = onFinish;
-  useDeepCompareEffect(() => {
-    var _a;
-    const diff = getTimeDiff(date, omit);
-    setTimeDiff(diff);
-    if (diff.isFinished) {
-      (_a = finishFn.current) == null ? void 0 : _a.call(finishFn);
-      return;
+    const now = dayjs();
+    const target = dayjs(end);
+    const totalSeconds = target.diff(now, 'second');
+    const totalMinutes = target.diff(now, 'minute');
+    const totalHours = target.diff(now, 'hour');
+    const totalDays = target.diff(now, 'day');
+    const totalWeeks = target.diff(now, 'week');
+    const totalMonths = target.diff(now, 'month');
+    const totalYears = target.diff(now, 'year');
+    let temp = now;
+    const years = Math.max(target.diff(temp, 'year'), 0);
+    if (!omit.years) {
+        temp = temp.add(years, 'year');
+    }
+    const months = Math.max(target.diff(temp, 'month'), 0);
+    if (!omit.months) {
+        temp = temp.add(months, 'month');
+    }
+    const weeks = Math.max(target.diff(temp, 'week'), 0);
+    if (!omit.weeks) {
+        temp = temp.add(weeks, 'week');
+    }
+    const days = Math.max(target.diff(temp, 'day'), 0);
+    if (!omit.days) {
+        temp = temp.add(days, 'day');
+    }
+    const hours = Math.max(target.diff(temp, 'hour'), 0);
+    if (!omit.hours) {
+        temp = temp.add(hours, 'hour');
+    }
+    const minutes = Math.max(target.diff(temp, 'minute'), 0);
+    if (!omit.minutes) {
+        temp = temp.add(minutes, 'minute');
     }
-    const interval = setInterval(() => {
-      var _a2;
-      const diff2 = getTimeDiff(date, omit);
-      setTimeDiff(diff2);
-      if (diff2.isFinished) {
-        (_a2 = finishFn.current) == null ? void 0 : _a2.call(finishFn);
-        clearInterval(interval);
-      }
-    }, 1e3);
-    return () => clearInterval(interval);
-  }, [date, omit]);
-  return timeDiff;
+    const seconds = Math.max(target.diff(temp, 'second'), 0);
+    return {
+        years,
+        months,
+        weeks,
+        days,
+        hours,
+        minutes,
+        seconds,
+        isFinished: totalSeconds <= 0,
+        totalSeconds,
+        totalMinutes,
+        totalHours,
+        totalDays,
+        totalWeeks,
+        totalMonths,
+        totalYears,
+    };
 };
-export {
-  useCountdownTimer
+export const useCountdownTimer = ({ date = new Date(), onFinish, omit = {} }) => {
+    const finishFn = useRef(onFinish);
+    const [timeDiff, setTimeDiff] = useState(getTimeDiff(dayjs(date).toDate(), omit));
+    finishFn.current = onFinish;
+    useDeepCompareEffect(() => {
+        const diff = getTimeDiff(date, omit);
+        setTimeDiff(diff);
+        if (diff.isFinished) {
+            finishFn.current?.();
+            return;
+        }
+        const interval = setInterval(() => {
+            const diff = getTimeDiff(date, omit);
+            setTimeDiff(diff);
+            if (diff.isFinished) {
+                finishFn.current?.();
+                clearInterval(interval);
+            }
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [date, omit]);
+    return timeDiff;
 };

package/dist/hooks/use-deep-compare-effect/index.d.ts

@@ -1,3 +1,2 @@
-import { DependencyList, EffectCallback } from 'react';
+import { DependencyList, EffectCallback } from "react";
 export declare const useDeepCompareEffect: (effect: EffectCallback, deps: DependencyList) => void;
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-deep-compare-effect/index.js

@@ -1,15 +1,12 @@
 import { useEffect, useRef } from "react";
 import { isEqual } from "lodash-es";
 function useDeepCompareMemoize(deps) {
-  const ref = useRef(deps);
-  if (!isEqual(deps, ref.current)) {
-    ref.current = deps;
-  }
-  return ref.current;
+    const ref = useRef(deps);
+    if (!isEqual(deps, ref.current)) {
+        ref.current = deps;
+    }
+    return ref.current;
 }
-const useDeepCompareEffect = (effect, deps) => {
-  useEffect(effect, useDeepCompareMemoize(deps));
-};
-export {
-  useDeepCompareEffect
+export const useDeepCompareEffect = (effect, deps) => {
+    useEffect(effect, useDeepCompareMemoize(deps));
 };

package/dist/hooks/use-first-mount-state/index.d.ts

@@ -1,2 +1 @@
 export declare function useFirstMountState(): boolean;
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-first-mount-state/index.js

@@ -1,12 +1,9 @@
 import { useRef } from "react";
-function useFirstMountState() {
-  const isFirst = useRef(true);
-  if (isFirst.current) {
-    isFirst.current = false;
-    return true;
-  }
-  return isFirst.current;
+export function useFirstMountState() {
+    const isFirst = useRef(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
 }
-export {
-  useFirstMountState
-};

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

@@ -9,4 +9,3 @@ export declare const useHoverLineEffect: (options?: UseHoverLineEffectOptions) =
     style: React.CSSProperties;
 };
 export {};
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,19 +1,18 @@
-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
+import { useMemo } from 'react';
+import { isNumber } from 'lodash-es';
+import classes from './use-hover-line-effect.module.scss';
+export 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]);
 };

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

@@ -0,0 +1,21 @@
+.hover_line_effect {
+  position: relative;
+
+  &::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::after {
+    transform: scaleX(1);
+  }
+}

package/dist/hooks/use-is-hydrated/index.d.ts

@@ -1,2 +1 @@
 export declare function useIsHydrated(): boolean;
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-is-hydrated/index.js

@@ -1,11 +1,9 @@
-import { useState, useEffect } from "react";
-function useIsHydrated() {
-  const [isHydrated, setIsHydrated] = useState(false);
-  useEffect(() => {
-    setIsHydrated(true);
-  }, []);
-  return isHydrated;
+// Example using a custom hook approach
+import { useState, useEffect } from 'react';
+export function useIsHydrated() {
+    const [isHydrated, setIsHydrated] = useState(false);
+    useEffect(() => {
+        setIsHydrated(true);
+    }, []);
+    return isHydrated;
 }
-export {
-  useIsHydrated
-};

package/dist/hooks/use-query-params.d.ts

@@ -17,4 +17,3 @@ export declare function useQueryParams<T extends Record<string, any>>(config: Qu
     setQueryParams: (newParams: Partial<T>, navigateOpts?: NavigateOptions) => void;
 };
 export {};
-//# sourceMappingURL=use-query-params.d.ts.map