jbx 2.10.0 → 2.11.0

package/README.md

@@ -1,29 +1,75 @@
 # JBX
 
+The little component toolkit behind the tools on [javier.xyz](https://javier.xyz). Plain
+components with a class each, one stylesheet, no runtime dependencies.
+
 ```
-npm i jbx@latest capsize@latest styled-components@latest
+npm i jbx
 ```
 
+## Styles
+
+Either import the stylesheet and set your own accent color:
+
+```js
+import 'jbx/main.css';
+```
+
+```css
+:root {
+  --accent-color: #f1c40f;
+}
+```
+
+Or let the `JBX` component do both:
+
+```jsx
+<JBX accent="#f1c40f" />
+```
+
+`JBX` has no hooks and no dependencies, so it renders inside a React server component too.
+
+## Use
+
 ```jsx
 import { JBX, MainHeader, Text, Space, Container } from 'jbx';
 
 function App() {
   return (
     <Container>
+      <JBX accent="#f1c40f" />
       <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.
-      </Text>
-      <Space h={2} />
-      <Text>
-        Tool that creates animated CSS transitions. Add sprites and get the code ready to paste in
-        your site.
-      </Text>
+      <Text>React component for creating blurred backgrounds.</Text>
     </Container>
   );
 }
+```
+
+## Spacing
+
+Everything is measured in units of `--size` (16px, 14px on smaller screens). `<Space h={2} />`,
+`<Inline gap={1} />`, `<Box padding={[0.5, 1]} />` all speak the same scale, and `space(n)` gives
+you the raw css value if you need it somewhere else.
+
+## Making your own
+
+`Component` is the whole idea — a class name, optional styles, optional element:
 
-export default App;
+```jsx
+const Sprite = Component(
+  `jbx-img`,
+  ({ height, width }) => ({ height, width, imageRendering: 'pixelated' }),
+  { element: 'img', styleProps: ['height', 'width'] }
+);
+```
+
+`styleProps` lists the props the style function consumes so they don't end up as DOM attributes.
+
+## Develop
+
+```
+npm run dev        # rebuild on change
+npm run typecheck
+npm test           # renders every export, fails on any React warning
 ```

package/dist/JBX.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+type JBXProps = {
+    accent?: string;
+};
+/**
+ * Drops the JBX base stylesheet into the page, optionally setting the accent
+ * color. Use this when you don't want to wire up a css import:
+ *
+ *   <JBX accent="#f1c40f" />
+ *
+ * The alternative is `import 'jbx/main.css'` plus your own `--accent-color`.
+ * Doing both is harmless — the rules are identical.
+ *
+ * No hooks and no dependencies, so it also renders inside a React server
+ * component.
+ */
+export declare function JBX({ accent }: JBXProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=JBX.d.ts.map

package/dist/JBX.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JBX.d.ts","sourceRoot":"","sources":["../src/JBX.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,QAAQ,GAAG;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,QAAQ,qBAIvC"}

package/dist/JBX.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CSS } from './generated/css.js';
+/**
+ * Drops the JBX base stylesheet into the page, optionally setting the accent
+ * color. Use this when you don't want to wire up a css import:
+ *
+ *   <JBX accent="#f1c40f" />
+ *
+ * The alternative is `import 'jbx/main.css'` plus your own `--accent-color`.
+ * Doing both is harmless — the rules are identical.
+ *
+ * No hooks and no dependencies, so it also renders inside a React server
+ * component.
+ */
+export function JBX({ accent }) {
+    const css = accent ? `${CSS}\n:root {\n  --accent-color: ${accent};\n}\n` : CSS;
+    return React.createElement("style", { "data-jbx": "", dangerouslySetInnerHTML: { __html: css } });
+}
+//# sourceMappingURL=JBX.js.map

package/dist/JBX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JBX.js","sourceRoot":"","sources":["../src/JBX.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAMzC;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAY;IACtC,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG,gCAAgC,MAAM,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;IAEhF,OAAO,2CAAgB,EAAE,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,GAAI,CAAC;AACzE,CAAC"}

package/dist/classList.d.ts

@@ -0,0 +1,2 @@
+export declare function classList(classes: any[] | Record<string, any>): string;
+//# sourceMappingURL=classList.d.ts.map

package/dist/classList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"classList.d.ts","sourceRoot":"","sources":["../src/classList.tsx"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,UAQ7D"}

package/dist/classList.js

@@ -0,0 +1,11 @@
+export function classList(classes) {
+    if (Array.isArray(classes)) {
+        return classes.filter((e) => e).join(' ');
+    }
+    else {
+        return Object.keys(classes)
+            .filter((e) => classes[e])
+            .join(' ');
+    }
+}
+//# sourceMappingURL=classList.js.map

package/dist/classList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"classList.js","sourceRoot":"","sources":["../src/classList.tsx"],"names":[],"mappings":"AAAA,MAAM,UAAU,SAAS,CAAC,OAAoC;IAC5D,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;QAC3B,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC5C,CAAC;SAAM,CAAC;QACN,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;aACxB,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;aACzB,IAAI,CAAC,GAAG,CAAC,CAAC;IACf,CAAC;AACH,CAAC"}

package/dist/components/Layout.d.ts

@@ -0,0 +1,12 @@
+import React, { CSSProperties } from 'react';
+import { SpacingProps } from '../spacing.js';
+type BoxProps = SpacingProps & {
+    children?: React.ReactNode;
+    smallText?: boolean;
+    flex?: number;
+    minWidth?: number | string;
+    style?: CSSProperties;
+};
+export declare function Box({ children, smallText, flex, minWidth, style, ...spacing }: BoxProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Layout.d.ts.map

package/dist/components/Layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../src/components/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAuB,YAAY,EAAE,MAAM,eAAe,CAAC;AAGlE,KAAK,QAAQ,GAAG,YAAY,GAAG;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,OAAO,EAAE,EAAE,QAAQ,qBAkBvF"}

package/dist/components/Layout.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { spacingPropsToStyle } from '../spacing.js';
+import { classList } from '../classList.js';
+export function Box({ children, smallText, flex, minWidth, style, ...spacing }) {
+    const styles = {
+        flex,
+        minWidth,
+        ...spacingPropsToStyle(spacing),
+        ...style
+    };
+    const className = classList({
+        'jbx-box': true,
+        'jbx-small-text': smallText
+    });
+    return (React.createElement("div", { className: className, style: styles }, children));
+}
+//# sourceMappingURL=Layout.js.map

package/dist/components/Layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../src/components/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAgB,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAU5C,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,OAAO,EAAY;IACtF,MAAM,MAAM,GAAG;QACb,IAAI;QACJ,QAAQ;QACR,GAAG,mBAAmB,CAAC,OAAO,CAAC;QAC/B,GAAG,KAAK;KACT,CAAC;IAEF,MAAM,SAAS,GAAG,SAAS,CAAC;QAC1B,SAAS,EAAE,IAAI;QACf,gBAAgB,EAAE,SAAS;KAC5B,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,IACrC,QAAQ,CACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/MoreExperiments.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type MoreExperimentsProps = {
+    exclude?: string;
+};
+export declare function MoreExperiments({ exclude }: MoreExperimentsProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=MoreExperiments.d.ts.map

package/dist/components/MoreExperiments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoreExperiments.d.ts","sourceRoot":"","sources":["../../src/components/MoreExperiments.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA8CxC,KAAK,oBAAoB,GAAG;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,EAAE,oBAAoB,qBAuBhE"}

package/dist/components/MoreExperiments.js

@@ -0,0 +1,59 @@
+import React, { Fragment } from 'react';
+import { Text, Space, Ul, Li, A } from '../primitives.js';
+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;
+export 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 (React.createElement(Li, { key: project.url },
+            React.createElement(A, { href: project.url }, project.name),
+            `, `,
+            project.description,
+            "."));
+    });
+    return (React.createElement(Fragment, null,
+        React.createElement(Text, null, "More experiments"),
+        React.createElement(Space, { h: 1 }),
+        React.createElement(Ul, null, items)));
+}
+//# sourceMappingURL=MoreExperiments.js.map

