@tempoxyz/ds 0.2.6 → 0.3.0

package/dist/web/components/SplitBar.css

@@ -0,0 +1 @@
+.z_tds_2f_web-puyCZO0{align-items:center}.z_tds_2f_web-puyCZO1{column-gap:var(--z-tds_2f_web-spacing-6,.375rem)}.z_tds_2f_web-puyCZO2{display:inline-flex}.z_tds_2f_web-puyCZO3{white-space:nowrap}.z_tds_2f_web-puyCZO4{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-puyCZO5{font-family:var(--z-tds_2f_web-typography-body-b3-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}.z_tds_2f_web-puyCZO6{font-size:var(--z-tds_2f_web-typography-body-b3-fontSize,12px)}.z_tds_2f_web-puyCZO7{font-weight:var(--z-tds_2f_web-typography-body-b3-fontWeight,400)}.z_tds_2f_web-puyCZO8{letter-spacing:var(--z-tds_2f_web-typography-body-b3-letterSpacing,.15px)}.z_tds_2f_web-puyCZO9{line-height:var(--z-tds_2f_web-typography-body-b3-lineHeight,16px)}.z_tds_2f_web-puyCZOa{column-gap:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-puyCZOb{display:flex}.z_tds_2f_web-puyCZOc{flex-wrap:wrap}.z_tds_2f_web-puyCZOd{justify-content:space-between}.z_tds_2f_web-puyCZOe{flex-direction:column}.z_tds_2f_web-puyCZOf{row-gap:var(--z-tds_2f_web-spacing-10,.625rem)}.z_tds_2f_web-puyCZOg{flex-basis:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-puyCZOh{height:100%}.z_tds_2f_web-puyCZOi{min-width:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-puyCZOj{&:where([data-part=first]){background-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-puyCZOk{&:where([data-part=second]){background-color:var(--z-tds_2f_web-color-content-subtle,light-dark(var(--z-tds_2f_web-color-neutral-shade-020,#0003),var(--z-tds_2f_web-color-neutral-tint-020,#fff3)))}}.z_tds_2f_web-puyCZOl{border-radius:calc(.125rem * var(--tds-corner-scale,1))}.z_tds_2f_web-puyCZOm{flex-shrink:0}.z_tds_2f_web-puyCZOn{height:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-puyCZOo{width:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-puyCZOp{color:var(--z-tds_2f_web-color-content-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-056,#0000008f),var(--z-tds_2f_web-color-neutral-tint-056,#ffffff8f)))}.z_tds_2f_web-puyCZOq{background-color:var(--z-tds_2f_web-color-container-strong,light-dark(var(--z-tds_2f_web-color-neutral-shade-008,#00000014),var(--z-tds_2f_web-color-neutral-tint-016,#ffffff29)))}.z_tds_2f_web-puyCZOr{border-radius:var(--z-tds_2f_web-radius-full,var(--z-tds_2f_web-spacing-999,62.4375rem))}.z_tds_2f_web-puyCZOs{column-gap:var(--z-tds_2f_web-spacing-2,.125rem)}.z_tds_2f_web-puyCZOt{corner-shape:round}.z_tds_2f_web-puyCZOu{overflow:hidden}

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

@@ -0,0 +1,99 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type * as zyzz from 'zyzz';
+/**
+ * A bar that splits one total between two parts, such as the funds available to a wallet and the
+ * funds set aside for its agents, with a legend under it. It renders a `div`. The bar is hidden
+ * from assistive technology, so the legend carries each label and value.
+ *
+ * - Pass the two parts in reading order. The first fills in `content.primary`, and the second in
+ *   `content.subtle`.
+ * - Give each part a `text` with its formatted value, such as `$75.62`.
+ * - Use `BarChart` for values over time, and `Progress` for one task.
+ *
+ * @example
+ * <SplitBar
+ *   items={[
+ *     { label: 'Available', text: '$75.62', value: 75.62 },
+ *     { label: 'Agents', text: '$8.58', value: 8.58 },
+ *   ]}
+ * />
+ *
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html | WCAG 2.2 Use of Color}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html | WCAG 2.2 Info and Relationships}
+ */
+export declare function SplitBar(props: SplitBar.Props): import("react").JSX.Element;
+export declare namespace SplitBar {
+    /** One part of the total. */
+    type Item = {
+        /** Name of the part in the legend, such as Available. */
+        label: ReactNode;
+        /** Formatted value of the part in the legend, such as `$75.62`. */
+        text: ReactNode;
+        /**
+         * Share of the bar, in a unit that both parts share. A part of 0 draws no segment, and the
+         * other part fills the track.
+         */
+        value: number;
+    };
+    type Props = Omit<ComponentPropsWithRef<'div'>, 'children'> & zyzz.Props.Variants<typeof styles.root> & {
+        /** The two parts, in reading order. */
+        items: readonly [Item, Item];
+    };
+}
+declare namespace styles {
+    const entry: zyzz.style.ReturnType<"react">;
+    const label: zyzz.style.ReturnType<"react">;
+    const legend: zyzz.style.ReturnType<"react">;
+    const root: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly display: "flex";
+            readonly flexDirection: "column";
+            readonly rowGap: "10";
+        };
+    }, "react">;
+    const segment: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly flexBasis: "0";
+            readonly height: "100% !custom";
+            readonly minWidth: "0";
+        };
+        readonly defaultVariants: {
+            readonly part: "first";
+        };
+        readonly variants: {
+            readonly part: {
+                readonly first: {
+                    readonly backgroundColor: "content.primary";
+                };
+                readonly second: {
+                    readonly backgroundColor: "content.subtle";
+                };
+            };
+        };
+    }, "react">;
+    const swatch: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly borderRadius: "calc(0.125rem * var(--tds-corner-scale, 1)) !custom";
+            readonly flexShrink: "0 !custom";
+            readonly height: "8";
+            readonly width: "8";
+        };
+        readonly defaultVariants: {
+            readonly part: "first";
+        };
+        readonly variants: {
+            readonly part: {
+                readonly first: {
+                    readonly backgroundColor: "content.primary";
+                };
+                readonly second: {
+                    readonly backgroundColor: "content.subtle";
+                };
+            };
+        };
+    }, "react">;
+    const text: zyzz.style.ReturnType<"react">;
+    const track: zyzz.style.ReturnType<"react">;
+}
+export {};
+//# sourceMappingURL=SplitBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitBar.d.ts","sourceRoot":"","sources":["../../../src/web/components/SplitBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAGjC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,+BAmC7C;AAED,yBAAiB,QAAQ,CAAC;IACxB,6BAA6B;IAC7B,KAAY,IAAI,GAAG;QACjB,yDAAyD;QACzD,KAAK,EAAE,SAAS,CAAA;QAChB,mEAAmE;QACnE,IAAI,EAAE,SAAS,CAAA;QACf;;;WAGG;QACH,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IAED,KAAY,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAChE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG;QACxC,uCAAuC;QACvC,KAAK,EAAE,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;KAC7B,CAAA;CACJ;AAED,kBAAU,MAAM,CAAC;IACR,MAAM,KAAK,gCAGjB,CAAA;IAEM,MAAM,KAAK,gCAGjB,CAAA;IAGM,MAAM,MAAM,gCAGlB,CAAA;IAEM,MAAM,IAAI;;;;;;eAGhB,CAAA;IAEM,MAAM,OAAO;;;;;;;;;;;;;;;;;;;eAYnB,CAAA;IAGM,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;eAiBlB,CAAA;IAEM,MAAM,IAAI,gCAGhB,CAAA;IAGM,MAAM,KAAK,gCAWjB,CAAA;CACF"}

package/dist/web/components/SplitBar.js

@@ -0,0 +1,49 @@
+
+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 bar that splits one total between two parts, such as the funds available to a wallet and the
+ * funds set aside for its agents, with a legend under it. It renders a `div`. The bar is hidden
+ * from assistive technology, so the legend carries each label and value.
+ *
+ * - Pass the two parts in reading order. The first fills in `content.primary`, and the second in
+ *   `content.subtle`.
+ * - Give each part a `text` with its formatted value, such as `$75.62`.
+ * - Use `BarChart` for values over time, and `Progress` for one task.
+ *
+ * @example
+ * <SplitBar
+ *   items={[
+ *     { label: 'Available', text: '$75.62', value: 75.62 },
+ *     { label: 'Agents', text: '$8.58', value: 8.58 },
+ *   ]}
+ * />
+ *
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html | WCAG 2.2 Use of Color}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html | WCAG 2.2 Info and Relationships}
+ */
+export function SplitBar(props) {
+    const { className, items, vars, ...attributes } = props;
+    const total = items.reduce((sum, item) => sum + Math.max(item.value, 0), 0);
+    return (_jsxs("div", { ...attributes, ...styles.root({ className, style: props.style, vars }), children: [_jsx("div", { "aria-hidden": "true", ...styles.track(), children: items.map((item, index) => item.value > 0 ? (_jsx("span", { ...styles.segment({
+                        part: index === 0 ? 'first' : 'second',
+                        style: { flexGrow: item.value / total },
+                    }) }, index)) : null) }), _jsx("div", { ...styles.legend(), children: items.map((item, index) => (_jsxs("span", { ...styles.entry(), children: [_jsx("span", { "aria-hidden": "true", ...styles.swatch({ part: index === 0 ? 'first' : 'second' }) }), _jsx("span", { ...styles.label(), children: item.label }), _jsx("span", { ...styles.text(), children: item.text })] }, index))) })] }));
+}
+var styles;
+(function (styles) {
+    styles.entry = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-puyCZO0 z_tds_2f_web-puyCZO1 z_tds_2f_web-puyCZO2 z_tds_2f_web-puyCZO3"});
+    styles.label = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-puyCZO4 z_tds_2f_web-puyCZO5 z_tds_2f_web-puyCZO6 z_tds_2f_web-puyCZO7 z_tds_2f_web-puyCZO8 z_tds_2f_web-puyCZO9"});
+    // The legend pins its first entry to the start and its last to the end.
+    styles.legend = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-puyCZOa z_tds_2f_web-puyCZOb z_tds_2f_web-puyCZOc z_tds_2f_web-puyCZOd"});
+    styles.root = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-puyCZOb z_tds_2f_web-puyCZOe z_tds_2f_web-puyCZOf"+" "+external:"z_tds_2f_web-puyCZOb z_tds_2f_web-puyCZOe z_tds_2f_web-puyCZOf",result=inline?{className,style:inline}:{className};let value;return result});
+    styles.segment = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-puyCZOg z_tds_2f_web-puyCZOh z_tds_2f_web-puyCZOi z_tds_2f_web-puyCZOj z_tds_2f_web-puyCZOk"+" "+external:"z_tds_2f_web-puyCZOg z_tds_2f_web-puyCZOh z_tds_2f_web-puyCZOi z_tds_2f_web-puyCZOj z_tds_2f_web-puyCZOk",result=inline?{className,style:inline}:{className};let value;value=Object.hasOwn(input,"part")?input["part"]:void 0;if(value===void 0)value="first";if(value!==null&&value!==void 0)result["data-part"]=String(value);return result});
+    // A swatch keeps a 2px corner, which no radius token sets.
+    styles.swatch = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-puyCZOl z_tds_2f_web-puyCZOm z_tds_2f_web-puyCZOn z_tds_2f_web-puyCZOo z_tds_2f_web-puyCZOj z_tds_2f_web-puyCZOk"+" "+external:"z_tds_2f_web-puyCZOl z_tds_2f_web-puyCZOm z_tds_2f_web-puyCZOn z_tds_2f_web-puyCZOo z_tds_2f_web-puyCZOj z_tds_2f_web-puyCZOk",result=inline?{className,style:inline}:{className};let value;value=Object.hasOwn(input,"part")?input["part"]:void 0;if(value===void 0)value="first";if(value!==null&&value!==void 0)result["data-part"]=String(value);return result});
+    styles.text = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-puyCZOp z_tds_2f_web-puyCZO5 z_tds_2f_web-puyCZO6 z_tds_2f_web-puyCZO7 z_tds_2f_web-puyCZO8 z_tds_2f_web-puyCZO9"});
+    // The track clips the segments to its pill, and leaves 2px of the track between them.
+    styles.track = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-puyCZOq z_tds_2f_web-puyCZOr z_tds_2f_web-puyCZOs z_tds_2f_web-puyCZOt z_tds_2f_web-puyCZOb z_tds_2f_web-puyCZOn z_tds_2f_web-puyCZOu"});
+})(styles || (styles = {}));
+//# sourceMappingURL=SplitBar.js.map
+import './SplitBar.css';

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

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