@matbea-ui/matbea-ui 0.1.0 → 0.1.2

package/dist/matbea-ui.es31.js

@@ -0,0 +1,330 @@
+import { css as i, styled as g } from "styled-components";
+const e = {
+  regular: 400,
+  semibold: 600,
+  bold: 700
+}, h = {
+  h1: {
+    mobile: {
+      fontSize: "26px",
+      lineHeight: "32px",
+      fontWeight: e.semibold
+    },
+    tablet: {
+      fontSize: "34px",
+      lineHeight: "42px",
+      fontWeight: e.semibold
+    },
+    desktop: {
+      fontSize: "44px",
+      lineHeight: "54px",
+      fontWeight: e.semibold,
+      textTransform: "uppercase"
+    }
+  },
+  h2: {
+    mobile: {
+      fontSize: "22px",
+      lineHeight: "28px",
+      fontWeight: e.semibold
+    },
+    tablet: {
+      fontSize: "30px",
+      lineHeight: "37px",
+      fontWeight: e.semibold
+    },
+    desktop: {
+      fontSize: "32px",
+      lineHeight: "40px",
+      fontWeight: e.semibold
+    }
+  },
+  h3: {
+    mobile: {
+      fontSize: "20px",
+      lineHeight: "24px",
+      fontWeight: e.semibold
+    },
+    tablet: {
+      fontSize: "28px",
+      lineHeight: "34px",
+      fontWeight: e.semibold
+    },
+    desktop: {
+      fontSize: "30px",
+      lineHeight: "38px",
+      fontWeight: e.semibold
+    }
+  },
+  h4: {
+    mobile: {
+      fontSize: "18px",
+      lineHeight: "22px",
+      fontWeight: e.semibold
+    },
+    tablet: {
+      fontSize: "24px",
+      lineHeight: "30px",
+      fontWeight: e.semibold
+    },
+    desktop: {
+      fontSize: "24px",
+      lineHeight: "30px",
+      fontWeight: e.semibold
+    }
+  },
+  h5: {
+    mobile: {
+      fontSize: "16px",
+      lineHeight: "20px",
+      fontWeight: e.semibold
+    },
+    tablet: {
+      fontSize: "20px",
+      lineHeight: "24px",
+      fontWeight: e.semibold
+    },
+    desktop: {
+      fontSize: "20px",
+      lineHeight: "24px",
+      fontWeight: e.semibold
+    }
+  },
+  "body-xl-semibold": {
+    mobile: {
+      fontSize: "18px",
+      lineHeight: "22px",
+      fontWeight: e.semibold
+    },
+    tablet: {
+      fontSize: "22px",
+      lineHeight: "28px",
+      fontWeight: e.semibold
+    },
+    desktop: {
+      fontSize: "24px",
+      lineHeight: "30px",
+      fontWeight: e.semibold
+    }
+  },
+  "body-xl": {
+    mobile: {
+      fontSize: "18px",
+      lineHeight: "22px",
+      fontWeight: e.regular
+    },
+    tablet: {
+      fontSize: "22px",
+      lineHeight: "28px",
+      fontWeight: e.regular
+    },
+    desktop: {
+      fontSize: "24px",
+      lineHeight: "30px",
+      fontWeight: e.regular
+    }
+  },
+  "body-l-semibold": {
+    mobile: {
+      fontSize: "16px",
+      lineHeight: "19px",
+      fontWeight: e.semibold
+    },
+    tablet: {
+      fontSize: "18px",
+      lineHeight: "22px",
+      fontWeight: e.semibold
+    },
+    desktop: {
+      fontSize: "18px",
+      lineHeight: "22px",
+      fontWeight: e.semibold
+    }
+  },
+  "body-l": {
+    mobile: {
+      fontSize: "16px",
+      lineHeight: "19px",
+      fontWeight: e.regular
+    },
+    tablet: {
+      fontSize: "18px",
+      lineHeight: "22px",
+      fontWeight: e.regular
+    },
+    desktop: {
+      fontSize: "18px",
+      lineHeight: "22px",
+      fontWeight: e.regular
+    }
+  },
+  "body-m-bold": {
+    mobile: {
+      fontSize: "14px",
+      lineHeight: "17px",
+      fontWeight: e.bold
+    },
+    tablet: {
+      fontSize: "16px",
+      lineHeight: "20px",
+      fontWeight: e.bold
+    },
+    desktop: {
+      fontSize: "16px",
+      lineHeight: "20px",
+      fontWeight: e.bold
+    }
+  },
+  "body-m-semibold": {
+    mobile: {
+      fontSize: "14px",
+      lineHeight: "17px",
+      fontWeight: e.semibold
+    },
+    tablet: {
+      fontSize: "16px",
+      lineHeight: "20px",
+      fontWeight: e.semibold
+    },
+    desktop: {
+      fontSize: "16px",
+      lineHeight: "20px",
+      fontWeight: e.semibold
+    }
+  },
+  "body-m": {
+    mobile: {
+      fontSize: "14px",
+      lineHeight: "17px",
+      fontWeight: e.regular
+    },
+    tablet: {
+      fontSize: "16px",
+      lineHeight: "20px",
+      fontWeight: e.regular
+    },
+    desktop: {
+      fontSize: "16px",
+      lineHeight: "20px",
+      fontWeight: e.regular
+    }
+  },
+  "body-s-semibold": {
+    mobile: {
+      fontSize: "12px",
+      lineHeight: "15px",
+      fontWeight: e.semibold
+    },
+    tablet: {
+      fontSize: "14px",
+      lineHeight: "17px",
+      fontWeight: e.semibold
+    },
+    desktop: {
+      fontSize: "14px",
+      lineHeight: "17px",
+      fontWeight: e.semibold
+    }
+  },
+  "body-s": {
+    mobile: {
+      fontSize: "12px",
+      lineHeight: "15px",
+      fontWeight: e.regular
+    },
+    tablet: {
+      fontSize: "14px",
+      lineHeight: "17px",
+      fontWeight: e.regular
+    },
+    desktop: {
+      fontSize: "14px",
+      lineHeight: "17px",
+      fontWeight: e.regular
+    }
+  },
+  button: {
+    desktop: {
+      fontSize: "15px",
+      lineHeight: "18px",
+      fontWeight: e.semibold
+    }
+  },
+  "form-input": {
+    desktop: {
+      fontSize: "15px",
+      lineHeight: "18px",
+      fontWeight: e.regular
+    }
+  },
+  "avatar-basic": {
+    desktop: {
+      fontSize: "16px",
+      lineHeight: "18px",
+      fontWeight: e.semibold
+    }
+  },
+  "avatar-m": {
+    desktop: {
+      fontSize: "14px",
+      lineHeight: "16px",
+      fontWeight: e.semibold
+    }
+  },
+  "avatar-s": {
+    desktop: {
+      fontSize: "12px",
+      lineHeight: "14px",
+      fontWeight: e.semibold
+    }
+  }
+}, f = (t) => {
+  const { mobile: o, tablet: n, desktop: l } = h[t];
+  return i`
+    ${({ theme: p }) => i`
+      ${i`
+        font-size: ${l.fontSize};
+        font-weight: ${l.fontWeight};
+        line-height: ${l.lineHeight};
+      `}
+
+      ${n && i`
+        ${p.media.maxWidth.tablet} {
+          font-size: ${n.fontSize};
+          font-weight: ${n.fontWeight};
+          line-height: ${n.lineHeight};
+        }
+      `}
+
+    ${o && i`
+        ${p.media.maxWidth.mobile} {
+          font-size: ${o.fontSize};
+          font-weight: ${o.fontWeight};
+          line-height: ${o.lineHeight};
+        }
+      `}
+    `}
+  `;
+}, b = g.span`
+  margin: 0;
+  color: ${({ $color: t }) => t ?? "inherit"};
+  ${({ $variant: t }) => f(t)};
+  text-align: ${({ $align: t }) => t ?? "inherit"};
+  ${({ $inline: t }) => t ? i`
+          display: inline;
+        ` : i`
+          display: block;
+        `};
+  ${({ $uppercase: t }) => t && i`
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    `}
+  ${({ $truncate: t }) => t && i`
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `}
+`;
+export {
+  b as StyledTypography
+};

