@tempoxyz/ds 0.2.5 → 0.3.0

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

@@ -0,0 +1,121 @@
+import type { ComponentPropsWithRef } from 'react';
+import type * as zyzz from 'zyzz';
+/**
+ * A row that follows the status of one payment or task, such as a deposit on its way. It renders
+ * a `div` with `role="status"`, so screen readers announce a change of its text politely. Compose
+ * a leading `StatusRow.Icon`, a `StatusRow.Content` with a title and a description, and an
+ * optional trailing `StatusChip`.
+ *
+ * - Lead with a `Spinner` while the task runs, and with a check once `intent` is `positive`.
+ * - State the amount or the task in the title, and the expected wait in the description.
+ * - Keep one status row per task. Use `ListGroup` for a list of finished payments.
+ *
+ * @example
+ * <StatusRow>
+ *   <StatusRow.Icon>
+ *     <Spinner />
+ *   </StatusRow.Icon>
+ *   <StatusRow.Content>
+ *     <StatusRow.Title>Waiting for $10.00</StatusRow.Title>
+ *     <StatusRow.Description>Usually under a minute on Tempo.</StatusRow.Description>
+ *   </StatusRow.Content>
+ *   <StatusChip intent="warning" size="small">
+ *     Pending
+ *   </StatusChip>
+ * </StatusRow>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role | MDN status role}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html | WCAG 2.2 Status Messages}
+ */
+export declare function StatusRow(props: StatusRow.Props): import("react").JSX.Element;
+export declare namespace StatusRow {
+    /** Stacks a `StatusRow.Title` above a `StatusRow.Description`, and takes the free width. */
+    function Content(props: Content.Props): import("react").JSX.Element;
+    namespace Content {
+        type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.content>;
+    }
+    /** Secondary text under the title, such as the expected wait. It wraps onto more lines. */
+    function Description(props: Description.Props): import("react").JSX.Element;
+    namespace Description {
+        type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.description>;
+    }
+    /**
+     * The leading mark, hidden from assistive technology. An icon renders at 24px in the color of
+     * the row's `intent`, and a `Spinner` keeps its 16px.
+     */
+    function Icon(props: Icon.Props): import("react").JSX.Element;
+    namespace Icon {
+        type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.icon>;
+    }
+    type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.row>;
+    /** The task, such as the amount that the row waits for. */
+    function Title(props: Title.Props): import("react").JSX.Element;
+    namespace Title {
+        type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.title>;
+    }
+}
+declare namespace styles {
+    const content: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly display: "flex";
+            readonly flexDirection: "column";
+            readonly flexGrow: "1 !custom";
+            readonly minWidth: "0";
+        };
+    }, "react">;
+    const description: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly color: "content.secondary";
+            readonly typography: "body.b3";
+        };
+    }, "react">;
+    const icon: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly alignItems: "center";
+            readonly display: "inline-flex";
+            readonly flexShrink: "0 !custom";
+            readonly selectors: {
+                readonly '& > svg': {
+                    readonly height: "24";
+                    readonly width: "24";
+                };
+            };
+        };
+    }, "react">;
+    const row: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly alignItems: "center";
+            readonly borderRadius: "xs";
+            readonly boxSizing: "border-box";
+            readonly color: "content.primary";
+            readonly columnGap: "12";
+            readonly display: "flex";
+            readonly paddingBlock: "12";
+            readonly paddingInline: "16";
+            readonly transitionDuration: "200";
+            readonly transitionProperty: "background-color";
+            readonly transitionTimingFunction: "snappy";
+        };
+        readonly defaultVariants: {
+            readonly intent: "neutral";
+        };
+        readonly variants: {
+            readonly intent: {
+                readonly neutral: {
+                    readonly backgroundColor: "container.subtle";
+                };
+                readonly positive: {
+                    readonly backgroundColor: "container.positive";
+                    readonly selectors: {
+                        readonly '& > [data-status-row-icon]': {
+                            readonly color: "content.positive";
+                        };
+                    };
+                };
+            };
+        };
+    }, "react">;
+    const title: zyzz.style.ReturnType<"react">;
+}
+export {};
+//# sourceMappingURL=StatusRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusRow.d.ts","sourceRoot":"","sources":["../../../src/web/components/StatusRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAGjC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,+BAU/C;AAED,yBAAiB,SAAS,CAAC;IACzB,4FAA4F;IAC5F,SAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,+BAI3C;IAED,UAAiB,OAAO,CAAC;QACvB,KAAY,KAAK,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAA;KAC9F;IAED,2FAA2F;IAC3F,SAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,CAAC,KAAK,+BAInD;IAED,UAAiB,WAAW,CAAC;QAC3B,KAAY,KAAK,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAC/C,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,WAAW,CAAC,CAAA;KACjD;IAED;;;OAGG;IACH,SAAgB,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,+BAWrC;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;IAED,KAAY,KAAK,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,GAAG,CAAC,CAAA;IAEzF,2DAA2D;IAC3D,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAIvC;IAED,UAAiB,KAAK,CAAC;QACrB,KAAY,KAAK,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAA;KAC7F;CACF;AAED,kBAAU,MAAM,CAAC;IACR,MAAM,OAAO;;;;;;;eAKnB,CAAA;IAEM,MAAM,WAAW;;;;;eAGvB,CAAA;IAEM,MAAM,IAAI;;;;;;;;;;;;eAUhB,CAAA;IAGM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA2Bf,CAAA;IAEM,MAAM,KAAK,gCAGjB,CAAA;CACF"}

