@multiplatform.one/forms 6.7.0 → 7.1.0

package/dist/cjs/Chip/index.cjs

@@ -22,13 +22,16 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var Chip_exports = {};
 __export(Chip_exports, {
+  CHIP_DISMISS_MIN_TARGET_FINE: () => CHIP_DISMISS_MIN_TARGET_FINE,
   Chip: () => Chip,
   ChipFrame: () => ChipFrame,
   ChipText: () => ChipText,
+  chipDismissFloorOutset: () => chipDismissFloorOutset,
   chipIconSize: () => chipIconSize
 });
 module.exports = __toCommonJS(Chip_exports);
-var import_react = require("@phosphor-icons/react");
+var import_react = require("react");
+var import_react2 = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
 var import_t = require("../shared/t.cjs");
@@ -36,67 +39,110 @@ var import_jsx_runtime = require("react/jsx-runtime");
 const colorMap = {
   gray: {
     bg: "$color4",
+    fill: "$color8",
     text: "$color12",
-    border: "$color7"
+    border: "$color7",
+    dismissHover: "$color6",
+    dismissPress: "$color7"
   },
   red: {
     bg: "$red4",
+    fill: "$red8",
     text: "$red12",
-    border: "$red7"
+    border: "$red7",
+    dismissHover: "$red6",
+    dismissPress: "$red7"
   },
   green: {
     bg: "$green4",
+    fill: "$green8",
     text: "$green12",
-    border: "$green7"
+    border: "$green7",
+    dismissHover: "$green6",
+    dismissPress: "$green7"
   },
   blue: {
     bg: "$blue4",
+    fill: "$blue8",
     text: "$blue12",
-    border: "$blue7"
+    border: "$blue7",
+    dismissHover: "$blue6",
+    dismissPress: "$blue7"
   },
   yellow: {
     bg: "$yellow4",
+    fill: "$yellow8",
     text: "$yellow12",
-    border: "$yellow7"
+    border: "$yellow7",
+    dismissHover: "$yellow6",
+    dismissPress: "$yellow7"
   },
   orange: {
     bg: "$orange4",
+    fill: "$orange8",
     text: "$orange12",
-    border: "$orange7"
+    border: "$orange7",
+    dismissHover: "$orange6",
+    dismissPress: "$orange7"
   },
   purple: {
     bg: "$purple4",
+    fill: "$purple8",
     text: "$purple12",
-    border: "$purple7"
+    border: "$purple7",
+    dismissHover: "$purple6",
+    dismissPress: "$purple7"
   }
 };
+function resolveVariant(variant) {
+  if (variant === "filled") return "solid";
+  if (variant === "outlined") return "outline";
+  if (variant === "ghost") return "subtle";
+  return variant ?? "subtle";
+}
+const CHIP_RECIPE_FAMILY = "controlCompact";
+const CHIP_SIZE_TOKENS = ["$2", "$3", "$4", "$5"];
+function chipPadY(paddingHorizontal) {
+  return Math.round(paddingHorizontal * 0.25);
+}
+function chipFrameGeometry(token) {
+  const recipe = (0, import_theme.sizeRecipeForToken)(token, {
+    family: CHIP_RECIPE_FAMILY
+  });
+  return {
+    paddingHorizontal: recipe.paddingHorizontal,
+    paddingVertical: chipPadY(recipe.paddingHorizontal),
+    gap: recipe.gap
+  };
+}
+const chipFrameVariants = Object.fromEntries(CHIP_SIZE_TOKENS.map(token => [token, chipFrameGeometry(token)]));
+const chipTextVariants = Object.fromEntries(CHIP_SIZE_TOKENS.map(token => [token, {
+  fontSize: (0, import_theme.sizeRecipeForToken)(token, {
+    family: CHIP_RECIPE_FAMILY
+  }).fontSize
+}]));
+const chipDismissVariants = Object.fromEntries(CHIP_SIZE_TOKENS.map(token => {
+  const {
+    paddingHorizontal,
+    paddingVertical
+  } = chipFrameGeometry(token);
+  return [token, {
+    marginVertical: -paddingVertical,
+    marginInlineEnd: -paddingHorizontal
+  }];
+}));
 const ChipFrame = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "Chip",
   flexDirection: "row",
   alignItems: "center",
