jbx 2.7.0 → 2.9.0

package/dist/index.d.ts

@@ -131,11 +131,18 @@ declare const CodeTextarea: (props: {
     style?: React.CSSProperties | undefined;
 }) => JSX.Element;
 declare const CheckboxHidden: (props: {
+    isChecked: boolean;
+} & {
     children?: ReactNode;
     style?: React.CSSProperties | undefined;
 }) => JSX.Element;
+declare const Checkbox: ({ label, checked, onChange }: {
+    label: string;
+    checked: boolean;
+    onChange?: ((value: boolean) => void) | undefined;
+}) => React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 declare function Bullet({ value }: {
     value: number;
 }): React.JSX.Element;
 
-export { A, Box, Bullet, Button, CheckboxHidden, CodeSnippet, CodeTextarea, Component, Container, Dropzone, HR, HeaderH1, HeaderH2, HeaderH3, HeaderH4, Inline, Input, Li, MainHeader, Range, SmallText, Space, Stack, Tab, Tabs, Text, Ul };
+export { A, Box, Bullet, Button, Checkbox, CheckboxHidden, CodeSnippet, CodeTextarea, Component, Container, Dropzone, HR, HeaderH1, HeaderH2, HeaderH3, HeaderH4, Inline, Input, Li, MainHeader, Range, SmallText, Space, Stack, Tab, Tabs, Text, Ul };

package/dist/index.js

