adnbn-ui 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adnbn-ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "A comprehensive React UI component library designed exclusively for the AddonBone browser extension framework with customizable theming and consistent design patterns",
   "keywords": [
     "react",
@@ -32,9 +32,6 @@
       ],
       "plugin": [
         "./src/plugin/index.ts"
-      ],
-      "theme": [
-        "./src/styles/mixins.scss"
       ]
     }
   },
@@ -58,7 +55,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "adnbn": "^0.0.54",
+    "adnbn": "^0.1.3",
     "autosize": "^6.0.1",
     "classnames": "^2.5.1",
     "odometer": "^0.4.8",

package/src/components/Avatar/avatar.module.scss

@@ -69,6 +69,7 @@ $root: avatar;
     align-items: center;
     justify-content: center;
     color: var(--avatar-fallback-color);
+    line-height: var(--fallback-line-height, var(--line-height, 1 rem));
     background-color: var(--avatar-fallback-bg-color, var(--avatar-bg-color));
     border-width: var(--avatar-fallback-border-width, var(--avatar-border-width));
     border-color: var(--avatar-fallback-border-color, var(--avatar-border-color));

package/src/components/Button/button.module.scss

@@ -5,7 +5,7 @@ $root: button;
   font-weight: var(--button-font-weight, 500);
   font-size: var(--button-font-size, var(--font-size, 14px));
   letter-spacing: var(--button-letter-spacing, 0.5px);
-  line-height: var(--button-line-height, var(--line-height, 14px));
+  line-height: var(--button-line-height, var(--line-height, 1 rem));
   height: var(--button-height, 34px);
   border-radius: var(--button-border-radius, 10px);
   padding: var(--button-padding, 0 16px);

package/src/components/Highlight/highlight.module.scss

@@ -4,6 +4,7 @@ $root: highlight;
   font-size: var(--highlight-font-size, inherit);
   font-weight: var(--highlight-font-weight, inherit);
   font-family: var(--highlight-font-family, inherit), sans-serif;
