@plurix/ecom-components 1.11.5 → 1.12.0

package/dist/main.d.ts

@@ -10,3 +10,8 @@ export { ContactCard } from './packages/ContactCard/ContactCard';
 export * from './packages/ContactCard/ContactCard';
 export * from './types/ChangeOrderModal';
 export { ChangeOrderModal } from './packages/ChangeOrderModal/ChangeOrderModal';
+export { Skeleton } from './packages/Skeleton';
+export type { SkeletonProps } from './packages/Skeleton';
+export { SearchSuggestions } from './packages/SearchSugestions/components/SearchSuggestions';
+export type { SearchSuggestionsProps } from './packages/SearchSugestions/types/SearchSuggestionsProps';
+export type { SearchSuggestionsApiResponse, Searches } from './packages/SearchSugestions/types/ResponseApi';

package/dist/main.js

@@ -1,20 +1,24 @@
 import { CartClubAlert as e } from "./packages/CartClubAlert/CartClubAlert.js";
-import { Carousel as a } from "./packages/Carousel/Carousel.js";
+import { Carousel as p } from "./packages/Carousel/Carousel.js";
 import { Coupons as f } from "./packages/Coupons/Coupons.js";
 import { Onboarding as x } from "./packages/Onboarding/Onboarding.js";
-import { Tour as C } from "./packages/Tour/Tour.js";
+import { Tour as l } from "./packages/Tour/Tour.js";
 import { Regionalization as d } from "./packages/Regionalization/Regionalization.js";
-import { Modal as u } from "./packages/Modal/Modal.js";
-import { ContactCard as b } from "./packages/ContactCard/ContactCard.js";
-import { ChangeOrderModal as M } from "./packages/ChangeOrderModal/ChangeOrderModal.js";
+import { Modal as i } from "./packages/Modal/Modal.js";
+import { ContactCard as s } from "./packages/ContactCard/ContactCard.js";
+import { ChangeOrderModal as b } from "./packages/ChangeOrderModal/ChangeOrderModal.js";
+import { Skeleton as h } from "./packages/Skeleton/index.js";
+import { SearchSuggestions as O } from "./packages/SearchSugestions/components/SearchSuggestions/index.js";
 export {
-  a as Carousel,
+  p as Carousel,
   e as CartClubAlert,
-  M as ChangeOrderModal,
-  b as ContactCard,
+  b as ChangeOrderModal,
+  s as ContactCard,
   f as Coupons,
-  u as Modal,
+  i as Modal,
   x as Onboarding,
   d as Regionalization,
-  C as Tour
+  O as SearchSuggestions,
+  h as Skeleton,
+  l as Tour
 };

package/dist/packages/SearchSugestions/components/Button/index.d.ts

@@ -0,0 +1,13 @@
+import { default as React, CSSProperties } from 'react';
+
+interface ButtonProps {
+    itemsToShowQuantity: number;
+    itemsToShow: number;
+    setItemsToShowQuantity: (itemsToShowQuantity: number) => void;
+    showMoreSuggestionsText?: string;
+    showLessSuggestionsText?: string;
+    buttonStyle?: CSSProperties;
+    buttonHoveredStyle?: CSSProperties;
+}
+export declare const Button: React.FC<ButtonProps>;
+export {};

package/dist/packages/SearchSugestions/components/Button/index.js

@@ -0,0 +1,48 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { showMoreOrLess as f } from "./showMoreOrLess.js";
+import { baseButtonStyle as m } from "../../styles/baseButtonStyle.js";
+import { baseButtonHoveredStyle as p } from "../../styles/baseButtonHoveredStyle.js";
+const x = ({
+  itemsToShowQuantity: t,
+  itemsToShow: e,
+  setItemsToShowQuantity: r,
+  showMoreSuggestionsText: a,
+  showLessSuggestionsText: l,
+  buttonStyle: u,
+  buttonHoveredStyle: i
+}) => {
+  const [c, s] = d(!1), o = {
+    ...m,
+    ...u
+  }, g = {
+    ...p,
+    ...i
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: "suggestion-button-container",
+      style: { textAlign: "center" },
+      children: /* @__PURE__ */ n(
+        "button",
+        {
+          onClick: () => f(
+            e,
+            t,
+            r
+          ),
+          onMouseEnter: () => s(!0),
+          onMouseLeave: () => s(!1),
+          className: "suggestion-button",
+          style: c ? { ...o, ...g } : { ...o },
+          "data-testid": t === e ? "show" : "hide",
+          children: t === e ? a || "Ver todas as sugestões" : l || "Ocultar algumas sugestões"
+        }
+      )
+    }
+  );
+};
+export {
+  x as Button
+};

package/dist/packages/SearchSugestions/components/Button/showMoreOrLess.d.ts

@@ -0,0 +1 @@
+export declare const showMoreOrLess: (itemsToShow: number, itemsToShowQuantity: number, setItemsToShowQuantity: (itemsToShow: number) => void) => void;

