@wallarm-org/design-system 3.2.0 → 3.3.0

package/dist/components/AnimatedBackground/blur/BlurBackground.d.ts

@@ -1,6 +1,12 @@
 import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export type BlurBackgroundPalette = 'default' | 'chat';
 export interface BlurBackgroundProps extends HTMLAttributes<HTMLDivElement> {
     ref?: Ref<HTMLDivElement>;
     children?: ReactNode;
+    /**
+     * Blob colours and layout. `'chat'` is the Wally chat panel mesh (Figma chat-bg 67:1254),
+     * tuned for a ~480px-wide panel and meant to be dimmed by the host (5–12% opacity).
+     */
+    palette?: BlurBackgroundPalette;
 }
 export declare const BlurBackground: FC<BlurBackgroundProps>;

package/dist/components/AnimatedBackground/blur/BlurBackground.js

@@ -75,134 +75,234 @@ const BLOBS = [
         base: 43
     }
 ];
+const CHAT_BLOBS = [
+    {
+        name: "b1-lavender-top",
+        style: {
+            width: "70%",
+            height: "45%",
+            left: "15%",
+            top: "-15%"
+        },
+        background: "#d4d2dc",
+        anim: "lg-f1",
+        base: 37
+    },
+    {
+        name: "b2-cream-right",
+        style: {
+            width: "55%",
+            height: "65%",
+            left: "55%",
+            top: "25%"
+        },
+        background: "#f5d8a0",
+        anim: "lg-f2",
+        base: 29
+    },
+    {
+        name: "b3-peach-mid",
+        style: {
+            width: "75%",
+            height: "40%",
+            left: "-5%",
+            top: "35%"
+        },
+        background: "#f0cdb8",
+        anim: "lg-f6",
+        base: 43
+    },
+    {
+        name: "b4-orange-outer",
+        style: {
+            width: "55%",
+            height: "40%",
+            left: "15%",
+            top: "55%"
+        },
+        background: "#ff8a3a",
+        anim: "lg-f4",
+        base: 31
+    },
+    {
+        name: "b6-cream-br",
+        style: {
+            width: "50%",
+            height: "35%",
+            left: "55%",
+            top: "65%"
+        },
+        background: "#f8e0b0",
+        anim: "lg-f5",
+        base: 41
+    },
+    {
+        name: "b5-orange-core",
+        style: {
+            width: "35%",
+            height: "22%",
+            left: "28%",
+            top: "73%"
+        },
+        background: "#ff5a08",
+        anim: "lg-f3",
+        base: 23
+    }
+];
 const BLUR = 90;
 const SPEED = 2;
+const CHAT_SPEED = 21.5;
 const BlurBackground = (t0)=>{
-    const $ = c(26);
+    const $ = c(38);
     let children;
     let className;
     let ref;
     let rest;
     let style;
+    let t1;
     if ($[0] !== t0) {
-        ({ ref, className, style, children, ...rest } = t0);
+        ({ ref, className, style, children, palette: t1, ...rest } = t0);
         $[0] = t0;
         $[1] = children;
         $[2] = className;
         $[3] = ref;
         $[4] = rest;
         $[5] = style;
+        $[6] = t1;
     } else {
         children = $[1];
         className = $[2];
         ref = $[3];
         rest = $[4];
         style = $[5];
+        t1 = $[6];
     }
-    let t1;
-    if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-        t1 = {
-            "--lg-blur": BLUR
-        };
-        $[6] = t1;
-    } else t1 = $[6];
+    const palette = void 0 === t1 ? "default" : t1;
+    const blobs = "chat" === palette ? CHAT_BLOBS : BLOBS;
+    const speed = "chat" === palette ? CHAT_SPEED : SPEED;
+    const paletteAttr = "default" === palette ? void 0 : palette;
     let t2;
     if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-        t2 = /*#__PURE__*/ jsx("div", {
-            className: "lg-mesh",
-            style: t1,
-            children: BLOBS.map(_temp)
-        });
+        t2 = {
+            "--lg-blur": BLUR
+        };
         $[7] = t2;
     } else t2 = $[7];
