@multiplatform.one/components 6.7.0 → 7.0.0

package/dist/cjs/Alert/index.cjs

@@ -26,9 +26,8 @@ __export(Alert_exports, {
 });
 module.exports = __toCommonJS(Alert_exports);
 var import_react = require("react");
-var import_react_i18next = require("react-i18next");
+var import_i18n = require("../shared/i18n.cjs");
 var import_theme = require("@multiplatform.one/theme");
-var import_forms = require("@multiplatform.one/forms");
 var import_react2 = require("@phosphor-icons/react");
 var import_tamagui = require("tamagui");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -53,8 +52,10 @@ const AlertFrame = (0, import_tamagui.styled)(import_tamagui.XStack, {
   backgroundColor: "$color3",
   borderColor: "$color6"
 });
-const DISMISS_VISUAL = 20;
-const DISMISS_OUTSET = Math.ceil((import_theme.MIN_PRESS_TARGET - DISMISS_VISUAL) / 2);
+const DISMISS_ICON = 16;
+const DISMISS_ICON_COMPACT = 14;
+const DISMISS_RING_INSET = 4;
+const DISMISS_RING_INSET_COMPACT = 2;
 const DISMISS_ADJACENT_OUTSET = 6;
 const DismissButton = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "AlertDismiss",
@@ -64,23 +65,120 @@ const DismissButton = (0, import_tamagui.styled)(import_tamagui.View, {
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
-  padding: "$1",
   borderWidth: 0,
   backgroundColor: "transparent",
   borderRadius: "$2",
+  opacity: 0.7,
+  outlineWidth: 0,
+  hoverStyle: {
+    opacity: 1
+  },
+  pressStyle: {
+    opacity: 0.9
+  },
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    opacity: 1,
+    outlineWidth: 0
+  }
+});
+const DismissRing = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "AlertDismissRing",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "$1",
+  borderRadius: "$2",
   hoverStyle: {
     backgroundColor: "$color5"
+  }
+});
+const AlertActionTarget = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "AlertAction",
+  role: "button",
+  tabIndex: 0,
+  cursor: "pointer",
+  backgroundColor: "transparent",
+  borderWidth: 0,
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  opacity: 0.9,
+  outlineWidth: 0,
+  hoverStyle: {
+    opacity: 1
   },
   pressStyle: {
-    backgroundColor: "$color6"
+    opacity: 0.95
+  },
+  focusStyle: {
+    outlineWidth: 0
   },
   focusVisibleStyle: {
-    outlineWidth: 2,
-    outlineStyle: "solid",
-    outlineColor: "$color8",
-    outlineOffset: 1
+    opacity: 1,
+    outlineWidth: 0
   }
 });