package/dist/packages/SearchSugestions/components/Button/showMoreOrLess.js

@@ -0,0 +1,6 @@
+const f = (r, c, n) => {
+  n(c === r ? 1 / 0 : r);
+};
+export {
+  f as showMoreOrLess
+};

package/dist/packages/SearchSugestions/components/Link/index.d.ts

@@ -0,0 +1,10 @@
+import { default as React, CSSProperties } from 'react';
+
+interface LinkProps {
+    href: string;
+    children: React.ReactNode;
+    suggestionLinkStyle?: CSSProperties;
+    suggestionLinkHoveredStyle?: CSSProperties;
+}
+export declare const Link: React.FC<LinkProps>;
+export {};

package/dist/packages/SearchSugestions/components/Link/index.js

@@ -0,0 +1,34 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { navigation as u } from "./navigation.js";
+import { baseSuggestionLinkStyle as S } from "../../styles/baseSuggestionLinkStyle.js";
+import { baseSuggestionLinkHoveredStyle as f } from "../../styles/baseSuggestionLinkHoveredStyle.js";
+const y = ({
+  href: e,
+  children: n,
+  suggestionLinkStyle: i,
+  suggestionLinkHoveredStyle: s
+}) => {
+  const [r, o] = m(!1), t = {
+    ...S,
+    ...i
+  }, a = {
+    ...f,
+    ...s
+  };
+  return /* @__PURE__ */ l(
+    "a",
+    {
+      href: e,
+      onClick: (g) => u(g, e),
+      onMouseEnter: () => o(!0),
+      onMouseLeave: () => o(!1),
+      className: "suggestion-link",
+      style: r ? { ...t, ...a } : { ...t },
+      children: n
+    }
+  );
+};
+export {
+  y as Link
+};

package/dist/packages/SearchSugestions/components/Link/navigation.d.ts

@@ -0,0 +1 @@
+export declare const navigation: (event: React.MouseEvent<HTMLElement>, href: string) => void;

package/dist/packages/SearchSugestions/components/Link/navigation.js

@@ -0,0 +1,8 @@
+const o = (t, n) => {
+  t.preventDefault(), window.history.pushState({}, "", n);
+  const e = new PopStateEvent("popstate");
+  window.dispatchEvent(e);
+};
+export {
+  o as navigation
+};

package/dist/packages/SearchSugestions/components/SearchSuggestions/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { SearchSuggestionsProps } from '../../types/SearchSuggestionsProps';
+
+export declare const SearchSuggestions: React.FC<SearchSuggestionsProps>;

package/dist/packages/SearchSugestions/components/SearchSuggestions/index.js

@@ -0,0 +1,83 @@
+import { jsxs as Q, jsx as s } from "react/jsx-runtime";
+import { useState as S, useEffect as _ } from "react";
+import { Link as k } from "../Link/index.js";
+import { Button as q } from "../Button/index.js";
+import { SearchText as A } from "../SearchText/Index.js";
+import { baseTitleStyle as E } from "../../styles/baseTitleStyle.js";
+import { baseAllSuggestionsContainerStyle as L } from "../../styles/baseAllSuggestionsContainerStyle.js";
+const K = ({
+  searchSuggestions: n,
+  loading: l,
+  itemsToShow: t = 1 / 0,
+  searchFor: r,
+  loadingText: c,
+  searchForText: g,
+  titleText: u,
+  showMoreSuggestionsText: f,
+  showLessSuggestionsText: m,
+  searchForStyle: p,
+  searchForTermStyle: d,
+  titleStyle: y,
+  allSuggestionsContainerStyle: h,
+  suggestionLinkStyle: x,
+  suggestionLinkHoveredStyle: N,
+  buttonStyle: v,
+  buttonHoveredStyle: b,
+  urlSearch: i
+}) => {
+  const [o, a] = S(t);
+  _(() => {
+    a(t);
+  }, [t]);
+  const j = t > 0 && n.length > t, B = (e) => i ? i.replace("{{term}}", e) : `/s/?q=${e}&sort=score_desc&page=0`;
+  return /* @__PURE__ */ Q("div", { className: "suggestions-main-container", children: [
+    r && /* @__PURE__ */ s(
+      A,
+      {
+        searchFor: r,
+        searchForText: g,
+        searchForStyle: p,
+        searchForTermStyle: d
+      }
+    ),
+    /* @__PURE__ */ s("h2", { style: { ...E, ...y }, children: u ?? "Ver por interesse:" }),
+    /* @__PURE__ */ s(
+      "div",
+      {
+        className: "suggestions-all_suggestions-container",
+        style: {
+          ...L,
+          ...h
+        },
+        children: l ? /* @__PURE__ */ s("span", { className: "suggestions-loading", children: c ?? "Carregando sugestões..." }) : n.map(({ term: e }, C) => {
+          const I = /* @__PURE__ */ s(
+            k,
+            {
+              href: B(e),
+              suggestionLinkStyle: x,
+              suggestionLinkHoveredStyle: N,
+              children: e
+            },
+            e
+          );
+          return t >= 0 && C + 1 <= o ? I : null;
+        })
+      }
+    ),
+    j && /* @__PURE__ */ s(
+      q,
+      {
+        itemsToShowQuantity: o,
+        setItemsToShowQuantity: a,
+        itemsToShow: t,
+        showMoreSuggestionsText: f,
+        showLessSuggestionsText: m,
+        buttonStyle: v,
+        buttonHoveredStyle: b
+      }
+    )
+  ] });
+};
+export {
+  K as SearchSuggestions
+};

