@pnp/spfx-controls-react 4.0.0-beta.1344828 → 4.0.0-beta.3798679

package/lib/controls/KPIControl/useKpiStyles.d.ts

@@ -0,0 +1,33 @@
+interface IKpiStyles {
+    iconContainer: string | undefined;
+    card: string;
+    description: string;
+    footerMetric: string;
+    footerIcon: string;
+    footerLabel: string;
+    footerValue: string;
+    footerDivider: string;
+    glowBlob: string;
+    glowBlobSuccess: string;
+    glowBlobError: string;
+    headerActionBadge: string;
+    kpiContainer: string;
+    noKpiCard: string;
+    noKpiCardContainer: string;
+    noKpiBackgroundOrb1: string;
+    noKpiBackgroundOrb2: string;
+    noKpiIconContainer: string;
+    noKpiIcon: string;
+    noKpiSparkle1: string;
+    noKpiSparkle2: string;
+    noKpiTitle: string;
+    noKpiSubtitle: string;
+    noKpiHighlight: string;
+    noKpiButtonContainer: string;
+    noKpiButton: string;
+    noKpiDecorativeLine: string;
+    footerGrid: string;
+}
+export declare const useKpiStyles: () => IKpiStyles;
+export {};
+//# sourceMappingURL=useKpiStyles.d.ts.map

package/lib/controls/KPIControl/useKpiStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKpiStyles.d.ts","sourceRoot":"","sources":["../../../src/controls/KPIControl/useKpiStyles.tsx"],"names":[],"mappings":"AAgBA,UAAU,UAAU;IAClB,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAElB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,QAAO,UAsQ/B,CAAC"}

package/lib/controls/KPIControl/useKpiStyles.js

