@lanaco/lnc-react-ui 4.0.25 → 4.0.26

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;

package/dist/index14.js

@@ -0,0 +1,254 @@
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { n as p } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { t as v, m as y, l as b } from "./utils-DtEdJZWa.js";
+import $ from "./Icon.js";
+import { u as k } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
+import { M as N } from "./consts-DNVz1x1I.js";
+const W = p.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;
+      ${v(2)}
+    }
+
+    & .wrapper__description {
+      color: var(--gray-600);
+      font-size: 0.75rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1rem;
+      letter-spacing: 0.025rem;
+      ${v(2)}
+    }
+  }
+`, I = p.div`
+  width: 100%;
+  height: 11.625rem;
+  border-radius: 0.75rem;
+  background: ${y("-90deg")};
+`, C = p.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);
+    }
+  }
+`, T = p.div`
+  width: 7rem;
+  height: 3rem;
+  border-radius: 999px;
+  background: ${y("-90deg")};
+`, j = m(({}, r) => /* @__PURE__ */ i(T, {})), z = m(
+  ({ text: r, isActive: n, icon: t, onSelectCard: s = () => {
+  } }, f) => /* @__PURE__ */ l(C, { className: n ? "active" : "", onClick: s, children: [
+    /* @__PURE__ */ i($, { icon: t, className: "wrapper__icon" }),
+    /* @__PURE__ */ i("div", { className: "wrapper__text", children: r })
+  ] })
+), F = m(
+  ({ image: r, imageComponent: n, title: t, description: s, onSelectCard: f = () => {
+  } }, w) => {
+    const { theme: d } = k();
+    return /* @__PURE__ */ l(W, { theme: d, onClick: f, children: [
+      b(n) ? n : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
+      /* @__PURE__ */ l("div", { className: "wrapper__content", children: [
+        t && /* @__PURE__ */ i("div", { className: "wrapper__title", children: t }),
+        s && /* @__PURE__ */ i("div", { className: "wrapper__description", children: s })
+      ] })
+    ] });
+  }
+), O = m(({}, r) => /* @__PURE__ */ i(I, {})), A = p.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: ${N + "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;
+    }
+  }
+`, X = m(
+  ({
+    title: r,
+    subtitle: n,
+    tags: t = [],
+    limitTags: s = 7,
+    limitTagsForMobile: f = 7,
+    limitCards: w = 3,
+    limitCardsForMobile: d = 2,
+    cards: a = [],
+    onSelectTag: h = () => {
+    },
+    onSelectCard: _ = () => {
+    }
+  }, M) => {
+    var x, u;
+    const c = (e) => {
+      h == null || h(e == null ? void 0 : e.uuid);
+    }, g = (e) => {
+      _ == null || _(e == null ? void 0 : e.uuid);
+    };
+    return /* @__PURE__ */ l(
+      A,
+      {
+        limitTags: s,
+        limitTagsForMobile: f,
+        limitCards: w,
+        limitCardsForMobile: d,
+        children: [
+          /* @__PURE__ */ l("div", { className: "wrapper__heading", children: [
+            r && /* @__PURE__ */ i("div", { className: "wrapper__title", children: r }),
+            n && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: n })
+          ] }),
+          /* @__PURE__ */ i("div", { className: "wrapper__tags", children: t && (t == null ? void 0 : t.length) > 0 ? t == null ? void 0 : t.map((e, o) => /* @__PURE__ */ i(
+            z,
+            {
+              icon: e == null ? void 0 : e.icon,
+              text: e == null ? void 0 : e.text,
+              onSelectCard: () => c == null ? void 0 : c(e)
+            },
+            `field-of-interests-with-tags-card-tag__${o + 1}`
+          )) : (x = Array.from("123")) == null ? void 0 : x.map((e, o) => /* @__PURE__ */ i(
+            j,
+            {},
+            `field-of-interests-with-tags-card-tag-skeleton__${o + 1}`
+          )) }),
+          /* @__PURE__ */ i("div", { className: "wrapper__cards", children: a && (a == null ? void 0 : a.length) > 0 ? a == null ? void 0 : a.map((e, o) => /* @__PURE__ */ i(
+            F,
+            {
+              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: () => g == null ? void 0 : g(e == null ? void 0 : e.uuid)
+            },
+            `field-of-interests-with-tags-card__${o + 1}`
+          )) : (u = Array.from("123")) == null ? void 0 : u.map((e, o) => /* @__PURE__ */ i(
+            O,
+            {},
+            `field-of-interests-with-tags-card-skeleton__${o + 1}`
+          )) })
+        ]
+      }
+    );
+  }
+);
+export {
+  X as default
+};