@matbea-ui/matbea-ui 0.1.7 → 0.2.0

package/dist/matbea-ui.es3.js

@@ -1,24 +0,0 @@
-import { j as o } from "./matbea-ui.es30.js";
-import { useState as a } from "react";
-import { Wrapper as d, Trigger as l, Bubble as m } from "./matbea-ui.es32.js";
-const y = ({
-  label: r,
-  children: e,
-  copiedText: i = "Скопировано!",
-  copyDuration: s = 1500
-}) => {
-  const [p, t] = a(!1), n = async () => {
-    try {
-      await navigator.clipboard.writeText(r), t(!0), setTimeout(() => t(!1), s);
-    } catch (c) {
-      console.error("Copy failed", c);
-    }
-  };
-  return /* @__PURE__ */ o.jsxs(d, { onClick: n, children: [
-    e ?? /* @__PURE__ */ o.jsx(l, { type: "button", children: r }),
-    /* @__PURE__ */ o.jsx(m, { children: p ? i : r })
-  ] });
-};
-export {
-  y as CopyTooltip
-};

package/dist/matbea-ui.es30.js

@@ -1,5 +0,0 @@
-import { __require as r } from "./matbea-ui.es65.js";
-var i = r();
-export {
-  i as j
-};

package/dist/matbea-ui.es31.js

@@ -1,163 +0,0 @@
-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"
-  }
-}, 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`
-      background-color: ${o.default.bg};
-      color: ${o.default.color};
-      border-color: ${o.default.border};
-
-      &:hover:not(:disabled) {
-        background-color: ${o.hover.bg};
-        color: ${o.hover.color};
-        border-color: ${o.hover.border};
-      }
-
-      &: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%;
-    `}
-
-  ${({ $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 {
-  g as IconSlot,
-  c as StyledButton
-};

package/dist/matbea-ui.es32.js

@@ -1,40 +0,0 @@
-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 {
-  e as Bubble,
-  n as Trigger,
-  t as Wrapper
-};

package/dist/matbea-ui.es33.js

@@ -1,330 +0,0 @@
-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.es34.js

@@ -1,15 +0,0 @@
-import { j as i } from "./matbea-ui.es30.js";
-import { Icon as c } from "./matbea-ui.es74.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.es35.js

@@ -1,26 +0,0 @@
-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.es36.js

@@ -1,85 +0,0 @@
-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.es37.js

@@ -1,18 +0,0 @@
-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
-};