@janbox/storefront-ui 3.0.0 → 3.0.2

package/dist/lib/select/select.js

@@ -277,15 +277,15 @@ const Select = ({
                         { flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
                         getTextCss(rest == null ? void 0 : rest.size)
                       ],
-                      children: selectedOption ? /* @__PURE__ */ jsx(Fragment, { children: selectedRenderer ? selectedRenderer(selectedOption) : getOptionLabel(selectedOption) }) : /* @__PURE__ */ jsx("span", { css: { color: getColorVar("neutral.400"), display: "block" }, children: placeholder })
+                      children: selectedOption ? /* @__PURE__ */ jsx(Fragment, { children: selectedRenderer ? selectedRenderer(selectedOption) : getOptionLabel(selectedOption) }) : /* @__PURE__ */ jsx(Primitive, { css: { color: getColorVar("neutral.400"), display: "block" }, as: "span", children: placeholder })
                     }
                   )
                 }
               ) }),
               /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsxs(
-                "div",
+                Primitive,
                 {
-                  css: {
+                  sx: {
                     paddingTop: 8,
                     paddingBottom: 8,
                     border: "1px solid",
@@ -297,7 +297,7 @@ const Select = ({
                     backgroundColor: getColorVar("surface.default")
                   },
                   children: [
-                    searchable && /* @__PURE__ */ jsx("div", { css: { paddingLeft: 8, paddingRight: 8, paddingBottom: 12, position: "relative" }, children: /* @__PURE__ */ jsx(
+                    searchable && /* @__PURE__ */ jsx(Primitive, { sx: { paddingLeft: 8, paddingRight: 8, paddingBottom: 12, position: "relative" }, children: /* @__PURE__ */ jsx(
                       Input,
                       {
                         size: rest.size,

package/dist/lib/stepper/stepper.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { forwardRef } from "react";
 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 { direction = "horizontal", items, activeIndex = 0, circleSize = 32, ...rest } = props;
@@ -49,7 +50,7 @@ const Stepper = forwardRef((props, ref) => {
       );
     });
   };
-  return /* @__PURE__ */ jsxs("div", { css: { position: "relative" }, children: [
+  return /* @__PURE__ */ jsxs(Primitive, { sx: { position: "relative" }, children: [
     /* @__PURE__ */ jsx(
       Progress,
       {

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

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './stylesheet';

package/dist/lib/stylesheet/stylesheet.d.ts

@@ -0,0 +1,2 @@
+import { StylesheetProps } from './types';
+export declare const Stylesheet: ({ children }: StylesheetProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/stylesheet/stylesheet.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { ClassNames } from "@emotion/react";
+import { mediaQuery } from "../../theme/screens.js";
+import "../../theme/palette.js";
+const Stylesheet = ({ children }) => {
+  return /* @__PURE__ */ jsx(ClassNames, { children: ({ css, cx }) => {
+    return children({
+      css: (sx = {}) => {
+        const { sm, md, lg, ...xs } = sx;
+        return css({
+          ...xs,
+          [mediaQuery("sm")]: sm,
+          [mediaQuery("md")]: md,
+          [mediaQuery("lg")]: lg
+        });
+      },
+      cx
+    });
+  } });
+};
+export {
+  Stylesheet
+};

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { PropsWithSx } from '../../types';
+export type StylesheetChildrenProps = {
+    css: (sx?: PropsWithSx['sx']) => string;
+    cx: (...classNames: Array<string | undefined | null | false>) => string;
+};
+export type StylesheetProps = {
+    children: (props: StylesheetChildrenProps) => ReactNode;
+};

package/dist/lib/table/table/table.d.ts

@@ -1,2 +1,2 @@
 import { TableProps } from './types';
-export declare const Table: ({ children, sx, ...props }: TableProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Table: ({ children, sx, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/table/table/table.js

@@ -1,20 +1,21 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { Primitive } from "../../primitive/primitive.js";
 const Table = ({ children, sx, ...props }) => {
   return /* @__PURE__ */ jsx(
-    "table",
+    Primitive,
     {
-      css: createSxInterpolation({
+      ...props,
+      sx: {
         width: "100%",
         borderTopLeftRadius: "0.5rem",
         borderTopRightRadius: "0.5rem",
         overflow: "hidden",
         backgroundColor: getColorVar("surface.default"),
         ...sx
-      }),
-      ...props,
+      },
+      as: "table",
       children
     }
   );

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

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
-import { PropsWithSx } from '../../../types';
-export type TableProps = PropsWithSx<JSX.IntrinsicElements['table']>;
+import { PrimitiveProps } from '../../primitive';
+export type TableProps = PrimitiveProps<JSX.IntrinsicElements['table'], 'table'>;

package/dist/lib/table/table-body/table-body.d.ts

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

package/dist/lib/table/table-body/table-body.js

@@ -1,31 +1,30 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
-const TableBody = ({ sx, children, ref, ...props }) => {
+import { Primitive } from "../../primitive/primitive.js";
+const TableBody = ({ children, ref, ...props }) => {
   return /* @__PURE__ */ jsx(
-    "tbody",
+    Primitive,
     {
-      css: [
-        {
-          "& > tr": {
-            position: "relative",
-            "&::after": {
-              content: '""',
-              position: "absolute",
-              bottom: 0,
-              left: 0,
-              right: 0,
-              borderBottomWidth: 1,
-              borderBottomStyle: "solid",
-              borderBottomColor: getColorVar("neutral.100")
-            }
-          }
-        },
-        createSxInterpolation(sx)
-      ],
       ...props,
       ref,
+      sx: {
+        "& > tr": {
+          position: "relative",
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            borderBottomWidth: 1,
+            borderBottomStyle: "solid",
+            borderBottomColor: getColorVar("neutral.100")
+          }
+        },
+        ...props.sx
+      },
+      as: "tbody",
       children
     }
   );

package/dist/lib/table/table-body/types.d.ts

@@ -1,3 +1,3 @@
-import { PropsWithSx } from '../../../types';
+import { PrimitiveProps } from '../../primitive';
 import { JSX } from 'react';
-export type TableBodyProps = PropsWithSx<JSX.IntrinsicElements['tbody']>;
+export type TableBodyProps = PrimitiveProps<JSX.IntrinsicElements['tbody'], 'tbody'>;

package/dist/lib/table/table-footer/table-footer.d.ts

@@ -1,2 +1,2 @@
 import { TableFooterProps } from './types';
-export declare const TableFooter: ({ sx, children, ...props }: TableFooterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableFooter: ({ children, ...props }: TableFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/table/table-footer/table-footer.js

@@ -1,7 +1,7 @@
-import { jsx } from "@emotion/react/jsx-runtime";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
-const TableFooter = ({ sx, children, ...props }) => {
-  return /* @__PURE__ */ jsx("tfoot", { css: createSxInterpolation(sx), ...props, children });
+import { jsx } from "react/jsx-runtime";
+import { Primitive } from "../../primitive/primitive.js";
+const TableFooter = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Primitive, { ...props, as: "tfoot", children });
 };
 export {
   TableFooter

package/dist/lib/table/table-footer/types.d.ts

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
-import { PropsWithSx } from '../../../types';
-export type TableFooterProps = PropsWithSx<JSX.IntrinsicElements['tfoot']>;
+import { PrimitiveProps } from '../../primitive';
+export type TableFooterProps = PrimitiveProps<JSX.IntrinsicElements['tfoot'], 'tfoot'>;

package/dist/lib/table/table-head/table-head.d.ts

@@ -1,2 +1,2 @@
 import { TableHeadProps } from './types';
-export declare const TableHead: ({ sx, children, ...props }: TableHeadProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableHead: ({ sx, children, ...props }: TableHeadProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/table/table-head/table-head.js

@@ -1,29 +1,28 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { Primitive } from "../../primitive/primitive.js";
 const TableHead = ({ sx, children, ...props }) => {
   return /* @__PURE__ */ jsx(
-    "thead",
+    Primitive,
     {
-      css: [
-        {
-          position: "relative",
-          fontWeight: 500,
-          "&::after": {
-            content: '""',
-            position: "absolute",
-            bottom: 0,
-            left: 0,
-            right: 0,
-            borderTopWidth: 1,
-            borderTopStyle: "solid",
-            borderTopColor: getColorVar("neutral.200")
-          }
-        },
-        createSxInterpolation(sx)
-      ],
       ...props,
+      sx: {
+        position: "relative",
+        fontWeight: 500,
+        ":after": {
+          content: '""',
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          borderTopWidth: 1,
+          borderTopStyle: "solid",
+          borderTopColor: getColorVar("neutral.200")
+        },
+        ...sx
+      },
+      as: "thead",
       children
     }
   );

package/dist/lib/table/table-head/types.d.ts

@@ -1,3 +1,3 @@
-import { PropsWithSx } from '../../../types';
+import { PrimitiveProps } from '../../primitive';
 import { JSX } from 'react';
-export type TableHeadProps = PropsWithSx<JSX.IntrinsicElements['thead']>;
+export type TableHeadProps = PrimitiveProps<JSX.IntrinsicElements['thead'], 'thead'>;

package/dist/lib/tabs/tab-indicator/tab-indicator.d.ts

@@ -1 +1 @@
-export declare const TabIndicator: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TabIndicator: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
 import { motion } from "motion/react";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { useTabsContext } from "../tabs/helpers.js";
 const TabIndicator = () => {
   const { activeIndex, tabIndicatorProps } = useTabsContext();
@@ -53,7 +53,7 @@ const TabIndicator = () => {
       resizeObserver.disconnect();
     };
   }, [activeTabElement]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ css }) => /* @__PURE__ */ jsx(
     motion.div,
     {
       initial: {
@@ -65,18 +65,16 @@ const TabIndicator = () => {
         transform: `translateX(${indicatorRect.left}px)`
       },
       ref: indicatorEl,
-      css: [
-        {
-          position: "absolute",
-          bottom: 0,
-          left: 0,
-          backgroundColor: "currentcolor",
-          borderRadius: 8
-        },
-        createSxInterpolation(tabIndicatorProps == null ? void 0 : tabIndicatorProps.sx)
-      ]
+      className: css({
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        backgroundColor: "currentcolor",
+        borderRadius: 8,
+        ...tabIndicatorProps == null ? void 0 : tabIndicatorProps.sx
+      })
     }
-  );
+  ) });
 };
 export {
   TabIndicator

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

@@ -2,11 +2,10 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { useRef, useMemo } from "react";
 import { getTabsProps, TabsContext } from "./helpers.js";
 import { useControllableState } from "../../../hooks/use-controllable-state.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { Primitive } from "../../primitive/primitive.js";
 const Tabs = ({ ref, children, ..._props }) => {
   const {
     defaultActiveIndex,
-    sx,
     activeIndex,
     onTabChange,
     tabProps,
@@ -35,7 +34,7 @@ const Tabs = ({ ref, children, ..._props }) => {
       preventActiveTabChange
     };
   }, [activeTabIndex, tabProps, tabIndicatorProps, tabPanelProps, preventActiveTabChange, setActiveTabIndex]);
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { css: createSxInterpolation(sx), ...rest, ref, children }) });
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Primitive, { ...rest, ref, children }) });
 };
 export {
   Tabs

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

@@ -4,13 +4,13 @@ import dayjs from "dayjs";
 import { isNil, uniqueId } from "lodash-es";
 import { useWindowScreen } from "../../hooks/use-window-screen/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
-import { getResponsiveProp, getSizeVariantState } from "../../utils/index.js";
+import { getResponsiveProp, getSizeVariantState, getColorShadesByVariant } from "../../utils/index.js";
 import { VirtualizedList } from "../../components/virtualized-list.js";
 import CloseIcon from "../../assets/svg/times-close-delete.svg.js";
 import ClockIcon from "../../assets/svg/clock-time.svg.js";
 import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
-import { createSxInterpolation } from "../../utils/stylesheet.js";
+import { Primitive } from "../primitive/primitive.js";
 import { Floating } from "../floating/floating/floating.js";
 import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.js";
 import { FloatingContent } from "../floating/floating-content/floating-content.js";
@@ -223,12 +223,16 @@ const TimePicker = ({
       }
     );
   };
-  const { sx: containerSx, ...restContainerProps } = containerProps ?? {};
   return /* @__PURE__ */ jsx(
-    "div",
+    Primitive,
     {
-      ...restContainerProps,
-      css: [{ display: "flex", flexDirection: "column", width: "100%" }, createSxInterpolation(containerSx)],
+      ...containerProps,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        ...containerProps == null ? void 0 : containerProps.sx
+      },
       children: /* @__PURE__ */ jsxs(
         Floating,
         {
@@ -244,15 +248,15 @@ const TimePicker = ({
           onOpenChange: prehandleOpenChange,
           ref: floatingRef,
           children: [
-            /* @__PURE__ */ jsx(FloatingTrigger, { children: /* @__PURE__ */ jsxs("div", { css: createSxInterpolation(sx), children: [
-              !selectedDate && !!placeholder && /* @__PURE__ */ jsx("span", { css: { color: "var(--ic-ink-4s)" }, children: placeholder }),
+            /* @__PURE__ */ jsx(FloatingTrigger, { children: /* @__PURE__ */ jsxs(Primitive, { sx, children: [
+              !selectedDate && !!placeholder && /* @__PURE__ */ jsx(Primitive, { sx: { color: getColorShadesByVariant("neutral").placeholder }, as: "span", children: placeholder }),
               !!selectedDate && /* @__PURE__ */ jsx("span", { children: dayjs(selectedDate).format(TIME_FORMAT) }),
               getIcon()
             ] }) }),
             /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsx(
-              "div",
+              Primitive,
               {
-                css: {
+                sx: {
                   paddingTop: "0.5rem",
                   paddingBottom: "0.5rem",
                   borderWidth: 1,
@@ -261,7 +265,7 @@ const TimePicker = ({
                   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,
-                  backgroundColor: "var(--color-surface-default)"
+                  backgroundColor: getColorVar("surface.default")
                 },
                 children: portalContentRenderer()
               }

package/dist/lib/video/video.d.ts

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

package/dist/lib/video/video.js

@@ -1,10 +1,10 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import ReactPlayer from "react-player";
 import { getVideoProps } from "./helpers.js";
-import { createSxInterpolation } from "../../utils/stylesheet.js";
+import { Stylesheet } from "../stylesheet/stylesheet.js";
 const Video = ({ ref, ..._props }) => {
   const { sx, ...rest } = getVideoProps(_props);
-  return /* @__PURE__ */ jsx(ReactPlayer, { css: createSxInterpolation(sx), width: "", height: "", ref, ...rest });
+  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => /* @__PURE__ */ jsx(ReactPlayer, { width: "", height: "", ref, ...rest, className: cx(css(sx), rest.className) }) });
 };
 export {
   Video

package/package.json

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