@scripso-homepad/ui 0.4.8 → 0.4.10

package/dist/web/index.cjs

@@ -8,6 +8,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var reactRouterDom = require('react-router-dom');
+var sonner = require('sonner');
+require('sonner/dist/styles.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -5381,7 +5383,7 @@ var require_react_dom_production_min = __commonJS({
       if (5 === d || 6 === d) a = a.stateNode, b ? c.insertBefore(a, b) : c.appendChild(a);
       else if (4 !== d && (a = a.child, null !== a)) for (Wj(a, b, c), a = a.sibling; null !== a; ) Wj(a, b, c), a = a.sibling;
     }
-    var X2 = null;
+    var X3 = null;
     var Xj = false;
     function Yj(a, b, c) {
       for (c = c.child; null !== c; ) Zj(a, b, c), c = c.sibling;
@@ -5395,23 +5397,23 @@ var require_react_dom_production_min = __commonJS({
         case 5:
           U || Lj(c, b);
         case 6:
-          var d = X2, e = Xj;
-          X2 = null;
+          var d = X3, e = Xj;
+          X3 = null;
           Yj(a, b, c);
-          X2 = d;
+          X3 = d;
           Xj = e;
-          null !== X2 && (Xj ? (a = X2, c = c.stateNode, 8 === a.nodeType ? a.parentNode.removeChild(c) : a.removeChild(c)) : X2.removeChild(c.stateNode));
+          null !== X3 && (Xj ? (a = X3, c = c.stateNode, 8 === a.nodeType ? a.parentNode.removeChild(c) : a.removeChild(c)) : X3.removeChild(c.stateNode));
           break;
         case 18:
-          null !== X2 && (Xj ? (a = X2, c = c.stateNode, 8 === a.nodeType ? Kf(a.parentNode, c) : 1 === a.nodeType && Kf(a, c), bd(a)) : Kf(X2, c.stateNode));
+          null !== X3 && (Xj ? (a = X3, c = c.stateNode, 8 === a.nodeType ? Kf(a.parentNode, c) : 1 === a.nodeType && Kf(a, c), bd(a)) : Kf(X3, c.stateNode));
           break;
         case 4:
-          d = X2;
+          d = X3;
           e = Xj;
-          X2 = c.stateNode.containerInfo;
+          X3 = c.stateNode.containerInfo;
           Xj = true;
           Yj(a, b, c);
-          X2 = d;
+          X3 = d;
           Xj = e;
           break;
         case 0:
@@ -5468,23 +5470,23 @@ var require_react_dom_production_min = __commonJS({
           a: for (; null !== h; ) {
             switch (h.tag) {
               case 5:
-                X2 = h.stateNode;
+                X3 = h.stateNode;
                 Xj = false;
                 break a;
               case 3:
-                X2 = h.stateNode.containerInfo;
+                X3 = h.stateNode.containerInfo;
                 Xj = true;
                 break a;
               case 4:
-                X2 = h.stateNode.containerInfo;
+                X3 = h.stateNode.containerInfo;
                 Xj = true;
                 break a;
             }
             h = h.return;
           }
-          if (null === X2) throw Error(p(160));
+          if (null === X3) throw Error(p(160));
           Zj(f, g, e);
-          X2 = null;
+          X3 = null;
           Xj = false;
           var k = e.alternate;
           null !== k && (k.return = null);
@@ -9459,15 +9461,15 @@ var require_react_dom_development = __commonJS({
           };
         }
         var warnValidStyle$1 = warnValidStyle;
-        function createDangerousStringForStyles(styles3) {
+        function createDangerousStringForStyles(styles4) {
           {
             var serialized = "";
             var delimiter = "";
-            for (var styleName in styles3) {
-              if (!styles3.hasOwnProperty(styleName)) {
+            for (var styleName in styles4) {
+              if (!styles4.hasOwnProperty(styleName)) {
                 continue;
               }
-              var styleValue = styles3[styleName];
+              var styleValue = styles4[styleName];
               if (styleValue != null) {
                 var isCustomProperty = styleName.indexOf("--") === 0;
                 serialized += delimiter + (isCustomProperty ? styleName : hyphenateStyleName(styleName)) + ":";
@@ -9478,19 +9480,19 @@ var require_react_dom_development = __commonJS({
             return serialized || null;
           }
         }
-        function setValueForStyles(node, styles3) {
+        function setValueForStyles(node, styles4) {
           var style2 = node.style;
-          for (var styleName in styles3) {
-            if (!styles3.hasOwnProperty(styleName)) {
+          for (var styleName in styles4) {
+            if (!styles4.hasOwnProperty(styleName)) {
               continue;
             }
             var isCustomProperty = styleName.indexOf("--") === 0;
             {
               if (!isCustomProperty) {
-                warnValidStyle$1(styleName, styles3[styleName]);
+                warnValidStyle$1(styleName, styles4[styleName]);
               }
             }
-            var styleValue = dangerousStyleValue(styleName, styles3[styleName], isCustomProperty);
+            var styleValue = dangerousStyleValue(styleName, styles4[styleName], isCustomProperty);
             if (styleName === "float") {
               styleName = "cssFloat";
             }
@@ -9504,9 +9506,9 @@ var require_react_dom_development = __commonJS({
         function isValueEmpty(value) {
           return value == null || typeof value === "boolean" || value === "";
         }
-        function expandShorthandMap(styles3) {
+        function expandShorthandMap(styles4) {
           var expanded = {};
-          for (var key in styles3) {
+          for (var key in styles4) {
             var longhands = shorthandToLonghand[key] || [key];
             for (var i = 0; i < longhands.length; i++) {
               expanded[longhands[i]] = key;
@@ -28568,6 +28570,7 @@ function EyeOffIcon({
 
 // src/theme/tokens.ts
 var stormGray = {
+  "0": "#fbfcfc",
   "0.5": "#eceef0",
   "1.5": "#c7cdd1",
   "2": "#b5bcc1",
@@ -28579,15 +28582,21 @@ var navy = {
 var rubyRed = {
   "0.5": "#f7dddf",
   "5": "#ae0011"};
+var emeraldGreen = {
+  "5": "#279d54"};
 var brand = {
   slateBlue: "#182e3c",
   navy: navy["5"],
-  rubyRed: rubyRed["5"]};
+  rubyRed: rubyRed["5"],
+  emeraldGreen: emeraldGreen["5"]
+};
 var colors = {
   // Brand colors
   slateBlue: brand.slateBlue,
   /** Primary brand navy — Figma Navy 5 */
   navy: brand.navy,
+  // Storm Gray — Figma scale + brand swatch
+  stormGray0: stormGray["0"],
   stormGray50: stormGray["0.5"],
   stormGray150: stormGray["1.5"],
   stormGray200: stormGray["2"],
@@ -28598,6 +28607,8 @@ var colors = {
   inputError: brand.rubyRed,
   inputOutlineFocus: navy["0.5"],
   inputOutlineError: rubyRed["0.5"],
+  /** @deprecated Use `emeraldGreen` */
+  green: brand.emeraldGreen,
   transparent: "transparent"
 };
 var radii = {
@@ -28608,7 +28619,8 @@ var fontSize = {
   sm: 12,
   md: 14};
 var fontWeight = {
-  medium: "500"};
+  medium: "500",
+  semibold: "600"};
 var fonts = {
   sans: "Noto Sans Armenian"
 };
@@ -28619,6 +28631,22 @@ var labelTypography = {
   lineHeight: fontSize.sm,
   letterSpacing: 0
 };
+var buttonTypography = {
+  lg: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: fontWeight.semibold,
+    lineHeight: 19,
+    letterSpacing: 0
+  },
+  sm: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: fontWeight.semibold,
+    lineHeight: 16,
+    letterSpacing: 0
+  }
+};
 
 // src/theme/input.ts
 var INPUT_HEIGHT = 52;
@@ -30321,10 +30349,10 @@ function TableActionsCell({ className, children, ...props }) {
 
 // src/web/components/TableActionsMenu.tsx
 var import_react_dom = __toESM(require_react_dom());
-var actionButtonClassName = "inline-flex cursor-pointer items-center gap-1 rounded-lg border border-storm-gray-50 bg-white px-3 py-2 font-sans text-xs font-medium leading-none text-storm-gray-900 transition-colors hover:bg-storm-gray-0";
+var inlineActionClassName = "inline-flex cursor-pointer items-center gap-1 rounded-lg border border-storm-gray-50 bg-white px-3 py-2 font-sans text-xs font-medium leading-none text-storm-gray-900 transition-colors hover:bg-storm-gray-0";
 var variantClasses = {
-  approve: actionButtonClassName,
-  reject: actionButtonClassName,
+  approve: inlineActionClassName,
+  reject: inlineActionClassName,
   menu: "inline-flex size-7 cursor-pointer items-center justify-center rounded-lg text-storm-gray-500 transition-colors hover:bg-storm-gray-0 hover:text-storm-gray-900"
 };
 var inlineActionIconClassName = "inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-4";
@@ -30340,6 +30368,7 @@ var TableActionButton = react.forwardRef(
     ...props
   }, ref) {
     const isInlineAction = variant === "approve" || variant === "reject";
+    const hasLabel = Boolean(children);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -30350,6 +30379,7 @@ var TableActionButton = react.forwardRef(
         "aria-label": ariaLabel,
         className: cn(
           variantClasses[variant],
+          isInlineAction && !hasLabel && "px-2",
           disabled && "cursor-not-allowed opacity-50",
           className
         ),
@@ -30738,6 +30768,817 @@ function TableIconText({ icon, children, className }) {
     }
   );
 }
+
+// src/icons/arrowUpRightPath.ts
+var ARROW_UP_RIGHT_PATH = "M14.1667 14.1668V5.8335H5.83333M14.1667 5.8335L5.83333 14.1668";
+function ArrowUpRightIcon({
+  size = 20,
+  color = "#082640",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg.Path,
+    {
+      d: ARROW_UP_RIGHT_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+var variantConfig = {
+  white: {
+    backgroundColor: colors.white,
+    textColor: colors.slateBlue,
+    iconBadgeBackgroundColor: colors.stormGray150,
+    iconColor: colors.navy
+  },
+  primary: {
+    backgroundColor: colors.navy,
+    textColor: colors.stormGray0,
+    iconBadgeBackgroundColor: colors.white,
+    iconColor: colors.navy
+  },
+  green: {
+    backgroundColor: colors.green,
+    textColor: colors.stormGray0,
+    iconBadgeBackgroundColor: colors.white,
+    iconColor: colors.green
+  },
+  gray: {
+    backgroundColor: colors.stormGray50,
+    textColor: colors.slateBlue,
+    iconBadgeBackgroundColor: colors.stormGray150,
+    iconColor: colors.navy
+  }
+};
+var sizeConfig = {
+  lg: {
+    borderRadius: 16,
+    paddingTop: 8,
+    paddingRight: 8,
+    paddingBottom: 8,
+    paddingLeft: 24,
+    paddingHorizontalCentered: 24,
+    text: buttonTypography.lg,
+    iconContainerSize: 36,
+    iconContainerRadius: 12,
+    iconContainerPadding: 8,
+    iconSize: 20
+  },
+  sm: {
+    borderRadius: 12,
+    paddingTop: 8,
+    paddingRight: 8,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingHorizontalCentered: 16,
+    text: buttonTypography.sm,
+    iconContainerSize: 32,
+    iconContainerRadius: 8,
+    iconContainerPadding: 8,
+    iconSize: 16
+  }
+};
+function Button({
+  title,
+  children,
+  onPress,
+  disabled = false,
+  variant = "primary",
+  size = "lg",
+  showIcon = false,
+  icon,
+  style,
+  textStyle,
+  className,
+  textClassName
+}) {
+  const containerRef = react.useRef(null);
+  const textRef = react.useRef(null);
+  const preset = variantConfig[variant];
+  const metrics = sizeConfig[size];
+  const label = typeof children !== "undefined" ? children : title;
+  const hasCustomChildren = typeof children !== "undefined";
+  const customIcon = icon != null && typeof icon !== "boolean" ? icon : void 0;
+  const hasIcon = showIcon || icon === true || customIcon != null;
+  const resolvedContainerClassName = [
+    reactNative.Platform.OS === "web" ? "max-md:px-4!" : "",
+    className
+  ].filter(Boolean).join(" ");
+  useApplyWebClassName(containerRef, resolvedContainerClassName || void 0);
+  useApplyWebClassName(textRef, textClassName);
+  const iconNode = customIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowUpRightIcon, { size: metrics.iconSize, color: preset.iconColor });
+  const containerStyle = [
+    styles3.base,
+    {
+      borderRadius: metrics.borderRadius,
+      backgroundColor: preset.backgroundColor,
+      paddingTop: metrics.paddingTop,
+      paddingBottom: metrics.paddingBottom,
+      paddingLeft: hasIcon ? metrics.paddingLeft : metrics.paddingHorizontalCentered,
+      paddingRight: hasIcon ? metrics.paddingRight : metrics.paddingHorizontalCentered
+    },
+    hasIcon ? styles3.withIcon : styles3.centered,
+    disabled && styles3.disabled,
+    style
+  ];
+  const labelStyle = [
+    styles3.label,
+    metrics.text,
+    { color: preset.textColor },
+    reactNative.Platform.OS === "android" ? styles3.labelAndroid : null,
+    !hasIcon && styles3.labelCentered,
+    hasIcon && styles3.labelWithIcon,
+    textStyle
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.TouchableOpacity,
+    {
+      ref: containerRef,
+      style: containerStyle,
+      onPress,
+      disabled,
+      activeOpacity: 0.7,
+      accessibilityRole: "button",
+      accessibilityState: { disabled },
+      children: [
+        hasCustomChildren ? children : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: textRef, style: labelStyle, children: label }),
+        hasIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            style: [
+              styles3.iconContainer,
+              {
+                width: metrics.iconContainerSize,
+                height: metrics.iconContainerSize,
+                borderRadius: metrics.iconContainerRadius,
+                padding: metrics.iconContainerPadding,
+                backgroundColor: preset.iconBadgeBackgroundColor
+              }
+            ],
+            children: iconNode
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var styles3 = reactNative.StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 0
+  },
+  centered: {
+    justifyContent: "center"
+  },
+  withIcon: {
+    justifyContent: "space-between"
+  },
+  disabled: {
+    opacity: 0.6
+  },
+  label: {},
+  labelAndroid: {
+    includeFontPadding: false
+  },
+  labelCentered: {
+    textAlign: "center"
+  },
+  labelWithIcon: {
+    flex: 1,
+    flexShrink: 1,
+    marginRight: 8
+  },
+  iconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }
+});
+var footerAlignClasses = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end"
+};
+function Modal({
+  open,
+  title,
+  subtitle,
+  icon,
+  iconContainerClassName,
+  children,
+  cancelText,
+  confirmText,
+  onCancel,
+  onConfirm,
+  footerAlign = "right",
+  footerLayout = "inline",
+  cancelDisabled = false,
+  confirmDisabled = false,
+  closeOnBackdrop = true,
+  containerClassName,
+  contentClassName,
+  buttonClassName
+}) {
+  react.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onCancel();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, onCancel]);
+  if (!open) {
+    return null;
+  }
+  const sharedButtonClassName = cn(
+    "btn h-13 justify-center!",
+    footerLayout === "split" && "min-w-0 flex-1 basis-0",
+    footerLayout !== "split" && buttonClassName
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-[12px] bg-storm-gray-850/40",
+      onClick: closeOnBackdrop ? onCancel : void 0,
+      role: "presentation",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": "homepad-modal-title",
+          ...subtitle ? { "aria-describedby": "homepad-modal-subtitle" } : {},
+          className: cn(
+            "flex w-full max-w-2xl flex-col gap-6 rounded-2xl bg-white p-4 opacity-100 md:p-6",
+            containerClassName
+          ),
+          onClick: (event) => {
+            event.stopPropagation();
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cn("flex", icon ? "items-center gap-2.5" : void 0), children: [
+              icon ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex size-11 shrink-0 items-center justify-center rounded-lg bg-storm-gray-50 p-3 opacity-100",
+                    iconContainerClassName
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-5 shrink-0 items-center justify-center [&>*]:size-5 [&_svg]:size-5", children: icon })
+                }
+              ) : null,
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "h2",
+                  {
+                    id: "homepad-modal-title",
+                    className: "font-sans text-lg font-bold leading-6 tracking-normal text-black",
+                    children: title
+                  }
+                ),
+                subtitle ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    id: "homepad-modal-subtitle",
+                    className: "font-sans text-xs font-normal leading-4 tracking-normal text-storm-gray-400",
+                    children: subtitle
+                  }
+                ) : null
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("min-w-0", contentClassName), children }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "footer",
+              {
+                className: cn(
+                  "flex shrink-0 gap-4",
+                  footerLayout === "split" ? "w-full" : footerAlignClasses[footerAlign]
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      title: cancelText,
+                      onPress: onCancel,
+                      variant: "gray",
+                      disabled: cancelDisabled,
+                      className: sharedButtonClassName,
+                      textClassName: "text-center!"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      title: confirmText,
+                      onPress: onConfirm,
+                      variant: "primary",
+                      disabled: confirmDisabled,
+                      className: sharedButtonClassName,
+                      textClassName: "text-center!"
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var DRAWER_TRANSITION_MS = 300;
+function Drawer({
+  open,
+  title,
+  subtitle,
+  children,
+  footer,
+  onClose,
+  closeAriaLabel = "Close",
+  widthClassName = "w-full md:w-[464px]",
+  className,
+  headerClassName,
+  contentClassName,
+  footerClassName
+}) {
+  const [isPresent, setIsPresent] = react.useState(open);
+  const [isAnimatedIn, setIsAnimatedIn] = react.useState(false);
+  react.useEffect(() => {
+    if (open) {
+      setIsPresent(true);
+      const frame = window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => {
+          setIsAnimatedIn(true);
+        });
+      });
+      return () => {
+        window.cancelAnimationFrame(frame);
+      };
+    }
+    setIsAnimatedIn(false);
+    const timeout = window.setTimeout(() => {
+      setIsPresent(false);
+    }, DRAWER_TRANSITION_MS);
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [open]);
+  react.useEffect(() => {
+    if (!isPresent) {
+      return;
+    }
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isPresent, onClose]);
+  if (!isPresent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex justify-end p-2 max-md:p-0",
+      role: "presentation",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": closeAriaLabel,
+            className: cn(
+              "absolute inset-0 bg-storm-gray-850/40 backdrop-blur-[12px] transition-opacity duration-300 ease-in-out",
+              isAnimatedIn ? "opacity-100" : "opacity-0"
+            ),
+            onClick: onClose
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "aside",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "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",
+              widthClassName,
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "header",
+                {
+                  className: cn(
+                    "flex h-[87px] shrink-0 items-start justify-between border-b border-storm-gray-50 pt-6 pr-6 pb-4 pl-6",
+                    headerClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex flex-col gap-1", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "h2",
+                        {
+                          id: "homepad-drawer-title",
+                          className: "font-sans text-[18px] font-bold leading-6 tracking-normal text-black",
+                          children: title
+                        }
+                      ),
+                      subtitle ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "p",
+                        {
+                          id: "homepad-drawer-subtitle",
+                          className: "font-sans text-sm font-normal leading-[19px] tracking-normal text-storm-gray-400",
+                          children: subtitle
+                        }
+                      ) : null
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": closeAriaLabel,
+                        className: "flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-storm-gray-400 transition-colors hover:bg-storm-gray-50 hover:text-storm-gray-600",
+                        onClick: onClose,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-5", strokeWidth: 1.75 })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "drawer-scroll-area min-h-0 flex-1 overflow-y-auto px-6 pt-6 pb-0",
+                    contentClassName
+                  ),
+                  children
+                }
+              ),
+              footer ? /* @__PURE__ */ jsxRuntime.jsx("footer", { className: cn("shrink-0 px-6 py-5", footerClassName), children: footer }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function TimelineCheckIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M13.3346 4L6.0013 11.3333L2.66797 8",
+          stroke: "#279D54",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function HistoryTimeline({ events }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "m-0 flex list-none flex-col gap-1 p-0", children: events.map((event, index) => {
+    const isLast = index === events.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-8 shrink-0 flex-col items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-[28px] border border-storm-gray-50 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx(TimelineCheckIcon, { className: "size-4 shrink-0" }) }),
+        !isLast ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "mt-1 h-[31px] w-px shrink-0 border-l border-dashed border-storm-gray-100"
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2 pt-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-sans text-sm font-medium leading-[19px] tracking-normal text-slate-blue", children: event.title }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-sans text-xs font-normal leading-4 tracking-normal text-storm-gray-300", children: event.timestamp })
+      ] })
+    ] }, event.id);
+  }) });
+}
+function ToastCloseIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M15 5L5 15M5 5L15 15",
+          stroke: "#B5BCC1",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ToastSuccessIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M20 6L9 17L4 12",
+          stroke: "#279D54",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ToastErrorIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M18 6L6 18M6 6L18 18",
+          stroke: "#AE0011",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ToastWarningIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12.0001 9.00022V13.0002M12.0001 17.0002H12.0101M21.7301 18.0002L13.7301 4.00022C13.5556 3.69243 13.3027 3.43641 12.997 3.25829C12.6913 3.08017 12.3438 2.98633 11.9901 2.98633C11.6363 2.98633 11.2888 3.08017 10.9831 3.25829C10.6774 3.43641 10.4245 3.69243 10.2501 4.00022L2.25005 18.0002C2.07373 18.3056 1.98128 18.6521 1.98206 19.0047C1.98284 19.3573 2.07683 19.7035 2.2545 20.008C2.43217 20.3126 2.6872 20.5648 2.99375 20.7391C3.30029 20.9133 3.64746 21.0034 4.00005 21.0002H20.0001C20.351 20.9999 20.6956 20.9072 20.9993 20.7315C21.3031 20.5558 21.5553 20.3033 21.7306 19.9993C21.9059 19.6954 21.9981 19.3506 21.998 18.9997C21.9979 18.6488 21.9055 18.3041 21.7301 18.0002Z",
+          stroke: "#F2A800",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ToastInfoIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
+          stroke: "#0F52C7",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ToastIconBadge({
+  tone,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `homepad-toast__icon-badge homepad-toast__icon-badge--${tone}`, children });
+}
+var homepadToastIcons = {
+  success: /* @__PURE__ */ jsxRuntime.jsx(ToastIconBadge, { tone: "success", children: /* @__PURE__ */ jsxRuntime.jsx(ToastSuccessIcon, {}) }),
+  error: /* @__PURE__ */ jsxRuntime.jsx(ToastIconBadge, { tone: "error", children: /* @__PURE__ */ jsxRuntime.jsx(ToastErrorIcon, {}) }),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(ToastIconBadge, { tone: "warning", children: /* @__PURE__ */ jsxRuntime.jsx(ToastWarningIcon, {}) }),
+  info: /* @__PURE__ */ jsxRuntime.jsx(ToastIconBadge, { tone: "info", children: /* @__PURE__ */ jsxRuntime.jsx(ToastInfoIcon, {}) }),
+  close: /* @__PURE__ */ jsxRuntime.jsx(ToastCloseIcon, {})
+};
+function Toaster({
+  className,
+  position = "bottom-right",
+  theme = "light",
+  closeButton = true,
+  gap = 12,
+  offset = 20,
+  toastOptions,
+  icons,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    sonner.Toaster,
+    {
+      className: ["homepad-toaster", className].filter(Boolean).join(" "),
+      theme,
+      position,
+      closeButton,
+      gap,
+      offset,
+      mobileOffset: 8,
+      icons: { ...homepadToastIcons, ...icons },
+      toastOptions: {
+        duration: 4e3,
+        classNames: {
+          toast: "homepad-toast",
+          title: "homepad-toast__title",
+          description: "homepad-toast__description",
+          content: "homepad-toast__content",
+          icon: "homepad-toast__icon",
+          closeButton: "homepad-toast__close",
+          ...toastOptions?.classNames
+        },
+        ...toastOptions
+      },
+      ...props
+    }
+  );
+}
+function ToasterProvider() {
+  return /* @__PURE__ */ jsxRuntime.jsx(Toaster, {});
+}
+
+// src/web/mutation-toast.ts
+async function runMutationWithToast(action, messages, options) {
+  try {
+    await action();
+    sonner.toast.success(messages.success);
+    return { success: true };
+  } catch (error) {
+    const errorMessage = options?.getErrorMessage?.(error) ?? messages.error;
+    sonner.toast.error(errorMessage);
+    return { success: false, errorMessage };
+  }
+}
+function ConfirmModal({
+  open,
+  title,
+  description,
+  cancelText,
+  confirmText,
+  onCancel,
+  onConfirm,
+  cancelDisabled = false,
+  confirmDisabled = false,
+  closeOnBackdrop = true,
+  containerClassName,
+  buttonClassName
+}) {
+  react.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onCancel();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, onCancel]);
+  if (!open) {
+    return null;
+  }
+  const sharedButtonClassName = cn("btn h-10 min-w-0 flex-1 justify-center!", buttonClassName);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-md bg-storm-gray-850/40",
+      onClick: closeOnBackdrop ? onCancel : void 0,
+      role: "presentation",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "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",
+            containerClassName
+          ),
+          onClick: (event) => {
+            event.stopPropagation();
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex flex-col gap-3 text-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  id: "homepad-confirm-modal-title",
+                  className: "font-sans text-xl font-bold leading-6.75 tracking-normal text-black",
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  id: "homepad-confirm-modal-description",
+                  className: "text-center font-sans text-sm font-normal leading-4.75 tracking-normal text-storm-gray-400",
+                  children: description
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "flex w-full gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  title: cancelText,
+                  onPress: onCancel,
+                  variant: "gray",
+                  size: "sm",
+                  disabled: cancelDisabled,
+                  className: sharedButtonClassName,
+                  textClassName: "text-center!"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  title: confirmText,
+                  onPress: onConfirm,
+                  variant: "primary",
+                  size: "sm",
+                  disabled: confirmDisabled,
+                  className: sharedButtonClassName,
+                  textClassName: "text-center!"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
 /*! Bundled license information:
 
 scheduler/cjs/scheduler.production.min.js:
@@ -30798,14 +31639,22 @@ react-dom/cjs/react-dom.development.js:
    *)
 */
 
+Object.defineProperty(exports, "toast", {
+  enumerable: true,
+  get: function () { return sonner.toast; }
+});
 exports.AppHeader = AppHeader;
 exports.Badge = Badge;
 exports.BellIcon = BellIcon;
 exports.BuildingIcon = BuildingIcon;
 exports.BuildingSelect = BuildingSelect;
+exports.ConfirmModal = ConfirmModal;
 exports.DEFAULT_TABLE_BODY_MIN_HEIGHT = DEFAULT_TABLE_BODY_MIN_HEIGHT;
 exports.DashboardLayout = DashboardLayout;
 exports.DataTable = DataTable;
+exports.Drawer = Drawer;
+exports.HistoryTimeline = HistoryTimeline;
+exports.Modal = Modal;
 exports.Pagination = Pagination;
 exports.Sidebar = Sidebar;
 exports.SidebarMobileHeader = SidebarMobileHeader;
@@ -30835,10 +31684,13 @@ exports.TableRowStatusActions = TableRowStatusActions;
 exports.TableScrollArea = TableScrollArea;
 exports.TableSortIcon = TableSortIcon;
 exports.TableStatusActionsCell = TableStatusActionsCell;
+exports.Toaster = Toaster;
+exports.ToasterProvider = ToasterProvider;
 exports.cn = cn;
 exports.getPaginationRange = getPaginationRange;
 exports.getTotalPages = getTotalPages;
 exports.getVisiblePageNumbers = getVisiblePageNumbers;
+exports.runMutationWithToast = runMutationWithToast;
 exports.tableRowDisabledCellClassName = tableRowDisabledCellClassName;
 exports.useMediaQuery = useMediaQuery;
 exports.useOnClickOutside = useOnClickOutside;