@@ -0,0 +1,268 @@
+import { __makeTemplateObject } from "tslib";
+import { css, keyframes } from "@emotion/css";
+import { tokens } from "@fluentui/react-components";
+// Animations for NoKpisCard
+var floatAnimation = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0%, 100% { transform: translateY(0px); }\n  50% { transform: translateY(-8px); }\n"], ["\n  0%, 100% { transform: translateY(0px); }\n  50% { transform: translateY(-8px); }\n"])));
+var shimmerAnimation = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% { background-position: -200% center; }\n  100% { background-position: 200% center; }\n"], ["\n  0% { background-position: -200% center; }\n  100% { background-position: 200% center; }\n"])));
+export var useKpiStyles = function () {
+    var styles = {
+        card: css({
+            width: "100%",
+            height: "310px",
+            borderRadius: 10,
+            background: tokens.colorNeutralBackground1,
+            border: "1px solid ".concat(tokens.colorNeutralStroke1),
+            boxShadow: tokens.shadow8,
+            overflow: "visible",
+            position: "relative",
+            padding: "0px 15px !important",
+            transition: "transform 0.25s ease, box-shadow 0.25s ease",
+            "&:hover, &:focus-within": {
+                zIndex: 10,
+                transform: "translateY(-2px)",
+                boxShadow: tokens.shadow16, // deeper on hover
+            },
+        }),
+        description: css({
+            fontSize: tokens.fontSizeBase300,
+            color: tokens.colorNeutralForeground4,
+            lineHeight: tokens.lineHeightBase400,
+            position: "relative",
+            zIndex: 1,
+        }),
+        footerMetric: css({
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: tokens.spacingVerticalXXS,
+        }),
+        footerIcon: css({
+            color: tokens.colorNeutralForeground3,
+            fontSize: tokens.fontSizeBase300,
+        }),
+        footerLabel: css({
+            fontSize: tokens.fontSizeBase100,
+            color: tokens.colorNeutralForeground3,
+            textTransform: "uppercase",
+            letterSpacing: "0.8px",
+            fontWeight: tokens.fontWeightMedium,
+        }),
+        footerValue: css({
+            fontSize: tokens.fontSizeBase400,
+            fontWeight: tokens.fontWeightSemibold,
+            color: tokens.colorNeutralForeground2,
+        }),
+        footerDivider: css({
+            height: "32px",
+            borderColor: tokens.colorNeutralStroke1,
+        }),
+        glowBlob: css({
+            position: "absolute",
+            top: "-60px",
+            right: "-60px",
+            width: "180px",
+            height: "180px",
+            borderRadius: "50%",
+            pointerEvents: "none",
+            zIndex: 0,
+            filter: "blur(40px)",
+        }),
+        glowBlobSuccess: css({
+            position: "absolute",
+            top: "-40px",
+            right: "-40px",
+            width: "160px",
+            height: "160px",
+            borderRadius: "50%",
+            pointerEvents: "none",
+            zIndex: 0,
+            background: "radial-gradient(circle, ".concat(tokens.colorPaletteLightGreenBackground2, " 0%, transparent 70%)"),
+            opacity: 0.7,
+            filter: "blur(20px)",
+        }),
+        glowBlobError: css({
+            position: "absolute",
+            top: "-40px",
+            right: "-40px",
+            width: "160px",
+            height: "160px",
+            borderRadius: "50%",
+            pointerEvents: "none",
+            zIndex: 0,
+            background: "radial-gradient(circle, ".concat(tokens.colorPaletteRedBackground2, " 0%, transparent 70%)"),
+            opacity: 0.6,
+            filter: "blur(20px)",
+        }),
+        headerActionBadge: css({
+            minWidth: "32px",
+            height: "32px",
+            borderRadius: "50% !important",
+            background: "".concat(tokens.colorNeutralBackground3, " !important"), // subtle circle bg
+            border: "none !important",
+            padding: "0 !important",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        }),
+        kpiContainer: css({
+            width: "100%",
+            backgroundColor: tokens.colorNeutralBackground2,
+            borderRadius: 8,
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 280px), 1fr))",
+            gap: 16,
+            padding: 16,
+        }),
+        iconContainer: css({
+            width: 48,
+            height: 48,
+            borderRadius: 8,
+            display: "grid",
+            placeItems: "center",
+            background: tokens.colorNeutralBackgroundInverted,
+        }),
+        noKpiCard: css({
+            width: 280,
+            minHeight: 160,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        }),
+        // NoKpisCard styles
+        noKpiCardContainer: css({
+            width: "100%",
+            minWidth: "280px",
+            minHeight: "280px",
+            borderRadius: "16px",
+            background: "linear-gradient(135deg, ".concat(tokens.colorNeutralBackground1, " 0%, ").concat(tokens.colorNeutralBackground3, " 100%)"),
+            border: "1px solid ".concat(tokens.colorNeutralStroke1),
+            boxShadow: tokens.shadow16,
+            overflow: "hidden",
+            position: "relative",
+            padding: "32px",
+            transition: "transform 0.3s ease, box-shadow 0.3s ease",
+            "&:hover": {
+                transform: "translateY(-4px)",
+                boxShadow: tokens.shadow28,
+            },
+        }),
+        noKpiBackgroundOrb1: css({
+            position: "absolute",
+            top: "0px",
+            right: "0px",
+            width: "180px",
+            height: "180px",
+            borderRadius: "50%",
+            background: "radial-gradient(circle, ".concat(tokens.colorBrandBackground2, " 0%, transparent 70%)"),
+            opacity: 0.8,
+            pointerEvents: "none",
+            filter: "blur(25px)",
+            transform: "translate(30%, -30%)",
+        }),
+        noKpiBackgroundOrb2: css({
+            position: "absolute",
+            bottom: "-30px",
+            left: "-30px",
+            width: "120px",
+            height: "120px",
+            borderRadius: "50%",
+            background: "radial-gradient(circle, ".concat(tokens.colorPaletteLavenderBackground2, " 0%, transparent 70%)"),
+            opacity: 0.5,
+            pointerEvents: "none",
+            filter: "blur(20px)",
+        }),
+        noKpiIconContainer: css({
+            width: "80px",
+            height: "80px",
+            borderRadius: "20px",
+            background: "linear-gradient(135deg, ".concat(tokens.colorBrandBackground, " 0%, ").concat(tokens.colorBrandBackground2, " 100%)"),
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: "0 8px 24px ".concat(tokens.colorBrandBackground, "40"),
+            animation: "".concat(floatAnimation, " 3s ease-in-out infinite"),
+            position: "relative",
+            zIndex: 1,
+        }),
+        noKpiIcon: css({
+            fontSize: "36px",
+            color: tokens.colorNeutralForegroundOnBrand,
+        }),
+        noKpiSparkle1: css({
+            position: "absolute",
+            top: "-8px",
+            right: "-8px",
+            color: tokens.colorPaletteYellowForeground1,
+            fontSize: "20px",
+            animation: "".concat(floatAnimation, " 2s ease-in-out infinite 0.5s"),
+        }),
+        noKpiSparkle2: css({
+            position: "absolute",
+            bottom: "-4px",
+            left: "-8px",
+            color: tokens.colorPaletteLavenderForeground2,
+            fontSize: "16px",
+            animation: "".concat(floatAnimation, " 2.5s ease-in-out infinite"),
+        }),
+        noKpiTitle: css({
+            fontSize: "22px",
+            fontWeight: tokens.fontWeightSemibold,
+            color: tokens.colorNeutralForeground1,
+            marginTop: "24px",
+            textAlign: "center",
+            position: "relative",
+            zIndex: 1,
+        }),
+        noKpiSubtitle: css({
+            fontSize: "14px",
+            color: tokens.colorNeutralForeground3,
+            textAlign: "center",
+            lineHeight: "1.6",
+            maxWidth: "320px",
+            marginTop: "8px",
+            position: "relative",
+            zIndex: 1,
+        }),
+        noKpiHighlight: css({
+            background: "linear-gradient(90deg, ".concat(tokens.colorBrandForeground1, ", ").concat(tokens.colorPaletteLavenderForeground2, ", ").concat(tokens.colorBrandForeground1, ")"),
+            backgroundSize: "200% auto",
+            WebkitBackgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+            backgroundClip: "text",
+            fontWeight: tokens.fontWeightSemibold,
+            animation: "".concat(shimmerAnimation, " 3s linear infinite"),
+        }),
+        noKpiButtonContainer: css({
+            marginTop: "24px",
+            position: "relative",
+            zIndex: 1,
+        }),
+        noKpiButton: css({
+            borderRadius: "10px",
+            padding: "10px 20px",
+            fontWeight: tokens.fontWeightSemibold,
+            transition: "transform 0.2s ease",
+            "&:hover": {
+                transform: "scale(1.02)",
+            },
+        }),
+        noKpiDecorativeLine: css({
+            width: "60px",
+            height: "4px",
+            borderRadius: "2px",
+            background: "linear-gradient(90deg, ".concat(tokens.colorBrandBackground, ", ").concat(tokens.colorPaletteLavenderBackground2, ")"),
+            marginTop: "16px",
+            position: "relative",
+            zIndex: 1,
+        }),
+        footerGrid: css({
+            width: "100%",
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fit, minmax(80px, 1fr))",
+            alignItems: "center",
+        }),
+    };
+    return styles;
+};
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=useKpiStyles.js.map

