@scripso-homepad/ui 0.4.8 → 0.4.9

package/dist/web/index.cjs

@@ -9459,15 +9459,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 +9478,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 +9504,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 +28568,7 @@ function EyeOffIcon({
 
 // src/theme/tokens.ts
 var stormGray = {
+  "0": "#fbfcfc",
   "0.5": "#eceef0",
   "1.5": "#c7cdd1",
   "2": "#b5bcc1",
@@ -28579,15 +28580,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 +28605,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 +28617,8 @@ var fontSize = {
   sm: 12,
   md: 14};
 var fontWeight = {
-  medium: "500"};
+  medium: "500",
+  semibold: "600"};
 var fonts = {
   sans: "Noto Sans Armenian"
 };
@@ -28619,6 +28629,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;
@@ -30340,6 +30366,7 @@ var TableActionButton = react.forwardRef(
     ...props
   }, ref) {
     const isInlineAction = variant === "approve" || variant === "reject";
+    const hasLabel = Boolean(children);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -30350,6 +30377,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 +30766,437 @@ 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",
+    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-none tracking-normal text-black",
+                    children: title
+                  }
+                ),
+                subtitle ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    id: "homepad-modal-subtitle",
+                    className: "font-sans text-xs font-normal leading-none 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 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!"
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+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:
@@ -30803,9 +31262,11 @@ 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.Modal = Modal;
 exports.Pagination = Pagination;
 exports.Sidebar = Sidebar;
 exports.SidebarMobileHeader = SidebarMobileHeader;