package/dist/web/components/StatusRow.js

@@ -0,0 +1,75 @@
+
+import { Props as __zyzzProps } from 'zyzz/runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { style, variants } from '../zyzz.config.js';
+/**
+ * A row that follows the status of one payment or task, such as a deposit on its way. It renders
+ * a `div` with `role="status"`, so screen readers announce a change of its text politely. Compose
+ * a leading `StatusRow.Icon`, a `StatusRow.Content` with a title and a description, and an
+ * optional trailing `StatusChip`.
+ *
+ * - Lead with a `Spinner` while the task runs, and with a check once `intent` is `positive`.
+ * - State the amount or the task in the title, and the expected wait in the description.
+ * - Keep one status row per task. Use `ListGroup` for a list of finished payments.
+ *
+ * @example
+ * <StatusRow>
+ *   <StatusRow.Icon>
+ *     <Spinner />
+ *   </StatusRow.Icon>
+ *   <StatusRow.Content>
+ *     <StatusRow.Title>Waiting for $10.00</StatusRow.Title>
+ *     <StatusRow.Description>Usually under a minute on Tempo.</StatusRow.Description>
+ *   </StatusRow.Content>
+ *   <StatusChip intent="warning" size="small">
+ *     Pending
+ *   </StatusChip>
+ * </StatusRow>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role | MDN status role}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html | WCAG 2.2 Status Messages}
+ */
+export function StatusRow(props) {
+    const { className, intent, vars, ...attributes } = props;
+    return (_jsx("div", { role: "status", ...attributes, ...styles.row({ className, intent, style: props.style, vars }) }));
+}
+(function (StatusRow) {
+    /** Stacks a `StatusRow.Title` above a `StatusRow.Description`, and takes the free width. */
+    function Content(props) {
+        const { className, vars, ...attributes } = props;
+        return _jsx("div", { ...attributes, ...styles.content({ className, style: props.style, vars }) });
+    }
+    StatusRow.Content = Content;
+    /** Secondary text under the title, such as the expected wait. It wraps onto more lines. */
+    function Description(props) {
+        const { className, vars, ...attributes } = props;
+        return _jsx("span", { ...attributes, ...styles.description({ className, style: props.style, vars }) });
+    }
+    StatusRow.Description = Description;
+    /**
+     * The leading mark, hidden from assistive technology. An icon renders at 24px in the color of
+     * the row's `intent`, and a `Spinner` keeps its 16px.
+     */
+    function Icon(props) {
+        const { className, vars, ...attributes } = props;
+        return (_jsx("span", { "aria-hidden": "true", ...attributes, "data-status-row-icon": "", ...styles.icon({ className, style: props.style, vars }) }));
+    }
+    StatusRow.Icon = Icon;
+    /** The task, such as the amount that the row waits for. */
+    function Title(props) {
+        const { className, vars, ...attributes } = props;
+        return _jsx("span", { ...attributes, ...styles.title({ className, style: props.style, vars }) });
+    }
+    StatusRow.Title = Title;
+})(StatusRow || (StatusRow = {}));
+var styles;
+(function (styles) {
+    styles.content = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-vNIJWL0 z_tds_2f_web-vNIJWL1 z_tds_2f_web-vNIJWL2 z_tds_2f_web-vNIJWL3"+" "+external:"z_tds_2f_web-vNIJWL0 z_tds_2f_web-vNIJWL1 z_tds_2f_web-vNIJWL2 z_tds_2f_web-vNIJWL3",result=inline?{className,style:inline}:{className};let value;return result});
+    styles.description = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-vNIJWL4 z_tds_2f_web-vNIJWL5 z_tds_2f_web-vNIJWL6 z_tds_2f_web-vNIJWL7 z_tds_2f_web-vNIJWL8 z_tds_2f_web-vNIJWL9"+" "+external:"z_tds_2f_web-vNIJWL4 z_tds_2f_web-vNIJWL5 z_tds_2f_web-vNIJWL6 z_tds_2f_web-vNIJWL7 z_tds_2f_web-vNIJWL8 z_tds_2f_web-vNIJWL9",result=inline?{className,style:inline}:{className};let value;return result});
+    styles.icon = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-vNIJWLa z_tds_2f_web-vNIJWLb z_tds_2f_web-vNIJWLc z_tds_2f_web-vNIJWLd z_tds_2f_web-vNIJWLe"+" "+external:"z_tds_2f_web-vNIJWLa z_tds_2f_web-vNIJWLb z_tds_2f_web-vNIJWLc z_tds_2f_web-vNIJWLd z_tds_2f_web-vNIJWLe",result=inline?{className,style:inline}:{className};let value;return result});
+    // Fields and alerts pad a 12px corner by 16px, and the row keeps 12px above and below its text.
+    styles.row = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-vNIJWLa z_tds_2f_web-vNIJWLf z_tds_2f_web-vNIJWLg z_tds_2f_web-vNIJWLh z_tds_2f_web-vNIJWLi z_tds_2f_web-vNIJWLj z_tds_2f_web-vNIJWLk z_tds_2f_web-vNIJWLl z_tds_2f_web-vNIJWLm z_tds_2f_web-vNIJWLn z_tds_2f_web-vNIJWLo z_tds_2f_web-vNIJWLp z_tds_2f_web-vNIJWLq z_tds_2f_web-vNIJWLr"+" "+external:"z_tds_2f_web-vNIJWLa z_tds_2f_web-vNIJWLf z_tds_2f_web-vNIJWLg z_tds_2f_web-vNIJWLh z_tds_2f_web-vNIJWLi z_tds_2f_web-vNIJWLj z_tds_2f_web-vNIJWLk z_tds_2f_web-vNIJWLl z_tds_2f_web-vNIJWLm z_tds_2f_web-vNIJWLn z_tds_2f_web-vNIJWLo z_tds_2f_web-vNIJWLp z_tds_2f_web-vNIJWLq z_tds_2f_web-vNIJWLr",result=inline?{className,style:inline}:{className};let value;value=Object.hasOwn(input,"intent")?input["intent"]:void 0;if(value===void 0)value="neutral";if(value!==null&&value!==void 0)result["data-intent"]=String(value);return result});
+    styles.title = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-vNIJWLs z_tds_2f_web-vNIJWLt z_tds_2f_web-vNIJWLu z_tds_2f_web-vNIJWLv z_tds_2f_web-vNIJWLw z_tds_2f_web-vNIJWLx"});
+})(styles || (styles = {}));
+//# sourceMappingURL=StatusRow.js.map
+import './StatusRow.css';

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

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