package/dist/matbea-ui.es32.js

@@ -0,0 +1,15 @@
+import { j as i } from "./matbea-ui.es28.js";
+import { Icon as c } from "./matbea-ui.es72.js";
+const r = (l) => /* @__PURE__ */ i.jsxs(c, { ...l, viewBox: "0 0 18 18", children: [
+  /* @__PURE__ */ i.jsx("g", { "clip-path": "url(#clip0_309_1899)", children: /* @__PURE__ */ i.jsx(
+    "path",
+    {
+      d: "M9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9C16.4955 13.1403 13.1403 16.4955 9 16.5ZM3 9.129C3.03549 12.4299 5.73083 15.0822 9.0319 15.0645C12.333 15.0467 14.9997 12.3656 14.9997 9.0645C14.9997 5.76338 12.333 3.08233 9.0319 3.0645C5.73083 3.04684 3.03549 5.69907 3 9V9.129ZM10.5 12.75H8.25V9.75H7.5V8.25H9.75V11.25H10.5V12.75ZM9.75 6.75H8.25V5.25H9.75V6.75Z",
+      fill: l.color || "#9296A5"
+    }
+  ) }),
+  /* @__PURE__ */ i.jsx("defs", { children: /* @__PURE__ */ i.jsx("clipPath", { id: "clip0_309_1899", children: /* @__PURE__ */ i.jsx("rect", { width: "18", height: "18", fill: "white" }) }) })
+] });
+export {
+  r as InfoIcon
+};