-  gap: "$1",
   // Radius comes from the knob spread in Chip (knobProps.borderRadius) so the
   // borderRadius knob wins — no hardcoded base radius (same as Tags chips).
-  paddingHorizontal: "$2.5",
-  paddingVertical: "$1",
+  ...chipFrameVariants.$3,
+  overflow: "visible",
   variants: {
     size: {
-      $2: {
-        paddingHorizontal: "$1.5",
-        paddingVertical: "$0.5"
-      },
-      $3: {
-        paddingHorizontal: "$2",
-        paddingVertical: "$1"
-      },
-      $4: {
-        paddingHorizontal: "$2.5",
-        paddingVertical: "$1"
-      },
-      $5: {
-        paddingHorizontal: "$3",
-        paddingVertical: "$1.5"
-      }
+      ...chipFrameVariants,
+      "...size": val => chipFrameGeometry(String(val ?? "$3"))
     },
     variant: {
       solid: {},
@@ -113,71 +159,155 @@ const ChipFrame = (0, import_tamagui.styled)(import_tamagui.View, {
 });
 const ChipText = (0, import_tamagui.styled)(import_tamagui.Text, {
   name: "ChipText",
-  fontSize: "$2",
   fontWeight: "500",
   numberOfLines: 1,
   userSelect: "none",
+  ...chipTextVariants.$3,
   variants: {
     size: {
-      $2: {
-        fontSize: "$1"
-      },
-      $3: {
-        fontSize: "$2"
-      },
-      $4: {
-        fontSize: "$3"
-      },
-      $5: {
-        fontSize: "$3"
-      }
+      ...chipTextVariants,
+      "...size": val => ({
+        fontSize: (0, import_theme.sizeRecipeForToken)(String(val ?? "$3"), {
+          family: CHIP_RECIPE_FAMILY
+        }).fontSize
+      })
     }
   }
 });
+const ChipBody = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "ChipBody",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: chipFrameVariants.$3.gap,
+  minWidth: 0,
+  flexShrink: 1,
+  backgroundColor: "transparent",
+  outlineWidth: 0,
+  cursor: "pointer",
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0
+  }
+});
 function chipIconSize(size) {
-  return size === "$2" ? 10 : size === "$3" ? 12 : 14;
+  return (0, import_theme.sizeRecipeForToken)(size, {
+    family: CHIP_RECIPE_FAMILY
+  }).iconSize;
+}
+const CHIP_DISMISS_MIN_TARGET_FINE = 24;
+function chipDismissFloorOutset(side) {
+  return Math.max(0, (CHIP_DISMISS_MIN_TARGET_FINE - side) / 2);
 }
 const DismissButton = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "ChipDismiss",
   cursor: "pointer",
   opacity: 0.7,
-  borderRadius: "$1",
-  // Visual glyph stays ~icon-sized; DG-LAY-04 floor is applied at the call site
-  // via pressTargetStyle + compensating negative margin + hitSlop.
-  padding: "$0.5",
-  marginInlineEnd: -4,
   alignItems: "center",
   justifyContent: "center",
+  flexShrink: 0,
+  alignSelf: "stretch",
+  // Containing block for the absolute hit-area overlay below.
+  position: "relative",
+  outlineWidth: 0,
   hoverStyle: {
-    opacity: 1,
-    backgroundColor: "$color5"
+    opacity: 1
   },
   pressStyle: {
-    opacity: 0.9,
-    backgroundColor: "$color6"
+    opacity: 0.9
+  },
+  focusStyle: {
+    outlineWidth: 0
   },