package/lib/controls/KPIControl/useKpiStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKpiStyles.js","sourceRoot":"","sources":["../../../src/controls/KPIControl/useKpiStyles.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD,4BAA4B;AAC5B,IAAM,cAAc,GAAG,SAAS,2JAAA,wFAG/B,IAAA,CAAC;AAIF,IAAM,gBAAgB,GAAG,SAAS,kKAAA,+FAGjC,IAAA,CAAC;AAkCF,MAAM,CAAC,IAAM,YAAY,GAAG;IAC1B,IAAM,MAAM,GAAG;QACb,IAAI,EAAE,GAAG,CAAC;YACR,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,OAAO;YACf,YAAY,EAAE,EAAE;YAChB,UAAU,EAAE,MAAM,CAAC,uBAAuB;YAC1C,MAAM,EAAE,oBAAa,MAAM,CAAC,mBAAmB,CAAE;YACjD,SAAS,EAAE,MAAM,CAAC,OAAO;YACzB,QAAQ,EAAE,SAAS;YACnB,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,qBAAqB;YAC9B,UAAU,EAAE,6CAA6C;YACzD,yBAAyB,EAAE;gBACzB,MAAM,EAAE,EAAE;gBACV,SAAS,EAAE,kBAAkB;gBAC7B,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,kBAAkB;aAC/C;SACF,CAAC;QACF,WAAW,EAAE,GAAG,CAAC;YACf,QAAQ,EAAE,MAAM,CAAC,eAAe;YAChC,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,UAAU,EAAE,MAAM,CAAC,iBAAiB;YACpC,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,CAAC;SACV,CAAC;QACF,YAAY,EAAE,GAAG,CAAC;YAChB,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,MAAM,CAAC,kBAAkB;SAC/B,CAAC;QACF,UAAU,EAAE,GAAG,CAAC;YACd,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,QAAQ,EAAE,MAAM,CAAC,eAAe;SACjC,CAAC;QACF,WAAW,EAAE,GAAG,CAAC;YACf,QAAQ,EAAE,MAAM,CAAC,eAAe;YAChC,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,aAAa,EAAE,WAAW;YAC1B,aAAa,EAAE,OAAO;YACtB,UAAU,EAAE,MAAM,CAAC,gBAAgB;SACpC,CAAC;QACF,WAAW,EAAE,GAAG,CAAC;YACf,QAAQ,EAAE,MAAM,CAAC,eAAe;YAChC,UAAU,EAAE,MAAM,CAAC,kBAAkB;YACrC,KAAK,EAAE,MAAM,CAAC,uBAAuB;SACtC,CAAC;QACF,aAAa,EAAE,GAAG,CAAC;YACjB,MAAM,EAAE,MAAM;YACd,WAAW,EAAE,MAAM,CAAC,mBAAmB;SACxC,CAAC;QACF,QAAQ,EAAE,GAAG,CAAC;YACZ,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,OAAO;YACZ,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;YACf,YAAY,EAAE,KAAK;YACnB,aAAa,EAAE,MAAM;YACrB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,YAAY;SACrB,CAAC;QACF,eAAe,EAAE,GAAG,CAAC;YACnB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,OAAO;YACZ,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;YACf,YAAY,EAAE,KAAK;YACnB,aAAa,EAAE,MAAM;YACrB,MAAM,EAAE,CAAC;YACT,UAAU,EAAE,kCAA2B,MAAM,CAAC,iCAAiC,0BAAuB;YACtG,OAAO,EAAE,GAAG;YACZ,MAAM,EAAE,YAAY;SACrB,CAAC;QACF,aAAa,EAAE,GAAG,CAAC;YACjB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,OAAO;YACZ,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;YACf,YAAY,EAAE,KAAK;YACnB,aAAa,EAAE,MAAM;YACrB,MAAM,EAAE,CAAC;YACT,UAAU,EAAE,kCAA2B,MAAM,CAAC,0BAA0B,0BAAuB;YAC/F,OAAO,EAAE,GAAG;YACZ,MAAM,EAAE,YAAY;SACrB,CAAC;QACF,iBAAiB,EAAE,GAAG,CAAC;YACrB,QAAQ,EAAE,MAAM;YAChB,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,gBAAgB;YAC9B,UAAU,EAAE,UAAG,MAAM,CAAC,uBAAuB,gBAAa,EAAE,mBAAmB;YAC/E,MAAM,EAAE,iBAAiB;YACzB,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;SACzB,CAAC;QACF,YAAY,EAAE,GAAG,CAAC;YAChB,KAAK,EAAE,MAAM;YACb,eAAe,EAAE,MAAM,CAAC,uBAAuB;YAC/C,YAAY,EAAE,CAAC;YACf,OAAO,EAAE,MAAM;YACf,mBAAmB,EAAE,kDAAkD;YACvE,GAAG,EAAE,EAAE;YACP,OAAO,EAAE,EAAE;SAEZ,CAAC;QACF,aAAa,EAAE,GAAG,CAAC;YACjB,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,YAAY,EAAE,CAAC;YACf,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,UAAU,EAAE,MAAM,CAAC,8BAA8B;SAClD,CAAC;QACF,SAAS,EAAE,GAAG,CAAC;YACb,KAAK,EAAE,GAAG;YACV,SAAS,EAAE,GAAG;YACd,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;SACzB,CAAC;QACF,oBAAoB;QACpB,kBAAkB,EAAE,GAAG,CAAC;YACtB,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,OAAO;YACjB,SAAS,EAAE,OAAO;YAClB,YAAY,EAAE,MAAM;YACpB,UAAU,EAAE,kCAA2B,MAAM,CAAC,uBAAuB,kBAAQ,MAAM,CAAC,uBAAuB,WAAQ;YACnH,MAAM,EAAE,oBAAa,MAAM,CAAC,mBAAmB,CAAE;YACjD,SAAS,EAAE,MAAM,CAAC,QAAQ;YAC1B,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,2CAA2C;YACvD,SAAS,EAAE;gBACT,SAAS,EAAE,kBAAkB;gBAC7B,SAAS,EAAE,MAAM,CAAC,QAAQ;aAC3B;SACF,CAAC;QACF,mBAAmB,EAAE,GAAG,CAAC;YACvB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,KAAK;YACV,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;YACf,YAAY,EAAE,KAAK;YACnB,UAAU,EAAE,kCAA2B,MAAM,CAAC,qBAAqB,0BAAuB;YAC1F,OAAO,EAAE,GAAG;YACZ,aAAa,EAAE,MAAM;YACrB,MAAM,EAAE,YAAY;YACpB,SAAS,EAAE,sBAAsB;SAClC,CAAC;QACF,mBAAmB,EAAE,GAAG,CAAC;YACvB,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,OAAO;YACf,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;YACf,YAAY,EAAE,KAAK;YACnB,UAAU,EAAE,kCAA2B,MAAM,CAAC,+BAA+B,0BAAuB;YACpG,OAAO,EAAE,GAAG;YACZ,aAAa,EAAE,MAAM;YACrB,MAAM,EAAE,YAAY;SACrB,CAAC;QACF,kBAAkB,EAAE,GAAG,CAAC;YACtB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,MAAM;YACpB,UAAU,EAAE,kCAA2B,MAAM,CAAC,oBAAoB,kBAAQ,MAAM,CAAC,qBAAqB,WAAQ;YAC9G,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,SAAS,EAAE,qBAAc,MAAM,CAAC,oBAAoB,OAAI;YACxD,SAAS,EAAE,UAAG,cAAc,6BAA0B;YACtD,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,CAAC;SACV,CAAC;QACF,SAAS,EAAE,GAAG,CAAC;YACb,QAAQ,EAAE,MAAM;YAChB,KAAK,EAAE,MAAM,CAAC,6BAA6B;SAC5C,CAAC;QACF,aAAa,EAAE,GAAG,CAAC;YACjB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,MAAM;YACX,KAAK,EAAE,MAAM;YACb,KAAK,EAAE,MAAM,CAAC,6BAA6B;YAC3C,QAAQ,EAAE,MAAM;YAChB,SAAS,EAAE,UAAG,cAAc,kCAA+B;SAC5D,CAAC;QACF,aAAa,EAAE,GAAG,CAAC;YACjB,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,MAAM;YACd,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,MAAM,CAAC,+BAA+B;YAC7C,QAAQ,EAAE,MAAM;YAChB,SAAS,EAAE,UAAG,cAAc,+BAA4B;SACzD,CAAC;QACF,UAAU,EAAE,GAAG,CAAC;YACd,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,MAAM,CAAC,kBAAkB;YACrC,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,SAAS,EAAE,MAAM;YACjB,SAAS,EAAE,QAAQ;YACnB,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,CAAC;SACV,CAAC;QACF,aAAa,EAAE,GAAG,CAAC;YACjB,QAAQ,EAAE,MAAM;YAChB,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,KAAK;YACjB,QAAQ,EAAE,OAAO;YACjB,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,CAAC;SACV,CAAC;QACF,cAAc,EAAE,GAAG,CAAC;YAClB,UAAU,EAAE,iCAA0B,MAAM,CAAC,qBAAqB,eAAK,MAAM,CAAC,+BAA+B,eAAK,MAAM,CAAC,qBAAqB,MAAG;YACjJ,cAAc,EAAE,WAAW;YAC3B,oBAAoB,EAAE,MAAM;YAC5B,mBAAmB,EAAE,aAAa;YAClC,cAAc,EAAE,MAAM;YACtB,UAAU,EAAE,MAAM,CAAC,kBAAkB;YACrC,SAAS,EAAE,UAAG,gBAAgB,wBAAqB;SACpD,CAAC;QACF,oBAAoB,EAAE,GAAG,CAAC;YACxB,SAAS,EAAE,MAAM;YACjB,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,CAAC;SACV,CAAC;QACF,WAAW,EAAE,GAAG,CAAC;YACf,YAAY,EAAE,MAAM;YACpB,OAAO,EAAE,WAAW;YACpB,UAAU,EAAE,MAAM,CAAC,kBAAkB;YACrC,UAAU,EAAE,qBAAqB;YACjC,SAAS,EAAE;gBACT,SAAS,EAAE,aAAa;aACzB;SACF,CAAC;QACF,mBAAmB,EAAE,GAAG,CAAC;YACvB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,KAAK;YACb,YAAY,EAAE,KAAK;YACnB,UAAU,EAAE,iCAA0B,MAAM,CAAC,oBAAoB,eAAK,MAAM,CAAC,+BAA+B,MAAG;YAC/G,SAAS,EAAE,MAAM;YACjB,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,CAAC;SACV,CAAC;QACF,UAAU,EAAE,GAAG,CAAC;YACd,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,MAAM;YACf,mBAAmB,EAAE,qCAAqC;YAE1D,UAAU,EAAE,QAAQ;SAErB,CAAC;KACH,CAAC;IACF,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}

