@blofin/blofin-ui 0.6.87

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Blofin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,97 @@
+<p align="center">
+  <a href="https://blofin.com/" rel="noopener" target="_blank"><img width="150" src="/src/assets/logo.svg" alt="Blofin logo"></a>
+</p>
+
+<h1 align="center">Blofin UI</h1>
+
+![cover](./src/assets/cover.png)
+
+![NPM](https://img.shields.io/npm/l/blofin-ui)
+![npm](https://img.shields.io/npm/v/blofin-ui)
+![npm](https://img.shields.io/npm/dt/blofin-ui)
+
+**UI library for crypto exchanges.**
+
+Introducing our exquisite and sophisticated UI library tailored specifically for discerning crypto exchanges.
+
+Immerse yourself in a world of luxury and elegance as our meticulously crafted design elements seamlessly integrate with the cutting-edge technology of the cryptocurrency industry.
+
+Elevate your user experience to new heights with our high-end interface components, meticulously curated to ensure a seamless and visually stunning trading environment.
+
+With our UI library, you can confidently offer your users a truly elevated and refined trading experience, solidifying your position as a premier destination for secure and stylish cryptocurrency transactions.
+
+## Installation
+
+**NPM**
+
+```bash
+npm install blofin-ui
+```
+
+**Yarn**
+
+```bash
+yarn add blofin-ui
+```
+
+## Usage
+
+```jsx
+import "src/styles/globals.css";
+import { BlofinUiProvider } from "blofin-ui";
+import { Button } from "blofin-ui";
+
+<BlofinUiProvider value={{ theme: "light" }}>
+  <Component {...pageProps}></Component>
+</BlofinUiProvider>;
+```
+
+```css
+/** global.css */
+@import "blofin-ui/blofin.css";
+@import "./tailwind.css";
+
+/** tailwind.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+## Components
+
+- [x] Button
+- [x] Checkbox
+- [x] Input
+- [x] Select
+- [x] Textarea
+- [x] Tooltip
+- [x] Modal
+- [x] Dropdown
+- [x] Tabs
+- [x] Table
+- [x] Pagination
+- [x] Loader
+- [x] Alert
+- [x] Badge
+- [x] Card
+- [x] Divider
+- [x] Silder
+- [x] List
+- [x] Tag
+- [x] Typography
+- [x] Avatar
+- [x] Icon
+- [x] Menu
+
+## Stack we use
+
+![react](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
+![tailwindcss](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)
+
+![figma](https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white)
+![github](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](/LICENSE).

package/dist/Badge.d.ts

@@ -0,0 +1 @@
+export * from './components/Badge/index'

package/dist/Badge.es.js

@@ -0,0 +1,56 @@
+import { j as s } from "./jsx-runtime-944c88e2.js";
+import { a as d, u as i } from "./index-96a8d125.js";
+import { c as u } from "./utils-7e50508b.js";
+import "react";
+const c = (e) => {
+  const a = {
+    dark: {
+      primary: "bu-bg-dark-badge-primary-bg bu-text-dark-primary",
+      secondary: "bu-bg-dark-badge-secondary-bg bu-text-dark-secondary",
+      danger: "bu-bg-dark-badge-danger-bg bu-text-dark-danger",
+      success: "bu-bg-dark-badge-success-bg bu-text-dark-success",
+      warning: "bu-bg-dark-badge-warning-bg bu-text-dark-warning",
+      info: "bu-bg-dark-badge-info-bg bu-text-dark-label-60"
+    },
+    light: {
+      primary: "bu-bg-light-badge-primary-bg bu-text-light-primary",
+      secondary: "bu-bg-light-badge-secondary-bg bu-text-light-secondary",
+      danger: "bu-bg-light-badge-danger-bg bu-text-light-danger",
+      success: "bu-bg-light-badge-success-bg bu-text-light-success",
+      warning: "bu-bg-light-badge-warning-bg bu-text-light-warning",
+      info: "bu-bg-light-badge-info-bg bu-text-light-label-60"
+    }
+  }, { theme: r } = e;
+  return d("bu-rounded bu-px-[8px] bu-py-[2px] bu-text-[12px]", {
+    variants: {
+      color: {
+        primary: a[r].primary,
+        secondary: a[r].secondary,
+        danger: a[r].danger,
+        success: a[r].success,
+        warning: a[r].warning,
+        info: a[r].info
+      }
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  })(e);
+}, p = ({
+  color: e = "primary",
+  decoration: a = !0,
+  label: r,
+  theme: g,
+  startIcon: b,
+  endIcon: t
+}) => {
+  const { theme: n } = i();
+  return /* @__PURE__ */ s.jsxs("span", { className: `${u(c({ theme: g || n, color: e }))}`, children: [
+    b || (a ? "• " : null),
+    r,
+    t
+  ] });
+};
+export {
+  p as Badge
+};

package/dist/Button.d.ts

@@ -0,0 +1 @@
+export * from './components/Button/index'

package/dist/Button.es.js

@@ -0,0 +1,377 @@
+import { j as l } from "./jsx-runtime-944c88e2.js";
+import { c as g } from "./utils-7e50508b.js";
+import { a as e, u as v } from "./index-96a8d125.js";
+import * as m from "react";
+const D = e("bu-text-light-second", {
+  variants: {
+    theme: {
+      light: ["bu-bg-light-primary", "hover:bu-bg-light-hover-primary"],
+      dark: ["bu-bg-dark-primary", "hover:bu-bg-dark-hover-primary"]
+    }
+  }
+}), N = e("", {
+  variants: {
+    theme: {
+      light: [
+        "bu-bg-light-fill-secondary",
+        "bu-text-light-label-40",
+        "hover:bu-bg-light-fill-secondary"
+      ],
+      dark: [
+        "bu-bg-dark-fill-secondary",
+        "bu-text-dark-label-40",
+        "hover:bu-bg-dark-fill-secondary"
+      ]
+    }
+  }
+}), E = e("", {
+  variants: {
+    theme: {
+      light: [
+        "bu-bg-light-primary-14",
+        "hover:bu-bg-light-hover-primary-10",
+        "bu-text-light-primary"
+      ],
+      dark: ["bu-bg-dark-primary-14", "hover:bu-bg-dark-hover-primary-10", "bu-text-dark-primary"]
+    }
+  }
+}), B = e("", {
+  variants: {
+    theme: {
+      light: [
+        "bu-bg-light-fill-secondary",
+        "bu-text-light-label-40",
+        "hover:bu-bg-light-fill-secondary"
+      ],
+      dark: [
+        "bu-bg-dark-fill-secondary",
+        "bu-text-dark-label-40",
+        "hover:bu-bg-dark-fill-secondary"
+      ]
+    }
+  }
+}), L = e("", {
+  variants: {
+    theme: {
+      light: [
+        "bu-bg-light-fill-secondary",
+        "hover:bu-bg-light-hover-fill-secondary hover:bu-text-light-primary",
+        "bu-text-light-label"
+      ],
+      dark: [
+        "bu-bg-dark-fill-secondary",
+        "hover:bu-bg-dark-hover-fill-secondary hover:bu-text-dark-primary",
+        "bu-text-dark-label"
+      ]
+    }
+  }
+}), R = e("", {
+  variants: {
+    theme: {
+      light: [
+        "bu-bg-light-fill-secondary",
+        "bu-text-light-label-40",
+        "hover:bu-bg-light-fill-secondary"
+      ],
+      dark: [
+        "bu-bg-dark-fill-secondary",
+        "bu-text-dark-label-40",
+        "hover:bu-bg-dark-fill-secondary"
+      ]
+    }
+  }
+}), F = e("", {
+  variants: {
+    theme: {
+      light: ["bu-text-light-label", "hover:bu-text-light-primary"],
+      dark: ["bu-text-dark-label", "hover:bu-text-dark-primary"]
+    }
+  }
+}), W = e("", {
+  variants: {
+    theme: {
+      light: ["bu-text-light-label-40", "hover:bu-text-light-label-40"],
+      dark: ["bu-text-dark-label-40", "hover:bu-text-dark-label-40"]
+    }
+  }
+}), M = e("", {
+  variants: {
+    theme: {
+      light: ["bu-text-light-label-40", "hover:bu-text-light-primary"],
+      dark: ["bu-text-dark-label-40", "hover:bu-text-dark-primary"]
+    }
+  }
+}), P = e("", {
+  variants: {
+    theme: {
+      light: ["bu-text-light-label-40", "hover:bu-text-light-label-40"],
+      dark: ["bu-text-dark-label-40", "hover:bu-text-dark-label-40"]
+    }
+  }
+}), T = e("", {
+  variants: {
+    theme: {
+      light: [
+        "bu-text-light-second",
+        "hover:bu-text-light-second",
+        "bu-border",
+        "bu-border-solid",
+        "bu-border-light-primary",
+        "hover:bu-bg-light-primary-10"
+      ],
+      dark: [
+        "bu-text-dark-label",
+        "hover:bu-text-dark-label",
+        "bu-border",
+        "bu-border-solid",
+        "bu-border-dark-primary",
+        "hover:bu-bg-dark-primary-10"
+      ]
+    }
+  }
+}), V = e("", {
+  variants: {
+    theme: {
+      light: [
+        "bu-text-light-second",
+        "hover:bu-text-light-second",
+        "bu-border",
+        "bu-border-solid",
+        "bu-border-light-line-secondary",
+        "hover:bu-bg-light-fill-primary"
+      ],
+      dark: [
+        "bu-text-dark-label",
+        "hover:bu-text-dark-label",
+        "bu-border",
+        "bu-border-solid",
+        "bu-border-dark-line-secondary",
+        "hover:bu-bg-dark-fill-primary"
+      ]
+    }
+  }
+}), x = e("", {
+  variants: {
+    theme: {
+      light: [
+        "bu-text-light-label-40",
+        "hover:bu-text-light-label-40",
+        "bu-border",
+        "bu-border-solid",
+        "bu-border-light-fill-secondary",
+        "hover:bu-bg-transparent"
+      ],
+      dark: [
+        "bu-text-dark-label-40",
+        "hover:bu-text-dark-label-40",
+        "bu-border",
+        "bu-border-solid",
+        "bu-border-dark-fill-secondary",
+        "hover:bu-bg-transparent"
+      ]
+    }
+  }
+}), Z = e("bu-text-white", {
+  variants: {
+    theme: {
+      light: ["bu-bg-light-green", "hover:bu-bg-light-hover-green"],
+      dark: ["bu-bg-dark-green", "hover:bu-bg-dark-hover-green"]
+    }
+  }
+}), q = e("bu-text-white", {
+  variants: {
+    theme: {
+      light: ["bu-bg-light-label-20", "hover:bu-bg-light-label-20"],
+      dark: ["bu-bg-dark-label-20", "hover:bu-bg-dark-label-20"]
+    }
+  }
+}), z = e("bu-text-white", {
+  variants: {
+    theme: {
+      light: ["bu-bg-light-red", "hover:bu-bg-light-hover-red"],
+      dark: ["bu-bg-dark-red", "hover:bu-bg-dark-hover-red"]
+    }
+  }
+}), A = e("bu-text-white", {
+  variants: {
+    theme: {
+      light: ["bu-bg-light-label-20", "hover:bu-bg-light-label-20"],
+      dark: ["bu-bg-dark-label-20", "hover:bu-bg-dark-label-20"]
+    }
+  }
+}), p = e("bu-border bu-border-solid bu-font-medium", {
+  variants: {
+    theme: {
+      light: [
+        "bu-border-light-text bu-bg-transparent bu-text-light-text",
+        "hover:bu-bg-light-text hover:bu-text-light-primary"
+      ],
+      dark: [
+        "bu-border-dark-text bu-bg-transparent bu-text-dark-text",
+        "hover:bu-bg-dark-text hover:bu-text-dark-primary"
+      ]
+    }
+  }
+}), c = {
+  primary: {
+    variant: D,
+    disabled: N
+  },
+  secondary: {
+    variant: E,
+    disabled: B
+  },
+  tertiary: {
+    variant: L,
+    disabled: R
+  },
+  text: {
+    variant: F,
+    disabled: W
+  },
+  ghost: {
+    variant: T,
+    disabled: x
+  },
+  ghost2: {
+    variant: V,
+    disabled: x
+  },
+  info: {
+    variant: M,
+    disabled: P
+  },
+  buy: {
+    variant: Z,
+    disabled: q
+  },
+  sell: {
+    variant: z,
+    disabled: A
+  },
+  function: {
+    variant: p,
+    disabled: p
+    //this not have disabled
+  }
+}, G = (t) => {
+  const { theme: a, variant: o, disabled: u, shape: b } = t, r = u ? "" : c[o].variant({ theme: a });
+  return e("bu-box-border bu-inline-flex bu-items-center bu-justify-center", {
+    variants: {
+      variant: {
+        primary: r,
+        secondary: r,
+        tertiary: r,
+        text: r,
+        ghost: r,
+        ghost2: r,
+        info: r,
+        buy: r,
+        sell: r,
+        function: r
+      },
+      size: {
+        small: `${b === "circle" ? "bu-h-[28px] bu-min-w-[30px]" : "bu-h-[28px] bu-min-w-[80px] bu-rounded-[6px]"} bu-px-[12px] bu-text-[12px] bu-leading-[18px]`,
+        "m-small": `${b === "circle" ? "bu-h-[32px] bu-min-w-[30px]" : "bu-h-[32px] bu-min-w-[80px] bu-rounded-[6px]"} bu-px-[12px] bu-text-[12px] bu-leading-[18px]`,
+        medium: `${b === "circle" ? "bu-h-[40px] bu-min-w-[40px]" : "bu-h-[40px] bu-min-w-[100px] bu-rounded-[8px]"} bu-px-[16px] bu-text-[14px] bu-leading-[20px]`,
+        large: `${b === "circle" ? "bu-h-[48px] bu-min-w-[48px]" : "bu-h-[48px] bu-min-w-[140px] bu-rounded-[8px]"}  bu-px-[24px] bu-text-[16px] bu-leading-[24px]`,
+        max: `${b === "circle" ? "bu-h-[56px] bu-min-w-[56px]" : "bu-h-[56px] bu-min-w-[180px] bu-rounded-[8px]"} bu-px-[24px] bu-text-[18px] bu-leading-[26px]`
+      },
+      shape: {
+        normal: "",
+        circle: "bu-rounded-[50%] bu-px-[0px] bu-py-[0px]"
+      },
+      disabled: {
+        true: c[o].disabled({ theme: a })
+      }
+    }
+  })(t);
+}, H = e("bu-animate-spin", {
+  variants: {
+    size: {
+      small: "bu-h-[14px] bu-w-[14px]",
+      "m-small": "bu-h-[16px] bu-w-[16px]",
+      medium: "bu-h-[20px] bu-w-[20px]",
+      large: "bu-h-[24px] bu-w-[24px]",
+      max: "bu-h-[28px] bu-w-[28px]"
+    }
+  }
+}), i = {
+  "loader-medium": "_loader-medium_amaox_2",
+  "animloader-medium": "_animloader-medium_amaox_1",
+  "loader-light": "_loader-light_amaox_12",
+  "loader-dark": "_loader-dark_amaox_16",
+  "loader-large": "_loader-large_amaox_34",
+  "animloader-large": "_animloader-large_amaox_1",
+  "loader-small": "_loader-small_amaox_58",
+  "animloader-small": "_animloader-small_amaox_1",
+  "loader-m-small": "_loader-m-small_amaox_82",
+  "animloader-m-small": "_animloader-m-small_amaox_1"
+}, J = ({ size: t, theme: a }) => {
+  const o = {
+    small: i["loader-small"],
+    medium: i["loader-medium"],
+    large: i["loader-large"],
+    max: i["loader-large"],
+    "m-small": i["loader-m-small"]
+  }, u = {
+    light: i["loader-light"],
+    dark: i["loader-dark"]
+  };
+  return /* @__PURE__ */ l.jsx("span", { className: `${o[t]} ${u[a]}` });
+}, K = (t) => /* @__PURE__ */ m.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ m.createElement("path", { d: "M18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C15.9519 2 19.3684 4.29238 20.9922 7.61993L19.2011 8.51103C17.905 5.84083 15.1675 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z", fill: "#DEDFE0" })), y = ({
+  size: t = "large",
+  disabled: a = !1,
+  variant: o = "primary",
+  children: u,
+  startIcon: b,
+  endIcon: r,
+  icon: k,
+  onClick: s,
+  shape: f = "normal",
+  className: _ = "",
+  theme: h,
+  loading: d,
+  loadingType: w = "default",
+  ...S
+}) => {
+  const j = (C) => {
+    d || s && s(C);
+  }, { theme: n } = v(), $ = {
+    variant: d ? "tertiary" : o,
+    size: t,
+    theme: h || n,
+    shape: f,
+    disabled: d ? !0 : a
+  };
+  return /* @__PURE__ */ l.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: j,
+      className: `${g(G($))} ${_}`,
+      disabled: a,
+      ...S,
+      children: d ? w === "refresh" ? /* @__PURE__ */ l.jsx(K, { className: g(H({ size: t })) }) : /* @__PURE__ */ l.jsx(J, { size: t, theme: n }) : /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+        b && /* @__PURE__ */ l.jsx("span", { className: "bu-mr-[9px]", children: b }),
+        u,
+        r && /* @__PURE__ */ l.jsx("span", { className: "bu-ml-[9px] bu-flex bu-items-center", children: r }),
+        k
+      ] })
+    }
+  );
+}, O = (t) => {
+  const { theme: a } = v();
+  return /* @__PURE__ */ l.jsx(
+    y,
+    {
+      ...t,
+      variant: "ghost",
+      className: `bu-border-light-background bu-text-light-background ${a === "light" ? "hover:!bu-text-light-primary" : "hover:!bu-text-dark-primary"}  bu-font-medium hover:!bu-bg-light-background`
+    }
+  );
+};
+y.WhiteButton = O;
+export {
+  y as Button
+};

package/dist/Dialog.d.ts

@@ -0,0 +1 @@
+export * from './components/Dialog/index'