package/dist/components/MoreExperiments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoreExperiments.js","sourceRoot":"","sources":["../../src/components/MoreExperiments.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,kBAAkB,CAAC;AAE1D,MAAM,YAAY,GAAG;IACnB;QACE,IAAI,EAAE,OAAO;QACb,WAAW,EAAE,6DAA6D;QAC1E,GAAG,EAAE,0BAA0B;KAChC;IACD;QACE,IAAI,EAAE,eAAe;QACrB,WAAW,EAAE,2DAA2D;QACxE,GAAG,EAAE,kCAAkC;KACxC;IACD;QACE,IAAI,EAAE,WAAW;QACjB,WAAW,EACT,wFAAwF;QAC1F,GAAG,EAAE,uBAAuB;KAC7B;IACD;QACE,IAAI,EAAE,SAAS;QACf,WAAW,EACT,2FAA2F;QAC7F,GAAG,EAAE,4BAA4B;KAClC;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,WAAW,EAAE,gDAAgD;QAC7D,GAAG,EAAE,mCAAmC;KACzC;IACD;QACE,IAAI,EAAE,aAAa;QACnB,WAAW,EAAE,6EAA6E;QAC1F,GAAG,EAAE,qBAAqB;KAC3B;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,WAAW,EAAE,0DAA0D;QACvE,GAAG,EAAE,oCAAoC;KAC1C;CACO,CAAC;AAEX,MAAM,IAAI,GAAG,CAAC,CAAC;AACf,MAAM,QAAQ,GAAG,CAAC,CAAC;AAMnB,MAAM,UAAU,eAAe,CAAC,EAAE,OAAO,EAAwB;IAC/D,MAAM,QAAQ,GAAG,OAAO;QACtB,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAClE,CAAC,CAAC,YAAY,CAAC;IAEjB,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE;QACpF,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;QACzD,OAAO,CACL,oBAAC,EAAE,IAAC,GAAG,EAAE,OAAO,CAAC,GAAG;YAClB,oBAAC,CAAC,IAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAG,OAAO,CAAC,IAAI,CAAK;YACvC,IAAI;YACJ,OAAO,CAAC,WAAW;gBACjB,CACN,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,QAAQ;QACP,oBAAC,IAAI,2BAAwB;QAC7B,oBAAC,KAAK,IAAC,CAAC,EAAE,CAAC,GAAI;QACf,oBAAC,EAAE,QAAE,KAAK,CAAM,CACP,CACZ,CAAC;AACJ,CAAC"}