package/lib/controls/ListToolbar/FlatItem.d.ts

@@ -0,0 +1,7 @@
+import { IToolbarItem } from './IToolbarItem';
+export interface FlatItem {
+    type: 'item' | 'divider';
+    item?: IToolbarItem;
+    key: string;
+}
+//# sourceMappingURL=FlatItem.d.ts.map

package/lib/controls/ListToolbar/FlatItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlatItem.d.ts","sourceRoot":"","sources":["../../../src/controls/ListToolbar/FlatItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM9C,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;CACb"}

package/lib/controls/ListToolbar/FlatItem.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=FlatItem.js.map

package/lib/controls/ListToolbar/FlatItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlatItem.js","sourceRoot":"","sources":["../../../src/controls/ListToolbar/FlatItem.ts"],"names":[],"mappings":""}

package/lib/controls/ListToolbar/IListToolbarProps.d.ts

@@ -0,0 +1,27 @@
+import { BaseComponentContext } from "@microsoft/sp-component-base";
+import { IToolbarItem } from "./IToolbarItem";
+import { Theme } from "@fluentui/react";
+/**
+ * Props for the ListToolbar component
+ */
+export interface IListToolbarProps {
+    /** Array of toolbar items */
+    items: IToolbarItem[];
+    /** Far items that appear on the right side of the toolbar */
+    farItems?: IToolbarItem[];
+    /** Whether the toolbar is in a loading state */
+    isLoading?: boolean;
+    /** Aria label for the toolbar */
+    ariaLabel?: string;
+    /** Total count to display (optional) */
+    totalCount?: number;
+    /** Custom class name */
+    className?: string;
+    /** Whether to show dividers between groups */
+    showGroupDividers?: boolean;
+    /** Theme for the toolbar */
+    theme?: Theme;
+    /** Context for the web part */
+    context?: BaseComponentContext;
+}
+//# sourceMappingURL=IListToolbarProps.d.ts.map