@@ -2726,72 +2726,61 @@ const CodeSnippet = Component(`jbx-code-snippet`, {}, {
 const CodeTextarea = Component(`jbx-code-area`, {}, {
     element: 'textarea'
 });
-const CheckboxHidden = Component(`jbx-checkbox-hidden`, ({ checked })=>{
+const CheckboxHidden = Component(`jbx-checkbox-hidden`, ({ isChecked })=>{
     return {
         height: SIZE * 2 - 4,
         width: SIZE * 2 - 4,
         paddingTop: 2,
         paddingLeft: 2,
-        backgroundColor: checked ? 'var(--accent-color)' : 'white',
+        backgroundColor: isChecked ? 'var(--accent-color)' : 'white',
         borderRadius: BASE_RADIUS,
-        boxShadow: checked ? 'inset rgba(0, 0, 0, 0.07) 0 0 0 1px' : 'inset rgba(0, 0, 0, 0.33) 0 0 0 1.5px',
+        boxShadow: isChecked ? 'inset rgba(0, 0, 0, 0.07) 0 0 0 1px' : 'inset rgba(0, 0, 0, 0.33) 0 0 0 1.5px',
         cursor: 'pointer'
     };
 });
-// export const Checkbox = function Checkbox({
-//   label,
-//   checked,
-//   onChange
-// }: {
-//   label: string;
-//   checked: boolean;
-//   onChange?: (value: boolean) => void;
-// }) {
-//   return React.createElement(
-//     Inline,
-//     {
-//       onClick: () => {
-//         if (onChange) {
-//           onChange(!checked);
-//         }
-//       },
-//       style: {
-//         alignItems: 'center',
-//         cursor: 'pointer'
-//       }
-//     },
-//     [
-//       React.createElement(
-//         CheckboxHidden,
-//         {
-//           key: 0,
-//           checked
-//         },
-//         React.createElement(
-//           'svg',
-//           {
-//             xmlns: 'http://www.w3.org/2000/svg',
-//             width: SIZE * 2 - 8,
-//             height: SIZE * 2 - 8,
-//             fill: 'none',
-//             stroke: 'currentColor',
-//             strokeLinecap: 'round',
-//             strokeLinejoin: 'round',
-//             strokeWidth: '2',
-//             className: 'feather feather-check',
-//             viewBox: '0 0 24 24',
-//             color: checked ? 'white' : '#ddd'
-//           },
-//           React.createElement('path', {
-//             d: 'M20 6L9 17 4 12'
-//           })
-//         )
-//       ),
-//       React.createElement(Space, { key: 1, w: 0.5 }),
-//       React.createElement(Text, { key: 2, style: { userSelect: 'none' } }, label)
-//     ]
-//   );
-// };
+const Checkbox = function Checkbox({ label, checked, onChange }) {
+    return /*#__PURE__*/ React.createElement(Inline, {
+        // @ts-ignore
+        onClick: ()=>{
+            if (onChange) {
+                onChange(!checked);
+            }
+        },
+        style: {
+            alignItems: 'center',
+            cursor: 'pointer'
+        }
+    }, [
+        /*#__PURE__*/ React.createElement(CheckboxHidden, {
+            key: 0,
+            isChecked: checked
+        }, /*#__PURE__*/ React.createElement('svg', {
+            xmlns: 'http://www.w3.org/2000/svg',
+            width: SIZE * 2 - 8,
+            height: SIZE * 2 - 8,
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            strokeWidth: '2',
+            className: 'feather feather-check',
+            viewBox: '0 0 24 24',
+            color: checked ? 'white' : '#ddd'
+        }, /*#__PURE__*/ React.createElement('path', {
+            d: 'M20 6L9 17 4 12'
+        }))),
+        /*#__PURE__*/ React.createElement(Space, {
+            key: 1,
+            w: 0.5
+        }),
+        /*#__PURE__*/ React.createElement(Text, {
+            key: 2,
+            style: {
+                userSelect: 'none'
+            }
+        }, label)
+    ]);
+};
 function Bullet({ value }) {
     return /*#__PURE__*/ React.createElement("div", {
         className: "jbx-bullet-container"
@@ -2800,4 +2789,4 @@ function Bullet({ value }) {
     }, value));
 }
 
-export { A, Box, Bullet, Button, CheckboxHidden, CodeSnippet, CodeTextarea, Component, Container, Dropzone, HR, HeaderH1, HeaderH2, HeaderH3, HeaderH4, Inline, Input, Li, MainHeader, Range, SmallText, Space, Stack, Tab, Tabs, Text, Ul };
+export { A, Box, Bullet, Button, Checkbox, CheckboxHidden, CodeSnippet, CodeTextarea, Component, Container, Dropzone, HR, HeaderH1, HeaderH2, HeaderH3, HeaderH4, Inline, Input, Li, MainHeader, Range, SmallText, Space, Stack, Tab, Tabs, Text, Ul };

package/dist/main.css

@@ -0,0 +1,369 @@
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+:root {
+  --size: 16px;
+  --font-size: 16px;
+  --font-size-small: 17px;
+  --radius-small: 2px;
+}
+
+@media screen and (max-width: 1200px) {
+  :root {
+    --font-size: 18px;
+    --font-size-small: 16px;
+    --size: 14px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  :root {
+    --font-size: 16px;
+    --font-size-small: 14px;
+  }
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+
+body {
+  touch-action: pan-y;
+}
+
+body,
+input,
+textarea {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+}
+
+body {
+  background: #fcfcfd;
+  color: #000;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  line-height: 1;
+  padding: 0;
+  font-variation-settings: 'wght' 600;
+  font-weight: 600;
+  color: var(--base-font-color-bright);
+}
+h1 {
+  font-variation-settings: 'wdth' 107, 'wght' 650;
+  font-weight: 650;
+}
+
+strong,
+b {
+  font-weight: 500;
+}
+
+.jbx-main-h1 {
+  display: inline-block;
+  background-color: var(--accent-color);
+  font-size: calc(var(--font-size) * 2);
+  padding: 8px;
+}
+
+.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.125);
+}
+.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);
+  font-family: monaco, monospace;
+  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;
+}
+.jbx-code-snippet:focus {
+  outline: none;
+}
+
+.jbx-code-area {
+  border-radius: var(--size);
+  font-family: monaco, monospace;
+  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;
+}
+.jbx-code-area:focus {
+  outline: none;
+}
+
+.jbx-button {
+  color: #000;
+  border-radius: var(--radius-small);
+  appearance: none;
+  user-select: none;
+  cursor: pointer;
+  display: inline-block;
+  background-color: #eee;
+  box-shadow: 3px 3px 0 #ccc;
+  padding: 0 calc(var(--size) / 2);
+  border: none;
+  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: 1px 1px 0 #ccc;
+}
+
+/* LINKS */
+.jbx-a {
+  cursor: pointer;
+  color: #000;
+  box-shadow: #0002 0 2px 0;
+  font-weight: 500;
+  text-decoration: none;
+}
+.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-a:hover,
+.jbx-block-link:hover .jbx-a {
+  box-shadow: var(--accent-color) 0 2px 0;
+}
+.jbx-a:hover::after,
+.jbx-block-link:hover .jbx-a::after {
+  top: -3px;
+  right: -3px;
+  color: var(--accent-color);
+}
+
+.jbx-block-link {
+  min-width: 300px;
+  flex: 1;
+  text-decoration: none;
+  color: #000;
+  display: inline-block;
+  padding: var(--size);
+}
+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-a {
+  display: inline-block;
+}
+
+/* /LINKS */
+
+.jbx-small-text {
+  font-size: var(--font-size-small);
+}
+
+.jbx-container {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);
+}
+
+.jbx-box {
+  flex: 1;
+}
+
+.jbx-inline {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.jbx-stack {
+  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);
+  background-color: #eee;
+  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;
+  flex: 1;
+  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;
+  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;
+}
+
+.jbx-range {
+  flex: 1;
+  width: 100%;
+  appearance: none;
+  background-color: #bdc3c780;
+  height: var(--size);
+  border-radius: 0;
+  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: 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: var(--radius-small);
+}
+.jbx-range::-webkit-slider-runnable-track {
+  appearance: none;
+}
+.jbx-range:focus {
+  outline: none;
+}
+
+.jbx-bullet-container {
+  display: inline-block;
+  margin: -8px 4px -8px 0;
+}
+
+.jbx-bullet {
+  border: 1px solid #0001;
+  color: #000;
+  background-color: #0001;
+  text-align: center;
+  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: -4px;
+  margin-right: 4px;
+}
+
+.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,11 +1,12 @@
 {
   "name": "jbx",
-  "version": "2.7.0",
+  "version": "2.9.0",
   "author": "hi@javier.xyz",
   "license": "Unlicensed",
   "main": "./dist/index.js",
   "type": "module",
   "files": [
+    "./dist/main.css",
     "./dist/index.d.ts",
     "./dist/index.js"
   ],