package/dist/packages/SearchSugestions/components/SearchText/Index.d.ts

@@ -0,0 +1,10 @@
+import { default as React, CSSProperties } from 'react';
+
+interface SearchForProps {
+    searchFor: string;
+    searchForText?: string;
+    searchForStyle?: CSSProperties;
+    searchForTermStyle?: CSSProperties;
+}
+export declare const SearchText: React.FC<SearchForProps>;
+export {};

package/dist/packages/SearchSugestions/components/SearchText/Index.js

@@ -0,0 +1,37 @@
+import { jsxs as r } from "react/jsx-runtime";
+import { baseSearchForStyle as o } from "../../styles/baseSearchForStyle.js";
+import { baseSearchForTermStyle as c } from "../../styles/baseSearchForTermStyle.js";
+const l = ({
+  searchFor: e,
+  searchForText: s,
+  searchForStyle: t,
+  searchForTermStyle: a
+}) => /* @__PURE__ */ r(
+  "p",
+  {
+    className: "suggestion-search_for",
+    style: { ...o, ...t },
+    "data-testid": "search-for",
+    children: [
+      s ?? "Você pesquisou por ",
+      /* @__PURE__ */ r(
+        "span",
+        {
+          className: "suggestion-search_for-term",
+          style: { ...c, ...a },
+          children: [
+            "“",
+            e.replace(
+              e.charAt(0),
+              e.charAt(0).toUpperCase()
+            ),
+            "”"
+          ]
+        }
+      )
+    ]
+  }
+);
+export {
+  l as SearchText
+};

package/dist/packages/SearchSugestions/index.d.ts

@@ -0,0 +1,3 @@
+export { SearchSuggestions } from './components/SearchSuggestions';
+export type { SearchSuggestionsProps } from './types/SearchSuggestionsProps';
+export type { SearchSuggestionsApiResponse, Searches } from './types/ResponseApi';

package/dist/packages/SearchSugestions/index.js

@@ -0,0 +1,4 @@
+import { SearchSuggestions as r } from "./components/SearchSuggestions/index.js";
+export {
+  r as SearchSuggestions
+};

package/dist/packages/SearchSugestions/mocks.d.ts

@@ -0,0 +1,4 @@
+export declare const mockSearchSuggestions: {
+    term: string;
+}[];
+export declare const mockSearchFor = "user search";

package/dist/packages/SearchSugestions/mocks.js

@@ -0,0 +1,16 @@
+const t = [
+  { term: "test-term-1" },
+  { term: "test-term-2" },
+  { term: "test-term-3" },
+  { term: "test-term-4" },
+  { term: "test-term-5" },
+  { term: "test-term-6" },
+  { term: "test-term-7" },
+  { term: "test-term-8" },
+  { term: "test-term-9" },
+  { term: "test-term-10" }
+], e = "user search";
+export {
+  e as mockSearchFor,
+  t as mockSearchSuggestions
+};

package/dist/packages/SearchSugestions/styles/baseAllSuggestionsContainerStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+
+export declare const baseAllSuggestionsContainerStyle: CSSProperties;

package/dist/packages/SearchSugestions/styles/baseAllSuggestionsContainerStyle.js

@@ -0,0 +1,10 @@
+const e = {
+  display: "flex",
+  alignItems: "center",
+  flexWrap: "wrap",
+  gap: "8px 4px",
+  margin: "8px 0"
+};
+export {
+  e as baseAllSuggestionsContainerStyle
+};

package/dist/packages/SearchSugestions/styles/baseButtonHoveredStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+
+export declare const baseButtonHoveredStyle: CSSProperties;

package/dist/packages/SearchSugestions/styles/baseButtonHoveredStyle.js

@@ -0,0 +1,7 @@
+const o = {
+  background: "transparent",
+  color: "var(--color-support-links, #00289C)"
+};
+export {
+  o as baseButtonHoveredStyle
+};

package/dist/packages/SearchSugestions/styles/baseButtonStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+
+export declare const baseButtonStyle: CSSProperties;

package/dist/packages/SearchSugestions/styles/baseButtonStyle.js

@@ -0,0 +1,13 @@
+const o = {
+  display: "inline-block",
+  border: "none",
+  background: "transparent",
+  color: "var(--color-support-links, #00289C)",
+  fontSize: "14px",
+  lineHeight: "18px",
+  textDecoration: "underline",
+  cursor: "pointer"
+};
+export {
+  o as baseButtonStyle
+};

