timvir 0.2.39 → 0.2.42

package/blocks/Code/index.js

@@ -1,52 +1,177 @@
 'use client';
-import * as Page from 'timvir/core';
-import { useBlock } from 'timvir/core';
+import { useBlock, layoutStyles } from 'timvir/core';
 import { codeToHtml } from 'shiki';
 import * as React from 'react';
-import * as Icons from 'react-feather';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/css.ts
-
-// 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);
-      }
-    });
-  });
-  const result = [];
-  for (const keyHash in atomicClasses) {
-    if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
-      result.push(atomicClasses[keyHash]);
+function cx(...args) {
+  let str = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (typeof arg === "string") {
+      str += (str && " ") + arg;
     }
   }
-  result.push(...nonAtomicClasses);
-  return result.join(" ");
-};
-var cx_default = cx;
+  return str;
+}
 
-var theme = "tac6gx6";
+var styleq = {};
+var hasRequiredStyleq;
+function requireStyleq() {
+    if (hasRequiredStyleq) return styleq;
+    hasRequiredStyleq = 1;
+    Object.defineProperty(styleq, "__esModule", {
+        value: true
+    });
+    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;
+        };
+    }
+    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";
-function Code(props, ref) {
-  const block = useBlock(props);
+function Code(props$1, ref) {
+  const block = useBlock(props$1);
   const {
     children,
     language,
-    fullWidth,
     highlightedLines,
     caption,
     className,
@@ -54,36 +179,39 @@ function Code(props, ref) {
   } = block.props;
   const [state, setState] = React.useState({
     settled: false,
-    mouseOver: false,
-    copiedToClipboard: false,
-    /*
-     * Prevent layout shift during (asynchronous) highlighting of the markup by
-     * initializing the html witha  pre/code block with the expected number of
-     * lines.
-     */
-    html: `<pre><code>${children.trim().split("\n").map(() => "\n").join("")}</code></pre>`
+    html: `<pre class="${{
+      className: "timvir-s-1lliihq timvir-s-1ghz6dp timvir-s-1g8o3q3 timvir-s-1d0dlzq"
+    }.className}"><code>${children.trim().split("\n").map(() => "\n").join("")}</code></pre>`
   });
   React.useEffect(() => {
     (async () => {
+      const stylexTransformer = {
+        name: "stylex",
+        pre(node) {
+          this.addClassToHast(node, {
+            className: "timvir-s-1lliihq timvir-s-1ghz6dp timvir-s-1g8o3q3 timvir-s-1d0dlzq"
+          }.className);
+        },
+        line(node, index) {
+          this.addClassToHast(node, {
+            className: "timvir-s-1rg5ohu timvir-s-h8yej3 timvir-s-e193im"
+          }.className);
+          if (highlightedLines?.includes(index)) {
+            this.addClassToHast(node, {
+              className: "timvir-s-15fpjw5"
+            }.className);
+          }
+        }
+      };
       const html = await codeToHtml(children.trim(), {
         lang: language ?? "text",
         themes: {
           light: "github-light",
           dark: "github-dark"
         },
-        decorations: (highlightedLines ?? []).map(line => ({
-          start: {
-            line: line - 1,
-            character: 0
-          },
-          end: {
-            line: line,
-            character: 0
-          },
-          properties: {
-            class: classes.highlightedLine
-          }
-        }))
+        defaultColor: false,
+        cssVariablePrefix: "--timvir-b-Code-shiki-",
+        transformers: [stylexTransformer]
       });
       setState(state => ({
         ...state,
@@ -92,70 +220,35 @@ function Code(props, ref) {
       }));
     })();
   }, [children, language, highlightedLines]);
+  const rootStyleProps = props(layoutStyles.block);
+  const codeStyleProps = {
+    className: "timvir-s-w2csxc timvir-s-6wvzqs timvir-s-sfzzmd timvir-s-1sxf85j timvir-s-15o1dgp timvir-s-idmeni timvir-s-1717udv timvir-s-1etwjqo timvir-s-mkeg23 timvir-s-1y0btm7 timvir-s-j7gikm timvir-s-1d0dlzq"
+  };
+  const captionStyleProps = {
+    className: "timvir-s-1dcheo9 timvir-s-jkpybl timvir-s-vgvpxu timvir-s-lwy1ot"
+  };
   return /*#__PURE__*/jsxs(Root, {
     ref: ref,
-    className: cx_default("timvir-b-Code", !state.settled && "timvir-unsettled", classes.root, fullWidth && Page.fullWidth),
     ...rest,
+    ...rootStyleProps,
+    className: cx("timvir-b-Code", !state.settled && "timvir-unsettled", className, rootStyleProps.className),
+    style: {
+      ...rootStyleProps.style,
+      ...rest.style
+    },
     children: [/*#__PURE__*/jsx("div", {
-      className: cx_default("timvir-b-Code-container", className, theme, classes.code, fullWidth && classes.fullWidth),
-      children: /*#__PURE__*/jsxs("div", {
-        className: "d1513p2s",
-        onMouseEnter: () => {
-          setState(state => ({
-            ...state,
-            mouseOver: true
-          }));
-        },
-        onMouseLeave: () => {
-          setState(state => ({
-            ...state,
-            mouseOver: false,
-            copiedToClipboard: false
-          }));
-        },
-        children: [/*#__PURE__*/jsxs("button", {
-          type: "button",
-          onClick: () => {
-            navigator.clipboard.writeText(children);
-            setState(state => ({
-              ...state,
-              copiedToClipboard: true
-            }));
-          },
-          className: cx_default("b157mkz", state.mouseOver && "b10oxtfo"),
-          children: [/*#__PURE__*/jsx("svg", {
-            width: 48,
-            height: 48,
-            viewBox: "0 0 48 48",
-            className: "s1hdfi6o",
-            children: /*#__PURE__*/jsx("path", {
-              d: "M0 0 H48 V48 Z"
-            })
-          }), state.copiedToClipboard ? /*#__PURE__*/jsx(Icons.Clipboard, {
-            size: "16px"
-          }) : /*#__PURE__*/jsx(Icons.Copy, {
-            size: "16px"
-          })]
-        }), /*#__PURE__*/jsx("div", {
-          className: cx_default(fullWidth ? "d17pltln" : "d793q8f"),
-          dangerouslySetInnerHTML: {
-            __html: state.html
-          }
-        })]
-      })
+      ...codeStyleProps,
+      className: cx("timvir-b-Code-container", codeStyleProps.className),
+      dangerouslySetInnerHTML: {
+        __html: state.html
+      }
     }), caption && /*#__PURE__*/jsx("div", {
-      className: cx_default("timvir-b-Code-caption", classes.caption),
+      ...captionStyleProps,
+      className: cx("timvir-b-Code-caption", captionStyleProps.className),
       children: caption
     })]
   });
 }
 var Code$1 = /*#__PURE__*/React.forwardRef(Code);
-const classes = {
-  root: "r9v2r0l",
-  code: "cs7tint",
-  fullWidth: "fjvaz2s",
-  highlightedLine: "h1xcko1i",
-  caption: "c5vr6r2"
-};
 
 export { Code$1 as Code };

package/blocks/Code/styles.css

@@ -1,16 +1,101 @@
-.tac6gx6{color:#393a34;background-color:#f6f8fa;}.tac6gx6 :is(.comment, .prolog, .doctype, .cdata){color:#999988;font-style:italic;}.tac6gx6 :is(.namespace){opacity:0.7;}.tac6gx6 :is(.string, .attr-value){color:#e3116c;}.tac6gx6 :is(.punctuation, .operator){color:#6cb6ff;}.tac6gx6 :is(.function, .delete, .tag){color:#d73a49;}.tac6gx6 :is(.tag, .selector, .keyword){color:#00009f;}.tac6gx6 :is(.function-variable){color:#6f42c1;}.tac6gx6 :is(.atrule, .keyword, .attr-name, .selector){color:#00a4db;}.tac6gx6 :is(.entity, .url, .symbol, .number, .boolean, .variable, .constant, .property, .regex, .inserted){color:#36acaa;}:root[data-timvir-theme="dark"] .tac6gx6{color:#adbac7;background-color:var(--timvir-secondary-background-color);}:root[data-timvir-theme="dark"] .tac6gx6 :is(.comment, .prolog, .doctype, .cdata){color:#999988;font-style:italic;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.namespace){opacity:0.7;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.string, .attr-value){color:#96d0ff;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.punctuation, .operator){color:#6cb6ff;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.function, .delete, .tag){color:#d73a49;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.tag, .selector, .keyword){color:#8ddb8c;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.function-variable){color:#6f42c1;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.atrule, .keyword, .attr-name, .selector){color:#f47067;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.entity, .url, .symbol, .number, .boolean, .variable, .constant, .property, .regex, .inserted){color:#dcbdfb;}
-
-.d1513p2s{display:-ms-grid;display:grid;-ms-grid-columns:1fr;grid-template-columns:1fr;}
-.b157mkz{--size:48px;z-index:1;position:absolute;top:0;right:0;overflow:hidden;width:var(--size);height:var(--size);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;outline:none;border:none;padding:6px;background:transparent;-webkit-transition:all 0.2s;transition:all 0.2s;cursor:pointer;pointer-events:none;opacity:0;}.b157mkz:hover{color:white;}.b157mkz:hover svg:first-child{-webkit-transform:translate(0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);transform:translate(0, 0);}.b157mkz:active svg:first-child{-webkit-transform:translate(2px, -2px);-moz-transform:translate(2px, -2px);-ms-transform:translate(2px, -2px);transform:translate(2px, -2px);}
-.b10oxtfo{pointer-events:all;opacity:1;}
-.s1hdfi6o{position:absolute;z-index:-1;top:0;right:0;-webkit-transition:all 0.2s;transition:all 0.2s;-webkit-transform:translate(48px, -48px);-moz-transform:translate(48px, -48px);-ms-transform:translate(48px, -48px);transform:translate(48px, -48px);}.s1hdfi6o path{fill:var(--c-p-4);}
-.d17pltln{padding:16px 24px 16px 0;}
-
-:root[data-timvir-theme="dark"] .r9v2r0l .shiki,:root[data-timvir-theme="dark"] .r9v2r0l .shiki span{color:var(--shiki-dark)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;-webkit-text-decoration:var(--shiki-dark-text-decoration)!important;text-decoration:var(--shiki-dark-text-decoration)!important;}
-.cs7tint{overflow-x:auto;contain:content;font-size:0.8em;border-radius:5px;--timvir-b-Code-bleed:calc(var(--timvir-margin, 0px) * 0.6666);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed), 8px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));border:1px solid var(--timvir-border-color);}.cs7tint pre{margin:0;padding:16px 0;background-color:var(--timvir-secondary-background-color)!important;}.cs7tint pre code{display:block;}.cs7tint pre code .line{display:inline-block;position:relative;width:100%;}.cs7tint pre .line{padding-inline:var(--timvir-b-Code-inlinePadding);}
-.fjvaz2s{display:-ms-grid;display:grid;border-radius:0;box-shadow:none;margin-inline:0;-ms-grid-auto-rows:min-content;grid-auto-rows:min-content;-ms-grid-columns:[le] 0 [lc] 1fr [rc] 0 [re];grid-template-columns:[le] 0 [lc] 1fr [rc] 0 [re];-ms-grid-column-gap:16px;grid-column-gap:16px;}.fjvaz2s:hover{box-shadow:none;}@media (min-width: 60rem){.fjvaz2s{-ms-grid-columns:[le] 1fr [lc] minmax(0, 48rem) [rc] 1fr [re];grid-template-columns:[le] 1fr [lc] minmax(0, 48rem) [rc] 1fr [re];-ms-grid-column-gap:24px;grid-column-gap:24px;}}.fjvaz2s>*{grid-column:lc/re;}
-.lchll0h{padding-inline:var(--timvir-b-Code-inlinePadding);}
-.h1xcko1i{background-color:#ffe10044;}:root[data-timvir-theme="dark"] .h1xcko1i{background-color:rgba(174, 124, 20, 0.15);}
-.ll2b9hx{display:inline-block;width:var(--timvir-b-Code-bleed);color:var(--timvir-secondary-text-color);text-align:right;padding-inline:4px;}
-.c5vr6r2{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:0.3em;}
+@layer priority1 {
+  .timvir-s-15o1dgp {
+    --timvir-b-Code-bleed: calc(var(--timvir-margin, 0) * .6666);
+  }
 
+  .timvir-s-idmeni {
+    --timvir-b-Code-inlinePadding: max(var(--timvir-b-Code-bleed), 8px);
+  }
+}
+
+@layer priority2 {
+  .timvir-s-1etwjqo {
+    margin: 0 calc(-1 * var(--timvir-b-Code-bleed));
+  }
+
+  .timvir-s-1ghz6dp {
+    margin: 0;
+  }
+
+  .timvir-s-1717udv {
+    padding: 0;
+  }
+
+  .timvir-s-1g8o3q3 {
+    padding: 16px 0;
+  }
+}
+
+@layer priority3 {
+  .timvir-s-j7gikm {
+    border-color: var(--timvir-border-color);
+  }
+
+  .timvir-s-1sxf85j {
+    border-radius: 5px;
+  }
+
+  .timvir-s-1y0btm7 {
+    border-style: solid;
+  }
+
+  .timvir-s-mkeg23 {
+    border-width: 1px;
+  }
+
+  .timvir-s-e193im {
+    padding-inline: var(--timvir-b-Code-inlinePadding);
+  }
+}
+
+@layer priority4 {
+  .timvir-s-15fpjw5 {
+    background-color: var(--timvir-highlight-background-color);
+  }
+
+  .timvir-s-1d0dlzq {
+    background-color: var(--timvir-secondary-background-color);
+  }
+
+  .timvir-s-vgvpxu {
+    color: var(--timvir-secondary-text-color);
+  }
+
+  .timvir-s-6wvzqs {
+    contain: content;
+  }
+
+  .timvir-s-1lliihq {
+    display: block;
+  }
+
+  .timvir-s-1rg5ohu {
+    display: inline-block;
+  }
+
+  .timvir-s-1dcheo9 {
+    font-size: .8125rem;
+  }
+
+  .timvir-s-sfzzmd {
+    font-size: .8em;
+  }
+
+  .timvir-s-jkpybl {
+    line-height: 1.1875;
+  }
+}
+
+@layer priority5 {
+  .timvir-s-lwy1ot {
+    margin-top: .3em;
+  }
+
+  .timvir-s-w2csxc {
+    overflow-x: auto;
+  }
+
+  .timvir-s-h8yej3 {
+    width: 100%;
+  }
+}

package/blocks/ColorBar/docs/index.mdx

@@ -19,14 +19,15 @@ A `ColorBar` is a horizontal arrangement of swatches.
       "#6550B0",
       "#5642A6",
     ]}
