@websolutespa/bom-mixer-ui 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @websolutespa/bom-mixer-ui
+
+## 0.0.1
+
+### Patch Changes
+
+- Added: first release.

package/README.md

@@ -0,0 +1,11 @@
+# @websolutespa/bom-mixer-ui
+
+[![npm version](https://badge.fury.io/js/%40websolutespa%2Fbom-mixer-ui.svg)](https://badge.fury.io/js/%40websolutespa%2Fbom-mixer-ui)
+
+[![status alpha](https://img.shields.io/badge/status-alpha-red.svg)](https://shields.io/)
+
+Mixer UI module of the [BOM Repository](https://github.com/websolutespa/bom) by [websolute](https://www.websolute.com/).
+
+---
+
+##### *this library is for internal usage and not production ready*

package/dist/carousel-1-DVCEK6QW.mjs

@@ -0,0 +1,13 @@
+import {
+  Carousel1,
+  Carousel1Export
+} from "./chunk-SBQY6FWU.mjs";
+import "./chunk-LEHIZSHR.mjs";
+import "./chunk-A7SAZJPB.mjs";
+import "./chunk-GNG6WR62.mjs";
+import "./chunk-GGXSEAD2.mjs";
+import "./chunk-B5WDQW62.mjs";
+export {
+  Carousel1,
+  Carousel1Export
+};

package/dist/carousel-1-DXYGMXKJ.mjs

@@ -0,0 +1,14 @@
+import {
+  Carousel1,
+  Carousel1Export
+} from "./chunk-MU4CJBV7.mjs";
+import "./chunk-ZBPDMEV4.mjs";
+import "./chunk-DBOW5IIN.mjs";
+import "./chunk-VTNTTQXM.mjs";
+import "./chunk-TNJCCH5V.mjs";
+import "./chunk-2NOCZCBX.mjs";
+import "./chunk-4GP5DTTM.mjs";
+export {
+  Carousel1,
+  Carousel1Export
+};

package/dist/chunk-2NOCZCBX.mjs

@@ -0,0 +1,494 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  getAspectResponsive,
+  getContainer,
+  getCssResponsive,
+  hasChildOfType
+} from "./chunk-4GP5DTTM.mjs";
+
+// src/components/container/container.tsx
+import { withSchema } from "@websolutespa/bom-mixer-core";
+import { forwardRef } from "react";
+import styled from "styled-components";
+import { jsx } from "react/jsx-runtime";
+var ContainerBase = styled.div`
+  width: 100%;
+  margin: 0 auto;
+  ${(props) => getContainer(props, props.fluid)}
+  ${(props) => getCssResponsive(props)}
+`;
+var ContainerFluid = forwardRef((_a, ref) => {
+  var _b = _a, { children, as = "div" } = _b, props = __objRest(_b, ["children", "as"]);
+  return /* @__PURE__ */ jsx(ContainerBase, __spreadProps(__spreadValues({ ref, as }, props), { fluid: true, children }));
+});
+ContainerFluid.displayName = "ContainerFluid";
+var Container = withSchema(ContainerBase, {
+  Fluid: ContainerFluid,
+  displayName: "Container"
+});
+
+// src/components/text/text.tsx
+import { withSchema as withSchema2 } from "@websolutespa/bom-mixer-core";
+import styled2, { css as css2 } from "styled-components";
+
+// src/components/button/button.css.ts
+import { css } from "styled-components";
+var CssDefault = css`
+  // display: inline-block;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  font-size: 1em;
+  line-height: normal;
+  transition: ease 150ms;
+  transition-property: background-color, color, border-color, outline-color, opacity;
+  cursor: pointer;
+`;
+var CssResponsive = css`
+@media (max-width: 399.9px) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+`;
+var CssFocus = css`
+&:focus,
+&:active {
+  outline: 2px solid var(--color-primary-200);
+  outline-offset: 2px;
+}
+`;
+var CssActive = css`
+&.active {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 2px;
+}
+`;
+var CssDisabled = css`
+&:disabled,
+&.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+`;
+var CssSvg = css`
+svg {
+  width: 1em;
+  height: 1em;
+  margin: 0 0.3em;
+  transition: transform ease-in-out 200ms;
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+&:hover,
+&.active {
+  svg {
+    transform: scale(1.1);
+  }
+}
+`;
+var CssUnderline = css`
+&>* {
+  display: inline;
+  background-image: linear-gradient(90deg, var(--color-secondary-500), currentColor);
+  background-repeat: no-repeat;
+  background-position: bottom left;
+  background-size: 0% 0.1em;
+  transition: background-size 500ms cubic-bezier(0,.97,.43,1);
+}
+
+&:hover {
+  &>* {
+    background-size: 100% 0.1em;
+  }
+}
+`;
+var CssAfter = css`
+&:after {
+  content: '';
+  display: block;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1.1px;
+  background: currentColor;
+  transform: scale(0, 1);
+  transform-origin: left;
+  transition: transform 500ms cubic-bezier(0,.97,.43,1);
+  will-change: transform;
+}
+
+&:hover,
+&.active {
+  &:after {
+    transform: scale(1, 1);
+  }
+}
+`;
+var CssAfterInverted = css`
+&:after {
+  content: '';
+  display: block;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1.1px;
+  background: currentColor;
+  transform: scale(1, 1);
+  transform-origin: left;
+  transition: transform 500ms cubic-bezier(0,.97,.43,1);
+  will-change: transform;
+}
+
+&:hover,
+&.active {
+  &:after {
+    transform: scale(0, 1);
+  }
+}
+`;
+var CssButtonDefault = css`
+  padding: 0.4em 1em;
+  border-radius: var(--button-border-radius);
+  color: var(--color-primary-500);
+  border: 2px solid var(--color-primary-100);
+
+  &:hover,
+  &.active {
+    color: var(--color-primary-600);
+    border-color: var(--color-primary-200);
+  }
+
+  ${CssSvg}
+`;
+var CssButtonPrimary = css`
+  padding: 0.4em 1em;
+  border-radius: var(--button-border-radius);
+  background: var(--color-primary-500);
+  color: var(--color-neutral-100);
+  border: 2px solid var(--color-primary-500);
+
+  &:hover,
+  &.active {
+    background-color: var(--color-primary-600);
+    color: var(--color-neutral-100);
+    border-color: var(--color-primary-600);
+  }
+
+  ${CssSvg}
+  ${CssFocus}
+  ${CssActive}
+  ${CssDisabled}
+  ${CssResponsive}
+`;
+var CssButtonSecondary = css`
+  padding: 0.4em 1em;
+  border-radius: var(--button-border-radius);
+  background: var(--color-primary-100);
+  border: 2px solid var(--color-primary-100);
+  color: var(--color-primary-500);
+
+  &:hover,
+  &.active {
+    border-color: var(--color-primary-300);
+    color: var(--color-primary-600);
+  }
+
+  ${CssSvg}
+  ${CssFocus}
+  ${CssActive}
+  ${CssDisabled}
+  ${CssResponsive}
+`;
+var CssButtonOutline = css`
+  padding: 0.4em 1em;
+  border-radius: var(--button-border-radius);
+  background: transparent;
+  border: 2px solid var(--color-primary-500);
+  color: var(--color-primary-500);
+
+  &:hover,
+  &.active {
+    background: var(--color-primary-500);
+    border-color: var(--color-primary-600);
+    color: var(--color-neutral-100);
+  }
+
+  ${CssSvg}
+  ${CssFocus}
+  ${CssActive}
+  ${CssDisabled}
+  ${CssResponsive}
+`;
+var CssButtonGhost = css`
+  padding: 0.4em 1em;
+  border-radius: var(--button-border-radius);
+  background: transparent;
+  border: 2px solid transparent;
+  color: var(--color-neutral-700);
+
+  &:hover,
+  &.active {
+    background: transparent;
+    border-color: var(--color-neutral-300);
+    color: var(--color-neutral-900);
+  }
+
+  ${CssSvg}
+  ${CssFocus}
+  ${CssActive}
+  ${CssDisabled}
+  ${CssResponsive}
+`;
+var CssButtonLink = css`
+  position: relative;
+  color: var(--color-primary-400);
+
+  &:hover,
+  &.active {
+    color: var(--color-primary-500);
+  }
+
+  ${CssAfter}
+  ${CssSvg}
+`;
+var CssButtonUnderline = css`
+  position: relative;
+  color: var(--color-primary-400);
+
+  &:hover,
+  &.active {
+    color: var(--color-primary-500);
+  }
+
+  ${CssAfterInverted}
+  ${CssSvg}
+`;
+var CssButtonNav = css`
+  position: relative;
+
+  ${CssAfter}
+  ${CssSvg}
+  `;
+var CssButtonNavInverted = css`
+  position: relative;
+
+  ${CssAfterInverted}
+  ${CssSvg}
+  `;
+var CssButtonCircle = css`
+  justify-content: center;
+  width: 3em;
+  height: 3em;
+  border-radius: 50%;
+  background: var(--color-neutral-200);
+  border: 2px solid var(--color-neutral-200);
+  color: var(--color-neutral-700);
+
+  &>span {
+    font-size: 0;
+  }
+
+  &:hover,
+  &.active {
+    border-color: var(--color-neutral-400);
+    color: var(--color-neutral-900);
+  }
+
+  ${CssSvg}
+  ${CssFocus}
+  ${CssActive}
+  ${CssDisabled}
+`;
+var CssButtonToggle = css`
+  &:not(.active) {
+    opacity: 0.2;
+  }
+`;
+
+// src/components/text/text.tsx
+var CssH = css2`
+  h1, h2, h3, h4, h5, h6 {
+    color: var(--color-neutral-500);
+    margin-bottom: 3rem;
+  }
+  h4 {
+    font-size: 1.2em;
+  }
+`;
+var CssA = css2`
+  a[href] {
+    ${CssDefault}
+    ${CssButtonNavInverted}
+  }
+`;
+var CssP = css2`
+  p {
+    margin-bottom: 2rem;
+  }
+`;
+var CssUl = css2`
+  ul {
+    list-style: initial;
+    margin: 0 0 2em 1.1em;
+
+    &>li {
+      padding: 0.3em 0;
+    }
+  }
+`;
+var TextBase = styled2.div`
+  font-family: var(--font-primary-family);
+  ${({ size }) => {
+  if (!size)
+    return "";
+  const index = (typeof size === "string" ? parseInt(size) : size) - 1;
+  return css2`
+      font-size: var(--font-primary-size-${index}, 1rem);
+      line-height: var(--font-primary-line-height-${index}, 1);
+      font-weight: var(--font-primary-font-weight-${index}, normal);
+    `;
+}}
+  ${(props) => props.gradient ? css2`
+    background: -webkit-linear-gradient(0deg, var(--color-primary-500), var(--color-secondary-500));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  ` : ""}
+
+  ${CssH}
+  ${CssA}
+  ${CssP}
+  ${CssUl}
+  ${(props) => getCssResponsive(props)}
+`;
+var TextSecondary = styled2.div`
+  display: inline-block;
+  font-family: var(--font-secondary-family);
+  ${({ size }) => {
+  if (!size)
+    return "";
+  const index = (typeof size === "string" ? parseInt(size) : size) - 1;
+  return css2`
+      font-size: var(--font-secondary-size-${index}, 1rem);
+      line-height: var(--font-secondary-line-height-${index}, 1);
+      font-weight: var(--font-secondary-font-weight-${index}, normal);
+    `;
+}}
+  ${(props) => props.gradient ? css2`
+    background: -webkit-linear-gradient(0deg, var(--color-primary-500), var(--color-secondary-500));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  ` : ""}
+
+  ${CssUl}
+  ${(props) => getCssResponsive(props)}
+`;
+var TextSROnly = styled2.div`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+`;
+var Text = withSchema2(TextBase, {
+  Primary: TextBase,
+  Secondary: TextSecondary,
+  SROnly: TextSROnly,
+  displayName: "Text"
+});
+
+// src/components/section/section.tsx
+import { withSchema as withSchema3 } from "@websolutespa/bom-mixer-core";
+import styled4, { css as css3 } from "styled-components";
+
+// src/components/background/background.tsx
+import styled3 from "styled-components";
+var Background = styled3.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  // background: var(--color-neutral-900);
+
+  &, & > * {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  & > * > * {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  ${(props) => getCssResponsive(props)}
+`;
+Background.defaultProps = {
+  className: "background"
+};
+
+// src/components/section/section.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SectionContainer = styled4.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  ${(props) => getCssResponsive(props, { padding: "3rem 0" })}
+  ${(props) => getAspectResponsive(props)};
+
+  ${(props) => hasBackground(props) ? css3`
+    color: var(--color-neutral-100);
+    position: relative;
+
+    &>:not(.background) {
+      position: relative;
+    }
+  ` : ""}
+`;
+var SectionBase = (props) => {
+  return /* @__PURE__ */ jsx2(SectionContainer, __spreadProps(__spreadValues({}, props), { children: props.children }));
+};
+var Section = withSchema3(SectionBase, {
+  Background,
+  displayName: "Section"
+});
+function hasBackground(props) {
+  return hasChildOfType(props.children, Background);
+}
+
+export {
+  CssDefault,
+  CssButtonDefault,
+  CssButtonPrimary,
+  CssButtonSecondary,
+  CssButtonOutline,
+  CssButtonGhost,
+  CssButtonLink,
+  CssButtonUnderline,
+  CssButtonNav,
+  CssButtonCircle,
+  CssButtonToggle,
+  Background,
+  ContainerBase,
+  ContainerFluid,
+  Container,
+  Text,
+  Section
+};

package/dist/chunk-2QPVBWSO.mjs

@@ -0,0 +1,27 @@
+import {
+  Box
+} from "./chunk-6RQBZFNK.mjs";
+import {
+  Container,
+  Section,
+  Text
+} from "./chunk-GGXSEAD2.mjs";
+
+// src/lazy/text-text-1/text-text-1.tsx
+import { getClassNames } from "@websolutespa/bom-mixer-core";
+import dynamic from "next/dynamic";
+import { jsx } from "react/jsx-runtime";
+var TextText1 = ({ item }) => {
+  const classNames = getClassNames(item.schema);
+  return /* @__PURE__ */ jsx(Section, { className: classNames, padding: "6rem 0", children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Box, { columnCount: 1, columnCountSm: 2, columnGap: "var(--grid-column-gap)", children: item.description && /* @__PURE__ */ jsx(Text, { size: "8", lineHeight: "2", dangerouslySetInnerHTML: { __html: item.description } }) }) }) });
+};
+var TextText1Export = {
+  "text-text-1": dynamic(() => Promise.resolve().then(() => require_text_text_1()).then(
+    (module) => module.TextText1
+  ))
+};
+
+export {
+  TextText1,
+  TextText1Export
+};

package/dist/chunk-3O6XPTXR.mjs

@@ -0,0 +1,54 @@
+import {
+  Box
+} from "./chunk-6RQBZFNK.mjs";
+import {
+  Flex
+} from "./chunk-OAAW3SV6.mjs";
+import {
+  Button
+} from "./chunk-A7SAZJPB.mjs";
+import {
+  Grid
+} from "./chunk-6HX6MNJA.mjs";
+import {
+  Media
+} from "./chunk-GNG6WR62.mjs";
+import {
+  Container,
+  Section,
+  Text
+} from "./chunk-GGXSEAD2.mjs";
+
+// src/sections/products-detail-size-color/products-detail-size-color.tsx
+import { getClassNames } from "@websolutespa/bom-mixer-core";
+import dynamic from "next/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ProductsDetailSizeColor = ({ id, item }) => {
+  const classNames = getClassNames(item.schema);
+  if (!item) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Section, { id, className: classNames, padding: "6rem 0", children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs(Grid.Row, { rowGap: "3rem", children: [
+    /* @__PURE__ */ jsx(Grid, { sm: 6, justifyContent: "center", children: /* @__PURE__ */ jsxs(Flex.Col, { children: [
+      item.title && /* @__PURE__ */ jsx(Text, { size: "3", marginBottom: "3rem", children: item.title }),
+      item.list && item.list.map((item2, i) => /* @__PURE__ */ jsxs(Flex.Row, { padding: "2rem 0", borderBottom: "2px solid var(--color-neutral-900)", children: [
+        /* @__PURE__ */ jsx(Text, { flexBasis: "20%", dangerouslySetInnerHTML: { __html: item2.title } }),
+        /* @__PURE__ */ jsx(Text, { dangerouslySetInnerHTML: { __html: item2.abstract } })
+      ] }, i))
+    ] }) }),
+    /* @__PURE__ */ jsxs(Grid, { sm: 6, alignItems: "center", justifyContent: "center", gap: "2rem", children: [
+      /* @__PURE__ */ jsx(Box, { width: "100%", maxWidth: "300px", children: /* @__PURE__ */ jsx(Media, { aspectRatio: 1, item: item.medias }) }),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Vedi tutti i colori" })
+    ] })
+  ] }) }) });
+};
+var ProductsDetailSizeColorExport = {
+  "products-detail-size-color": dynamic(() => Promise.resolve().then(() => require_products_detail_size_color()).then(
+    (module) => ({ default: module.ProductsDetailSizeColor })
+  ))
+};
+
+export {
+  ProductsDetailSizeColor,
+  ProductsDetailSizeColorExport
+};

package/dist/chunk-4G2V76JL.mjs

@@ -0,0 +1,87 @@
+import {
+  Card
+} from "./chunk-LEHIZSHR.mjs";
+import {
+  Flex
+} from "./chunk-OAAW3SV6.mjs";
+import {
+  Button
+} from "./chunk-A7SAZJPB.mjs";
+import {
+  Grid
+} from "./chunk-6HX6MNJA.mjs";
+import {
+  Media
+} from "./chunk-GNG6WR62.mjs";
+import {
+  Container,
+  Section,
+  Text
+} from "./chunk-GGXSEAD2.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-B5WDQW62.mjs";
+
+// src/sections/products-detail-related/products-detail-related.tsx
+import { getClassNames } from "@websolutespa/bom-mixer-core";
+import dynamic from "next/dynamic";
+
+// src/sections/products-detail-related/products-detail-related-card.tsx
+import Link from "next/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(Link, { 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": dynamic(() => Promise.resolve().then(() => require_products_detail_related()).then(
+    (module) => module.ProductsDetailRelated
+  ))
+};
+
+export {
+  ProductsDetailRelated,
+  ProductsDetailRelatedExport
+};