@janbox/storefront-ui 2.0.27 → 2.0.29

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

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

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

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

package/dist/lib/unordered-list/list-item/list-item.d.ts

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

package/dist/lib/unordered-list/list-item/list-item.js

@@ -1,23 +1,21 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { isNil } from "lodash-es";
 import { getListItemProps } from "./helpers.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { Primitive } from "../../primitive/primitive.js";
 const ListItem = ({ ref, ..._props }) => {
   const { sx, children, dangerouslySetInnerHTML, ...rest } = getListItemProps(_props);
-  const css = [
-    {
-      display: "inline-flex"
-    },
-    createSxInterpolation(sx)
-  ];
   return /* @__PURE__ */ jsx(
-    "li",
+    Primitive,
     {
-      css,
       suppressContentEditableWarning: true,
       dangerouslySetInnerHTML: isNil(children) ? dangerouslySetInnerHTML : void 0,
       ...rest,
       ref,
+      sx: {
+        display: "inline-flex",
+        ...sx
+      },
+      as: "li",
       children: isNil(dangerouslySetInnerHTML) ? children : null
     }
   );

package/dist/lib/unordered-list/list-item/types.d.ts

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

package/dist/style.css

@@ -1,85 +1,4 @@
-@keyframes _ripple_1jvqm_7 {
-  to {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-._ripple_effect_1jvqm_7 {
-  position: relative;
-  overflow: hidden;
-}
-
-._ripple_effect__circle_1jvqm_12 {
-  position: absolute;
-  border-radius: 9999px;
-  background-color: var(--ripple-color);
-  opacity: var(--ripple-opacity);
-  transform: scale(0);
-  transform-origin: center;
-  will-change: transform, opacity;
-  backface-visibility: hidden;
-  touch-action: none;
-  animation: _ripple_1jvqm_7 var(--ripple-duration) ease-in-out;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  ._ripple_effect__circle_1jvqm_12 {
-    animation-duration: calc(var(--ripple-duration) * 0.5);
-  }
-}._input__container_1129f_1 {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-._input__main_1129f_8 {
-  width: 100%;
-  display: flex;
-  overflow: hidden;
-  align-items: center;
-  gap: 0.5rem;
-  border-radius: 0.5rem;
-  border-width: 1px;
-  border-style: solid;
-  background-color: var(--color-surface-default);
-}
-._input__main_1129f_8:hover {
-  border-color: var(--color-primary-300);
-}
-._input__main_1129f_8:has(input:focus:not(:read-only)) {
-  border-color: var(--color-primary-600);
-  box-shadow: 0 1px 3px 0 var(--color-primary-300), 0 1px 2px -1px var(--color-primary-300);
-}
-._input__main_1129f_8:has(input:read-only) {
-  pointer-events: none;
-}
-._input__main_1129f_8:has(input:disabled) {
-  background-color: var(--color-neutral-300);
-  color: var(--color-neutral-500);
-  border-color: var(--color-neutral-300);
-  pointer-events: none;
-}
-
-._input__main_error_1129f_36 {
-  border-color: var(--color-red-600);
-}
-
-._input__control_1129f_40 {
-  flex: 1 1 0%;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background-color: transparent;
-}
-._input__control_1129f_40:focus {
-  outline: none;
-}
-._input__control_1129f_40::placeholder {
-  color: var(--color-neutral-400);
-}._checkbox__container_1rrv2_1 {
+._checkbox__container_1rrv2_1 {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -815,20 +734,6 @@
 
 ._radio_button__input_10dls_10:disabled + ._radio_button__checkmark_10dls_21 {
   color: var(--color-neutral-300);
-}._input_range_1yrkm_1 {
-  display: flex;
-  align-items: center;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 0.5rem;
-  gap: 0.5rem;
-}
-._input_range_1yrkm_1:has(input:focus) {
-  border-color: var(--color-primary-600);
-  box-shadow: 0 1px 3px 0 var(--color-primary-300), 0 1px 2px -1px var(--color-primary-300);
-}
-._input_range_1yrkm_1:hover {
-  border-color: var(--color-primary-300);
 }._switch__container_19zrg_1 {
   display: flex;
   align-items: center;

package/package.json

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

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

@@ -1,69 +0,0 @@
-import { useCallback, useEffect, useMemo } from "react";
-import classes from "./use-ripple-effect.module.scss.js";
-const useRippleEffect = (ref, {
-  enabled = true,
-  color = "currentColor",
-  duration = 400,
-  opacity = 0.2,
-  sizeMultiplier = 1
-} = {}) => {
-  const createRippleCircle = 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(classes.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 = 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]
-  );
-  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(classes.ripple_effect__circle)) ?? []).forEach(
-        (circle) => circle.remove()
-      );
-    };
-  }, [start, enabled, ref]);
-  return useMemo(
-    () => ({
-      className: classes.ripple_effect
-    }),
-    []
-  );
-};
-export {
-  useRippleEffect
-};

package/dist/hooks/use-ripple-effect/use-ripple-effect.module.scss.js

@@ -1,11 +0,0 @@
-const ripple_effect = "_ripple_effect_1jvqm_7";
-const ripple_effect__circle = "_ripple_effect__circle_1jvqm_12";
-const classes = {
-  ripple_effect,
-  ripple_effect__circle
-};
-export {
-  classes as default,
-  ripple_effect,
-  ripple_effect__circle
-};

package/dist/lib/input/input.module.scss.js

@@ -1,17 +0,0 @@
-const input__container = "_input__container_1129f_1";
-const input__main = "_input__main_1129f_8";
-const input__main_error = "_input__main_error_1129f_36";
-const input__control = "_input__control_1129f_40";
-const classes = {
-  input__container,
-  input__main,
-  input__main_error,
-  input__control
-};
-export {
-  classes as default,
-  input__container,
-  input__control,
-  input__main,
-  input__main_error
-};

package/dist/lib/input-range/input-range.module.scss.js

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