timvir 0.1.42

package/blocks/Arbitrary/Arbitrary.d.ts

@@ -0,0 +1,11 @@
+import { Exhibit } from "timvir/blocks";
+import * as React from "react";
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+declare const Root = "div";
+interface Props extends React.ComponentPropsWithRef<typeof Root> {
+    ExhibitProps?: React.ComponentPropsWithRef<typeof Exhibit>;
+}
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "key" | "dir" | "onError" | "hidden" | "color" | "style" | "translate" | "prefix" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ExhibitProps"> & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/blocks/Arbitrary/context.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export declare const Context: React.Context<{
+    seed: number;
+}>;
+export declare const useContext: () => {
+    seed: number;
+};

package/blocks/Arbitrary/docs/index.mdx

@@ -0,0 +1,36 @@
+import { Arbitrary } from "..";
+import { Exhibit } from "timvir/blocks";
+
+# Arbitrary
+
+The `<Arbitrary>` component manages a React context that contains a seed. This seed is displayed
+in an input field where users can copy it from.
+
+The component renders its children in an `<Exhibit>`. The children can make use of the seed in the
+React context to render themselves in a predictable way.
+
+<Sample variant="basic" />
+
+## Usage
+
+Given a component-under-test:
+
+```jsx
+import { useContext } from "timvir/blocks/Arbitrary"
+
+function Component() {
+  const { seed } = useContext();
+  return <div>{seed}</div>;
+}
+```
+
+We can take it and display it inside an `<Arbitrary>` in a timvir doc page:
+
+```jsx
+import { Arbitrary } from "timvir/blocks"
+import { Component } from ".."
+
+<Arbitrary>
+  <Component />
+</Arbitrary>
+```

package/blocks/Arbitrary/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Arbitrary } from "./Arbitrary";
+export { useContext } from "./context";

package/blocks/Arbitrary/index.js

@@ -0,0 +1,117 @@
+import { Exhibit } from 'timvir/blocks';
+import { useBlock } from 'timvir/core';
+import * as base58 from 'timvir/std/base58';
+import * as React from 'react';
+import { useImmer } from 'use-immer';
+
+/**
+ * Takes a list of class names and filters for truthy ones, joining them into a single class name for convenience.
+ * eg.
+ * ```js
+ *  cx('red', isBig && 'big') // returns 'red big' if `isBig` is true, otherwise returns 'red'
+ * ```
+ * If arguments provided are objects, these objects are merged together, and the values are taken as class names:
+ *
+ * ```js
+ *  cx({ color: 'class1', textDecoration: 'class2'}, { color: 'class3' }) // returns `class3 class2`
+ * ```
+ *
+ * @returns the combined, space separated class names that can be applied directly to the class attribute
+ */
+const cx = function cx() {
+  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean); // In the basic case, `cx` is passed all strings, and we simply need to join them together with space separators
+
+  const classNamesResult = presentClassNames.filter(arg => typeof arg !== 'object'); // There might also be objects (eg. from the atomic API) such as cx('foo', {
+  // key1: 'bar', key2: 'fizz'}, { key1: 'buzz' }) the desired behavior is to
+  // deduplicate the values based on their properties. The object's values are
+  // the class names
+
+  const styleCollectionResult = Object.values(Object.assign({}, ...presentClassNames.filter(arg => typeof arg === 'object')));
+  return [...styleCollectionResult, ...classNamesResult].join(' ');
+};
+
+const Context = /*#__PURE__*/React.createContext({
+  seed: 0
+});
+const useContext = () => React.useContext(Context);
+
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+
+const Root = "div";
+
+function Arbitrary(props, ref) {
+  const block = useBlock(props);
+  const {
+    ExhibitProps,
+    className,
+    children,
+    ...rest
+  } = block.props;
+  const [value, mutate] = useImmer({
+    seed: 0
+  });
+  React.useEffect(() => {
+    mutate(draft => {
+      draft.seed = crypto.getRandomValues(new Uint32Array(1))[0];
+    });
+  }, [mutate]);
+  React.useEffect(() => {
+    if (props.id) {
+      block.bus.next({
+        type: "SIGNAL",
+        path: `/dev/timvir/block/${props.id}`,
+        interface: "dev.timvir.block.Arbitrary",
+        member: "seed",
+        body: value.seed
+      });
+    }
+  }, [block.bus, value.seed]);
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement(Root, {
+    ref: ref,
+    className: cx(classes.root, className),
+    ...rest
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.controls
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.textField
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classes.startAdornment
+  }, "Seed:"), /*#__PURE__*/React.createElement("input", {
+    className: classes.input,
+    placeholder: "Seed",
+    value: base58.encode(new TextEncoder().encode(`${value.seed}`)),
+    onPaste: ev => {
+      const v = ev.clipboardData.getData("text/plain");
+      mutate(draft => {
+        draft.seed = +base58.decode(v);
+      });
+    },
+    onFocus: ev => {
+      ev.currentTarget.select();
+    }
+  })), /*#__PURE__*/React.createElement("button", {
+    className: classes.button,
+    onClick: () => {
+      mutate(draft => {
+        draft.seed = crypto.getRandomValues(new Uint32Array(1))[0];
+      });
+    }
+  }, "Refresh")), /*#__PURE__*/React.createElement(Exhibit, { ...ExhibitProps
+  }, children)));
+}
+
+var Arbitrary$1 = /*#__PURE__*/React.forwardRef(Arbitrary);
+const classes = {
+  root: "r1ev38xg",
+  controls: "c8hz158",
+  textField: "t1663phv",
+  startAdornment: "s1k50njo",
+  input: "i1dajnne",
+  button: "b128wsn"
+};
+
+export { Arbitrary$1 as Arbitrary, useContext };

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

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