package/lib/controls/ListToolbar/IListToolbarProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IListToolbarProps.d.ts","sourceRoot":"","sources":["../../../src/controls/ListToolbar/IListToolbarProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC;;GAEG;AAEH,MAAM,WAAW,iBAAiB;IAC9B,6BAA6B;IAC7B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,+BAA+B;IAC/B,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAClC"}

package/lib/controls/ListToolbar/IListToolbarProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IListToolbarProps.js.map

package/lib/controls/ListToolbar/IListToolbarProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IListToolbarProps.js","sourceRoot":"","sources":["../../../src/controls/ListToolbar/IListToolbarProps.tsx"],"names":[],"mappings":""}

package/lib/controls/ListToolbar/IToolbarItem.d.ts

@@ -0,0 +1,36 @@
+import { ToolbarButtonProps } from "@fluentui/react-components";
+import * as React from "react";
+/**
+ * Extended toolbar item interface
+ */
+export interface IToolbarItem {
+    /** Unique key for the item */
+    key: string;
+    /** Label text for the button */
+    label?: string;
+    /** Tooltip content */
+    tooltip?: string;
+    /** Icon element */
+    icon?: React.ReactElement;
+    /** Click handler */
+    onClick?: () => void;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Whether to show the item */
+    visible?: boolean;
+    /** Group name - items with the same group will be grouped together */
+    group?: string;
+    /** Whether this is a far item (appears on the right side) */
+    isFarItem?: boolean;
+    /** Button appearance */
+    appearance?: ToolbarButtonProps["appearance"];
+    /** Custom render function for complete control */
+    onRender?: () => React.ReactElement;
+    /** Whether to add a divider after this item */
+    dividerAfter?: boolean;
+    /** Whether to add a divider before this item */
+    dividerBefore?: boolean;
+    /** Aria label override */
+    ariaLabel?: string;
+}
+//# sourceMappingURL=IToolbarItem.d.ts.map

