@tempoxyz/ds 0.3.6 → 0.3.7

package/dist/web/components/BadgedLogo.css

@@ -0,0 +1 @@
+.z_tds_2f_web-JEzsAr0{align-items:center}.z_tds_2f_web-JEzsAr1{background-color:var(--z-tds_2f_web-color-background-secondary,light-dark(var(--z-tds_2f_web-color-neutral-000,#fff),var(--z-tds_2f_web-color-neutral-092,#141414)))}.z_tds_2f_web-JEzsAr2{border-radius:var(--z-tds_2f_web-radius-full,var(--z-tds_2f_web-spacing-999,62.4375rem))}.z_tds_2f_web-JEzsAr3{box-shadow:0 0 0 2px var(--z-tds_2f_web-color-background-elevated,light-dark(var(--z-tds_2f_web-color-neutral-000,#fff),#1a1a1a))}.z_tds_2f_web-JEzsAr4{box-sizing:border-box}.z_tds_2f_web-JEzsAr5{color:var(--z-tds_2f_web-color-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-100,#000),var(--z-tds_2f_web-color-neutral-000,#fff)))}.z_tds_2f_web-JEzsAr6{corner-shape:round}.z_tds_2f_web-JEzsAr7{display:inline-flex}.z_tds_2f_web-JEzsAr8{height:var(--z-tds_2f_web-spacing-20,1.25rem)}.z_tds_2f_web-JEzsAr9{inset-block-end:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-JEzsAra{inset-inline-end:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-JEzsArb{justify-content:center}.z_tds_2f_web-JEzsArc{position:absolute}.z_tds_2f_web-JEzsArd{width:var(--z-tds_2f_web-spacing-20,1.25rem)}.z_tds_2f_web-JEzsAre{&>svg{flex-shrink:0}}.z_tds_2f_web-JEzsArf{&>svg{height:var(--z-tds_2f_web-spacing-12,.75rem)}}.z_tds_2f_web-JEzsArg{&>svg{width:var(--z-tds_2f_web-spacing-12,.75rem)}}.z_tds_2f_web-JEzsArh{flex-shrink:0}.z_tds_2f_web-JEzsAri{padding:var(--z-tds_2f_web-spacing-6,.375rem)}.z_tds_2f_web-JEzsArj{position:relative}.z_tds_2f_web-JEzsArk{vertical-align:middle}.z_tds_2f_web-JEzsArl{&>:not([data-badged-logo-badge]){height:var(--z-tds_2f_web-spacing-44,2.75rem)}}.z_tds_2f_web-JEzsArm{&>:not([data-badged-logo-badge]){width:var(--z-tds_2f_web-spacing-44,2.75rem)}}.z_tds_2f_web-JEzsArn{background-color:var(--z-tds_2f_web-color-container-regular,light-dark(var(--z-tds_2f_web-color-neutral-shade-004,#0000000a),var(--z-tds_2f_web-color-neutral-tint-008,#ffffff14)))}.z_tds_2f_web-JEzsAro{border-radius:var(--z-tds_2f_web-radius-xs,calc(.75rem * var(--tds-corner-scale,1)))}.z_tds_2f_web-JEzsArp{height:var(--z-tds_2f_web-spacing-44,2.75rem)}.z_tds_2f_web-JEzsArq{font-family:var(--z-tds_2f_web-typography-heading-h3-fontFamily,var(--z-tds_2f_web-fontFamily-heading,Pilat, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif))}.z_tds_2f_web-JEzsArr{font-size:var(--z-tds_2f_web-typography-heading-h3-fontSize,20px)}.z_tds_2f_web-JEzsArs{font-weight:var(--z-tds_2f_web-typography-heading-h3-fontWeight,500)}.z_tds_2f_web-JEzsArt{letter-spacing:var(--z-tds_2f_web-typography-heading-h3-letterSpacing,-.3px)}.z_tds_2f_web-JEzsAru{line-height:var(--z-tds_2f_web-typography-heading-h3-lineHeight,23px)}.z_tds_2f_web-JEzsArv{width:var(--z-tds_2f_web-spacing-44,2.75rem)}

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

@@ -0,0 +1,44 @@
+/** The Badged Logo: a token or app logo with a small badge at its lower trailing corner. @module */
+import type { ComponentPropsWithRef } from 'react';
+/**
+ * A logo with a small round badge on its lower trailing corner, such as the arrow that marks a
+ * token or an app as the destination of a transfer. The root insets the logo 6px, so the badge and
+ * its ring stay inside its 56px box.
+ *
+ * - Put one logo first: a `TokenLogo`, or a `BadgedLogo.Tile` for an app without artwork. The root
+ *   sizes it to 44px.
+ * - Put one `BadgedLogo.Badge` with one 12px icon last.
+ * - Name what the logo and the badge mean in text beside it. The parts add no semantics.
+ *
+ * @example
+ * <BadgedLogo.Root>
+ *   <TokenLogo symbol="USDC" />
+ *   <BadgedLogo.Badge>
+ *     <ArrowRight />
+ *   </BadgedLogo.Badge>
+ * </BadgedLogo.Root>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span | MDN span element}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ */
+export declare namespace BadgedLogo {
+    /** Renders the 20px circle of the badge, which centers one 12px icon in the primary color. */
+    function Badge(props: Badge.Props): import("react").JSX.Element;
+    namespace Badge {
+        type Props = ComponentPropsWithRef<'span'>;
+    }
+    /** Renders the 56px `<span>` that holds the logo and its `BadgedLogo.Badge`. */
+    function Root(props: Root.Props): import("react").JSX.Element;
+    namespace Root {
+        type Props = ComponentPropsWithRef<'span'>;
+    }
+    /**
+     * Renders a 44px rounded square that stands in for the logo of an app without artwork, such as
+     * the first letter of its name.
+     */
+    function Tile(props: Tile.Props): import("react").JSX.Element;
+    namespace Tile {
+        type Props = ComponentPropsWithRef<'span'>;
+    }
+}
+//# sourceMappingURL=BadgedLogo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BadgedLogo.d.ts","sourceRoot":"","sources":["../../../src/web/components/BadgedLogo.tsx"],"names":[],"mappings":"AAAA,oGAAoG;AACpG,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAGlD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,yBAAiB,UAAU,CAAC;IAC1B,8FAA8F;IAC9F,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAUvC;IAED,UAAiB,KAAK,CAAC;QACrB,KAAY,KAAK,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAA;KAClD;IAED,gFAAgF;IAChF,SAAgB,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,+BAIrC;IAED,UAAiB,IAAI,CAAC;QACpB,KAAY,KAAK,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAA;KAClD;IAED;;;OAGG;IACH,SAAgB,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,+BAIrC;IAED,UAAiB,IAAI,CAAC;QACpB,KAAY,KAAK,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAA;KAClD;CACF"}

package/dist/web/components/BadgedLogo.js

@@ -0,0 +1,59 @@
+
+import { Props as __zyzzProps } from 'zyzz/runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { style, vars } from '../zyzz.config.js';
+/**
+ * A logo with a small round badge on its lower trailing corner, such as the arrow that marks a
+ * token or an app as the destination of a transfer. The root insets the logo 6px, so the badge and
+ * its ring stay inside its 56px box.
+ *
+ * - Put one logo first: a `TokenLogo`, or a `BadgedLogo.Tile` for an app without artwork. The root
+ *   sizes it to 44px.
+ * - Put one `BadgedLogo.Badge` with one 12px icon last.
+ * - Name what the logo and the badge mean in text beside it. The parts add no semantics.
+ *
+ * @example
+ * <BadgedLogo.Root>
+ *   <TokenLogo symbol="USDC" />
+ *   <BadgedLogo.Badge>
+ *     <ArrowRight />
+ *   </BadgedLogo.Badge>
+ * </BadgedLogo.Root>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span | MDN span element}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ */
+export var BadgedLogo;
+(function (BadgedLogo) {
+    /** Renders the 20px circle of the badge, which centers one 12px icon in the primary color. */
+    function Badge(props) {
+        const { className, ...attributes } = props;
+        return (_jsx("span", { "data-badged-logo-badge": "", ...attributes, ...styles.badge({ className, style: props.style }) }));
+    }
+    BadgedLogo.Badge = Badge;
+    /** Renders the 56px `<span>` that holds the logo and its `BadgedLogo.Badge`. */
+    function Root(props) {
+        const { className, ...attributes } = props;
+        return _jsx("span", { ...attributes, ...styles.root({ className, style: props.style }) });
+    }
+    BadgedLogo.Root = Root;
+    /**
+     * Renders a 44px rounded square that stands in for the logo of an app without artwork, such as
+     * the first letter of its name.
+     */
+    function Tile(props) {
+        const { className, ...attributes } = props;
+        return _jsx("span", { ...attributes, ...styles.tile({ className, style: props.style }) });
+    }
+    BadgedLogo.Tile = Tile;
+})(BadgedLogo || (BadgedLogo = {}));
+var styles;
+(function (styles) {
+    // A 2px ring in the elevated background separates the badge from the logo below it.
+    styles.badge = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-JEzsAr0 z_tds_2f_web-JEzsAr1 z_tds_2f_web-JEzsAr2 z_tds_2f_web-JEzsAr3 z_tds_2f_web-JEzsAr4 z_tds_2f_web-JEzsAr5 z_tds_2f_web-JEzsAr6 z_tds_2f_web-JEzsAr7 z_tds_2f_web-JEzsAr8 z_tds_2f_web-JEzsAr9 z_tds_2f_web-JEzsAra z_tds_2f_web-JEzsArb z_tds_2f_web-JEzsArc z_tds_2f_web-JEzsArd z_tds_2f_web-JEzsAre z_tds_2f_web-JEzsArf z_tds_2f_web-JEzsArg"});
+    // The logo takes 44px whatever size it sets itself, such as the 32px of a large `TokenLogo`.
+    styles.root = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-JEzsAr0 z_tds_2f_web-JEzsAr7 z_tds_2f_web-JEzsArh z_tds_2f_web-JEzsArb z_tds_2f_web-JEzsAri z_tds_2f_web-JEzsArj z_tds_2f_web-JEzsArk z_tds_2f_web-JEzsArl z_tds_2f_web-JEzsArm"});
+    styles.tile = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-JEzsAr0 z_tds_2f_web-JEzsArn z_tds_2f_web-JEzsAro z_tds_2f_web-JEzsAr4 z_tds_2f_web-JEzsAr5 z_tds_2f_web-JEzsAr7 z_tds_2f_web-JEzsArp z_tds_2f_web-JEzsArb z_tds_2f_web-JEzsArq z_tds_2f_web-JEzsArr z_tds_2f_web-JEzsArs z_tds_2f_web-JEzsArt z_tds_2f_web-JEzsAru z_tds_2f_web-JEzsArv"});
+})(styles || (styles = {}));
+//# sourceMappingURL=BadgedLogo.js.map
+import './BadgedLogo.css';

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

@@ -0,0 +1 @@
+{"version":3,"file":"BadgedLogo.js","sourceRoot":"","sources":["../../../src/web/components/BadgedLogo.tsx"],"names":[],"mappings":"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"}