package/dist/packages/SearchSugestions/styles/baseSearchForStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+
+export declare const baseSearchForStyle: CSSProperties;

package/dist/packages/SearchSugestions/styles/baseSearchForStyle.js

@@ -0,0 +1,9 @@
+const c = {
+  margin: "0 0 24px 0",
+  color: "var(--color-grayScale, #1c1c1c)",
+  fontSize: "16px",
+  lineHeight: "20px"
+};
+export {
+  c as baseSearchForStyle
+};

package/dist/packages/SearchSugestions/styles/baseSearchForTermStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+
+export declare const baseSearchForTermStyle: CSSProperties;

package/dist/packages/SearchSugestions/styles/baseSearchForTermStyle.js

@@ -0,0 +1,8 @@
+const e = {
+  fontSize: "20px",
+  fontWeight: 700,
+  lineHeight: "24px"
+};
+export {
+  e as baseSearchForTermStyle
+};

package/dist/packages/SearchSugestions/styles/baseSuggestionLinkHoveredStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+
+export declare const baseSuggestionLinkHoveredStyle: CSSProperties;

package/dist/packages/SearchSugestions/styles/baseSuggestionLinkHoveredStyle.js

@@ -0,0 +1,7 @@
+const o = {
+  background: "var(--color-main, #004A93)",
+  color: "var(--color-grayScale-white, #fff)"
+};
+export {
+  o as baseSuggestionLinkHoveredStyle
+};

package/dist/packages/SearchSugestions/styles/baseSuggestionLinkStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+
+export declare const baseSuggestionLinkStyle: CSSProperties;

package/dist/packages/SearchSugestions/styles/baseSuggestionLinkStyle.js

@@ -0,0 +1,14 @@
+const o = {
+  display: "inline-block",
+  padding: "8.5px 8px",
+  border: "1px solid var(--color-main, #004A93)",
+  borderRadius: "16px",
+  color: "var(--color-main, #004A93)",
+  fontSize: "11px",
+  lineHeight: "15px",
+  textTransform: "capitalize",
+  textDecoration: "none"
+};
+export {
+  o as baseSuggestionLinkStyle
+};

package/dist/packages/SearchSugestions/styles/baseTitleStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+
+export declare const baseTitleStyle: CSSProperties;

package/dist/packages/SearchSugestions/styles/baseTitleStyle.js

@@ -0,0 +1,9 @@
+const e = {
+  margin: 0,
+  fontSize: 20,
+  lineHeight: "24px",
+  color: "var(--color-grayScale, #1c1c1c)"
+};
+export {
+  e as baseTitleStyle
+};

package/dist/packages/SearchSugestions/types/ResponseApi.d.ts

@@ -0,0 +1,10 @@
+export interface SearchSuggestionsApiResponse {
+    data: {
+        searchSuggestions: {
+            searches: Searches[];
+        };
+    };
+}
+export interface Searches {
+    term: string;
+}

package/dist/packages/SearchSugestions/types/ResponseApi.js

@@ -0,0 +1 @@
+

package/dist/packages/SearchSugestions/types/SearchSuggestionsProps.d.ts

@@ -0,0 +1,24 @@
+import { CSSProperties } from 'react';
+
+export interface SearchSuggestionsProps {
+    searchSuggestions: Array<{
+        term: string;
+    }>;
+    loading: boolean;
+    itemsToShow?: number;
+    searchFor?: string;
+    loadingText?: string;
+    searchForText?: string;
+    titleText?: string;
+    showMoreSuggestionsText?: string;
+    showLessSuggestionsText?: string;
+    searchForStyle?: CSSProperties;
+    searchForTermStyle?: CSSProperties;
+    titleStyle?: CSSProperties;
+    allSuggestionsContainerStyle?: CSSProperties;
+    suggestionLinkStyle?: CSSProperties;
+    suggestionLinkHoveredStyle?: CSSProperties;
+    buttonStyle?: CSSProperties;
+    buttonHoveredStyle?: CSSProperties;
+    urlSearch?: string;
+}

package/dist/packages/SearchSugestions/types/SearchSuggestionsProps.js

@@ -0,0 +1 @@
+

package/dist/packages/Skeleton/components/SkeletonAnimation/SkeletonAnimation.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { StyleAnimation } from '../../types/types';
+
+interface SkeletonAnimationProps {
+    styleAnimation?: StyleAnimation;
+    children?: React.ReactNode;
+}
+export declare const SkeletonAnimation: React.FC<SkeletonAnimationProps>;
+export {};

package/dist/packages/Skeleton/components/SkeletonAnimation/SkeletonAnimation.js

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+const o = ({
+  styleAnimation: t
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    "data-testid": "skeleton-animation",
+    style: t,
+    className: "skeleton-animation"
+  }
+);
+export {
+  o as SkeletonAnimation
+};