package/lib/controls/ListToolbar/IToolbarItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IToolbarItem.d.ts","sourceRoot":"","sources":["../../../src/controls/ListToolbar/IToolbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AAEH,MAAM,WAAW,YAAY;IACzB,8BAA8B;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mBAAmB;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB;IACxB,UAAU,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC9C,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,KAAK,CAAC,YAAY,CAAC;IACpC,+CAA+C;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/lib/controls/ListToolbar/IToolbarItem.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IToolbarItem.js.map

package/lib/controls/ListToolbar/IToolbarItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IToolbarItem.js","sourceRoot":"","sources":["../../../src/controls/ListToolbar/IToolbarItem.tsx"],"names":[],"mappings":""}

package/lib/controls/ListToolbar/IToolbarItemRendererProps.d.ts

@@ -0,0 +1,12 @@
+import { IToolbarItem } from './IToolbarItem';
+export interface IToolbarItemRendererProps {
+    /** The toolbar item to render */
+    item: IToolbarItem;
+    /** Whether the toolbar is in a loading state */
+    isLoading?: boolean;
+    /** CSS class applied to the button root */
+    itemClass?: string;
+    /** CSS class applied to the label text (e.g. to hide on mobile) */
+    labelClass?: string;
+}
+//# sourceMappingURL=IToolbarItemRendererProps.d.ts.map

