@janbox/storefront-ui 1.0.0

package/dist/constants/index.js

@@ -0,0 +1,32 @@
+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
+};

package/dist/hooks/index.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index$2 = require("./use-window-screen/index.cjs");
+const index = require("./use-hover-line-effect/index.cjs");
+const index$1 = require("./use-ripple-effect/index.cjs");
+const useControllableState = require("./use-controllable-state.cjs");
+const useCountdownTimer = require("./use-countdown-timer.cjs");
+const useQueryParams = require("./use-query-params.cjs");
+exports.useWindowScreen = index$2.useWindowScreen;
+exports.useHoverLineEffect = index.useHoverLineEffect;
+exports.useRippleEffect = index$1.useRippleEffect;
+exports.useControllableState = useControllableState.useControllableState;
+exports.useCountdownTimer = useCountdownTimer.useCountdownTimer;
+exports.useQueryParams = useQueryParams.useQueryParams;

package/dist/hooks/index.d.ts

@@ -0,0 +1,7 @@
+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';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/hooks/index.js

@@ -0,0 +1,14 @@
+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";
+export {
+  useControllableState,
+  useCountdownTimer,
+  useHoverLineEffect,
+  useQueryParams,
+  useRippleEffect,
+  useWindowScreen
+};

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const lodashEs = require("lodash-es");
+const reactUse = require("react-use");
+const getIsControlled = (value) => !lodashEs.isUndefined(value);
+const useControllableState = ({
+  defaultValue,
+  value,
+  deepCompare = false
+}) => {
+  const lastControlledValue = react.useRef(value);
+  const isControlled = getIsControlled(value);
+  const [internalValue, setInternalValue] = react.useState(isControlled ? value : defaultValue);
+  const currentValue = react.useMemo(() => {
+    return getIsControlled(value) ? value : lastControlledValue.current ?? internalValue;
+  }, [internalValue, value]);
+  const setValue = react.useCallback(
+    (nextValue) => {
+      if (isControlled) {
+        return;
+      }
+      setInternalValue(nextValue);
+    },
+    [isControlled]
+  );
+  reactUse.useUpdateEffect(() => {
+    if (deepCompare && lodashEs.isEqual(value, lastControlledValue.current)) {
+      return;
+    }
+    const nowControlled = getIsControlled(value);
+    if (!nowControlled && !lodashEs.isUndefined(lastControlledValue.current)) {
+      setInternalValue(lastControlledValue.current);
+    }
+    lastControlledValue.current = value;
+  }, [deepCompare, value]);
+  return [currentValue, setValue];
+};
+exports.useControllableState = useControllableState;

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

@@ -0,0 +1,7 @@
+import { Dispatch, SetStateAction } from 'react';
+export declare const useControllableState: <T>({ defaultValue, value, deepCompare, }: {
+    defaultValue: T;
+    value?: T;
+    deepCompare?: boolean;
+}) => readonly [T, Dispatch<SetStateAction<T>>];
+//# sourceMappingURL=use-controllable-state.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-controllable-state.d.ts","sourceRoot":"","sources":["../../src/hooks/use-controllable-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAA0C,MAAM,OAAO,CAAC;AAOzF,eAAO,MAAM,oBAAoB,GAAI,CAAC,yCAInC;IACD,YAAY,EAAE,CAAC,CAAC;IAChB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,8CAkCA,CAAC"}

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

