@matbea-ui/matbea-ui 0.1.4 → 0.1.6

package/dist/matbea-ui.es31.js

@@ -1,330 +1,163 @@
-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
-    }
+import l, { css as i } from "styled-components";
+const a = {
+  default: {
+    padding: "15px 22px",
+    minHeight: "48px",
+    fontSize: "15px",
+    lineHeight: "18px",
+    gap: "10px",
+    iconGap: "6px"
+  },
+  medium: {
+    padding: "12px 16px",
+    minHeight: "42px",
+    fontSize: "15px",
+    lineHeight: "18px",
+    gap: "10px",
+    iconGap: "6px"
+  },
+  small: {
+    padding: "10px",
+    minHeight: "36px",
+    fontSize: "14px",
+    lineHeight: "17px",
+    gap: "4px",
+    iconGap: "4px"
   }
-}, f = (t) => {
-  const { mobile: o, tablet: n, desktop: l } = h[t];
+}, p = (e) => ({ theme: t }) => {
+  const r = t.colors, o = {
+    primary: {
+      default: {
+        bg: r.primary.primaryBlue,
+        color: r.primary.white,
+        border: r.primary.primaryBlue
+      },
+      hover: {
+        bg: r.primary.hoverBlue,
+        color: r.primary.white,
+        border: r.primary.hoverBlue
+      },
+      active: {
+        bg: r.primary.activeBlue,
+        color: r.primary.white,
+        border: r.primary.activeBlue
+      },
+      disabled: {
+        bg: r.gray.lightGray2,
+        color: r.gray.darkGray,
+        border: r.gray.lightGray2
+      }
+    },
+    secondary: {
+      default: {
+        bg: "transparent",
+        color: r.primary.primaryBlue,
+        border: r.primary.primaryBlue
+      },
+      hover: {
+        bg: r.primary.primaryBlue,
+        color: r.primary.white,
+        border: r.primary.primaryBlue
+      },
+      active: {
+        bg: r.primary.activeBlue,
+        color: r.primary.white,
+        border: r.primary.activeBlue
+      },
+      disabled: {
+        bg: "transparent",
+        color: r.gray.darkGray,
+        border: r.gray.lightGray2
+      }
+    },
+    tertiary: {
+      default: {
+        bg: "transparent",
+        color: r.primary.primaryBlue,
+        border: "transparent"
+      },
+      hover: {
+        bg: r.gray.lightBlueGray,
+        color: r.primary.primaryBlue,
+        border: "transparent"
+      },
+      active: {
+        bg: r.gray.lightBlueGray2,
+        color: r.primary.primaryBlue,
+        border: "transparent"
+      },
+      disabled: {
+        bg: "transparent",
+        color: r.gray.darkGray,
+        border: "transparent"
+      }
+    }
+  }[e];
   return i`
-    ${({ theme: p }) => i`
-      ${i`
-        font-size: ${l.fontSize};
-        font-weight: ${l.fontWeight};
-        line-height: ${l.lineHeight};
-      `}
+      background-color: ${o.default.bg};
+      color: ${o.default.color};
+      border-color: ${o.default.border};
 
-      ${n && i`
-        ${p.media.maxWidth.tablet} {
-          font-size: ${n.fontSize};
-          font-weight: ${n.fontWeight};
-          line-height: ${n.lineHeight};
-        }
-      `}
+      &:hover:not(:disabled) {
+        background-color: ${o.hover.bg};
+        color: ${o.hover.color};
+        border-color: ${o.hover.border};
+      }
 
-    ${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;
+      &:active:not(:disabled) {
+        background-color: ${o.active.bg};
+        color: ${o.active.color};
+        border-color: ${o.active.border};
+      }
+
+      &:disabled {
+        background-color: ${o.disabled.bg};
+        color: ${o.disabled.color};
+        border-color: ${o.disabled.border};
+      }
+    `;
+}, c = l.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: ${({ $form: e }) => e === "brick-right" ? "0 5px 5px 0" : "5px"};
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease,
+    color 0.15s ease, opacity 0.15s ease;
+  font-weight: 600;
+
+  ${({ $size: e }) => i`
+    padding: ${a[e].padding};
+    min-height: ${a[e].minHeight};
+    font-size: ${a[e].fontSize};
+    line-height: ${a[e].lineHeight};
+  `}
+
+  ${({ $hasIcon: e, $iconOnly: t, $size: r }) => i`
+    gap: ${t ? "0" : e ? a[r].iconGap : a[r].gap};
+  `}
+
+  ${({ $fullWidth: e }) => e && i`
+      width: 100%;
     `}
-  ${({ $truncate: t }) => t && i`
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+
+  ${({ $variant: e }) => p(e)}
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`, g = l.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  ${({ $iconOnly: e }) => e && i`
+      width: 18px;
+      height: 18px;
     `}
 `;
 export {
-  b as StyledTypography
+  g as IconSlot,
+  c as StyledButton
 };

package/dist/matbea-ui.es32.js

@@ -1,15 +1,40 @@
-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" }) }) })
-] });
+import { styled as o } from "styled-components";
+const t = o.div`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+`, n = o.button`
+  border: none;
+  background: transparent;
+  padding: 4px 8px;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+`, e = o.span`
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translate(-50%, -6px);
+  white-space: nowrap;
+  background: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+
+  ${t}:hover &,
+  ${t}:focus-within &,
+  ${t}:active & {
+    opacity: 1;
+    transform: translate(-50%, -10px);
+  }
+`;
 export {
-  r as InfoIcon
+  e as Bubble,
+  n as Trigger,
+  t as Wrapper
 };