@tempoxyz/ds 0.0.0-explore-20261018092610 → 0.0.0-explore-20261018201039
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/web/components/Qr.d.ts +8 -18
- package/dist/web/components/Qr.d.ts.map +1 -1
- package/dist/web/components/Qr.js +9 -64
- package/dist/web/components/Qr.js.map +1 -1
- package/dist/web/components/Qr.js.zyzz.json +1 -1
- package/dist/web/components/Tabs.d.ts +18 -3
- package/dist/web/components/Tabs.d.ts.map +1 -1
- package/dist/web/components/Tabs.js +3 -3
- package/dist/web/components/Tabs.js.map +1 -1
- package/dist/web/components/Tabs.js.zyzz.json +1 -1
- package/dist/web/components/Tag.d.ts +1 -27
- package/dist/web/components/Tag.d.ts.map +1 -1
- package/dist/web/components/Tag.js +1 -1
- package/dist/web/components/Tag.js.map +1 -1
- package/dist/web/components/Tag.js.zyzz.json +1 -1
- package/dist/web/index.js.zyzz.json +1 -1
- package/dist/web/styles.css +3 -3
- package/package.json +2 -1
- package/src/web/components/Qr.tsx +14 -136
- package/src/web/components/Tabs.tsx +19 -5
- package/src/web/components/Tag.tsx +5 -22
- package/src/web/styles.css +3 -3
- package/dist/web/internal/Qr.d.ts +0 -6
- package/dist/web/internal/Qr.d.ts.map +0 -1
- package/dist/web/internal/Qr.js +0 -244
- package/dist/web/internal/Qr.js.map +0 -1
- package/src/web/internal/Qr.ts +0 -266
|
@@ -1,33 +1,23 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Cuer } from 'cuer';
|
|
2
|
+
import type { ComponentPropsWithRef } from 'react';
|
|
2
3
|
import type * as zyzz from 'zyzz';
|
|
3
4
|
/**
|
|
4
|
-
* Renders `value` as a QR code
|
|
5
|
-
*
|
|
5
|
+
* Renders `value` as a QR code through cuer. Modules draw in the foreground color on a transparent
|
|
6
|
+
* ground, and `color` overrides it. `arena` draws a logo in the center.
|
|
6
7
|
*/
|
|
7
8
|
export declare function Qr(props: Qr.Props): import("react").JSX.Element;
|
|
8
9
|
export declare namespace Qr {
|
|
9
|
-
type Props = Omit<ComponentPropsWithRef<'svg'>, '
|
|
10
|
-
/**
|
|
11
|
-
|
|
12
|
-
/** `dots` draws round modules and rounded finder patterns. `squares` draws plain modules. */
|
|
13
|
-
shape?: 'dots' | 'squares' | undefined;
|
|
14
|
-
/** Text encoded as UTF-8. */
|
|
15
|
-
value: string;
|
|
10
|
+
type Props = Omit<Cuer.Root.Props, 'children' | 'size'> & Pick<ComponentPropsWithRef<'svg'>, 'ref'> & zyzz.Props.Variants<typeof styles.qr> & {
|
|
11
|
+
/** Logo drawn over the center, as an image URL or a node. Raises error correction to medium. */
|
|
12
|
+
arena?: Cuer.Props['arena'];
|
|
16
13
|
};
|
|
17
14
|
}
|
|
18
15
|
declare namespace styles {
|
|
19
|
-
const icon: zyzz.style.ReturnType<"react">;
|
|
20
16
|
const qr: zyzz.variants.ReturnType<{
|
|
21
17
|
readonly base: {
|
|
22
|
-
readonly
|
|
23
|
-
readonly border: "1px solid !custom";
|
|
24
|
-
readonly borderColor: "grayAlpha.200";
|
|
25
|
-
readonly borderRadius: "3xl";
|
|
26
|
-
readonly boxSizing: "border-box";
|
|
27
|
-
readonly color: "black";
|
|
18
|
+
readonly color: "foreground";
|
|
28
19
|
readonly display: "block";
|
|
29
20
|
readonly flexShrink: "0 !custom";
|
|
30
|
-
readonly padding: "6";
|
|
31
21
|
};
|
|
32
22
|
readonly defaultVariants: {
|
|
33
23
|
readonly size: "medium";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Qr.d.ts","sourceRoot":"","sources":["../../../src/web/components/Qr.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Qr.d.ts","sourceRoot":"","sources":["../../../src/web/components/Qr.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAC3B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAGjC;;;GAGG;AACH,wBAAgB,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,+BAYjC;AAED,yBAAiB,EAAE,CAAC;IAClB,KAAY,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC,GAC5D,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,GACzC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,EAAE,CAAC,GAAG;QACtC,gGAAgG;QAChG,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;KAC5B,CAAA;CACJ;AAED,kBAAU,MAAM,CAAC;IACR,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;eAad,CAAA;CACF"}
|
|
@@ -1,73 +1,18 @@
|
|
|
1
1
|
|
|
2
|
-
import {
|
|
3
|
-
import { jsx as _jsx
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
import { style, variants } from '../zyzz.config.js';
|
|
7
|
-
const finderSize = 7;
|
|
8
|
-
const dotRadius = 0.45;
|
|
9
|
-
// ponytail: level M recovers about 15% of modules, so the icon clears about 5–6% (22% of the width).
|
|
10
|
-
// Larger icons need level H in the encoder.
|
|
11
|
-
const iconRatio = 0.22;
|
|
2
|
+
import { Recipe as __zyzzRecipe } from 'zyzz/runtime';
|
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
+
import { Cuer } from 'cuer';
|
|
5
|
+
import { variants } from '../zyzz.config.js';
|
|
12
6
|
/**
|
|
13
|
-
* Renders `value` as a QR code
|
|
14
|
-
*
|
|
7
|
+
* Renders `value` as a QR code through cuer. Modules draw in the foreground color on a transparent
|
|
8
|
+
* ground, and `color` overrides it. `arena` draws a logo in the center.
|
|
15
9
|
*/
|
|
16
10
|
export function Qr(props) {
|
|
17
|
-
const { className,
|
|
18
|
-
|
|
19
|
-
const extent = modules.length;
|
|
20
|
-
// Odd sizes keep the icon centered on whole modules, since every QR extent is odd.
|
|
21
|
-
const iconExtent = icon ? Math.floor((extent * iconRatio) / 2) * 2 + 1 : 0;
|
|
22
|
-
const iconStart = (extent - iconExtent) / 2;
|
|
23
|
-
const hidden = (x, y) => iconExtent > 0 &&
|
|
24
|
-
x >= iconStart &&
|
|
25
|
-
x < iconStart + iconExtent &&
|
|
26
|
-
y >= iconStart &&
|
|
27
|
-
y < iconStart + iconExtent;
|
|
28
|
-
return (_jsxs("svg", { "aria-label": `QR code for ${value}`, "data-shape": shape, role: "img", viewBox: `0 0 ${extent} ${extent}`, ...attributes, ...styles.qr({ className, size, style: props.style, vars }), children: [_jsx("path", { d: shape === 'dots' ? dots(modules, hidden) : squares(modules, hidden), fill: "currentColor", shapeRendering: shape === 'dots' ? undefined : 'crispEdges' }), shape === 'dots' &&
|
|
29
|
-
finders(extent).map(([x, y]) => (_jsxs("g", { "data-finder": "", children: [_jsx("rect", { fill: "none", height: finderSize - 1, rx: "1.75", stroke: "currentColor", strokeWidth: "1", width: finderSize - 1, x: x + 0.5, y: y + 0.5 }), _jsx("rect", { fill: "currentColor", height: "3", rx: "1", width: "3", x: x + 2, y: y + 2 })] }, `${x}-${y}`))), icon && (_jsx("foreignObject", { height: iconExtent, width: iconExtent, x: iconStart, y: iconStart, children: _jsx("div", { ...styles.icon(), children: icon }) }))] }));
|
|
30
|
-
}
|
|
31
|
-
function finders(extent) {
|
|
32
|
-
return [
|
|
33
|
-
[0, 0],
|
|
34
|
-
[extent - finderSize, 0],
|
|
35
|
-
[0, extent - finderSize],
|
|
36
|
-
];
|
|
37
|
-
}
|
|
38
|
-
/** One circle per dark module, skipping the three finder areas that are drawn as rings. */
|
|
39
|
-
function dots(modules, hidden) {
|
|
40
|
-
const extent = modules.length;
|
|
41
|
-
const skip = (x, y) => hidden(x, y) ||
|
|
42
|
-
finders(extent).some(([fx, fy]) => x >= fx && x < fx + finderSize && y >= fy && y < fy + finderSize);
|
|
43
|
-
const commands = [];
|
|
44
|
-
modules.forEach((row, y) => row.forEach((dark, x) => {
|
|
45
|
-
if (!dark || skip(x, y))
|
|
46
|
-
return;
|
|
47
|
-
const diameter = dotRadius * 2;
|
|
48
|
-
commands.push(`M${x + 0.5} ${y + 0.5}m${-dotRadius} 0a${dotRadius} ${dotRadius} 0 1 0 ${diameter} 0a${dotRadius} ${dotRadius} 0 1 0 ${-diameter} 0z`);
|
|
49
|
-
}));
|
|
50
|
-
return commands.join('');
|
|
51
|
-
}
|
|
52
|
-
/** One horizontal run per dark stretch, so the markup stays small. */
|
|
53
|
-
function squares(modules, hidden) {
|
|
54
|
-
const commands = [];
|
|
55
|
-
modules.forEach((row, y) => {
|
|
56
|
-
const dark = (x) => row[x] && !hidden(x, y);
|
|
57
|
-
for (let x = 0; x < row.length; x++) {
|
|
58
|
-
if (!dark(x))
|
|
59
|
-
continue;
|
|
60
|
-
const start = x;
|
|
61
|
-
while (dark(x + 1))
|
|
62
|
-
x++;
|
|
63
|
-
commands.push(`M${start} ${y}h${x - start + 1}v1h-${x - start + 1}z`);
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
return commands.join('');
|
|
11
|
+
const { className, size, value, vars, ...attributes } = props;
|
|
12
|
+
return (_jsx(Cuer, { "aria-label": `QR code for ${value}`, role: "img", value: value, ...attributes, ...styles.qr({ className, size, style: props.style, vars }) }));
|
|
67
13
|
}
|
|
68
14
|
var styles;
|
|
69
15
|
(function (styles) {
|
|
70
|
-
styles.
|
|
71
|
-
styles.qr = __zyzzRecipe.create({"axes":{"size":["large","medium","small"]},"defaults":{"size":"medium"},"className":"z-tds_2f_web-tds_2f_web_2f_qr-bg-0 z-tds_2f_web-tds_2f_web_2f_qr-border-1 z-tds_2f_web-tds_2f_web_2f_qr-border-color-2 z-tds_2f_web-tds_2f_web_2f_qr-border-radius-3 z-tds_2f_web-tds_2f_web_2f_qr_2f_icon-box-sizing-1 z-tds_2f_web-tds_2f_web_2f_qr-text-4 z-tds_2f_web-tds_2f_web_2f_qr-display-5 z-tds_2f_web-tds_2f_web_2f_qr-flex-shrink-6 z-tds_2f_web-tds_2f_web_2f_qr-p-7 z-tds_2f_web-tds_2f_web_2f_qr-h-8 z-tds_2f_web-tds_2f_web_2f_qr-w-9 z-tds_2f_web-tds_2f_web_2f_qr-h-10 z-tds_2f_web-tds_2f_web_2f_qr-w-11 z-tds_2f_web-tds_2f_web_2f_qr-h-12 z-tds_2f_web-tds_2f_web_2f_qr-w-13"});
|
|
16
|
+
styles.qr = __zyzzRecipe.create({"axes":{"size":["large","medium","small"]},"defaults":{"size":"medium"},"className":"z-tds_2f_web-tds_2f_web_2f_qr-text-0 z-tds_2f_web-tds_2f_web_2f_qr-display-1 z-tds_2f_web-tds_2f_web_2f_qr-flex-shrink-2 z-tds_2f_web-tds_2f_web_2f_qr-h-3 z-tds_2f_web-tds_2f_web_2f_qr-w-4 z-tds_2f_web-tds_2f_web_2f_qr-h-5 z-tds_2f_web-tds_2f_web_2f_qr-w-6 z-tds_2f_web-tds_2f_web_2f_qr-h-7 z-tds_2f_web-tds_2f_web_2f_qr-w-8"});
|
|
72
17
|
})(styles || (styles = {}));
|
|
73
18
|
//# sourceMappingURL=Qr.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Qr.js","sourceRoot":"","sources":["../../../src/web/components/Qr.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Qr.js","sourceRoot":"","sources":["../../../src/web/components/Qr.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAG3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C;;;GAGG;AACH,MAAM,UAAU,EAAE,CAAC,KAAe;IAChC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IAE7D,OAAO,CACL,KAAC,IAAI,kBACS,eAAe,KAAK,EAAE,EAClC,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,KAAK,KACR,UAAU,KACV,MAAM,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,GAC5D,CACH,CAAA;AACH,CAAC;AAWD,IAAU,MAAM,CAef;AAfD,WAAU,MAAM;IACD,SAAE,GAAG,QAAQ,CACxB;QACE,IAAI,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE;QACxE,eAAe,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QACnC,QAAQ,EAAE;YACR,IAAI,EAAE;gBACJ,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gBACpC,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gBACrC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;aACrC;SACF;KACF,EACD,EAAE,EAAE,EAAE,YAAY,EAAE,CACrB,CAAA;AACH,CAAC,EAfS,MAAM,KAAN,MAAM,QAef"}
|