@@ -0,0 +1,39 @@
+import { useRef, useState, useMemo, useCallback } from "react";
+import { isEqual, isUndefined } from "lodash-es";
+import { useUpdateEffect } from "react-use";
+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
+};

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

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const dayjs = require("dayjs");
+const reactUse = require("react-use");
+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 = react.useRef(onFinish);
+  const [timeDiff, setTimeDiff] = react.useState(getTimeDiff(dayjs(date).toDate(), omit));
+  finishFn.current = onFinish;
+  reactUse.useDeepCompareEffect(() => {
+    var _a;
+    const diff = getTimeDiff(date, omit);
+    setTimeDiff(diff);
+    if (diff.isFinished) {
+      (_a = finishFn.current) == null ? void 0 : _a.call(finishFn);
+      return;
+    }
+    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;
+};
+exports.useCountdownTimer = useCountdownTimer;

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

@@ -0,0 +1,14 @@
+export type TimeUnit = 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds';
+export type TotalTimeUnit = `total${Capitalize<TimeUnit>}`;
+export type TimeDiff = Record<TimeUnit, number> & Record<TotalTimeUnit, number> & {
+    isFinished: boolean;
+};
+type OmitTimeUnit = Partial<Record<TimeUnit, boolean>>;
+type UseCountdownTimerProps = {
+    date?: Date | string;
+    onFinish?: () => void;
+    omit?: OmitTimeUnit;
+};
+export declare const useCountdownTimer: ({ date, onFinish, omit }: UseCountdownTimerProps) => TimeDiff;
+export {};
+//# sourceMappingURL=use-countdown-timer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-countdown-timer.d.ts","sourceRoot":"","sources":["../../src/hooks/use-countdown-timer.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAE/F,MAAM,MAAM,aAAa,GAAG,QAAQ,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;AAE3D,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,GAC7C,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,GAAG;IAC9B,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEJ,KAAK,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;AAEvD,KAAK,sBAAsB,GAAG;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB,CAAC;AAmEF,eAAO,MAAM,iBAAiB,6BAAgD,sBAAsB,aA+BnG,CAAC"}

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

@@ -0,0 +1,85 @@
+import { useRef, useState } from "react";
+import dayjs from "dayjs";
+import { useDeepCompareEffect } from "react-use";
+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 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;
+};
+export {
+  useCountdownTimer
+};

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const lodashEs = require("lodash-es");
+const useHoverLineEffect_module = require("./use-hover-line-effect.module.scss.cjs");
+require("clsx");
+require("../../theme/palette.cjs");
+const stylesheet = require("../../utils/stylesheet.cjs");
+const useHoverLineEffect = (options = {}) => {
+  const { color = "currentColor", duration = 300, height = 1, enabled = true } = options;
+  return react.useMemo(() => {
+    return {
+      className: stylesheet.cn({
+        [useHoverLineEffect_module.default.hover_line_effect]: enabled
+      }),
+      style: enabled ? {
+        "--hover-line-color": color,
+        "--hover-line-duration": `${duration}ms`,
+        "--hover-line-height": lodashEs.isNumber(height) ? `${height}px` : height
+      } : {}
+    };
+  }, [color, duration, enabled, height]);
+};
+exports.useHoverLineEffect = useHoverLineEffect;

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-hover-line-effect/index.ts"],"names":[],"mappings":"AAQA,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;;WAcpD,KAAK,CAAC,aAAa;CAGnC,CAAC"}

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