package/dist/packages/Skeleton/components/SkeletonContainer/SkeletonContainer.d.ts

@@ -0,0 +1,15 @@
+import { default as React, RefObject } from 'react';
+import { StyleContainers } from '../../types/types';
+
+interface SkeletonContainerProps {
+    skeletonContainer?: RefObject<HTMLDivElement>;
+    placeholder?: string;
+    styleContainers?: StyleContainers | {
+        position: 'relative';
+    } | {
+        cursor: 'progress';
+    };
+    children?: React.ReactNode;
+}
+export declare const SkeletonContainer: React.FC<SkeletonContainerProps>;
+export {};

package/dist/packages/Skeleton/components/SkeletonContainer/SkeletonContainer.js

@@ -0,0 +1,22 @@
+import { jsxs as s } from "react/jsx-runtime";
+const a = ({
+  children: e,
+  skeletonContainer: t,
+  placeholder: n,
+  styleContainers: o
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    "data-testid": "skeleton-container",
+    ref: t,
+    style: o,
+    className: "skeleton-container",
+    children: [
+      n,
+      e
+    ]
+  }
+);
+export {
+  a as SkeletonContainer
+};

package/dist/packages/Skeleton/components/SkeletonRender/SkeletonRender.d.ts

@@ -0,0 +1,21 @@
+import { default as React, RefObject } from 'react';
+import { StyleContainers, StyleTable, StyleCell, StyleAnimation } from '../../types/types';
+
+interface SkeletonRenderProps {
+    count: number;
+    wrappers: number[];
+    rows: number;
+    tableRows: number[];
+    columns: number;
+    tableColumns: number[];
+    skeletonContainer?: RefObject<HTMLDivElement>;
+    placeholder: string | undefined;
+    styleContainers?: StyleContainers;
+    styleTable?: StyleTable;
+    styleCell?: StyleCell;
+    styleAnimation?: StyleAnimation;
+    animation: boolean | undefined;
+    children?: React.ReactNode;
+}
+export declare const SkeletonRender: React.FC<SkeletonRenderProps>;
+export {};

package/dist/packages/Skeleton/components/SkeletonRender/SkeletonRender.js

@@ -0,0 +1,57 @@
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
+import { SkeletonContainer as m } from "../SkeletonContainer/SkeletonContainer.js";
+import { SkeletonWrapper as g } from "../SkeletonWrapper/SkeletonWrapper.js";
+import { SkeletonTable as v } from "../SkeletonTable/SkeletonTable.js";
+import { SkeletonAnimation as f } from "../SkeletonAnimation/SkeletonAnimation.js";
+const w = ({
+  count: S,
+  wrappers: d,
+  rows: i,
+  tableRows: k,
+  columns: h,
+  tableColumns: t,
+  skeletonContainer: c,
+  placeholder: u,
+  styleContainers: o,
+  styleTable: x,
+  styleCell: j,
+  styleAnimation: e,
+  animation: p
+}) => S > 0 ? /* @__PURE__ */ r(
+  m,
+  {
+    skeletonContainer: c,
+    styleContainers: (o == null ? void 0 : o.cursor) && { cursor: "progress" },
+    children: d.map((l) => /* @__PURE__ */ r(
+      g,
+      {
+        styleContainers: o,
+        placeholder: u,
+        children: p && /* @__PURE__ */ r(f, { styleAnimation: e })
+      },
+      l
+    ))
+  }
+) : i > 0 && h > 0 ? /* @__PURE__ */ b(m, { styleContainers: { position: "relative" }, children: [
+  /* @__PURE__ */ r(
+    v,
+    {
+      tableRows: k,
+      tableColumns: t,
+      styleTable: x,
+      styleCell: j
+    }
+  ),
+  p && /* @__PURE__ */ r(f, { styleAnimation: e })
+] }) : /* @__PURE__ */ r(
+  m,
+  {
+    skeletonContainer: c,
+    styleContainers: o,
+    placeholder: u,
+    children: p && /* @__PURE__ */ r(f, { styleAnimation: e })
+  }
+);
+export {
+  w as SkeletonRender
+};

package/dist/packages/Skeleton/components/SkeletonTable/SkeletonTable.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { StyleTable, StyleCell } from '../../types/types';
+
+interface SkeletonTableProps {
+    tableRows: number[];
+    tableColumns: number[];
+    styleTable?: StyleTable;
+    styleCell?: StyleCell;
+    children?: React.ReactNode;
+}
+export declare const SkeletonTable: React.FC<SkeletonTableProps>;
+export {};

package/dist/packages/Skeleton/components/SkeletonTable/SkeletonTable.js

@@ -0,0 +1,18 @@
+import { jsx as e } from "react/jsx-runtime";
+const c = ({
+  tableRows: l,
+  tableColumns: t,
+  styleTable: s,
+  styleCell: a
+}) => /* @__PURE__ */ e(
+  "table",
+  {
+    "data-testid": "skeleton-table",
+    style: s,
+    className: "skeleton-table",
+    children: /* @__PURE__ */ e("tbody", { style: { display: "block" }, children: l.map((o) => /* @__PURE__ */ e("tr", { style: { display: "block" }, children: t.map((d) => /* @__PURE__ */ e("td", { style: a }, d)) }, o)) })
+  }
+);
+export {
+  c as SkeletonTable
+};