package/blocks/Arbitrary/styles.css

@@ -0,0 +1,6 @@
+.r1ev38xg{margin:1em 0;}
+.c8hz158{display:grid;grid-gap:8px;grid-template-columns:1fr 100px;margin-bottom:8px;}
+.t1663phv{display:flex;align-items:center;padding:0 0 0 10px;height:36px;position:relative;}.t1663phv::after{display:block;position:absolute;content:"";inset:0;pointer-events:none;border:1px solid var(--timvir-secondary-text-color);border-radius:2px;}.t1663phv:hover::after{border-color:var(--timvir-accent-color);}.t1663phv:focus-within::after{border-color:var(--timvir-accent-color);}
+.s1k50njo{display:inline-block;color:var(--timvir-secondary-text-color);margin-right:6px;}
+.i1dajnne{border:none;outline:none;font:inherit;background:transparent;align-self:stretch;padding:0;height:34px;width:100%;color:inherit;}
+.b128wsn{border:none;outline:none;height:36px;background:var(--timvir-accent-color);font:inherit;border-radius:2px;cursor:pointer;transition:background 0.2s;}.b128wsn:hover{background:var(--c-p-3);}.b128wsn:active{background:var(--c-p-4);}

package/blocks/Code/Code.d.ts

@@ -0,0 +1,35 @@
+/**
+ * This is documentation for the Code component.
+ */
+import { Language } from "prism-react-renderer";
+import * as React from "react";
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+declare const Root = "div";
+interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+    /**
+     * The code that should be highlighted.
+     */
+    children: string;
+    /**
+     * Language in which the code is.
+     *
+     * @default "markup"
+     */
+    language?: Language;
+    /**
+     * When set, the code block spans the full width. Note that the text itself
+     * is still aligned with the main column. Use this when you expect the text
+     * to be wider than the center column.
+     */
+    fullWidth?: boolean;
+    /**
+     * The numbering starts at 1, ie. `highlightedLines={[1, 2]}` will highlight
+     * the first two lines.
+     */
+    highlightedLines?: Array<number>;
+    caption?: React.ReactNode;
+}
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/blocks/Code/docs/api.mdx

