@janbox/storefront-ui 2.0.10 → 2.0.12

package/dist/constants/index.d.ts

@@ -1,5 +1,4 @@
 import { default as 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",
     ARIA_DISABLED = "aria-disabled",
@@ -18,7 +17,4 @@ export declare enum Booleanish {
     True = "true",
     False = "false"
 }
-export declare enum LocaleNamespaces {
-    Translation = "ui__translation"
-}
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,yCAAyC,CAAC;AAExE,eAAO,MAAM,+BAA+B,mBAAmB,CAAC;AAEhE,oBAAY,qBAAqB;IAC/B,YAAY,gBAAgB;IAC5B,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;IAC/B,cAAc,mBAAmB;IACjC,cAAc,mBAAmB;CAClC;AAED,oBAAY,WAAW;IACrB,aAAa,kBAAkB;CAChC;AAED,eAAO,MAAM,YAAY,oHAA0G,CAAC;AAIpI,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,eAAO,MAAM,KAAK,SAAgC,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,oBAAY,UAAU;IACpB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,oBAAY,gBAAgB;IAC1B,WAAW,oBAAoB;CAChC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,yCAAyC,CAAC;AAExE,oBAAY,qBAAqB;IAC/B,YAAY,gBAAgB;IAC5B,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;IAC/B,cAAc,mBAAmB;IACjC,cAAc,mBAAmB;CAClC;AAED,oBAAY,WAAW;IACrB,aAAa,kBAAkB;CAChC;AAED,eAAO,MAAM,YAAY,oHAA0G,CAAC;AAIpI,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,eAAO,MAAM,KAAK,SAAgC,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,oBAAY,UAAU;IACpB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB"}

package/dist/constants/index.js

@@ -1,5 +1,4 @@
 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";
@@ -20,18 +19,12 @@ var Booleanish = /* @__PURE__ */ ((Booleanish2) => {
   Booleanish2["False"] = "false";
   return Booleanish2;
 })(Booleanish || {});
-var LocaleNamespaces = /* @__PURE__ */ ((LocaleNamespaces2) => {
-  LocaleNamespaces2["Translation"] = "ui__translation";
-  return LocaleNamespaces2;
-})(LocaleNamespaces || {});
 export {
   Booleanish,
   FALLBACK_SVG,
   HTMLClasses,
   HTMLDatasetAttributes,
   default2 as IMAGE_PLACEHOLDER,
-  LocaleNamespaces,
   TYPING_DEBOUNCE,
-  USER_COMPONENT_LOCALE_NAMESPACE,
   isSSR
 };

package/dist/hooks/use-formatter/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-formatter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,kBAAkB,EAElB,qBAAqB,EAErB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAIjB,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,eAAO,MAAM,YAAY;0BAIb,MAAM,YAAY,OAAO,CAAC,mBAAmB,CAAC;4BAO9C,IAAI,GAAG,MAAM,GAAG,MAAM,WAAW,WAAW,CAAC,qBAAqB,EAAE,KAAK,CAAC;yBAU1E,MAAM,WAAW,WAAW,CAAC,kBAAkB,EAAE,KAAK,CAAC;CAclE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-formatter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,kBAAkB,EAElB,qBAAqB,EAErB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,eAAO,MAAM,YAAY;0BAIb,MAAM,YAAY,OAAO,CAAC,mBAAmB,CAAC;4BAO9C,IAAI,GAAG,MAAM,GAAG,MAAM,WAAW,WAAW,CAAC,qBAAqB,EAAE,KAAK,CAAC;yBAU1E,MAAM,WAAW,WAAW,CAAC,kBAAkB,EAAE,KAAK,CAAC;CAclE,CAAC"}

package/dist/hooks/use-formatter/index.js

@@ -1,28 +1,28 @@
 import { formatNumber, formatDateTime, formatPrice } from "../../utils/index.js";
 import { useCallback, useMemo } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../../i18n/index.js";
 const useFormatter = () => {
-  const { i18n } = useTranslation();
+  const { locale } = useTranslation();
   const formatNumberFn = useCallback(
     (value, options) => {
-      return formatNumber(value, { lng: i18n.language, ...options });
+      return formatNumber(value, { lng: locale, ...options });
     },
-    [i18n.language]
+    [locale]
   );
   const formatDateTimeFn = useCallback(
     (value, options) => {
       return formatDateTime(value, {
         ...options,
-        lng: options.lng ?? i18n.language
+        lng: options.lng ?? locale
       });
     },
-    [i18n.language]
+    [locale]
   );
   const formatPriceFn = useCallback(
     (value, options) => {
-      return formatPrice(value, { ...options, lng: options.lng ?? i18n.language });
+      return formatPrice(value, { ...options, lng: options.lng ?? locale });
     },
-    [i18n.language]
+    [locale]
   );
   return useMemo(
     () => ({

package/dist/i18n/index.d.ts

@@ -0,0 +1,8 @@
+import { default as en } from './locales/en.json';
+export declare const FALLBACK_LOCALE = "en";
+export declare const LocaleContext: import('react').Context<string>;
+export declare const useTranslation: () => {
+    t: (key: keyof typeof en) => string;
+    locale: string;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/i18n/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAQnC,eAAO,MAAM,eAAe,OAAO,CAAC;AAEpC,eAAO,MAAM,aAAa,iCAAiC,CAAC;AAE5D,eAAO,MAAM,cAAc;aAKZ,MAAM,OAAO,EAAE;;CAI7B,CAAC"}

package/dist/i18n/index.js

@@ -0,0 +1,26 @@
+import { useContext, useMemo, createContext } from "react";
+import en from "./locales/en.json.js";
+import vi from "./locales/vi.json.js";
+const translations = {
+  en,
+  vi
+};
+const FALLBACK_LOCALE = "en";
+const LocaleContext = createContext(FALLBACK_LOCALE);
+const useTranslation = () => {
+  const locale = useContext(LocaleContext);
+  return useMemo(() => {
+    return {
+      t: (key) => {
+        var _a, _b;
+        return ((_a = translations[locale]) == null ? void 0 : _a[key]) ?? ((_b = translations.en) == null ? void 0 : _b[key]) ?? key;
+      },
+      locale
+    };
+  }, [locale]);
+};
+export {
+  FALLBACK_LOCALE,
+  LocaleContext,
+  useTranslation
+};

package/dist/i18n/locales/en.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "updating": "Updating"
+}
+;
+
+export default _default;

package/dist/i18n/locales/en.json.js

@@ -0,0 +1,8 @@
+const updating = "Updating";
+const en = {
+  updating
+};
+export {
+  en as default,
+  updating
+};

package/dist/i18n/locales/vi.json.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+  "updating": "Đang cập nhật"
+};
+
+export default _default;

package/dist/i18n/locales/vi.json.js

@@ -0,0 +1,8 @@
+const updating = "Đang cập nhật";
+const vi = {
+  updating
+};
+export {
+  vi as default,
+  updating
+};

package/dist/index.js

@@ -7,6 +7,7 @@ import { AccordionGroupContext, getAccordionGroupDataAttributes, getAccordionGro
 import { AccordionGroupDataAttributes } from "./lib/accordion/accordion-group/types.js";
 import { AccordionSummary } from "./lib/accordion/accordion-summary/accordion-summary.js";
 import { AccordionSummaryVariant } from "./lib/accordion/accordion-summary/types.js";
+import { Avatar } from "./lib/avatar/avatar.js";
 import { Badge } from "./lib/badge/badge.js";
 import { BlockSkeleton } from "./lib/loading/block-skeleton/block-skeleton.js";
 import { Box } from "./lib/box/box.js";
@@ -150,6 +151,7 @@ export {
   AccordionGroupDataAttributes,
   AccordionSummary,
   AccordionSummaryVariant,
+  Avatar,
   Badge,
   BlockSkeleton,
   Box,

package/dist/lib/avatar/avatar.d.ts

@@ -0,0 +1,3 @@
+import { AvatarProps } from './types';
+export declare const Avatar: ({ ref, ..._props }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/lib/avatar/avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAyB,MAAM,SAAS,CAAC;AAQ7D,eAAO,MAAM,MAAM,uBAAwB,WAAW,4CAwFrD,CAAC"}

package/dist/lib/avatar/avatar.js

@@ -0,0 +1,124 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { getAvatarProps, getInitials, getAvatarStatusColor } from "./helpers.js";
+import { isNil } from "lodash-es";
+import { getColorVar } from "../../theme/palette.js";
+import { useUpdateEffect } from "../../hooks/use-update-effect/index.js";
+import { Primitive } from "../primitive/primitive.js";
+const Avatar = ({ ref, ..._props }) => {
+  var _a, _b, _c;
+  const { src, name, color = "primary", size = 40, status, sm, md, lg, ...rest } = getAvatarProps(_props);
+  const [avatarSrc, setAvatarSrc] = useState(src);
+  useUpdateEffect(() => {
+    setAvatarSrc(src);
+  }, [src]);
+  return /* @__PURE__ */ jsxs(
+    Primitive,
+    {
+      ref,
+      ...rest,
+      sx: {
+        position: "relative",
+        ...createStyle({ size }),
+        ...rest.sx,
+        sm: {
+          ...createStyle(sm),
+          ...(_a = rest.sx) == null ? void 0 : _a.sm
+        },
+        md: {
+          ...createStyle(md),
+          ...(_b = rest.sx) == null ? void 0 : _b.md
+        },
+        lg: {
+          ...createStyle(lg),
+          ...(_c = rest.sx) == null ? void 0 : _c.lg
+        }
+      },
+      children: [
+        avatarSrc ? /* @__PURE__ */ jsx(
+          Primitive,
+          {
+            src,
+            alt: name ?? "",
+            onError: () => setAvatarSrc(void 0),
+            sx: {
+              position: "absolute",
+              width: "100%",
+              height: "100%",
+              display: "block",
+              objectFit: "inherit",
+              borderRadius: "inherit"
+            },
+            as: "img"
+          }
+        ) : /* @__PURE__ */ jsx(
+          Primitive,
+          {
+            sx: {
+              position: "absolute",
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: getColorVar(`${color}.600`),
+              color: getColorVar("white"),
+              fontWeight: 600,
+              lineHeight: 1,
+              borderRadius: "inherit",
+              ...createInitialsStyle({ size }),
+              sm: createInitialsStyle(sm),
+              md: createInitialsStyle(md),
+              lg: createInitialsStyle(lg)
+            },
+            children: getInitials(name)
+          }
+        ),
+        status && /* @__PURE__ */ jsx(
+          Primitive,
+          {
+            as: "span",
+            sx: {
+              position: "absolute",
+              bottom: 0,
+              right: 0,
+              borderRadius: "50%",
+              backgroundColor: getAvatarStatusColor(status),
+              borderWidth: 2,
+              borderColor: getColorVar("white"),
+              ...createStatusStyle({ size }),
+              sm: createStatusStyle(sm),
+              md: createStatusStyle(md),
+              lg: createStatusStyle(lg)
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+const createStyle = ({ size } = {}) => {
+  return {
+    width: size,
+    height: size,
+    minWidth: size,
+    minHeight: size
+  };
+};
+const createStatusStyle = ({ size } = {}) => {
+  if (isNil(size)) return {};
+  const dotSize = Math.round(size * 0.28);
+  return {
+    width: dotSize,
+    height: dotSize
+  };
+};
+const createInitialsStyle = ({ size } = {}) => {
+  if (isNil(size)) return {};
+  return {
+    fontSize: Math.round(size * 0.4)
+  };
+};
+export {
+  Avatar
+};

package/dist/lib/avatar/helpers.d.ts

@@ -0,0 +1,6 @@
+import { AvatarProps, AvatarStatus } from './types';
+export declare const getAvatarProps: (props: AvatarProps) => AvatarProps;
+/** Resolve dimension from named size or custom number */
+export declare const getInitials: (name?: string) => string;
+export declare const getAvatarStatusColor: (status: AvatarStatus) => string | undefined;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/avatar/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/avatar/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAapD,eAAO,MAAM,cAAc,UAAW,WAAW,KAAG,WAEnD,CAAC;AAEF,yDAAyD;AAEzD,eAAO,MAAM,WAAW,2BAIvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,WAAY,YAAY,uBAaxD,CAAC"}

package/dist/lib/avatar/helpers.js

@@ -0,0 +1,37 @@
+import { mergeComponentProps } from "../../utils/index.js";
+import "lodash-es";
+import { getColorVar } from "../../theme/palette.js";
+const defaultProps = {
+  size: 40,
+  sx: {
+    borderRadius: "50%",
+    objectFit: "cover"
+  }
+};
+const getAvatarProps = (props) => {
+  return mergeComponentProps(defaultProps, props);
+};
+const getInitials = (name = "") => {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+};
+const getAvatarStatusColor = (status) => {
+  switch (status) {
+    case "online":
+      return getColorVar("green.600");
+    case "offline":
+      return getColorVar("neutral.600");
+    case "busy":
+      return getColorVar("red.600");
+    case "away":
+      return getColorVar("orange.600");
+    default:
+      return;
+  }
+};
+export {
+  getAvatarProps,
+  getAvatarStatusColor,
+  getInitials
+};

package/dist/lib/avatar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './avatar';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}

package/dist/lib/avatar/types.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from 'react';
+import { ColorVariant, PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../types';
+export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+export type AvatarResponsiveProps = {
+    size?: number;
+};
+type AvatarHTMLProps = JSX.IntrinsicElements['div'];
+export type AvatarProps = PropsWithSx<ShallowMerge<AvatarHTMLProps, ToResponsiveProps<AvatarResponsiveProps> & {
+    /** URL of the avatar image */
+    src?: string;
+    /** User's name — used for initials fallback and alt/aria-label */
+    name?: string;
+    /** Shape of the avatar */
+    /** Online status indicator */
+    status?: AvatarStatus;
+    color?: ColorVariant;
+}>>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/avatar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/avatar/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAErF,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAElE,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,eAAe,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAEpD,MAAM,MAAM,WAAW,GAAG,WAAW,CACnC,YAAY,CACV,eAAe,EACf,iBAAiB,CAAC,qBAAqB,CAAC,GAAG;IACzC,8BAA8B;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,8BAA8B;IAC9B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB,CACF,CACF,CAAC"}

package/dist/lib/count-up/count-up.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"count-up.d.ts","sourceRoot":"","sources":["../../../src/lib/count-up/count-up.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAIvC,eAAO,MAAM,OAAO,+DAAwE,YAAY,4CAiCvG,CAAC"}
+{"version":3,"file":"count-up.d.ts","sourceRoot":"","sources":["../../../src/lib/count-up/count-up.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAKvC,eAAO,MAAM,OAAO,+DAAwE,YAAY,4CAiCvG,CAAC"}

package/dist/lib/count-up/count-up.js

@@ -2,12 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { useMotionValue, useInView, useTransform, animate, motion } from "motion/react";
-import { useTranslation } from "react-i18next";
 import { formatNumber } from "../../utils/index.js";
+import { useTranslation } from "../../i18n/index.js";
 import { getDecimalDigits } from "../../utils/common.js";
 const CountUp = ({ from = 0, to, duration = 2, formatNumberOptions, ref, ...props }) => {
   const rootRef = useRef(null);
-  const { i18n } = useTranslation();
+  const { locale } = useTranslation();
   const mergedRef = useMergeRefs([ref, rootRef]);
   const maximumFractionDigits = Math.max(getDecimalDigits(from), getDecimalDigits(to));
   const count = useMotionValue(from);
@@ -15,7 +15,7 @@ const CountUp = ({ from = 0, to, duration = 2, formatNumberOptions, ref, ...prop
   const rounded = useTransform(
     count,
     (latest) => formatNumber(latest, {
-      lng: i18n.language,
+      lng: locale,
       ...formatNumberOptions,
       maximumFractionDigits
     })

package/dist/lib/index.d.ts

@@ -58,4 +58,5 @@ export * from './lightbox';
 export * from './cascader';
 export * from './primitive';
 export * from './price-label';
+export * from './avatar';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC"}

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

@@ -1,3 +1,3 @@
 import { LinkProps } from './types';
-export declare const Link: ({ children, ref, ..._props }: LinkProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Link: ({ children, ref, ..._props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=link.d.ts.map

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;AAOzD,eAAO,MAAM,IAAI,iCAAkC,SAAS,qDAoD3D,CAAC"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/lib/link/link.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAOzD,eAAO,MAAM,IAAI,iCAAkC,SAAS,4CAoD3D,CAAC"}

package/dist/lib/link/link.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { ClassNames } from "@emotion/react";
 import { isNil } from "lodash-es";
 import { Link as Link$1 } from "react-router";

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,4CAoFjD,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;AAOtF,eAAO,MAAM,UAAU,WAAY,eAAe,4CAsGjD,CAAC"}

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

@@ -1,14 +1,14 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { getPriceLabelProps } from "./helpers.js";
 import { isNumber, isNil } from "lodash-es";
-import { useTranslation } from "react-i18next";
-import { LocaleNamespaces } from "../../constants/index.js";
+import { useTranslation } from "../../i18n/index.js";
 import { useFormatter } from "../../hooks/use-formatter/index.js";
 import { getColorVar } from "../../theme/palette.js";
 import { getSmallerTypographyVariants, getTypographyVar } from "../../theme/typography.js";
 import { Primitive } from "../primitive/primitive.js";
 import { TextSkeleton } from "../loading/text-skeleton/text-skeleton.js";
 const PriceLabel = (_props) => {
+  var _a, _b, _c, _d, _e, _f;
   const {
     price,
     exchangePrice,
@@ -19,6 +19,8 @@ const PriceLabel = (_props) => {
     md,
     lg,
     showEqual = false,
+    priceProps,
+    exchangePriceProps,
     ...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);
@@ -40,14 +42,25 @@ const PriceLabel = (_props) => {
         /* @__PURE__ */ jsx(
           Primitive,
           {
-            as: "span",
+            ...priceProps,
             sx: {
               color: getColorVar(`${color}.600`),
               ...createStyle({ size }),
-              sm: createStyle(sm),
-              md: createStyle(md),
-              lg: createStyle(lg)
+              ...priceProps == null ? void 0 : priceProps.sx,
+              sm: {
+                ...createStyle(sm),
+                ...(_a = priceProps == null ? void 0 : priceProps.sx) == null ? void 0 : _a.sm
+              },
+              md: {
+                ...createStyle(md),
+                ...(_b = priceProps == null ? void 0 : priceProps.sx) == null ? void 0 : _b.md
+              },
+              lg: {
+                ...createStyle(lg),
+                ...(_c = priceProps == null ? void 0 : priceProps.sx) == null ? void 0 : _c.lg
+              }
             },
+            as: "span",
             children: /* @__PURE__ */ jsx(
               PriceRenderer,
               {
@@ -64,17 +77,22 @@ const PriceLabel = (_props) => {
           /* @__PURE__ */ jsx(
             Primitive,
             {
+              ...exchangePriceProps,
               sx: {
                 color: getColorVar(`${color}.500`),
                 ...createStyle({ size: getSmallerTypographyVariants(size).at(0) }),
+                ...exchangePriceProps == null ? void 0 : exchangePriceProps.sx,
                 sm: {
-                  ...createStyle({ size: getSmallerTypographyVariants(sm == null ? void 0 : sm.size).at(0) })
+                  ...createStyle({ size: getSmallerTypographyVariants(sm == null ? void 0 : sm.size).at(0) }),
+                  ...(_d = exchangePriceProps == null ? void 0 : exchangePriceProps.sx) == null ? void 0 : _d.sm
                 },
                 md: {
-                  ...createStyle({ size: getSmallerTypographyVariants(md == null ? void 0 : md.size).at(0) })
+                  ...createStyle({ size: getSmallerTypographyVariants(md == null ? void 0 : md.size).at(0) }),
+                  ...(_e = exchangePriceProps == null ? void 0 : exchangePriceProps.sx) == null ? void 0 : _e.md
                 },
                 lg: {
-                  ...createStyle({ size: getSmallerTypographyVariants(lg == null ? void 0 : lg.size).at(0) })
+                  ...createStyle({ size: getSmallerTypographyVariants(lg == null ? void 0 : lg.size).at(0) }),
+                  ...(_f = exchangePriceProps == null ? void 0 : exchangePriceProps.sx) == null ? void 0 : _f.lg
                 }
               },
               as: "span",
@@ -97,7 +115,7 @@ const PriceLabel = (_props) => {
   );
 };
 const PriceRenderer = ({ price }) => {
-  const { t } = useTranslation(LocaleNamespaces.Translation);
+  const { t } = useTranslation();
   const { formatPrice, formatNumber } = useFormatter();
   const { currency, value, isPending, prefix = "", suffix = "", placeholder } = price;
   if (currency && isNumber(value)) {

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

@@ -15,7 +15,9 @@ export interface PriceLabelResponsiveProps {
 }
 type PriceLabelExtendedProps = ToResponsiveProps<PriceLabelResponsiveProps> & {
     price: PriceLabelEntry;
+    priceProps?: PrimitiveProps<JSX.IntrinsicElements['span']>;
     exchangePrice?: PriceLabelEntry;
+    exchangePriceProps?: PrimitiveProps<JSX.IntrinsicElements['span']>;
     color?: ColorVariant;
     orientation?: 'horizontal' | 'vertical';
     showEqual?: boolean;

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;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"}
+{"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,UAAU,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;IAC3D,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,kBAAkB,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;IACnE,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/locales/en/ui__translation.json

@@ -1,3 +1,4 @@
 {
-  "apply": "Apply"
+  "apply": "Apply",
+  "updating": "Updating"
 }

package/dist/locales/vi/ui__translation.json

@@ -1,3 +1,4 @@
 {
-  "apply": "Áp dụng"
+  "apply": "Áp dụng",
+  "updating": "Đang cập nhật"
 }

package/dist/theme/provider.d.ts

@@ -2,6 +2,7 @@ import { Theme } from '@emotion/react';
 import { PropsWithChildren } from 'react';
 export type ThemeProviderProps = PropsWithChildren<{
     theme: Theme;
+    locale?: string;
 }>;
-export declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeProvider: ({ theme, locale, children }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=provider.d.ts.map

package/dist/theme/provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/theme/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,EAAwD,MAAM,gBAAgB,CAAC;AACrG,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO1C,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa,wBAAyB,kBAAkB,4CAOpE,CAAC"}
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/theme/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,EAAwD,MAAM,gBAAgB,CAAC;AACrG,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAQ/C,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa,gCAAmD,kBAAkB,4CAO9F,CAAC"}

package/dist/theme/provider.js

@@ -4,10 +4,11 @@ import { getColorVar } from "./palette.js";
 import { flatten } from "flat";
 import { flatMap } from "lodash-es";
 import { getTypographyVar } from "./typography.js";
-const ThemeProvider = ({ theme, children }) => {
+import { LocaleContext, FALLBACK_LOCALE } from "../i18n/index.js";
+const ThemeProvider = ({ theme, locale = FALLBACK_LOCALE, children }) => {
   return /* @__PURE__ */ jsxs(ThemeProvider$1, { theme, children: [
     /* @__PURE__ */ jsx(Global, { styles: createGlobalStyle(theme) }),
-    children
+    /* @__PURE__ */ jsx(LocaleContext.Provider, { value: locale, children })
   ] });
 };
 const createGlobalStyle = ({ palette, typography }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [
@@ -56,7 +56,6 @@
     "@emotion/react": "*",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "react-i18next": "*",
     "react-router": ">=7.0.0"
   },
   "dependencies": {
@@ -99,7 +98,6 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-unused-imports": "^4.4.1",
     "globals": "^17.4.0",
-    "i18next": "^25.8.13",
     "prettier": "^3.8.1",
     "sass-embedded": "^1.97.3",
     "storybook": "^10.2.14",