package/dist/generated/css.d.ts

@@ -0,0 +1,2 @@
+export declare const CSS = "html {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n}\n\n:root {\n  --size: 16px;\n  --font-size: 16px;\n  --font-size-small: 17px;\n  --radius-small: 2px;\n}\n\n@media screen and (max-width: 1200px) {\n  :root {\n    --font-size: 18px;\n    --font-size-small: 16px;\n    --size: 14px;\n  }\n}\n\n@media screen and (max-width: 600px) {\n  :root {\n    --font-size: 16px;\n    --font-size-small: 14px;\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: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n  background: #fcfcfd;\n  color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n  line-height: 1;\n  padding: 0;\n  font-variation-settings: 'wght' 600;\n  font-weight: 600;\n  color: var(--base-font-color-bright);\n}\nh1 {\n  font-variation-settings: 'wdth' 107, 'wght' 650;\n  font-weight: 650;\n}\n\nstrong,\nb {\n  font-weight: 500;\n}\n\n.jbx-main-h1 {\n  display: inline-block;\n  background-color: var(--accent-color);\n  font-size: calc(var(--font-size) * 2);\n  padding: 8px;\n}\n\n.jbx-h1 {\n  font-size: calc(var(--font-size) * 2);\n  font-weight: 700;\n}\n.jbx-h2 {\n  font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n  font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n  font-size: var(--font-size-small);\n  text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n  font-size: var(--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  color: #000;\n  border-radius: var(--radius-small);\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  transition: top 0.1s, left 0.1s, box-shadow 0.05s;\n}\n.jbx-button:active {\n  top: 1px;\n  left: 1px;\n  box-shadow: 1px 1px 0 #ccc;\n}\n\n/* LINKS */\n.jbx-a {\n  cursor: pointer;\n  color: #000;\n  box-shadow: #0002 0 2px 0;\n  font-weight: 500;\n  text-decoration: none;\n}\n.jbx-a::after {\n  content: '\u2197';\n  color: #0004;\n  font-size: var(--font-size-small);\n  position: relative;\n  top: -1px;\n  right: -1px;\n  transition: top 0.3s, right 0.3s, color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n  box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n  top: -3px;\n  right: -3px;\n  color: var(--accent-color);\n}\n\n.jbx-block-link {\n  min-width: 300px;\n  flex: 1;\n  text-decoration: none;\n  color: #000;\n  display: inline-block;\n  padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n  content: '';\n  display: block;\n  position: absolute;\n  background-color: #ecf0f1;\n  z-index: -1;\n  transition: transform 0.2s, opacity 0.2s;\n  transform: scale(0.98) translatey(4px);\n  opacity: 0;\n  top: -4px;\n  left: -6px;\n  right: -6px;\n  bottom: -4px;\n}\n.jbx-block-link::before {\n  border-radius: 16px;\n}\na.jbx-a::before {\n  border-radius: 8px;\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n  transform: scale(1) translatey(0);\n  opacity: 1;\n}\n\n.jbx-a {\n  display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n  font-size: var(--font-size-small);\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-text {\n  line-height: 1.4;\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: var(--radius-small);\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  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.jbx-range {\n  flex: 1;\n  width: 100%;\n  appearance: none;\n  background-color: #bdc3c780;\n  height: var(--size);\n  border-radius: 0;\n  border-radius: var(--radius-small);\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  border-radius: var(--radius-small);\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  border-radius: var(--radius-small);\n}\n.jbx-range::-webkit-slider-runnable-track {\n  appearance: none;\n}\n.jbx-range:focus {\n  outline: none;\n}\n\n.jbx-bullet-container {\n  display: inline-block;\n  margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n  border: 1px solid #0001;\n  color: #000;\n  background-color: #0001;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(var(--font-size-small) - 3px);\n  height: calc(var(--size) * 1.25);\n  width: calc(var(--size) * 1.25);\n  border-radius: 100%;\n  top: -2px;\n  margin-right: 2px;\n}\n\n.jbx-hr {\n  margin: calc(var(--size) * 2) auto;\n  width: 38.2%;\n  border-radius: 0;\n  border: none;\n  border-top: 2px solid #ecf0f1;\n}\n";
+//# sourceMappingURL=css.d.ts.map