@@ -0,0 +1,76 @@
+# API
+
+<div style={ { display: "grid", gridTemplateColumns: "min-content 1fr" } }>
+  <div style={ { fontWeight: "bold", marginRight: 16 } }>Root:</div>
+  <div>{`<div>`}</div>
+  <div style={ { fontWeight: "bold", marginRight: 16 } }>Ref:</div>
+  <div>Forward <span style={ { color: "rgb(153, 153, 153)" } }>(HTMLDivElement)</span></div>
+</div>
+
+## Props
+
+<Props {...{"fields":[{"name":"children","type":{"optional":false,"name":"string","module":""},"comment":{"shortText":"The code that should be highlighted."}},{"name":"language","type":{"optional":true,"name":"Language","module":""},"def":"\"markup\"","comment":{"shortText":"Language in which the code is."}},{"name":"fullWidth","type":{"optional":true,"name":"boolean","module":""},"comment":{"shortText":"When set, the code block spans the full width. Note that the text itself\nis still aligned with the main column. Use this when you expect the text\nto be wider than the center column."}},{"name":"highlightedLines","type":{"optional":true,"name":"number[]","module":""},"comment":{"shortText":"The numbering starts at 1, ie. `highlightedLines={[1, 2]}` will highlight\nthe first two lines."}}]}} />
+
+export const required = (
+  <svg
+    x="0px"
+    y="0px"
+    width="10px"
+    height="10px"
+    viewBox="0 0 16 16"
+    style={ { position: "relative", top: 0, display: "inline-block", marginRight: 8 } }
+  >
+    <g transform="translate(0, 0)">
+      <circle cx="8" cy="8" r="8" fill="#444444"></circle>
+    </g>
+  </svg>
+);
+
+export const optional = (
+  <svg
+    x="0px"
+    y="0px"
+    width="10px"
+    height="10px"
+    viewBox="0 0 16 16"
+    style={ { position: "relative", top: 0, display: "inline-block", marginRight: 8 } }
+  >
+    <g transform="translate(0, 0)">
+      <circle
+        cx="8"
+        cy="8"
+        r="7.5"
+        fill="none"
+        stroke="#444444"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        data-cap="butt"
+      ></circle>
+    </g>
+  </svg>
+);
+
+export const Props = ({ fields }) => (
+  <div style={ { marginTop: 16, display: "grid", gridGap: 24 } }>
+    {fields.map(({ name, type, def, example, comment }) => (
+      <div key={name}>
+        <div style={ { marginLeft: -18 } }>
+          {type.optional ? optional : required}
+          <span style={ { fontWeight: "bold" } }>{name}</span>{`: `}
+          <span>{type.name}</span>
+          {def && (
+            <>
+             {` = `}<span style={ { fontWeight: "bold" } }>{def}</span>
+            </>
+          )}
+        </div>
+        <div>{comment.shortText}</div>
+        {example && (
+          <div style={ { marginLeft: 0, marginTop: 8, color: "rgb(153, 153, 153)", fontSize: "0.8rem" } }>
+            Example: <span style={ { fontWeight: "bold" } }>{example}</span>
+          </div>
+        )}
+      </div>
+    ))}
+  </div>
+)

package/blocks/Code/docs/index.mdx

