@blofin/blofin-ui 0.7.62 → 0.7.64

package/README.md

@@ -6,9 +6,9 @@
 
 ![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)
+![NPM](https://img.shields.io/npm/l/@blofin/blofin-ui)
+![npm](https://img.shields.io/npm/v/@blofin/blofin-ui)
+![npm](https://img.shields.io/npm/dt/@blofin/blofin-ui)
 
 **UI library for crypto exchanges.**
 
@@ -25,21 +25,21 @@ With our UI library, you can confidently offer your users a truly elevated and r
 **NPM**
 
 ```bash
-npm install blofin-ui
+npm install @blofin/blofin-ui
 ```
 
 **Yarn**
 
 ```bash
-yarn add blofin-ui
+yarn add @blofin/blofin-ui
 ```
 
 ## Usage
 
 ```jsx
 import "src/styles/globals.css";
-import { BlofinUiProvider } from "blofin-ui";
-import { Button } from "blofin-ui";
+import { BlofinUiProvider } from "@blofin/blofin-ui";
+import { Button } from "@blofin/blofin-ui";
 
 <BlofinUiProvider value={{ theme: "light" }}>
   <Component {...pageProps}></Component>
@@ -48,7 +48,7 @@ import { Button } from "blofin-ui";
 
 ```css
 /** global.css */
-@import "blofin-ui/blofin.css";
+@import "@blofin/blofin-ui/blofin.css";
 @import "./tailwind.css";
 
 /** tailwind.css */
@@ -59,29 +59,46 @@ import { Button } from "blofin-ui";
 
 ## Components
 
+- [x] Alert
+- [x] Badge
 - [x] Button
+- [x] Calendar
 - [x] Checkbox
+- [x] CssDropdown
+- [x] DatePickerRange
+- [x] DateTimePicker
+- [x] Dialog
+- [x] Divider
+- [x] Drawer
+- [x] Dropdown
+- [x] Empty
+- [x] Form
+- [x] Icon
 - [x] Input
+- [x] LabelTextField
+- [x] MonthPicker
+- [x] MultiSelect
+- [x] Notification
+- [x] Pagination
+- [x] Picker
+- [x] Popover
+- [x] Popup
+- [x] ProTable
+- [x] RadioButton
+- [x] SVG
 - [x] Select
+- [x] Slider
+- [x] Sort
+- [x] Sortable
+- [x] Switch
+- [x] Tab
+- [x] Table
+- [x] TextField
+- [x] TextSelect
 - [x] Textarea
+- [x] Toast
 - [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
 

package/dist/Badge.es.js

@@ -1,7 +1,7 @@
 import { j as s } from "./jsx-runtime-82a9ddf6.js";
-import { u as i } from "./clsx.m-b14a941b.js";
-import { c as d } from "./utils-cacf528c.js";
-import { c as u } from "./index-7272669e.js";
+import { u as i } from "./clsx.m-9bb14413.js";
+import { c as d } from "./utils-096a71c5.js";
+import { c as u } from "./index-86cecf62.js";
 import "react";
 const c = (e) => {
   const r = {

package/dist/Button.es.js

@@ -1,7 +1,7 @@
 import { j as t } from "./jsx-runtime-82a9ddf6.js";
-import { c as k } from "./utils-cacf528c.js";
-import { c as e } from "./index-7272669e.js";
-import { u as x, c as g } from "./clsx.m-b14a941b.js";
+import { c as k } from "./utils-096a71c5.js";
+import { c as e } from "./index-86cecf62.js";
+import { u as x, c as g } from "./clsx.m-9bb14413.js";
 import * as d from "react";
 const N = e("bu-text-light-second", {
   variants: {
@@ -305,21 +305,21 @@ const N = e("bu-text-light-second", {
     //this not have disabled
   }
 }, K = (r) => {
-  const { theme: l, variant: b, disabled: o, shape: i, checked: s } = r, a = o ? "" : f[b].variant({ theme: l, checked: s });
+  const { theme: a, variant: b, disabled: o, shape: i, checked: s } = r, l = o ? "" : f[b].variant({ theme: a, checked: s });
   return e("bu-box-border bu-inline-flex bu-items-center bu-justify-center bu-font-medium", {
     variants: {
       variant: {
-        primary: a,
-        secondary: a,
-        tertiary: a,
-        text: a,
-        ghost: a,
-        ghost2: a,
-        ghost3: a,
-        info: a,
-        buy: a,
-        sell: a,
-        function: a
+        primary: l,
+        secondary: l,
+        tertiary: l,
+        text: l,
+        ghost: l,
+        ghost2: l,
+        ghost3: l,
+        info: l,
+        buy: l,
+        sell: l,
+        function: l
       },
       size: {
         small: `${i === "circle" ? "bu-h-[28px] bu-min-w-[30px]" : "bu-h-[28px] bu-min-w-[80px] bu-rounded-[var(--btn-rounded-small)]"} bu-px-[12px] bu-text-[12px] bu-leading-[18px]`,
@@ -333,7 +333,7 @@ const N = e("bu-text-light-second", {
         circle: "bu-rounded-[50%] bu-px-[0px] bu-py-[0px]"
       },
       disabled: {
-        true: f[b].disabled({ theme: l })
+        true: f[b].disabled({ theme: a })
       }
     }
   })(r);
@@ -358,7 +358,7 @@ const N = e("bu-text-light-second", {
   "animloader-small": "_animloader-small_16dgj_1",
   "loader-m-small": "_loader-m-small_16dgj_82",
   "animloader-m-small": "_animloader-m-small_16dgj_1"
-}, Q = ({ size: r, theme: l }) => {
+}, Q = ({ size: r, theme: a }) => {
   const b = {
     small: u["loader-small"],
     medium: u["loader-medium"],
@@ -369,15 +369,15 @@ const N = e("bu-text-light-second", {
     light: u["loader-light"],
     dark: u["loader-dark"]
   };
-  return /* @__PURE__ */ t.jsx("span", { className: `${b[r]} ${o[l]}` });
+  return /* @__PURE__ */ t.jsx("span", { className: `${b[r]} ${o[a]}` });
 }, U = (r) => /* @__PURE__ */ d.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...r }, /* @__PURE__ */ d.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" })), X = (r) => /* @__PURE__ */ d.createElement("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...r }, /* @__PURE__ */ d.createElement("path", { d: "M12 6C12 2.68629 9.31371 0 6 0H0V6C0 9.31371 2.68629 12 6 12H12V6Z", fill: "currentColor" }), /* @__PURE__ */ d.createElement("path", { d: "M5.1663 7.32125L8.99647 3.49109L9.58571 4.08034L5.1663 8.49975L2.51465 5.84812L3.10391 5.25887L5.1663 7.32125Z", fill: "white" })), Y = (r) => /* @__PURE__ */ d.createElement("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...r }, /* @__PURE__ */ d.createElement("path", { d: "M12 6C12 2.68629 9.31371 0 6 0H0V6C0 9.31371 2.68629 12 6 12H12V6Z", fill: "currentColor" }), /* @__PURE__ */ d.createElement("path", { d: "M5.1663 7.32125L8.99647 3.49109L9.58571 4.08034L5.1663 8.49975L2.51465 5.84812L3.10391 5.25887L5.1663 7.32125Z", fill: "black" })), n = ({
   size: r = "large",
-  disabled: l = !1,
+  disabled: a = !1,
   variant: b = "primary",
   children: o,
   startIcon: i,
   endIcon: s,
-  icon: a,
+  icon: l,
   onClick: c,
   shape: w = "normal",
   className: _ = "",
@@ -394,7 +394,7 @@ const N = e("bu-text-light-second", {
     size: r,
     theme: p || D,
     shape: w,
-    disabled: h ? !0 : l,
+    disabled: h ? !0 : a,
     checked: S
   };
   return /* @__PURE__ */ t.jsx(
@@ -403,30 +403,30 @@ const N = e("bu-text-light-second", {
       type: "button",
       onClick: L,
       className: `${k(K(v))} ${_}`,
-      disabled: l,
+      disabled: a,
       ...C,
       children: h ? j === "refresh" ? /* @__PURE__ */ t.jsx(U, { className: k(O({ size: r })) }) : /* @__PURE__ */ t.jsx(Q, { size: r, theme: v.theme }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-        i && /* @__PURE__ */ t.jsx("span", { className: "bu-mr-[9px]", children: i }),
+        i && /* @__PURE__ */ t.jsx("span", { className: "ltr:bu-mr-[9px] rtl:bu-ml-[9px]", children: i }),
         o,
-        s && /* @__PURE__ */ t.jsx("span", { className: "bu-ml-[9px] bu-flex bu-items-center", children: s }),
-        a
+        s && /* @__PURE__ */ t.jsx("span", { className: "ltr:bu-ml-[9px] rtl:bu-mr-[9px] bu-flex bu-items-center", children: s }),
+        l
       ] })
     }
   );
 }, I = (r) => {
-  const { theme: l } = x(), { checked: b } = r;
+  const { theme: a } = x(), { checked: b } = r;
   return /* @__PURE__ */ t.jsxs("div", { className: "bu-relative", children: [
     /* @__PURE__ */ t.jsx(n, { ...r, variant: "ghost3" }),
     /* @__PURE__ */ t.jsx(
       "div",
       {
         className: g(
-          "bu-absolute bu-right-0 bu-top-0",
-          l === "light" ? "bu-text-light-label" : "bu-text-dark-label",
-          "bu-rounded-bl-[8px] bu-rounded-br-none bu-rounded-tl-none bu-rounded-tr-[8px]",
+          "bu-absolute bu-top-0 ltr:bu-right-0 rtl:bu-left-0",
+          a === "light" ? "bu-text-light-label" : "bu-text-dark-label",
+          "ltr:bu-rounded-tr-[8px] ltr:bu-rounded-bl-[8px] ltr:bu-rounded-tl-none ltr:bu-rounded-br-none rtl:bu-rounded-tl-[8px] rtl:bu-rounded-br-[8px] rtl:bu-rounded-tr-none rtl:bu-rounded-bl-none",
           "bu-flex bu-items-center bu-justify-center"
         ),
-        children: l === "light" ? /* @__PURE__ */ t.jsx(
+        children: a === "light" ? /* @__PURE__ */ t.jsx(
           X,
           {
             className: g(b ? "" : "bu-text-light-line-secondary")
@@ -441,13 +441,13 @@ const N = e("bu-text-light-second", {
     )
   ] });
 }, ee = (r) => {
-  const { theme: l } = x();
+  const { theme: a } = x();
   return /* @__PURE__ */ t.jsx(
     n,
     {
       ...r,
       variant: "ghost",
-      className: `bu-border-light-background bu-text-light-background ${l === "light" ? "hover:!bu-text-light-primary" : "hover:!bu-text-dark-primary"}  bu-font-medium hover:!bu-bg-light-background`
+      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`
     }
   );
 };

package/dist/Dialog.es.js

@@ -1,12 +1,12 @@
-import { D as g } from "./index-40626e62.js";
+import { D as g } from "./index-50c18668.js";
 import "./jsx-runtime-82a9ddf6.js";
 import "react";
 import "react-dom";
 import "./close-c67ec245.js";
 import "./Button.es.js";
-import "./utils-cacf528c.js";
-import "./clsx.m-b14a941b.js";
-import "./index-7272669e.js";
+import "./utils-096a71c5.js";
+import "./clsx.m-9bb14413.js";
+import "./index-86cecf62.js";
 export {
   g as Dialog
 };

package/dist/Divider.es.js

@@ -1,7 +1,7 @@
 import { j as t } from "./jsx-runtime-82a9ddf6.js";
-import { u as s } from "./clsx.m-b14a941b.js";
-import { c as i } from "./utils-cacf528c.js";
-import { c as a } from "./index-7272669e.js";
+import { u as s } from "./clsx.m-9bb14413.js";
+import { c as i } from "./utils-096a71c5.js";
+import { c as a } from "./index-86cecf62.js";
 import "react";
 const b = a("", {
   variants: {

package/dist/Drawer.es.js

@@ -1,10 +1,10 @@
 import { j as e } from "./jsx-runtime-82a9ddf6.js";
 import w from "react-dom";
 import { S as x } from "./close-c67ec245.js";
-import { u as g } from "./clsx.m-b14a941b.js";
-import { c as l } from "./index-7272669e.js";
+import { u as g } from "./clsx.m-9bb14413.js";
+import { c as i } from "./index-86cecf62.js";
 import "react";
-const k = "_drawerOverlay_1e2c8_2", v = "_drawerContent_1e2c8_14", y = "_left_1e2c8_19", C = "_right_1e2c8_23", j = "_drawerHeader_1e2c8_27", N = "_title_1e2c8_42", O = "_mock_1e2c8_47", $ = "_content_1e2c8_51", t = {
+const k = "_drawerOverlay_1e2c8_2", v = "_drawerContent_1e2c8_14", y = "_left_1e2c8_19", C = "_right_1e2c8_23", j = "_drawerHeader_1e2c8_27", N = "_title_1e2c8_42", $ = "_mock_1e2c8_47", O = "_content_1e2c8_51", t = {
   drawerOverlay: k,
   drawerContent: v,
   left: y,
@@ -12,9 +12,9 @@ const k = "_drawerOverlay_1e2c8_2", v = "_drawerContent_1e2c8_14", y = "_left_1e
   drawerHeader: j,
   "drawer-close-button": "_drawer-close-button_1e2c8_34",
   title: N,
-  mock: O,
-  content: $
-}, H = l(
+  mock: $,
+  content: O
+}, T = i(
   "bu-absolute  bu-flex  bu-flex-col bu-pb-[32px] bu-pt-[24px]",
   {
     variants: {
@@ -24,7 +24,7 @@ const k = "_drawerOverlay_1e2c8_2", v = "_drawerContent_1e2c8_14", y = "_left_1e
       }
     }
   }
-), S = l(
+), H = i(
   "bu-absolute bu-right-[20px] bu-h-[24px] bu-w-[24px] bu-cursor-pointer",
   {
     variants: {
@@ -34,26 +34,26 @@ const k = "_drawerOverlay_1e2c8_2", v = "_drawerContent_1e2c8_14", y = "_left_1e
       }
     }
   }
-), I = (i) => {
+), M = (d) => {
   const {
-    title: d,
-    content: m,
-    cancel: o,
-    theme: n,
-    hideIcon: u = !1,
+    title: m,
+    content: u,
+    cancel: n,
+    theme: o,
+    hideIcon: h = !1,
     open: r,
-    placement: _ = "right",
-    drawerContentClass: h = "bu-w-[300px]"
-  } = i, { theme: b } = g(), s = () => n || b;
+    placement: s = "right",
+    drawerContentClass: _ = "bu-w-[300px]"
+  } = d, { theme: b } = g(), c = () => o || b;
   if (!r)
     return null;
-  const c = () => {
-    o && o();
+  const l = () => {
+    n && n();
   }, p = (a) => {
-    a.target === a.currentTarget && (a.stopPropagation(), c());
+    a.target === a.currentTarget && (a.stopPropagation(), l());
   }, f = {
     transition: r ? "transform .3s ease-in-out" : "transform .3s ease-in-out, opacity 0.3s ease",
-    transform: r ? "translateX(0)" : "translateX(100%)",
+    transform: r ? "translateX(0)" : `translateX(${s === "left" ? "-100%" : "100%"})`,
     opacity: r ? 1 : 0
   };
   return r ? w.createPortal(
@@ -61,25 +61,25 @@ const k = "_drawerOverlay_1e2c8_2", v = "_drawerContent_1e2c8_14", y = "_left_1e
       "div",
       {
         className: `${t.drawerContent}
-        ${H({
-          theme: s()
+        ${T({
+          theme: c()
         })}
-        ${t[_]} ${h}`,
+        ${t[s]} ${_}`,
         style: f,
         children: [
           /* @__PURE__ */ e.jsxs("div", { className: t.drawerHeader, children: [
-            /* @__PURE__ */ e.jsx("div", { className: t.title, children: d }),
-            !u && /* @__PURE__ */ e.jsx(
+            /* @__PURE__ */ e.jsx("div", { className: t.title, children: m }),
+            !h && /* @__PURE__ */ e.jsx(
               x,
               {
-                className: `${S({
-                  theme: s()
+                className: `${H({
+                  theme: c()
                 })}`,
-                onClick: c
+                onClick: l
               }
             )
           ] }),
-          /* @__PURE__ */ e.jsx("div", { className: t.content, children: m })
+          /* @__PURE__ */ e.jsx("div", { className: t.content, children: u })
         ]
       }
     ) }),
@@ -87,5 +87,5 @@ const k = "_drawerOverlay_1e2c8_2", v = "_drawerContent_1e2c8_14", y = "_left_1e
   ) : null;
 };
 export {
-  I as Drawer
+  M as Drawer
 };