@tempoxyz/ds 0.2.6 → 0.3.1

package/dist/web/components/Visual.d.ts

@@ -0,0 +1,65 @@
+import type { ComponentPropsWithRef } from 'react';
+import type * as zyzz from 'zyzz';
+/**
+ * A 208px illustration panel for the top of an onboarding or feature modal, in place of an
+ * `IconTile`. `kind` selects the artwork, and `passkey` is the only kind today. The artwork is
+ * decorative and hidden from assistive technology. It stays at its native size, centered and
+ * clipped by the panel.
+ *
+ * - Use one visual per modal, above a centered title. Never pair it with an `IconTile`.
+ * - Leave it out of form and review modals.
+ * - Add `Visual.Chip` for a short instruction, such as "Touch to sign in".
+ *
+ * @example
+ * <Visual kind="passkey">
+ *   <Visual.Chip>Touch to sign in</Visual.Chip>
+ * </Visual>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/svg | MDN svg element}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ */
+export declare function Visual(props: Visual.Props): import("react").JSX.Element;
+export declare namespace Visual {
+    type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.visual>;
+    /**
+     * A pill in the top-right corner of the visual, with a dot before its text. Screen readers read
+     * the text.
+     */
+    function Chip(props: Chip.Props): import("react").JSX.Element;
+    namespace Chip {
+        type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.chip>;
+    }
+}
+declare namespace styles {
+    const chip: zyzz.style.ReturnType<"react">;
+    const dot: zyzz.style.ReturnType<"react">;
+    const visual: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly alignItems: "flex-end";
+            readonly backgroundColor: "background.primary";
+            readonly borderRadius: "sm";
+            readonly boxSizing: "border-box";
+            readonly color: "content.primary";
+            readonly display: "flex";
+            readonly justifyContent: "center";
+            readonly overflow: "hidden";
+            readonly position: "relative";
+            readonly selectors: {
+                readonly '& > svg': {
+                    readonly display: "block";
+                    readonly flexShrink: "0 !custom";
+                };
+            };
+        };
+        readonly defaultVariants: {
+            readonly kind: "passkey";
+        };
+        readonly variants: {
+            kind: {
+                passkey: {};
+            };
+        };
+    }, "react">;
+}
+export {};
+//# sourceMappingURL=Visual.d.ts.map

package/dist/web/components/Visual.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Visual.d.ts","sourceRoot":"","sources":["../../../src/web/components/Visual.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAgB,MAAM,OAAO,CAAA;AAChE,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAGjC;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,+BASzC;AAED,yBAAiB,MAAM,CAAC;IACtB,KAAY,KAAK,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,MAAM,CAAC,CAAA;IAE5F;;;OAGG;IACH,SAAgB,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,+BASrC;IAED,UAAiB,IAAI,CAAC;QACpB,KAAY,KAAK,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAA;KAC5F;CACF;AAuDD,kBAAU,MAAM,CAAC;IACR,MAAM,IAAI,gCAqBhB,CAAA;IAEM,MAAM,GAAG,gCAUf,CAAA;IAGM,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;YAeH,IAAI;gBAAI,OAAO;;;eAG9B,CAAA;CACF"}

package/dist/web/components/Visual.js