@@ -0,0 +1,39 @@
+import { Code } from "..";
+import { Exhibit } from "../../Exhibit";
+
+# Code
+
+The `<Code>` component provides syntax highlighting for code blocks.
+
+The component supports many different languages such as
+<Sample variant="toggle" language="javascript">JavaScript</Sample>, 
+<Sample variant="toggle" language="markdown">Markdown</Sample>, 
+<Sample variant="toggle" language="html">HTML</Sample>, 
+<Sample variant="toggle" language="css">CSS</Sample> and many more.
+
+<Code
+  id="code"
+  language="tsx"
+  highlightedLines={[2, 7]}
+  caption="The highlighted lines show how to import and use the <Code> block."
+>
+  <Sample variant="basic" as="source" />
+</Code>
+
+The default language is "markdown", but you can specify any of the languages
+which are supported by [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).
+
+<Code language="javascript" caption="The Hitchhiker's Guide to the Galaxy">
+  {'const answer = 42;'}
+</Code>
+
+## Full-width
+
+Full-width code blocks provide more space for the code. They are not constrained to the center column.
+
+<Code language="javascript" fullWidth>
+  {`(defun csg-intersection-intersect-all (obj-a obj-b)
+   (lambda (ray)
+     (flet ((inside-p (obj) (lambda (d) (inside-p obj (ray-point ray d)))))
+       (merge 'fvector (remove-if-not (inside-p obj-b) (intersect-all obj-a ray)) (remove-if-not (inside-p obj-a) (intersect-all obj-b ray)) #'<))))`}
+</Code>

package/blocks/Code/index.d.ts

@@ -0,0 +1 @@
+export { default as Code } from "./Code";

package/blocks/Code/index.js

@@ -0,0 +1,154 @@
+import * as Page from 'timvir/core';
+import { useBlock } from 'timvir/core';
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import * as React from 'react';
+import * as Icons from 'react-feather';
+import { useImmer } from 'use-immer';
+
+/**
+ * Takes a list of class names and filters for truthy ones, joining them into a single class name for convenience.
+ * eg.
+ * ```js
+ *  cx('red', isBig && 'big') // returns 'red big' if `isBig` is true, otherwise returns 'red'
+ * ```
+ * If arguments provided are objects, these objects are merged together, and the values are taken as class names:
+ *
+ * ```js
+ *  cx({ color: 'class1', textDecoration: 'class2'}, { color: 'class3' }) // returns `class3 class2`
+ * ```
+ *
+ * @returns the combined, space separated class names that can be applied directly to the class attribute
+ */
+const cx = function cx() {
+  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean); // In the basic case, `cx` is passed all strings, and we simply need to join them together with space separators
+
+  const classNamesResult = presentClassNames.filter(arg => typeof arg !== 'object'); // There might also be objects (eg. from the atomic API) such as cx('foo', {
+  // key1: 'bar', key2: 'fizz'}, { key1: 'buzz' }) the desired behavior is to
+  // deduplicate the values based on their properties. The object's values are
+  // the class names
+
+  const styleCollectionResult = Object.values(Object.assign({}, ...presentClassNames.filter(arg => typeof arg === 'object')));
+  return [...styleCollectionResult, ...classNamesResult].join(' ');
+};
+
+var theme = "tac6gx6";
+
+/**
+ * This is documentation for the Code component.
+ */
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+
+const Root = "div";
+const nullTheme = {
+  plain: {},
+  styles: []
+};
+
+function Code(props, ref) {
+  const block = useBlock(props);
+  const {
+    children,
+    language,
+    fullWidth,
+    highlightedLines,
+    caption,
+    ...rest
+  } = block.props;
+
+  const isHighlightedLine = (() => {
+    return line => highlightedLines === null || highlightedLines === void 0 ? void 0 : highlightedLines.includes(line);
+  })();
+
+  const [state, mutate] = useImmer({
+    mouseOver: false,
+    copiedToClipboard: false
+  });
+  return /*#__PURE__*/React.createElement(Root, {
+    ref: ref,
+    className: cx(classes.root, fullWidth && Page.fullWidth),
+    ...rest
+  }, /*#__PURE__*/React.createElement(Highlight, { ...defaultProps,
+    code: children.trim(),
+    language: language !== null && language !== void 0 ? language : "markup",
+    theme: nullTheme
+  }, ({
+    className,
+    style,
+    tokens,
+    getLineProps,
+    getTokenProps
+  }) => /*#__PURE__*/React.createElement("pre", {
+    className: cx(className, theme, classes.code, fullWidth && classes.fullWidth),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d1513p2s",
+    onMouseEnter: () => {
+      mutate(draft => {
+        draft.mouseOver = true;
+      });
+    },
+    onMouseLeave: () => {
+      mutate(draft => {
+        draft.mouseOver = false;
+        draft.copiedToClipboard = false;
+      });
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: () => {
+      navigator.clipboard.writeText(children);
+      mutate(draft => {
+        draft.copiedToClipboard = true;
+      });
+    },
+    className: cx("b157mkz", state.mouseOver && "b10oxtfo")
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: 48,
+    height: 48,
+    viewBox: "0 0 48 48",
+    className: "s1hdfi6o"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0 H48 V48 Z"
+  })), state.copiedToClipboard ? /*#__PURE__*/React.createElement(Icons.Clipboard, {
+    size: "16px"
+  }) : /*#__PURE__*/React.createElement(Icons.Copy, {
+    size: "16px"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cx(fullWidth ? "d17pltln" : "d793q8f")
+  }, tokens.map((line, i) => {
+    const {
+      className,
+      ...lineProps
+    } = getLineProps({
+      line,
+      key: i
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      ...lineProps,
+      className: cx(className, classes.line, isHighlightedLine(i + 1) && classes.highlightedLine)
+    }, line.map((token, key) => /*#__PURE__*/React.createElement("span", {
+      key: key,
+      ...getTokenProps({
+        token,
+        key
+      })
+    })));
+  }))))), caption && /*#__PURE__*/React.createElement("div", {
+    className: classes.caption
+  }, caption));
+}
+
+var Code$1 = /*#__PURE__*/React.forwardRef(Code);
+const classes = {
+  root: "r9v2r0l",
+  code: "cs7tint",
+  fullWidth: "fjvaz2s",
+  line: "lchll0h",
+  highlightedLine: "h1xcko1i",
+  lineNumber: "ll2b9hx",
+  caption: "c5vr6r2"
+};
+
+export { Code$1 as Code };

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

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