package/dist/packages/Skeleton/components/SkeletonWrapper/SkeletonWrapper.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { StyleContainers } from '../../types/types';
+
+interface SkeletonWrapperProps {
+    placeholder?: string;
+    styleContainers?: StyleContainers;
+    children?: React.ReactNode;
+}
+export declare const SkeletonWrapper: React.FC<SkeletonWrapperProps>;
+export {};

package/dist/packages/Skeleton/components/SkeletonWrapper/SkeletonWrapper.js

@@ -0,0 +1,20 @@
+import { jsxs as s } from "react/jsx-runtime";
+const a = ({
+  children: e,
+  placeholder: r,
+  styleContainers: t
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    "data-testid": "skeleton-wrapper",
+    style: t,
+    className: "skeleton-wrapper",
+    children: [
+      r,
+      e
+    ]
+  }
+);
+export {
+  a as SkeletonWrapper
+};

package/dist/packages/Skeleton/hooks/useResponsiveImages.d.ts

@@ -0,0 +1,9 @@
+import { ResponsiveImage } from '../types/types';
+
+declare const useResponsiveImages: (responsiveImage: undefined | ResponsiveImage | ResponsiveImage[], responsiveImageSSR: undefined | ResponsiveImage) => {
+    srcWidth: number;
+    srcHeight: number;
+    widthSkeletonContainer: number;
+    skeletonContainer: import('react').MutableRefObject<HTMLDivElement | null>;
+};
+export default useResponsiveImages;

package/dist/packages/Skeleton/hooks/useResponsiveImages.js

@@ -0,0 +1,34 @@
+import { useRef as B, useState as f, useEffect as b } from "react";
+const E = (t, c) => {
+  const d = B(null), [e, l] = f(0), [u, w] = f(0), [o, h] = f(0), [y, k] = f(0), W = () => {
+    d.current && (l(d.current.offsetWidth), w(window.innerWidth));
+  }, H = (i) => {
+    i.sort((n, r) => n.breakIn && r.breakIn ? n.breakIn > r.breakIn ? 1 : -1 : !n.breakIn && r.breakIn ? 1 : n.breakIn && !r.breakIn ? -1 : n.srcWidth > r.srcWidth ? 1 : -1);
+  }, A = (i) => {
+    i.sort((n, r) => n.breakIn && r.breakIn && n.breakIn === r.breakIn ? n.srcWidth > r.srcWidth ? 1 : -1 : 0);
+  };
+  return b(() => (!c && t && window.addEventListener("resize", () => W()), () => window.removeEventListener("resize", () => W())), [t, c]), b(() => {
+    t && !c && (W(), Array.isArray(t) ? (H(t), A(t), h(t[0].srcWidth), k(t[0].srcHeight)) : (h(t.srcWidth), k(t.srcHeight)));
+  }, [d, t, c]), b(() => {
+    if (!c && t && Array.isArray(t) && t[0].breakIn)
+      for (const i in t) {
+        const n = t[i], r = t[+i + 1];
+        if (t[0].breakIn && t[0].breakIn >= u) {
+          h(t[0].srcWidth), k(t[0].srcHeight);
+          break;
+        }
+        if (n.breakIn !== void 0 && n.breakIn <= u && r) {
+          h(r.srcWidth), k(r.srcHeight);
+          break;
+        }
+      }
+  }, [u, t, c]), {
+    srcWidth: o,
+    srcHeight: y,
+    widthSkeletonContainer: e,
+    skeletonContainer: d
+  };
+};
+export {
+  E as default
+};

package/dist/packages/Skeleton/index.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+import { ResponsiveImage } from './types/types';
+
+export interface SkeletonProps {
+    width?: number | string;
+    height?: number | string;
+    margin?: number | 'auto';
+    padding?: number;
+    border?: true;
+    borderColor?: string;
+    borderRadius?: number;
+    circle?: true;
+    backgroundColor?: string;
+    color?: string;
+    cursor?: true;
+    placeholder?: string;
+    placeholderPosition?: {
+        horizontal: 'left' | 'center' | 'right';
+        vertical: 'top' | 'center' | 'bottom';
+    };
+    animation?: true;
+    animationColor?: string;
+    animationDuration?: number;
+    count?: number;
+    responsiveImage?: ResponsiveImage | ResponsiveImage[];
+    responsiveImageSSR?: ResponsiveImage;
+    table?: {
+        rows: number;
+        columns: number;
+    };
+}
+export declare const Skeleton: React.FC<SkeletonProps>;

package/dist/packages/Skeleton/index.js