-    const meshContent = t2;
-    if (null == children) {
-        let t3;
-        if ($[8] !== className) {
-            t3 = cn("lg-frame", className);
-            $[8] = className;
-            $[9] = t3;
-        } else t3 = $[9];
+    let t3;
+    if ($[8] !== blobs || $[9] !== speed) {
         let t4;
-        if ($[10] !== ref || $[11] !== rest || $[12] !== style || $[13] !== t3) {
-            t4 = /*#__PURE__*/ jsx("div", {
+        if ($[11] !== speed) {
+            t4 = (b)=>/*#__PURE__*/ jsx("div", {
+                    className: "lg-blob",
+                    style: {
+                        ...b.style,
+                        background: b.background,
+                        animationName: b.anim,
+                        animationDuration: `${b.base / speed}s`,
+                        animationTimingFunction: "ease-in-out",
+                        animationIterationCount: "infinite"
+                    }
+                }, b.name);
+            $[11] = speed;
+            $[12] = t4;
+        } else t4 = $[12];
+        t3 = blobs.map(t4);
+        $[8] = blobs;
+        $[9] = speed;
+        $[10] = t3;
+    } else t3 = $[10];
+    let t4;
+    if ($[13] !== t3) {
+        t4 = /*#__PURE__*/ jsx("div", {
+            className: "lg-mesh",
+            style: t2,
+            children: t3
+        });
+        $[13] = t3;
+        $[14] = t4;
+    } else t4 = $[14];
+    const meshContent = t4;
+    if (null == children) {
+        let t5;
+        if ($[15] !== className) {
+            t5 = cn("lg-frame", className);
+            $[15] = className;
+            $[16] = t5;
+        } else t5 = $[16];
+        let t6;
+        if ($[17] !== meshContent || $[18] !== paletteAttr || $[19] !== ref || $[20] !== rest || $[21] !== style || $[22] !== t5) {
+            t6 = /*#__PURE__*/ jsx("div", {
                 "data-slot": "blur-background",
+                "data-palette": paletteAttr,
                 ...rest,
                 ref: ref,
-                className: t3,
+                className: t5,
                 style: style,
                 "aria-hidden": "true",
                 children: meshContent
             });
-            $[10] = ref;
-            $[11] = rest;
-            $[12] = style;
-            $[13] = t3;
-            $[14] = t4;
-        } else t4 = $[14];
-        return t4;
+            $[17] = meshContent;
+            $[18] = paletteAttr;
+            $[19] = ref;
+            $[20] = rest;
+            $[21] = style;
+            $[22] = t5;
+            $[23] = t6;
+        } else t6 = $[23];
+        return t6;
     }
-    let t3;
-    if ($[15] !== className) {
-        t3 = cn("lg-frame relative", className);
-        $[15] = className;
-        $[16] = t3;
-    } else t3 = $[16];
-    let t4;
-    if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-        t4 = /*#__PURE__*/ jsx("div", {
+    let t5;
+    if ($[24] !== className) {
+        t5 = cn("lg-frame relative", className);
+        $[24] = className;
+        $[25] = t5;
+    } else t5 = $[25];
+    let t6;
+    if ($[26] !== meshContent) {
+        t6 = /*#__PURE__*/ jsx("div", {
             "aria-hidden": "true",
             className: "absolute inset-0 pointer-events-none",
             children: meshContent
         });
-        $[17] = t4;
-    } else t4 = $[17];
-    let t5;
-    if ($[18] !== children) {
-        t5 = /*#__PURE__*/ jsx("div", {
+        $[26] = meshContent;
+        $[27] = t6;
+    } else t6 = $[27];
+    let t7;
+    if ($[28] !== children) {
+        t7 = /*#__PURE__*/ jsx("div", {
             className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
             children: /*#__PURE__*/ jsx("div", {
                 className: "pointer-events-auto",
                 children: children
             })
         });
-        $[18] = children;
-        $[19] = t5;
-    } else t5 = $[19];
-    let t6;
-    if ($[20] !== ref || $[21] !== rest || $[22] !== style || $[23] !== t3 || $[24] !== t5) {
-        t6 = /*#__PURE__*/ jsxs("div", {
+        $[28] = children;
+        $[29] = t7;
+    } else t7 = $[29];
+    let t8;
+    if ($[30] !== paletteAttr || $[31] !== ref || $[32] !== rest || $[33] !== style || $[34] !== t5 || $[35] !== t6 || $[36] !== t7) {
+        t8 = /*#__PURE__*/ jsxs("div", {
             "data-slot": "blur-background",
+            "data-palette": paletteAttr,
             ...rest,
             ref: ref,
-            className: t3,
+            className: t5,
             style: style,
             children: [
-                t4,
-                t5
+                t6,
+                t7
             ]
         });
-        $[20] = ref;
-        $[21] = rest;
-        $[22] = style;
-        $[23] = t3;
-        $[24] = t5;
-        $[25] = t6;
-    } else t6 = $[25];
-    return t6;
+        $[30] = paletteAttr;
+        $[31] = ref;
+        $[32] = rest;
+        $[33] = style;
+        $[34] = t5;
+        $[35] = t6;
+        $[36] = t7;
+        $[37] = t8;
+    } else t8 = $[37];
+    return t8;
 };
 BlurBackground.displayName = "BlurBackground";
-function _temp(b) {
-    return /*#__PURE__*/ jsx("div", {
-        className: "lg-blob",
-        style: {
-            ...b.style,
-            background: b.background,
-            animationName: b.anim,
-            animationDuration: `${b.base / SPEED}s`,
-            animationTimingFunction: "ease-in-out",
-            animationIterationCount: "infinite"
-        }
-    }, b.name);
-}
 export { BlurBackground };

package/dist/components/AnimatedBackground/blur/index.d.ts

@@ -1 +1 @@
-export { BlurBackground, type BlurBackgroundProps } from './BlurBackground.js';
+export { BlurBackground, type BlurBackgroundPalette, type BlurBackgroundProps, } from './BlurBackground.js';

package/dist/components/AnimatedBackground/index.d.ts

@@ -1,3 +1,3 @@
 export { AnimatedBackground, type AnimatedBackgroundProps } from './AnimatedBackground.js';
-export { BlurBackground, type BlurBackgroundProps } from './blur/BlurBackground.js';
+export { BlurBackground, type BlurBackgroundPalette, type BlurBackgroundProps, } from './blur/BlurBackground.js';
 export { PixelBackground, type PixelBackgroundProps } from './pixel/PixelBackground.js';

package/dist/components/ApprovalCard/ApprovalCard.d.ts

@@ -0,0 +1,13 @@
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export type ApprovalCardStatus = 'pending' | 'approved' | 'rejected';
+export interface ApprovalCardProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** Pending shows `children` (content + actions); resolved states replace them with a status row. */
+    status?: ApprovalCardStatus;
+    /** Shown above the card in every state. Pass `null` to hide it. */
+    caption?: ReactNode;
+    approvedLabel?: ReactNode;
+    rejectedLabel?: ReactNode;
+}
+export declare const ApprovalCard: FC<ApprovalCardProps>;

package/dist/components/ApprovalCard/ApprovalCard.js

@@ -0,0 +1,249 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useEffect, useId, useRef } from "react";
+import { Check, X } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/mergeRefs.js";
+import { TestIdProvider, useTestId } from "../../utils/testId.js";
+import { approvalCardCaptionVariants, approvalCardStatusIconVariants, approvalCardSurfaceVariants, approvalCardVariants } from "./classes.js";
+const Part = (t0)=>{
+    const $ = c(6);
+    let props;
+    let slot;
+    if ($[0] !== t0) {
+        ({ slot, ...props } = t0);
+        $[0] = t0;
+        $[1] = props;
+        $[2] = slot;
+    } else {
+        props = $[1];
+        slot = $[2];
+    }
+    const t1 = useTestId(slot);
+    let t2;
+    if ($[3] !== props || $[4] !== t1) {
+        t2 = /*#__PURE__*/ jsx("div", {
+            ...props,
+            "data-testid": t1
+        });
+        $[3] = props;
+        $[4] = t1;
+        $[5] = t2;
+    } else t2 = $[5];
+    return t2;
+};
+const ApprovalCard = (t0)=>{
+    const $ = c(52);
+    let children;
+    let className;
+    let onBlur;
+    let onFocus;
+    let props;
+    let ref;
+    let t1;
+    let t2;
+    let t3;
+    let t4;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, status: t1, caption: t2, approvedLabel: t3, rejectedLabel: t4, className, children, "data-testid": testIdProp, onFocus, onBlur, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = onBlur;
+        $[4] = onFocus;
+        $[5] = props;
+        $[6] = ref;
+        $[7] = t1;
+        $[8] = t2;
+        $[9] = t3;
+        $[10] = t4;
+        $[11] = testIdProp;
+    } else {
+        children = $[1];
+        className = $[2];
+        onBlur = $[3];
+        onFocus = $[4];
+        props = $[5];
+        ref = $[6];
+        t1 = $[7];
+        t2 = $[8];
+        t3 = $[9];
+        t4 = $[10];
+        testIdProp = $[11];
+    }
+    const status = void 0 === t1 ? "pending" : t1;
+    const caption = void 0 === t2 ? "Requires your approval" : t2;
+    const approvedLabel = void 0 === t3 ? "Approved" : t3;
+    const rejectedLabel = void 0 === t4 ? "Rejected" : t4;
+    const testId = useTestId("approval-card", testIdProp);
+    const captionId = useId();
+    const rootRef = useRef(null);
+    const statusRef = useRef(null);
+    const prevStatus = useRef(status);
+    const focusWithin = useRef(false);
+    const StatusIcon = "approved" === status ? Check : X;
+    const hasCaption = null != caption && false !== caption && "" !== caption;
+    const labelledBy = !hasCaption || props["aria-label"] || props["aria-labelledby"] ? void 0 : captionId;
+    let t5;
+    let t6;
+    if ($[12] !== status) {
+        t5 = ()=>{
+            const wasPending = "pending" === prevStatus.current;
+            prevStatus.current = status;
+            if (!wasPending || "pending" === status || !focusWithin.current) return;
+            const active = document.activeElement;
+            if (!active || active === document.body || rootRef.current?.contains(active)) statusRef.current?.focus({
+                preventScroll: true
+            });
+        };
+        t6 = [
+            status
+        ];
+        $[12] = status;
+        $[13] = t5;
+        $[14] = t6;
+    } else {
+        t5 = $[13];
+        t6 = $[14];
+    }
+    useEffect(t5, t6);
+    let t7;
+    if ($[15] !== ref) {
+        t7 = mergeRefs(ref, rootRef);
+        $[15] = ref;
+        $[16] = t7;
+    } else t7 = $[16];
+    let t8;
+    if ($[17] !== onFocus) {
+        t8 = (e)=>{
+            focusWithin.current = true;
+            onFocus?.(e);
+        };
+        $[17] = onFocus;
+        $[18] = t8;
+    } else t8 = $[18];
+    let t9;
+    if ($[19] !== onBlur) {
+        t9 = (e_0)=>{
+            focusWithin.current = e_0.currentTarget.contains(e_0.relatedTarget);
+            onBlur?.(e_0);
+        };
+        $[19] = onBlur;
+        $[20] = t9;
+    } else t9 = $[20];
+    let t10;
+    if ($[21] !== className) {
+        t10 = cn(approvalCardVariants(), className);
+        $[21] = className;
+        $[22] = t10;
+    } else t10 = $[22];
+    let t11;
+    if ($[23] !== caption || $[24] !== captionId || $[25] !== hasCaption) {
+        t11 = hasCaption && /*#__PURE__*/ jsx(Part, {
+            slot: "caption",
+            id: captionId,
+            "data-slot": "approval-card-caption",
+            className: approvalCardCaptionVariants(),
+            children: caption
+        });
+        $[23] = caption;
+        $[24] = captionId;
+        $[25] = hasCaption;
+        $[26] = t11;
+    } else t11 = $[26];
+    let t12;
+    if ($[27] !== children || $[28] !== status) {
+        t12 = "pending" === status && /*#__PURE__*/ jsx(Part, {
+            slot: "surface",
+            "data-slot": "approval-card-surface",
+            className: approvalCardSurfaceVariants({
+                status
+            }),
+            children: children
+        });
+        $[27] = children;
+        $[28] = status;
+        $[29] = t12;
+    } else t12 = $[29];
+    let t13;
+    if ($[30] !== StatusIcon || $[31] !== approvedLabel || $[32] !== rejectedLabel || $[33] !== status) {
+        t13 = "pending" !== status && /*#__PURE__*/ jsxs(Part, {
+            slot: "status",
+            ref: statusRef,
+            tabIndex: -1,
+            "data-slot": "approval-card-status",
+            className: cn(approvalCardSurfaceVariants({
+                status
+            }), "outline-none"),
+            children: [
+                /*#__PURE__*/ jsx(StatusIcon, {
+                    size: "md",
+                    className: approvalCardStatusIconVariants({
+                        status
+                    })
+                }),
+                "approved" === status ? approvedLabel : rejectedLabel
+            ]
+        });
+        $[30] = StatusIcon;
+        $[31] = approvedLabel;
+        $[32] = rejectedLabel;
+        $[33] = status;
+        $[34] = t13;
+    } else t13 = $[34];
+    let t14;
+    if ($[35] !== t13) {
+        t14 = /*#__PURE__*/ jsx("div", {
+            role: "status",
+            children: t13
+        });
+        $[35] = t13;
+        $[36] = t14;
+    } else t14 = $[36];
+    let t15;
+    if ($[37] !== t11 || $[38] !== t12 || $[39] !== t14 || $[40] !== testId) {
+        t15 = /*#__PURE__*/ jsxs(TestIdProvider, {
+            value: testId,
+            children: [
+                t11,
+                t12,
+                t14
+            ]
+        });
+        $[37] = t11;
+        $[38] = t12;
+        $[39] = t14;
+        $[40] = testId;
+        $[41] = t15;
+    } else t15 = $[41];
+    let t16;
+    if ($[42] !== labelledBy || $[43] !== props || $[44] !== status || $[45] !== t10 || $[46] !== t15 || $[47] !== t7 || $[48] !== t8 || $[49] !== t9 || $[50] !== testId) {
+        t16 = /*#__PURE__*/ jsx("div", {
+            role: "group",
+            "aria-labelledby": labelledBy,
+            ...props,
+            ref: t7,
+            onFocus: t8,
+            onBlur: t9,
+            "data-slot": "approval-card",
+            "data-status": status,
+            "data-testid": testId,
+            className: t10,
+            children: t15
+        });
+        $[42] = labelledBy;
+        $[43] = props;
+        $[44] = status;
+        $[45] = t10;
+        $[46] = t15;
+        $[47] = t7;
+        $[48] = t8;
+        $[49] = t9;
+        $[50] = testId;
+        $[51] = t16;
+    } else t16 = $[51];
+    return t16;
+};
+ApprovalCard.displayName = "ApprovalCard";
+export { ApprovalCard };

package/dist/components/ApprovalCard/ApprovalCardActions.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface ApprovalCardActionsProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const ApprovalCardActions: FC<ApprovalCardActionsProps>;

package/dist/components/ApprovalCard/ApprovalCardActions.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { approvalCardActionsVariants } from "./classes.js";
+const ApprovalCardActions = (t0)=>{
+    const $ = c(12);
+    let className;
+    let props;
+    let ref;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = props;
+        $[3] = ref;
+        $[4] = testIdProp;
+    } else {
+        className = $[1];
+        props = $[2];
+        ref = $[3];
+        testIdProp = $[4];
+    }
+    const testId = useTestId("actions", testIdProp);
+    let t1;
+    if ($[5] !== className) {
+        t1 = cn(approvalCardActionsVariants(), className);
+        $[5] = className;
+        $[6] = t1;
+    } else t1 = $[6];
+    let t2;
+    if ($[7] !== props || $[8] !== ref || $[9] !== t1 || $[10] !== testId) {
+        t2 = /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "approval-card-actions",
+            "data-testid": testId,
+            className: t1
+        });
+        $[7] = props;
+        $[8] = ref;
+        $[9] = t1;
+        $[10] = testId;
+        $[11] = t2;
+    } else t2 = $[11];
+    return t2;
+};
+ApprovalCardActions.displayName = "ApprovalCardActions";
+export { ApprovalCardActions };

package/dist/components/ApprovalCard/ApprovalCardContent.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface ApprovalCardContentProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const ApprovalCardContent: FC<ApprovalCardContentProps>;