@streamlayer/react-ui 0.37.0 → 0.38.0

package/lib/ui/navigation/button/index.js

@@ -1,10 +1,10 @@
 import { jsx as t, jsxs as d, Fragment as i } from "react/jsx-runtime";
-import { SButton as m, ButtonIcon as s } from "./styles.js";
+import { SButton as l, ButtonIcon as m, ButtonLabel as s } from "./styles.js";
 import "@linaria/react";
-const h = ({ disabled: n, active: e, onClick: o, label: c, icon: r }) => /* @__PURE__ */ t(m, { onClick: o, disabled: n, "data-selected": e, children: /* @__PURE__ */ d(i, { children: [
-  r && /* @__PURE__ */ t(s, { children: r }),
-  /* @__PURE__ */ t("span", { children: c })
+const p = ({ disabled: e, active: n, onClick: o, label: c, icon: r }) => /* @__PURE__ */ t(l, { onClick: o, disabled: e, "data-selected": n, children: /* @__PURE__ */ d(i, { children: [
+  r && /* @__PURE__ */ t(m, { children: r }),
+  /* @__PURE__ */ t(s, { children: c })
 ] }) });
 export {
-  h as Button
+  p as Button
 };

package/lib/ui/navigation/button/styles.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 export declare const SButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
 export declare const ButtonIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const ButtonLabel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

package/lib/ui/navigation/button/styles.js

@@ -9,7 +9,10 @@ const e = r.button`
   border-radius: 100px;
   border: 1px solid var(--color-neutrals-gray3);
   color: var(--color-primary-green1);
-  padding: 9px 12px;
+  padding: 0px 8px;
+  font-size: 12px;
+  font-weight: var(--font-weight-default);
+  letter-spacing: -0.5px;
   cursor: pointer;
 
   &:hover {
@@ -19,26 +22,38 @@ const e = r.button`
   &[data-selected='true'] {
     color: var(--color-white);
     background-color: var(--color-primary-green1);
+    border-color: var(--color-primary-green1);
 
     &:hover {
-      border-color: var(--color-neutrals-gray3);
       cursor: default;
     }
+
+    &:disabled {
+      &:hover {
+        border-color: var(--color-primary-green1);
+      }
+    }
   }
 
   &:disabled {
     opacity: 0.5;
     cursor: default;
+
+    &:hover {
+      cursor: default;
+      border-color: var(--color-neutrals-gray3);
+    }
   }
 `, t = r.span`
-  display: block;
+  display: flex;
   width: 22px;
   height: 22px;
+  justify-content: center;
+  align-items: center;
   margin-right: 5px;
-  background-repeat: no-repeat;
-  background-position: center;
-`;
+`, a = r.span``;
 export {
   t as ButtonIcon,
+  a as ButtonLabel,
   e as SButton
 };

package/lib/ui/theme/constants.d.ts

@@ -75,5 +75,6 @@ export declare const FONT: {
     REGULAR: string;
     SERIF: string;
     COLOR: string;
+    WEIGHT_DEFAULT: string;
 };
 export declare const colors: string;

package/lib/ui/theme/constants.js

@@ -52,7 +52,8 @@ const N = {
 }, E = Object.assign({}, N, T), S = {
   REGULAR: "'Benton Sans', BentonSans, SL-FONT1, Arial, Helvetica, sans-serif",
   SERIF: "'Tiempos', 'Tiempos Text', SL-FONT2, Times New Roman, serif",
-  COLOR: "#fff"
+  COLOR: "#fff",
+  WEIGHT_DEFAULT: "500"
 }, O = Object.keys(E).reduce((_, R) => {
   const A = E[R];
   return `

package/lib/ui/theme/theme.js

@@ -1,24 +1,25 @@
-import { jsx as r, jsxs as e } from "react/jsx-runtime";
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
 import { css as h } from "@linaria/core";
-import { colors as s, FONT as t } from "./constants.js";
+import { colors as d, FONT as e } from "./constants.js";
 const l = `
-  ${s}
-  --font-family: ${t.REGULAR};
-  --font-regular: ${t.REGULAR};
-  --font-color: ${t.COLOR};
-  --font-serif: ${t.SERIF};
+  ${d}
+  --font-family: ${e.REGULAR};
+  --font-regular: ${e.REGULAR};
+  --font-color: ${e.COLOR};
+  --font-serif: ${e.SERIF};
+  --font-weight-default: ${e.WEIGHT_DEFAULT};
 `, f = h`
   ${l}
-`, p = () => /* @__PURE__ */ r("table", { children: /* @__PURE__ */ e("table", { children: [
-  /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ e("tr", { children: [
-    /* @__PURE__ */ r("th", { children: "name" }),
-    /* @__PURE__ */ r("th", { children: "value" })
+`, p = () => /* @__PURE__ */ t("table", { children: /* @__PURE__ */ r("table", { children: [
+  /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ r("tr", { children: [
+    /* @__PURE__ */ t("th", { children: "name" }),
+    /* @__PURE__ */ t("th", { children: "value" })
   ] }) }),
-  /* @__PURE__ */ r("tbody", { children: l.split(";").map((o) => {
+  /* @__PURE__ */ t("tbody", { children: l.split(";").map((o) => {
     const n = o.trim(), [i, c] = n.split(":");
-    return /* @__PURE__ */ e("tr", { children: [
-      /* @__PURE__ */ r("td", { children: i }),
-      /* @__PURE__ */ r("td", { children: c })
+    return /* @__PURE__ */ r("tr", { children: [
+      /* @__PURE__ */ t("td", { children: i }),
+      /* @__PURE__ */ t("td", { children: c })
     ] }, n);
   }) })
 ] }) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -73,6 +73,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.23.1"
+    "@streamlayer/react": "^0.23.3"
   }
 }