jbx 2.8.0 → 2.10.0

package/dist/index.d.ts

@@ -9,6 +9,11 @@ type BoxProps = {
 };
 declare function Box({ children, smallText, padding, flex, style }: BoxProps): React.JSX.Element;
 
+type MoreExperimentsProps = {
+    exclude?: string;
+};
+declare function MoreExperiments({ exclude }: MoreExperimentsProps): React.JSX.Element;
+
 declare function Component<T>(className: string, styleSrc?: {}, config?: {
     element?: string;
     props?: any;
@@ -131,11 +136,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, MoreExperiments, Range, SmallText, Space, Stack, Tab, Tabs, Text, Ul };

package/dist/index.js

@@ -2627,6 +2627,60 @@ function Box({ children, smallText, padding, flex, style }) {
     }, children);
 }
 
+const PROJECT_DATA = [
+    {
+        name: 'PINTR',
+        description: 'Tool that turns your images into plotter-like line drawings',
+        url: 'https://javier.xyz/pintr'
+    },
+    {
+        name: 'Visual Center',
+        description: 'Tool that help you visually center objects in a container',
+        url: 'https://javier.xyz/visual-center'
+    },
+    {
+        name: 'Brutalita',
+        description: 'Grid based font editor and font. Create fonts in the browser and export OpenType files',
+        url: 'https://brutalita.com'
+    },
+    {
+        name: 'Morphin',
+        description: 'Create animated CSS transitions. Add sprites and get the code ready to paste in your site',
+        url: 'https://javier.xyz/morphin'
+    },
+    {
+        name: 'Droste Creator',
+        description: 'Create recursive images with the droste effect',
+        url: 'https://javier.xyz/droste-creator'
+    },
+    {
+        name: 'Sombras.app',
+        description: 'Create art with shadows. Draw shadows and get 3D objects that project them.',
+        url: 'https://sombras.app'
+    },
+    {
+        name: 'Cohesive Colors',
+        description: 'Tool that can help you to create cohesive color palettes',
+        url: 'https://javier.xyz/cohesive-colors'
+    }
+];
+const seed = 0;
+const maxItems = 5;
+function MoreExperiments({ exclude }) {
+    const projects = exclude ? PROJECT_DATA.filter((project)=>!project.url.includes(exclude)) : PROJECT_DATA;
+    const items = new Array(Math.min(maxItems, projects.length)).fill('').map((_0, idx)=>{
+        const project = projects[(seed + idx) % projects.length];
+        return /*#__PURE__*/ React.createElement(Li, {
+            key: project.url
+        }, /*#__PURE__*/ React.createElement(A, {
+            href: project.url
+        }, project.name), `, `, project.description, ".");
+    });
+    return /*#__PURE__*/ React.createElement(reactExports.Fragment, null, /*#__PURE__*/ React.createElement(Text, null, "More experiments"), /*#__PURE__*/ React.createElement(Space, {
+        h: 1
+    }), /*#__PURE__*/ React.createElement(Ul, null, items));
+}
+
 function Component(className, styleSrc = {}, config = {}) {
     const { element = `div`, props: otherProps } = config;
     return function MakeComponent({ children, style = {}, ...props }) {
@@ -2726,72 +2780,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 +2843,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, MoreExperiments, Range, SmallText, Space, Stack, Tab, Tabs, Text, Ul };

package/dist/main.css

@@ -356,8 +356,8 @@ a.jbx-a:hover::before,
   height: calc(var(--size) * 1.25);
   width: calc(var(--size) * 1.25);
   border-radius: 100%;
-  top: -4px;
-  margin-right: 4px;
+  top: -2px;
+  margin-right: 2px;
 }
 
 .jbx-hr {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbx",
-  "version": "2.8.0",
+  "version": "2.10.0",
   "author": "hi@javier.xyz",
   "license": "Unlicensed",
   "main": "./dist/index.js",