@@ -0,0 +1,91 @@
+import { jsx as E } from "react/jsx-runtime";
+import { SkeletonRender as F } from "./components/SkeletonRender/SkeletonRender.js";
+import G from "./hooks/useResponsiveImages.js";
+import J from "./utils/createStyleContainers.js";
+import K from "./utils/createStyleTable.js";
+import L from "./utils/createStyleCell.js";
+import M from "./utils/createStyleAnimation.js";
+const $ = (h) => {
+  const {
+    width: s,
+    height: i = "1em",
+    margin: l,
+    padding: g,
+    border: a,
+    borderColor: c,
+    borderRadius: y,
+    circle: C,
+    backgroundColor: m = "#ccc",
+    color: b,
+    cursor: d,
+    placeholder: S,
+    placeholderPosition: o,
+    animation: t,
+    animationColor: w,
+    animationDuration: v,
+    count: r = 0,
+    responsiveImage: p,
+    responsiveImageSSR: f,
+    table: e = { rows: 0, columns: 0 }
+  } = h, { skeletonContainer: x, widthSkeletonContainer: k, srcWidth: R, srcHeight: A } = G(p, f), u = {
+    left: "flex-start",
+    top: "flex-start",
+    center: "center",
+    right: "flex-end",
+    bottom: "flex-end"
+  }, I = o ? u[o.horizontal] : void 0, P = o ? u[o.vertical] : void 0, n = (q) => Array.from({ length: q }, (N, B) => B), j = n(r), T = n(e.rows), z = n(e.columns), D = J({
+    width: s,
+    height: i,
+    margin: l,
+    padding: g,
+    border: a,
+    borderColor: c,
+    borderRadius: y,
+    circle: C,
+    backgroundColor: m,
+    color: b,
+    cursor: d,
+    placeholderPosition: o,
+    justifyContent: I,
+    alignItems: P,
+    animation: t,
+    count: r,
+    responsiveImage: p,
+    responsiveImageSSR: f,
+    widthSkeletonContainer: k,
+    srcWidth: R,
+    srcHeight: A
+  }), H = K({
+    width: s,
+    cursor: d,
+    animation: t
+  }), W = L({
+    height: i,
+    margin: l,
+    border: a,
+    borderColor: c,
+    backgroundColor: m,
+    table: e
+  }), _ = M(w, v);
+  return /* @__PURE__ */ E(
+    F,
+    {
+      count: r,
+      wrappers: j,
+      rows: e.rows,
+      tableRows: T,
+      columns: e.columns,
+      tableColumns: z,
+      skeletonContainer: x,
+      placeholder: S,
+      styleContainers: D,
+      styleTable: H,
+      styleCell: W,
+      styleAnimation: _,
+      animation: t
+    }
+  );
+};
+export {
+  $ as Skeleton
+};

package/dist/packages/Skeleton/types/types.d.ts

@@ -0,0 +1,42 @@
+export interface ResponsiveImage {
+    srcWidth: number;
+    srcHeight: number;
+    breakIn?: number;
+}
+export type NumberStringUndefined = number | string | undefined;
+export interface StyleContainers {
+    position: 'relative' | undefined;
+    display: 'flex' | undefined;
+    justifyContent: string | undefined;
+    alignItems: string | undefined;
+    width: NumberStringUndefined;
+    height: NumberStringUndefined;
+    margin: NumberStringUndefined;
+    padding: number | undefined;
+    paddingTop: string | undefined;
+    border: '1px solid' | undefined;
+    borderColor: string | undefined;
+    borderRadius: NumberStringUndefined;
+    backgroundColor: string;
+    color: string | undefined;
+    cursor: 'progress' | undefined;
+}
+export interface StyleTable {
+    position: 'relative' | undefined;
+    display: 'block';
+    width: NumberStringUndefined;
+    cursor: 'progress' | undefined;
+}
+export interface StyleCell {
+    display: 'inline-block';
+    width: NumberStringUndefined;
+    height: number | string;
+    margin: number | 'auto';
+    border: '1px solid' | undefined;
+    borderColor: string | undefined;
+    backgroundColor: string;
+}
+export interface StyleAnimation {
+    backgroundColor: string | '#ddd';
+    animationDuration: string | '3000ms';
+}

package/dist/packages/Skeleton/types/types.js

@@ -0,0 +1 @@
+

package/dist/packages/Skeleton/utils/createStyleAnimation.d.ts

@@ -0,0 +1,7 @@
+import { StyleAnimation } from '../types/types';
+
+interface CreateStyleAnimation {
+    (animationColor?: string, animationDuration?: number): StyleAnimation;
+}
+declare const createStyleAnimation: CreateStyleAnimation;
+export default createStyleAnimation;

package/dist/packages/Skeleton/utils/createStyleAnimation.js

@@ -0,0 +1,7 @@
+const o = (e, t) => ({
+  backgroundColor: e ?? "#ddd",
+  animationDuration: t ? `${t}ms` : "3000ms"
+});
+export {
+  o as default
+};

package/dist/packages/Skeleton/utils/createStyleCell.d.ts