package/blocks/Code/samples/toggle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Sample({ language, children }: any): JSX.Element;

package/blocks/Code/styles.css

@@ -0,0 +1,14 @@
+.d1513p2s{display:grid;grid-template-columns:1fr;padding-block:16px;}
+.b157mkz{--size:48px;z-index:1;position:absolute;top:0;right:0;width:var(--size);height:var(--size);display:flex;align-items:flex-start;justify-content:flex-end;outline:none;border:none;padding:6px;background:transparent;transition:all 0.2s;cursor:pointer;pointer-events:none;opacity:0;}.b157mkz:hover{color:white;}.b157mkz:hover svg:first-child{transform:translate(0,0);}.b157mkz:active svg:first-child{transform:translate(2px,-2px);}
+.b10oxtfo{pointer-events:all;opacity:1;}
+.s1hdfi6o{position:absolute;z-index:-1;top:0;right:0;transition:all 0.2s;transform:translate(48px,-48px);}.s1hdfi6o path{fill:var(--c-p-4);}
+.d17pltln{padding:16px 24px 16px 0;}
+
+.r9v2r0l{margin:1.5rem 0 3rem;}
+.cs7tint{overflow-x:auto;contain:content;font-size:0.9em;border-radius:5px;--timvir-b-Code-bleed:var(--timvir-page-margin,24px);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),24px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));box-shadow:inset 0 0 0 1px rgb(16 22 26 / 20%),0 1px 4px rgb(16 22 26 / 10%);transition:box-shadow 0.3s;}.cs7tint:hover{box-shadow:inset 0 0 0 1px rgb(16 22 26 / 30%),0 1px 4px rgb(16 22 26 / 10%),0 8px 24px rgb(16 22 26 / 10%);}:root[data-timvir-theme="dark"] .cs7tint{box-shadow:inset 0 0 0 1px rgb(216 222 226 / 10%),0 1px 4px rgb(216 222 226 / 5%), 0 2px 8px rgb(216 222 226 / 2%);}:root[data-timvir-theme="dark"] .cs7tint:hover{box-shadow:inset 0 0 0 1px rgb(216 222 226 / 10%),0 1px 3px rgb(216 222 226 / 7%), 0 2px 16px rgb(216 222 226 / 5%);}
+.fjvaz2s{display:grid;border-radius:0;box-shadow:none;margin-inline:0;grid-auto-rows:min-content;grid-template-columns:[le] 0 [lc] 1fr [rc] 0 [re];grid-column-gap:16px;}.fjvaz2s:hover{box-shadow:none;}@media (min-width:60rem){.fjvaz2s{grid-template-columns:[le] 1fr [lc] minmax(0,48rem) [rc] 1fr [re];grid-column-gap:24px;}}.fjvaz2s > *{grid-column:lc / re;}
+.lchll0h{padding-inline:var(--timvir-b-Code-inlinePadding);margin-inline:1px;}
+.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.75rem;color:var(--timvir-secondary-text-color);margin-top:2px;}
+.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:#2d333b;}: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;}