package/dist/generated/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/generated/css.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,GAAG,unNAAknN,CAAC"}

package/dist/generated/css.js

@@ -0,0 +1,3 @@
+// Generated by scripts/build-css.mjs from src/style.css. Do not edit.
+export const CSS = "html {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n}\n\n:root {\n  --size: 16px;\n  --font-size: 16px;\n  --font-size-small: 17px;\n  --radius-small: 2px;\n}\n\n@media screen and (max-width: 1200px) {\n  :root {\n    --font-size: 18px;\n    --font-size-small: 16px;\n    --size: 14px;\n  }\n}\n\n@media screen and (max-width: 600px) {\n  :root {\n    --font-size: 16px;\n    --font-size-small: 14px;\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: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n  background: #fcfcfd;\n  color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n  line-height: 1;\n  padding: 0;\n  font-variation-settings: 'wght' 600;\n  font-weight: 600;\n  color: var(--base-font-color-bright);\n}\nh1 {\n  font-variation-settings: 'wdth' 107, 'wght' 650;\n  font-weight: 650;\n}\n\nstrong,\nb {\n  font-weight: 500;\n}\n\n.jbx-main-h1 {\n  display: inline-block;\n  background-color: var(--accent-color);\n  font-size: calc(var(--font-size) * 2);\n  padding: 8px;\n}\n\n.jbx-h1 {\n  font-size: calc(var(--font-size) * 2);\n  font-weight: 700;\n}\n.jbx-h2 {\n  font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n  font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n  font-size: var(--font-size-small);\n  text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n  font-size: var(--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  color: #000;\n  border-radius: var(--radius-small);\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  transition: top 0.1s, left 0.1s, box-shadow 0.05s;\n}\n.jbx-button:active {\n  top: 1px;\n  left: 1px;\n  box-shadow: 1px 1px 0 #ccc;\n}\n\n/* LINKS */\n.jbx-a {\n  cursor: pointer;\n  color: #000;\n  box-shadow: #0002 0 2px 0;\n  font-weight: 500;\n  text-decoration: none;\n}\n.jbx-a::after {\n  content: '↗';\n  color: #0004;\n  font-size: var(--font-size-small);\n  position: relative;\n  top: -1px;\n  right: -1px;\n  transition: top 0.3s, right 0.3s, color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n  box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n  top: -3px;\n  right: -3px;\n  color: var(--accent-color);\n}\n\n.jbx-block-link {\n  min-width: 300px;\n  flex: 1;\n  text-decoration: none;\n  color: #000;\n  display: inline-block;\n  padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n  content: '';\n  display: block;\n  position: absolute;\n  background-color: #ecf0f1;\n  z-index: -1;\n  transition: transform 0.2s, opacity 0.2s;\n  transform: scale(0.98) translatey(4px);\n  opacity: 0;\n  top: -4px;\n  left: -6px;\n  right: -6px;\n  bottom: -4px;\n}\n.jbx-block-link::before {\n  border-radius: 16px;\n}\na.jbx-a::before {\n  border-radius: 8px;\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n  transform: scale(1) translatey(0);\n  opacity: 1;\n}\n\n.jbx-a {\n  display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n  font-size: var(--font-size-small);\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-text {\n  line-height: 1.4;\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: var(--radius-small);\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  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.jbx-range {\n  flex: 1;\n  width: 100%;\n  appearance: none;\n  background-color: #bdc3c780;\n  height: var(--size);\n  border-radius: 0;\n  border-radius: var(--radius-small);\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  border-radius: var(--radius-small);\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  border-radius: var(--radius-small);\n}\n.jbx-range::-webkit-slider-runnable-track {\n  appearance: none;\n}\n.jbx-range:focus {\n  outline: none;\n}\n\n.jbx-bullet-container {\n  display: inline-block;\n  margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n  border: 1px solid #0001;\n  color: #000;\n  background-color: #0001;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(var(--font-size-small) - 3px);\n  height: calc(var(--size) * 1.25);\n  width: calc(var(--size) * 1.25);\n  border-radius: 100%;\n  top: -2px;\n  margin-right: 2px;\n}\n\n.jbx-hr {\n  margin: calc(var(--size) * 2) auto;\n  width: 38.2%;\n  border-radius: 0;\n  border: none;\n  border-top: 2px solid #ecf0f1;\n}\n";
+//# sourceMappingURL=css.js.map

