jbx 2.5.0 → 2.6.0

package/.nvmrc

@@ -1 +1 @@
-v18.10
+v18.x

package/README.md

@@ -5,22 +5,22 @@ npm i jbx@latest capsize@latest styled-components@latest
 ```
 
 ```jsx
-import { JBX, MainHeader, Text, Space, Container } from "jbx";
+import { JBX, MainHeader, Text, Space, Container } from 'jbx';
 
 function App() {
   return (
     <Container>
-      <JBX accent={"#eb4d4b"} />
+      <JBX accent={'#f00'} />
       <MainHeader>React Blur</MainHeader>
       <Space h={1} />
       <Text>
-        Tool that creates animated CSS transitions. Add sprites and get the code
-        ready to paste in your site.
+        Tool that creates animated CSS transitions. Add sprites and get the code ready to paste in
+        your site.
       </Text>
       <Space h={2} />
       <Text>
-        Tool that creates animated CSS transitions. Add sprites and get the code
-        ready to paste in your site.
+        Tool that creates animated CSS transitions. Add sprites and get the code ready to paste in
+        your site.
       </Text>
     </Container>
   );

package/dist/main.css

@@ -1,32 +1,37 @@
 html {
   box-sizing: border-box;
 }
-
-*, :before, :after {
+*,
+*:before,
+*:after {
   box-sizing: inherit;
 }
 
 :root {
   --size: 16px;
-  --base-font-size: 20px;
-  --base-radius: #95a5a6;
+  --font-size: 20px;
+  --font-size-small: 17px;
+  --radius-small: 2px;
 }
 
 @media screen and (max-width: 1200px) {
   :root {
-    --base-font-size: 18px;
+    --font-size: 18px;
+    --font-size-small: 16px;
+    --size: 14px;
   }
 }
 
 @media screen and (max-width: 600px) {
   :root {
-    --base-font-size: 16px;
+    --font-size: 16px;
+    --font-size-small: 14px;
   }
 }
 
 * {
-  margin: 0;
   padding: 0;
+  margin: 0;
   position: relative;
 }
 
@@ -34,121 +39,187 @@ body {
   touch-action: pan-y;
 }
 
-body, input, textarea {
-  font-family: colfax-web, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
+body,
+input,
+textarea {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
 }
 
 body {
-  color: #000;
   background: #fcfcfd;
+  color: #000;
 }
 
-html, body, .jbx-button, .jbx-input {
-  font-size: var(--base-font-size);
+h1,
+h2,
+h3,
+h4 {
+  line-height: 1;
+  padding: 0;
+  font-variation-settings: 'wdth' 107;
+  color: var(--base-font-color-bright);
+  font-weight: 650;
+}
+
+strong,
+b {
+  font-weight: 500;
+}
+
+.jbx-h1 {
+  font-size: calc(var(--font-size) * 2);
+  font-weight: 700;
+}
+.jbx-h2 {
+  font-size: calc(var(--font-size) * 1.25);
+}
+.jbx-h3 {
+  font-size: calc(var(--font-size) * 1);
+}
+.jbx-h4 {
+  font-size: var(--font-size-small);
+  text-transform: uppercase;
+}
+
+/* base text */
+html,
+body,
+.jbx-button,
+.jbx-input {
+  font-size: var(--font-size);
   line-height: 1;
 }
 
 .jbx-code-snippet {
   border-radius: var(--size);
-  width: 100%;
   font-family: monaco, monospace;
-  font-size: calc(var(--size)  - 3px);
+  border: none;
+  width: 100%;
+  font-size: calc(var(--size) - 3px);
+  line-height: 1.33;
   padding: var(--size) calc(var(--size) * 1.2);
+  background: #ecf0f1;
   color: #34495e;
   resize: none;
-  background: #ecf0f1;
-  border: none;
-  line-height: 1.33;
 }
-
 .jbx-code-snippet:focus {
   outline: none;
 }
 
 .jbx-code-area {
   border-radius: var(--size);
-  width: 100%;
   font-family: monaco, monospace;
-  font-size: calc(var(--size)  - 3px);
+  border: none;
+  width: 100%;
+  font-size: calc(var(--size) - 3px);
+  line-height: 1.33;
   padding: var(--size) calc(var(--size) * 1.2);
+  background: #ecf0f1;
   color: #34495e;
   resize: none;
   min-height: 120px;
-  background: #ecf0f1;
-  border: none;
-  line-height: 1.33;
 }
-
 .jbx-code-area:focus {
   outline: none;
 }
 
 .jbx-button {
+  color: #000;
+  border-radius: var(--radius-small);
   appearance: none;
-  -webkit-user-select: none;
   user-select: none;
   cursor: pointer;
-  padding: 0 calc(var(--size) / 2);
-  height: calc(var(--size) * 2.5);
+  display: inline-block;
   background-color: #eee;
+  box-shadow: 3px 3px 0 #ccc;
+  padding: 0 calc(var(--size) / 2);
   border: none;
-  display: inline-block;
-  box-shadow: 3px 3px #ccc;
+  height: calc(var(--size) * 2.5);
+  transition: top 0.1s, left 0.1s, box-shadow 0.05s;
 }
-
 .jbx-button:active {
   top: 1px;
   left: 1px;
-  box-shadow: 2px 2px #ccc;
+  box-shadow: 1px 1px 0 #ccc;
 }
 
+/* LINKS */
 .jbx-a {
+  cursor: pointer;
   color: #000;
-  box-shadow: var(--accent-color) 0 1px 0, inset var(--accent-color) 0 -2px 0;
+  box-shadow: #0002 0 2px 0;
   font-weight: 500;
   text-decoration: none;
 }
-
-.jbx-a:hover {
-  color: "#34495e";
+.jbx-a::after {
+  content: '↗';
+  color: #0004;
+  font-size: var(--font-size-small);
+  position: relative;
+  top: -1px;
+  right: -1px;
+  transition: top 0.3s, right 0.3s, color 0.3s;
 }
-
-.jbx-h1, .jbx-h2, .jbx-h3, .jbx-h4 {
-  margin: 0;
-  padding: 0;
-  font-weight: 500;
-  line-height: 1;
+.jbx-a:hover,
+.jbx-block-link:hover .jbx-a {
+  box-shadow: var(--accent-color) 0 2px 0;
 }
-
-.jbx-h4 {
-  font-size: calc(var(--base-font-size));
-  letter-spacing: -.11px;
+.jbx-a:hover::after,
+.jbx-block-link:hover .jbx-a::after {
+  top: -3px;
+  right: -3px;
+  color: var(--accent-color);
 }
 
-.jbx-h3 {
-  font-size: calc(var(--base-font-size) * 1.25);
-  letter-spacing: -.22px;
+.jbx-block-link {
+  min-width: 300px;
+  flex: 1;
+  text-decoration: none;
+  color: #000;
+  display: inline-block;
+  padding: var(--size);
 }
-
-.jbx-h2 {
-  font-size: calc(var(--base-font-size) * 1.5);
-  letter-spacing: -.33px;
+a.jbx-a::before,
+.jbx-block-link::before {
+  content: '';
+  display: block;
+  position: absolute;
+  background-color: #ecf0f1;
+  z-index: -1;
+  transition: transform 0.2s, opacity 0.2s;
+  transform: scale(0.98) translatey(4px);
+  opacity: 0;
+  top: -4px;
+  left: -6px;
+  right: -6px;
+  bottom: -4px;
+}
+.jbx-block-link::before {
+  border-radius: 16px;
+}
+a.jbx-a::before {
+  border-radius: 8px;
+}
+a.jbx-a:hover::before,
+.jbx-block-link:hover::before {
+  transform: scale(1) translatey(0);
+  opacity: 1;
 }
 
-.jbx-h1 {
-  font-size: calc(var(--base-font-size) * 2.5);
-  letter-spacing: -1px;
+.jbx-a {
+  display: inline-block;
 }
 
+/* /LINKS */
+
 .jbx-small-text {
-  font-size: calc(var(--base-font-size) * .8);
-  line-height: calc(var(--base-font-size) * .6);
+  font-size: var(--font-size-small);
 }
 
 .jbx-container {
   max-width: 1080px;
-  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);
   margin: 0 auto;
+  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);
 }
 
 .jbx-box {
@@ -156,101 +227,133 @@ html, body, .jbx-button, .jbx-input {
 }
 
 .jbx-inline {
-  flex-flow: wrap;
   flex: 1;
   display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
 }
 
 .jbx-stack {
-  flex-flow: column wrap;
   flex: 1;
   display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+
+.jbx-text {
+  line-height: 1.4;
 }
 
 .jbx-input {
   color: #777;
   -webkit-text-fill-color: #777;
   opacity: 1;
+  flex: 1;
+  display: block;
   appearance: none;
+  border: none;
+  border-radius: var(--radius-small);
   height: calc(var(--size) * 2.5);
-  padding: 0 calc(var(--size) * .5);
   background-color: #eee;
-  border: none;
-  border-radius: 0;
-  flex: 1;
-  display: block;
-  box-shadow: inset 3px 3px #0000000a, inset .5px .5px #00000008;
+  padding: 0 calc(var(--size) * 0.5);
+  box-shadow: inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;
 }
 
 .jbx-dropzone {
   height: 120px;
-  max-width: 320px;
-  text-align: center;
-  color: #000;
-  cursor: pointer;
-  border: 2px dashed #000;
-  flex-direction: column;
   flex: 1;
-  place-content: center;
+  display: flex;
+  text-align: center;
   align-items: center;
+  align-content: center;
+  justify-content: center;
+  flex-direction: column;
+  border: 2px dashed #000;
+  color: #000;
   padding: 0;
-  display: flex;
+  cursor: pointer;
 }
-
 .jbx-dropzone:hover {
   border-color: #999;
 }
-
 .jbx-dropzone span {
   width: 100%;
   cursor: pointer;
 }
-
 .jbx-dropzone input {
+  position: absolute;
+  top: 0;
+  left: 0;
   height: 100%;
   width: 100%;
   opacity: 0;
   cursor: pointer;
-  position: absolute;
-  top: 0;
-  left: 0;
 }
 
 .jbx-range {
+  flex: 1;
   width: 100%;
   appearance: none;
-  background-color: var(--accent-color);
+  background-color: #bdc3c780;
   height: var(--size);
   border-radius: 0;
-  flex: 1;
+  border-radius: var(--radius-small);
 }
 
 .jbx-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
   appearance: none;
   box-shadow: none;
+  border-radius: 0;
   height: calc(var(--size) * 2);
   width: var(--size);
   background-color: #000;
   border: none;
-  border-radius: 0;
+  border-radius: var(--radius-small);
 }
-
 .jbx-range::-moz-range-thumb {
   appearance: none;
   box-shadow: none;
+  border-radius: 0;
   height: calc(var(--size) * 2);
   width: var(--size);
   background-color: #000;
   border: none;
-  border-radius: 0;
+  border-radius: var(--radius-small);
 }
-
 .jbx-range::-webkit-slider-runnable-track {
   appearance: none;
+  /*background-color: yellow;*/
 }
-
 .jbx-range:focus {
   outline: none;
 }
 
-/*# sourceMappingURL=main.css.map */
+.jbx-bullet-container {
+  display: inline-block;
+  margin: -8px 4px -8px 0;
+}
+
+.jbx-bullet {
+  border: 1.5px solid #000;
+  color: #000;
+  text-align: center;
+  line-height: 0.99;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(var(--font-size-small) - 3px);
+  height: calc(var(--size) * 1.25);
+  width: calc(var(--size) * 1.25);
+  border-radius: 100%;
+  top: -2px;
+  font-weight: 500;
+}
+
+.jbx-hr {
+  margin: calc(var(--size) * 2) auto;
+  width: 38.2%;
+  border-radius: 0;
+  border: none;
+  border-top: 2px solid #ecf0f1;
+}

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "jbx",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "author": "hi@javier.xyz",
   "license": "Unlicensed",
   "main": "dist/pkg.cjs.js",
   "module": "dist/pkg.esm.js",
   "types": "dist/types/index.d.ts",
   "exports": {
-    "require": "dist/index.cjs",
-    "import": "dist/index.mjs",
-    "module": "dist/index.esm.js"
+    "require": "./dist/index.cjs",
+    "import": "./dist/index.mjs",
+    "module": "./dist/index.esm.js"
+  },
+  "scripts": {
+    "build": "bunchee ./src/index.tsx && cp ./src/style.css ./dist/main.css",
+    "watch": "bunchee -w ./src/index.tsx"
   },
   "devDependencies": {
     "@types/react": "^18.0.21",
@@ -20,9 +24,5 @@
   },
   "dependencies": {
     "jbx": "^2.4.0"
-  },
-  "scripts": {
-    "build": "bunchee ./src/index.tsx",
-    "watch": "bunchee -w ./src/index.tsx"
   }
-}
+}

package/dist/main.css.map

@@ -1 +0,0 @@
-{"mappings":"AAAA;;;;AAGA;;;;AAMA;;;;;;AAMA;EACE;;;;;AAKF;EACE;;;;;AAKF;;;;;;AAMA;;;;AAIA;;;;AAMA;;;;;AAMA;;;;;AAQA;;;;;;;;;;;;;AAYA;;;;AAIA;;;;;;;;;;;;;;AAaA;;;;AAIA;;;;;;;;;;;;;AAWA;;;;;;AAMA;;;;;;;AAMA;;;;AAIA;;;;;;;AAUA;;;;;AAIA;;;;;AAIA;;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;;;AAMA;;;;AAIA;;;;;;AAOA;;;;;;AAOA;;;;;;;;;;;;;;;AAeA;;;;;;;;;;;;;;;AAeA;;;;AAGA;;;;;AAIA;;;;;;;;;;AA0BA;;;;;;;;;AASA;;;;;;;;;;AAUA;;;;;;;;;;AASA;;;;AAGA","sources":["src/style.css"],"sourcesContent":["html {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n}\n\n:root {\n  --size: 16px;\n  --base-font-size: 20px;\n  --base-radius: #95a5a6;\n}\n\n@media screen and (max-width: 1200px) {\n  :root {\n    --base-font-size: 18px;\n  }\n}\n\n@media screen and (max-width: 600px) {\n  :root {\n    --base-font-size: 16px;\n  }\n}\n\n* {\n  padding: 0;\n  margin: 0;\n  position: relative;\n}\n\nbody {\n  touch-action: pan-y;\n}\n\nbody,\ninput,\ntextarea {\n  font-family: colfax-web, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n  background: #fcfcfd;\n  color: #000;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n  font-size: var(--base-font-size);\n  line-height: 1;\n}\n\n.jbx-code-snippet {\n  border-radius: var(--size);\n  font-family: monaco, monospace;\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #ecf0f1;\n  color: #34495e;\n  resize: none;\n}\n.jbx-code-snippet:focus {\n  outline: none;\n}\n\n.jbx-code-area {\n  border-radius: var(--size);\n  font-family: monaco, monospace;\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #ecf0f1;\n  color: #34495e;\n  resize: none;\n  min-height: 120px;\n}\n.jbx-code-area:focus {\n  outline: none;\n}\n\n.jbx-button {\n  appearance: none;\n  user-select: none;\n  cursor: pointer;\n  display: inline-block;\n  background-color: #eee;\n  box-shadow: 3px 3px 0 #ccc;\n  padding: 0 calc(var(--size) / 2);\n  border: none;\n  height: calc(var(--size) * 2.5);\n}\n.jbx-button:active {\n  top: 1;\n  left: 1;\n  box-shadow: 2px 2px 0 #ccc;\n}\n\n.jbx-a {\n  color: #000;\n  box-shadow: var(--accent-color) 0 1px 0, inset var(--accent-color) 0 -2px 0;\n  font-weight: 500;\n  text-decoration: none;\n}\n.jbx-a:hover {\n  color: '#34495e';\n}\n\n.jbx-h1,\n.jbx-h2,\n.jbx-h3,\n.jbx-h4 {\n  line-height: 1;\n  padding: 0;\n  margin: 0;\n  font-weight: 500;\n}\n\n.jbx-h4 {\n  font-size: calc(var(--base-font-size));\n  letter-spacing: -0.11px;\n}\n.jbx-h3 {\n  font-size: calc(var(--base-font-size) * 1.25);\n  letter-spacing: -0.22px;\n}\n.jbx-h2 {\n  font-size: calc(var(--base-font-size) * 1.5);\n  letter-spacing: -0.33px;\n}\n.jbx-h1 {\n  font-size: calc(var(--base-font-size) * 2.5);\n  letter-spacing: -1px;\n}\n\n.jbx-small-text {\n  font-size: calc(var(--base-font-size) * 0.8);\n  line-height: calc(var(--base-font-size) * 0.6);\n}\n\n.jbx-container {\n  max-width: 1080px;\n  margin: 0 auto;\n  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n  flex: 1;\n}\n\n.jbx-inline {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n}\n\n.jbx-stack {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n}\n\n.jbx-input {\n  color: #777;\n  -webkit-text-fill-color: #777;\n  opacity: 1;\n  flex: 1;\n  display: block;\n  appearance: none;\n  border: none;\n  border-radius: 0;\n  height: calc(var(--size) * 2.5);\n  background-color: #eee;\n  padding: 0 calc(var(--size) * 0.5);\n  box-shadow: inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n.jbx-dropzone {\n  height: 120px;\n  flex: 1;\n  max-width: 320px;\n  display: flex;\n  text-align: center;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  flex-direction: column;\n  border: 2px dashed #000;\n  color: #000;\n  padding: 0;\n  cursor: pointer;\n}\n.jbx-dropzone:hover {\n  border-color: #999;\n}\n.jbx-dropzone span {\n  width: 100%;\n  cursor: pointer;\n}\n.jbx-dropzone input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n\n/*export const Dropzone = Styled.div({\n\n\n\n  },\n  '& input': {\n    position: 'absolute',\n    top: '0',\n    left: '0',\n    height: '100%',\n    width: '100%',\n    opacity: '0',\n    cursor: 'pointer'\n  }\n});*/\n\n.jbx-range {\n  flex: 1;\n  width: 100%;\n  appearance: none;\n  background-color: var(--accent-color);\n  height: var(--size);\n  border-radius: 0;\n}\n\n.jbx-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  border-radius: 0;\n  height: calc(var(--size) * 2);\n  width: var(--size);\n  background-color: #000;\n  border: none;\n}\n.jbx-range::-moz-range-thumb {\n  appearance: none;\n  box-shadow: none;\n  border-radius: 0;\n  height: calc(var(--size) * 2);\n  width: var(--size);\n  background-color: #000;\n  border: none;\n}\n.jbx-range::-webkit-slider-runnable-track {\n  appearance: none;\n}\n.jbx-range:focus {\n  outline: none;\n}\n"],"names":[],"version":3,"file":"main.css.map"}