@janbox/storefront-ui 2.0.24 → 2.0.25

package/dist/index.js

@@ -81,6 +81,7 @@ import { Select } from "./lib/select/select.js";
 import { StarRating } from "./lib/star-rating/star-rating.js";
 import { Step } from "./lib/stepper/step.js";
 import { Stepper } from "./lib/stepper/stepper.js";
+import { SuspenseQuery } from "./lib/suspense-query/index.js";
 import { Swiper } from "./lib/swiper/swiper/swiper.js";
 import { SwiperSlide } from "./lib/swiper/swiper-slide/swiper-slide.js";
 import { Switch } from "./lib/switch/switch.js";
@@ -226,6 +227,7 @@ export {
   StarRating,
   Step,
   Stepper,
+  SuspenseQuery,
   Swiper,
   SwiperSlide,
   Switch,

package/dist/lib/index.d.ts

@@ -59,4 +59,5 @@ export * from './cascader';
 export * from './primitive';
 export * from './price-label';
 export * from './avatar';
+export * from './suspense-query';
 //# 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;AAC9B,cAAc,UAAU,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;AACzB,cAAc,kBAAkB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"marquee.d.ts","sourceRoot":"","sources":["../../../../src/lib/marquee/marquee/marquee.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,YAAY,EAAiD,MAAM,SAAS,CAAC;AAUtF,eAAO,MAAM,OAAO,iCAAkC,YAAY,qDA0FjE,CAAC"}
+{"version":3,"file":"marquee.d.ts","sourceRoot":"","sources":["../../../../src/lib/marquee/marquee/marquee.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAiD,MAAM,SAAS,CAAC;AAWtF,eAAO,MAAM,OAAO,iCAAkC,YAAY,qDAsFjE,CAAC"}

package/dist/lib/marquee/marquee/marquee.js

@@ -6,13 +6,13 @@ import useEmblaCarousel from "embla-carousel-react";
 import { getMarqueeProps } from "./helpers.js";
 import { MarqueeDataAttributes } from "./types.js";
 import { HTMLClasses } from "../../../constants/index.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
 import { flattenChildren } from "../../../utils/index.js";
+import { isNumber } from "lodash-es";
 import { Icon } from "../../icon/icon.js";
+import { Primitive } from "../../primitive/primitive.js";
 const Marquee = ({ children, ref, ..._props }) => {
-  const { sx = {}, spaceBetween, sm, md, lg, autoScrollOptions, separatorIcon, ...rest } = getMarqueeProps(_props);
-  const { sm: sxSm, md: sxMd, lg: sxLg, ...sxXs } = sx;
+  var _a, _b, _c;
+  const { spaceBetween, sm, md, lg, autoScrollOptions, separatorIcon, ...rest } = getMarqueeProps(_props);
   const rootEl = useRef(null);
   const [emblaRef, emblaApi] = useEmblaCarousel(
     {
@@ -25,8 +25,8 @@ const Marquee = ({ children, ref, ..._props }) => {
   const mergedRefs = useMergeRefs([emblaRef, ref, rootEl]);
   useEffect(() => {
     const mutationObserver = new MutationObserver((records) => {
-      var _a;
-      const target = (_a = records.at(0)) == null ? void 0 : _a.target;
+      var _a2;
+      const target = (_a2 = records.at(0)) == null ? void 0 : _a2.target;
       if (!target) return;
       const playState = target.getAttribute(MarqueeDataAttributes.PlayState);
       const autoScrollPlugin = emblaApi == null ? void 0 : emblaApi.plugins().autoScroll;
@@ -48,12 +48,12 @@ const Marquee = ({ children, ref, ..._props }) => {
   }, [emblaApi]);
   useEffect(() => {
     const onAutoScrollPlay = () => {
-      var _a;
-      (_a = rootEl.current) == null ? void 0 : _a.setAttribute(MarqueeDataAttributes.PlayState, "on");
+      var _a2;
+      (_a2 = rootEl.current) == null ? void 0 : _a2.setAttribute(MarqueeDataAttributes.PlayState, "on");
     };
     const onAutoScrollStop = () => {
-      var _a;
-      (_a = rootEl.current) == null ? void 0 : _a.setAttribute(MarqueeDataAttributes.PlayState, "off");
+      var _a2;
+      (_a2 = rootEl.current) == null ? void 0 : _a2.setAttribute(MarqueeDataAttributes.PlayState, "off");
     };
     emblaApi == null ? void 0 : emblaApi.on("autoScroll:play", onAutoScrollPlay);
     emblaApi == null ? void 0 : emblaApi.on("autoScroll:stop", onAutoScrollStop);
@@ -63,41 +63,46 @@ const Marquee = ({ children, ref, ..._props }) => {
     };
   }, [emblaApi]);
   return /* @__PURE__ */ jsx(
-    "div",
+    Primitive,
     {
-      css: [
-        {
-          overflow: "hidden",
-          maxWidth: "100%"
-        },
-        createStyle({ spaceBetween }, sxXs),
-        {
-          [mediaQuery("sm")]: createStyle(sm, sxSm),
-          [mediaQuery("md")]: createStyle(md, sxMd),
-          [mediaQuery("lg")]: createStyle(lg, sxLg)
-        }
-      ],
       ...rest,
+      sx: {
+        overflow: "hidden",
+        maxWidth: "100%",
+        ...rest.sx,
+        ...createStyle({ spaceBetween }),
+        sm: { ...(_a = rest.sx) == null ? void 0 : _a.sm, ...createStyle(sm) },
+        md: { ...(_b = rest.sx) == null ? void 0 : _b.md, ...createStyle(md) },
+        lg: { ...(_c = rest.sx) == null ? void 0 : _c.lg, ...createStyle(lg) }
+      },
       ref: mergedRefs,
-      children: /* @__PURE__ */ jsx("div", { css: { display: "flex", alignItems: "center", "& > *": { flexShrink: 0, flexGrow: 0, overflow: "hidden" } }, children: flattenChildren(children).map((child, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: HTMLClasses.MARQUEE_SLIDE, children: child }),
-        !!separatorIcon && /* @__PURE__ */ jsx("div", { className: HTMLClasses.MARQUEE_SLIDE, children: /* @__PURE__ */ jsx(Icon, { ...separatorIcon }) })
+      children: /* @__PURE__ */ jsx(Primitive, { sx: { display: "flex", alignItems: "center", marginLeft: `calc(var(${SPACING_VAR}, 0px) * -1)` }, children: flattenChildren(children).map((child, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(MarqueeSlide, { children: child }),
+        !!separatorIcon && /* @__PURE__ */ jsx(MarqueeSlide, { children: /* @__PURE__ */ jsx(Icon, { ...separatorIcon }) })
       ] }, `marquee-item-${index}`)) })
     }
   );
 };
-const createStyle = ({ spaceBetween } = {}, sx = {}) => {
-  const { width, height, ...css } = sx;
-  return [
+const SPACING_VAR = "--marquee-space-between";
+const MarqueeSlide = ({ children }) => {
+  return /* @__PURE__ */ jsx(
+    Primitive,
     {
-      width,
-      height,
-      "& > *": {
-        columnGap: spaceBetween,
-        ...css
-      }
+      sx: {
+        flexShrink: 0,
+        flexGrow: 0,
+        overflow: "hidden",
+        paddingRight: `var(${SPACING_VAR}, 0px)`
+      },
+      className: HTMLClasses.MARQUEE_SLIDE,
+      children
     }
-  ];
+  );
+};
+const createStyle = ({ spaceBetween } = {}) => {
+  return isNumber(spaceBetween) ? {
+    [SPACING_VAR]: `${spaceBetween}px`
+  } : {};
 };
 export {
   Marquee

package/dist/lib/suspense-query/index.d.ts

@@ -0,0 +1,14 @@
+import { ComponentType } from 'react';
+import { FallbackProps } from 'react-error-boundary';
+export type SuspenseQueryProps<A extends any[], R> = {
+    LoadingComponent?: ComponentType;
+    ErrorComponent?: ComponentType<FallbackProps>;
+    factory: (...args: A) => Promise<R>;
+    children: (data: R) => React.ReactNode;
+} & (A extends [] ? {
+    deps?: [];
+} : {
+    deps: A;
+});
+export declare function SuspenseQuery<A extends any[], R>({ factory, deps: propDeps, LoadingComponent, ErrorComponent, children, }: SuspenseQueryProps<A, R>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/suspense-query/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/suspense-query/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAyB,MAAM,OAAO,CAAC;AAG7D,OAAO,EAAiB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEpE,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,GAAG,EAAE,EAAE,CAAC,IAAI;IACnD,gBAAgB,CAAC,EAAE,aAAa,CAAC;IACjC,cAAc,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC9C,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CACxC,GAAG,CAAC,CAAC,SAAS,EAAE,GAAG;IAAE,IAAI,CAAC,EAAE,EAAE,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC;AAEjD,wBAAgB,aAAa,CAAC,CAAC,SAAS,GAAG,EAAE,EAAE,CAAC,EAAE,EAChD,OAAO,EACP,IAAI,EAAE,QAAQ,EACd,gBAAgB,EAChB,cAAsC,EACtC,QAAQ,GACT,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,2CAmB1B"}

package/dist/lib/suspense-query/index.js

@@ -0,0 +1,32 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useRef, Suspense, use } from "react";
+import { isEqual } from "lodash-es";
+import { ErrorBoundary } from "/Users/akashi/Work/iChiba/@janbox/storefront-ui/node_modules/.pnpm/react-error-boundary@6.1.2_react@19.2.4/node_modules/react-error-boundary/dist/react-error-boundary.js";
+function SuspenseQuery({
+  factory,
+  deps: propDeps,
+  LoadingComponent,
+  ErrorComponent = DefaultErrorComponent,
+  children
+}) {
+  const deps = propDeps ?? [];
+  const depsRef = useRef(deps);
+  const promiseRef = useRef(null);
+  const depsChanged = !isEqual(deps, depsRef.current);
+  if (promiseRef.current === null || depsChanged) {
+    depsRef.current = deps;
+    promiseRef.current = factory(...deps);
+  }
+  return /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: ErrorComponent, children: /* @__PURE__ */ jsx(Suspense, { fallback: LoadingComponent ? /* @__PURE__ */ jsx(LoadingComponent, {}) : null, children: /* @__PURE__ */ jsx(Content, { promise: promiseRef.current, children }) }) });
+}
+function Content({ promise, children }) {
+  const data = use(promise);
+  return /* @__PURE__ */ jsx(Fragment, { children: children(data) });
+}
+const DefaultErrorComponent = ({ error }) => {
+  console.error("SuspenseQueryError", error);
+  return /* @__PURE__ */ jsx(Fragment, {});
+};
+export {
+  SuspenseQuery
+};

package/package.json

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