@janbox/storefront-ui 4.0.6 → 4.0.8

package/dist/lib/stepper/stepper.d.ts

@@ -1,2 +1,2 @@
 import { StepperProps } from './types';
-export declare const Stepper: import('react').ForwardRefExoticComponent<StepperProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Stepper: ({ ref, ...props }: StepperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/stepper/stepper.js

@@ -1,10 +1,9 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Step } from "./step.js";
 import { Progress } from "../progress/progress.js";
 import { Primitive } from "../primitive/primitive.js";
 const maxPercent = 100;
-const Stepper = forwardRef((props, ref) => {
+const Stepper = ({ ref, ...props }) => {
   const { direction = "horizontal", items, activeIndex = 0, circleSize = 32, ...rest } = props;
   const value = maxPercent / (items.length - 1) * activeIndex;
   const progressBarSize = `${(items.length - 1) / items.length * 100}%`;
@@ -33,9 +32,10 @@ const Stepper = forwardRef((props, ref) => {
         }
       };
       return /* @__PURE__ */ jsxs(
-        "li",
+        Primitive,
         {
-          css: {
+          as: "li",
+          sx: {
             flex: 1,
             display: "flex",
             gap: 16,
@@ -55,7 +55,7 @@ const Stepper = forwardRef((props, ref) => {
       Progress,
       {
         ref,
-        css: {
+        sx: {
           position: "absolute",
           zIndex: -1,
           width: "100%",
@@ -68,9 +68,10 @@ const Stepper = forwardRef((props, ref) => {
       }
     ),
     /* @__PURE__ */ jsx(
-      "ul",
+      Primitive,
       {
-        css: {
+        as: "ul",
+        sx: {
           display: "flex",
           width: "100%",
           height: "100%",
@@ -81,7 +82,7 @@ const Stepper = forwardRef((props, ref) => {
       }
     )
   ] });
-});
+};
 export {
   Stepper
 };

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

@@ -1,4 +1,4 @@
-import { ReactNode, JSX } from 'react';
+import { ReactNode, JSX, Ref } from 'react';
 import { ProgressDirection } from '../../types';
 export declare const states: {
     done: string;
@@ -17,4 +17,5 @@ export interface StepperProps {
     direction?: ProgressDirection;
     className?: string;
     circleSize?: number;
+    ref?: Ref<HTMLDivElement>;
 }

package/dist/lib/swiper/swiper/swiper.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useEffect, Suspense, lazy } from "react";
 import { useMergeRefs } from "@floating-ui/react";
-import Autoplay from "embla-carousel-autoplay";
+import AutoplayPlugin from "embla-carousel-autoplay";
 import useEmblaCarousel from "embla-carousel-react";
-import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures";
+import WheelGesturesPlugin from "embla-carousel-wheel-gestures";
 import { isNumber } from "lodash-es";
 import { getSwiperProps } from "./helpers.js";
 import { Primitive } from "../../primitive/primitive.js";
@@ -23,7 +23,7 @@ const Swiper = ({ children, onApi, ref, ..._props }) => {
       ...options,
       slides: "[data-swiper-slide]"
     },
-    [Autoplay(autoplayOptions), WheelGesturesPlugin()]
+    [AutoplayPlugin(autoplayOptions), WheelGesturesPlugin()]
   );
   useEffect(() => {
     emblaApi && (onApi == null ? void 0 : onApi(emblaApi));

package/dist/lib/swiper/swiper-dots-paging/swiper-dots-paging.d.ts

@@ -1,2 +1,2 @@
 import { SwiperDotsPagingProps } from './types';
-export declare const SwiperDotsPaging: ({ api, size, spaceBetween, color, offset, sm, md, lg, }: SwiperDotsPagingProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SwiperDotsPaging: ({ api, size, spaceBetween, color, offset, sm, md, lg, }: SwiperDotsPagingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/swiper/swiper-dots-paging/swiper-dots-paging.js

@@ -1,4 +1,4 @@
-import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { useFloating, autoUpdate, shift, flip, size, FloatingPortal } from "@floating-ui/react";
 import { times, isNumber } from "lodash-es";
@@ -7,6 +7,7 @@ import { getColorVar } from "../../../theme/palette.js";
 import { usePortalContainer } from "../../../theme/provider.js";
 import { useIsHydrated } from "../../../hooks/use-is-hydrated/index.js";
 import { Primitive } from "../../primitive/primitive.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 const SWIPER_DOTS_SIZE_VAR = "--swiper-dots-size";
 const SWIPER_DOTS_OFFSET_VAR = "--swiper-dots-offset";
 const SWIPER_DOTS_SPACING_VAR = "--swiper-dots-spacing";
@@ -133,7 +134,7 @@ const SwiperDotsPaging = ({
                     },
                     slideIndex
                   )),
-                  /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx(Stylesheet, { children: ({ css }) => /* @__PURE__ */ jsx(
                     motion.div,
                     {
                       initial: {
@@ -144,7 +145,7 @@ const SwiperDotsPaging = ({
                         width: `calc(${inViewIndexes.length} * var(${SWIPER_DOTS_SIZE_VAR}, 0) + ${inViewIndexes.length - 1} * var(${SWIPER_DOTS_SPACING_VAR}, 0))`,
                         left: `calc(${firstInViewIndex} * var(${SWIPER_DOTS_SIZE_VAR}) + ${firstInViewIndex} * var(${SWIPER_DOTS_SPACING_VAR}))`
                       },
-                      css: {
+                      className: css({
                         position: "absolute",
                         top: 0,
                         bottom: 0,
@@ -153,11 +154,11 @@ const SwiperDotsPaging = ({
                         borderWidth: 1,
                         borderColor: getColorVar(`${color}.600`),
                         padding: 1
-                      },
+                      }),
                       children: /* @__PURE__ */ jsx(
-                        "div",
+                        Primitive,
                         {
-                          style: {
+                          sx: {
                             height: "100%",
                             width: "100%",
                             borderRadius: 9999,
@@ -166,7 +167,7 @@ const SwiperDotsPaging = ({
                         }
                       )
                     }
-                  )
+                  ) })
                 ]
               }
             )

package/dist/lib/tabs/tab-indicator/tab-indicator.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
 import { motion } from "motion/react";
-import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { useTabsContext } from "../tabs/helpers.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 const TabIndicator = () => {
   const { activeIndex, tabIndicatorProps } = useTabsContext();
   const indicatorEl = useRef(null);

package/dist/lib/tabs/tabs/tabs.d.ts

@@ -1,2 +1,2 @@
 import { TabsProps } from './types';
-export declare const Tabs: ({ ref, children, ..._props }: TabsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ ref, children, ..._props }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/tabs/tabs/tabs.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useRef, useMemo } from "react";
 import { getTabsProps, TabsContext } from "./helpers.js";
 import { useControllableState } from "../../../hooks/use-controllable-state.js";

package/dist/lib/time-picker/time-picker.js

@@ -101,11 +101,9 @@ const TimePicker = ({
       {
         onClick,
         css: {
-          paddingLeft: "0.5rem",
-          paddingRight: "0.5rem",
-          paddingTop: "0.25rem",
-          paddingBottom: "0.25rem",
-          borderRadius: "0.25rem",
+          paddingBlock: 4,
+          paddingInline: 8,
+          borderRadius: 4,
           width: "100%",
           height: "100%",
           "&:hover": { backgroundColor: "var(--ic-light)" },
@@ -135,11 +133,9 @@ const TimePicker = ({
       {
         onClick,
         css: {
-          paddingLeft: "0.5rem",
-          paddingRight: "0.5rem",
-          paddingTop: "0.25rem",
-          paddingBottom: "0.25rem",
-          borderRadius: "0.25rem",
+          paddingInline: 8,
+          paddingBlock: 4,
+          borderRadius: 4,
           width: "100%",
           height: "100%",
           "&:hover": { backgroundColor: "var(--ic-light)" },
@@ -157,23 +153,21 @@ const TimePicker = ({
     );
   };
   const portalContentRenderer = () => /* @__PURE__ */ jsxs(
-    "div",
+    Primitive,
     {
-      css: {
+      sx: {
         display: "flex",
-        borderRadius: "0.5rem",
-        padding: "0.5rem",
-        backgroundColor: "var(--ic-white-6s)",
+        borderRadius: 8,
+        padding: 8,
         fontSize: getTypographyVar("sm").fontSize,
         lineHeight: getTypographyVar("sm").lineHeight,
         boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
         borderWidth: 1,
         borderStyle: "solid",
-        borderColor: "var(--ic-ink-1s)",
-        gap: "0.5rem"
+        gap: 8
       },
       children: [
-        /* @__PURE__ */ jsx("div", { css: { display: "flex", flexDirection: "column", flex: "1 1 0%" }, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Primitive, { sx: { display: "flex", flexDirection: "column", flex: "1 1 0%" }, children: /* @__PURE__ */ jsx(
           VirtualizedList,
           {
             RowComponent: RowComponentHour,
@@ -184,7 +178,7 @@ const TimePicker = ({
             }
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { css: { display: "flex", flexDirection: "column", flex: "1 1 0%" }, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Primitive, { sx: { display: "flex", flexDirection: "column", flex: "1 1 0%" }, children: /* @__PURE__ */ jsx(
           VirtualizedList,
           {
             RowComponent: RowComponentMinute,
@@ -257,11 +251,11 @@ const TimePicker = ({
               Primitive,
               {
                 sx: {
-                  paddingTop: "0.5rem",
-                  paddingBottom: "0.5rem",
+                  paddingTop: 8,
+                  paddingBottom: 8,
                   borderWidth: 1,
                   borderStyle: "solid",
-                  borderRadius: "0.5rem",
+                  borderRadius: 8,
                   boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
                   fontSize: getTypographyVar("sm").fontSize,
                   lineHeight: getTypographyVar("sm").lineHeight,

package/package.json

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