package/dist/generated/css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/generated/css.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,MAAM,CAAC,MAAM,GAAG,GAAG,+mNAA+mN,CAAC"}

package/dist/index.d.ts

@@ -1,153 +1,6 @@
-import React, { CSSProperties, ReactNode } from 'react';
-
-type BoxProps = {
-    children?: React.ReactNode;
-    smallText?: true | false;
-    padding?: number;
-    flex?: number;
-    style?: CSSProperties;
-};
-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;
-}): (props: T & {
-    children?: ReactNode;
-    style?: CSSProperties;
-}) => JSX.Element;
-declare const Container: (props: {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const Text: (props: {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const SmallText: (props: {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const Button: (props: React.HTMLProps<HTMLButtonElement> & {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const Input: (props: React.HTMLProps<HTMLInputElement> & {
-    children?: ReactNode;
-} & {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const Range: (props: React.HTMLProps<HTMLInputElement> & {
-    children?: ReactNode;
-} & {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const HeaderH1: (props: {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const HeaderH2: (props: {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const HeaderH3: (props: {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const HeaderH4: (props: {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const HR: (props: {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const MainHeader: (props: {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const A: (props: React.HTMLProps<HTMLAnchorElement> & {
-    children?: ReactNode;
-    href: string;
-} & {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-type SpaceProps = {
-    inline?: boolean;
-    h?: number;
-    w?: number;
-};
-declare const Space: (props: SpaceProps & {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-type InlineProps = {
-    v?: number;
-    h?: number;
-    gap?: number;
-    wrap?: boolean;
-};
-declare const Inline: (props: InlineProps & {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const Stack: (props: {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const Dropzone: (props: {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const Ul: (props: {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const Li: (props: {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const Tabs: (props: {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-type TabProps = {
-    info?: boolean;
-    active?: boolean;
-};
-declare const Tab: (props: TabProps & {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const CodeSnippet: (props: {
-    children?: ReactNode;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
-declare const CodeTextarea: (props: {
-    children?: ReactNode;
-    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, 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 };
+export * from './primitives.js';
+export { space } from './spacing.js';
+export { JBX } from './JBX.js';
+export { Box } from './components/Layout.js';
+export { MoreExperiments } from './components/MoreExperiments.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC"}