+    style={{ margin: 0 }}
   />
 </Exhibit>
 
 <Exhibit>
-  <ColorBar values={["#a0dbc2", "#60c19f", "#1a896b", "#0e6d54"]} />
+  <ColorBar values={["#a0dbc2", "#60c19f", "#1a896b", "#0e6d54"]} style={{ margin: 0 }} />
 </Exhibit>
 
-<Code language="jsx" caption="Pass an array of color values to the component." highlightedLines={[5]}>
+<Code language="jsx" caption="Pass an array of color values to the component." highlightedLines={[4]}>
   <Sample variant="basic" as="source" />
 </Code>
 
@@ -38,6 +39,7 @@ The ColorBar works comfortably with as few as two colors and as many as 20
       { value: "#FFE4A0", name: "Yellow Submarine", ancestry: "Yellow 001" },
       { value: "#A67908", name: "Yellow Spaceship", ancestry: "Yellow 999", contrastValue: "white" },
     ]}
+    style={{ margin: 0 }}
   />
 </Exhibit>
 
@@ -65,6 +67,7 @@ The ColorBar works comfortably with as few as two colors and as many as 20
       "#AB7E15",
       "#A67908",
     ]}
+    style={{ margin: 0 }}
   />
 </Exhibit>
 
@@ -83,6 +86,7 @@ All text colors are taken from the **Gray** palette.
       { value: "rgba(0, 0, 13, 0.69)", name: "???? (unnamed)", ancestry: "Gray 03", contrastValue: "white" },
       { value: "rgba(0, 0, 13, 0.49)", name: "textSecondary", ancestry: "Gray 05" },
     ]}
+    style={{ margin: 0 }}
   />
 </Exhibit>
 <Exhibit caption="Gray Color Palette (00 – 09)" style={{ margin: "-12px 0 20px 0" }}>
@@ -99,6 +103,7 @@ All text colors are taken from the **Gray** palette.
       { value: "rgba(0, 0, 13, 0.19)", name: "Gray 08", contrastValue: "black" },
       { value: "rgba(0, 0, 13, 0.09)", name: "Gray 09", contrastValue: "black" },
     ]}
+    style={{ margin: 0 }}
   />
 </Exhibit>
 
@@ -124,5 +129,6 @@ Wrap a `<ColorBar>` in a `<Exhibit>` to add a caption to it. The caption can eve
       "#0D6CA1",
       "#09486C",
     ]}
+    style={{ margin: 0 }}
   />
 </Exhibit>