@@ -0,0 +1,18 @@
+import { StyleCell } from '../types/types';
+
+interface CreateStyleCellParams {
+    height: number | string;
+    margin: number | 'auto' | undefined;
+    border: true | undefined;
+    borderColor: string | undefined;
+    backgroundColor: string;
+    table: {
+        rows: number;
+        columns: number;
+    };
+}
+interface CreateStyleCell {
+    (params: CreateStyleCellParams): StyleCell;
+}
+declare const createStyleCell: CreateStyleCell;
+export default createStyleCell;

package/dist/packages/Skeleton/utils/createStyleCell.js

@@ -0,0 +1,19 @@
+const s = ({
+  height: e,
+  margin: l,
+  border: o,
+  borderColor: t,
+  backgroundColor: d,
+  table: c
+}) => ({
+  display: "inline-block",
+  backgroundColor: d,
+  width: l !== "auto" && l ? `calc(100% / ${c.columns} - ${3 * l}px)` : `calc(100% / ${c.columns} - 6px)`,
+  height: e,
+  margin: l ?? 2,
+  border: o ? "1px solid" : void 0,
+  borderColor: o && (t ?? "#000")
+});
+export {
+  s as default
+};

package/dist/packages/Skeleton/utils/createStyleContainers.d.ts

@@ -0,0 +1,33 @@
+import { ResponsiveImage, StyleContainers, NumberStringUndefined } from '../types/types';
+
+interface CreateStyleContainerParams {
+    width: NumberStringUndefined;
+    height: number | string;
+    margin: NumberStringUndefined;
+    padding: number | undefined;
+    border: true | undefined;
+    borderColor: string | undefined;
+    borderRadius: number | undefined;
+    circle: true | undefined;
+    backgroundColor: string;
+    color: string | undefined;
+    cursor: true | undefined;
+    placeholderPosition: {
+        horizontal: string;
+        vertical: string;
+    } | undefined;
+    justifyContent: string | undefined;
+    alignItems: string | undefined;
+    animation: true | undefined;
+    count: number;
+    responsiveImage: ResponsiveImage | ResponsiveImage[] | undefined;
+    responsiveImageSSR: ResponsiveImage | undefined;
+    widthSkeletonContainer: number;
+    srcWidth: number | undefined;
+    srcHeight: number | undefined;
+}
+interface CreateStyleContainer {
+    (params: CreateStyleContainerParams): StyleContainers;
+}
+declare const createStyleContainers: CreateStyleContainer;
+export default createStyleContainers;

package/dist/packages/Skeleton/utils/createStyleContainers.js

@@ -0,0 +1,45 @@
+const q = ({
+  width: e,
+  height: s,
+  margin: i,
+  padding: a,
+  border: t,
+  borderColor: c,
+  borderRadius: d,
+  circle: v,
+  backgroundColor: l,
+  color: p,
+  cursor: g,
+  placeholderPosition: h,
+  justifyContent: u,
+  alignItems: x,
+  animation: C,
+  count: f,
+  responsiveImage: b,
+  responsiveImageSSR: o,
+  widthSkeletonContainer: y,
+  srcWidth: r,
+  srcHeight: n
+}) => {
+  const H = f > 0 ? "0 0 5px 0" : void 0, T = v ? "50%" : void 0, $ = b ? r && n && y * n / r : s, j = o ? void 0 : $, k = o ? `${o.srcHeight * 100 / o.srcWidth}%` : void 0;
+  return {
+    position: C ? "relative" : void 0,
+    width: e,
+    height: j,
+    margin: i || H,
+    padding: a,
+    paddingTop: k,
+    border: t ? "1px solid" : void 0,
+    borderColor: t && (c ?? "#000"),
+    borderRadius: d || T,
+    backgroundColor: l,
+    color: p,
+    cursor: g ? "progress" : void 0,
+    display: h ? "flex" : void 0,
+    justifyContent: u,
+    alignItems: x
+  };
+};
+export {
+  q as default
+};

package/dist/packages/Skeleton/utils/createStyleTable.d.ts

@@ -0,0 +1,12 @@
+import { StyleTable, NumberStringUndefined } from '../types/types';
+
+interface CreateStyleTableParams {
+    width: NumberStringUndefined;
+    animation: true | undefined;
+    cursor: true | undefined;
+}
+interface CreateStyleTable {
+    (params: CreateStyleTableParams): StyleTable;
+}
+declare const createStyleTable: CreateStyleTable;
+export default createStyleTable;

package/dist/packages/Skeleton/utils/createStyleTable.js

@@ -0,0 +1,9 @@
+const t = ({ width: e, animation: o, cursor: r }) => ({
+  display: "block",
+  width: e,
+  position: o ? "relative" : void 0,
+  cursor: r ? "progress" : void 0
+});
+export {
+  t as default
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@plurix/ecom-components",
   "author": "Plurix",
   "private": false,
-  "version": "1.11.5",
+  "version": "1.12.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",