timvir 0.2.38 → 0.2.42

package/blocks/Font/index.js

@@ -1,57 +1,181 @@
-import { useMDXComponents } from '@mdx-js/react';
-import * as builtins from 'timvir/builtins';
+'use client';
+import { useArticleComponents, layoutStyles } from 'timvir/core';
 import * as React from 'react';
 import * as Icons from 'react-feather';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/css.ts
+function cx(...args) {
+  let str = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (typeof arg === "string") {
+      str += (str && " ") + arg;
+    }
+  }
+  return str;
+}
 
-// src/cx.ts
-var cx = function cx2() {
-  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
-  const atomicClasses = {};
-  const nonAtomicClasses = [];
-  presentClassNames.forEach((arg) => {
-    const individualClassNames = arg ? arg.split(" ") : [];
-    individualClassNames.forEach((className) => {
-      if (className.startsWith("atm_")) {
-        const [, keyHash] = className.split("_");
-        atomicClasses[keyHash] = className;
-      } else {
-        nonAtomicClasses.push(className);
-      }
+var styleq = {};
+var hasRequiredStyleq;
+function requireStyleq() {
+    if (hasRequiredStyleq) return styleq;
+    hasRequiredStyleq = 1;
+    Object.defineProperty(styleq, "__esModule", {
+        value: true
     });
-  });
-  const result = [];
-  for (const keyHash in atomicClasses) {
-    if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
-      result.push(atomicClasses[keyHash]);
+    styleq.styleq = void 0;
+    var cache = new WeakMap();
+    var compiledKey = '$$css';
+    function createStyleq(options) {
+        var disableCache;
+        var disableMix;
+        var transform;
+        if (options != null) {
+            disableCache = options.disableCache === true;
+            disableMix = options.disableMix === true;
+            transform = options.transform;
+        }
+        return function styleq() {
+            var definedProperties = [];
+            var className = '';
+            var inlineStyle = null;
+            var debugString = '';
+            var nextCache = disableCache ? null : cache;
+            var styles = new Array(arguments.length);
+            for(var i = 0; i < arguments.length; i++){
+                styles[i] = arguments[i];
+            }
+            while(styles.length > 0){
+                var possibleStyle = styles.pop();
+                if (possibleStyle == null || possibleStyle === false) {
+                    continue;
+                }
+                if (Array.isArray(possibleStyle)) {
+                    for(var _i = 0; _i < possibleStyle.length; _i++){
+                        styles.push(possibleStyle[_i]);
+                    }
+                    continue;
+                }
+                var style = transform != null ? transform(possibleStyle) : possibleStyle;
+                if (style.$$css != null) {
+                    var classNameChunk = '';
+                    if (nextCache != null && nextCache.has(style)) {
+                        var cacheEntry = nextCache.get(style);
+                        if (cacheEntry != null) {
+                            classNameChunk = cacheEntry[0];
+                            debugString = cacheEntry[2];
+                            definedProperties.push.apply(definedProperties, cacheEntry[1]);
+                            nextCache = cacheEntry[3];
+                        }
+                    } else {
+                        var definedPropertiesChunk = [];
+                        for(var prop in style){
+                            var value = style[prop];
+                            if (prop === compiledKey) {
+                                var compiledKeyValue = style[prop];
+                                if (compiledKeyValue !== true) {
+                                    debugString = debugString ? compiledKeyValue + '; ' + debugString : compiledKeyValue;
+                                }
+                                continue;
+                            }
+                            if (typeof value === 'string' || value === null) {
+                                if (!definedProperties.includes(prop)) {
+                                    definedProperties.push(prop);
+                                    if (nextCache != null) {
+                                        definedPropertiesChunk.push(prop);
+                                    }
+                                    if (typeof value === 'string') {
+                                        classNameChunk += classNameChunk ? ' ' + value : value;
+                                    }
+                                }
+                            } else {
+                                console.error("styleq: ".concat(prop, " typeof ").concat(String(value), " is not \"string\" or \"null\"."));
+                            }
+                        }
+                        if (nextCache != null) {
+                            var weakMap = new WeakMap();
+                            nextCache.set(style, [
+                                classNameChunk,
+                                definedPropertiesChunk,
+                                debugString,
+                                weakMap
+                            ]);
+                            nextCache = weakMap;
+                        }
+                    }
+                    if (classNameChunk) {
+                        className = className ? classNameChunk + ' ' + className : classNameChunk;
+                    }
+                } else {
+                    if (disableMix) {
+                        if (inlineStyle == null) {
+                            inlineStyle = {};
+                        }
+                        inlineStyle = Object.assign({}, style, inlineStyle);
+                    } else {
+                        var subStyle = null;
+                        for(var _prop in style){
+                            var _value = style[_prop];
+                            if (_value !== undefined) {
+                                if (!definedProperties.includes(_prop)) {
+                                    if (_value != null) {
+                                        if (inlineStyle == null) {
+                                            inlineStyle = {};
+                                        }
+                                        if (subStyle == null) {
+                                            subStyle = {};
+                                        }
+                                        subStyle[_prop] = _value;
+                                    }
+                                    definedProperties.push(_prop);
+                                    nextCache = null;
+                                }
+                            }
+                        }
+                        if (subStyle != null) {
+                            inlineStyle = Object.assign(subStyle, inlineStyle);
+                        }
+                    }
+                }
+            }
+            var styleProps = [
+                className,
+                inlineStyle,
+                debugString
+            ];
+            return styleProps;
+        };
     }
-  }
-  result.push(...nonAtomicClasses);
-  return result.join(" ");
-};
-var cx_default = cx;
+    var styleq$1 = styleq.styleq = createStyleq();
+    styleq$1.factory = createStyleq;
+    return styleq;
+}
+var styleqExports = requireStyleq();
+function props(...styles) {
+    const [className, style, dataStyleSrc] = styleqExports.styleq(styles);
+    const result = {};
+    if (className != null && className !== '') {
+        result.className = className;
+    }
+    if (style != null && Object.keys(style).length > 0) {
+        result.style = style;
+    }
+    if (dataStyleSrc != null && dataStyleSrc !== '') {
+        result['data-style-src'] = dataStyleSrc;
+    }
+    return result;
+}
 
-/**
- * The underlying DOM element which is rendered by this component.
- */
 const Root = "div";
-const classes = {
-  meta: "mby32tn"
-};
-function Font(props, ref) {
-  const components = {
-    ...builtins,
-    ...useMDXComponents()
-  };
+function Font(props$1, ref) {
+  const components = useArticleComponents();
   const {
     name,
     font,
     info,
-    className,
     children,
     ...rest
-  } = props;
+  } = props$1;
   const [contentRef, setContentRef] = React.useState(null);
   const [fontSizeRef, setFontSizeRef] = React.useState(null);
   const [infoRef, setInfoRef] = React.useState(null);
@@ -60,8 +184,8 @@ function Font(props, ref) {
       const computedStyle = window.getComputedStyle(contentRef);
       const intervalId = setInterval(() => {
         if (fontSizeRef) {
-          const fontSize = parseInt(computedStyle.fontSize, 10);
-          const lineHeight = parseInt(computedStyle.lineHeight, 10);
+          const fontSize = Number.parseInt(computedStyle.fontSize, 10);
+          const lineHeight = Number.parseInt(computedStyle.lineHeight, 10);
           const innerText = `${name} – ${Math.round(fontSize)}px / ${Math.round(lineHeight / fontSize * 1000) / 1000}`;
           if (fontSizeRef.innerText !== innerText) {
             fontSizeRef.innerText = innerText;
@@ -72,64 +196,81 @@ function Font(props, ref) {
         clearInterval(intervalId);
       };
     }
-  }, [name, contentRef]);
-  return /*#__PURE__*/React.createElement(Root, {
+  }, [name, contentRef, fontSizeRef]);
+  const rootStyleProps = props(layoutStyles.block);
+  const fontStyleProps = {
+    className: "timvir-s-1a2a7pz timvir-s-1hx0egp timvir-s-126k92a timvir-s-1mzt3pk"
+  };
+  return /*#__PURE__*/jsxs(Root, {
     ref: ref,
-    className: cx_default(className),
-    ...rest
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.meta
-  }, /*#__PURE__*/React.createElement(components.h3, {
-    className: "fc7ivp5"
-  }, /*#__PURE__*/React.createElement("span", {
-    ref: setFontSizeRef
-  }, name)), info && /*#__PURE__*/React.createElement("div", {
-    className: "de58upx",
-    onClick: () => {
-      if (infoRef && contentRef) {
-        // const contentParent = contentRef.parentElement;
-        const infoParent = infoRef.parentElement;
-        if (infoParent.style.height === "0px") {
-          infoParent.style.height = `${infoRef.getBoundingClientRect().height}px`;
-          infoParent.style.opacity = "1";
-
-          // contentParent.style.height = "0px";
-          // contentParent.style.opacity = "0";
-        } else {
-          infoParent.style.height = "0px";
-          infoParent.style.opacity = "0";
-
-          // contentParent.style.height = window.getComputedStyle(contentRef).height;
-          // contentParent.style.opacity = "1";
-        }
-      }
-    }
-  }, /*#__PURE__*/React.createElement(Icons.Info, {
-    size: "1.1em"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "d10949ho"
-  }, info && /*#__PURE__*/React.createElement("div", {
-    className: "d1o2du3z",
+    ...rest,
+    ...rootStyleProps,
+    className: cx(rest.className, rootStyleProps.className),
     style: {
-      height: 0,
-      opacity: 0
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: setInfoRef,
-    className: "d1o9zhgl"
-  }, info)), /*#__PURE__*/React.createElement("div", {
-    className: "ddlplux",
-    style: {
-      height: "auto",
-      opacity: 1
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: setContentRef,
-    contentEditable: true,
-    spellCheck: "false",
-    className: cx_default(font.className, "dw285p4"),
-    style: font.style
-  }, children || "The quick brown fox jumps over the lazy dog"))));
+      ...rootStyleProps.style,
+      ...rest.style
+    },
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "timvir-s-78zum5 timvir-s-1pha0wt timvir-s-1nrrp6k timvir-s-117nqv4 timvir-s-1bsk9n",
+      children: [/*#__PURE__*/jsx(components.h3, {
+        className: "timvir-s-a519c1",
+        children: /*#__PURE__*/jsx("span", {
+          ref: setFontSizeRef,
+          children: name
+        })
+      }), info && /*#__PURE__*/jsx("div", {
+        className: "timvir-s-1ypdohk timvir-s-gmrl4 timvir-s-1o7uuvo",
+        onClick: () => {
+          if (infoRef && contentRef) {
+            const infoParent = infoRef.parentElement;
+            if (infoParent.style.height === "0px") {
+              infoParent.style.height = `${infoRef.getBoundingClientRect().height}px`;
+              infoParent.style.opacity = "1";
+            } else {
+              infoParent.style.height = "0px";
+              infoParent.style.opacity = "0";
+            }
+          }
+        },
+        children: /*#__PURE__*/jsx(Icons.Info, {
+          size: "1.1em",
+          className: "timvir-s-1n2onr6 timvir-s-s7f9wi"
+        })
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "timvir-s-78zum5 timvir-s-dt5ytf",
+      children: [info && /*#__PURE__*/jsx("div", {
+        className: "timvir-s-b3r6kr timvir-s-104cjix",
+        style: {
+          height: 0,
+          opacity: 0
+        },
+        children: /*#__PURE__*/jsx("div", {
+          ref: setInfoRef,
+          className: "timvir-s-1k5rvim",
+          children: info
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: "timvir-s-b3r6kr timvir-s-104cjix",
+        style: {
+          height: "auto",
+          opacity: 1
+        },
+        children: /*#__PURE__*/jsx("div", {
+          ref: setContentRef,
+          contentEditable: true,
+          spellCheck: "false",
+          ...fontStyleProps,
+          className: cx(fontStyleProps.className, font.className),
+          style: {
+            ...fontStyleProps.style,
+            ...font.style
+          },
+          children: children || "The quick brown fox jumps over the lazy dog"
+        })
+      })]
+    })]
+  });
 }
 var Font$1 = /*#__PURE__*/React.forwardRef(Font);
 

package/blocks/Font/samples/basic.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Font } from "..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Font>>;
-export default function Sample(props: Props): React.JSX.Element;
+export default function Sample(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/blocks/Font/samples/timvir/body1.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Font } from "../..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Font>>;
-export default function Sample(props: Props): React.JSX.Element;
+export default function Sample(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/blocks/Font/samples/timvir/caption.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Font } from "../..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Font>>;
-export default function Sample(props: Props): React.JSX.Element;
+export default function Sample(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/blocks/Font/samples/timvir/h1.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Font } from "../..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Font>>;
-export default function Sample(props: Props): React.JSX.Element;
+export default function Sample(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/blocks/Font/samples/timvir/h2.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Font } from "../..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Font>>;
-export default function Sample(props: Props): React.JSX.Element;
+export default function Sample(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/blocks/Font/samples/timvir/h3.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Font } from "../..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Font>>;
-export default function Sample(props: Props): React.JSX.Element;
+export default function Sample(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/blocks/Font/samples/timvir/h4.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Font } from "../..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Font>>;
-export default function Sample(props: Props): React.JSX.Element;
+export default function Sample(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/blocks/Font/styles.css

@@ -1,9 +1,83 @@
-.mby32tn{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;font-size:0.9rem;font-weight:bold;-webkit-transition:all 0.2s;transition:all 0.2s;}
-.fc7ivp5{margin:0 auto 0 0;}
-.de58upx{cursor:pointer;}.de58upx:hover{color:var(--c-p-4);opacity:1;}.de58upx>svg{position:relative;top:2px;}
-.d10949ho{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-.d1o2du3z{overflow:hidden;-webkit-transition:height 0.2s,opacity 0.2s 0.1s;transition:height 0.2s,opacity 0.2s 0.1s;}
-.d1o9zhgl{padding:0 0 16px;}
-.ddlplux{overflow:hidden;-webkit-transition:height 0.2s,opacity 0.2s 0.1s;transition:height 0.2s,opacity 0.2s 0.1s;}
-.dw285p4{outline:none;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
+@layer priority1 {
+  .timvir-s-a519c1 {
+    margin: 0 auto 0 0;
+  }
 
+  .timvir-s-1k5rvim {
+    padding: 0 0 16px;
+  }
+}
+
+@layer priority2 {
+  .timvir-s-1a2a7pz {
+    outline: none;
+  }
+
+  .timvir-s-b3r6kr {
+    overflow: hidden;
+  }
+
+  .timvir-s-1bsk9n {
+    transition: all .2s;
+  }
+
+  .timvir-s-104cjix {
+    transition: height .2s, opacity .2s .1s;
+  }
+}
+
+@layer priority3 {
+  .timvir-s-1pha0wt {
+    align-items: baseline;
+  }
+
+  .timvir-s-1ypdohk {
+    cursor: pointer;
+  }
+
+  .timvir-s-78zum5 {
+    display: flex;
+  }
+
+  .timvir-s-dt5ytf {
+    flex-direction: column;
+  }
+
+  .timvir-s-1nrrp6k {
+    font-size: .9rem;
+  }
+
+  .timvir-s-117nqv4 {
+    font-weight: bold;
+  }
+
+  .timvir-s-1mzt3pk {
+    overflow-wrap: break-word;
+  }
+
+  .timvir-s-1n2onr6 {
+    position: relative;
+  }
+
+  .timvir-s-1hx0egp {
+    user-select: text;
+  }
+
+  .timvir-s-126k92a {
+    white-space: pre-wrap;
+  }
+
+  .timvir-s-gmrl4:hover {
+    color: var(--c-p-4);
+  }
+
+  .timvir-s-1o7uuvo:hover {
+    opacity: 1;
+  }
+}
+
+@layer priority4 {
+  .timvir-s-s7f9wi {
+    top: 2px;
+  }
+}

package/blocks/Grid/docs/index.mdx

@@ -46,16 +46,16 @@ import { fullWidth } from "timvir/core";
 Combine `<Grid>` with the `<Exhibit>` component.
 
 <Grid>
-  <Exhibit>
+  <Exhibit style={{ margin: 0, gridColumn: "initial" }}>
     <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
   </Exhibit>
-  <Exhibit>
+  <Exhibit style={{ margin: 0, gridColumn: "initial" }}>
     <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
   </Exhibit>
-  <Exhibit>
+  <Exhibit style={{ margin: 0, gridColumn: "initial" }}>
     <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
   </Exhibit>
-  <Exhibit>
+  <Exhibit style={{ margin: 0, gridColumn: "initial" }}>
     <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
   </Exhibit>
 </Grid>