+  line-height: var(--highlight-line-height, var(--line-height, 1 rem));
   color: var(--highlight-color, #fff);
   background-color: var(--highlight-bg-color, #ffd60a);
   padding: var(--highlight-y-padding, 2px) var(--highlight-x-padding, 3px);

package/src/components/ListItem/list-item.module.scss

@@ -5,6 +5,7 @@
   gap: 10px;
   flex-wrap: nowrap;
   box-sizing: border-box;
+  line-height: var(--list-item-line-height, var(--line-height, 1 rem));
 
   &__center {
     flex-grow: 1;

package/src/components/Tag/tag.module.scss

@@ -7,7 +7,7 @@ $root: tag;
   justify-content: center;
   font-size: var(--tag-font-size, 13px);
   font-weight: var(--tag-font-weight, 500);
-  line-height: var(--tag-line-height, 1rem);
+  line-height: var(--tag-line-height, var(--line-height, 1 rem));
   letter-spacing: var(--tag-letter-spacing, 0.5px);
   padding: var(--tag-padding, 4px 8px);
   border-radius: var(--tag-border-radius, 999px);

package/src/components/TextArea/text-area.module.scss

@@ -7,7 +7,7 @@ $root: text-area;
   font-weight: var(--text-area-font-weight, 400);
   font-size: var(--text-area-font-size, 14px);
   letter-spacing: var(--text-area-letter-spacing, 0.5px);
-  line-height: var(--text-area-line-height, 18px);
+  line-height: var(--text-area-line-height, var(--line-height, 1 rem));
   padding: var(--text-area-padding, 8px 12px);
   border-radius: var(--text-area-border-radius, 8px);
   min-width: var(--text-area-min-width, 200px);

package/src/components/TextField/text-field.module.scss

@@ -8,7 +8,7 @@ $root: text-field;
   font-weight: var(--text-field-font-weight, 400);
   font-size: var(--text-field-font-size, 14px);
   letter-spacing: var(--text-field-letter-spacing, 0.5px);
-  line-height: var(--text-field-line-height, 18px);
+  line-height: var(--text-field-line-height, var(--line-height, 1 rem));
   padding: var(--text-field-padding, 8px 12px);
   border-radius: var(--text-field-border-radius, 8px);
   transition:

package/src/components/Tooltip/tooltip.module.scss

@@ -6,6 +6,7 @@ $root: tooltip;
     font-family: var(--tooltip-font-family, var(--font-family)), sans-serif;
     font-weight: var(--tooltip-font-weight, 500);
     font-size: var(--tooltip-font-size, var(--font-size, 14px));
+    line-height: var(--tooltip-line-height, var(--line-height, 1 rem));
     color: var(--tooltip-color, var(--text-secondary-color));
     background-color: var(--tooltip-bg-color, var(--bg-secondary-color));
     border-radius: var(--tooltip-border-radius, 5px);

package/src/plugin/builder/StyleBuilder.ts

@@ -15,6 +15,7 @@ export default class StyleBuilder implements BuilderContract {
 
         const lines = files
             .map(file => file.import)
+            .reverse()
             .reduce((lines, filePath) => {
                 return lines + "\n" + fs.readFileSync(path.resolve(filePath), "utf8");
             }, "")

package/src/plugin/builder/virtual.config.ts

@@ -2,6 +2,4 @@ import {merge} from "ts-deepmerge";
 
 //configs imports;
 
-import "adnbn-ui-style.scss";
-
 export default merge({});

package/src/providers/index.ts

@@ -1,4 +1,4 @@
-export {default as UIProvider, type UIProviderProps} from "./UIProvider";
+export * from "./ui";
 export * from "./theme";
 export * from "./icons";
 export * from "./extra";

package/src/providers/theme/ThemeProvider.tsx

@@ -5,9 +5,6 @@ import {ThemeContext} from "./context";
 import {Theme} from "../../types/theme";
 import {Config} from "../../types/config";
 
-import "./styles/reset.scss";
-import "./styles/default.scss";
-
 const isDarkMedia = () => window?.matchMedia("(prefers-color-scheme: dark)")?.matches;
 
 const ThemeProvider: FC<PropsWithChildren<Pick<Config, "components">>> = ({children, components}) => {

package/src/providers/{UIProvider.tsx → ui/UIProvider.tsx}

@@ -1,9 +1,13 @@
 import React, {FC, PropsWithChildren} from "react";
 import {merge} from "ts-deepmerge";
 
-import {ExtraProvider, IconsProvider, ThemeProvider} from "./index";
+import {ExtraProvider, IconsProvider, ThemeProvider} from "../index";
 
-import {ComponentsProps, Config, ExtraProps, Icons} from "../types/config";
+import {ComponentsProps, Config, ExtraProps, Icons} from "../../types/config";
+
+import "./styles/default.scss";
+import "./styles/reset.scss";
+import "adnbn-ui-style.scss";
 
 import config from "adnbn-ui-config";
 

package/src/providers/ui/index.ts

@@ -0,0 +1 @@
+export {default as UIProvider, type UIProviderProps} from "./UIProvider";

package/src/providers/{theme → ui}/styles/default.scss

@@ -11,7 +11,7 @@
   --font-size: 14px;
   --font-weight: 400;
   --letter-spacing: 0.2px;
-  --line-height: 14px;
+  --line-height: normal;
 
   --border-radius: 20px;
 

package/src/providers/ui/styles/reset.scss

@@ -0,0 +1,128 @@
+a,
+abbr,
+acronym,
+address,
+applet,
+article,
+aside,
+audio,
+b,
+big,
+blockquote,
+body,
+canvas,
+caption,
+center,
+cite,
+code,
+dd,
+del,
+details,
+dfn,
+div,
+dl,
+dt,
+em,
+embed,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+html,
+i,
+iframe,
+img,
+ins,
+kbd,
+label,
+legend,
+li,
+main,
+mark,
+menu,
+nav,
+object,
+ol,
+output,
+p,
+pre,
+q,
+ruby,
+s,
+samp,
+section,
+small,
+span,
+strike,
+strong,
+sub,
+summary,
+sup,
+table,
+tbody,
+td,
+tfoot,
+th,
+thead,
+time,
+tr,
+tt,
+u,
+ul,
+var,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  vertical-align: baseline;
+  outline: none !important;
+  box-sizing: border-box;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section {
+  display: block;
+}
+
+input:focus,
+select:focus,
+textarea:focus,
+button:focus {
+  outline: none;
+}
+
+body {
+  background-color: var(--bg-primary-color);
+  color: var(--text-primary-color);
+  font-family: var(--font-family), "sans-serif";
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+  letter-spacing: var(--letter-spacing);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
+  will-change: background-color, color;
+  transition:
+    background-color var(--transition-speed-md),
+    color var(--transition-speed-md);
+}