package/dist/matbea-ui.es33.js

@@ -0,0 +1,26 @@
+import { styled as o } from "styled-components";
+const t = o.div`
+  display: grid;
+  align-items: center;
+  grid-template-columns: ${({ $icon: e }) => e ? "auto 1fr" : "1fr"};
+  gap: 12px;
+  width: 458px;
+  height: auto;
+  border-radius: 12px;
+  padding: 24px;
+  background-color: ${({ $type: e, theme: r }) => {
+  switch (e) {
+    case "success":
+      return r.colors.accent.green2Light;
+    case "error":
+      return r.colors.accent.red;
+    case "info":
+      return r.colors.primary.lightBlue2;
+    case "warning":
+      return r.colors.accent.orange;
+  }
+}};
+`;
+export {
+  t as InformerStyled
+};

package/dist/matbea-ui.es34.js

@@ -0,0 +1,85 @@
+import { styled as r, css as i } from "styled-components";
+import { Typography as t } from "./matbea-ui.es4.js";
+const l = r.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+`, s = r(t).attrs({
+  variant: "form-input",
+  forwardedAs: "label"
+})`
+  color: ${({ theme: o }) => o.colors.primary.darkBlue};
+`, c = r.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  height: 48px;
+  padding-left: 12px;
+  border-radius: 5px;
+  outline: 1px solid ${({ theme: o }) => o.colors.gray.lightGray2};
+  outline-offset: -1px;
+  background: ${({ theme: o }) => o.colors.primary.white};
+  width: 100%;
+  box-sizing: border-box;
+  transition: border-color 140ms ease;
+
+  ${({ $disabled: o }) => o && i`
+      opacity: 0.6;
+      cursor: not-allowed;
+    `}
+
+  ${({ $hasError: o, theme: e }) => o && i`
+      outline-color: ${e.colors.accent.red};
+    `}
+
+  &:hover {
+    outline-color: ${({ theme: o, $hasError: e }) => e ? o.colors.accent.red : o.colors.primary.lightBlue2};
+  }
+
+  &[data-state="active"] {
+    outline-color: ${({ theme: o, $hasError: e }) => e ? o.colors.accent.red : o.colors.primary.primaryBlue};
+  }
+`, p = r.span`
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+`, d = r.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  & > button {
+    border-radius: 0px;
+  }
+`, x = r.input`
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: "Proxima Nova", sans-serif;
+  padding-right: 12px;
+  height: 100%;
+  font-size: 15px;
+  line-height: 18px;
+  color: ${({ theme: o }) => o.colors.primary.darkBlue};
+
+  &::placeholder {
+    color: ${({ theme: o }) => o.colors.gray.darkGray};
+  }
+`, f = r.span`
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 15px;
+  line-height: 18px;
+  color: ${({ theme: o }) => o.colors.accent.red};
+`;
+export {
+  d as ActionSlot,
+  f as ErrorText,
+  c as FieldContainer,
+  x as Input,
+  s as Label,
+  p as LeadingIcon,
+  l as Wrapper
+};

package/dist/matbea-ui.es35.js

@@ -0,0 +1,18 @@
+import { styled as i } from "styled-components";
+const a = i.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 24px 28px;
+  background-color: ${({ theme: d }) => d.colors.primary.white};
+  border-radius: 10px;
+  ${({ theme: d }) => d.media.maxWidth.tablet} {
+    padding: 24px 20px;
+  }
+  ${({ theme: d }) => d.media.maxWidth.mobile} {
+    padding: 16px;
+  }
+`;
+export {
+  a as ContainerStyled
+};

