timvir 0.2.38 → 0.2.42

package/blocks/ColorBar/index.js

@@ -1,90 +1,245 @@
 'use client';
 import { Swatch } from 'timvir/blocks';
-import { useBlock } from 'timvir/core';
+import { useBlock, layoutStyles } from 'timvir/core';
 import * as React from 'react';
+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";
-function ColorBar(props, ref) {
-  const block = useBlock(props);
+function ColorBar(props$1, ref) {
+  const block = useBlock(props$1);
   const {
     values,
-    className,
     ...rest
   } = block.props;
   const [selected, setSelected] = React.useState(undefined);
-  return /*#__PURE__*/React.createElement(Root, {
+  const rootStyleProps = props(layoutStyles.block, styles.root);
+  return /*#__PURE__*/jsxs(Root, {
     ref: ref,
-    className: cx_default(className, classes.root, selected && tweaks.selected),
-    ...rest
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.bar,
+    ...rest,
+    ...rootStyleProps,
+    className: cx(rest.className, rootStyleProps.className),
     style: {
-      opacity: selected ? 0 : 1
-    }
-  }, values.map((value, i) => /*#__PURE__*/React.createElement("div", {
-    key: i,
-    className: classes.value
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      background: typeof value === "string" ? value : value.value
+      ...rootStyleProps.style,
+      ...rest.style
     },
-    onClick: () => {
-      setSelected(value);
-    }
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: classes.overlay
-  }, /*#__PURE__*/React.createElement(Swatch, {
-    ...(typeof selected === "string" ? {
-      value: selected
-    } : {
-      value: selected?.value ?? ""
-    }),
-    onMouseLeave: () => {
-      setSelected(undefined);
-    }
-  })));
+    children: [/*#__PURE__*/jsx("div", {
+      className: "timvir-s-rvj5dj timvir-s-1sdr0u7 timvir-s-dz4c1r",
+      style: {
+        opacity: selected ? 0 : 1
+      },
+      children: values.map((value, i, self) => /*#__PURE__*/jsx("div", {
+        className: "timvir-s-1vqgdyp timvir-s-1iyjqo2 timvir-s-rvj5dj timvir-s-13b6k1y timvir-s-1ypdohk timvir-s-zkaem6 timvir-s-15311qs timvir-s-inzabm timvir-s-1bxid8z",
+        children: /*#__PURE__*/jsx("div", {
+          ...props(i === 0 ? styles.firstChild : null, i === self.length - 1 ? styles.lastChild : null, styles.valueInner),
+          style: {
+            background: typeof value === "string" ? value : value.value
+          },
+          onClick: () => {
+            setSelected(value);
+          }
+        })
+      }, i))
+    }), selected !== undefined && /*#__PURE__*/jsx("div", {
+      className: "timvir-s-10l6tqk timvir-s-wa60dl timvir-s-3m8u43 timvir-s-u96u03 timvir-s-1cb1t30 timvir-s-oegz02",
+      children: /*#__PURE__*/jsx(Swatch, {
+        ...(typeof selected === "string" ? {
+          value: selected
+        } : {
+          value: selected.value
+        }),
+        style: {
+          margin: 0
+        },
+        onMouseLeave: () => {
+          setSelected(undefined);
+        }
+      })
+    })]
+  });
 }
 var ColorBar$1 = /*#__PURE__*/React.forwardRef(ColorBar);
-const tweaks = {
-  selected: "s4sqb81"
-};
-const classes = {
-  root: "r1f19pie",
-  bar: "b15hqsfj",
-  value: "v1uw85xw",
-  overlay: "o1823law"
+const styles = {
+  root: {
+    kVAEAm: "timvir-s-1n2onr6",
+    $$css: true
+  },
+  valueInner: {
+    kmkexE: "timvir-s-zhuw26",
+    kaIpWk: "timvir-s-nfsnhl",
+    kogj98: "timvir-s-1ehn4u0",
+    kwh8RV: "timvir-s-32zglm",
+    $$css: true
+  },
+  firstChild: {
+    "--timvir-b-ColorBar-value-borderRadiusDefault": "timvir-s-16gz6n8",
+    $$css: true
+  },
+  lastChild: {
+    "--timvir-b-ColorBar-value-borderRadiusDefault": "timvir-s-btcsfn",
+    $$css: true
+  }
 };
 
 export { ColorBar$1 as ColorBar };

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

@@ -1,2 +1 @@
-import * as React from "react";
-export default function Sample(): React.JSX.Element;
+export default function Sample(): import("react/jsx-runtime").JSX.Element;

package/blocks/ColorBar/styles.css

@@ -1,6 +1,105 @@
+@layer priority1 {
+  .timvir-s-btcsfn {
+    --timvir-b-ColorBar-value-borderRadiusDefault: 0 2px 2px 0;
+  }
 
-.r1f19pie{position:relative;}
-.b15hqsfj{display:-ms-grid;display:grid;-ms-grid-auto-flow:row;grid-auto-flow:row;-ms-grid-columns:repeat(auto-fit, minmax(0, 1fr));grid-template-columns:repeat(auto-fit, minmax(0, 1fr));-webkit-transition:all 0.16s;transition:all 0.16s;}.b15hqsfj::before{position:absolute;top:0;right:0;bottom:0;left:0;display:block;z-index:2;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(16, 22, 26, 0.15);content:"";pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all 0.16s;transition:all 0.16s;}.b15hqsfj:hover::before{opacity:0;}
-.v1uw85xw{height:40px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-ms-grid;display:grid;place-items:stretch;}.v1uw85xw>div{-webkit-transition:all 0.16s;transition:all 0.16s;cursor:pointer;}.v1uw85xw:first-child>div{border-radius:2px 0 0 2px;}.v1uw85xw:last-child>div{border-radius:0 2px 2px 0;}.v1uw85xw:hover{z-index:3;}.v1uw85xw:hover>div{border-radius:2px;margin:-3px 1px;box-shadow:inset 0 0 0 1px rgba(16, 22, 26, 0.2),0 2px 4px rgba(16, 22, 26, 0.1),0 8px 24px rgba(16, 22, 26, 0.2);}
-.o1823law{position:absolute;top:50%;right:0px;left:0px;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none;opacity:0;z-index:4;-webkit-transition:opacity 0.16s;transition:opacity 0.16s;}.s4sqb81 .o1823law{pointer-events:all;opacity:1;}
+  .timvir-s-16gz6n8 {
+    --timvir-b-ColorBar-value-borderRadiusDefault: 2px 0 0 2px;
+  }
 
+  .timvir-s-15311qs {
+    --timvir-b-ColorBar-value-margin: 0;
+  }
+
+  .timvir-s-inzabm:hover {
+    --timvir-b-ColorBar-value-borderRadius: 2px;
+  }
+
+  .timvir-s-1bxid8z:hover {
+    --timvir-b-ColorBar-value-margin: -3px 1px;
+  }
+}
+
+@layer priority2 {
+  .timvir-s-1ehn4u0 {
+    margin: var(--timvir-b-ColorBar-value-margin);
+  }
+}
+
+@layer priority3 {
+  .timvir-s-nfsnhl {
+    border-radius: var(--timvir-b-ColorBar-value-borderRadius, var(--timvir-b-ColorBar-value-borderRadiusDefault));
+  }
+
+  .timvir-s-13b6k1y {
+    place-items: stretch stretch;
+  }
+
+  .timvir-s-zhuw26 {
+    transition: all .16s;
+  }
+}
+
+@layer priority4 {
+  .timvir-s-1ypdohk {
+    cursor: pointer;
+  }
+
+  .timvir-s-rvj5dj {
+    display: grid;
+  }
+
+  .timvir-s-1iyjqo2 {
+    flex-grow: 1;
+  }
+
+  .timvir-s-1sdr0u7 {
+    grid-auto-flow: row;
+  }
+
+  .timvir-s-dz4c1r {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+
+  .timvir-s-10l6tqk {
+    position: absolute;
+  }
+
+  .timvir-s-1n2onr6 {
+    position: relative;
+  }
+
+  .timvir-s-1cb1t30 {
+    transform: translateY(-50%);
+  }
+
+  .timvir-s-zkaem6 {
+    z-index: 3;
+  }
+
+  .timvir-s-oegz02 {
+    z-index: 4;
+  }
+
+  .timvir-s-32zglm:hover {
+    box-shadow: inset 0 0 0 1px #10161a33, 0 2px 4px #10161a1a, 0 8px 24px #10161a33;
+  }
+}
+
+@layer priority5 {
+  .timvir-s-1vqgdyp {
+    height: 40px;
+  }
+
+  .timvir-s-u96u03 {
+    left: 0;
+  }
+
+  .timvir-s-3m8u43 {
+    right: 0;
+  }
+
+  .timvir-s-wa60dl {
+    top: 50%;
+  }
+}

package/blocks/ColorBook/docs/index.mdx

@@ -7,6 +7,6 @@ The `<ColorBook>` component provides an overview of different color palettes. Th
 The user can interact with the book: select individual chapters. How selection is interpreted not handled by this component. In the example below
 upon selecting one of the first two chapters, some extra elements are displayed below the `<ColorBook>`.
 
-<div style={{ marginTop: "5vh" }}>
+<div style={{ marginTop: "5vh", gridColumn: "lc / rc" }}>
   <Sample variant="basic" />
 </div>