@lanaco/lnc-react-ui 4.0.23 → 4.0.26

package/dist/index13.cjs

@@ -0,0 +1,98 @@
+"use strict";const t=require("react/jsx-runtime"),f=require("react"),u=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),a=require("./consts-dNz9tpt4.cjs"),d=require("./utils-CE6bljYe.cjs"),$=require("./index-BlV3tdJ8.cjs"),I=u.newStyled.div`
+  width: 100%;
+  height: 11.625rem;
+  border-radius: 0.75rem;
+  background: ${d.linearGradientAnimation("-90deg")};
+`,A=u.newStyled.div`
+  width: 100%;
+  height: auto;
+  border-radius: 999px;
+
+  & .wrapper__image {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+    border-radius: 999px;
+    max-height: 9.875rem;
+  }
+
+  &.active {
+    border: var(--yellow-600, #d97706);
+  }
+
+  @media (max-width: ${a.MOBILE_SIZE_PX+"px"}) {
+    & .wrapper__image {
+      height: auto;
+    }
+  }
+`,F=u.newStyled.div`
+  width: 9.875rem;
+  height: 9.875rem;
+  border-radius: 999px;
+  background: ${d.linearGradientAnimation("-90deg")};
+
+  @media (max-width: ${a.MOBILE_SIZE_PX+"px"}) {
+    width: 4.5rem;
+    height: 4.5rem;
+  }
+`,N=f.forwardRef(({},i)=>t.jsx(F,{})),k=f.forwardRef(({isActive:i,image:o,imageComponent:r,onSelectCard:l=()=>{}},_)=>t.jsx(A,{className:i?"active":"",onClick:l,children:d.isDefined(r)?r:t.jsx("img",{src:o,className:"wrapper__image"})})),C=f.forwardRef(({uuid:i,title:o,price:r,currency:l,isNegotiable:_,isFree:x,image:w,sellerUuid:s,onSelectCard:m=()=>{},imageComponent:p,negotiableText:y="Negotiable",freeText:g="Free"},h)=>t.jsx($.SimpleProductCard,{uuid:i,title:o,price:r,currency:l,isNegotiable:_,isFree:x,image:w,imageComponent:p,sellerUuid:s,onSelectCard:m,negotiableText:y,freeText:g})),W=f.forwardRef(({},i)=>t.jsx(I,{})),O=u.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+
+  & .wrapper__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
+
+    & .wrapper__title {
+      color: var(--gray-950, #14161a);
+      text-align: center;
+      font-size: 1.5rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 2rem;
+      letter-spacing: -0.47px;
+    }
+
+    & .wrapper__subtitle {
+      color: var(---gray-600, #676e79);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+      letter-spacing: 0.25px;
+    }
+  }
+
+  & .wrapper__avatars {
+    display: grid;
+    grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitAvatars}, minmax(0, 1fr))`};
+    gap: 2rem;
+    justify-items: center;
+    align-items: center;
+  }
+
+  & .wrapper__cards {
+    display: grid;
+    grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCards}, minmax(0, 1fr))`};
+    gap: 1.25rem;
+    justify-items: center;
+    align-items: center;
+    width: 100%;
+  }
+
+  @media (max-width: ${a.MOBILE_SIZE_PX+"px"}) {
+    & .wrapper__avatars {
+      grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitAvatarsForMobile}, minmax(0, 1fr))`};
+      gap: auto;
+    }
+
+    & .wrapper__cards {
+      grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCardsForMobile}, minmax(0, 1fr))`};
+      gap: 1rem;
+    }
+  }
+`,R=f.forwardRef(({title:i,subtitle:o,avatars:r=[],limitAvatars:l=4,limitCards:_=6,limitAvatarsForMobile:x=4,limitCardsForMobile:w=2,cards:s=[],onSelectAvatar:m=()=>{},onSelectCard:p=()=>{}},y)=>{var j,b;const g=e=>{m==null||m(e==null?void 0:e.uuid)},h=e=>{p==null||p(e==null?void 0:e.uuid)};return t.jsxs(O,{limitAvatars:l,limitAvatarsForMobile:x,limitCards:_,limitCardsForMobile:w,children:[t.jsxs("div",{className:"wrapper__heading",children:[i&&t.jsx("div",{className:"wrapper__title",children:i}),o&&t.jsx("div",{className:"wrapper__subtitle",children:o})]}),t.jsx("div",{className:"wrapper__avatars",children:r&&(r==null?void 0:r.length)>0?r==null?void 0:r.map((e,n)=>t.jsx(k,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>g==null?void 0:g(e)},`field-of-interests-with-avatars-card-avatar__${n+1}`)):(j=Array.from("1234"))==null?void 0:j.map((e,n)=>t.jsx(N,{},`field-of-interests-with-avatars-card-avatar-skeleton__${n+1}`))}),t.jsx("div",{className:"wrapper__cards",children:s&&(s==null?void 0:s.length)>0?s==null?void 0:s.map((e,n)=>t.jsx(C,{uuid:e==null?void 0:e.uuid,title:e==null?void 0:e.title,price:e==null?void 0:e.price,currency:e==null?void 0:e.currency,isNegotiable:e==null?void 0:e.isNegotiable,isFree:e==null?void 0:e.isFree,image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,sellerUuid:e==null?void 0:e.sellerUuid,negotiableText:e==null?void 0:e.negotiableText,freeText:e==null?void 0:e.freeText,onSelectCard:()=>h==null?void 0:h(e)},`field-of-interests-with-avatars-card__${n+1}`)):(b=Array.from("123456"))==null?void 0:b.map((e,n)=>t.jsx(W,{},`field-of-interests-with-avatars-card-skeleton__${n+1}`))})]})});module.exports=R;

package/dist/index13.js

@@ -0,0 +1,221 @@
+import { jsx as t, jsxs as y } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { n as u } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { M as x } from "./consts-DNVz1x1I.js";
+import { m as F, l as N } from "./utils-DtEdJZWa.js";
+import { S as k } from "./index-DGl-lSfF.js";
+const A = u.div`
+  width: 100%;
+  height: 11.625rem;
+  border-radius: 0.75rem;
+  background: ${F("-90deg")};
+`, C = u.div`
+  width: 100%;
+  height: auto;
+  border-radius: 999px;
+
+  & .wrapper__image {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+    border-radius: 999px;
+    max-height: 9.875rem;
+  }
+
+  &.active {
+    border: var(--yellow-600, #d97706);
+  }
+
+  @media (max-width: ${x + "px"}) {
+    & .wrapper__image {
+      height: auto;
+    }
+  }
+`, W = u.div`
+  width: 9.875rem;
+  height: 9.875rem;
+  border-radius: 999px;
+  background: ${F("-90deg")};
+
+  @media (max-width: ${x + "px"}) {
+    width: 4.5rem;
+    height: 4.5rem;
+  }
+`, I = f(({}, i) => /* @__PURE__ */ t(W, {})), v = f(
+  ({ isActive: i, image: s, imageComponent: r, onSelectCard: o = () => {
+  } }, h) => /* @__PURE__ */ t(
+    C,
+    {
+      className: i ? "active" : "",
+      onClick: o,
+      children: N(r) ? r : /* @__PURE__ */ t("img", { src: s, className: "wrapper__image" })
+    }
+  )
+), O = f(
+  ({
+    uuid: i,
+    title: s,
+    price: r,
+    currency: o,
+    isNegotiable: h,
+    isFree: w,
+    image: a,
+    sellerUuid: m,
+    onSelectCard: l = () => {
+    },
+    imageComponent: p,
+    negotiableText: d = "Negotiable",
+    freeText: g = "Free"
+  }, _) => /* @__PURE__ */ t(
+    k,
+    {
+      uuid: i,
+      title: s,
+      price: r,
+      currency: o,
+      isNegotiable: h,
+      isFree: w,
+      image: a,
+      imageComponent: p,
+      sellerUuid: m,
+      onSelectCard: l,
+      negotiableText: d,
+      freeText: g
+    }
+  )
+), j = f(({}, i) => /* @__PURE__ */ t(A, {})), M = u.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+
+  & .wrapper__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
+
+    & .wrapper__title {
+      color: var(--gray-950, #14161a);
+      text-align: center;
+      font-size: 1.5rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 2rem;
+      letter-spacing: -0.47px;
+    }
+
+    & .wrapper__subtitle {
+      color: var(---gray-600, #676e79);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+      letter-spacing: 0.25px;
+    }
+  }
+
+  & .wrapper__avatars {
+    display: grid;
+    grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitAvatars}, minmax(0, 1fr))`};
+    gap: 2rem;
+    justify-items: center;
+    align-items: center;
+  }
+
+  & .wrapper__cards {
+    display: grid;
+    grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitCards}, minmax(0, 1fr))`};
+    gap: 1.25rem;
+    justify-items: center;
+    align-items: center;
+    width: 100%;
+  }
+
+  @media (max-width: ${x + "px"}) {
+    & .wrapper__avatars {
+      grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitAvatarsForMobile}, minmax(0, 1fr))`};
+      gap: auto;
+    }
+
+    & .wrapper__cards {
+      grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitCardsForMobile}, minmax(0, 1fr))`};
+      gap: 1rem;
+    }
+  }
+`, D = f(
+  ({
+    title: i,
+    subtitle: s,
+    avatars: r = [],
+    limitAvatars: o = 4,
+    limitCards: h = 6,
+    limitAvatarsForMobile: w = 4,
+    limitCardsForMobile: a = 2,
+    cards: m = [],
+    onSelectAvatar: l = () => {
+    },
+    onSelectCard: p = () => {
+    }
+  }, d) => {
+    var $, b;
+    const g = (e) => {
+      l == null || l(e == null ? void 0 : e.uuid);
+    }, _ = (e) => {
+      p == null || p(e == null ? void 0 : e.uuid);
+    };
+    return /* @__PURE__ */ y(
+      M,
+      {
+        limitAvatars: o,
+        limitAvatarsForMobile: w,
+        limitCards: h,
+        limitCardsForMobile: a,
+        children: [
+          /* @__PURE__ */ y("div", { className: "wrapper__heading", children: [
+            i && /* @__PURE__ */ t("div", { className: "wrapper__title", children: i }),
+            s && /* @__PURE__ */ t("div", { className: "wrapper__subtitle", children: s })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "wrapper__avatars", children: r && (r == null ? void 0 : r.length) > 0 ? r == null ? void 0 : r.map((e, n) => /* @__PURE__ */ t(
+            v,
+            {
+              image: e == null ? void 0 : e.image,
+              imageComponent: e == null ? void 0 : e.imageComponent,
+              onSelectCard: () => g == null ? void 0 : g(e)
+            },
+            `field-of-interests-with-avatars-card-avatar__${n + 1}`
+          )) : ($ = Array.from("1234")) == null ? void 0 : $.map((e, n) => /* @__PURE__ */ t(
+            I,
+            {},
+            `field-of-interests-with-avatars-card-avatar-skeleton__${n + 1}`
+          )) }),
+          /* @__PURE__ */ t("div", { className: "wrapper__cards", children: m && (m == null ? void 0 : m.length) > 0 ? m == null ? void 0 : m.map((e, n) => /* @__PURE__ */ t(
+            O,
+            {
+              uuid: e == null ? void 0 : e.uuid,
+              title: e == null ? void 0 : e.title,
+              price: e == null ? void 0 : e.price,
+              currency: e == null ? void 0 : e.currency,
+              isNegotiable: e == null ? void 0 : e.isNegotiable,
+              isFree: e == null ? void 0 : e.isFree,
+              image: e == null ? void 0 : e.image,
+              imageComponent: e == null ? void 0 : e.imageComponent,
+              sellerUuid: e == null ? void 0 : e.sellerUuid,
+              negotiableText: e == null ? void 0 : e.negotiableText,
+              freeText: e == null ? void 0 : e.freeText,
+              onSelectCard: () => _ == null ? void 0 : _(e)
+            },
+            `field-of-interests-with-avatars-card__${n + 1}`
+          )) : (b = Array.from("123456")) == null ? void 0 : b.map((e, n) => /* @__PURE__ */ t(
+            j,
+            {},
+            `field-of-interests-with-avatars-card-skeleton__${n + 1}`
+          )) })
+        ]
+      }
+    );
+  }
+);
+export {
+  D as default
+};

package/dist/index14.cjs

@@ -0,0 +1,161 @@
+"use strict";const t=require("react/jsx-runtime"),m=require("react"),p=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),l=require("./utils-CE6bljYe.cjs"),y=require("./Icon.cjs"),v=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),j=require("./consts-dNz9tpt4.cjs"),b=p.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-shrink: 0;
+  align-self: stretch;
+  border-radius: 0.75rem;
+  border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
+  background: var(--Lanaco-Gray-white, #fff);
+
+  /* drop-shadow-sm */
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  & .wrapper__image {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+    height: auto;
+    border-radius: 0.75rem 0.75rem 0 0;
+  }
+
+  & .wrapper__content {
+    display: flex;
+    padding: 0.75rem;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+    align-self: stretch;
+
+    & .wrapper__title {
+      color: var(--gray-950);
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.5rem;
+      ${l.truncateTextInRows(2)}
+    }
+
+    & .wrapper__description {
+      color: var(--gray-600);
+      font-size: 0.75rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1rem;
+      letter-spacing: 0.025rem;
+      ${l.truncateTextInRows(2)}
+    }
+  }
+`,$=p.newStyled.div`
+  width: 100%;
+  height: 11.625rem;
+  border-radius: 0.75rem;
+  background: ${l.linearGradientAnimation("-90deg")};
+`,k=p.newStyled.div`
+  display: flex;
+  padding: 0 0.75rem 0 0;
+  align-items: center;
+  background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
+  border-radius: 999px;
+
+  & .wrapper__icon {
+    font-size: 1.75rem;
+    color: var(--gray-950, #14161a);
+    background: var(--gray-200);
+    border-radius: 999px;
+    width: 2.75rem;
+    height: 2.75rem;
+
+    & i {
+      width: auto;
+    }
+  }
+
+  & .wrapper__text {
+    color: var(--gray-950, #14161a);
+    text-align: center;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.5rem;
+  }
+
+  &.active {
+    background: var(--yellow-600, #d97706);
+
+    & .wrapper__icon {
+      color: var(--white, #fff);
+    }
+
+    & .wrapper__text {
+      color: var(--white, #fff);
+    }
+  }
+`,N=p.newStyled.div`
+  width: 7rem;
+  height: 3rem;
+  border-radius: 999px;
+  background: ${l.linearGradientAnimation("-90deg")};
+`,I=m.forwardRef(({},r)=>t.jsx(N,{})),W=m.forwardRef(({text:r,isActive:n,icon:i,onSelectCard:o=()=>{}},d)=>t.jsxs(k,{className:n?"active":"",onClick:o,children:[t.jsx(y,{icon:i,className:"wrapper__icon"}),t.jsx("div",{className:"wrapper__text",children:r})]})),R=m.forwardRef(({image:r,imageComponent:n,title:i,description:o,onSelectCard:d=()=>{}},x)=>{const{theme:f}=v.useTheme();return t.jsxs(b,{theme:f,onClick:d,children:[l.isDefined(n)?n:t.jsx("img",{src:r,className:"wrapper__image"}),t.jsxs("div",{className:"wrapper__content",children:[i&&t.jsx("div",{className:"wrapper__title",children:i}),o&&t.jsx("div",{className:"wrapper__description",children:o})]})]})}),T=m.forwardRef(({},r)=>t.jsx($,{})),q=p.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+
+  & .wrapper__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
+
+    & .wrapper__title {
+      color: var(--gray-950, #14161a);
+      text-align: center;
+      font-size: 1.5rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 2rem;
+      letter-spacing: -0.47px;
+    }
+
+    & .wrapper__subtitle {
+      color: var(---gray-600, #676e79);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+      letter-spacing: 0.25px;
+    }
+  }
+
+  & .wrapper__tags {
+    display: grid;
+    grid-template-columns: ${r=>`repeat(${r==null?void 0:r.limitTags}, minmax(0, 1fr))`};
+    justify-content: center;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  & .wrapper__cards {
+    display: grid;
+    grid-template-columns: ${r=>`repeat(${r==null?void 0:r.limitCards}, minmax(0, 1fr))`};
+    justify-content: center;
+    align-items: center;
+    gap: 1.5rem;
+    width: 100%;
+  }
+
+  @media (max-width: ${j.MOBILE_SIZE_PX+"px"}) {
+    & .wrapper__tags {
+      display: flex;
+      overflow-x: scroll;
+      justify-content: flex-start;
+      width: 100%;
+    }
+
+    & .wrapper__cards {
+      grid-template-columns: ${r=>`repeat(${r==null?void 0:r.limitCardsForMobile}, minmax(0, 1fr))`};
+      gap: 1rem;
+    }
+  }
+`,C=m.forwardRef(({title:r,subtitle:n,tags:i=[],limitTags:o=7,limitTagsForMobile:d=7,limitCards:x=3,limitCardsForMobile:f=2,cards:s=[],onSelectTag:c=()=>{},onSelectCard:_=()=>{}},z)=>{var g,u;const h=e=>{c==null||c(e==null?void 0:e.uuid)},w=e=>{_==null||_(e==null?void 0:e.uuid)};return t.jsxs(q,{limitTags:o,limitTagsForMobile:d,limitCards:x,limitCardsForMobile:f,children:[t.jsxs("div",{className:"wrapper__heading",children:[r&&t.jsx("div",{className:"wrapper__title",children:r}),n&&t.jsx("div",{className:"wrapper__subtitle",children:n})]}),t.jsx("div",{className:"wrapper__tags",children:i&&(i==null?void 0:i.length)>0?i==null?void 0:i.map((e,a)=>t.jsx(W,{icon:e==null?void 0:e.icon,text:e==null?void 0:e.text,onSelectCard:()=>h==null?void 0:h(e)},`field-of-interests-with-tags-card-tag__${a+1}`)):(g=Array.from("123"))==null?void 0:g.map((e,a)=>t.jsx(I,{},`field-of-interests-with-tags-card-tag-skeleton__${a+1}`))}),t.jsx("div",{className:"wrapper__cards",children:s&&(s==null?void 0:s.length)>0?s==null?void 0:s.map((e,a)=>t.jsx(R,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,title:e==null?void 0:e.title,description:e==null?void 0:e.description,onSelectCard:()=>w==null?void 0:w(e==null?void 0:e.uuid)},`field-of-interests-with-tags-card__${a+1}`)):(u=Array.from("123"))==null?void 0:u.map((e,a)=>t.jsx(T,{},`field-of-interests-with-tags-card-skeleton__${a+1}`))})]})});module.exports=C;