@@ -0,0 +1,51 @@
+
+import { Props as __zyzzProps } from 'zyzz/runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { style, variants } from '../zyzz.config.js';
+/**
+ * A 208px illustration panel for the top of an onboarding or feature modal, in place of an
+ * `IconTile`. `kind` selects the artwork, and `passkey` is the only kind today. The artwork is
+ * decorative and hidden from assistive technology. It stays at its native size, centered and
+ * clipped by the panel.
+ *
+ * - Use one visual per modal, above a centered title. Never pair it with an `IconTile`.
+ * - Leave it out of form and review modals.
+ * - Add `Visual.Chip` for a short instruction, such as "Touch to sign in".
+ *
+ * @example
+ * <Visual kind="passkey">
+ *   <Visual.Chip>Touch to sign in</Visual.Chip>
+ * </Visual>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/svg | MDN svg element}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ */
+export function Visual(props) {
+    const { children, className, kind, vars, ...attributes } = props;
+    return (_jsxs("div", { ...attributes, ...styles.visual({ className, kind, style: props.style, vars }), children: [artwork[kind ?? 'passkey'], children] }));
+}
+(function (Visual) {
+    /**
+     * A pill in the top-right corner of the visual, with a dot before its text. Screen readers read
+     * the text.
+     */
+    function Chip(props) {
+        const { children, className, vars, ...attributes } = props;
+        return (_jsxs("span", { ...attributes, ...styles.chip({ className, style: props.style, vars }), children: [_jsx("span", { "aria-hidden": "true", ...styles.dot() }), children] }));
+    }
+    Visual.Chip = Chip;
+})(Visual || (Visual = {}));
+// The Figma exports in `visuals/`, cropped to the 374px frame they were drawn in, with black as
+// `currentColor` so the artwork follows the color scheme.
+const artwork = {
+    passkey: (_jsxs("svg", { "aria-hidden": "true", fill: "none", height: "208", viewBox: "0 0 374 208", width: "374", children: [_jsxs("g", { stroke: "currentColor", strokeLinecap: "round", strokeOpacity: "0.14", strokeWidth: "1.5", children: [_jsx("path", { d: "M171 208V164C171 159.757 172.686 155.687 175.686 152.686C178.687 149.686 182.757 148 187 148C191.243 148 195.313 149.686 198.314 152.686C201.314 155.687 203 159.757 203 164V208", strokeDasharray: "30 6" }), _jsx("path", { d: "M155 208V164C155 155.513 158.371 147.374 164.373 141.373C170.374 135.371 178.513 132 187 132C195.487 132 203.626 135.371 209.627 141.373C215.629 147.374 219 155.513 219 164V208", strokeDasharray: "52 8 14 8" }), _jsx("path", { d: "M123 208V164C123 147.026 129.743 130.747 141.745 118.745C153.747 106.743 170.026 100 187 100C203.974 100 220.252 106.743 232.255 118.745C244.257 130.747 251 147.026 251 164V208", strokeDasharray: "90 10 40 10" }), _jsx("path", { d: "M107 208V164C107 142.783 115.429 122.434 130.431 107.431C145.434 92.4285 165.783 84 187 84C208.217 84 228.566 92.4285 243.569 107.431C258.571 122.434 267 142.783 267 164V208", strokeDasharray: "60 12 120 8" }), _jsx("path", { d: "M91 208V164C91 138.539 101.114 114.121 119.118 96.1178C137.121 78.1143 161.539 68 187 68C212.461 68 236.879 78.1143 254.882 96.1178C272.886 114.121 283 138.539 283 164V208", strokeDasharray: "140 10 50 10" }), _jsx("path", { d: "M75 208V164C75 134.296 86.8 105.808 107.804 84.804C128.808 63.8 157.296 52 187 52C216.704 52 245.192 63.8 266.196 84.804C287.2 105.808 299 134.296 299 164V208", strokeDasharray: "80 14 160 10" }), _jsx("path", { d: "M59 208V164C59 130.052 72.4857 97.495 96.4903 73.4903C120.495 49.4857 153.052 36 187 36C220.948 36 253.505 49.4857 277.51 73.4903C301.514 97.495 315 130.052 315 164V208", strokeDasharray: "200 12 60 12" }), _jsx("path", { d: "M43 208V164C43 125.809 58.1714 89.1819 85.1766 62.1766C112.182 35.1714 148.809 20 187 20C225.191 20 261.818 35.1714 288.823 62.1766C315.829 89.1819 331 125.809 331 164V208", strokeDasharray: "120 16 220 12" })] }), _jsx("path", { d: "M139 208V164C139 151.27 144.057 139.061 153.059 130.059C162.061 121.057 174.27 116 187 116C199.73 116 211.939 121.057 220.941 130.059C229.943 139.061 235 151.27 235 164V208", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2.5" }), _jsx("path", { d: "M187 169C189.761 169 192 166.761 192 164C192 161.239 189.761 159 187 159C184.239 159 182 161.239 182 164C182 166.761 184.239 169 187 169Z", fill: "currentColor" })] })),
+};
+var styles;
+(function (styles) {
+    styles.chip = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-kmM8ZB0 z_tds_2f_web-kmM8ZB1 z_tds_2f_web-kmM8ZB2 z_tds_2f_web-kmM8ZB3 z_tds_2f_web-kmM8ZB4 z_tds_2f_web-kmM8ZB5 z_tds_2f_web-kmM8ZB6 z_tds_2f_web-kmM8ZB7 z_tds_2f_web-kmM8ZB8 z_tds_2f_web-kmM8ZB9 z_tds_2f_web-kmM8ZBa z_tds_2f_web-kmM8ZBb z_tds_2f_web-kmM8ZBc z_tds_2f_web-kmM8ZBd z_tds_2f_web-kmM8ZBe z_tds_2f_web-kmM8ZBf z_tds_2f_web-kmM8ZBg z_tds_2f_web-kmM8ZBh z_tds_2f_web-kmM8ZBi z_tds_2f_web-kmM8ZBj z_tds_2f_web-kmM8ZBk"});
+    styles.dot = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-kmM8ZBl z_tds_2f_web-kmM8ZB3 z_tds_2f_web-kmM8ZB8 z_tds_2f_web-kmM8ZBm z_tds_2f_web-kmM8ZBn z_tds_2f_web-kmM8ZBo"});
+    // Flex centering overflows both edges equally, so a narrow panel clips the artwork symmetrically.
+    styles.visual = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-kmM8ZBp z_tds_2f_web-kmM8ZBq z_tds_2f_web-kmM8ZBr z_tds_2f_web-kmM8ZBs z_tds_2f_web-kmM8ZB6 z_tds_2f_web-kmM8ZBt z_tds_2f_web-kmM8ZBu z_tds_2f_web-kmM8ZBv z_tds_2f_web-kmM8ZBw z_tds_2f_web-kmM8ZBx z_tds_2f_web-kmM8ZBy"+" "+external:"z_tds_2f_web-kmM8ZBp z_tds_2f_web-kmM8ZBq z_tds_2f_web-kmM8ZBr z_tds_2f_web-kmM8ZBs z_tds_2f_web-kmM8ZB6 z_tds_2f_web-kmM8ZBt z_tds_2f_web-kmM8ZBu z_tds_2f_web-kmM8ZBv z_tds_2f_web-kmM8ZBw z_tds_2f_web-kmM8ZBx z_tds_2f_web-kmM8ZBy",result=inline?{className,style:inline}:{className};let value;value=Object.hasOwn(input,"kind")?input["kind"]:void 0;if(value===void 0)value="passkey";if(value!==null&&value!==void 0)result["data-kind"]=String(value);return result});
+})(styles || (styles = {}));
+//# sourceMappingURL=Visual.js.map
+import './Visual.css';

package/dist/web/components/Visual.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Visual.js","sourceRoot":"","sources":["../../../src/web/components/Visual.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEnD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,MAAM,CAAC,KAAmB;IACxC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IAEhE,OAAO,CACL,kBAAS,UAAU,KAAM,MAAM,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,aAClF,OAAO,CAAC,IAAI,IAAI,SAAS,CAAC,EAC1B,QAAQ,IACL,CACP,CAAA;AACH,CAAC;AAED,WAAiB,MAAM;IAGrB;;;OAGG;IACH,SAAgB,IAAI,CAAC,KAAiB;QACpC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;QAE1D,OAAO,CACL,mBAAU,UAAU,KAAM,MAAM,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,aAC5E,8BAAkB,MAAM,KAAK,MAAM,CAAC,GAAG,EAAE,GAAI,EAC5C,QAAQ,IACJ,CACR,CAAA;IACH,CAAC;IATe,OAAA,IAAI,OASnB,CAAA;AAKH,CAAC,EArBgB,MAAM,KAAN,MAAM,QAqBtB;AAED,gGAAgG;AAChG,0DAA0D;AAC1D,MAAM,OAAO,GAA4D;IACvE,OAAO,EAAE,CACP,8BAAiB,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,KAAK,aAChF,aAAG,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,aAAa,EAAC,MAAM,EAAC,WAAW,EAAC,KAAK,aACnF,eACE,CAAC,EAAC,kLAAkL,EACpL,eAAe,EAAC,MAAM,GACtB,EACF,eACE,CAAC,EAAC,kLAAkL,EACpL,eAAe,EAAC,WAAW,GAC3B,EACF,eACE,CAAC,EAAC,kLAAkL,EACpL,eAAe,EAAC,aAAa,GAC7B,EACF,eACE,CAAC,EAAC,+KAA+K,EACjL,eAAe,EAAC,aAAa,GAC7B,EACF,eACE,CAAC,EAAC,6KAA6K,EAC/K,eAAe,EAAC,cAAc,GAC9B,EACF,eACE,CAAC,EAAC,gKAAgK,EAClK,eAAe,EAAC,cAAc,GAC9B,EACF,eACE,CAAC,EAAC,0KAA0K,EAC5K,eAAe,EAAC,cAAc,GAC9B,EACF,eACE,CAAC,EAAC,6KAA6K,EAC/K,eAAe,EAAC,eAAe,GAC/B,IACA,EACJ,eACE,CAAC,EAAC,8KAA8K,EAChL,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,WAAW,EAAC,KAAK,GACjB,EACF,eACE,CAAC,EAAC,2IAA2I,EAC7I,IAAI,EAAC,cAAc,GACnB,IACE,CACP;CACF,CAAA;AAED,IAAU,MAAM,CAwDf;AAxDD,WAAU,MAAM;IACD,WAAI,GAAG,KAAK,CACvB;QACE,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,oBAAoB;QACrC,WAAW,EAAE,gBAAgB;QAC7B,YAAY,EAAE,MAAM;QACpB,WAAW,EAAE,OAAO;QACpB,WAAW,EAAE,SAAS;QACtB,KAAK,EAAE,iBAAiB;QACxB,SAAS,EAAE,GAAG;QACd,WAAW,EAAE,OAAO;QACpB,OAAO,EAAE,aAAa;QACtB,eAAe,EAAE,IAAI;QACrB,cAAc,EAAE,IAAI;QACpB,YAAY,EAAE,GAAG;QACjB,aAAa,EAAE,kBAAkB;QACjC,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,QAAQ;KACrB,EACD,EAAE,EAAE,EAAE,qBAAqB,EAAE,CAC9B,CAAA;IAEY,UAAG,GAAG,KAAK,CACtB;QACE,eAAe,EAAE,sBAAsB;QACvC,YAAY,EAAE,MAAM;QACpB,WAAW,EAAE,OAAO;QACpB,UAAU,EAAE,WAAW;QACvB,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,GAAG;KACX,EACD,EAAE,EAAE,EAAE,oBAAoB,EAAE,CAC7B,CAAA;IAED,kGAAkG;IACrF,aAAM,GAAG,QAAQ,CAC5B;QACE,IAAI,EAAE;YACJ,UAAU,EAAE,UAAU;YACtB,eAAe,EAAE,oBAAoB;YACrC,YAAY,EAAE,IAAI;YAClB,SAAS,EAAE,YAAY;YACvB,KAAK,EAAE,iBAAiB;YACxB,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,UAAU;YACpB,SAAS,EAAE,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE;SACxE;QACD,eAAe,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QACpC,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE;KACpC,EACD,EAAE,EAAE,EAAE,gBAAgB,EAAE,CACzB,CAAA;AACH,CAAC,EAxDS,MAAM,KAAN,MAAM,QAwDf"}