package/blocks/Code/theme.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@linaria/core").LinariaClassName;
+export default _default;

package/blocks/ColorBar/ColorBar.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+declare const Root = "div";
+interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+    /**
+     * Array of CSS Color values.
+     */
+    values: Array<string | {
+        value: string;
+        contrastValue?: string;
+        name?: string;
+        ancestry?: string;
+    }>;
+}
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/blocks/ColorBar/docs/api.mdx

@@ -0,0 +1,76 @@
+# API
+
+<div style={ { display: "grid", gridTemplateColumns: "min-content 1fr" } }>
+  <div style={ { fontWeight: "bold", marginRight: 16 } }>Root:</div>
+  <div>{`<div>`}</div>
+  <div style={ { fontWeight: "bold", marginRight: 16 } }>Ref:</div>
+  <div>Forward <span style={ { color: "rgb(153, 153, 153)" } }>(HTMLDivElement)</span></div>
+</div>
+
+## Props
+
+<Props {...{"fields":[{"name":"values","type":{"optional":false,"name":"string[]","module":""},"comment":{"shortText":"Array of CSS Color values."}}]}} />
+
+export const required = (
+  <svg
+    x="0px"
+    y="0px"
+    width="10px"
+    height="10px"
+    viewBox="0 0 16 16"
+    style={ { position: "relative", top: 0, display: "inline-block", marginRight: 8 } }
+  >
+    <g transform="translate(0, 0)">
+      <circle cx="8" cy="8" r="8" fill="#444444"></circle>
+    </g>
+  </svg>
+);
+
+export const optional = (
+  <svg
+    x="0px"
+    y="0px"
+    width="10px"
+    height="10px"
+    viewBox="0 0 16 16"
+    style={ { position: "relative", top: 0, display: "inline-block", marginRight: 8 } }
+  >
+    <g transform="translate(0, 0)">
+      <circle
+        cx="8"
+        cy="8"
+        r="7.5"
+        fill="none"
+        stroke="#444444"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        data-cap="butt"
+      ></circle>
+    </g>
+  </svg>
+);
+
+export const Props = ({ fields }) => (
+  <div style={ { marginTop: 16, display: "grid", gridGap: 24 } }>
+    {fields.map(({ name, type, def, example, comment }) => (
+      <div key={name}>
+        <div style={ { marginLeft: -18 } }>
+          {type.optional ? optional : required}
+          <span style={ { fontWeight: "bold" } }>{name}</span>{`: `}
+          <span>{type.name}</span>
+          {def && (
+            <>
+             {` = `}<span style={ { fontWeight: "bold" } }>{def}</span>
+            </>
+          )}
+        </div>
+        <div>{comment.shortText}</div>
+        {example && (
+          <div style={ { marginLeft: 0, marginTop: 8, color: "rgb(153, 153, 153)", fontSize: "0.8rem" } }>
+            Example: <span style={ { fontWeight: "bold" } }>{example}</span>
+          </div>
+        )}
+      </div>
+    ))}
+  </div>
+)