package/lib/controls/ListToolbar/IToolbarItemRendererProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IToolbarItemRendererProps.d.ts","sourceRoot":"","sources":["../../../src/controls/ListToolbar/IToolbarItemRendererProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,MAAM,WAAW,yBAAyB;IACxC,iCAAiC;IACjC,IAAI,EAAE,YAAY,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/lib/controls/ListToolbar/IToolbarItemRendererProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IToolbarItemRendererProps.js.map

package/lib/controls/ListToolbar/IToolbarItemRendererProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IToolbarItemRendererProps.js","sourceRoot":"","sources":["../../../src/controls/ListToolbar/IToolbarItemRendererProps.tsx"],"names":[],"mappings":""}

package/lib/controls/ListToolbar/ListToolbar.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { IListToolbarProps } from "./IListToolbarProps";
+export declare const ListToolbar: React.FunctionComponent<IListToolbarProps>;
+//# sourceMappingURL=ListToolbar.d.ts.map

package/lib/controls/ListToolbar/ListToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.d.ts","sourceRoot":"","sources":["../../../src/controls/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAuDlE,CAAC"}

package/lib/controls/ListToolbar/ListToolbar.js

@@ -0,0 +1,72 @@
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import { __assign, __awaiter, __generator } from "tslib";
+import * as React from "react";
+import { Provider } from "jotai";
+import { has } from "lodash";
+import { FluentProvider, IdPrefixProvider, teamsDarkTheme, teamsHighContrastTheme, teamsLightTheme, } from "@fluentui/react-components";
+import { createV9Theme } from "@fluentui/react-migration-v8-v9";
+import { useTheme } from "@fluentui/react-theme-provider";
+import ListToolbarControl from "./ListToolbarControl";
+export var ListToolbar = function (props) {
+    var themeV8 = props.theme, context = props.context;
+    var _a = React.useState(), theme = _a[0], setTheme = _a[1];
+    var currentSPTheme = useTheme();
+    var _b = React.useState(false), isInitialized = _b[0], setIsInitialized = _b[1];
+    React.useEffect(function () {
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var teamsContext, teamsTheme, error_1;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 4, , 5]);
+                        if (!has(context, "sdks.microsoftTeams.teamsJs.app.getContext")) return [3 /*break*/, 2];
+                        return [4 /*yield*/, ((_a = context.sdks.microsoftTeams) === null || _a === void 0 ? void 0 : _a.teamsJs.app.getContext())];
+                    case 1:
+                        teamsContext = _b.sent();
+                        teamsTheme = teamsContext.app.theme || "default";
+                        switch (teamsTheme) {
+                            case "dark":
+                                setTheme(teamsDarkTheme);
+                                break;
+                            case "contrast":
+                                setTheme(teamsHighContrastTheme);
+                                break;
+                            case "default":
+                                setTheme(teamsLightTheme);
+                                break;
+                            default:
+                                setTheme(teamsLightTheme);
+                                break;
+                        }
+                        return [3 /*break*/, 3];
+                    case 2:
+                        if (themeV8 || currentSPTheme) {
+                            setTheme(createV9Theme(themeV8 !== null && themeV8 !== void 0 ? themeV8 : currentSPTheme));
+                        }
+                        else {
+                            setTheme(teamsLightTheme);
+                        }
+                        _b.label = 3;
+                    case 3: return [3 /*break*/, 5];
+                    case 4:
+                        error_1 = _b.sent();
+                        console.warn("ListToolbar: Failed to resolve theme, using default", error_1);
+                        setTheme(teamsLightTheme);
+                        return [3 /*break*/, 5];
+                    case 5:
+                        setIsInitialized(true);
+                        return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, [context, currentSPTheme, themeV8]);
+    if (!isInitialized)
+        return React.createElement(React.Fragment, null);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IdPrefixProvider, { value: "userPicker-" },
+            React.createElement(FluentProvider, { theme: theme },
+                React.createElement(Provider, null,
+                    React.createElement(ListToolbarControl, __assign({}, props)))))));
+};
+//# sourceMappingURL=ListToolbar.js.map