package/dist/matbea-ui.es36.js

@@ -0,0 +1,18 @@
+import { styled as o } from "styled-components";
+import { Typography as t } from "./matbea-ui.es4.js";
+const d = o(t).attrs({
+  forwardedAs: "div"
+})`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  color: #fff;
+  background-color: ${({ theme: r }) => r.colors.primary.primaryBlue};
+`;
+export {
+  d as CounterStyled
+};

package/dist/matbea-ui.es37.js

@@ -0,0 +1,24 @@
+import { j as i } from "./matbea-ui.es28.js";
+import { Icon as s } from "./matbea-ui.es72.js";
+const h = (l) => /* @__PURE__ */ i.jsxs(s, { ...l, children: [
+  /* @__PURE__ */ i.jsxs("g", { "clip-path": "url(#clip0_487_8651)", children: [
+    /* @__PURE__ */ i.jsx(
+      "path",
+      {
+        d: "M4.99543 4.85076C5.38596 4.46024 6.01912 4.46024 6.40965 4.85076L19.265 17.7061C19.6555 18.0966 19.6555 18.7298 19.265 19.1203L19.0937 19.2916C18.7032 19.6821 18.07 19.6821 17.6795 19.2916L4.82414 6.43627C4.43362 6.04574 4.43362 5.41258 4.82414 5.02206L4.99543 4.85076Z",
+        fill: "#9296A5"
+      }
+    ),
+    /* @__PURE__ */ i.jsx(
+      "path",
+      {
+        d: "M4.85129 19.1203C4.46077 18.7298 4.46077 18.0966 4.85129 17.7061L17.7066 4.85075C18.0971 4.46023 18.7303 4.46023 19.1208 4.85075L19.2921 5.02205C19.6827 5.41257 19.6827 6.04574 19.2921 6.43626L6.4368 19.2916C6.04627 19.6821 5.41311 19.6821 5.02258 19.2916L4.85129 19.1203Z",
+        fill: "#9296A5"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ i.jsx("defs", { children: /* @__PURE__ */ i.jsx("clipPath", { id: "clip0_487_8651", children: /* @__PURE__ */ i.jsx("rect", { width: "24", height: "24", fill: "white" }) }) })
+] });
+export {
+  h as CloseIcon
+};

package/dist/matbea-ui.es38.js

@@ -0,0 +1,10 @@
+import { j as r } from "./matbea-ui.es28.js";
+import { Icon as i } from "./matbea-ui.es72.js";
+const h = (t) => /* @__PURE__ */ r.jsxs(i, { ...t, children: [
+  /* @__PURE__ */ r.jsx("rect", { x: "3", y: "5", width: "18", height: "2", rx: "1", fill: "#9296A5" }),
+  /* @__PURE__ */ r.jsx("rect", { x: "3", y: "11", width: "18", height: "2", rx: "1", fill: "#9296A5" }),
+  /* @__PURE__ */ r.jsx("rect", { x: "3", y: "17", width: "18", height: "2", rx: "1", fill: "#9296A5" })
+] });
+export {
+  h as HamburgerIcon
+};

package/dist/matbea-ui.es39.js

@@ -0,0 +1,42 @@
+import { keyframes as t, styled as a } from "styled-components";
+const e = t`
+  0% {
+    transform: scale(0.5);
+  }
+  25% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(0.5);
+  }
+  100% {
+    transform: scale(0.5);
+  }
+`, n = a.div`
+  display: flex;
+`, s = a.div`
+  margin: 2px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: ${({ theme: o }) => o.colors.primary.primaryBlue};
+  transform: scale(0.5);
+  animation: ${e} 1.2s ease-out infinite;
+
+  &:nth-of-type(2) {
+    animation-delay: 0.2s;
+  }
+  &:nth-of-type(3) {
+    animation-delay: 0.3s;
+  }
+  &:nth-of-type(4) {
+    animation-delay: 0.4s;
+  }
+  &:nth-of-type(5) {
+    animation-delay: 0.5s;
+  }
+`;
+export {
+  s as LoaderDot,
+  n as LoaderDots
+};

package/dist/matbea-ui.es4.js

@@ -0,0 +1,31 @@
+import { j as m } from "./matbea-ui.es28.js";
+import { StyledTypography as y } from "./matbea-ui.es31.js";
+const c = ({
+  as: o = "span",
+  forwardedAs: a,
+  variant: r = "body-m-semibold",
+  color: e,
+  align: p,
+  uppercase: s = !1,
+  truncate: t = !1,
+  inline: i = !1,
+  children: l,
+  ...n
+}) => /* @__PURE__ */ m.jsx(
+  y,
+  {
+    as: o,
+    forwardedAs: a,
+    $variant: r,
+    $color: e,
+    $align: p,
+    $uppercase: s,
+    $truncate: t,
+    $inline: i,
+    ...n,
+    children: l
+  }
+);
+export {
+  c as Typography
+};

package/dist/matbea-ui.es40.js

@@ -0,0 +1,70 @@
+import { styled as a, css as e } from "styled-components";
+import { Typography as n } from "./matbea-ui.es4.js";
+const t = a.label`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: ${({ disabled: o }) => o ? "not-allowed" : "pointer"};
+`, s = a.input`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`, d = a.span`
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid ${({ theme: o }) => o.colors.gray.darkGray2};
+  background-color: transparent;
+  transition: border-color 160ms ease, background-color 160ms ease;
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  ${({ $checked: o, theme: r }) => o && e`
+      border-color: ${r.colors.primary.primaryBlue};
+      &::after {
+        content: "";
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: ${r.colors.primary.primaryBlue};
+        transition: background-color 160ms ease;
+      }
+    `}
+
+  ${({ $checked: o, theme: r }) => !o && e`
+      &:hover {
+        border-color: ${r.colors.primary.hoverBlue};
+      }
+    `}
+
+  ${({ $checked: o, $disabled: r, theme: i }) => !r && o && e`
+      &:hover {
+        border-color: ${i.colors.primary.hoverBlue};
+        &::after {
+          background-color: ${i.colors.primary.hoverBlue};
+        }
+      }
+    `}
+
+  ${({ $disabled: o, theme: r }) => o && e`
+      border-color: ${r.colors.icon.iconSecondary};
+      background-color: ${r.colors.gray.lightGray2};
+      &::after {
+        content: "";
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: ${r.colors.icon.iconSecondary};
+      }
+    `}
+`, p = a(n)`
+  color: ${({ theme: o }) => o.colors.primary.darkBlue};
+`;
+export {
+  s as HiddenInput,
+  p as LabelText,
+  t as RadioLabel,
+  d as VisualRadio
+};