jbx 2.9.0 → 2.11.0

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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"}

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/dist/primitives.d.ts

@@ -0,0 +1,139 @@
+import React, { ReactNode, CSSProperties } from 'react';
+import { SpacingProps } from './spacing.js';
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+type ComponentConfig = {
+    /** Tag to render. Defaults to `div`. */
+    element?: string;
+    /** Extra props always passed to the element. */
+    props?: Record<string, unknown>;
+    /**
+     * Props the style function consumes. They are used to compute the style and
+     * then kept off the DOM, so `<Inline gap={1} />` doesn't emit `gap="1"`.
+     */
+    styleProps?: readonly string[];
+};
+type StyleSource<T> = CSSProperties | ((props: T) => CSSProperties);
+export declare function Component<T>(className: string, styleSrc?: StyleSource<T>, config?: ComponentConfig): (props: T & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const Container: (props: DivProps & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const Text: (props: DivProps & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const SmallText: (props: DivProps & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const Button: (props: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const Input: (props: React.InputHTMLAttributes<HTMLInputElement> & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const Range: (props: React.InputHTMLAttributes<HTMLInputElement> & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+type HeadingProps = React.HTMLAttributes<HTMLHeadingElement>;
+export declare const HeaderH1: (props: HeadingProps & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const HeaderH2: (props: HeadingProps & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const HeaderH3: (props: HeadingProps & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const HeaderH4: (props: HeadingProps & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const HR: (props: React.HTMLAttributes<HTMLHRElement> & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const MainHeader: (props: HeadingProps & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const A: (props: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+} & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const Space: (props: DivProps & {
+    inline?: boolean;
+    h?: number;
+    w?: number;
+} & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const Inline: (props: DivProps & SpacingProps & {
+    wrap?: boolean;
+} & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const Stack: (props: DivProps & SpacingProps & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const Dropzone: (props: DivProps & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const Ul: (props: React.HTMLAttributes<HTMLUListElement> & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const Li: (props: React.LiHTMLAttributes<HTMLLIElement> & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const Tabs: (props: DivProps & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const Tab: (props: DivProps & {
+    info?: boolean;
+    active?: boolean;
+} & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const CodeSnippet: (props: React.HTMLAttributes<HTMLPreElement> & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const CodeTextarea: (props: React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare const CheckboxHidden: (props: DivProps & {
+    isChecked?: boolean;
+} & {
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export declare function Checkbox({ label, checked, onChange }: {
+    label: string;
+    checked: boolean;
+    onChange?: (value: boolean) => void;
+}): React.JSX.Element;
+export declare function Bullet({ value }: {
+    value: number;
+}): React.JSX.Element;
+export {};
+//# sourceMappingURL=primitives.d.ts.map

package/dist/primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"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"}

package/dist/primitives.js

@@ -0,0 +1,102 @@
+import React, { createElement } from 'react';
+import { space, spacingPropsToStyle, BASE_RADIUS, SPACING_PROPS } from './spacing.js';
+export function Component(className, styleSrc = {}, config = {}) {
+    const { element = `div`, props: otherProps, styleProps } = config;
+    return function MakeComponent({ children, style, ...props }) {
+        const calculatedStyle = typeof styleSrc === 'function' ? styleSrc(props) : styleSrc;
+        const elementProps = styleProps
+            ? Object.fromEntries(Object.entries(props).filter(([key]) => !styleProps.includes(key)))
+            : props;
+        return createElement(element, {
+            className,
+            // The caller's `style` wins over the computed one.
+            style: { ...calculatedStyle, ...style },
+            ...otherProps,
+            ...elementProps
+        }, children);
+    };
+}
+export const Container = Component(`jbx-container`);
+export const Text = Component(`jbx-text`);
+export const SmallText = Component(`jbx-small-text`);
+export const Button = Component(`jbx-button`, {}, { element: 'button' });
+export const Input = Component(`jbx-input`, {}, { element: 'input' });
+export const Range = Component(`jbx-range`, {}, {
+    element: 'input',
+    props: {
+        type: 'range'
+    }
+});
+export const HeaderH1 = Component(`jbx-h${1}`, {}, { element: 'h1' });
+export const HeaderH2 = Component(`jbx-h${2}`, {}, { element: 'h2' });
+export const HeaderH3 = Component(`jbx-h${3}`, {}, { element: 'h3' });
+export const HeaderH4 = Component(`jbx-h${4}`, {}, { element: 'h4' });
+export const HR = Component(`jbx-hr`, {}, { element: 'hr' });
+export const MainHeader = Component(`jbx-main-h1`, {}, { element: 'h1' });
+export const A = Component(`jbx-a`, {}, { element: 'a' });
+export const Space = Component(`jbx-space`, ({ inline, h, w }) => ({
+    display: inline ? 'inline-block' : 'block',
+    height: h === undefined ? undefined : space(h),
+    width: w === undefined ? undefined : space(w)
+}), { styleProps: ['inline', 'h', 'w'] });
+export const Inline = Component(`jbx-inline`, ({ wrap = true, ...spacing }) => ({
+    ...spacingPropsToStyle(spacing),
+    flexWrap: wrap ? 'wrap' : 'nowrap'
+}), { styleProps: [...SPACING_PROPS, 'wrap'] });
+export const Stack = Component(`jbx-stack`, (props) => spacingPropsToStyle(props), {
+    styleProps: SPACING_PROPS
+});
+export const Dropzone = Component(`jbx-dropzone`);
+export const Ul = Component(`jbx-ul`, {
+    margin: 0,
+    padding: `0 0 0 ${space(0.25)}`
+}, { element: 'ul' });
+export const Li = Component(`jbx-li`, {
+    margin: `0 0 0 ${space(1)}`,
+    padding: `${space(0.25)} 0`
+}, { element: 'li' });
+export const Tabs = Component(`jbx-tabs`);
+export const Tab = Component(`jbx-tabs--tab`, ({ info, active }) => ({
+    userSelect: 'none',
+    cursor: 'pointer',
+    backgroundColor: active ? '#000' : info ? '#fff' : '#ecf0f1',
+    color: active ? '#fff' : '#000',
+    padding: space(0.5),
+    paddingLeft: info ? 0 : space(0.5)
+}), { styleProps: ['info', 'active'] });
+export const CodeSnippet = Component(`jbx-code-snippet`, {}, { element: 'pre' });
+export const CodeTextarea = Component(`jbx-code-area`, {}, { element: 'textarea' });
+export const CheckboxHidden = Component(`jbx-checkbox-hidden`, ({ isChecked }) => ({
+    height: `calc(${space(2)} - 4px)`,
+    width: `calc(${space(2)} - 4px)`,
+    paddingTop: 2,
+    paddingLeft: 2,
+    backgroundColor: isChecked ? 'var(--accent-color)' : 'white',
+    borderRadius: BASE_RADIUS,
+    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'
+}), { styleProps: ['isChecked'] });
+export function Checkbox({ label, checked, onChange }) {
+    function toggle() {
+        if (onChange)
+            onChange(!checked);
+    }
+    return (React.createElement(Inline, { role: "checkbox", "aria-checked": checked, tabIndex: 0, onClick: toggle, onKeyDown: (event) => {
+            if (event.key === ' ' || event.key === 'Enter') {
+                event.preventDefault();
+                toggle();
+            }
+        }, style: { alignItems: 'center', cursor: 'pointer' } },
+        React.createElement(CheckboxHidden, { isChecked: checked },
+            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", className: "feather feather-check", viewBox: "0 0 24 24", color: checked ? 'white' : '#ddd', style: { height: `calc(${space(2)} - 8px)`, width: `calc(${space(2)} - 8px)` } },
+                React.createElement("path", { d: "M20 6L9 17 4 12" }))),
+        React.createElement(Space, { w: 0.5 }),
+        React.createElement(Text, { style: { userSelect: 'none' } }, label)));
+}
+export function Bullet({ value }) {
+    return (React.createElement("div", { className: "jbx-bullet-container" },
+        React.createElement("div", { className: "jbx-bullet" }, value)));
+}
+//# sourceMappingURL=primitives.js.map

package/dist/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.js","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"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"}

package/dist/spacing.d.ts

@@ -0,0 +1,22 @@
+import type { CSSProperties } from 'react';
+/**
+ * One spacing unit, as a css value rather than a number, so javascript-driven
+ * spacing tracks the responsive `--size` variable in style.css the same way
+ * the stylesheet does.
+ */
+export declare function space(n: number): string;
+export declare const BASE_RADIUS = "calc(var(--size) / 3)";
+export type SpacingProps = {
+    /** Vertical margin, in spacing units. */
+    v?: number;
+    /** Horizontal margin, in spacing units. */
+    h?: number;
+    /** Gap between children, in spacing units. */
+    gap?: number;
+    /** Padding, in spacing units. An array is joined like the css shorthand. */
+    padding?: number | number[];
+};
+/** Keys `spacingPropsToStyle` consumes, so they can be kept off the DOM. */
+export declare const SPACING_PROPS: readonly ["v", "h", "gap", "padding"];
+export declare function spacingPropsToStyle({ v, h, gap, padding }: SpacingProps): CSSProperties;
+//# sourceMappingURL=spacing.d.ts.map

package/dist/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAEvC;AAED,eAAO,MAAM,WAAW,0BAA0B,CAAC;AAEnD,MAAM,MAAM,YAAY,GAAG;IACzB,yCAAyC;IACzC,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC7B,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,aAAa,uCAAwC,CAAC;AAEnE,wBAAgB,mBAAmB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,YAAY,GAAG,aAAa,CAevF"}

package/dist/spacing.js

@@ -0,0 +1,27 @@
+/**
+ * One spacing unit, as a css value rather than a number, so javascript-driven
+ * spacing tracks the responsive `--size` variable in style.css the same way
+ * the stylesheet does.
+ */
+export function space(n) {
+    return `calc(var(--size) * ${n})`;
+}
+export const BASE_RADIUS = `calc(var(--size) / 3)`;
+/** Keys `spacingPropsToStyle` consumes, so they can be kept off the DOM. */
+export const SPACING_PROPS = ['v', 'h', 'gap', 'padding'];
+export function spacingPropsToStyle({ v, h, gap, padding }) {
+    return {
+        marginLeft: h === undefined ? undefined : space(h),
+        marginRight: h === undefined ? undefined : space(h),
+        marginTop: v === undefined ? undefined : space(v),
+        marginBottom: v === undefined ? undefined : space(v),
+        gap: gap === undefined ? undefined : space(gap),
+        padding: padding === undefined
+            ? undefined
+            : [padding]
+                .flat()
+                .map((value) => space(value))
+                .join(' ')
+    };
+}
+//# sourceMappingURL=spacing.js.map

package/dist/spacing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.js","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,UAAU,KAAK,CAAC,CAAS;IAC7B,OAAO,sBAAsB,CAAC,GAAG,CAAC;AACpC,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,uBAAuB,CAAC;AAanD,4EAA4E;AAC5E,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,CAAU,CAAC;AAEnE,MAAM,UAAU,mBAAmB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,OAAO,EAAgB;IACtE,OAAO;QACL,UAAU,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QAClD,WAAW,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACnD,SAAS,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACjD,YAAY,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACpD,GAAG,EAAE,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC;QAC/C,OAAO,EACL,OAAO,KAAK,SAAS;YACnB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,CAAC,OAAO,CAAC;iBACN,IAAI,EAAE;iBACN,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;iBAC5B,IAAI,CAAC,GAAG,CAAC;KACnB,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,40 +1,57 @@
 {
   "name": "jbx",
-  "version": "2.9.0",
+  "version": "2.11.0",
   "author": "hi@javier.xyz",
   "license": "Unlicensed",
-  "main": "./dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/javierbyte/jbx.git"
+  },
   "type": "module",
-  "files": [
-    "./dist/main.css",
-    "./dist/index.d.ts",
-    "./dist/index.js"
+  "sideEffects": [
+    "*.css"
   ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    "types": "./dist/index.d.ts",
-    "module": "./dist/index.js"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./main.css": "./dist/main.css",
+    "./dist/main.css": "./dist/main.css",
+    "./package.json": "./package.json"
   },
-  "watch": {
-    "build": {
-      "patterns": [
-        "src"
-      ],
-      "extensions": "tsx,ts,css",
-      "quiet": false
-    }
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
   },
-  "devDependencies": {
-    "@types/react": "^18.2.21",
-    "bunchee": "^3.7.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^5.2.2"
+  "scripts": {
+    "css": "node ./scripts/build-css.mjs",
+    "prebuild": "npm run css",
+    "build": "tsc -p tsconfig.build.json",
+    "dev": "npm run css && tsc -p tsconfig.build.json --watch",
+    "pretypecheck": "npm run css",
+    "typecheck": "tsc --noEmit",
+    "pretest": "npm run build",
+    "test": "node ./scripts/smoke.mjs",
+    "prepublishOnly": "npm run typecheck && npm test"
   },
-  "dependencies": {
-    "npm-watch": "^0.11.0"
+  "peerDependencies": {
+    "react": "^17 || ^18 || ^19"
   },
-  "scripts": {
-    "build": "bunchee ./src/index.tsx && cp ./src/style.css ./dist/main.css",
-    "watch": "npm-watch"
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript": "^5.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
   }
-}
+}

package/src/JBX.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { CSS } from './generated/css.js';
+
+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 function JBX({ accent }: JBXProps) {
+  const css = accent ? `${CSS}\n:root {\n  --accent-color: ${accent};\n}\n` : CSS;
+
+  return <style data-jbx="" dangerouslySetInnerHTML={{ __html: css }} />;
+}

package/src/classList.tsx

@@ -0,0 +1,9 @@
+export function classList(classes: any[] | Record<string, any>) {
+  if (Array.isArray(classes)) {
+    return classes.filter((e) => e).join(' ');
+  } else {
+    return Object.keys(classes)
+      .filter((e) => classes[e])
+      .join(' ');
+  }
+}

package/src/components/Layout.tsx

@@ -0,0 +1,31 @@
+import React, { CSSProperties } from 'react';
+import { spacingPropsToStyle, SpacingProps } from '../spacing.js';
+import { classList } from '../classList.js';
+
+type BoxProps = SpacingProps & {
+  children?: React.ReactNode;
+  smallText?: boolean;
+  flex?: number;
+  minWidth?: number | string;
+  style?: CSSProperties;
+};
+
+export function Box({ children, smallText, flex, minWidth, style, ...spacing }: BoxProps) {
+  const styles = {
+    flex,
+    minWidth,
+    ...spacingPropsToStyle(spacing),
+    ...style
+  };
+
+  const className = classList({
+    'jbx-box': true,
+    'jbx-small-text': smallText
+  });
+
+  return (
+    <div className={className} style={styles}>
+      {children}
+    </div>
+  );
+}

package/src/components/MoreExperiments.tsx

@@ -0,0 +1,74 @@
+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'
+  }
+] as const;
+
+const seed = 0;
+const maxItems = 5;
+
+type MoreExperimentsProps = {
+  exclude?: string;
+};
+
+export function MoreExperiments({ exclude }: MoreExperimentsProps) {
+  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 (
+      <Li key={project.url}>
+        <A href={project.url}>{project.name}</A>
+        {`, `}
+        {project.description}.
+      </Li>
+    );
+  });
+
+  return (
+    <Fragment>
+      <Text>More experiments</Text>
+      <Space h={1} />
+      <Ul>{items}</Ul>
+    </Fragment>
+  );
+}

package/src/generated/css.ts

@@ -0,0 +1,2 @@
+// 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";

package/src/index.tsx

@@ -0,0 +1,6 @@
+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';