@scripso-homepad/ui 0.4.27 → 0.4.29

package/dist/web/index.d.cts

@@ -63,6 +63,8 @@ type AppHeaderProps = {
     notificationsIcon?: ReactNode;
     searchIcon?: ReactNode;
     buildingChevronIcon?: ReactNode;
+    /** Rendered before the building select (e.g. month period control). */
+    actions?: ReactNode;
     buildingSelectDisabled?: boolean;
     searchDisabled?: boolean;
     notificationsDisabled?: boolean;
@@ -70,7 +72,7 @@ type AppHeaderProps = {
     onNotificationsClick?: () => void;
     onSearchChange?: (value: string) => void;
 };
-declare function AppHeader({ title, labels, hasBuildingSelect, showSearch, buildingOptions, selectedBuildingId, className, buildingSelectClassName, searchClassName, notificationsButtonClassName, searchValue, searchFieldStyle, buildingIcon, notificationsIcon, searchIcon, buildingChevronIcon, buildingSelectDisabled, searchDisabled, notificationsDisabled, onBuildingChange, onNotificationsClick, onSearchChange, }: AppHeaderProps): react.JSX.Element;
+declare function AppHeader({ title, labels, hasBuildingSelect, showSearch, buildingOptions, selectedBuildingId, className, buildingSelectClassName, searchClassName, notificationsButtonClassName, searchValue, searchFieldStyle, buildingIcon, notificationsIcon, searchIcon, buildingChevronIcon, actions, buildingSelectDisabled, searchDisabled, notificationsDisabled, onBuildingChange, onNotificationsClick, onSearchChange, }: AppHeaderProps): react.JSX.Element;
 
 type BuildingSelectProps = {
     options: AdminBuildingOption[];
@@ -436,6 +438,8 @@ type ModalProps = {
     subtitle?: string;
     icon?: ReactNode;
     iconContainerClassName?: string;
+    titleClassName?: string;
+    subtitleClassName?: string;
     children: ReactNode;
     cancelText: string;
     confirmText: string;
@@ -451,7 +455,7 @@ type ModalProps = {
     contentClassName?: string;
     buttonClassName?: string;
 };
-declare function Modal({ open, title, subtitle, icon, iconContainerClassName, children, cancelText, confirmText, onCancel, onConfirm, footerAlign, footerLayout, cancelDisabled, confirmDisabled, closeOnBackdrop, closeOnEscape, containerClassName, contentClassName, buttonClassName, }: ModalProps): react.JSX.Element | null;
+declare function Modal({ open, title, subtitle, icon, iconContainerClassName, titleClassName, subtitleClassName, children, cancelText, confirmText, onCancel, onConfirm, footerAlign, footerLayout, cancelDisabled, confirmDisabled, closeOnBackdrop, closeOnEscape, containerClassName, contentClassName, buttonClassName, }: ModalProps): react.JSX.Element | null;
 
 type DrawerProps = {
     open: boolean;

package/dist/web/index.d.ts

@@ -63,6 +63,8 @@ type AppHeaderProps = {
     notificationsIcon?: ReactNode;
     searchIcon?: ReactNode;
     buildingChevronIcon?: ReactNode;
+    /** Rendered before the building select (e.g. month period control). */
+    actions?: ReactNode;
     buildingSelectDisabled?: boolean;
     searchDisabled?: boolean;
     notificationsDisabled?: boolean;
@@ -70,7 +72,7 @@ type AppHeaderProps = {
     onNotificationsClick?: () => void;
     onSearchChange?: (value: string) => void;
 };
-declare function AppHeader({ title, labels, hasBuildingSelect, showSearch, buildingOptions, selectedBuildingId, className, buildingSelectClassName, searchClassName, notificationsButtonClassName, searchValue, searchFieldStyle, buildingIcon, notificationsIcon, searchIcon, buildingChevronIcon, buildingSelectDisabled, searchDisabled, notificationsDisabled, onBuildingChange, onNotificationsClick, onSearchChange, }: AppHeaderProps): react.JSX.Element;
+declare function AppHeader({ title, labels, hasBuildingSelect, showSearch, buildingOptions, selectedBuildingId, className, buildingSelectClassName, searchClassName, notificationsButtonClassName, searchValue, searchFieldStyle, buildingIcon, notificationsIcon, searchIcon, buildingChevronIcon, actions, buildingSelectDisabled, searchDisabled, notificationsDisabled, onBuildingChange, onNotificationsClick, onSearchChange, }: AppHeaderProps): react.JSX.Element;
 
 type BuildingSelectProps = {
     options: AdminBuildingOption[];
@@ -436,6 +438,8 @@ type ModalProps = {
     subtitle?: string;
     icon?: ReactNode;
     iconContainerClassName?: string;
+    titleClassName?: string;
+    subtitleClassName?: string;
     children: ReactNode;
     cancelText: string;
     confirmText: string;
@@ -451,7 +455,7 @@ type ModalProps = {
     contentClassName?: string;
     buttonClassName?: string;
 };
-declare function Modal({ open, title, subtitle, icon, iconContainerClassName, children, cancelText, confirmText, onCancel, onConfirm, footerAlign, footerLayout, cancelDisabled, confirmDisabled, closeOnBackdrop, closeOnEscape, containerClassName, contentClassName, buttonClassName, }: ModalProps): react.JSX.Element | null;
+declare function Modal({ open, title, subtitle, icon, iconContainerClassName, titleClassName, subtitleClassName, children, cancelText, confirmText, onCancel, onConfirm, footerAlign, footerLayout, cancelDisabled, confirmDisabled, closeOnBackdrop, closeOnEscape, containerClassName, contentClassName, buttonClassName, }: ModalProps): react.JSX.Element | null;
 
 type DrawerProps = {
     open: boolean;

package/dist/web/index.js

@@ -28821,6 +28821,7 @@ function AppHeader({
   notificationsIcon,
   searchIcon,
   buildingChevronIcon,
+  actions,
   buildingSelectDisabled = false,
   searchDisabled = false,
   notificationsDisabled = false,
@@ -28838,6 +28839,7 @@ function AppHeader({
       children: [
         /* @__PURE__ */ jsx("h1", { className: "truncate typography-title text-slate-blue", children: title }),
         /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
+          actions,
           hasBuildingSelect ? /* @__PURE__ */ jsx(
             BuildingSelect,
             {
@@ -30322,6 +30324,8 @@ function Modal({
   subtitle,
   icon,
   iconContainerClassName,
+  titleClassName,
+  subtitleClassName,
   children,
   cancelText,
   confirmText,
@@ -30358,9 +30362,8 @@ function Modal({
     return null;
   }
   const sharedButtonClassName = cn(
-    "btn h-13 w-full justify-center!",
-    footerLayout === "split" && "min-w-0",
-    footerLayout !== "split" && buttonClassName
+    "btn h-13 w-full! min-w-0! justify-center!",
+    buttonClassName
   );
   const modal = /* @__PURE__ */ jsx(
     "div",
@@ -30403,7 +30406,7 @@ function Modal({
                   "h2",
                   {
                     id: "homepad-modal-title",
-                    className: "typography-title-sm tracking-normal text-black",
+                    className: cn("typography-title-sm tracking-normal text-black", titleClassName),
                     children: title
                   }
                 ),
@@ -30411,7 +30414,10 @@ function Modal({
                   "p",
                   {
                     id: "homepad-modal-subtitle",
-                    className: "typography-caption tracking-normal text-storm-gray-400",
+                    className: cn(
+                      "typography-caption tracking-normal text-storm-gray-400",
+                      subtitleClassName
+                    ),
                     children: subtitle
                   }
                 ) : null
@@ -30501,23 +30507,36 @@ function Drawer({
 }) {
   const [isPresent, setIsPresent] = useState(open);
   const [isAnimatedIn, setIsAnimatedIn] = useState(false);
+  const [isTransformSettled, setIsTransformSettled] = useState(open);
   useEffect(() => {
     if (open) {
       setIsPresent(true);
-      const frame = window.requestAnimationFrame(() => {
+      setIsTransformSettled(false);
+      const frame2 = window.requestAnimationFrame(() => {
         window.requestAnimationFrame(() => {
           setIsAnimatedIn(true);
         });
       });
+      const settleTimeout = window.setTimeout(() => {
+        setIsTransformSettled(true);
+      }, DRAWER_TRANSITION_MS);
       return () => {
-        window.cancelAnimationFrame(frame);
+        window.cancelAnimationFrame(frame2);
+        window.clearTimeout(settleTimeout);
       };
     }
-    setIsAnimatedIn(false);
+    setIsTransformSettled(false);
+    setIsAnimatedIn(true);
+    const frame = window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        setIsAnimatedIn(false);
+      });
+    });
     const timeout = window.setTimeout(() => {
       setIsPresent(false);
     }, DRAWER_TRANSITION_MS);
     return () => {
+      window.cancelAnimationFrame(frame);
       window.clearTimeout(timeout);
     };
   }, [open]);
@@ -30566,8 +30585,10 @@ function Drawer({
             "aria-labelledby": "homepad-drawer-title",
             ...subtitle ? { "aria-describedby": "homepad-drawer-subtitle" } : {},
             className: cn(
-              "relative z-10 flex h-[calc(100dvh-16px)] min-h-0 flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out will-change-transform max-md:h-dvh max-md:rounded-none",
-              isAnimatedIn ? "translate-x-0" : "translate-x-full",
+              "relative z-10 flex h-[calc(100dvh-16px)] min-h-0 flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out max-md:h-dvh max-md:rounded-none",
+              // Keep GPU transform only while animating — settled translate-x-0 blurs text.
+              !isTransformSettled && "will-change-transform",
+              isAnimatedIn ? isTransformSettled ? "transform-none" : "translate-x-0" : "translate-x-full",
               widthClassName,
               className
             ),
@@ -30906,7 +30927,10 @@ function ConfirmModal({
   if (!open) {
     return null;
   }
-  const sharedButtonClassName = cn("btn h-10 min-w-0 flex-1 justify-center!", buttonClassName);
+  const sharedButtonClassName = cn(
+    "btn h-10! w-full! min-w-0! justify-center!",
+    buttonClassName
+  );
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -30921,7 +30945,7 @@ function ConfirmModal({
           "aria-labelledby": "homepad-confirm-modal-title",
           "aria-describedby": "homepad-confirm-modal-description",
           className: cn(
-            "flex w-full max-w-md flex-col gap-8 rounded-2xl bg-white p-4 opacity-100 md:p-6",
+            "flex w-full max-w-md flex-col gap-8 rounded-3xl bg-white p-6 opacity-100 md:p-8",
             containerClassName
           ),
           onClick: (event) => {
@@ -30947,7 +30971,7 @@ function ConfirmModal({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs("footer", { className: "flex w-full gap-4", children: [
+            /* @__PURE__ */ jsxs("footer", { className: "grid w-full grid-cols-2 gap-4", children: [
               /* @__PURE__ */ jsx(
                 Button,
                 {