@@ -0,0 +1,24 @@
+import { useMemo } from "react";
+import { isNumber } from "lodash-es";
+import classes from "./use-hover-line-effect.module.scss.js";
+import "clsx";
+import "../../theme/palette.js";
+import { cn } from "../../utils/stylesheet.js";
+const useHoverLineEffect = (options = {}) => {
+  const { color = "currentColor", duration = 300, height = 1, enabled = true } = options;
+  return useMemo(() => {
+    return {
+      className: cn({
+        [classes.hover_line_effect]: enabled
+      }),
+      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.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const hover_line_effect = "_hover_line_effect_dv0bz_1";
+const classes = {
+  hover_line_effect
+};
+exports.default = classes;
+exports.hover_line_effect = hover_line_effect;

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

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

package/dist/hooks/use-query-params.cjs

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const lodashEs = require("lodash-es");
+const reactRouter = require("react-router");
+const queryParams = require("../utils/query-params.cjs");
+function useQueryParams(config, defaultNavigateOpts = {}) {
+  const [searchParams, setSearchParams] = reactRouter.useSearchParams();
+  const defaultNavigateOptsRef = react.useRef(defaultNavigateOpts);
+  defaultNavigateOptsRef.current = defaultNavigateOpts;
+  const queryParams$1 = react.useMemo(() => {
+    const result = {};
+    Object.keys(config).forEach((key) => {
+      const paramConfig = config[key];
+      if (lodashEs.isPlainObject(paramConfig) && "parser" in paramConfig) {
+        lodashEs.set(result, key, paramConfig.parser(searchParams.get(key)));
+        return;
+      }
+      lodashEs.set(result, key, paramConfig);
+    });
+    return result;
+  }, [searchParams, config]);
+  const setQueryParams = react.useCallback(
+    (newParams, navigateOpts = {}) => {
+      setSearchParams(
+        (prev) => {
+          const simplifyParams = queryParams.simplifyQueryParams(newParams);
+          Object.keys(newParams).forEach((key) => {
+            const value = simplifyParams[key];
+            if (lodashEs.isNil(value)) {
+              return prev.delete(key);
+            }
+            return prev.set(key, value);
+          });
+          return prev;
+        },
+        {
+          ...defaultNavigateOptsRef.current,
+          ...navigateOpts
+        }
+      );
+    },
+    [setSearchParams]
+  );
+  return react.useMemo(
+    () => ({
+      queryParams: queryParams$1,
+      setQueryParams
+    }),
+    [queryParams$1, setQueryParams]
+  );
+}
+exports.useQueryParams = useQueryParams;

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

@@ -0,0 +1,20 @@
+import { NavigateOptions } from 'react-router';
+import { Nullable } from '../types';
+type ParserFn<T> = (value?: Nullable<string>) => T;
+type ParamConfig<T = unknown> = {
+    parser: ParserFn<T>;
+};
+type QueryParamsConfig<T extends Record<string, unknown>> = {
+    [K in keyof T]: T[K] | ParamConfig<T[K]>;
+};
+/**
+ * Hook để lấy và parse query parameters từ URL
+ * @param config Cấu hình cho việc transform và giá trị mặc định
+ * @returns [queryParams, setQueryParams] - Tuple chứa giá trị parsed và hàm update
+ */
+export declare function useQueryParams<T extends Record<string, any>>(config: QueryParamsConfig<T>, defaultNavigateOpts?: Partial<NavigateOptions>): {
+    queryParams: T;
+    setQueryParams: (newParams: Partial<T>, navigateOpts?: NavigateOptions) => void;
+};
+export {};
+//# sourceMappingURL=use-query-params.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-query-params.d.ts","sourceRoot":"","sources":["../../src/hooks/use-query-params.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAmB,MAAM,cAAc,CAAC;AAIhE,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAEnD,KAAK,WAAW,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9B,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;CACrB,CAAC;AAEF,KAAK,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;KACzD,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACzC,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1D,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAC5B,mBAAmB,GAAE,OAAO,CAAC,eAAe,CAAM;;gCAwBpC,OAAO,CAAC,CAAC,CAAC,iBAAgB,eAAe;EAgCxD"}

package/dist/hooks/use-query-params.js

@@ -0,0 +1,53 @@
+import { useRef, useMemo, useCallback } from "react";
+import { isPlainObject, set, isNil } from "lodash-es";
+import { useSearchParams } from "react-router";
+import { simplifyQueryParams } from "../utils/query-params.js";
+function useQueryParams(config, defaultNavigateOpts = {}) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const defaultNavigateOptsRef = useRef(defaultNavigateOpts);
+  defaultNavigateOptsRef.current = defaultNavigateOpts;
+  const queryParams = useMemo(() => {
+    const result = {};
+    Object.keys(config).forEach((key) => {
+      const paramConfig = config[key];
+      if (isPlainObject(paramConfig) && "parser" in paramConfig) {
+        set(result, key, paramConfig.parser(searchParams.get(key)));
+        return;
+      }
+      set(result, key, paramConfig);
+    });
+    return result;
+  }, [searchParams, config]);
+  const setQueryParams = useCallback(
+    (newParams, navigateOpts = {}) => {
+      setSearchParams(
+        (prev) => {
+          const simplifyParams = simplifyQueryParams(newParams);
+          Object.keys(newParams).forEach((key) => {
+            const value = simplifyParams[key];
+            if (isNil(value)) {
+              return prev.delete(key);
+            }
+            return prev.set(key, value);
+          });
+          return prev;
+        },
+        {
+          ...defaultNavigateOptsRef.current,
+          ...navigateOpts
+        }
+      );
+    },
+    [setSearchParams]
+  );
+  return useMemo(
+    () => ({
+      queryParams,
+      setQueryParams
+    }),
+    [queryParams, setQueryParams]
+  );
+}
+export {
+  useQueryParams
+};

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

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useRippleEffect_module = require("./use-ripple-effect.module.scss.cjs");
+const useRippleEffect = (ref, {
+  enabled = true,
+  color = "currentColor",
+  duration = 400,
+  opacity = 0.2,
+  sizeMultiplier = 1
+} = {}) => {
+  const createRippleCircle = react.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(useRippleEffect_module.default.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 = react.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]
+  );
+  react.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(useRippleEffect_module.default.ripple_effect__circle)) ?? []).forEach(
+        (circle) => circle.remove()
+      );
+    };
+  }, [start, enabled, ref]);
+  return react.useMemo(
+    () => ({
+      className: useRippleEffect_module.default.ripple_effect
+    }),
+    []
+  );
+};
+exports.useRippleEffect = useRippleEffect;