@websolutespa/bom-mixer-ui 0.0.1

package/dist/chunk-JTGZNI2A.mjs

@@ -0,0 +1,92 @@
+import {
+  Card
+} from "./chunk-ZBPDMEV4.mjs";
+import {
+  Flex
+} from "./chunk-QXUK3J2W.mjs";
+import {
+  require_link
+} from "./chunk-DBOW5IIN.mjs";
+import {
+  Button
+} from "./chunk-VTNTTQXM.mjs";
+import {
+  Grid
+} from "./chunk-LSXKWZBB.mjs";
+import {
+  Media
+} from "./chunk-TNJCCH5V.mjs";
+import {
+  Container,
+  Section,
+  Text
+} from "./chunk-2NOCZCBX.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  __toESM,
+  require_dynamic
+} from "./chunk-4GP5DTTM.mjs";
+
+// src/sections/products-detail-related/products-detail-related.tsx
+var import_dynamic = __toESM(require_dynamic());
+import { getClassNames } from "@websolutespa/bom-mixer-core";
+
+// src/sections/products-detail-related/products-detail-related-card.tsx
+var import_link = __toESM(require_link());
+import styled from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledCard = styled(Card)`
+  .media{
+    .image {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      object-fit: cover;
+
+      &:not(:first-child) {
+        opacity: 0!important;
+      }
+    }
+  }
+  &:hover {
+    .media {
+      .image:nth-child(2) {
+          opacity: 1!important;
+      }
+    }
+  }
+`;
+var ProductsDetailRelatedCard = (_a) => {
+  var _b = _a, { item } = _b, props = __objRest(_b, ["item"]);
+  return /* @__PURE__ */ jsxs(StyledCard, __spreadProps(__spreadValues({}, props), { hoverable: true, children: [
+    /* @__PURE__ */ jsx(import_link.default, { href: item.href, passHref: true, children: /* @__PURE__ */ jsx(Media, { as: "a", aspectRatio: 880 / 550, borderRadius: "0.4rem", marginBottom: "1.5rem", item: item.media }) }),
+    /* @__PURE__ */ jsx(Card.Content, { children: /* @__PURE__ */ jsx(Flex.Row, { justifyContent: "space-between", children: /* @__PURE__ */ jsx(Button, { variant: "nav", children: /* @__PURE__ */ jsx(Text, { size: "6", dangerouslySetInnerHTML: { __html: item.title || "untitled" } }) }) }) })
+  ] }));
+};
+
+// src/sections/products-detail-related/products-detail-related.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ProductsDetailRelated = ({ id, item }) => {
+  const classNames = getClassNames(item.schema);
+  if (!item) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx2(Section, { id, className: classNames, padding: "6rem 0", children: /* @__PURE__ */ jsxs2(Container, { children: [
+    item.title && /* @__PURE__ */ jsx2(Text, { size: "3", textAlign: "center", marginBottom: "4rem", dangerouslySetInnerHTML: { __html: item.title } }),
+    /* @__PURE__ */ jsx2(Grid.Row, { rowGap: "3rem", children: item.items && item.items.map((related, r) => /* @__PURE__ */ jsx2(Grid, { sm: 6, justifyContent: "center", children: /* @__PURE__ */ jsx2(ProductsDetailRelatedCard, { item: related }) }, r)) })
+  ] }) });
+};
+var ProductsDetailRelatedExport = {
+  "products-detail-related": (0, import_dynamic.default)(() => Promise.resolve().then(() => require_products_detail_related()).then(
+    (module) => module.ProductsDetailRelated
+  ))
+};
+
+export {
+  ProductsDetailRelated,
+  ProductsDetailRelatedExport
+};

package/dist/chunk-JYFB4EY7.mjs

@@ -0,0 +1,26 @@
+import {
+  Media
+} from "./chunk-TNJCCH5V.mjs";
+import {
+  __toESM,
+  require_dynamic
+} from "./chunk-4GP5DTTM.mjs";
+
+// src/lazy/media-full-1/media-full-1.tsx
+var import_dynamic = __toESM(require_dynamic());
+import { getClassNames } from "@websolutespa/bom-mixer-core";
+import { jsx } from "react/jsx-runtime";
+var MediaFull1 = ({ item }) => {
+  const classNames = getClassNames("media", item.schema);
+  return /* @__PURE__ */ jsx(Media, { className: classNames, aspectRatio: 16 / 10, item: item.media });
+};
+var MediaFull1Export = {
+  "media-full-1": (0, import_dynamic.default)(() => Promise.resolve().then(() => require_media_full_1()).then(
+    (module) => module.MediaFull1
+  ))
+};
+
+export {
+  MediaFull1,
+  MediaFull1Export
+};