+const AlertActionPill = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "AlertActionPill",
+  paddingHorizontal: "$2",
+  paddingVertical: "$1",
+  alignItems: "center",
+  justifyContent: "center",
+  hoverStyle: {
+    backgroundColor: "$color5"
+  },
+  pressStyle: {
+    backgroundColor: "$color6"
+  }
+});
+const activateOnEnterSpace = onPress => ({
+  onKeyDown: e => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault?.();
+      onPress?.();
+    }
+  }
+});
+function AlertAction({
+  label,
+  onPress,
+  nestedPx,
+  hitSlop,
+  besideAdjacent,
+  body,
+  labelType,
+  pointy,
+  radiusOuter
+}) {
+  const outset = Math.max(0, Math.ceil((import_theme.MIN_PRESS_TARGET - nestedPx) / 2));
+  const hOutset = besideAdjacent ? Math.min(outset, DISMISS_ADJACENT_OUTSET) : outset;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AlertActionTarget, {
+    className: "mp-chip-dismiss",
+    "aria-label": label,
+    ...(0, import_theme.pressTargetStyle)(),
+    marginVertical: -outset,
+    marginHorizontal: -hOutset,
+    hitSlop: besideAdjacent ? void 0 : hitSlop,
+    onPress,
+    ...activateOnEnterSpace(onPress),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AlertActionPill, {
+      className: "mp-chip-dismiss-ring",
+      minHeight: nestedPx,
+      ...radiusOuter,
+      borderRadius: pointy ? 0 : radiusOuter.borderRadius,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+        ...body,
+        ...labelType,
+        fontWeight: "600",
+        color: "$color12",
+        userSelect: "none",
+        children: label
+      })
+    })
+  });
+}
 function AlertInner({
   intent = "info",
   title,
@@ -89,6 +187,9 @@ function AlertInner({
   action,
   actionLabel,
   onAction,
+  secondaryAction,
+  secondaryActionLabel,
+  onSecondaryAction,
   dismissible = false,
   onDismiss,
   visible,
@@ -98,18 +199,27 @@ function AlertInner({
 }) {
   const {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
+  const titleId = (0, import_react.useId)();
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)({
     component: "Alert",
     compact
   });
+  if (typeof document !== "undefined") (0, import_theme.ensureCompositeFocusRing)();
   const theme = (0, import_tamagui.useTheme)();
   const iconColor = theme.color11?.get();
+  const stripeColor = theme.color9?.get();
   const [uncontrolledVisible, setUncontrolledVisible] = (0, import_react.useState)(defaultVisible);
   const shown = visible !== void 0 ? visible : uncontrolledVisible;
   if (!shown) return null;
+  const compactDensity = knobProps.density === "compact";
+  const nestedPx = knobProps.nestedControl.px;
+  const dismissIcon = compactDensity ? DISMISS_ICON_COMPACT : DISMISS_ICON;
+  const dismissInset = compactDensity ? DISMISS_RING_INSET_COMPACT : DISMISS_RING_INSET;
+  const dismissVisual = dismissIcon + dismissInset * 2;
+  const dismissOutset = Math.max(0, Math.ceil((import_theme.MIN_PRESS_TARGET - dismissVisual) / 2));
   const isTextual = n => typeof n === "string" || typeof n === "number";
   const textualChildren = children != null && (isTextual(children) || Array.isArray(children) && children.every(isTextual)) ? Array.isArray(children) ? children.join("") : String(children) : null;
   if (typeof title === "string") {
@@ -127,81 +237,119 @@ function AlertInner({
     onDismiss?.();
   };
   const IconComponent = intentIconMap[intent];
+  const iconSize = compactDensity ? 16 : 20;
   const iconNode = icon === null ? null : icon ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconComponent, {
-    size: compact ? 18 : 20,
+    size: iconSize,
     weight: "fill",
     color: iconColor
   });
-  const iconSlotHeight = compact ? 20 : 22;
-  const actionNode = action ?? (actionLabel ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-    compact: true,
+  const hasPrimary = action != null || Boolean(actionLabel);
+  const hasSecondary = secondaryAction != null || Boolean(secondaryActionLabel);
+  const hasActions = hasPrimary || hasSecondary;
+  const stackedActions = Boolean(hasActions && (title != null && children != null || hasPrimary && hasSecondary));
+  const dismissBesideAction = hasActions && !stackedActions;
+  const actionBesideAdjacent = hasSecondary || dismissBesideAction;
+  const actionShared = {
+    nestedPx,
+    hitSlop: knobProps.nestedControl.hitSlop,
+    body: knobProps.body,
+    labelType: knobProps.label,
+    pointy: knobProps.pointy,
+    radiusOuter: knobProps.borderRadiusOuter,
+    besideAdjacent: actionBesideAdjacent
+  };
+  const primaryAction = action ?? (actionLabel ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(AlertAction, {
+    label: actionLabel,
     onPress: onAction,
-    children: actionLabel
+    ...actionShared
+  }) : null);
+  const secondaryNode = secondaryAction ?? (secondaryActionLabel ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(AlertAction, {
+    label: secondaryActionLabel,
+    onPress: onSecondaryAction,
+    ...actionShared
   }) : null);
+  const actionRow = hasActions ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    flexShrink: 0,
+    flexWrap: "wrap",
+    alignItems: "center",
+    ...knobProps.gap,
+    "data-alert-actions": "",
+    children: [primaryAction, secondaryNode]
+  }) : null;
+  const assertive = intent === "error" || intent === "warning";
+  const hairline = Math.max(knobProps.borderRadius.borderWidth, 1);
+  const stripe = import_tamagui.isWeb ? {
+    style: {
+      borderInlineStartWidth: 3,
+      borderInlineStartStyle: "solid",
+      borderInlineStartColor: stripeColor
+    }
+  } : {
+    borderStartWidth: 3,
+    borderStartColor: "$color9"
+  };
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(AlertFrame, {
-    role: intent === "error" || intent === "warning" ? "alert" : "status",
-    borderRadius: knobProps.borderRadius.borderRadius,
-    borderWidth: Math.max(knobProps.borderRadius.borderWidth, 1),
-    padding: compact ? "$2.5" : knobProps.panelPadding.padding,
-    gap: compact ? "$2" : "$3",
+    role: assertive ? "alert" : "status",
+    "aria-live": assertive ? "assertive" : "polite",
+    "aria-labelledby": title != null ? titleId : void 0,
+    tabIndex: -1,
+    "data-density": knobProps.density,
+    "data-layout": stackedActions ? "stacked" : "inline",
+    "data-nested-px": nestedPx,
+    "data-accent-stripe": "3",
+    ...knobProps.borderRadius,
+    ...knobProps.panelPadding,
+    ...knobProps.gap,
+    borderColor: "$color6",
+    borderWidth: hairline,
+    ...stripe,
     transition: knobProps.transition,
     ...props,
     children: [iconNode ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       flexShrink: 0,
-      height: iconSlotHeight,
-      justifyContent: "center",
+      "aria-hidden": true,
+      marginTop: 1,
       children: iconNode
     }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
       flexGrow: 1,
       flexShrink: 1,
       gap: "$1",
       justifyContent: "center",
-      minHeight: iconSlotHeight,
+      minWidth: 0,
       children: [title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+        id: titleId,
         ...knobProps.body,
+        ...knobProps.label,
         fontWeight: "600",
         color: "$color12",
-        fontSize: compact ? "$3" : "$4",
-        lineHeight: compact ? 20 : 22,
         children: title
       }) : null, children != null && (textualChildren !== null ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
         ...knobProps.body,
+        ...knobProps.label,
         color: "$color12",
-        fontSize: compact ? "$2" : "$3",
-        lineHeight: compact ? 18 : 20,
+        fontWeight: "400",
         children: textualChildren
-      }) : children)]
-    }), actionNode ?
-    // Same first-line slot as the icon: trailing controls center on the
-    // title line, so action + dismiss share one line (Axiom 15/16 —
-    // a content-sized slot floated the action ~11px below the dismiss X).
-    /* @__PURE__ */
-    (0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      flexShrink: 0,
-      height: iconSlotHeight,
-      justifyContent: "center",
-      children: actionNode
-    }) : null, dismissible ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DismissButton, {
+      }) : children), stackedActions ? actionRow : null]
+    }), !stackedActions ? actionRow : null, dismissible ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DismissButton, {
       "aria-label": t("Dismiss"),
+      className: "mp-chip-dismiss",
       ...(0, import_theme.pressTargetStyle)(),
-      ...(actionNode ? {
-        minWidth: DISMISS_VISUAL + DISMISS_ADJACENT_OUTSET * 2
+      ...(dismissBesideAction ? {
+        minWidth: dismissVisual + DISMISS_ADJACENT_OUTSET * 2
       } : null),
-      marginVertical: -DISMISS_OUTSET,
-      marginHorizontal: -(actionNode ? DISMISS_ADJACENT_OUTSET : DISMISS_OUTSET),
-      hitSlop: actionNode ? void 0 : (0, import_theme.pressTargetHitSlop)(DISMISS_VISUAL),
+      marginVertical: -dismissOutset,
+      marginHorizontal: -(dismissBesideAction ? DISMISS_ADJACENT_OUTSET : dismissOutset),
+      hitSlop: dismissBesideAction ? void 0 : (0, import_theme.pressTargetHitSlop)(dismissVisual),
       onPress: handleDismiss,
-      ...{
-        onKeyDown: e => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault?.();
-            handleDismiss();
-          }
-        }
-      },
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
-        size: 16,
-        color: iconColor
+      ...activateOnEnterSpace(handleDismiss),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DismissRing, {
+        className: "mp-chip-dismiss-ring",
+        padding: compactDensity ? "$0.5" : "$1",
+        borderRadius: knobProps.pointy ? 0 : "$2",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
+          size: dismissIcon,
+          color: iconColor
+        })
       })
     }) : null]
   });