+  // Shared house ring recipe (2px solid $outlineColor, −2 inset) — the
+  // inset ring hugs the circular end-cap target.
   focusVisibleStyle: {
     opacity: 1,
-    outlineColor: "$outlineColor",
-    outlineWidth: 2,
-    outlineStyle: "solid"
+    ...import_theme.FOCUS_VISIBLE_RING
+  },
+  variants: {
+    // Mirrors the ChipFrame size variants NEGATED (derived from the same
+    // generated recipe geometry): the vertical margins cancel paddingVertical
+    // (stretch then spans the full pill height) and the inline-end margin
+    // cancels paddingHorizontal (the square hugs the pill's right edge).
+    size: {
+      ...chipDismissVariants,
+      "...size": val => {
+        const {
+          paddingHorizontal,
+          paddingVertical
+        } = chipFrameGeometry(String(val ?? "$3"));
+        return {
+          marginVertical: -paddingVertical,
+          marginInlineEnd: -paddingHorizontal
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$3"
   }
 });
+const DismissRing = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "ChipDismissRing",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "$0.5",
+  outlineWidth: 0,
+  hoverStyle: {
+    backgroundColor: "$color5"
+  }
+});
+const CHIP_RING_STYLE_ID = "mp-chip-focus-ring";
+const chipFocusRingCss = `/* LC-71: Chip body \u2192 pill ring; dismiss \u2192 glyph (see mp-chip-dismiss-ring). */
+.mp-chip:has(.mp-chip-body:focus-visible),
+[data-mp-chip]:has(.mp-chip-body:focus-visible) {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText)) !important;
+  outline-offset: 2px !important;
+}
+.mp-chip-body,
+.mp-chip-body:focus,
+.mp-chip-body:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}`;
+function ensureChipFocusRing() {
+  if (typeof document === "undefined") return;
+  (0, import_theme.ensureCompositeFocusRing)();
+  if (document.getElementById(CHIP_RING_STYLE_ID)) return;
+  const tag = document.createElement("style");
+  tag.id = CHIP_RING_STYLE_ID;
+  tag.textContent = chipFocusRingCss;
+  document.head.appendChild(tag);
+}
 function Chip({
   children,
   size,
-  variant = "subtle",
+  variant: variantProp = "subtle",
   color = "gray",
   onDismiss,
-  disabled
+  disabled,
+  selected = false,
+  onPress,
+  icon,
+  groupPosition,
+  groupOrientation = "horizontal"
 }) {
   const {
     knobProps,
     disabledState
   } = (0, import_theme.useResolvedKnobs)();
+  const variant = resolveVariant(variantProp);
   const colors = colorMap[color];
+  const [dismissSide, setDismissSide] = (0, import_react.useState)(null);
+  const dismissFloorOutset = dismissSide ? chipDismissFloorOutset(dismissSide) : 0;
   const resolvedSize = size ?? knobProps.sizeToken;
+  if (import_tamagui.isWeb) ensureChipFocusRing();
+  const interactive = Boolean(!disabled && (onPress || onDismiss));
+  const label = typeof children === "string" ? children : void 0;
   const getBackgroundColor = () => {
+    if (selected) return colors.fill;
     switch (variant) {
       case "solid":
         return colors.bg;
@@ -188,37 +318,108 @@ function Chip({
     }
   };
   const textColor = colors.text;
-  const borderColor = variant === "outline" ? colors.border : "transparent";
+  const borderColor = selected ? "transparent" : variant === "outline" ? colors.border : "transparent";
   const iconSize = chipIconSize(resolvedSize);
-  const dismissVisual = iconSize + 2;
-  const dismissOutset = Math.max(0, Math.ceil((import_theme.MIN_PRESS_TARGET - dismissVisual) / 2));
+  const theme = (0, import_tamagui.useTheme)();
+  const glyphInk = theme[textColor.replace("$", "")]?.val ?? "currentColor";
+  const dismissLabel = typeof children === "string" || typeof children === "number" ? (0, import_t.t)("Remove {{label}}", {
+    label: String(children)
+  }) : (0, import_t.t)("Remove");
+  const leading = icon !== void 0 ? icon : selected ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CheckIcon, {
+    size: iconSize,
+    color: textColor
+  }) : null;
+  const onBodyKeyDown = e => {
+    if ((e.key === "Enter" || e.key === " ") && onPress) {
+      e.preventDefault();
+      e.stopPropagation();
+      onPress();
+    } else if ((e.key === "Backspace" || e.key === "Delete") && onDismiss) {
+      e.preventDefault();
+      e.stopPropagation();
+      onDismiss();
+    }
+  };
+  const labelRow = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [leading, /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChipText, {
+      size: resolvedSize,
+      color: textColor,
+      ...knobProps.body,
+      ...(disabled ? disabledState.textKnobProps : void 0),
+      children
+    })]
+  });
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ChipFrame, {
     size: resolvedSize,
     variant,
     backgroundColor: getBackgroundColor(),
     ...knobProps.borderRadius,
+    ...(groupPosition ? {
+      borderRadius: 0,
+      ...(0, import_theme.stackRadiusProps)(groupPosition, knobProps.borderRadius.borderRadius, groupOrientation)
+    } : void 0),
     borderColor,
+    ...(selected ? {
+      borderWidth: 0
+    } : void 0),
     ...(disabled ? {
       "aria-disabled": true,
       ...disabledState.surfaceKnobProps,
       ...disabledState.assemblyKnobProps
     } : void 0),
     overflow: "visible",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ChipText, {
-      size: resolvedSize,
-      color: textColor,
-      ...knobProps.body,
-      ...(disabled ? disabledState.textKnobProps : void 0),
-      children
-    }), onDismiss && !disabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(DismissButton, {
+    cursor: interactive ? "pointer" : void 0,
+    "data-mp-chip": "",
+    "data-selected": selected ? "true" : void 0,
+    "data-group-position": groupPosition,
+    ...(import_tamagui.isWeb ? {
+      className: "mp-chip",
+      tabIndex: -1
+    } : {
+      focusable: interactive
+    }),
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: import_tamagui.isWeb ? {
+      outlineWidth: 0
+    } : interactive ? (0, import_theme.ensureFocusVisibleRing)() : {
+      outlineWidth: 0
+    },
+    ...(onPress && !disabled ? {
+      onPress: () => onPress(),
+      pressStyle: {
+        opacity: 0.88
+      }
+    } : void 0),
+    children: [import_tamagui.isWeb && interactive ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChipBody, {
+      className: "mp-chip-body",
+      "data-mp-chip-body": "",
+      role: "button",
+      tabIndex: 0,
+      "aria-label": label,
+      "aria-pressed": onPress ? selected : void 0,
+      onKeyDown: onBodyKeyDown,
+      ...(onPress ? {
+        onPress: e => {
+          e.stopPropagation?.();
+          onPress();
+        }
+      } : void 0),
+      children: labelRow
+    }) : labelRow, onDismiss && !disabled && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(DismissButton, {
       role: "button",
-      "aria-label": (0, import_t.t)("Remove"),
+      "aria-label": dismissLabel,
       tabIndex: 0,
+      className: "mp-chip-dismiss",
+      size: resolvedSize,
       borderRadius: knobProps.pointy ? 0 : 1e3,
-      ...(0, import_theme.pressTargetStyle)(),
-      marginVertical: -dismissOutset,
-      marginHorizontal: -dismissOutset,
-      hitSlop: (0, import_theme.pressTargetHitSlop)(dismissVisual),
+      hitSlop: (0, import_theme.pressTargetHitSlop)(CHIP_DISMISS_MIN_TARGET_FINE),
+      width: dismissSide ?? void 0,
+      onLayout: e => {
+        const h = e.nativeEvent.layout.height;
+        if (h > 0 && Math.abs((dismissSide ?? 0) - h) > 0.5) setDismissSide(h);
+      },
       onPress: e => {
         e.stopPropagation?.();
         onDismiss();
@@ -230,10 +431,26 @@ function Chip({
           onDismiss();
         }
       },
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-        size: iconSize,
-        color: textColor
-      })
+      children: [dismissFloorOutset > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        position: "absolute",
+        top: -dismissFloorOutset,
+        bottom: -dismissFloorOutset,
+        left: -dismissFloorOutset,
+        right: -dismissFloorOutset
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DismissRing, {
+        className: "mp-chip-dismiss-ring",
+        borderRadius: knobProps.pointy ? 0 : 1e3,
+        hoverStyle: {
+          backgroundColor: colors.dismissHover
+        },
+        pressStyle: {
+          backgroundColor: colors.dismissPress
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
+          size: iconSize,
+          color: glyphInk
+        })
+      })]
     })]
   });
 }