package/dist/chunk-KJAR4KTH.mjs

@@ -0,0 +1,114 @@
+import {
+  Card
+} from "./chunk-ZBPDMEV4.mjs";
+import {
+  Flex
+} from "./chunk-QXUK3J2W.mjs";
+import {
+  require_link
+} from "./chunk-DBOW5IIN.mjs";
+import {
+  Button
+} from "./chunk-VTNTTQXM.mjs";
+import {
+  Media
+} from "./chunk-TNJCCH5V.mjs";
+import {
+  Container,
+  Section,
+  Text
+} from "./chunk-2NOCZCBX.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  __toESM,
+  require_dynamic
+} from "./chunk-4GP5DTTM.mjs";
+
+// src/sections/magazine-related/magazine-related.tsx
+var import_dynamic = __toESM(require_dynamic());
+import { getClassNames } from "@websolutespa/bom-mixer-core";
+import styled from "styled-components";
+import { Swiper, SwiperSlide } from "swiper/react";
+
+// src/sections/magazine-search/magazine-search-card.tsx
+var import_link = __toESM(require_link());
+import { useDateTimeFormat } from "@websolutespa/bom-mixer-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MagazineSearchCard = (_a) => {
+  var _b = _a, { item, fixedRatio = false } = _b, props = __objRest(_b, ["item", "fixedRatio"]);
+  const dateTimeFormat = useDateTimeFormat({
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+  return /* @__PURE__ */ jsxs(Card, __spreadProps(__spreadValues({}, props), { hoverable: true, width: "100%", children: [
+    /* @__PURE__ */ jsx(import_link.default, { href: item.href, passHref: true, children: /* @__PURE__ */ jsx(Media, { as: "a", aspectRatio: fixedRatio ? 400 / 472 : void 0, marginBottom: "2rem", item: item.media }) }),
+    /* @__PURE__ */ jsx(Card.Content, { children: /* @__PURE__ */ jsxs(Flex.Row, { alignItems: "flex-start", gap: "2rem", children: [
+      /* @__PURE__ */ jsx(Text, { flex: "100px", size: "10", children: dateTimeFormat(item.date) }),
+      /* @__PURE__ */ jsxs(Flex.Col, { flex: "calc(100% - 100px)", alignItems: "flex-start", gap: "1rem", children: [
+        /* @__PURE__ */ jsx(Text, { size: "6", lineHeight: "1.2", dangerouslySetInnerHTML: { __html: item.title || "untitled" } }),
+        /* @__PURE__ */ jsx(Button, { variant: "nav", children: /* @__PURE__ */ jsx(Text, { size: "9", textTransform: "uppercase", children: "View More" }) })
+      ] })
+    ] }) })
+  ] }));
+};
+
+// src/sections/magazine-related/magazine-related.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var StyledSection = styled(Section)`
+  .swiper-slide {
+    overflow: hidden;
+    width: 400px;
+
+    @media (max-width: 767px) {
+      width: calc(100% - 40px);
+    }
+  }
+`;
+var StyledCard = styled(Card)`
+  .media>.image {
+    transform: scale(1.1);
+    transition: all ease-in-out 350ms 200ms;
+  }
+  .button {
+    opacity: 0;
+    transform: translateY(30%);
+  }
+  .button {
+    transition: all ease-out 350ms 200ms;
+  }
+  .swiper-slide-active & {
+    .media>.image {
+      transform: scale(1);
+    }
+    .button {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+var MagazineRelated = (_a) => {
+  var _b = _a, { item } = _b, props = __objRest(_b, ["item"]);
+  if (!item) {
+    return null;
+  }
+  const items = item.items;
+  const classNames = getClassNames(item.schema);
+  return /* @__PURE__ */ jsxs2(StyledSection, { className: classNames, padding: "7rem 0", children: [
+    /* @__PURE__ */ jsx2(Container, { textAlign: "center", children: item.title && /* @__PURE__ */ jsx2(Text, { size: "3", marginBottom: "4rem", children: item.title }) }),
+    items && /* @__PURE__ */ jsx2(Swiper, __spreadProps(__spreadValues({}, props), { spaceBetween: 60, slidesPerView: "auto", centeredSlides: true, style: { width: "100%" }, children: items.map((item2, i) => /* @__PURE__ */ jsx2(SwiperSlide, { virtualIndex: i, children: /* @__PURE__ */ jsx2(MagazineSearchCard, { fixedRatio: true, item: item2 }) }, i)) }))
+  ] });
+};
+var MagazineRelatedExport = {
+  "magazine-related": (0, import_dynamic.default)(() => Promise.resolve().then(() => require_magazine_related()).then(
+    (module) => module.MagazineRelated
+  ))
+};
+
+export {
+  MagazineSearchCard,
+  MagazineRelated,
+  MagazineRelatedExport
+};

package/dist/chunk-LEHIZSHR.mjs

@@ -0,0 +1,122 @@
+import {
+  Background
+} from "./chunk-GGXSEAD2.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  getAspectResponsive,
+  getCssResponsive,
+  getVariant,
+  hasChildOfType
+} from "./chunk-B5WDQW62.mjs";
+
+// src/components/card/card-content.tsx
+import styled from "styled-components";
+var CardContent = styled.div`
+  position: relative;
+  ${(props) => getCssResponsive(props)}
+`;
+
+// src/components/card/card-footer.tsx
+import styled2 from "styled-components";
+var CardFooter = styled2.div`
+  flex: 0 0 4em;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid var(--color-neutral-100);
+  ${(props) => getCssResponsive(props)}
+`;
+
+// src/components/card/card.tsx
+import { getClassNames, withSchema } from "@websolutespa/bom-mixer-core";
+import { forwardRef } from "react";
+import styled3, { css } from "styled-components";
+import { jsx } from "react/jsx-runtime";
+var variants = {
+  default: css`
+`,
+  alfa: css`
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 0.5em;
+  // box-shadow: var(--card-shadow);
+`,
+  beta: css`
+  background: var(--color-neutral-200);
+  // border-radius: 2px;
+`,
+  gamma: css`
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 20px;
+  box-shadow: var(--card-shadow);
+`,
+  delta: css`
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 20px;
+  box-shadow: var(--card-shadow);
+`
+};
+var StyledCard = styled3.div`
+  display: flex;
+  flex-direction: column;
+  // margin: 0 0 40px 0;
+
+  ${(props) => getVariant(variants, props.variant)}
+  ${(props) => getCssResponsive(props)}
+  ${(props) => getAspectResponsive(props)};
+  ${(props) => props.hoverable ? css`
+    cursor: pointer;
+    .media {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+      &>:not(.media-info) {
+        transition: ease-in-out 200ms;
+        transition-property: transform, opacity;
+      }
+    }
+    &:hover {
+      .media {
+        &>:not(.media-info) {
+          transform: scale(1.05);
+        }
+      }
+      .button {
+        &:after {
+          transform: scale(1, 1);
+        }
+      }
+    }
+  ` : ""}
+  ${(props) => hasBackground(props) ? css`
+    color: var(--color-neutral-100);
+    position: relative;
+
+    &>:not(.background) {
+      position: relative;
+    }
+  ` : ""}
+`;
+var CardBase = forwardRef((_a, ref) => {
+  var _b = _a, { children, className, as = "div" } = _b, props = __objRest(_b, ["children", "className", "as"]);
+  const classNames = getClassNames("card", className);
+  return /* @__PURE__ */ jsx(StyledCard, __spreadProps(__spreadValues({ className: classNames, ref, as }, props), { children }));
+});
+CardBase.displayName = "Card";
+var Card = withSchema(CardBase, {
+  Background,
+  Content: CardContent,
+  Footer: CardFooter
+});
+function hasBackground(props) {
+  return hasChildOfType(props.children, Background);
+}
+
+export {
+  CardContent,
+  CardFooter,
+  Card
+};