package/lib/controls/ListToolbar/ListToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.js","sourceRoot":"","sources":["../../../src/controls/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"AAAA,4DAA4D;;AAE5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,sBAAsB,EACtB,eAAe,GAEhB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAK1D,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAC,IAAM,WAAW,GAA+C,UACrE,KAAmD;IAE3C,IAAO,OAAO,GAAc,KAAK,MAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;IACpC,IAAA,KAAoB,KAAK,CAAC,QAAQ,EAAS,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAC;IAClD,IAAM,cAAc,GAAG,QAAQ,EAAE,CAAC;IAC5B,IAAA,KAAoC,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,EAAjE,aAAa,QAAA,EAAE,gBAAgB,QAAkC,CAAC;IAGzE,KAAK,CAAC,SAAS,CAAC;QACd,CAAC;;;;;;;6BAEO,GAAG,CAAC,OAAO,EAAE,4CAA4C,CAAC,EAA1D,wBAA0D;wBACvC,qBAAM,CAAA,MAAC,OAA0B,CAAC,IAAI,CAAC,cAAc,0CAAE,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,CAAA,EAAA;;wBAA9F,YAAY,GAAG,SAA+E;wBAC9F,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,IAAI,SAAS,CAAC;wBACvD,QAAQ,UAAU,EAAE,CAAC;4BACnB,KAAK,MAAM;gCACT,QAAQ,CAAC,cAAc,CAAC,CAAC;gCACzB,MAAM;4BACR,KAAK,UAAU;gCACb,QAAQ,CAAC,sBAAsB,CAAC,CAAC;gCACjC,MAAM;4BACR,KAAK,SAAS;gCACZ,QAAQ,CAAC,eAAe,CAAC,CAAC;gCAC1B,MAAM;4BACR;gCACE,QAAQ,CAAC,eAAe,CAAC,CAAC;gCAC1B,MAAM;wBACV,CAAC;;;wBACI,IAAI,OAAO,IAAI,cAAc,EAAE,CAAC;4BACrC,QAAQ,CAAC,aAAa,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,cAAc,CAAC,CAAC,CAAC;wBACrD,CAAC;6BAAM,CAAC;4BACN,QAAQ,CAAC,eAAe,CAAC,CAAC;wBAC5B,CAAC;;;;;wBAED,OAAO,CAAC,IAAI,CAAC,qDAAqD,EAAE,OAAK,CAAC,CAAC;wBAC3E,QAAQ,CAAC,eAAe,CAAC,CAAC;;;wBAE5B,gBAAgB,CAAC,IAAI,CAAC,CAAC;;;;aACxB,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvC,IAAI,CAAC,aAAa;QAAE,OAAO,yCAAK,CAAC;IAEjC,OAAO,CACL;QACE,oBAAC,gBAAgB,IAAC,KAAK,EAAC,aAAa;YACrC,oBAAC,cAAc,IAAC,KAAK,EAAE,KAAK;gBAC1B,oBAAC,QAAQ;oBACP,oBAAC,kBAAkB,eAAK,KAAK,EAAI,CACxB,CACI,CACE,CAClB,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/lib/controls/ListToolbar/ListToolbarControl.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { IListToolbarProps } from './IListToolbarProps';
+export declare const ListToolbar: React.FunctionComponent<IListToolbarProps>;
+export default ListToolbar;
+//# sourceMappingURL=ListToolbarControl.d.ts.map

package/lib/controls/ListToolbar/ListToolbarControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbarControl.d.ts","sourceRoot":"","sources":["../../../src/controls/ListToolbar/ListToolbarControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AASxD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAuMlE,CAAC;AAEF,eAAe,WAAW,CAAC"}